Actionscript 3 Designer Toolkit

Displaying multiple pages: the SelectedPage class

Charles Davis — Thu, 03 Jun 2010 13:59:07 +0000

The SelectedPage class displays a series of jpeg’s and/or swf’s one at a time. A series of buttons – one for each page – control the tweened transistion from one page to the next.

The class relies on two arrays for data. As in the sample code example below, the first array urls defines the urls of each page and the second buttonProps defines all the properties of the circular selector buttons. Button properties include the radius, horizontal spacing between each button, their offsets from the left edge and bottom of the page, outline, selected and default colors.

// import custom class
import com.dtk.SelectedPage
 
// array of page url's
var urls:Array = [ 'blue-doors.jpg', 'driveway.jpg','gray-garage.jpg', '2930.jpg', 'tow-wall.jpg'  ];
 
// array of selector button properties
var buttonProps:Array = new Array( );
buttonProps.push( { buttonRadius: 10, buttonSpacing: 30, buttonXOffset: 10, buttonYOffset: 10, 
				 	buttonLineColor: 0x222222, buttonColor: 0xffffff, selectedButtonColor: 0x9d9d9d } );
 
// new instance of SelectedPage class
// params: pageID, firstInstance, pathToPages, array of url's, pgWidth, pgHeight, array of button properties
var p:SelectedPage = new SelectedPage( 0, true, 'images/', urls, 360, 225, buttonProps );
p.x = 10;
p.y = 10;
addChild( p );

The download includes all the files required to produce the above example. SelectedPage.zip (31)

Drawing lines of alternating dots and dashes: the DashDotLine class

Charles Davis — Thu, 27 May 2010 13:59:24 +0000

A visitor asked whether the DashedLine class could be modified to create lines composed of alternating dots and dashes; so I went ahead and modified the class. The new DashDotLine class constructor includes parameters for total length of the line, dash and dot widths, spacing between the dashes and dots and line weight and color.

The core of the the DashDotLine class is a while loop that repetitively draws a dash, adds a space, draws a dot and adds another space. This is repeated until the length of the newly drawn line exceeds the line length specified as a constructor parameter.

// container to hold all dots & dashes
var line:Sprite = new Sprite( );
 
// initialize starting point of line
xPos = 0;
 
// loop through drawing dashes & dots
while ( xPos < lineLength )
{
	// draw dash
	var dash:Sprite = new Sprite( );
	dash.graphics.beginFill( lineColor );
	dash.graphics.drawRect( xPos, 0, dashWidth, lineWeight );
	dash.graphics.endFill( );
	line.addChild( dash );
 
	// increment xPos by dash width + spacing
	xPos += ( dashWidth + spacing );
 
	// draw dot
	var dot:Sprite = new Sprite( );
	dot.graphics.beginFill( lineWeight );
	dot.graphics.drawRect( xPos, 0, dotWidth, lineWeight );
	dot.graphics.endFill( );
	line.addChild( dot );
 
	// increment xPos by dot width + spacing
	xPos += ( dotWidth + spacing );
}
addChild( line );

Use the code below to create an instance of the class. Note: to make the line vertical use the rotation property.

import com.dtk.DashDotLine;
 
// new instance with parameters line length, dash width, dot width, spacing, line weight, line color
var line:DashDotLine = new DashDotLine ( 360, 16, 7, 4, 2, 0x000000 );
line.x = 20;
line.y = 20;
line.rotation = 90;  // option to make the line vertical
addChild( line );

Download files: DashDotLine.as (45)

Removing class instances

Charles Davis — Thu, 20 May 2010 14:57:48 +0000

A reader recently inquired if it was necessary to remove previously created class instances which were no longer being used. The simple answer is yes because it frees up memory – but there may be other reasons as well.

// import custom classes
import com.dtk.ImageLoader;
import com.dtk.HTMLTitle;
import com.dtk.SelectedImageEvent;
 
// load first image & title
dispatchEvent( new SelectedImageEvent( SelectedImageEvent.IMAGE_SELECTED, 0 ));
 
/**
 *	display image and title of image
 *
 */
