Final Result Preview

Here’s an example of the effect we’ll be creating:

The main takeaway in this tutorial is going to be the RGB shifting effect, but I’ll also demonstrate how to create the CRT scan lines, noise, and roll bar graphics.

Step 1: About RGB Images

Every image on your computer screen is displayed using the colors red, blue and green. By mixing these three colors in various amounts your computer can create the other colors in the spectrum.

If the three color channels don’t align properly the image won’t be composited correctly, and you’ll start to see the edges of the individual channels ‘bleeding’ out of the sides of the image.

This is exactly what we’re going to be doing in this tutorial; separating an image into its three color channels and then transforming each individually to create a distortion effect. Let’s get to it!

(You can learn a lot more about how RGB color works at Wikipedia.)

Step 2: Create A Title Screen

You’ll need to create a graphic to apply the effect to. I chose to create a video game title screen, but you can make whatever kind of graphic you want.

Create a new Movie Clip called ‘titleScreen’ and put your title screen (or other graphics) inside.

I think something retro-themed works best with this effect since it reminds me of an old malfunctioning arcade screen. I created my title screen with a font called Commodore 64 Pixeled. I added a Glow filter to the text to give it that smeary, blown out CRT look.

Once you’re happy with your design, add the titleScreen MovieClip to the stage and give it the instance name ‘titleScreen’.

Step 3: Create the RGBShift class

Create a new Actionscript file named ‘RGBShift.as’. Save this file in the same directory as your main Flash file. Add this code to create the shell for the class:

package {

	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.display.BitmapDataChannel;
	import flash.display.BlendMode;
	import flash.events.Event;
	import flash.geom.Point;

	public class RGBShift extends Sprite {

		private var _centerX:Number;
		private var _centerY:Number;

		// CONSTRUCTOR
		public function RGBShift(dObj:DisplayObject) {

        }

	}

}

Editor’s note: Not comfortable with class-based coding yet? Check out this Quick Tip to help you get started.

This code doesn’t really do anything yet. The first 10 lines or so import all the extra classes we’re going to need. I have two private variables named ‘_centerX’ and ‘_centerY’ (I use the underscores to signify private variables). These two variables will hold the x and y coordinates of the center of our graphic.

Notice that the constructor function (empty for now) accepts a DisplayObject. This will allow us to use any type of DisplayObject with this effect (MovieClip, Sprite, Bitmap, etc.) We’re going to be using the titleScreen MovieClip from the stage, but having the class accept any DisplayObject keeps it flexible for later uses.

Step 4: Add the createBMD Function

We made our class flexible by allowing it to accept any DisplayObject, but we’re actually going to need a BitmapData object to do the RGB shifting effect. Let’s create a function that can create BitmapData from a DisplayObject.

Add this function to your RGBShift class just below the constructor:

private function createBMD(dObj:DisplayObject):BitmapData {
	// create a new BitmapData object the size of our DisplayObject
	var bmd:BitmapData = new BitmapData(dObj.width, dObj.height,
										true, 0xFF000000);

	// draw the display object to the bitmap data
	bmd.draw(dObj);

	return bmd;
}

Take a look at what this function does. The first line uses the DisplayObject’s width and height to create a new transparent BitmapData object the same size as the DisplayObject. Next, it draws the DisplayObject to the BitmapData. Finally it returns the BitmapData to the caller.

Step 5: Add the createRGB Function

Here’s where the actual color separation takes place. Add this function to your class:

private function createRGB(dObj:DisplayObject):Array {
	 var bmd:BitmapData = createBMD(dObj); // create bitmapData from the display object

	// create a new bitmap data object for each color channel
	var r:BitmapData = new BitmapData(bmd.width, bmd.height, true, 0xFF000000);
	var g:BitmapData = new BitmapData(bmd.width, bmd.height, true, 0xFF000000);
	var b:BitmapData = new BitmapData(bmd.width, bmd.height, true, 0xFF000000);

	// copy the data from each channel into the corresponding bitmap data
	r.copyChannel(bmd, bmd.rect, new Point(),
					BitmapDataChannel.RED, BitmapDataChannel.RED);
	g.copyChannel(bmd, bmd.rect, new Point(),
					BitmapDataChannel.GREEN, BitmapDataChannel.GREEN);
	b.copyChannel(bmd, bmd.rect, new Point(),
					BitmapDataChannel.BLUE, BitmapDataChannel.BLUE);

	// return an array with the bitmap data for the 3 color channels
	return [r, g, b];
}

This function also accepts a DisplayObject. It then passes that to the createBMD() function we wrote in the previous step, which converts it to BitmapData. Next we create three new transparent BitmapData objects; one for each color. We create them at the exact same size as our source BitmapData (from the DisplayObject).

We then use BitmapData’s copyChannel() method to copy a single color channel from the source BitmapData into each of the three new BitmapData objects.

The final line simply returns the three new BitmapData objects wrapped in an array.

Step 6: Use the createRGB Function in the Constructor

Now that we have our createBMD and createRGB classes working together, let’s put them to use. Add this as the first line of code in the constructor function for the RGBShift class:

var rgbBMD:Array = createRGB(dObj);

This line just passes the DisplayObject to the createRGB() function. createRGB() uses the createBMD() function to convert it to BitmapData and then separates it onto three separate BitmapData objects (one for each channel). Finally it returns the array of those three objects to our local rgbBMD array. Make sense? Good.

Step 7: Create Bitmaps from the RGB Channels

We now have an array of three BitmapData objects. We need to create a Bitmap from each in order to display them on the screen. Add this for loop to the constructor function of RGBShift just below the last line we added:

Editor’s note: Sorry for the inconvenience folks, displaying this particular bit of ActionScript trips FireFox over. Feel free to download it here.

Most of this is pretty simple. Let's take a look.

• With each BitmapData object in our rgbBMD array we're creating a new Bitmap.
• We set smoothing to true so we can scale and rotate it without it getting pixelated. (line 23)
• Next we create a container Sprite and add the new Bitmap to the container's display list. (lines 25 & 26)
• Now we finally start using the _centerX and _centerY variables. We set each to the center of the Bitmap by dividing the width and height in half.
• We use this center point to offset the Bitmap inside the container Sprite, and then to offset the container Sprite on the stage. I'll explain why in the next step.
• Finally we add the container Sprite to the stage (remember there is a container for each of our three color channels).

Step 8: Why Use the Container Sprite?

You could create this effect without the container Sprite by just adding the Bitmaps directly to the stage. I like to wrap them in a container because it makes it easier to control the transform point when you do things like scale and rotate.

Normally, when you perform a scale or a rotate on an object it transforms from the origin point (0,0) of that object. That's seldom what I want to happen. Usually I want the transformations to be applied from the center of the object.

Notice that in the last section we set the x and y of the Bitmaps to negative one half the width and height. This places the Bitmap so that its center point is at 0,0 in the container Sprite. If we perform any transformations on the container Sprite it will transform from 0,0 of the container, which is now the center of our Bitmap.

The only problem is that only the bottom corner of our Bitmap is visible now, so I set the container Sprite x and y to half the height and width of the Bitmap to get everything back its correct position.

Step 9: RGBShift Class

Here's the RGBShift class up to this point in case you got lost along the way:

Editor's note: Me again, once more you'll have to download the AS here. Sorry for the inconvenience.

Step 10: Create the Main Document Class

So, we have our RGBShift class, but how do we use it? Begin by creating a new Actionscript file called Main.as, then add this code:

package {

	import flash.display.MovieClip;

	public class Main extends MovieClip {

		public function Main() {

			var rgb = new RGBShift(titleScreen); // create a new RGBShift from the titleScreen
			removeChild(titleScreen); // remove the original title screen from the stage

			// add it to the stage
			addChild(rgb);

		}
	}

}

Here we're creating a new instance of the RGBShift class and passing it the titleScreen MovieClip from the stage. We no longer need that MovieClip, so we remove it from the stage and add the new RGBShift instance instead.

Now we just have to link this class to our Flash document. Go back to Flash and set the document class to 'Main'.

Step 11: Test

You should now be able to test your Flash file (Control -> Test Movie) without getting any errors or warnings.

Hmm, that doesn't look quite right does it?

What's happening here is we've layered the three color channels on top of each other, but they're not combining and mixing the colors, so we're only seeing the top layer (blue). Let's fix that now.

Step 12: Change the Blend Mode

To get the color channels to blend properly we need to change their BlendMode to SCREEN. We only want to change the blend mode of the second and third layers though. We'll leave the first (bottom) layer normal and blend the other two layers into it.

Add this code to the for loop in the RGBShift class constructor function:

if(i>0) {
	// set SCREEN blend mode for the 2nd and 3rd images
	bmp.blendMode = BlendMode.SCREEN;
}

This checks to make sure the current image is not the first image (0) and then sets the blendMode property to SCREEN.

Step 13: Test Again

Test your movie again and you should see something that looks identical to your titleScreen MovieClip.

I know what you're thinking; 'That was a lot of work to recreate the same graphic that was already there.'

But now the graphic is made up of three objects that we can transform individually to create our distortion. So quit your whining and let's continue...

Step 14: Download the Tweener Library

We're going to use the Tweener Library to do our animation. Download it here if you don't already have it.

To use Tweener, place the main 'caurina' folder in the same directory as your Flash file and add this import statement to the top of the RGBShift class:

import caurina.transitions.Tweener;

Step 15: Add the randRange File

I use this randRange function as an easy way to generate random integers within a given range. You could just add this function to the RGBShift class, but I use this function so often that I like to keep it in a separate file, so it's easier to share among different projects.

Create a new Actionscript file named 'randRange.as' in the same folder as your main Flash file. Add this code:

package {
	// returns a random number between specified range (inclusive)
	public function randRange(min:int, max:int):int {
	    var randomNum:int = Math.floor(Math.random() * (max - min + 1)) + min;
	    return randomNum;
	}
}

As you can see it's just a single function wrapped in a package declaration. We can now use this function as if it were a part of our class.