function imageHandler( e:SelectedImageEvent ):void
{
        // remove class instances from screen
	removeFromView( 'image' );
	removeFromView( 'title' );
 
	// display large image
	var vw:ImageViewer = new ImageViewer( e.imageID, 420, 420 );
	vw.x = xImage;
	vw.y = yImage;
	vw.addEventListener( SelectedImageEvent.IMAGE_SELECTED, imageHandler );
	vw.name = 'image';
	addChild( vw );
 
	// display title of image
	var it:HTMLTitle = new HTMLTitle( e.imageID, 'Verdana', 13, 0x666666, 'LEFT' );
	it.x = xTitle;
	it.y = yTitle;
	it.name = 'title';
	addChild( it );
}
 
 
/**
 *	remove named class instance
 *
 */
function removeFromView( className:String ):void
{
	// loop through all existing instances
	for ( var i:uint=0; i<numChildren; i++ )
	{
		// test for match to var className
		if ( getChildAt(i).name == className )
		{
			// remove instance
			removeChildAt(i);
		}
	}
}

In the above code snippet, the ImageViewer and the HTMLTitle classes are used to display an image and its title. Additional functionality allows the user to click on the image to load the next image and title. If all the images are the same size only the top image is visible; but, if the images vary in size, then portions of previously loaded images will be visible.

In this case, the removeFromView( ) function is required to clear the screen of images that may otherwise overlap.

Displaying slides: the SlideShow class

Charles Davis — Wed, 12 May 2010 14:45:18 +0000

The SlideShow class is a simple means for displaying jpeg images one at a time. The class has built in next and previous buttons and shows the slide number displayed and total number of slides.

The Flash file below implements the slideshow above. After importing the SlideShow class, an array slides defines the url, width and height of each slide to be displayed. The containing frame’s dimensions – always equal to or larger than the slides – is then defined along with its fill and border color.

import com.dtk.SlideShow;
 
// array of slides to display with url, width & height
var slides:Array = new Array( );
slides.push( { url: 'http://www.as3dtk.com/swf/wp-images/2930.jpg', width: 200, height: 125 } );
slides.push( { url: 'http://www.as3dtk.com/swf/wp-images/blue-corrugated.jpg', width: 200, height: 125 } );
slides.push( { url: 'http://www.as3dtk.com/swf/wp-images/blue-doors.jpg', width: 200, height: 125 } );
slides.push( { url: 'http://www.as3dtk.com/swf/wp-images/gate.jpg', width: 125, height: 200 } );
slides.push( { url: 'http://www.as3dtk.com/swf/wp-images/gray-garage.jpg', width: 200, height: 125 } );
slides.push( { url: 'http://www.as3dtk.com/swf/wp-images/window.jpg', width: 125, height: 200 } );
 
// containing frame dimensions, fill & line color
var frameWidth:uint     = 200;
var frameHeight:uint    = 200;
var frameBGColor:uint   = 0xeeeeee;
var frameLineColor:uint = 0x999999;
 
// instance of SlideShow class
var ss:SlideShow = new SlideShow( slides, frameWidth, frameWidth, frameBGColor, frameLineColor );
ss.x = 10;
ss.y = 10;
addChild( ss );

Download files: SlideShow.zip (41)

Using patterned backgrounds and masks: the Perf class

Charles Davis — Tue, 04 May 2010 13:25:37 +0000

The Perf class draws a regular grid of either squares or circles that can then be applied as either a background or as a mask. The parameters of the class constructor determine whether the pattern is composed of squares or circles, the spacing and size of the pattern and its color and transparency.

The top instance above is a circular gray pattern with a transparency of .4 and the bottom instance is a square pattern which is then applied as a mask over the jpeg image. The download includes the code below and the 2 classes used.

// import required dtk classes
import com.dtk.Perf;
import com.dtk.ImageLoader;
 
// black rectangle
var bg:Sprite = new Sprite( );
bg.graphics.beginFill( 0x000000 );
bg.graphics.drawRect( 100, 42, 200, 76 );
bg.graphics.endFill( );
addChild( bg );
 
// Perf instance with gray, transparent circles on top of black rectangle
var pf1:Perf = new Perf( 40, 36, false, 0xcccccc, .4, 400, 160 );
pf1.x = 0;
pf1.y = 0;
addChild( pf1 );
 
// load jpeg as background
var im:ImageLoader = new ImageLoader( 'images/garage.jpg', 400, 160, 0xff0000 );
im.x =   0;
im.y = 160;
addChild( im );
 
// Perf instance with square pattern to be used as mask
var pf2:Perf = new Perf( 40, 36, true, 0xff0000, 1, 400, 160 );
pf2.x =   0;
pf2.y = 160;
addChild( pf2 );
 
// mask image with Perf instance
im.mask = pf2;

Perf.zip (39)

Drawing a checkerboard background: the Checkerboard class

Charles Davis — Tue, 27 Apr 2010 13:48:16 +0000

This post introduces the Checkerboard drawing class. It is a simple and easy to use class that relies on Flash’s BitmapData class to draw the patterns.

The code below implements the image above. Notice that where the text instances are instanciated determines their z-order and, therefore, their positions relative to the checkerboard. The Checkerboard class included in the download below is well commented (refer to the class for an explanation of the constructor parameters required).

// import required dtk classes
import com.dtk.Checkerboard;
import com.dtk.HTMLText;
 
// display text behind checkerboard
var b:HTMLText = new HTMLText( 300, 'Times New Roman', 48, 0x000000, 'LEFT', 'Below' );
b.x = 100;
b.y =  30;
addChild( b );
 
// draw checkerboard pattern
var cb:Checkerboard = new Checkerboard( 20, 0xffcc00, 0x000000, 480, 180 );
cb.x = 0;
cb.y = 0;
cb.alpha = .5;  // optional
addChild( cb );
 
// display text in front of checkerboard
var a:HTMLText = new HTMLText( 300, 'Times New Roman', 48, 0x000000, 'LEFT', 'Above' );
a.x = 200;
a.y =  80;
addChild( a );

Checkerboard.zip (45)

Submit your site

Charles Davis — Tue, 20 Apr 2010 14:00:18 +0000

Since the Actionscript 3 Designer Toolkit came online – over eight months ago – visitors to this website have downloaded the posted code snippets and custom classes several thousand times.

If you are a designer/developer who has used one or more of the AS3DTK custom classes in a website you built, please let us know. Send the url of the site and perhaps a short description of how you applied the class(es) on the site. Submitted urls will then be listed on a special page with your name and email (optional).

Also, if you have any ideas or suggestions for future posts let us know.

To respond, you may add a comment or email me csdavis@sent.com.

Applying the DropDownMenus class

Charles Davis — Tue, 13 Apr 2010 13:19:15 +0000

In this post, the DropDownMenus class is used to form a group of horizontally arranged dropdown menus. Several changes have been made to the class to enable multiple instances to work more efficently together (changes detailed below).

The first change is a new parameter menuID added to the class constructor. Each instance gets a different value – each a multiple of 10 – and is used to identify both the menu and submenu item selected. Refer to the onMenuTabSelected function in the .fla to see the logic that decodes both the menu and submenu id.

A second change made is that rather than passing the constructor an array named tabs, the constructor is passed a single element of the array tabs which is a string composed of a comma separated list of submenu tab titles. This list is then converted back to an array within the class.

A final change is that rather than passing the constructor a separate title for each menu, an array of all the titles is passed. The class itself then, extracts the proper title based on its index.

// import required classes
import com.dtk.DropDownMenus;
import com.dtk.MenuTabSelected;
import caurina.transitions.*;
 
// init vars passed to class instance
var bgWidth:uint  = 156;
var bgHeight:uint =  60;
var bgColor:uint  = 0x1073d1;
var spacing:uint  =   3;
 
// starting y position of topmost menus
var xStart:uint = 10;
var xPos:uint   = xStart;
var yPos:uint   = 0;
 
// array of menu titles
var titles:Array = [ 'Video', 'Audio', 'Car' ];
 
 
// array of submenu tab titles
var tabs:Array = new Array( );
 
// each array entry is formatted as a string of comma seperated values; each value a submenu tab titles
tabs.push( 'Televisions,Projectors,BlueRay & DVD,Home Theatre,TiVo' );
tabs.push( 'iPod/MP3 Players,Audio Systems,Home Theatre,Headphones,Speakers' );
tabs.push( 'GPS Navigation,Satellite Radio,Digital Radio,Car Audio' );
 