(For more information on how this function works, check out Carlos's Quick Tip.)

Step 16: Add the distort() Function

Here's where the magic happens. Add this function to the RGBShift class:

private function distort(img:Sprite):void {
	Tweener.addTween(img, {
			y: randRange(_centerY-3, _centerY+3),	// randomize y shift
			time:randRange(1,2) /10, 		// randomize time
			alpha: randRange(8,10) /10,		// randomize alpha
			transition:"easeInOutSine",

			onComplete:distort, 			// when finished start the distortion again
			onCompleteParams:[img]
			}
	);
}

We're going to run this distort() function on each of our color channels separately to create the distortion effect.

The function accepts a Sprite (one of our color channel containers). It then starts a Tweener animation on the channel using a random Y value (between -3 and 3), and a random length of time (between 1 and 2 seconds). This will make each channel shift up and down by different amounts at different speeds.

Notice I'm using the _centerY variable here again to offset the Y value. We also tween to a random alpha value (between .8 and 1) to make each channel flicker a bit. When the tween finishes we use the onComplete property to call the same distort() function again. Using onCompleteParams we send it the same color channel Sprite. This causes the distort function to loop over and over on each of our color channels.

See, what did I tell you..? Magic!

To kick off this distortion loop we need to call it once on each of our color channel Sprites. Add this line to the end of the for loop in the RGBShift constructor function:

distort(container);  // start the bitmap distortion

Step 17: Experiment

You should now be able to test your movie and see the distortion effect in action.

Personally, I like the subtle Y shift that we've got going here, but you can do a lot of crazy stuff with the distortion now that we've got the channels animating separately.

To experiment with the distortion you can just modify the properties and values in the Tweener call in the distort function. Check the Tweener Documentation for a complete list of tweenable properties.

Here's an example of some severe distortion I created by simply adding a few more properties to the Tweener call:

Check out the distort() function that created the effect:

private function distort(img:Sprite):void {
	Tweener.addTween(img, {
			y: randRange(_centerY-3, _centerY+3), 	// ranomize y shift
			x: randRange(_centerX-10, _centerX+10),
			time:randRange(1,2) /10, 		// randomize time
			scaleX: randRange(9,11)/10,		// randimize x scale

			alpha: randRange(5,10) /10,		// randomize alpha
			transition:"easeInOutSine",

			onComplete:distort, 			// when finished start the distortion again
			onCompleteParams:[img]
			}
	);
}

Step 18: Enhance the CRT Look

You can stop here if you want. The RGB separation and distortion should be working at this point.

To enhance the CRT effect I think we need to add a few more graphical elements. In the next few steps we'll be adding scan lines, a rolling black bar, some static, and a shiny reflection.

Step 19: Add the Scan Lines

Create a new MovieClip on the stage called 'lines'. Inside the MovieClip draw a 1 pixel horizontal line that spans the entire width of your movie. Set the stroke color to black with 40% alpha.

Now copy and paste this line over and over, moving it down 2 pixels each time, until you have lines covering the entire height of your movie. The effect you want is a 1 pixel line, then a 1 pixel space before the next line.

Step 20: Add the Rolling Bar

Now we'll add the rolling black bar. Create a new MovieClip called 'bar'. Inside, draw a solid black rectangle that spans the entire width of your movie. Make it about 40 pixels high. Set the Color Style of the MovieClip to Alpha at 30%.

Step 21: Animate the Rolling Bar

Create a new MovieClip called 'animatingBar' and place your bar clip inside. Create a short motion tween animation of the bar moving from the top of your movie to the bottom. This animation will loop to give us the rolling bar effect.

Place the animatingBar clip on the stage. Select it and add a blur filter. Unlink the X and Y blur settings and set the Blur Y to 20 and the Blur X to 0.

Set the blend mode to Overlay. This is similar to the Screen blend mode we used earlier, but not exactly the same.

Step 22: Create the Static Image

Create a new Photoshop file the same size as your movie. Fill the background layer with neutral grey (#808080). Choose Filter > Noise > Add Noise...
Set the filter to 100%, Gaussian, Monochromatic.

Save the image as 'noise.jpg'. If you don't have Photoshop, you can get my 'noise.jpg' from the Source zip file.

Step 23: Animate the Static

Import the noise.jpg image into your flash file. Create a new MovieClip called 'noise' and add the image to it. Create a new keyframe on frame 2 (F6) and rotate the image 180 degrees. Create another keyframe on frame 3 and flip the image horizontally (Modify > Transform > Flip Horizontal). Create a fourth keyframe on frame 4 and again rotate the image 180 degrees. We now have a 4 frame animation of flickering static.

You could also generate this noise effect using ActionScript, but that is beyond the scope of this tutorial.

Step 24: Add the Reflection

Create a new MovieClip on the stage called 'shine'. Inside it draw a large oval that extends halfway above the top of your movie. Select the top portion of the oval and delete it.

Change the fill to a linear gradient and set it so it blends from white 20% alpha at the top to white 5% alpha at the bottom. Grab the top of the shape and pull it up a little to give it a slight curve.

Step 25: Fix Element Layering

If you test your movie now you won't see any of the new graphics we just added because the RGB layers are being added on top of everything. To fix this go into the Main class and change this line:

addChild(rgb);

To this:

addChildAt(rgb, 0);

That adds the RGBShift object at the lowest level of the display list, below all the other graphics.

Conclusion

This tutorial is meant to be a starting place, not a final solution. Now that you have the RGB channels separated and animating individually there are a lot of different things you can do with this technique. The effect would look really nice if it were combined with the static distortion technique from my earlier tutorial.

As always, post a comment and let me know what you think. Good luck!

Introduction

We’ll begin with a demonstration of how to use the Stardust’s native 3D engine. Then, I’ll show you how to get Stardust to work with Papervision3D; we’ll be creating 3D particle effects with Papervision3D’s Particles class and DisplayObject3D class.

Previously…

We’re going to pick up where we left off in the first tutorial. Last time we created star and circle particles shooting out from a point, growing to a maximum size and then shrinking to nothing, while moving gradually slower over time (called a damping effect). This time, we’ll do the same thing, but in 3D. Instead of the particles moving out in a circle, they’ll move out in a sphere.

Step 1: Create a New Flash Document

Just as before, first create a new Flash document with dimensions of 640×400, a frame rate of 60fps, and a dark background (I used a dark blue gradient).

Step 2: Draw the Particles

Draw a star and a white circle, then convert them to symbols, separately. These are the two symbols we are going to use as particles later. Name the star symbol “Star” and circle symbol “Circle”, exported for ActionScript with the same class names.

(If you’re not much of an artist, you can download the source at the top of the page and use my symbols from the library of my FLA.)

Step 3: Create the Pause Button

Click Window > Components to bring up the Components Panel, then drag a Button from the User Interface folder onto the stage. Set the label to “Pause” and name it “pause_btn”. We are going to use this button to pause the 3D particle effects, thereby allowing users to spin the camera around in order to get a better taste of the 3D environment.

Step 4: Create the Document Class

Create a new document class and name it StarParticles3D.

package {
	import flash.display.Sprite;

	public class StarParticles3D extends Sprite {

		public function StarParticles() {

		}
	}
}

Not sure how to use a document class? Read this Quick Tip.

3D Initializers and Actions

The three main packages in Stardust are:

• idv.cjcat.stardust.common: contains general elements for both 2D and 3D particle effects.
• idv.cjcat.stardust.twoD: contains specific elements for 2D particle effects.
• idv.cjcat.stardust.threeD: contains specific elements for 3D particle effects.

In the previous tutorial we used initializers and actions from the common and twoD packages. In this tutorial, we’ll still be using elements from the common package, but not from the twoD package. Instead, we will use elements from the threeD package.

The class structure of the threeD package is pretty much the same as in the twoD package, except that the elements have an extra dimension. A 3D element possesses the same name as its 2D counterpart, but its name ends with “3D”. For example, the Move3D action in the 3D package updates particle positions in 3D space according to the velocities, just like its 2D counterpart in the 2D package, the Move action.

Step 5: Extend the Emitter

Create a new AS file called StarEmitter.as; inside it, create a new class StarEmitter, which extends the Emitter3D class:

package {
	import idv.cjcat.stardust.threeD.emitters.Emitter3D;	//don't forget to import this!

	public class StarEmitter extends Emitter3D {

		public function StarEmitter(clock:Clock) {
			//pass the clock object to the superclass's constructor
			super(clock);
		}
	}
}

Remember the Clock parameter? It’s used to control the rate of particle creation. We need to include it in the constructor function, so that we can pass a Clock to it later.

Since we are allowing users to pause the particle effects, we’re going to pack all the actions into a single CompositeAction object, which is essentially a group of actions. By deactivating this single composite action, we can “turn off” all the underlying actions. Declare a variable for a composite action in the emitter class. We’ll access this variable in the document class, so it needs to be public:

public var pausibleActions:CompositeAction;

Step 6: Declare the Particle Constants

Declare constants that will be used as particle parameters in the emitter class. We already covered the purpose of these constants in the previous tutorial. Most of the names are self-explanatory. These go inside the class but outside the constructor function. Feel free to come back here later and alter the numbers to see the effects.

private static const LIFE_AVG:Number = 30;
private static const LIFE_VAR:Number = 10;
private static const SCALE_AVG:Number = 1;
private static const SCALE_VAR:Number = 0.4;
private static const GROWING_TIME:Number = 5;
private static const SHRINKING_TIME:Number = 10;
private static const SPEED_AVG:Number = 30;
private static const SPEED_VAR:Number = 10;
private static const OMEGA_AVG:Number = 0;
private static const OMEGA_VAR:Number = 5;
private static const DAMPING:Number = 0.1;

Step 7: The Switch Initializer for Particle Display Objects

In the previous tutorial I demonstrated how to use the SwitchInitializer to create particles with different display objects. I was using the DisplayObjectClass initializer, which initializes particle appearance with display Objects. That was for 2D particle effects; here we are going to use its 3D counterpart, the DisplayObject3D initializer.

Add the following code to the emitter’s constructor function:

//switch initializers for star and circle particles
var doc1:DisplayObjectClass3D = new DisplayObjectClass3D(Star);
var doc2:DisplayObjectClass3D = new DisplayObjectClass3D(Circle);
var si:SwitchInitializer = new SwitchInitializer([doc1, doc2], [1, 1]);
addInitializer(si);

Step 8: Add the Remaining Initializers

Same as the previous tutorial; add the other initializers shown below. Note that some of them have similar names to those in the previous tutorial, but end in “3D”.

• The Position3D initializer initializes particle positions. Just as its 2D counterpart, the Position initializer, it accepts one constructor parameter, a zone object. However, this time it does not accept a Zone object, which represents a 2D zone; instead, it accepts a Zone3D object, representing a zone in 3D space. The SinglePoint3D class extends the Zone3D class and is the 3D version of the SinglePoint class.
• The same goes for the Velocity3D class. The SphereShell class is essentially the 3D version of the SectorZone class. Here we set the center of the sphere shell to (0, 0, 0), average radius to SPEED_AVG, and radius variation to SPEED_VAR.
• The Rotation3D and Omega3D initializers work exactly the same as their 2D counterparts, Rotation and Omega. However, there is one little difference about the constructor parameters: they accept three Random objects instead of one. That is because now, in 3D space, there are three axes of rotation, so they require three random rotation values for these axes. In this example we are creating “2D billboards” in 3D space (i.e. flat objects), so only the rotation for the Z axis is apparent; that’s why the first two parameters, Random objects for the X and Y axes, are assigned with null values.

This code goes in the StarEmitter’s constructor function:

addInitializer(new Life(new UniformRandom(LIFE_AVG, LIFE_VAR)));
addInitializer(new Scale(new UniformRandom(SCALE_AVG, SCALE_VAR)));
addInitializer(new Position3D(new SinglePoint3D()));
addInitializer(new Velocity3D(new SphereShell(0, 0, 0, SPEED_AVG, SPEED_VAR)));
addInitializer(new Rotation3D(null, null, new UniformRandom(0, 180)));
addInitializer(new Omega3D(null, null, new UniformRandom(OMEGA_AVG, OMEGA_VAR)));

Step 9: Add the Actions

Create a composite action, and add some actions to it. Then add this composite action to the emitter; this will make the particles perform the actions. You’ve seen these actions in the previous tutorial (some of them in 2D version), so I won’t explain them all over again. Again, this code goes in the StarEmitter’s constructor function:

pausibleActions = new CompositeAction();
pausibleActions.addAction(new Age());
pausibleActions.addAction(new DeathLife());
pausibleActions.addAction(new Move3D());
pausibleActions.addAction(new Spin3D());
pausibleActions.addAction(new Damping3D(DAMPING));
pausibleActions.addAction(new ScaleCurve(GROWING_TIME, SHRINKING_TIME));
addAction(pausibleActions);

Step 10: Back to The Document Class

All right, we’re done with the emitter. Now it’s time to build our document class.

First, declare constants for the orbiting camera’s radius, the camera distance from the origin and the emitter’s rate:

private static const CAMERA_RADIUS:Number = 250;
private static const PARTICLE_RATE:Number = 0.5;

(As before, consts go inside the class but outside the constructor function.)

Then, declare variables for an emitter, a steady clock and a DisplayObjectRenderer3D (in the same place as the consts):

private var emitter:StarEmitter;
private var clock:SteadyClock;
private var renderer:DisplayObjectRenderer3D;

In the constructor, initialize the clock, emitter and renderer. Also, set the initial camera’s position and direction, making it look at the origin:

//create the clock and emitter
clock = new SteadyClock(PARTICLE_RATE);
emitter = new StarEmitter(clock);	//we can do this because we gave StarEmitter's constructor a clock parameter

//create the renderer and its container sprite
var container:Sprite = new Sprite();
container.x = 320, container.y = 200;
renderer =  new DisplayObjectRenderer3D(container);
renderer.addEmitter(emitter);

//add the container to the stage
addChild(container);
//add the pause button again so that it is on top of the container
addChild(pause_btn);

//set the camera's initial position and direction
renderer.camera.position.set(0, 0, -CAMERA_RADIUS);
renderer.camera.direction.set(0, 0, CAMERA_RADIUS);

Step 11: Program the Pause

Create a handler function in the document class to handle the click event of the pause button:

private function togglePause(e:MouseEvent):void {
	if (e.target.label == "Pause") {
		e.target.label = "Resume";
		clock.ticksPerCall = 0;		//stop the clock
		emitter.pausibleActions.active = false;	//deactivate the emitter's actions
	} else {
		e.target.label = "Pause";
		clock.ticksPerCall = PARTICLE_RATE;		//restart the clock
		emitter.pausibleActions.active = true;	//reactivate the emitter's actions
	}
}

..then register the listener for the pause button, in the constructor function:

pause_btn.addEventListener(MouseEvent.CLICK, togglePause);

Step 12: The Main Loop

Create a handler for the ENTER_FRAME event. This is our main loop. It updates the camera’s position by calling the updateCamera() method (which we will code in a minute) and calls the emitter’s step() method, which keeps the particle effects running:

private function mainLoop(e:Event):void {
	updateCamera();
	emitter.step();
}

Again, register a listener in the constructor:

addEventListener(Event.ENTER_FRAME, mainLoop);

Step 13: Update the Camera’s Position

Now define the updateCamera() method called in the previous step. This is used to move the camera in 3D space depending on the mouse’s position. (If you’d like more information on how it works check out this Wikipedia article.)

The magic numbers used to generate theta and phi are just the result of trial and error; feel free to try your own equations.

private function updateCamera():void {
	var theta:Number = 0.02 * (mouseX - 320);
	var phi:Number = 0.02 * (mouseY - 200);
	phi = StardustMath.clamp(phi, -StardustMath.HALF_PI, StardustMath.HALF_PI);

	var x:Number = CAMERA_RADIUS * Math.cos(theta) * Math.cos(phi);
	var y:Number = CAMERA_RADIUS * Math.sin(phi);
	var z:Number = CAMERA_RADIUS * Math.sin(theta) * Math.cos(phi);
	renderer.camera.position.set(x, y, z);
	renderer.camera.direction.set(-x, -y, -z);
}

Note that I used the StardustMath.clamp() method; this makes sure the phi value is kept between positive and negative half PI.

Milestone: Native Stardust Engine Complete

Okay, we’re done! That’s all we need to do to get a 3D emitter working with Stardust’s native 3D engine. Let’s look at the result. You can click the pause button to pause the particle effect, and move the mouse around to orbit the camera:

If you’d like to see the full source code, look in the folder called “01 – Stardust Native 3D Engine” in the Source.

Time for Papervision3D

To switch from Stardust’s native 3D engine to Papervision3D is easy. We’ll just have to use a different renderer and display object initializer.

(Never used Papervision3D before? Take a look at this beginner’s tutorial.)

First we’ll use Papervision3D’s Particles class. You might not be familiar with this; I’ll show you how to use the more common DisplayObject3D class later.

Step 14: Change the Display Object Initializer

Change the following code in the emitter class:

var doc1:DisplayObjectClass3D = new DisplayObjectClass3D(Star);
var doc2:DisplayObjectClass3D = new DisplayObjectClass3D(Circle);

to this:

var mat1:MovieParticleMaterial = new MovieParticleMaterial(new Star());
var mat2:MovieParticleMaterial = new MovieParticleMaterial(new Circle());
var doc1:PV3DParticle = new PV3DParticle([mat1]);
var doc2:PV3DParticle = new PV3DParticle([mat2]);

As you may already know, the MovieParticleMaterial class allows us to use display objects as particles’ appearance in Papervision3D. We create a Star and Circle instance to be used as particle material. The PV3DParticle initializer takes the place of the DisplayObjectClass3D initializer; its constructor accepts an array of parameters, which will all be added to a Particles object.

This is all we have to do regarding the emitter. Next we’ll modify the document class.

Step 15: Set Up the Papervision3D Environment

The target container for our renderer is no longer a Sprite object. Instead, we are going to create particles in a Particles object. We’ll have to switch the renderer’s type from DisplayObjectRenderer3D to PV3DParticleRenderer.

Declare the following variables for Papervision3D-related objects:

private var scene:SceneObject3D;
private var particles:Particles;
private var camera:Camera3D;
private var origin:DisplayObject3D;
private var renderEngine:BasicRenderEngine;
private var viewport:Viewport3D;

The code in the document class’s constructor is now:

initPV3D();		//this is new!

clock = new SteadyClock(PARTICLE_RATE);
emitter = new StarEmitter(clock);

renderer =  new PV3DParticleRenderer(particles);	//this is new!
renderer.addEmitter(emitter);

pause_btn.addEventListener(MouseEvent.CLICK, togglePause);
addEventListener(Event.ENTER_FRAME, mainLoop);

The initPV3D() method sets up the Papervision3D Environment. Here’s the code:

private function initPV3D():void {

	//create the scene
	scene = new SceneObject3D();

	//create the Particles object
	particles = new Particles();

	//create the camera and initialize its position
	camera = new Camera3D();
	camera.position.x = 0;
	camera.position.y = 0;
	camera.position.z = -CAMERA_RADIUS;

	//create a DO3D representing the origin
	origin = new DisplayObject3D();
	origin.x = origin.y = origin.z = 0;

	//point the camera to the origin
	camera.target = origin;

	scene.addChild(origin);
	scene.addChild(particles);

	//create the render engine and viewport
	renderEngine = new BasicRenderEngine();
	viewport = new Viewport3D(640, 400);

	//add the viewport to the stage
	addChild(viewport);
	//add the pause button again so that it is on top of the viewport
	addChild(pause_btn);
}

Step 16: The New Main Loop

Now Stardust only updates the 3D objects’ properties; Papervision3D’s render engine is taking over the responsibility of rendering. This is what our new main loop looks like:

private function mainLoop(e:Event):void {
	updateCamera();
	emitter.step();
	renderEngine.renderScene(scene, camera, viewport);	//this is new!
}

Step 17: Updating the Camera

Now that we are using Papervision3D’s camera, we’ll also have to modify the updateCamera() method:

private function updateCamera():void {
	var theta:Number = 0.02 * (mouseX - 320);
	var phi:Number = 0.02 * (mouseY - 200);
	phi = StardustMath.clamp(phi, -StardustMath.HALF_PI, StardustMath.HALF_PI);

	var x:Number = CAMERA_RADIUS * Math.cos(theta) * Math.cos(phi);
	var y:Number = -CAMERA_RADIUS * Math.sin(phi);	//note this is negative now
	var z:Number = CAMERA_RADIUS * Math.sin(theta) * Math.cos(phi);
	camera.x = x;	//we update each of the x, y, z properties of PV3D's camera separately
	camera.y = y;
	camera.z = z;
}

Milestone: Papervision3D with Particles Completed

Okay, we have successfully switched from Stardust’s native 3D engine to Papervision3D. Now let’s check out the result. Note the pixelation effect on the particles. That is because Papervision3D first draws vector objects into bitmaps before using them as particle materials.

You can find all the source code for this in the “02 – Papervision3D Particles” folder.

Papervision3D’s DisplayObject3D Class

So far, we have been working with “2D billboards” – flat objects, like paper. It’s possible to create “real” 3D particle objects, like Papervision3D’s DisplayObject3D objects. We’re just going to have to use another initializer. Now let’s get down to the final part of this tutorial. We will create red and blue cube particles.

Step 18: Change the Display Object Initializer, Again

We’re going to change the initializer concerning the particle appearance for the last time.

Before that, declare a LightObject3D variable in the emitter class. We are going to use the FlatShadeMaterial for the DisplayObject3D objects, which require a light source. Also, declare the following constants – we’ll use these as parameters for the FlastShadeMaterial, and for determining the cubes’ sizes:

public var light:LightObject3D;

private static const LIGHT_COLOR_1:uint = 0xCC3300;
private static const LIGHT_COLOR_2:uint = 0x006699;
private static const AMBIENT_COLOR_1:uint = 0x881100;
private static const AMBIENT_COLOR_2:uint = 0x002244;
private static const CUBE_SIZE:Number = 15;

Now change the following code in the emitter class:

var mat1:MovieParticleMaterial = new MovieParticleMaterial(new Star());
var mat2:MovieParticleMaterial = new MovieParticleMaterial(new Circle());
var doc1:PV3DParticle = new PV3DParticle([mat1]);
var doc2:PV3DParticle = new PV3DParticle([mat2]);

to this:

light = new LightObject3D();
var mat1:FlatShadeMaterial = new FlatShadeMaterial(light, LIGHT_COLOR_1, AMBIENT_COLOR_1);
var mat2:FlatShadeMaterial = new FlatShadeMaterial(light, LIGHT_COLOR_2, AMBIENT_COLOR_2);
var matList1:MaterialsList = new MaterialsList({all:mat1});
var matList2:MaterialsList = new MaterialsList({all:mat2});
var params1:Array = [matList1, CUBE_SIZE, CUBE_SIZE, CUBE_SIZE];
var params2:Array = [matList2, CUBE_SIZE, CUBE_SIZE, CUBE_SIZE];
var doc1:PV3DDisplayObject3DClass = new PV3DDisplayObject3DClass(Cube, params1);
var doc2:PV3DDisplayObject3DClass = new PV3DDisplayObject3DClass(Cube, params2);

The new particle appearance will be initialized as red and blue 3D cubes. The first constructor parameter for the PV3DDisplayObject3DClass initializer is the class we wish to instantiate for the particles (so here, it is the Cube class) and the second parameter is an array of constructor parameters for this Cube class.

Step 19: The Three Axes of Rotation

Previously, because we were working with “2D billboards”, only the rotation about the Z axis mattered. Now that we are working with true 3D objects, we need to pass three Random object references to the Rotation3D and Omega3D constructors, one for each axis.

Change the following code in the emitter class:

addInitializer(new Rotation3D(null, null, new UniformRandom(0, 180)));
addInitializer(new Omega3D(null, null, new UniformRandom(OMEGA_AVG, OMEGA_VAR)));

to this:

var rotationRandom:UniformRandom = new UniformRandom(0, 180);
var omegaRandom:UniformRandom = new UniformRandom(OMEGA_AVG, OMEGA_VAR);
addInitializer(new Rotation3D(rotationRandom, rotationRandom, rotationRandom));
addInitializer(new Omega3D(omegaRandom, omegaRandom, omegaRandom));

Step 20: Modify the Document Class

This time, instead of using a Particles object as our particle container, we’re using a DisplayObject3D as the container. Declare a variable for this container in the document class:

private var container:DisplayObject3D;

Also, we’ll need another type of renderer for creating particles in the new container. Change the renderer’s type from PV3DParticleRenderer to PV3DDisplayObject3DRenderer. The code in the document class’s constructor should now look like this:

initPV3D();

clock = new SteadyClock(PARTICLE_RATE);
emitter = new StarEmitter(clock);

renderer =  new PV3DDisplayObject3DRenderer(container);	 //this has changed!
renderer.addEmitter(emitter);

pause_btn.addEventListener(MouseEvent.CLICK, togglePause);
addEventListener(Event.ENTER_FRAME, mainLoop);

Step 21: Modify the initPV3D() Method

In the initPV3D() function, we now need to initialize the container variable and add it to the scene. Add these two lines to the end of that function:

container = new DisplayObject3D();
scene.addChild(container);

Step 22: Modify the updateCamera() Method

In the updateCamera() method, we wish to make the light follow the camera, so we’ll have an illusion that the light always “shoots” out from our eyes. Change the following code:

camera.x = x;
camera.y = y;
camera.z = z;

to this:

emitter.light.x = camera.x = x;
emitter.light.y = camera.y = y;
emitter.light.z = camera.z = z;

Now the light source is always at the same point as the camera.

Milestone: Papervision3D with DisplayObject3D Completed

Yep, we’re finally done with this tutorial. No more coding. Let’s take a look at our final result, with fancy red and blue 3D cubes!

The source code for this can be found in the “Papervision3D DisplayObject3D” folder.

Conclusion

The workflow for creating 3D particle effects with Stardust is pretty much the same as that for 2D effects. You just choose a different set of initializers, actions, and renderers. Stardust also supports other 3D engines, including ZedBox and ND3D. The usage is almost the same. You’ll just have to use a different set of initializers and renderers. You may even extend the Initializer, Action, and Renderer classes to work with whichever 3D engines you like!

Now you’ve got the basics, why not go back to the consts created in Step 6 and play with them to see the effects?

I hope this tutorial helps you understand Stardust more and makes you more familiar and comfortable with Stardust’s workflow. Thanks for reading!

Introduction

Have you guys ever experimented with Flash’s ColorMatrix and Convolution filters? I was digging around in a quest to find some interesting stuff you can do with Flash and I bumped into them. Experimenting with them can deliver some awesome results.

I’ve written an EffectsTester to make it easy to experiment with them. Check out these camshots I took while playing around with it:

Now, if you find that interesting, let me walk you through what these two filters are all about.

The Color Matrix Filter

The Color Matrix Filter is used to manipulate the color of a display object.

Let me explain the exact calculation performed by the ColorMatrixFilter. Every pixel in an image is a mixture of red, green, and blue. These primary colors, when combined, can make any other color:

Image from Wikimedia Commons. Thanks to Mike Horvath and jacobolus.

The amount of red in a pixel can vary from zero (no red at all) to 255. Same for green and blue. So, from the image above, you can see that a pure yellow pixel has red = 255, and green = 255. White has red, green, and blue all set to 255. Black has all three set to zero.

The color matrix filter looks at each pixel in a source image and changes them based on how much red, blue, and green is in the pixel. You end up with a whole new image; the destination image.

Here’s How it Works

First, let’s concentrate on these three values:

Let’s label these values a[0], a[1], and a[2] in turn. Now, think about just one single pixel in the entire source image (the one in the top-left corner will do). Let’s call the amount of red in that srcR, the amount of green srcG and the amount of blue srcB.

The question is: how much red will be in that pixel of the destination image, destR? Flash uses this calculation:

destR = ( a[0] * srcR ) + ( a[1] * srcG ) + ( a[2] * srcB );

Here you can see that a[0] is 1, while a[1] and a[2] are both zero, so:

destR =	( 1 * srcR ) + ( 0 * srcG ) + ( 0 * srcB );
//which means...
destR = srcR;

There’s no change! But what if we changed a[0] to zero and a[1] to 1? Then:

destR =	( 0 * srcR ) + ( 1 * srcG ) + ( 0 * srcB );
//which means...
destR = srcG;

…the amount of red in the destination pixel would be equal to the amount of green in the source pixel! Furthermore, if you changed the second row to read “1 0 0″, then the amount of green in the destination pixel would be equal to the amount of red in the source pixel; you would have swapped them over and your orange fish would turn into green ones:

You’re probably wondering about the A column and row and about the Offset column. Well, A stands for alpha, which means transparency. The A values have much the same effect as the R G B values, but since none of these sample images are transparent, it’s hard to demonstrate. The Offset column lets you simply increase or decrease the amount of red, blue, or green in the destination pixel: type -255 into the R row’s Offset column and you’ll see that there is no longer any red in the image.

Experiment

I realize it’s tricky to understand this just from reading about it, so we’re going to look at some cool example effects. That’s much more fun, anyway. But first, for the curious, here’s the actual mathematical formula Flash uses:

destR = ( a[0]  * srcR ) + ( a[1]  * srcG ) + ( a[2]  * srcB ) + ( a[3]  * srcA ) + a[4];
destG = ( a[5]  * srcR ) + ( a[6]  * srcG ) + ( a[7]  * srcB ) + ( a[8]  * srcA ) + a[9];
destB = ( a[10] * srcR ) + ( a[11] * srcG ) + ( a[12] * srcB ) + ( a[13] * srcA ) + a[14];
destA = ( a[15] * srcR ) + ( a[16] * srcG ) + ( a[17] * srcB ) + ( a[18] * srcA ) + a[19];

(Each of the values you see in the 5×4 matrix can vary between -255 and 255.)

Take a look at the “Color Chart” sample image:

Now, let’s say you want to remove all red color from the picture. Simply set all the values in the R row to zero:

This means:

destR = ( 0 * srcR ) + ( 0 * srcG ) + ( 0 * srcB ) + ( 0 * srcA ) + 0;
//which means:
destR = 0 + 0 + 0 + 0 + 0;
//so:
destR = 0;

Now let’s say you want to add some more green where there was previously red. Put “1″ at input 0×1, so the G row reads “1 1 0 0 0″:

Let’s now achieve something very strange by changing the G row to “0 -1 0 0 50″:

What just happened? As an example, if at some random pixel you had green = 30, it was multiplied with ‘-1′ and afterwards 50 was added, so the result would be: (30 * -1) + 50 = 20.

Therefore, a type of threshold is created: for each pixel with a green value greater than 50, its transformed pixel will be completely turned off. Why? Well, suppose the pixel’s green channel has a value of 51:

destG = ( 0 * srcR ) + ( -1 * srcG ) + ( 0 * srcB ) + ( 0 * srcA ) + 50;
//remember srcG = 51:
destG = 0 + (-51) + 0 + 0 + 50;
//so:
destG = - 51 + 50;
//so:
destG = -1;
//but a pixel can't have a negative amount of green, so this is just set to zero:
destG = 0;

Now try this:

All pixels with green values greater than 50 get turned off and those with green values below 50 have all three color channels increased. This allows you to see areas of the image that have only a very small amount of green, as with the fish image:

x

Here, only the pixels with an amount of green less than 50. The darker the pixel, the more green there is in the original image. That’s the basic principle anyway. I know it may seem complicated at first, but play with it and you’ll get it eventually

Grayscale

OK, let’s go for something standard: a grayscale image. Change your matrix like so:

You’ve got a grayscale. Nice

Inverted Colors

Let’s achieve another popular color state: Inverted Colors.

To invert the colors, we need to make it so that every pixel with a red value of 255 has a red value of zero, and vice-versa. Same for the other two colors. So we need to make Flash run code that looks like this:

destR = 255 - srcR;
destG = 255 - srcG;
destB = 255 - srcB;

But that’s easy! All we have to do is set the matrix like this:

Tada! Electric fish:

More Effects

Most of the more exotic effects that can be achieved by the ColorMatrixFilter are done by setting a negative value for a color and a positive value for offset – or vice-versa. Put “-1″ from 0×3 to 2×3 (the alphas) and 255 for offset of the alpha (4×3).
Wow, now I know now how they made Terminator 2

Honestly, I am not really sure what I just did – calculations become really hard to track after a while.

Although it’s possible to understand how the ColorMatrixFilter works from a mathematical point of view, realistically it’s going to remain a matter of playing around with it. You can never be exactly sure what is going to pop up when you put some specific values. That’s why I made this EffectsTester. So play around. Make yourself metallic green, or red, or colorless.

Real World Application

When you’ve got an effect you like, you can apply it to any DisplayObject (MovieClip, Sprite, Bitmap…) in your own code like this:

//first import ColorMatrixFilter up at the top of your code:
import flash.filters.ColorMatrixFilter;

//...later on:
var filters:Array = new Array();
//for everything after " = new", copy and paste from the "Grab The Code" box of EffectsTester:
var cmf:ColorMatrixFilter = new ColorMatrixFilter(new Array(-1,0,0,0,255,0,-1,0,0,255,0,0,-1,0,255,0,0,0,1,0));
//the next two lines apply the filter to your display object:
filters.push( cmf );
myDisplayObject.filters = filters;

Now let’s look at the convolution filter.

The Convolution Filter

From Adobe’s class reference:

A convolution combines pixels in the input image with neighboring pixels to produce an image. A wide variety of image effects can be achieved through convolutions, including blurring, edge detection, sharpening, embossing, and beveling.

The ConvolutionFilter loops through all pixels of a display object. For each of them, it uses the center value in the matrix as the value of the current pixel being manipulated. For example, in a 3 x 3 matrix, the center value is at (1, 1). It then multiplies the values from the matrix by the surrounding pixels and adds the resulting values for all pixels to get the value for the resulting center pixel.

Understanding the exact math beneath the Convolution matrix is worth a whole new article, so I won’t cover all this here. If you want to get into it, check out this post on adobe.com.

However, a simple play around with the values will eventually give you all possible effects you can achieve. And it will be fun So let’s see what can we do!

Experiment

The convolution filter uses a matrix, just like the color matrix filter. Again, the values vary between -255 and 255. And again, you achieve most of the interesting effects when combining negative values with positive ones.

Let me share with you my observations of how this thing works. Try increasing some random value from the matrix. Whichever you pick, it will lighten the picture; if you want the picture to stay at normal brightness, make sure the value of “divisor” is equal to the sum of all the values in the matrix.

Now if you try to lower a random value below zero while keeping at least one other above zero, you get something going on there. It affects your edges:

Here is a nice one: want to look like a soldier? Try these values:

Now lower the “divisor” value to “-1″ to become a soldier on a mission at night.

A lot of stuff can be achieved if you hold your mouse button a bit more Lower and raise some values to extremes. Don’t forget to adjust the “divisor” – it’s crucial. Enlarge your matrix. Make it 5×5, for example.

Real World Application

To apply the effect in your own code, use the filters object, just as you did for the ColorMatrixFilter:

//first import ConvolutionFilter up at the top of your code:
import flash.filters.ConvolutionFilter;

//...later on:
var filters:Array = new Array();
//for everything after " = new", copy and paste from the "Grab The Code" box of EffectsTester:
var cf:ConvolutionFilter = new ConvolutionFilter(3,3,new Array(1,0,-10,-2,3,1,6,1,-1),0);
//the next two lines apply the filter to your display object:
filters.push( cf );
myDisplayObject.filters = filters;

Finally: try combining both filters.

//first import the filter classes up at the top of your code:
import flash.filters.ColorMatrixFilter;
import flash.filters.ConvolutionFilter;

//...later on:
var filters:Array = new Array();
//for everything after " = new", copy and paste from the "Grab The Code" box of EffectsTester:
var cmf:ColorMatrixFilter = new ColorMatrixFilter(new Array(-1,0,0,0,255,0,-1,0,0,255,0,0,-1,0,255,0,0,0,1,0));
var cf:ConvolutionFilter = new ConvolutionFilter(3,3,new Array(1,0,-10,-2,3,1,6,1,-1),0);

//the next three lines apply the filters to your display object:
filters.push( cf );
filters.push( cmf );
myDisplayObject.filters = filters;

Have fun playing with these filters and post any results you get in the comments! Thanks for reading.

Final Result Preview

In some games when you gain points, you’ll see your score immediately jump to the new total. I think it’s much cooler if the score counts up one by one, so the player can “rack up points”. That’s what we’ll be making here.

Here’s an example of the score class in action:

The main idea behind this tutorial is to teach you how to program the “counting up” functionality, but I’ll also show you how to create the cool LED display seen in the preview. We’ll start by designing the numbers:

Step 1: Set up Your Flash File

Create a new Flash file (ActionScript 3.0). Your movie settings will vary depending on your game. For this demo I’m setting up my movie as 500×300, black background, and 30 fps.

Step 2: Create the Digit Symbol

Create a new Movie Clip symbol (Insert > New Symbol). Give this symbol the name “digit”.

Step 3: Create the Digit Text Field

Inside the digit movie clip use the Text tool to add a number 0 to the symbol. I’m using a font called Digital Readout, but any LED-style font should work.

Set the text size to 40 pt and make it a light amber/orange color (#F4C28B). Set the Paragraph Format to centered.

Step 4: Add Glows

Add two separate glow filters to your text field. Set the color to red (#FF0000) for both and set the Strength of both to 200%.

Check the Inner Glow checkbox for one and set the Blur to 2px. Leave the other at 5px Blur.

You can use a different color if you want (blue or green would both look cool). The trick in getting it to look realistic is to make the text color a little washed out and set the glows to a more saturated color. This makes it look like it’s emitting light.

Step 5: Add More Numbers

Create keyframes on frames 1-10 of the digit movie clip. An easy way to do this is to select frames 1-10 (click frame 1, then Shift-click frame 10) and press F6.

You should now have 10 frames, each with a keyframe with your glowing 0 text field. Go through each frame and change the numbers so you have the digits 0-9. Frame 1 will have “0″, frame 2 will have “1″, frame 3 will have “2″, etc.

Name this layer “numbers”.

Step 6: Add the LED Background

We’ll now add an “off” state for the LED numbers, so you’ll be able to see the unlit segments of the LED display.

Copy your 8 digit (in frame 9). Create a new layer named “background”. With the new layer selected use Paste in Place (Edit > Paste in Place) to paste the 8 digit in the exact position as the one we copied.

Remove the glows from the new 8 digit and change its color to dark grey (#333333). Add a blur filter with the Blur set to 3px. Move this layer underneath the “numbers” layer.

Now you can scrub through the frames and see how the unlit segments of the LED show behind each number.

Step 7: Add the Stop Action

Create another new layer named “actions”. Open the Actions Panel and add a stop() action on frame 1.

This will keep the display showing ‘0′ until we tell it otherwise.

Step 8: Why Frames?

Why are we manually putting each digit on its own frame instead of using a dynamic text field? Good question.

The main reason is that doing so makes it more flexible for updating the graphics later. If you wanted to change the design and use bitmaps for the numbers, or have each digit displayed in a different font or color this makes it easy to do that.

Also, if designers and developers are working together on a project it’s best to create things in a way that gives designers easy access to as much of the graphics as possible.
I feel this setup does that more than using dynamic text.

Step 9: Create the Score Movie Clip

Create a new movie clip named “Score”. Check ‘Export for ActionScript’ and set the class name to “Score” also.

Drag the digit movie clip from the Library into the Score movie clip. Duplicate the digit clip (Edit > Duplicate) six times (so you have seven digits) and space them evenly.

Since we only have seven digits the maximum score we’ll be able to display is 9,999,999. If your game will need to accommodate higher scores add more digits accordingly.

Add a bit more space between every third digit to allow for comma separators.

Step 10: Name the Digit Clips

Select the leftmost digit movie clip and give it the instance name “digit1″. Name the next one to the right “digit2″, then “digit3″ and so on.

Step 11: Add Commas

Create a new layer called “commas”.

The easiest way to get the commas to look exactly like the numbers is to go into one of the digit clips and copy one of the number text fields.
Back inside the Score movie clip, paste the text field into the commas layer, and change the number to a comma. Duplicate it and move it as many times as you need.

Step 12: Add a Background

For the Score background we’ll just add a simple rounded rectangle.

Create a new layer called “background” and place it behind the numbers and commas layers. Select the Rectangle Tool and Option-click (Alt-click) the stage. Make a rectangle 200px x 40px with 3px corners (make yours longer if you have more digits). Make the fill black and the stroke 1px grey (#666666).

For some reason Flash always distorts strokes on rounded rectangles. To get around this, select the stroke and choose Modify > Shape > Convert Lines to Fills. This converts the stroke from a line to a filled shape and it will no longer distort.

If you think this is a total hack of a workaround for basic functionality that should have been fixed years ago, I urge you to contact Adobe and let them know.

Step 13: Add Shine

What graphic would be complete without some iPhone-esque shine?

Create a new layer above everything else called “shine”. Add a new rounded rectangle, slightly smaller than the background one. This time give it no stroke and fill it with a white gradient from 20% Alpha to 0% Alpha.

Step 14: Create the Score Class

Create a new Actionscript file named “Score.as”. Save it in the same directory as your main Flash file. Since the name of this class and the Export Class name of our Score movie clip are the same, Flash will automatically link them.

Add this code to the Score.as file:

package {

	import flash.display.MovieClip;
	import flash.events.Event;

	public class Score extends MovieClip {

		// CONSTRUCTOR
		public function Score() {

		}

	}
}

This is just an empty shell of a class for now. We have to extend the MovieClip class since this class is linked to a movie clip in the library, so we also have to import the MovieClip class. We’ll be using the ENTER_FRAME event, so we import the Event class as well.

Step 15: Add Variables and Constants

Add these two lines to the Score class just above the constructor function.

private const SPEED:int = 1; // how fast to count
private const NUM_DIGITS:int = 7; // how many digits there are in the score

These are two constants – kind of like settings for the class.

• The first, SPEED, controls how fast the score counts. I have it set to count one by one, but if your game uses higher scores this might be too slow. You can change this to 5 or 10 or 50 to count up by those increments.
• The second constant, NUM_DIGITS, defines how many digits we have in our Score movie clip. If you added more (or less) than 7 digits you’ll need to change this.

Now let’s add a couple of variables. Put these just below the constants:

private var _totalScore:int = 0;
private var _displayScore:int= 0;

These variables will hold the two different versions of our score. “_totalScore” will be the actual score. “_displayScore” will be the number that is currently
being shown on the LED display. If I add 50 to the score, the _totalScore will immediately be 50, but the _displayScore will be 1, then 2, then 3, until it reaches 50.

If you ever need to know the actual score (like to send to your high score boards) you’ll use _totalScore since _displayScore might not be accurate.

I’m using underscores at the beginning of the variable names to denote that these are private variables.

Step 16: Add the totalScore Accessor Method

So if _totalScore is a private variable, how will we access from outside the Score class? We’ll use an “accessor” or “getter” method.

Add this method below the constructor function:

// public accessor for totalScore
public function get totalScore():int {
	return _totalScore;
}

This method simply returns the value of the _totalScore variable. It gives us a way to access that value without having to expose it as a public variable.

Step 17: Add the add Method

We’ll need a way to add points to the score. Add this method:

// add an amount to the score
public function add(amount:int):void {
	_totalScore += amount;
	addEventListener(Event.ENTER_FRAME, updateScoreDisplay); // start the display counting up
}

This method accepts an integer “amount” which it adds to the _totalScore variable. The second line starts an ENTER_FRAME event that calls a method called updateScoreDisplay every frame. We’ll add that next.

Step 18: Add the updateScoreDisplay Method

Now add a the updateScoreDisplay method. This is where all of the cool counting-up functionality will happen. It needs to accept an Event since it’s getting called from an ENTER_FRAME event.

// this runs every frame to update the score
private function updateScoreDisplay(e:Event):void {

}

Now let’s add some functionality. The first thing this method will do is to increment the _displayScore variable by the amount we set in our SPEED constant:

// increment the display score by the speed amount
_displayScore += SPEED;

There’s a potential problem here though. What if our speed is set to 10 and we try to add 5 to the score? The displayScore will be higher than the totalScore. Let’s add a couple lines to fix that:

// make sure the display score is not higher than the actual score
if(_displayScore > _totalScore){
	_displayScore = _totalScore;
}

That checks if the displayScore is higher than the totalScore and if so, sets the displayScore to be equal to the totalScore.

Next we need to add the leading zeros to the score. We’ll do this by converting the displayScore to a String and adding zeros until the length equals the number of digits defined by the NUM_DIGITS constant:

var scoreStr:String = String(_displayScore); // cast displayScore as a String

// add leading zeros
while(scoreStr.length < NUM_DIGITS){
	scoreStr = "0" + scoreStr;
}

Now to actually display the score we’re going to loop through each of our digit clips (remember we named then “digit1″, “digit2″, etc.) and use the corresponding number from the score string to set the frame number of the clip:

// loop through and update each digit
for (var i:int = 0; i < NUM_DIGITS; i++) {
	var num = int(scoreStr.charAt(i));
	this["digit"+(i+1)].gotoAndStop(num+1);// set the digit mc to the right frame
}

The charAt method retrieves the character from a String at the specified position. This lets us go character by character through the score string.

The brackets in the next line allow us to dynamically create the clip name. The code, this["digit"+(i+1)] accesses the clip with the name “digit1″ or “digit2″, etc., depending on the value of i.

We’re using “num+1″ as the frame number because the frame numbers are offset by 1 from the digits they contain (frame 1 shows 0, frame 2 shows 1, etc.)

The last thing we need to do in this method is check to see if the displayScore and the totalScore are equal. If so, we can remove the listener and stop calling this method for now.

// if the display score is equal to the total score remove the enterframe event
if(_totalScore == _displayScore){
	removeEventListener(Event.ENTER_FRAME, updateScoreDisplay);
}

If you got lost anywhere in that step you can check out the source files to see the completed class.

Step 19: The Score Class in Use

To use this class drag the Score movie clip from the Library onto the Stage and give it the instance name “myScore”. You can add points to your score by using this line in your Document Class:

myScore.add(50);

You can see an example of this in the source files. I’m adding to the score when the bumper buttons are clicked, but you’ll more likely be calling add() when events in your game occur.

If you need to know the player’s score you can get the totalScore by using:

myScore.totalScore

This will call the accessor method and return the value of _totalScore.

Conclusion

You now have a reusable counting Score class that you can use in any of your games.

I think the LED look is cool, but you should definitely alter the design to fit the look of your game. Here are a couple ideas for different designs to get you started:

Thanks for reading this tutorial. Let me know what you think!

Step 1: A Little Background

If you aren’t already aware, Box2D is a great physics library created by Erin Catto.
It was ported to AS3 by Matthew Bush and John Nesky.

QuickBox2D is a mini-library I created to work with Box2DFlashAS3. The main purpose of this library is to significantly simplify instantiation of rigid bodies and provide a simple way to them bodies with custom graphics.

Step 2: Download the Libraries

In order to follow this tutorial you’ll need Box2DFlashAS3 version 2.0.2. You can download it at sourceforge.net.

Be sure not to download 2.1a as it is still very much in an alpha state. Box2D 2.1 is still not out and the API is still undergoing
significant changes. When 2.1 is out of alpha, QuickBox2D will support it, but for the time being it will not work properly with QuickBox2D.

Next you need to download the latest version of QuickBox2D from actionsnippet.com.

This tutorial will function with QuickBox2D 1.1 or greater.

Step 3 : Set up the File

Open Flash and create a new ActionScript 3.0 file.

Save your file and make sure that Box2D and QuickBox2D are either in your classpath, or directly next to your fla file.

Step 4 : Create Your First Rigid Bodies

We’ll be placing all our code on the first frame of the timeline, so open up your actions (option + F9) and paste the following code snippet:

[SWF(width = 800, height = 600, frameRate = 60)]

import com.actionsnippet.qbox.*;

var sim:QuickBox2D = new QuickBox2D(this);

sim.createStageWalls();

sim.addBox({x:3, y:3, width:1, height:1});
sim.addCircle({x:4, y:6, radius:1});

sim.start();
sim.mouseDrag()
		

Step 5 : Understanding the Code

Go ahead and test your movie (command + enter). You should end up with a box and a circle rigid body that you can drag and throw around the stage.

After importing the library, we instantiate an instance of QuickBox2D. We pass a reference to the timeline into the QuickBox2D constructor, this causes all rigid bodies to be drawn to the main timeline. You can pass any MovieClip into the QuickBox2D constructor. We store our QuickBox2D instance in a variable called sim (short for simulation).

Next we call the createStageWalls() method. This draws boxes around the edges of the stage so that rigid bodies don’t fall off the screen.

On line 9 we create our first rigid body using the addBox() creation method. addBox() takes an Object
as its argument. This works like popular tweening engines, allowing you to enter a variable number of arguments in any order with easy to read syntax. In this case, we create a box with an x and y position of 3 meters and a width and height of 1 meter. Those values may seem strange, but I’ll explain them shortly.

Next, we create a circle using the addCircle() method. This works pretty much the same way as the addBox() method. We use the params Object to tell QuickBox2D to position the circle at point (4,6) and we give the circle a radius of 1 meter.

To start the simulation we call start() and to allow dragging for the rigid bodies we call mouseDrag().

The only tricky part with this code snippet is the coordinate system. It’s pretty obvious that our x and y values aren’t in pixels. Box2D uses meters instead of pixels. This takes a little getting used to, but after an hour or two you’ll have no trouble thinking in meters instead of pixels. It’s important to note that 1 meter is 30 pixels. We’ll see a little more about this later on when we get to skinning.

Step 6 : Adding Density

Let’s make this a little more interesting. Replace your previous addBox() and addCircle() calls with these:

sim.addBox({x:4, y:3, width:1, height:1});
sim.addBox({x:3, y:6, width:4, height:0.25, density:0, angle:0.1});

sim.addCircle({x:3, y:10, radius:1});
sim.addCircle({x:8, y:10, radius:0.5});

Go ahead and test your movie. We’re already familiar with x, y, width, height and radius, but we added two more params:
density and angle. Setting density to 0 causes Box2D to create a static rigid body. Static bodies don’t
fall down or react to collisions with other rigid bodies. Setting density to other values controls how the mass of the rigid body is calculated. Try changing density to 100 and you’ll notice that the rectangle becomes very heavy.

Setting angle changes the starting rotation value for a rigid body. This value is in radians instead of degrees. I prefer working directly in radians, but if you don’t want to do that you can create a helper function to convert:

// takes a degree value and converts it to radians
function radians(degs:Number):Number{
	return degs * Math.PI / 180;
}

Step 7 : Take a Few Minutes to Create Something

At this point I highly recommend taking five or ten minutes to create something simple. You already have a enough knowledge to create some pretty nice simulations… If you create something interesting, be sure to save it.

Step 8 : Using What We’ve Learned

Now that you’re beginning to get a feel for things, clear your timeline code and replace it with this:

[SWF(width = 800, height = 600, frameRate = 60)]
import com.actionsnippet.qbox.*;
var sim:QuickBox2D = new QuickBox2D(this);
sim.createStageWalls();
// make a heavy circle
sim.addCircle({x:3, y:3, radius:0.5, density:5});
// create a few platforms
sim.addBox({x:4, y:4, width:6, height:0.35, angle:0.1, density:0});
sim.addBox({x:9, y:6, width:6, height:0.35, angle:0.1, density:0});
sim.addBox({x:14, y:9, width:12, height:0.35, angle:-0.2, density:0});
sim.addBox({x:4, y:12, width:0.35, height:4, angle:-0.1, density:0});
sim.addBox({x:10, y:14, width:14, height:0.35, density:0});
// make 26 dominoes
for (var i:int = 0; i<13; i++){
 sim.addBox({x:7 + i * 0.8, y:13, width:0.25, height:1.6});
 sim.addBox({x:8 + i * 0.8, y:18.7, width:0.25, height:1.6})
}
sim.start();
sim.mouseDrag();

Go ahead and test your movie.

There’s nothing new happening in this example. We’re simply making use of x, y, width, height, radius and density.
These few params will take you pretty far. We’re going to cover more params related to the behavior or rigid bodies in the second part of this tutorial, but if you feel like skipping ahead, a full list can be found in the QuickBox2D Docs.
The params for addBox() can be found here.

Step 9 : Grouping Rigid Bodies

Box2D allows you to create compound shapes. This means taking circles, boxes and polygons and grouping them together to make more complex shapes.
QuickBox2D vastly simplifies what you need to do to create compound shapes:

[SWF(width = 800, height = 600, frameRate = 60)]
import com.actionsnippet.qbox.*;
var sim:QuickBox2D = new QuickBox2D(this);
sim.createStageWalls();
// store references to each part of the group
var circleA:QuickObject = sim.addCircle({x:0, y:0, radius:0.5});
var circleB:QuickObject = sim.addCircle({x:2, y:0, radius:0.5});
var middleBox:QuickObject = sim.addBox({x:1, y:0, width:1.5, height:0.5});
// create the group using the addGroup() method
sim.addGroup({objects:[circleA, circleB, middleBox], x:6, y:6});
sim.start();
sim.mouseDrag();

Clear out your timeline code and replace it with what’s above. Go ahead and test your movie.

All of the QuickBox2D creation methods (like addBox() and addCircle()) return QuickObject instances. QuickObjects are wrappers for the Box2D class instances that are necessary to create rigid bodies. When creating group objects, the first thing we need to do is store references to a few QuickObjects. We call these QuickObjects circleA, circleB and middleBox. Notice that x and y
coordinates for these are relative to (0,0) – this requirement is intended to simplify any positioning logic you need to do when placing the different parts of a group.

Now that we have our references, we can pass them as an array to the objects param of the addGroup() creation method. We then move the entire group to point (6,6).

Step 10 : A More Complex Group

With boxes and circles alone you can construct some pretty complicated group shapes. Clear out your timeline code and replace it with this:

[SWF(width = 800, height = 600, frameRate = 60)]
import com.actionsnippet.qbox.*;
var sim:QuickBox2D = new QuickBox2D(this);
sim.createStageWalls();
// create a circle
sim.addCircle({x:16, y:3, radius:1, density:0.2});
// create a bunch of boxes
var boxes:Array = [];
for (var i:int = 0; i<20; i++){
	var h:Number = 1 - i / 20;
	boxes.push(sim.addBox({x:i, y:i * h, width:1, height:h}));
}
// group all the boxes together
sim.addGroup({objects:boxes, x:3, y:3});
sim.start();
sim.mouseDrag();

Go ahead and test your movie.

Step 11 : Coloring Rigid Bodies and Using setDefault()

There are a few params that you can use to change the colors and render style of QuickObjects. These are fillColor, fillAlpha, lineColor, lineAlpha and lineThickness. They should be pretty self-explanatory. Take a look at this:

[SWF(width = 800, height = 600, frameRate = 60)]
import com.actionsnippet.qbox.*;
var sim:QuickBox2D = new QuickBox2D(this);
sim.createStageWalls();
sim.addCircle({x:3, y:3, radius:1,
			   fillColor:0xFF0000,
			   lineThickness:10,
			   lineColor:0xFFFF00});
sim.addCircle({x:6, y:3, radius:1,
			   fillColor:0xFF0000,
			   lineThickness:10,
			   lineColor:0xFFFF00});
sim.addCircle({x:9, y:3, radius:1,
			   fillColor:0x000022,
			   lineThickness:5,
			   lineColor:0x6666FF});
sim.addBox({x:12, y:4, width:2, height:2,
			   fillColor:0xFF0000,
			   lineThickness:10,
			   lineColor:0x00FF00});
sim.start();
sim.mouseDrag();

Try this out on your timeline.

While this is easy to understand, you can see how dealing with these params can quickly become cumbersome. In the next step we’ll look at a way to get rid of some of this repetitive code.

Step 12 : The setDefault() Method

To get rid of repetitive looking code, QuickBox2D has a method called setDefault(). This method forces default values for all calls to creation methods. So you could simplify the previous example to look like this:

[SWF(width = 800, height = 600, frameRate = 60)]
import com.actionsnippet.qbox.*;
var sim:QuickBox2D = new QuickBox2D(this);
sim.createStageWalls();
sim.setDefault({fillColor:0xFF0000, lineThickness:10, lineColor:0xFFFF00});
sim.addCircle({x:3, y:3, radius:1});
sim.addCircle({x:6, y:3, radius:1});
sim.addCircle({x:9, y:3, radius:1,
			   fillColor:0x000022,
			   lineThickness:5,
			   lineColor:0x6666FF});
sim.addBox({x:12, y:4, width:2, height:2, lineColor:0x00FF00});
sim.start();
sim.mouseDrag();

Go ahead and try this out in your timeline.

The setDefault() method isn’t limited to working with things like fillColor and lineThickness. It can be used in conjunction with any param. While I mostly find myself making use of setDefault() for render style and certain params related to joints, you could do something like this:

sim.setDefault({fillColor:0xFF0000, lineThickness:10,
			   lineColor:0xFFFF00, y:3, radius:1});
sim.addCircle({x:3});
sim.addCircle({x:6});
sim.addCircle({x:9,
		   fillColor:0x000022,
		   lineThickness:5,
		   lineColor:0x6666FF});

This could quickly get confusing, so be careful when deciding to use setDefault() in this way.

Step 13 : Skinning Rigid Bodies

One of the main features of QuickBox2D is easy skinning of rigid bodies. Because skinning generally requires use of library assets, you’ll need to download this source file.

There are three MovieClips in the library, CircleFace, OddPizza and Mail. Each clip is exported for use with ActionScript. On the timeline you’ll find the following code:

[SWF(width = 800, height = 600, frameRate = 60)]
import com.actionsnippet.qbox.*;
var sim:QuickBox2D = new QuickBox2D(this);
sim.createStageWalls();
sim.addCircle({x:3, y:3, radius: 45 / 30, skin:CircleFace, scaleSkin:false});
sim.addCircle({x:6, y:3, radius:1, skin:OddPizza});
sim.addCircle({x:6, y:6, radius:0.5, skin:OddPizza});
sim.addCircle({x:6, y:10, radius:2, skin:OddPizza});
sim.addBox({x:12, y:3, width:3, height: 50 / 30, skin:Mail});
sim.addBox({x:18, y:3, width:3, height: 3, skin:Mail});
sim.start();
sim.mouseDrag();

Go ahead and test the movie.

In order to create custom skins, we make use of the skin param. In this example, we set all of our skin params to linkage classes from our library. By default, QuickBox2D will create an instance of this class and attempt to scale it to fit the rigid body. This is useful for simple shapes like circles and boxes, but for more complex skins, you may want to turn this feature off using the scaleSkin param. We do this on line 8 so that the CircleFace skin is used properly.

You’ll notice that for the radius we put 45 / 30 instead of 1.5. As mentioned earlier in this tutorial, 1 meter is 30 pixels, so to convert from pixels to meters we divide by 30. The circle in the CircleFace skin has a radius of 45 pixels so we’ve left the hard coded conversion in for clarity rather than writing 1.5.

Lines 10-12 create circles that make use of the OddPizza skin. The scaleSkin param is true by default, so each skin is automatically scaled
according to the radius param. Lines 14 and 15 create boxes that are skinned with the Mail clip.

Over the past few months, more skinning features have been added at the request of developers making use of QuickBox2D. I use the techniques described above exclusively, but if you’re interested in seeing a few additional skinning techniques, have a look at this post on actionsnippet.

Step 14 : Further Reading

ActionSnippet QuickBox2D Posts – There are a whole bunch of QuickBox2D examples on actionsnippet.com in the form of posts. The earlier posts are significantly simpler than the newer ones. For that reason, I recommend going back a few pages and working your way up to some of the later posts. Nearly every aspect of QuickBox2D is covered in these examples.

QuickBox2D Docs – This is just the documentation for QuickBox2D. In some places it assumes basic Box2D knowledge.

Box2D Manual – An excellent resource that covers all aspects of Box2D. The C++
syntax might scare you away… but if you replace arrows like this -> with dot syntax and ignore asterisks *… you’ll find that you understand a good deal.

Box2D Docs – Docs for all the C++ classes. I find this very useful for some of the techniques discussed in part 2 of this tutorial.

Step 15 : What Next?

We’ve covered a lot of ground and we’ve only really scratched the surface. Below are summaries of the upcoming QuickBox2D tutorials:

QuickBox2D Part 2
In the second part of this tutorial we will explore some of the more intermediate level features of QuickBox2D. We’ll look at how to create polygon rigid bodies. We’ll learn how to fine tune our simulation using additional param values such as restitution, linearDamping and angularDamping. We’ll discuss some powerful Box2D methods that are exposed by QuickBox2D and we’ll talk about FRIM (framerate independent motion).

QuickBox2D Part 3
In the third part of this tutorial we will cover some advanced techniques. We’ll look at how QuickBox2D handles all of the different types of Box2D joints. We’ll also go over contact points and special types of collisions.

I hope you enjoyed reading this first part!

Bruno is kicking off the Quick Tips here at Activetuts+, with a great tip on creating perfect reflections. Got 5 minutes? Off you go then..

Final Result Preview

Let’s take a look at what we’re aiming for here..

Introduction

This method allows you to take any kind of movieclips, even those containing video, and make a true reflection without worrying about the fading background.

Step 1: Stage Setup

Open up Flash and create a new Actionscript 3 FLA.

Step 2: Scene Setup

Create the following layers:

Step 3: Object

In the Objects layer create the movieclip that you want to reflect.

Step 4: Reflection

Copy the movieclip from the Objects Layer and paste it in the Reflections layer, scale it vertically at -100%, that will make it flip vertically

Step 5: Cache as Bitmap

Check the cache as bitmap box.

Step 6: Instantiate

Give it an instance name of “reflection_mc.”

Step 7: Gradient

Create a gradient filled rectangle with alpha.

Step 8: Mask

Convert it to movieclip (F8) and give it an instance name of “mask_mc.”

Step 9: Cache as Bitmap, Again

Check the cache as bitmap box.

Step 10: Making Magic

Select the actions layer and type:

reflection_mc.mask = mask_mc

Conclusion

If you want you can add an alpha to the relfection_mc, I applied one of around 60%. Hope you liked this Quick Tip, thanks for reading!

Next, we will look at a Stardust’s general workflow and get down to creating a particle effect with stars shooting out from the mouse cursor; the stars will slow down gradually, grow larger after birth, and shrink when dying.

Finally, I’ll demonstrate the flexibility of Stardust by creating several variations from the already complete example, including using animated movie clips as particles, variable particle simulation timescale, and shooting out display objects of different classes from a single emitter.

This tutorial is meant for people that are already familiar with ActionScript 3.0 object-oriented programming (OOP), so I’m assuming that you already know very well what classes, objects, inheritance, and interface mean. No problem with OOP? Then let’s go shoot some stars!

Stardust Particle Engine

As its name suggests, Stardust is used for creating particle effects. If you’re an experienced ActionScripter, you might have created particle effects from scratch many times, and say “I’m totally cool with creating particle effects from scratch, so why would I need a particle engine anyway?” Well, Stardust is here to help you focus more on actual particle behavior design than worrying about the tedious underlying low-level stuff, such as memory management. Instead of writing code to take care of particle data, initializing and disposing resources, with Stardust, you get to skip these boring routines and just decide how you want your particles to behave.

Stardust Features

The class structure of Stardust was inspired by FLiNT Particle System, another ActionScript 3.0 particle engine. Thus, they share some similar basic features.

• 2D and 3D Particle Effects – Stardust can be used to create both 2D and 3D particle effects. It has its own built-in 3D engine, and it also can be used to work in combination with other third-particle 3D engines, including ZedBox, Papervision3D, and ND3D.
• High Extensibility – Stardust provides a large set of particle behaviors and renderers at your disposal. If none of them fit your needs, you can always extend the base classes and create your own custom particle behaviors; also, you can create your own renderer to work with another 3D engine that is not supported by Stardust.

In addition to these basic features, Stardust also provides several advanced features for experienced users.

• Adjustable Simulation Timescale – The timescale used for particle simulation can be dynamically adjusted during run-time. For instance, if you change the timescale to half of the original, the particle effect will be half as fast as normal speed; and if you tweak the timescale to twice the original, the particle effect is going to be simulated twice as fast as normal. This feature can come in handy when you are creating a game that has slow-motion effects: the particle effect can slow down to match your game engine’s speed, synchronizing with your game animation and graphics.
• XML Serialization – You can transform your particle system into a file in XML format that can be stored on your hard drive, later loaded during run time and interpreted to reconstruct your orignal particle system. This is very useful when you’re working with a large project. Say you just want to size up your particles a little bit, so you tweak the parameters in the source code and recompile your entire Flash application, which might take a minute, or even over five minutes if your project is extremely huge. Is it worth it? Absolutely NO. That’s a total waste of time. Using the XML serialization feature to save your particle system in external XML files, you are separating parameters from the source code for the main application. So what you’ll have to do is simply open the XML file, change the parameter values, save it, and reopen your main application. That’s it! No recompilation is required at all. I would say this is the ideal way to work with large projects.

When it comes to particle effects, it’s very important to handle massive particle data efficiently. Stardust makes heavy use of object pools and linked lists to enhance performance:

• Object Pools – Used objects are stored into a pool; later, if an object of the same type is required, Stardust doesn’t instantiate it immediately, but checks if there’s any object previously stored in the object pool left. If yes, Stardust simply takes out that object and uses it, instead of creating a whole new object. Usually particle effects involve a lot of object instantiation, which is CPU-consuming. By using object pools, Stardust greatly reduces the instantiation overhead.
• Linked Lists – It’s very easy and tempting to store particle data into an array; however, in a case when particles are created and removed very frequently, a lot of array splicing takes place to remove dead particles. Array splicing is a CPU-consuming process, especially for long arrays. For a linked list, no matter how long the list is, it always takes the same short amount of time to splice out dead particles. From version 1.1, Stardust began to use linked lists internally to store particle data.

Setting Up Stardust

Before we get down to actual coding, we’ll need to grab a copy of Stardust Particle Engine. It’s released under MIT license, which means it’s totally free of charge no matter if you want to use it in a commercial or non-commercial project.

Here’s the Stardust’s project homepage: http://code.google.com/p/stardust-particle-engine/

You can download Stardust here: http://code.google.com/p/stardust-particle-engine/downloads/list

At the time of writing, the latest version that can be downloaded from the download list is 1.1.132 Beta. You can always grab the latest revision from the SVN repository (which might not be stable, however).

On the project homepage, you can also find more accessories like API documentation and a copy of PDF manual. There are even video tutorials on YouTube.

Stardust Class Responsibilities

Here I’m going to briefly cover the Stardust core classes and their responsibilities.

StardustElement

This class is the superclass of all core classes, which defines properties and methods especially for XML serialization.

Random

Generally speaking, particle effects are all about controlling an amount of entities with similar but randomized appearance and behaviors. The Random class is for generating random numbers, which can be used in Stardust for randomizing particle properties. For instance, the UniformRandom class is a subclass of the Random class, and its name tells everything: the random number generated by a UniformRandom object is uniformly distributed, and I’ll be using this class in particular for the entire tutorial.

Zone

There are times when a one-dimensional random number is not enough. Sometimes we need two-dimensional random numbers, which are essentially pairs of random numbers, for properties like position and velocity. The Zone class is for generating two-dimensional random number pairs. This class models a random number pair as a random point in a 2D zone. For instance, the CircleZone generates random number pairs (x, y) from random points within a circular region. The Random and Zone classes are mainly used by the Initializer class, which will be covered later. The Zone3D class is the 3D counterpart of this class, for 3D particle effects.

Emitter

The Emitter class is basically where all the low-level stuff is encapsulated. An emitter initializes newly created particles before they are added into the simulation, updates particle properties in each main loop iteration, and removes dead particles from the simulation. The Emitter.step() method is what you want to invoke repeatedly in order to keep Stardust up and running.

Clock

The Clock class determines the rate of new particle creation for emitters. One Emitter object holds exactly one reference to a Clock object. At the beginning of each Emitter.step() method call, the emitter asks the clock object how many new particles it should create. Take the SteadyClock class for example, it tells emitters to create new particles at a constant rate.

Initializer

This class is for initializing newly created particles. An Initializer object needs to be added to an emitter for it to work. Basically, one Initializer subclass initializes just one particle property. For instance, the Mass initializer class initializes the mass of new particles. Some initializers accept a Random object as a constructor paramter for initializing particles with randomized values. The following code creates a Life initializer which initializes particle lives to values centered at 50 with variation of 10, namely between the range of 40 to 60.

new Life(new UniformRandom(50, 10));

Action

Action objects update particle properties in each iteration of the main loop (the Emiter.step() method). For example, the Move action class updates particle positions according to velocity. An Action object must be added to an emitter for it to work.

General Stardust Workflow

Now that you know how the core classes collaborate together, let’s take a look at a general workflow for Stardust.

You start by creating an emitter. Use the Emitter2D class for 2D particle effects and the Emitter3D class for 3D effects.

var emitter:Emitter = new Emitter2D();

To specify the rate of particle creation, we need a clock. This can either be set by the Emitter.clock property or by passing a clock as the first parameter to the emitter’s constructor.

//property approach
emitter.clock = new SteadyClock(1);

//constructor approach
var emitter:Emitter = new Emitter2D(new SteadyClock(1));

Add initializers to the emitter through the Emitter.addInitializer() method.

emitter.addInitializer(new Life(new UniformRandom(50, 10)));
emitter.addInitializer(new Scale(new UniformRandom(1, 0.2)));

Add actions to the emitter through the Emitter.addAction() method.

emitter.addAction(new Move());
emitter.addAction(new Spin());

Create a renderer and add the emitter to the renderer through the Renderer.addEmitter() method.

var renderer:Renderer = new DisplayObjectRenderer(container); //"container" is our container sprite
renderer.addEmitter(emitter);

Finally, repeatedly call the Emitter.step() method to keep the particle simulation going. You might want to use the enter-frame event or a timer to do this. In a single call of the Emitter.step() method, the clock determines how many new particles should be created, these new particles are initialized by initializers, all particles are updated by actions, dead particles are removed, and finally, the renderer renders the particle effect.

//enter-frame event approach
addEventListener(Event.ENTER_FRAME, mainLoop);

//timer approach
timer.addEventListener(TimerEvent.TIMER, mainLoop);
function mainLoop(e:Event):void {
	emitter.step();
}

Alright. That’s pretty much all of it for Stardust primer. Now it’s time to open the Flash IDE and get your hands dirty.

Step 1: Create a New Flash Document

Create a new Flash document with a dimension of 640X400 a frame rate of 60fps, and a dark background. Here I made a dark-blue gradient background. By the way, Stardust works well with both Flash Player 9 and 10, so it’s okay no matter you’re using Flash CS3 or CS4. In this tutorial I’ll be using Flash CS3.

Step 2: Draw a Star

We’re creating a particle effect with stars, so we’ll need to draw a star and convert it to a symbol, exported for ActionScript of course. This symbol will be used later to render our particle effect. Name the symbol and the exported class “Star”.

Step 3: Create the Document Class

Create a new document class, and name it StarParticles.

package {
	import flash.display.Sprite;

	public class StarParticles extends Sprite {

		public function StarParticles() {

		}
	}
}

Step 4: Extend the Emitter

As mentioned in the general workflow, the first step is to create an emitter. And the next step is adding initializers and actions to the emitter. While this can be done in the document class constructor, I strongly recommend that it be done in a separate Emitter subclass. It’s always better to separate the particle behavior design form the main program; by doing so, the code is much cleaner and easier to modify in the future, without being mixed up with the main program.

We are going to create a 2D particle effect, so the Emitter2D is the emitter class we’re going to extend. Extend the Emitter2D class and name it StarEmitter, since we are going to make it shoot out stars later. The Emitter constructor accepts a Clock parameter, so we’ll declare a constructor parameter to pass on a Clock object reference to the superclass’s constructor.

package {
	import idv.cjcat.stardust.twoD.emitters.Emitter2D;

	public class StarEmitter extends Emitter2D {

		public function StarEmitter(clock:Clock) {
			//pass on the clock object to the superclass's constructor
			super(clock);
		}
	}
}

Step 5: Declare Constants

A better approach to create an emitter subclass is to declare particle parameters as static constants, grouped at a single place. So in case you want to tweak the parameters, you’ll always know where to find the declarations. The meaning of these constants will be explained later when they are used.

//average lifespan
private static const LIFE_AVG:Number = 30;

//lifespan variation
private static const LIFE_VAR:Number = 10;

//average scale
private static const SCALE_AVG:Number = 1;

//scale variation
private static const SCALE_VAR:Number = 0.4;

//scale growing time
private static const GROWING_TIME:Number = 5;

//scale shrinking time
private static const SHRINKING_TIME:Number = 10;

//average speed
private static const SPEED_AVG:Number = 10;

//speed variation
private static const SPEED_VAR:Number = 8;

//average omega (angular velocity)
private static const OMEGA_AVG:Number = 0;

//omega variation
private static const OMEGA_VAR:Number = 5;

//damping coefficient
private static const DAMPING:Number = 0.1;

Step 6: Adding Initializers

Which initializers do we need to create our particle effect? Let’s take a look at the list below:

• DisplayObjectClass – This initializer assigns a specified display object to each particle, which will be used by a DisplayObjectRenderer to render particle effects. The constructor accepts a class reference to the display object class we wish to instantiate; for this tutorial, this class will be the Star class (symbol) we created in Step 2.
• Life – This initializer assigns each particle a random life value. Later, we’ll add actions to the emitter to deplete this life value through time, and to mark a particle as dead if its life value reaches zero. A Random object is passed to the constructor, which will be used by this initializer to generate random value for particles’ life. For most cases, the UniformRandom class is convenient and sufficient; the first parameter of the UniformRandom constructor is the center (or average) value of the random numbers generated, and the second is the radius (or variation). For instance, a UniformRandom object with center 20 and variation 5 generates random numbers within the [15, 25] range. Here we use the LIFE_AVG constant for the center value and LIFE_VAR for the radius.
• Scale – Like the Life initializer, the Scale initializer initializes a particle’s scale to a random value, determined by a Random object passed to the initializer’s constructor. Here we use the SCALE_AVG constant for the center value and SCALE_VAR for the radius.
• Position – This initializer assigns a particle a random position. Unlike the Life and Scale initializers, which need only 1D random numbers, the Position initializer requires 2D random number pair generators. As described in the Stardust Class Responsibilities section, the Zone class is exactly for this purpose. The Zone object passed to the initializer’s constructor is used to generate 2D random number pairs, which will be assigned to particles as position vectors. In this tutorial we’re going to make stars shoot out from a single point located at the mouse cursor, so we’ll use a SinglePoint class, which is a Zone subclass. In order to dynamically adjust the coordinate of this SinglePoint object from the document class, we need to expose a reference to this point object through a public property. This is what the “point” property is for.
• Velocity – Same as the Position initializer, the Velocity initializer needs a Zone object to generate 2D random value pairs to initialize particle velocities. A 2D vector generated by the Zone object, which is the coordinate of a random point in the zone, is assigned to particles as their velocities. Here we use the LazySectorZone class that represents a sector region. A sector is a portion of a circle enclosed by two radii and two angles. For the LazySectorZone, the two angles are 0 and 360 by default, representing a full angle around a circle. The first constructor parameter of the LazySectorZone class is the average of the two radii, and the second is the variation of the radii. In this case, the average of the two radii represents the average speed, and the variation of radii represents variation of speed. Here we use the SPEED_AVG constant for the first parameter and SPEED_VAR for the second.
• Rotation – The Rotation initializer initializes a particle’s rotation angle to a random value. And as some of the aforementioned initializers, the constructor accepts a Random object to generate a random value. Since we’d like to have particles with angles ranging from 0 to 360 degrees, we’ll use 0 as the center and 180 as the radius of the UniformRandom object.
• Omega – Omega, as in most of the physics textbooks, means angular velocity. With that said, the purpose of this initializer is clear: it initializes a particle’s angular velocity to a random value, and the OMEGA_AVG constant is used as the center and OMEGA_VAR as the radius of the UniformRandom object.

And here’s the code:

point = new SinglePoint();

addInitializer(new DisplayObjectClass(Star));
addInitializer(new Life(new UniformRandom(LIFE_AVG, LIFE_VAR)));
addInitializer(new Scale(new UniformRandom(SCALE_AVG, SCALE_VAR)));
addInitializer(new Position(point));
addInitializer(new Velocity(new LazySectorZone(SPEED_AVG, SPEED_VAR)));
addInitializer(new Rotation(new UniformRandom(0, 180)));
addInitializer(new Omega(new UniformRandom(OMEGA_AVG, OMEGA_VAR)));

Step 7: Adding Actions

Okay, we’re done with the initializers. Now it’s time to add actions to the emitter. Below is a list of actions we need:

• Age – The Age action decreases a particle’s life value by 1 in each emitter step.
• DeathLife – When a particle’s life value reaches zero, this action marks the particle as dead, changing its isDead property from false to true. At the end of an emitter step, dead particles are removed.
• Move – Pretty much as its name suggests, the Move action updates particle positions according to their velocities.
• Spin – Similar to the Move action, the Spin action updates a particle’s rotation angle according to the particle’s omega value (angular velocity).
• Damping – This action multiplies a particle’s veloctiy with a factor within the range [0, 1], simulating damping effects and gradually slowing down particle. A factor of one means no damping at all: particles move freely as if there were no damping effect; a factor of zero means total damping: all particles cannot move a bit. This factor is determined by the “damping coefficient” through this formula: “factor = 1 – (damping coefficient)”. The parameter passed to the constructor is the damping coefficient; here we just want a little damping effect, so we use the value 0.1 for the coefficient.
• ScaleCurve – The ScaleCurve action changes a particle’s scale according to its life value. It grows from an initial scale to a normal scale after birth, and fades to a final scale as it dies. Of course, a particle can also have an initial or final scale value that is larger than the normal scale; it just depends on personal choice. In many cases, we’d like particles to have an initial and final scale value of zero, which is the default value. The first parameter in the constructor stands for a particle’s growing time, and the second is the fading time; so we pass in the GROWING_TIME and SHRINKING_TIME constants as the first and second parameter, respectively. The growing time is 5, meaning a particle grows from zero scale to normal scale during its first 5 unit of lifespan; and the shrinking time is 15, which means a particle shrinks to zero scale at the last 15 unit of lifespan. Note that the transition is linear by default, but any easing fucntion can be used, specifically the easing equations created by Robert Penner. There’s another similar action called AlphaCurve, which works on alpha values in the same way.

That’s it. Our emitter is done. Here’s the code for this emitter in its entirety, necessary import statements included.

package {
	import idv.cjcat.stardust.common.actions.Age;
	import idv.cjcat.stardust.common.actions.DeathLife;
	import idv.cjcat.stardust.common.actions.ScaleCurve;
	import idv.cjcat.stardust.common.clocks.Clock;
	import idv.cjcat.stardust.common.initializers.Life;
	import idv.cjcat.stardust.common.initializers.Scale;
	import idv.cjcat.stardust.common.math.UniformRandom;
	import idv.cjcat.stardust.twoD.actions.Damping;
	import idv.cjcat.stardust.twoD.actions.Move;
	import idv.cjcat.stardust.twoD.actions.Spin;
	import idv.cjcat.stardust.twoD.emitters.Emitter2D;
	import idv.cjcat.stardust.twoD.initializers.DisplayObjectClass;
	import idv.cjcat.stardust.twoD.initializers.Omega;
	import idv.cjcat.stardust.twoD.initializers.Position;
	import idv.cjcat.stardust.twoD.initializers.Rotation;
	import idv.cjcat.stardust.twoD.initializers.Velocity;
	import idv.cjcat.stardust.twoD.zones.LazySectorZone;
	import idv.cjcat.stardust.twoD.zones.SinglePoint;

	public class StarEmitter extends Emitter2D {

		/**
		 * Constants
		 */
		private static const LIFE_AVG:Number = 30;
		private static const LIFE_VAR:Number = 10;
		private static const SCALE_AVG:Number = 1;
		private static const SCALE_VAR:Number = 0.4;
		private static const GROWING_TIME:Number = 5;
		private static const SHRINKING_TIME:Number = 10;
		private static const SPEED_AVG:Number = 10;
		private static const SPEED_VAR:Number = 8;
		private static const OMEGA_AVG:Number = 0;
		private static const OMEGA_VAR:Number = 5;
		private static const DAMPING:Number = 0.1;

		public var point:SinglePoint;

		public function StarEmitter(clock:Clock) {
			super(clock);

			point = new SinglePoint();

			//initializers
			addInitializer(new DisplayObjectClass(Star));
			addInitializer(new Life(new UniformRandom(LIFE_AVG, LIFE_VAR)));
			addInitializer(new Scale(new UniformRandom(SCALE_AVG, SCALE_VAR)));
			addInitializer(new Position(point));
			addInitializer(new Velocity(new LazySectorZone(SPEED_AVG, SPEED_VAR)));
			addInitializer(new Rotation(new UniformRandom(0, 180)));
			addInitializer(new Omega(new UniformRandom(OMEGA_AVG, OMEGA_VAR)));

			//actions
			addAction(new Age());
			addAction(new DeathLife());
			addAction(new Move());
			addAction(new Spin());
			addAction(new Damping(DAMPING));
			addAction(new ScaleCurve(GROWING_TIME, SHRINKING_TIME));
		}
	}
}

Step 8: Finish the Document Class

Now it’s time to go back to the document class and finish it up. Let’s take a look at the remaining tasks.

• Create a StarEmitter instance – We’re going to instantiate the StarEmitter class we just finished.
• Assign a Clock object to the emitter – We want a steady rate of particle emission, so we’ll use the SteadyClock class. The parameter passed to the clock’s constructor is the rate of emission, or, in other words, the number of new particles created in each emitter step; a fractional rate of 0.5 means in each emitter step, there’s a 50% chance for a new particle to be created and 50% chance for no particle created.
• Create a Renderer – To visualize the particle effect, we’ll going to need a renderer. The DisplayObjectRenderer should be used in conjunction with the DisplayObjectClass initializer: the initializer assigns a display object to each particle, and the renderer adds these display objects to a container’s display list, constantly updating them. Also, don’t forget to add the emitter to the renderer.
• Call the Main Loop Repeatly – This last step keeps Stardust up and running. Here we’ll make use of the enter-frame event.

Below is the complete code for the document class, necessary import statements included.

package {
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.geom.Rectangle;
	import idv.cjcat.stardust.common.clocks.SteadyClock;
	import idv.cjcat.stardust.common.renderers.Renderer;
	import idv.cjcat.stardust.twoD.renderers.DisplayObjectRenderer;

	public class StarParticles extends Sprite {

		private var emitter:StarEmitter;

		public function StarParticles() {
			//instantiate the StarEmitter
			emitter = new StarEmitter(new SteadyClock(0.5));

			//the container sprite
			var container:Sprite = new Sprite();

			//the renderer that renders the particle effect
			var renderer:Renderer =  new DisplayObjectRenderer(container);
			renderer.addEmitter(emitter);

			//add the container to the display list, above the background
			addChildAt(container, 1);

			//make use of the enter-frame event
			addEventListener(Event.ENTER_FRAME, mainLoop);
		}

		private function mainLoop(e:Event):void {
			//update the SinglePoint position to the mouse position
			emitter.point.x = mouseX;
			emitter.point.y = mouseY;

			//call the main loop
			emitter.step();
		}
	}
}

Finally, we’re done! Now let’s take a look at the outcome. Press CTRL+ENTER in Flash to test the movie, and you’ll see the result.

Variation 1: Animated Stars

We’re not done yet! Let’s do a few more variations. The first one is using animated movie clips for our particles.

Step 9: Create a Timeline Animation

This first variation is quite simple, not involving any extra coding. It’s as simple as creating a basic timeline animation. Edit the Star symbol in Flash IDE, create another key frame, and change the star’s color in this frame to red. This essentially causes the stars to blink between yellow and red. You might want to insert some more empty frames in between, since a frame rate of 60fps is too fast for a two-frame blinking.

Now test the movie and check the result. The blinking star effect looks cartoonish; this can be used for classic dizzy-star effects, which is commonly seen in cartoons.

Variation 2: Adjusting Timescale Dynamically

As I mentioned earlier, one of the Stardust feature is “adjustable simulation timescale”, which means the timescale used by Stardust for particle simulation can be dynamically adjusted. All is done by changing the Emitter.stepTimeInterval property, which is 1 by default. The following code snippet changes this value to 2, resulting in particles moving twice as fast and emitter creating new particles at double rate.

emitter.stepTimeInterval = 2;

In this variation, we’ll create a slider on the stage and use it to dynamically adjust the simulation timescale.

Step 10: Create a Slider

Drag a Slider component out from the Components Panel to the stage. Name it “slider”.

Step 11: Setup Slider Parameters

We’d like to have the slider to slide between 0.5 and 2, which means we want our particle simulation to be at least half as fast as normal and at most twice at fast. Also, set “liveDragging” to true so we can see the update as we scrub the slider thumb.

Step 12: Slider Event Listener

Now we have to listen to the slider’s change event to dynamically change the simulation timescale. First import the SliderEvent class in the document class.

import fl.events.SliderEvent;

And then listen to the slider’s change event in the document class constructor.

slider.addEventListener(SliderEvent.CHANGE, changeTimescale);

Finally, change the simulation timescale in the listener. Add the following listener to the document class.

private function changeTimescale(e:SliderEvent):void {
	emitter.stepTimeInterval = slider.value;
}

Let’s look at the result. Notice that as you scrub the slider’s thumb to the left, the particle simulation slows down, and if you scrub right the simulation goes faster.

Variation 3: Multiple Display Class

Stardust provides a special initializer called SwitchInitializer. Its constructor accepts two arrays as parameters; the first one is an array of initializers, and the second one, with the same length as the first, is an array of “weights”. Each time Stardust uses this initializer to initialize particles, one of the initializers in the first array is picked randomly to initialize the particles. The more weight an initializer has, the more likely it’ll be picked for initialization. In this variation, we’re going to make the emitter shoot out not only stars but also white circles.

Step 13: Draw a Circle

Draw a white circle, convert it to a symbol, exported for ActionScript, and name the symbol and the class “Circle”. This is the class we’ll use for the white circles.

Step 14: Create the Switch Initializer

Open the StarEmitter class, and delete the following line. This disables the DisplayObjectClass initializer we set up in the previous steps.

addInitializer(new DisplayObjectClass(Star));

Now add the following code to the constructor. We’d like to have stars and circles to be emitted equally likely, so we’ll give them both a weight of 1.

//the initializer for stars
var doc1:DisplayObjectClass = new DisplayObjectClass(Star);

//the initializer for white circles
var doc2:DisplayObjectClass = new DisplayObjectClass(Circle);

//the switch initializer
var si:SwitchInitializer = new SwitchInitializer([doc1, doc2], [1, 1]);

//add the switch initializer to the emitter
addInitializer(si);

Finally, test the movie. You can see both stars and circles are emitted out from the emitter, although angular velocity doens’t have much effect on circles.

End of Tutorial

This is the end of this tutorial. Thank you for reading! You might say it’s a whole lot of code just to create such simple effect, but hey, do you remember writing any code other than designing the particle’s behavior in high-level? In the future if you want to modify your code, would you like to see code like this:

particle.vx *= 0.9;
particle.vy *= 0.9;
particle.x += particle.vx * 2;
particle.y += particle.vy * 2;

…or like this?

emitter.addAction(new Damping(0.1));
emitter.addAction(new Move());
emitter.stepTimeInterval = 2;

Stardust is here to help you create particle effects at ease. Design particle behaviors in high-level, tell Stardust what to do, and let Stardust handle the low-level implementation for you!

I hope you have understood how Stardust works internally and are now familiar enough with the basic workflow. In the future, I’ll write more tutorials on custom initializers/actions/renderers, 3D particle effects, and XML serialization. Thank you again for reading this tutorial. Happy Stardusting!

Which brings us to the subject of this Beginner-level tutorial… doing water.

Before we get going let’s be perfectly clear with each other. There are several dozen ways to do what I am going to talk about in this tutorial. In fact, I fully expect to see the comments box at the end of this piece become populated with a number of posts telling me, essentially, That ain’t the way I would do it. It most likely isn’t and I have no problem with that and expect it. In fact this tutorial is based upon an example Lee Brimelow, a Flash Platform Evangelist for Adobe first showed me a couple of years ago.

Lee and I both share a remarkably similar outlook when it comes to working with ActionScript. Instead of staring at a blank Actions panel, we both think it is important that you, as a beginner, grab a code sample (much like we offer here) and start playing with it. This way you learn what a lot of things do. Academics call this process, “scaffolding”, which is a fancy term for learning a basic skill and building your knowledge from it.

As I said,though, this is a beginner level tutorial designed to demonstrate some very interesting ActionScript that uses Displacement maps, filters and Perlin Noise to create water ripples. The whole point of this exercise, in fact, is to present some otherwise complex code and show you where you can have some fun with it. When code starts becoming fun, you are well on your way to full OOP glory. In fact, my associate here at Activetuts+, Cadin Batrack does just that with many of the techniques presented here in his tutorial Create a Static Distortion Effect Using the Displacement Map Filter.

Now that we understand each other, let’s get subtle and make some ripples.

Step 1: Develop a Plan of Attack

The image we will be using is a shot I took of the Medici Fountain in the Jardin du Luxembourg in Paris, France. The plan is to put that pool of water into motion using Flash.

Why do we need a plan of attack? Flash doesn’t do water ripples. In this particular approach, you simply can’t select the water area using a selection tool in Flash and, using ActionScript, say, Jiggle this selection around.

For Flash to jiggle a selection around you need to stick the image in a BitMapData object, shift the pixels in that object around using the DisplacementMapFilter and then apply some Perlin Noise to the filter to create the ripples. Before you do that you need to take a trip to Photoshop or Fireworks.

Step 2: Mask out the Water

This can be done in either Fireworks or Photoshop. The key is to duplicate the image and either mask out or remove the water in the masking layer. Save the file as either a .png or .psd image and quit. As you may have surmised the bottom, unmasked, layer is critical to the success of this project.

Step 3: New Document

Create a new Flash ActionScript 3 Document. Add two new layers named “Mask” and “actions”. Rename Layer 1 to “Image” and lock the “actions” layer. At this point I am going to do a bit of a branch because importing Photoshop and Fireworks images into Flash are two separate techniques.

Step 4: Import the Photoshop Image

When the Import dialog box opens, select the Fountain layer and select Create movie clip for this layer. Don’t bother with the instance name we’ll do that once the layers hit the stage. When the file imports you will see the Mask layer is a bitmap and the Fountain layer is now a movieclip.

Step 5: Import the Fireworks CS4 Image

When the Import dialog box opens be sure that Import as Flattened Bitmap is not selected.

Fireworks imports a .png that is nothing more than a placeholder. If you open the Firework Objects folder you will see the document is in its own folder- usually “Page One” – because Fireworks allows you to have multiple pages in one document. If you open that folder you will see the two bitmaps and a movieclip. Open the movieclip and set up the layers using the instructions from Step 3. Convert the Fountain layer to a movieclip.

Step 6: Fountain

Select the Fountain movieclip on the timeline and give it the instance name of “photo”. Lock all three layers and save the file.

Step 7: Wiring it up

The code you are about to write is fairly simple. As I said earlier you can’t tell Flash to take a selection and make it jiggle. In the case of this code we are going to jiggle the the pixels in the fountain movieclip. This requires you to :

1. Create a virtual bitmap that holds the pixels to be jiggled.
2. Set the jiggle parameters using a DisplacementMapFilter.
3. Create some variables that provide the jiggle.
4. Apply the perlinNoise method to the fountain image to jiggle the pixels using the DisplacementMapFilter every time the playhead loops through the frame.

If you are subtle, the jiggling looks like running water rather than a tsunami or a tar pit..

Let’s get started:

Step 8: Code

Enter the following code:

var bmd:BitmapData = new BitmapData(800,535);
var dmf:DisplacementMapFilter = new DisplacementMapFilter(bmd, new Point(0,0),0,2,10,60);

We start by creating a BitmapData object that matches the size of the image to be manipulated. Remember, Flash is not exactly the brightest candle on the tree. It needs to be told what to do. In this case you are telling it to create a collection of pixels matching the dimensions of the image and stick them in an object named “bmd”.

Now that it has this “bmd thing” it needs to be told what to do with the pixels in the object. The next line does just that.
The DisplacementMapFilter uses the greyscale values of an RGB channel, including alpha, and uses them to distort an image (in this case a bunch of Bitmapdata pixels) based upon the values kicked out of the filter’s paramters. The parameters are as follows:

• mapBitmap: In this case the bmd’s pixels will be used.
• mapPoint: This is the alignment point- 0,0 – for the placement of the bmd object.
• componentX: How far will the channel’s pixels be shifted along the X axis. In this case, they aren’t. You can also specify a Channel such as RED instead of a numeric value.
• componentY: The channel will be moved down 2 pixels on the Y axis. The really neat thing about these X and Y values is they can actually be used for different channels of the bmd object. For instance you could have the red channel control the X axis displacement and the blue channel control the Y axis displacement.
• scaleX: We are going to scale the pixels along the X axis by 10%. Just keep in mind that the bigger the number, the bigger the displacement which sort of explains the Tsunami and Tar Pit references earlier.
• scaleY: The pixels will be scaled by 60% on the Y axis.

There are three other parameters you can add but aren’t needed here. They are:

• mode: These are strings that determine how pixels that go off of the edge are handled. Wrap pulls in pixels from the opposite side of the image, Clamp repeats pixels at the edge. Ignore simple uses the source pixel color and Color uses the color and alpha values specified.
• Color: Use this when you need to specify a mode. This one specifies the color, expressed as a number, to be used for pixels that go off the edge.
• Alpha: Used when you use a mode and the number – between 0.0 and 1.0 – is used to determine the transparency of the pixels that go off the edge.

Step 9: Variables

Create the variables to be used in creating the ripple effect:

  var pt1:Point = new Point(0,0);
  var pt2: Point = new Point(0,0);
  var perlinOffset:Array =  [pt1,pt2];

Step 10: Create the Event

addEventListener(Event.ENTER_FRAME,loopIt);

We need this to make the water jiggle. This occurs thanks to the Displacment filter altering the values in its Point() parameter at the same rate as your movie. In my case the frame rate is set to 30 fps meaning the values will change 30 times per second.

Step 11: LoopIt

Write the loopIt function:

  function loopIt (evt:Event) :void{
  perlinOffset[0].x += 0.5;
  perlinOffset[1].y += 0.1;
  bmd.perlinNoise(400,5,3,2,false,false,2,true,perlinOffset);
  photo.filters = [dmf];
};

The first two lines set the values used by Point() parameter in the DisplacementMapFilter, as the playhead loops the x and y values increment. The values I chose were the result of a lot of testing until I achieved the effect I wanted.

The third line applies the perlinNoise method to the bitmap object created in line 1 of the code. Let’s go through the parameters:

The first two numbers are the baseX and baseY values – 400, 5 – which determine the frequency of the noise on the x and y axes. The lower the number the more detailed the noise will be. As a rule of thumb the baseX number can be set to match the width of the image. I found 800 to be a bit much so I dialed it down to 400. The difference in detail was negligible.

The third number, 3, is the numOctave parameter. The higher the number the more detailed will be the random noise. The downside is a hit on processing power and a potential speed decrease in the effect. This wasn’t destined for the web so 3 seems to work just fine. Using a value of 1 really didn’t move the pixels all that much. The next number,2, is the randomSeed parameter.

The two Boolean values are are the stitch and fractalNoise parameters. A true value for stitch smooths the edges of any tiling that may occur – not needed here. The fractalNoise value determines whether the noise will be fractal noise (true) or turbulence (false). The false value – turbulence – is suited for water effects such as ripples or fire.

The next value, 2, is the channelOptions parameter. This value determines in which of the four color channels the noise will be applied.

The Boolean value, false, is the greyScale parameter. Had I used false the color channel specified in the channelOptions parameter would be used to generate the noise. Using true tells Flash that I want to use the greyscale .

The final parameter,perlinOffset, is the array of Points to be used to offset the noise in each octave of the effect.

The final line – photo.filters = [dmf]; – applies the displacement filter, with the Perlin Noise, to the image in the photo instance.

Step 12: Finish up

Save the movie and test it.

Conclusion:

In this beginner-level tutorial I walked you through the use of ActionScript to create rippling water in a fountain in Paris. As you can see there wasn’t all that much code involved and much of it was fairly uncomplicated.

What is really important to you, as you start exploring ActionScript and Flash is to clearly understand that most code values are either numbers or Boolean values. What you need to do is to be unafraid to play "What if … " games. These are the games where you wonder,"What if I changed this number, what would happen?" In fact, feel free to play around with all the numbers in the DisplacemantmapFilter and perlinNoise(). You can get some rather fascinating affects ranging from the oooze of a Tar Pit to the water looking like there is an earthquake under way.

Have some fun!

Final Result Preview

Let’s take a look at the final result we will be working towards:

Step 1: About Displacement Mapping

A displacement map works by using the color values from one image to alter the position of pixels in another image. This effect is often used to make a flat graphic ‘wrap’ around a dimensional image. We’re going to use it here to distort a button so it looks like it’s receiving static interference.

You can read more about displacement mapping here.

Step 2: Set up Your Flash File

Create a new Flash file (ActionScript 3).

Your movie settings will vary depending on your game. For this demo I’m setting up my movie as 500×300, black background, and 30 fps.

Step 3: Create a Simple Button

Create a new Button symbol on the stage (Insert > New Symbol). Design the 4 states for your button. The exact design should be something that matches your game. Something glowy and semi-transparent works well with this effect.
I used a font called Genetrix Square for mine, but you should use something that matches the look of your game.

Give your button an instance name of ‘button1′.

Step 4: Test

If you save and test your movie (Control > Test Movie) now you should see your button on the stage responding to the mouse with the rollover states you designed. Like this:

Step 5: Create the JitteryButton Class

We need to add custom functionality to our button. We’ll accomplish this by creating a new custom class and putting our simple button inside it.

Create a new ActionScript file named ‘JitteryButton.as’. Save this file in the same directory as your main Flash file. Add this code to create the wrapper for our button:

package {

	import flash.display.Sprite;
	import flash.display.SimpleButton;

	public class JitteryButton extends Sprite {

		private var myButton:SimpleButton; // holds the reference to our simple button

		// CLASS CONSTRUCTOR
		public function JitteryButton(button:SimpleButton) {
			myButton = button; // the button on the stage gets passed in
		}

}

All this code does so far is accept the simple button and store a reference to it. We’ll add more functionality later.

Step 6: Create the Game Class

Create a new ActionScript file named ‘Game.as’. This will be the document class for our movie. Save it in the same directory as the main Flash file.

This code will add our custom button wrapper around the button on the stage:

package {
	import flash.display.MovieClip;

	public class Game extends MovieClip {

		private var startButton:JitteryButton;

		// CLASS CONSTRUCTOR
		public function Game() {
			// create the jittery button from the simple button on the stage
			startButton = new JitteryButton(button1);

			// add the new button to the stage
			addChild(startButton);
		}

	}

}

This code creates a new instance of our custom JitteryButton class and passes it the button on the stage (‘button1′).

Of course your document class will end up looking much different since it will have the code for your game in it. Here we’re just concerned with the code for our button.

Back inside your Flash file set the document class to ‘Game’. Remember, you don’t include the file extension here.

Step 7: Test Again

If you save and test your movie again at this point you should see exactly the same thing as when we tested in Step 4. The only difference is that now our code is set up to be able to add our custom behavior.

Step 8: Create the Displacement Map Image

We’ll now create the image of the static pattern that we’ll use to distort our button graphic.

Open Photoshop and create a new image filled with neutral grey (#808080). The image should be slightly wider than your button and about 3 or 4 times as high. My button is 277×56, and my image is 310×220.

We’re starting with a neutral grey because that won’t effect our image.

Step 9: Add Noise

We’ll now add a little bit of noise to our image. This won’t be very noticeable in our static effect, but it gives it a bit of extra shimmer. You can skip this step if you like.

Duplicate the background layer and name the new layer ‘Noise’. You should now have 2 layers filled with neutral grey. Select the new Noise layer and choose Filter > Noise > Add Noise. Set Amount to 120% and Distribution to Uniform. Check Monochromatic.

Hit OK.

Set the ‘Noise’ layer to 10% opacity.

Step 10: Add Lines

Create a new layer called ‘Lines’. Now use a 1px pencil brush to add some horizontal black and grey lines to the image.

Remember how these lines will effect our image: anything darker than neutral will shift our image in one direction and anything lighter will shift it in the other.

Step 11: Save the Displacement Map Image

Choose File > Save for Web & Devices and save your image as an 8 color gif named ’staticMap.gif’.

Step 12:

Back in Flash, import the ’staticMap.gif’ to your library (File > Import > Import to Library…). Open the linkage properties, check Export for ActionScript, and set the Class name to ‘StaticMap’.

We can now reference this image in our code by using the StaticMap class name.

Step 13: Create the Displacement Map Filter

Add this function to your JitteryButton class:

// create the displacement map filter
private function createDMFilter():DisplacementMapFilter {

	var mapBitmap:BitmapData = new StaticMap(0,0); // use the bitmap data from our StaticMap image
	var mapPoint:Point       = new Point(0, 0);  // position of the StaticMap image in relation to our button
	var channels:uint        = BitmapDataChannel.RED; // which color to use for displacement
	var componentX:uint      = channels;
	var componentY:uint      = channels;
	var scaleX:Number        = 5; // the amount of horizontal shift
	var scaleY:Number        = 1; // the amount of vertical shift
	var mode:String          = DisplacementMapFilterMode.COLOR;
	var color:uint           = 0;
	var alpha:Number         = 0;

	return new DisplacementMapFilter(
					mapBitmap,
					mapPoint,
					componentX,
					componentY,
					scaleX,
					scaleY,
					mode,
					color,
					alpha	);

}

This function simply creates the Displacement Map Filter using the BitmapData from our StaticMap image. This doesn’t need to be in it’s own function, I’m just doing it for clarity.

In order for it to work we’ll need to import these classes at the top of our JitteryButton class:

import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.filters.DisplacementMapFilter;
import flash.filters.DisplacementMapFilterMode;
import flash.geom.Point;

(You can learn more about the DisplacementMapFilter class in the AS3 documentation)

Step 14: Apply the Filter

We’ll now create a variable to hold the filter. We apply it to the button by setting the button’s ‘filters’ property to an array that contains our filter.

Here’s the JitteryButton class so far (lines 18 and 25 are new):

package {

	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.display.BitmapData;
	import flash.display.BitmapDataChannel;
	import flash.filters.DisplacementMapFilter;
	import flash.filters.DisplacementMapFilterMode;
	import flash.geom.Point;

	import caurina.transitions.Tweener;

	public class JitteryButton extends Sprite{

		private var myButton:SimpleButton;

		//create a variable to hold the displacement map filter
		private var dmFilter:DisplacementMapFilter = createDMFilter();

		// CLASS CONSTRUCTOR
		public function JitteryButton(button:SimpleButton) {
			myButton = button;

			// apply the filter to the button
			myButton.filters = new Array(dmFilter);
		}

		// create the displacement map filter
		private function createDMFilter():DisplacementMapFilter {

			var mapBitmap:BitmapData = new StaticMap(0,0); // use the bitmap data from our StaticMap image
			var mapPoint:Point       = new Point(0, 0);  // this is the position of the StaticMap image in relation to our button
			var channels:uint        = BitmapDataChannel.RED; // which color to use for displacement
			var componentX:uint      = channels;
			var componentY:uint      = channels;
			var scaleX:Number        = 5; // the amount of horizontal shift
			var scaleY:Number        = 1; // the amount of vertical shift
			var mode:String          = DisplacementMapFilterMode.COLOR;
			var color:uint           = 0;
			var alpha:Number         = 0;

			return new DisplacementMapFilter(
							mapBitmap,
							mapPoint,
							componentX,
							componentY,
							scaleX,
							scaleY,
							mode,
							color,
							alpha	);

		}

	}
}

Step 15: Test Again

If we save and test the file now we can see the displacement map filter being applied to our button:

You can see how the horizontal lines we drew in the StaticMap are shifting the pixels in our button left and right. The amount of the shift is dependent on the darkness of the lines in the image and the scaleX setting in our Displacement Map Filter.

Unfortunately, the static isn’t animating so it looks pretty lame. Let’s fix that now…

Step 16: Add the randRange Function

This is a simple function that returns a random integer within a specified range:

	// returns a random number between the specified range (inclusive)
	private function randRange(min:int, max:int):int {
	    var randomNum:int = Math.floor(Math.random() * (max - min + 1)) + min;
	    return randomNum;
	}

I find it makes it a little easier to generate random values. We’ll be randomizing a few different values for our static effect so it will come in handy.

Add it to your JitteryButton class.

Step 17: Animate the Displacement Map Filter

There are a couple of ways we can animate the static effect. The first will be to alter the amount of horizontal shift applied to our button. This is done through the scaleX property of the DisplacementMapFilter.

We can also animate the position of the StaticMap image in relation to our button. This will ensure that the same areas of the button aren’t always getting shifted.

To animate the effect we’ll add a function called ‘displayStatic’ that gets called every frame to update these two properties of the filter. Add this function to your JitteryButton class:

// called on ENTER_FRAME
private function displayStatic(e:Event):void {
	dmFilter.scaleX = randRange(fuzzMin, fuzzMax);
	dmFilter.mapPoint = new Point(0, randRange(0, -160));
	myButton.filters = new Array(dmFilter);
}

The first line of this function randomizes the amount of horizontal shifting to a value between the variables fuzzMin and fuzzMax. Add these two variables to your JitteryButton class:

	private var fuzzMin:int = 0;
	private var fuzzMax:int = 2;

The second line of the displayStatic function randomizes the Y position of the StaticMap in relation to our button. We already told the filter to use our StaticMap image so we just need to update the position.

The third line just re-applies the filter to our button.

The last thing we need to do to get this animating is to add the ENTER_FRAME event listener. Add this line to the JitteryButton constructor function:

// start displaying the static effect
addEventListener(Event.ENTER_FRAME, displayStatic);

And don’t forget to import the Event class at the top of the JitteryButton file:

import flash.events.Event;

Step 18: Test Again

If you save and test the movie now you’ll see the effect is making our button shimmer and jump:

That’s pretty cool, but we want the effect to react to the mouse as well. Onward…

Step 19: Adjust the Intensity of the Effect

We’ll now add two functions to adjust the intensity of the jitter effect. We’ll call the effect we currently have Low intensity so we’ll add a setting for Medium and High intensity. Add these functions to your JitteryButton class:

// increase the intensity of the static to MEDIUM
private function setStaticMedium(e:MouseEvent = null):void {
	fuzzMin = 2;
	fuzzMax = 6;
	staticLength = randRange(8, 12);
}

// increase the intensity of the static to HIGH
private function setStaticHigh(e:MouseEvent = null):void {
	fuzzMin = 12;
	fuzzMax = 25;
	staticLength = 12;
}

You can see that we’re adjusting the intensity by setting the values of the fuzzMin and fuzzMax variables. This way our displayStatic function will use these new values when it sets the horizontal shift of the filter.

We also added a variable called staticLength. We’ll use this to set how long the more intense effect should last (the number of frames) before returning to low intensity. Add this variable to your JitteryButton class and modify your displayStatic function like so:

private var staticLength:int;

// called on ENTER_FRAME
private function displayStatic(e:Event):void {
	dmFilter.scaleX = randRange(fuzzMin, fuzzMax);
	dmFilter.mapPoint = new Point(0, randRange(0, -160));
	myButton.filters = new Array(dmFilter);

	staticLength--;

	if(staticLength <= 0){
		fuzzMin = 0;
		fuzzMax = 2;
	}
}

This new code decrements the staticLength variable and resets fuzzMin and fuzzMax to the low intensity values once the value of staticLength reaches zero.

Step 20: Set up the Button Rollover Handlers

To make our button react to the mouse we need to add two mouse event listeners and an event handler function for each.

Add the mouse listeners in the constructor function of your JitteryButton class:

// add the rollover event listeners to the button
myButton.addEventListener(MouseEvent.ROLL_OVER, onButtonRollOver);
myButton.addEventListener(MouseEvent.ROLL_OUT, onButtonRollOut);

Now create the two event handlers that are referenced in those two new lines. These also go in the JitteryButton class:

// called on button ROLL_OVER
private function onButtonRollOver(e:MouseEvent):void {
	setStaticHigh();
}

// called on button ROLL_OUT
private function onButtonRollOut(e:MouseEvent):void {
	setStaticMedium();
}

To make this all work we'll have to import the MouseEvent class at the top of our JitteryButton file:

import flash.events.MouseEvent;

Now when our button detects a ROLL_OVER event it will call the event handler which in turn calls our setStaticHigh function. This function increases the values of fuzzMin and fuzzMax (used for setting the horizontal shift) for the duration specified by the staticLength variable.

Step 21: Add the Scale Effect

We could stop here. Our effect is animating nicely and reacts to the mouse rollovers. I still feel like something is missing here though. Let's add a little scaling effect.

You'll need to download the Tweener Library for this step if you don't already have it. Place the 'caurina' folder in your project directory and import the Tweener classes at the top of your JitteryButton file:

import caurina.transitions.Tweener;

Tweener allows us to add some nice scaling effects with only a couple lines of code. We can add one line to each of our rollover event handlers:

// called on button ROLL_OVER
private function onButtonRollOver(e:MouseEvent):void {
	Tweener.addTween(myButton, {scaleX: 1.1, time: .5, transition: "easeOutElastic"});
	setStaticHigh();
}

// called on button ROLL_OOUT
private function onButtonRollOut(e:MouseEvent):void {
	Tweener.addTween(myButton, {scaleX: 1, time: .5, transition: "easeOutElastic"});
	setStaticMedium();
}

Here we're adding an animation to the rollover handler that scales the button's scaleX property to 110% over .5 seconds. We're using an elastic transition type to give it that bouncy feel. In the rollout handler we're doing the same thing in reverse, scaling it back to 100%.

You can learn more about how to use Tweener in the Tweener documentation.

Step 22: Add Sound

The last thing we need to do make this effect complete is to add some sound. I made my sound effect in Garage Band. You can make your own or try to find one online.

Once you have one you like, import it into your library and set the linkage to export as 'StaticSound'.

To add it to our JitteryButton we first need to import the Sound class:

import flash.media.Sound;

Then we'll initialize it (add this line just before the constructor function):

private var staticSound:Sound = new StaticSound();

Inside the rollover handler we'll tell the sound to play:

// called on button ROLL_OVER
private function onButtonRollOver(e:MouseEvent):void {
	Tweener.addTween(myButton, {scaleX: 1.1, time: .5, transition: "easeOutElastic"});
	setStaticHigh();
	staticSound.play();
}

Now we're good to go. Test your movie and everything should be working. If your button or sound isn't working right check the source files to see my completed JitteryButton class.

Step 23: Add More Buttons

The cool thing about building this effect as a separate class that wraps our button is that we can easily reuse it on other buttons.

If you want to add more buttons to your game menu just create a new button and add it to the stage. Give it the instance name 'button2'. Then inside your document class (the 'Game.as' file) create a new JitteryButton and pass it the new button. Here's how that might look:

package {
	import flash.display.MovieClip;

	public class Game extends MovieClip {

		private var startButton:JitteryButton;
		private var menuButton:JitteryButton;

		// CLASS CONSTRUCTOR
		public function Game() {
			// create the jittery buttons from the simple buttons on the stage
			startButton = new JitteryButton(button1);
			addChild(startButton);

			// adding a new button is easy!
			menuButton = new JitteryButton(button2);
			addChild(menuButton);
		}

	}

}

Conclusion

You will almost certainly need to change this code a bit to get it to fit into the structure of your game. Hopefully this tutorial will give you a good starting point though.

If you want to change the look of this effect you can try using different types of images for your StaticMap graphic, and adjusting the values for fuzzMin and fuzzMax.

This is my first tutorial so let me know if there's anything I can do better next time. Thanks for reading!

So, like any decent netizen, I cobbled together this article, gaining inspiration from a couple of other blogs and using experience from some trial and error on my own. And now I offer it to you, hoping this will end your own search.

This tutorial uses Flash CS4 in combination with ActionScript 3.0, but you can apply these principles in Flash CS3. It presumes you already have a pretty good handle on creating animations in the timeline and a fair understanding of how to apply ActionScript to the timeline.

The aim is to have a navigation button in the form of a tab, tucked away to the side, for stepping backwards through an image presentation. I want it to slide open, change color and display its label. When the user clicks on it, it will navigate back one slide. If the user mouses out before clicking on it, it will slide back to its original position and color.

Note: remember to save often to avoid starting from scratch should something go wrong.

Limits of the Button Symbol

Flash gives you the ability to create a button symbol, but it’s limited to three states: Up, Over and Down. There is also Hit which defines the interactive area around the button. This is fine for most uses of a simple button. In fact, this button symbol is actually a member of the SimpleButton class. But what if you want to change the appearance of the button or animate it when the user mouses over and then mouses away without clicking? In that case, you will need a fourth state called Out.

The built-in button symbol sadly doesn’t have an out state.

Here’s the takeaway: any symbol, like a graphic symbol or a movie clip symbol, can become a button. You just need to apply the proper ActionScript. In this tutorial, a movie clip will be turned into a button with four states.

Step 1: Storyboard or Sketch the Button

It will make your life a lot easier if you already have a clear visual idea of how your button will behave in each of the four states. Sketch it out on paper or use Illustrator or Photoshop to prototype the visual elements which can in turn be imported into Flash. This is a bit of work up front, but it’s a lot better than working blind and having to go back and fix something because the concept wasn’t thought through logically.

Step 2: Set Up the Document

Create a new document and choose Flash File (ActionScript 3.0). Set up the stage with the proper size and background color.

Step 3: Create an Empty Movie Clip Symbol

Instead of creating a button symbol, we’ll create a new movie clip symbol. Press Control-F8 (Command-F8 on a Mac) or choose Insert > New Symbol from the menu. We’ll call it “four state button”.

Step 4: Add an Actions Layer

In the “four state button” movie clip, add a new layer and call it “actions”.

Step 5: Add Labels for the Four States

Create another layer and call it “labels”. Insert four blank keyframes at roughly equal intervals just enough so that you can leave enough room to read each label. Here I’ve put them at 20 frame intervals. Give label names of up, over, down and out in the Properties panel. These will be your button states.

Step 6: Create Action Keyframes

Add keyframes in the actions layer which correspond to the four states in the labels layer.

Step 7: Add Stop Actions

For each blank keyframe in the actions layer, add this.stop(); in the ActionScript Editor. This will make sure that the movie clip doesn’t play through to other button states.

Step 8: The Up State

Create a new movie clip symbol by pressing Control-F8 (Command-F8 on a Mac) or choose Insert > New Symbol from the menu and call it “up animation”.

Step 9: Up State Graphic

For the button, draw a green box in one layer and add a white arrow in a layer above. Make sure it’s registered in the top left corner. As this is static, there’s no need for a series of frames for animation, but you always have the flexibility should you decide to animate it, such as a box that fades up into view.

Step 10: Add a Stop Action

Create a new layer and call it “actions”. Make sure it’s at the top. Select the blank keyframe and add this.stop(); to the ActionScript Editor. It’s not completely necessary in this case since it’s just a static image, but it’s good practice to keep each state from looping.

Step 11: Define the Hit Area

The one thing missing from the button symbol editing mode that you don’t have with movie clips is a special frame reserved for the hit area. This would define the boundaries where mouse events occur like clicks and hovers. Create a new layer and call it “hit area”.

Draw a shape on the layer and set its alpha value to 0 in the Properties panel, making it invisible. This hit area will be as large as the button when it’s fully extended. Note: If you have an animated sequence, make sure the hit area frames span the entire length of the animation.

Step 12: Instantiate the up state movie clip

Create a new layer in the four state button movie clip symbol called button states. Drag an instance of the up animation symbol from the Library panel and into the four state button movie clip symbol editing area in the button states layer. Make sure its X and Y coordinates are set to 0. Insert a frame at frame 20.

Step 13: The Over State

Press Control-F8 (Command-F8 on a Mac) or choose Insert > New Symbol from the menu and choose Movie Clip. We’ll call it “over animation”.

Step 14: Shape Tween Animation

Return to the “up animation” movie clip, click on the green button and copy it. Return to the “over animation” movie clip and add a new layer called “button morph”. Right-click to paste the green button in place in the blank keyframe.

Create another blank keyframe at frame 20 and right-click to paste in place again. With this shape, increase its width and change its color to orange. It should be the same size as the hit area created in Step 10. Select the entire range of frames and right-click to create a shape tween.

Step 15: Fade up the Label

To add a button label, create a new layer called “text appear” and use the type tool to create a static text object, in this case, PREVIOUS in a blank keyframe.

Right-click to insert a frame at frame 20. Select a frame in the layer and right-click to create a motion tween. I want the label to fade up starting in the middle of the animation, so I’ll go to the motion editor and create keyframes in the middle and at the end, making three keyframes. The first keyframe will add a color effect with an alpha of 0% and the last two will have an alpha of 100%.

Step 16: Define the Hit Area

Add a new layer called “hit area”. You can select the longer orange shape from the end of the shape tween, copy it and paste it in place into a blank keyframe on the “hit area” layer. Select it and give it an alpha value of 0% in the Properties panel. Insert a frame at frame 20 to make the hit area span the entire animation.

Step 17: Add a Stop Action

Add a new layer at the top and call it “actions”. Add a blank keyframe at frame 20 and add a this.stop(); action in the actions panel. This will prevent the animation from looping.

Step 18: Instantiate the Over State

Return to the “four state button” movie clip. Insert a blank keyframe in frame 21 on the button states layer and drag an instance of the over animation movie clip from the Library. Make sure its coordinates are set to 0. Insert a frame at frame 40.

Step 19: The Down State

Create a new graphic symbol by pressing Control-F8 (Command-F8 on a Mac) or choose Insert > New Symbol from the menu and call it “down graphic”. There is no explicit animation required since it will only be displayed instantaneously when the mouse button is being clicked.

Step 20: Down State Graphic

For this state, all that is required, optionally, is to change the color of the fully extended button. You can copy and paste in place the orange box as well as the PREVIOUS label from the “over animation” movie clip in their respective layers. Change the orange box to red. Only one frame is required, there is no need for a hit area as the button covers the full area. And, since it’s a graphic symbol, no stop(); action is needed.

Step 21: Instantiate the Down State Graphic

Return to the “four state button” movie clip. Insert a blank keyframe in frame 41 on the “button states” layer and drag an instance of the “down graphic” symbol from the Library. Make sure its coordinates are set to 0. Insert a frame at frame 60.

Step 22: The Out State

Press Control-F8 (Command-F8 on a Mac) or choose Insert > New Symbol from the menu and choose Movie Clip. We’ll call it “out animation”.

Step 23: Reverse the Shape Tween

The out state will essentially be a reversed version of the over state. Return to the “over animation” movie clip and copy the shape tween frames, then come back to the “out animation”, create a layer called “button morph” and paste the frames into the blank keyframe. Then select all the frames in that layer and choose Modify > Timeline > Reverse Frames from the menu.

Step 24: Fade Out the Label

Return to the “over animation” movie clip and copy the PREVIOUS text object, then go back to the “out animation”, create a new layer called “text disappear” and paste in place.

Insert a frame at frame 20 then select the range of frames and create a motion tween. You will do the reverse of the motion tween created in Step 15 and create keyframes in the middle and at the end in the Motion Editor, but the first and middle keyframes will have an alpha of 100% while the last keyframe will have an alpha of 0%.

Step 25: Add the Arrow

To return the appearance of the button to its original up state, add a layer called “arrow” and place a keyframe in frame 20, leaving the first 19 frames blank. Copy the arrow from the “up animation” and paste in place back in the “out animation” in that last keyframe.

Step 26: Define the Hit Area

Again, we need to create a new layer called “hit area” and place a box large enough to cover the full size of the extended button. Give it an alpha of 0 to make it invisible.

Step 27: Add a Stop Action

Again, to keep the “out animation” from looping, we need to add a layer called “actions”, put a blank keyframe in frame 20 and add a this.stop(); action in the Actions panel.

Step 28: Instantiate the Out State

Return to the “four state button” movie clip. Insert a blank keyframe in frame 61 on the “button states” layer and drag an instance of the “out animation” symbol from the Library. Make sure its coordinates are set to 0. Insert a frame at frame 80.

Step 29: Add Event Listeners

Now comes the ActionScript to make it all work. To detect mouse events like clicks and hovers, we need to add event listeners.

Click on the first keyframe of the actions layer in the “four state button” movie clip where we first added a stop action and open the Actions panel. We will add event listeners as shown below to detect a mouse ROLL_OVER, a MOUSE_UP (when the mouse button is released) and a MOUSE_DOWN (when the mouse button is pressed).

We use the ROLL_OVER event instead of the MOUSE_OVER event because of how it treats the child elements of the movie clip in context with the parent movie clip which is more suitable for this setup. We add false, 0, true to the parameters as a good practice to mark these listeners for garbage collection for when they’re no longer needed.

this.addEventListener(MouseEvent.ROLL_OVER, onMouseRollover, false, 0, true);

this.addEventListener(MouseEvent.MOUSE_UP, onMouseClick, false, 0, true);

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownButton, false, 0, true);

Step 30: Toggling Functions

For each event listener, a function will be called. Each function essentially advances the timeline to the appropriate state within the four state button movie clip and plays that section by referring to the label name.

You’ll notice there’s no event listener created for a MOUSE_OUT event. Instead of creating a standalone event listener, we will simply use the ROLL_OVER event to call up a function which will in turn remove its own event listener and add a new event listener for a ROLL_OUT event. In this setup, a ROLL_OUT event will work better than a MOUSE_OUT event.

The same goes for the opposite, where a ROLL_OUT event removes its own listener and reinstates the event listener for a ROLL_OVER event. By toggling these rollovers and rollouts, we keep the code clean and free from potential conflicts.

function onMouseRollover(e:MouseEvent):void {       e.target.gotoAndPlay("over");
		this.removeEventListener(MouseEvent.ROLL_OVER, onMouseRollover);
		this.addEventListener(MouseEvent.ROLL_OUT, onMouseRollout, false, 0, true);
	}

function onMouseRollout(e:MouseEvent):void {
		e.target.gotoAndPlay("out");
		this.removeEventListener(MouseEvent.ROLL_OUT, onMouseRollout);
		this.addEventListener(MouseEvent.ROLL_OVER, onMouseRollover, false, 0, true);
	}   

Step 31: onMouseDownButton Function

To play the down state, create a function that corresponds to the MOUSE_DOWN event set up by the event listener.

function onMouseDownButton(e:MouseEvent):void {
e.target.gotoAndPlay("down");
}

Step 32: onMouseClick Function

Finally, we need to actually tell the button what to do when it’s clicked. Add a function that corresponds to the MOUSE_UP event. A MOUSE_UP event is essentially the same thing as the last part of a CLICK event (down, then up).

For test purposes, I created a web link in a URL variable (in this case, to Adobe’s website) then added the navigateToURL() method to the function so that I could verify that it’s working. However, you can substitute this method with a call to navigate to another frame label, number or scene using gotoAndPlay or any other method you prefer.

var linkToAdobe:URLRequest = new URLRequest("http://www.adobe.com");

function onMouseClick(e:MouseEvent):void {       e.target.gotoAndPlay("up");
		navigateToURL(linkToAdobe); // you can substitute this with any other method or function
	}

Step 33: Instantiate the Button

The four state button is now ready to be used. Return to the main timeline and drag the four state button movie clip symbol to the stage on its own layer. A substitute background is added on another layer to better see the effect in context with other elements on the stage.

Step 34. Test the Movie

Make sure the file is saved and press Control-Enter (Command-Enter on a Mac) to test the movie.

Acknowledgements

Much thanks goes to Alex at Sanctified Studios for inspiring the original idea to use a movie clip as a button and to Dominic Gelineau of Zedia Flash Blog for showing the best way to create rollovers and rollouts in ActionScript 3.