// array of properties defining menu's main title
var titleProps:Array = new Array( );
titleProps.push( { titleXOffset: 2, titleYOffset: 4, titleFont: 'Arial', titleSize: 30, titleColor: 0xffffff, titleAlign: 'LEFT', titleLeading: 1 } );
 
// array of properties defining menu tabs
var tabProps:Array = new Array( );
tabProps.push( { tabXOffset: 8, tabYOffset: 10, tabFont: 'Arial', tabSize: 18, tabColor: 0xffffff, tabAlign: 'LEFT', tabSpacing: 7 } );
 
var menuID:uint = 10;
 
for ( var i:uint=0; i<titles.length; i++ )
{
	// create new instance of class
	var d:DropDownMenus = new DropDownMenus( menuID, titles[i], bgWidth, bgHeight, bgColor, titleProps, tabs[i], tabProps );
	d.x = xPos;
	d.y = yPos;
	d.name = 'd' + i;
	d.addEventListener( MenuTabSelected.TAB_SELECTED, onMenuTabSelected );
	addChild( d );
 
        // increment x position of next menu & menu id number
	xPos   += ( bgWidth + spacing );
	menuID += 10;
}
 
// process selection
function onMenuTabSelected( e:MenuTabSelected ):void
{
	// identify which menu and which submenu item have been selected
	var menuID:uint = Math.floor( e.tabID/10 ) * 10;
	var tabID:uint  = e.tabID - menuID;
	menuID = menuID / 10;
 
	//trace( 'menu: ' + menuID + ' submenu: ' + tabID );
}

DropDown2.zip (41)

Using drop down menus: the DropDownMenus class

Charles Davis — Thu, 08 Apr 2010 13:32:56 +0000

In this post, the DropDownMenus class is introduced. The class may be used singularly – as shown – or as a group with a series of drop down menus placed side-by-side horizontally.

The sample code below shows three arrays passed to the class constructor to control all the text properties of both the menu’s main title and each of the menu’s subtitles. Each time a menu item is selected, the onMenuTabSelected is called by the class instance’s attached event listener. A switch statement is then used to direct the program to the proper function.

// import required classes
import com.dtk.DropDownMenus;
import com.dtk.MenuTabSelected;
 
// init vars to be passed to class instance
var bgWidth:uint  = 200;
var bgHeight:uint = 120;
var bgColor:uint  = 0x1143d1;
 
// array of properties defining menu's main title
var titleProps:Array = new Array( );
titleProps.push( { titleXOffset : 2, titleYOffset : 4, titleFont : 'Arial', titleSize : 38, titleColor : 0xffffff, titleAlign : 'LEFT', titleLeading : 1 } );
 
// array of properties defining menu tabs
var tabProps:Array = new Array( );
tabProps.push( { tabXOffset : 4, tabYOffset : 20, tabFont : 'Arial', tabSize : 25, tabColor : 0xffffff, tabAlign : 'LEFT', tabSpacing : 7 } );
 
// main title of drop down
var titleText:String = 'TV & Video';
 
// submenu - drop down - menu tabs
var tabs:Array = [ 'Televisions', 'Projectors', 'BlueRay & DVD', 'Home Theatre', 'TiVo' ];
 
// create new instance of class
var dd:DropDownMenus = new DropDownMenus( titleText, bgWidth, bgHeight, bgColor, titleProps, tabs, tabProps );
dd.x = 10;
dd.y =  0;
dd.addEventListener( MenuTabSelected.TAB_SELECTED, onMenuTabSelected );
addChild( dd );
 
// process selection
function onMenuTabSelected( e:MenuTabSelected ):void
{
	switch ( e.tabID )
	{
		case 1:
			// do tv 
			break;
		case 2:
			// do projector 
			break;
		case 3:
			// do tv 
			break;
		case 4:
			// do blueray 
			break;
		case 5:
			// do home theatre 
			break;
		case 6:
			// do home theatre 
			break;
	}
}

The download includes the above .fla and the four class files required. DropDown.zip (47)

Sorting and combining arrays: sortOn( ) and concat( )

Charles Davis — Tue, 06 Apr 2010 14:30:15 +0000

In this post, the sorting of indexed arrays using the sortOn method is discussed. Sorting options Array.CASEINSENSITIVE, DESCENDING and NUMERIC, are also defined. Finally, we’ll use concat to combine two arrays into a new array.

In the first example below, the array fruits is simply sorted by the field ‘name’ and the results then displayed.

// array fruits
var fruits:Array = new Array( );
fruits.push( { name: 'apple',  price: 2.29, cat: 'fruit' } );
fruits.push( { name: 'orange', price: 3.49, cat: 'fruit' } );
fruits.push( { name: 'peach',  price: 3.19, cat: 'fruit' } );
fruits.push( { name: 'plum',   price: 1.99, cat: 'fruit' } );
 
// sort by name
fruits.sortOn( 'name' );
 
// display sorted results
for ( var i:uint=0; i<fruits.length; i++ )
{
	trace( fruits[i].name + ': ' + fruits[i].price );
}

In this next snippet, the same code is applied but the plum record is capitalized. When this is run, the first record in the resulting sort is now the Plum record because caps precede lower case. By adding the Array.CASEINSENSITIVE option, the array is sorted as expected. Comment out the original sortOn line, uncomment the line below with the option added and rerun.

// array fruits
var fruits:Array = new Array( );
fruits.push( { name: 'apple',  price: 2.29, cat: 'fruit' } );
fruits.push( { name: 'orange', price: 3.49, cat: 'fruit' } );
fruits.push( { name: 'peach',  price: 3.19, cat: 'fruit' } );
fruits.push( { name: 'Plum',   price: 1.99, cat: 'fruit' } );
 
// sort by name
fruits.sortOn( 'name' ); 
 
// fruits.sortOn( 'name', Array.CASEINSENSITIVE );
 
// display sorted results
for ( var i:uint=0; i<fruits.length; i++ )
{
	trace( fruits[i].name + ': ' + fruits[i].price );
}

For the next example, the fruits array is sorted by price. Because numbers are sorted as if they were strings – 20 is greater than 1000 because 2 is grester than 1 – the Array.NUMERIC option is required to achieve proper results. To change the sort order to descending, a second option Array.DESCENDING is applied; it is separated from the first option by the bitwise operator (see commented out code below).

// array fruits
var fruits:Array = new Array( );
fruits.push( { name: 'apple',  price: 2.29, cat: 'fruit' } );
fruits.push( { name: 'orange', price: 3.49, cat: 'fruit' } );
fruits.push( { name: 'peach',  price: 3.19, cat: 'fruit' } );
fruits.push( { name: 'Plum',   price: 1.99, cat: 'fruit' } );
 
// sort by price ascending (default)
fruits.sortOn( 'price', Array.NUMERIC );
 
// sort by price descending
// fruits.sortOn( 'price', Array.NUMERIC | Array.DESCENDING );
 
// display sorted results
for ( var i:uint=0; i<fruits.length; i++ )
{
	trace( fruits[i].name + ': ' + fruits[i].price );
}

In this final example, a second array vegies is created. The concat( ) method is then used to combine the two arrays into a single new array named foods. The new array is then sorted on both the cat and then the name fields. Notice that by sorting on the cat field first the sort retains the grouping by cat.

var fruits:Array = new Array( );
fruits.push( { name: 'apple',  price: 2.29, cat: 'fruit' } );
fruits.push( { name: 'orange', price: 3.49, cat: 'fruit' } );
fruits.push( { name: 'peach',  price: 3.19, cat: 'fruit' } );
fruits.push( { name: 'Plum',   price: 1.99, cat: 'fruit' } );
 
// new array vegies
var vegies:Array = new Array( );
vegies.push( { name: 'onion',     price: 1.69, cat: 'veg' } );
vegies.push( { name: 'lettuce',   price: 2.39, cat: 'veg' } );
vegies.push( { name: 'broccoli',  price: 3.89, cat: 'veg' } );
vegies.push( { name: 'peas',      price: 3.29, cat: 'veg' } );
 
// combine fruits & vegies array into new array foods
var foods:Array = fruits.concat( vegies );
 
// sort on fields cat first and name second with CASEINSENSITIVE option
foods.sortOn( ['cat', 'name'], Array.CASEINSENSITIVE );
 
// display results
for ( var j:uint=0; j<foods.length; j++ )
{
	trace( foods[j].name + '  ' + foods[j].cat + ': ' + foods[j].price );
}

If this helped, consider a Retweet. Thanks…