In this tutorial, we’ll learn how to take advantage of these items.

Final Result Preview

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

Step 1: Brief Overview

We’ll make use of the ContextMenu class to create an application showing the different methods and properties of this class.

Step 2: Create New Document

Open Flash and create a new Flash File (ActionScript 3.0).

Set the stage size to 600×300 and add a black radial background (#555555 to #252525).

Step 3: Add Target MovieClips

We will create four MovieClips that will each show a different context menu when right-clicked.

Select the Rectangle Tool (R) and create four squares of 100×100 px each, with some writing inside. Convert them to separate MovieClip symbols and align them to the corners of the stage; use the image below as a guide. The instance names are in italics.

Step 4: Add Simple Instructions

Add some text to the stage to indicate to the user what action to perform.

Step 5: Create the Document Class

Create a new ActionScript Document and save it as Main.as. This will form our document class. If you are not sure how to use a document class, please read this Quick Tip.

Step 6: Start Writing the Document Class

The package keyword allows you to organize your code into groups that can be imported by other scripts, it’s recommended to name them starting with a lowercase letter and use intercaps for subsequent words – for example: myClasses.

If you don’t want to group your files in a package or you have only one class you can use it right from your source folder.

package
{

Step 7: Import Required Classes

We’ll make use of the following classes, so import them in the document class:

import flash.display.Sprite;
import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;
import flash.events.ContextMenuEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;

Step 8: Extend MovieClip

We’re going to use MovieClip-specific methods and properties so we extend that class.

public class Main extends MovieClip
{

Step 9: Define Variables

These are the variables we’ll use. They are basically ContextMenu and ContextMenuItem instances.

/* When a ContextMenu item is created you can specify: the name of the item, whether to use a separator line,
   whether the item should be enabled by default, and whether it is visible to the user */

var builtInItems:ContextMenu = new ContextMenu();
var customItemEnabled:ContextMenu = new ContextMenu();
var customEnabled:ContextMenuItem = new ContextMenuItem('ActiveTuts+');
var customItemDisabled:ContextMenu = new ContextMenu();
var customDisabled:ContextMenuItem = new ContextMenuItem('Disabled Item', false, false);
var linkedItem:ContextMenu = new ContextMenu();
var linkText:ContextMenuItem = new ContextMenuItem('Go to TutsPlus.com', true);
var textCM:ContextMenu = new ContextMenu();

Step 10: Write Main() Constructor Function

This function is executed when the class is loaded. It calls the functions that will handle the ContextMenu elements.

public function Main():void
{
	handleBuiltIn();
	handleCustom();
	handleDisabled();
	handleLink();
	handleClipboard();
}

We’ll write these functions in the next steps.

Step 11: Write handleBuiltIn() Function

This is the function that handles the built-in items. Here we take builtInItems, a ContextMenu we defined earlier, remove the built-in items, and set it as the context menu for the builtIn square symbol.

private function handleBuiltIn():void
{
	builtInItems.hideBuiltInItems(); //Hides all built-in menu items (except Settings)
	builtIn.contextMenu = builtInItems;
}

You can see a list of the built-in menu items here.

Alternatively, you can enable/disable specific menu items using the builtInItems property as shown in the following code:

var defaultItems:ContextMenuBuiltInItems = myContextMenu.builtInItems;
defaultItems.print = true; //You can replace "print" with a valid default context menu item

Again, visit livedocs.adobe.com for a list of such items.

Step 12: Add a Custom Item

To add a custom item to the context menu, we’ll make use of two of the variables we created.

private function handleCustom():void
{
	customItemEnabled.customItems.push(customEnabled); // Adds the customItemEnabled ContextMenuItem value to the ContextMenu instance
	custom.contextMenu = customItemEnabled; // Sets the ContextMenu instance to the MovieClip
}

As you can see, we can push() a ContextMenuItem onto a context menu’s customItems property, because it is an array.

Step 13: Add a Disabled Item

The same action is performed by this function, but using the customItemDisabled parameter in the ContextMenuItem.

private function handleDisabled():void
{
	customItemDisabled.customItems.push(customDisabled);
	disabled.contextMenu = customItemDisabled;
}

This makes the item look grayed-out and unclickable.

Step 14: Add an Action

We know how to add a custom item to the context menu list, so far it can be used as a message or a notice but it will be more useful if an action can be performed when clicked. Let’s see how to do it.

//A webpage will be opened when the menu is clicked

private function handleLink():void
{
	linkedItem.customItems.push(linkText);	//remember we set the text of this link earlier
	linkText.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onMenuSelect);
	link.contextMenu = linkedItem;
}

private function onMenuSelect(e:ContextMenuEvent):void
{
	navigateToURL(new URLRequest('http://tutsplus.com'))
}

Step 15: Alter the Clipboard Context Menu

The ContextMenuClipboardItems class determines which items are enabled or disabled on the clipboard context menu. These settings are used when ContextMenu.clipboardMenu = true and when the object with focus is not a TextField.

private function handleClipboard():void
{
	textCM.clipboardMenu = true;
	textCM.clipboardItems.selectAll = false;
	contextMenu = textCM;
}

Note that these settings only apply in Flash Player 10, so cannot be used in Flash CS3 (they will cause a compiler error if you try to use them).

Step 16: Document Class

Go back to the .fla file and in the Properties Panel set the Class field to ‘Main’ to make this the Document Class.

Conclusion

Customizing the Context Menu in your movies or applications can extend its functionality in a very usable way, try it!

Thanks for reading!

Step 1: Set up the Flash Document

Create a new Flash ActionScript 3 document. Resize the stage to be 600×300. With the rectangle tool, draw out a rectangle that is the size of the stage. Give it a color of #CCCCCC. Also, give it a black stroke of 2px.

Step 2: Set up the Flash UI

Here’s the layout we’ll be working towards:

Open the Components Panel (Window > Components) and, from the User Interface folder, drag a ColorPicker component onto the stage. Give it an instance name of ‘cp’.

Next create a dynamic text field called ‘resizeText’; place and size it however you please (you can’t see the one in my image; it’s empty, and in the top-right of the stage.)

Now, create another dynamic text field. Give it an instance name of ‘jsText’. Then create a button symbol and give it an instance name of ‘prompt’. After that, create another button and give it an instance name of ‘change’.

Finally, create two input text fields. Place one next to your ‘prompt’ button, and give it a name of ‘promptText’. Take the second text field, move it next to your ‘change’ button and name it ‘changeText’.

Also, add any labels you want; refer to my image to see how I set it up.

Step 3: Set up the HTML UI

In order for the ExternalInterface to work, the document has to be on the internet. First, create a new text file, and save it as ‘externalInterface.html’. Next, open a text editor and add all the code below. Save the HTML file.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>externalInterface</title>
<style type="text/css">

body {
	font-family:Arial;
}

#asSend {
	padding-top:20px;
	font-size:12px;
}
#htmlWrap {
	margin-top:10px;
	width:578px;
	padding-left:20px;
	border-width:1px;
	border-style:solid;
}
#sender {
	margin-top:10px;
}
#textChange {
	font-size:13px;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:20px;
}

</style>
</head>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="600" height="300" id="externalInterface" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="false" />
  <param name="movie" value="externalInterface.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="externalInterface.swf" quality="high" bgcolor="#ffffff" width="600" height="300" name="externalInterface" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<div id="htmlWrap">
<div id="asSend">
  <label for="textArea">Send to actionscript:</label><br />
  <textarea cols="50" rows="4" id="textArea" name="textArea"></textarea>
  <br />
  <button id="sender" name="sender">Send</button>
</div>
<div id="textChange">Use Actionscript to change me!</div>
</div>
</body>
</html>

The key areas are:

• The <object> section, which embeds the SWF you’ll create from the Flash file.
• The <div>s and <textarea>, which have id properties so that we can access them from the SWF.

Your HTML should appear as below:

When the code has been replaced, upload the file to your webserver, so we can get started with the ActionScript.

Step 4: Set up a Document Class

Create a document class for your Flash file; call it Main.as. If you’re not familiar with document classes, read this Quick Tip.

package
{
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {

		}
	}
}

Step 5: Calling JavaScript Functions from Flash

The first thing we’ll do with the ExternalInterface is call a JavaScript function that will change the background color of our webpage. So, attach an event listener to our ColorPicker component. When the color changes, it will send the hex value to a javascript function called receiveColor():

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
		}

		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);	//calls receiveColor(event.target.hexValue) in the javascript
		}
	}
}

Now we have to write this receiveColor() function. In the head of our HTML document, we start the javascript by defining this function. It simply takes the value sent to it from Flash and changes the background color.

Put that right after <head> in your HTML file. If all’s well, when you run the HTML page in a browser and change the color in the ColorPicker, it should change the background color of the webpage.

Step 6: Calling ActionScript Functions from JavaScript

The next example will be to send data from JavaScript to Flash. In the HTML document, paste the following code within the <script> tag you added in the last step:

window.onload = function() {
	var sender = document.getElementById("sender");		//getElementById finds an element according to its "id" property
	sender.onclick = function() {
		var ta = document.getElementById("textArea");
		document['externalInterface'].receiveText(ta.value);
		ta.value = "";
	};
};

Here’s what this does: after the document is loaded, we get the ’sender’ button and attach an event listener to it. When the ’sender’ button is clicked, it will call the receiveText() function in Flash that we will set up now.

Back in Flash, we tell the ExteralInterface to register the ActionScript function so that it can be called from JavaScript. Then we set up our receiveText() function:

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);	//allows JavaScript to access the receiveText() function.
		}

		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}

		//this is the new receiveText function
		public function receiveText(value:String):void {
			jsText.text = value;
		}
	}
}

(New lines are 8 and 15-18.)

Step 7: Calling JavaScript Alerts, Confirms and Prompts from ActionScript

We can also call alerts very easily from ActionScript. Here we simply tell the ExternalInterface to call a ‘prompt’. We can also use the ExternalInterface to pass parameters to functions. Here we tell the ‘prompt’ function to ask the user his or her name. When our user enters the info, it’s passed back to the ‘promptText’ text field.

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);	//makes promptClick() run when prompt button is clicked
		}

		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}

		public function receiveText(value:String):void {
			jsText.text = value;
		}

		//function to be called when prompt button is clicked. Will ask for user's name using a JS prompt.
		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}
	}
}

(New lines are 9 and 20-23.)

Step 8: Calling Anonymous JavaScript Functions

Another thing we can do is write our own JavaScript functions as strings, then call them from the ExternalInterface. Here we create a JavaScript function that receives a parameter. We take that parameter and assign its value to the innerHTML attribute of our ‘textChange’ div in the HTML document. You’ll notice that there are no external JavaScript functions being called – it is all contained within the ActionScript.

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);
			change.addEventListener(MouseEvent.CLICK, changeClick);	//makes changeClick() run when change button is clicked
		}

		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}

		public function receiveText(value:String):void {
			jsText.text = value;
		}

		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}

		//changes text inside the HTML to match text field inside Flash
		public function changeClick(event:MouseEvent):void {
			ExternalInterface.call("function(param){ document.getElementById('textChange').innerHTML = param; }", changeText.text);
			changeText.text = "";
		}
	}
}

(New lines are 10 and 25-29.)

Step 9: Calling Anonymous JavaScript and ActionScript Functions

Finally, we can call anonymous functions on both sides. In the ‘anonymous’ function, we register an anonymous ActionScript function with the ExternalInterface. The function fills in some text, then starts a timer. Next, we call an anonymous JavaScript function. This function tells the window, when it’s been resized, it must call back to our anonymous ActionScript function.

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);
			change.addEventListener(MouseEvent.CLICK, changeClick);

			//create a new timer with a one second tick, and add an event listener
			var timer:Timer = new Timer(1000);
			timer.addEventListener(TimerEvent.TIMER, onTimer);

			anonymous();   //set up the anonymous functions
		}

		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}

		public function receiveText(value:String):void {
			jsText.text = value;
		}

		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}

		public function changeClick(event:MouseEvent):void {
			ExternalInterface.call("function(param){ document.getElementById('textChange').innerHTML = param; }", changeText.text);
			changeText.text = "";
		}

		//clear the text after one second has passed
		public function onTimer(event:TimerEvent):void {
			resizeText.text = "";
			timer.stop();
		}

		public function anonymous():void {
			//see how we're defining a function inside another function?
			ExternalInterface.addCallback("anon", function(){
				resizeText.text = "The window has been resized.";
				timer.start();
			});

			//same applies here
			ExternalInterface.call("function(){ window.onresize = function(){ document['externalInterface'].anon(); }; }");
		}
	}
}

(New lines are 12-16 and 36-51.)

Conclusion

The ExternalInterface is an extremely powerful and useful class. With it, you can receive values and events, all outside of the SWF. Have fun with it and thanks for reading!

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

Building nice looking websites is great; building websites that have a high Return Of Investment is priceless.

Recently I joined the web team of a Brussels based communication agency, a team with expert knowledge in the fields of user experience design, content strategies, software development, and interaction design. We spend a lot of time on wireframes, storyboards, and prototypes, which guarantees that the functionality and the content of the websites are optimal before any graphical design takes place. This means our websites have a solid base to be built upon, which results in a higher ROI with less time spent on development.

A huge part of our work is under the hood: Google Analytics inside Flash.

This tool allows us to measure how well our sites are doing against our predefined goals: bounce rate, click paths and even custom measurements like how many people scrolled a certain page. Our specialists analyze all this information and use it to optimize the website. If you’re not measuring how people are using your site, you can only guess about its successes and failures.

The following setup is a stripped-down version of an image gallery; Google Analytics allowed the client to discover which images triggered the most interest. I’ve left out the actual gallery building as it is beyond the scope of this tutorial; there are plenty on Activetuts+ already though – just search for “gallery”.

We will focus on how to set up Google Analytics to put a smile on your clients’ faces (and probably yours too…)

Google Analytics in Action

Here’s the simplified image gallery:

As you can see, when an image is clicked, its identity gets sent over to my Google Analytics account. Later on, I can look at all the statistics of which images were clicked, at which times, in which countries, and so on.

(Of course, you’ll remove all that overlaid information when it’s live on your own site!)

Step 1: Understand the Benefits

Imagine yourself working hours, weeks, even months on a website. You successfully deliver the files before the deadline, but a few months later it’s clear that – despite being beautiful – the site is not attracting as many customers as your client expected. Google Analytics helps you to review visitors’ browsing habits and discover which parts of the site could be better highlighted. Beauty is great, but I believe that Return Of Investment should be your main priority.

In another scenario this same tool helps you to understand what area of your website has the most page views, how many times visitors wanted to contact you, or which elements of your portfolio visitors love the most. How many benefits can you think of for your site?

Step 2: Set Up a Google Analytics Account

If you don’t have a Google account already, sign up for one here – it only takes a few seconds.

Once that’s done, head to http://google.com/analytics and sign up for an Analytics account. There you can give an account name for the websites you want to track.

Step 3: Inside the Machine

Head to https://google.com/accounts/ManageAccount
and use your mouse skills to click Analytics.

Great, we are now in the Overview page. You should see your Analytics account name; click it and you’ll find yourself at the website profiles.

If you haven’t set up a website to track, simply click ‘Add Website Profile’. Enter your domain name and Country, then click Finish.

Step 4: Retrieve your UA Code and Tracking Status

The Tracking Status page will automatically appear:

The most important part is your web property ID. This is a unique number Google Analytics will use to send and store your website’s traffic. (Copy this UA code for use later in Flash, or write it down.) For this introduction we’ll simply keep all the options at their defaults.

If you’re going to embed your SWF on your own webpage, the javascript code must be pasted right before the </body> tag in the page’s HTML. This will allow you to keep statistics for the actual page itself, as well as for within the SWF. It’s worth inserting this code in every page on your site.

All this is great, but you still won’t be able to pinpoint your visitors’ interaction in great detail, as the HTML is blind to your actual SWF / Flash content.

Step 5: Gathering Wood

To make sure you can see which parts of your SWF are being used, head to http://code.google.com/p/gaforflash/.

This amazing open source AS3 API has a lot of great features for integrating GA into Flash, but even with our biggest and most complex websites, we’ve only ever used two functions. (More about these later on.) Make sure you download the latest installment on the right of the page. (Come back any time to read the wiki, issues etc, to learn more about this vast API.)

Step 6: Install the Components

The zip contains a documentation folder with the entire API layout to help you along the way; a library folder (lib) where you’ll find the two components; and some text files you probably won’t ever read. At least I didn’t ;]

To install the components, make sure Flash is closed, then navigate to:

• Windows users: C:\Program Files\Adobe\Adobe Flash CS X\language\Configuration\Components
• Mac users: Macintosh HD/Applications/Adobe Flash CS X/Configuration/Components

At this point you need to create a directory named ‘Google’ and copy the files from the \lib\ folder in the zip to it.

Basically the two components give you the same functionality but are developed for two different purposes. The Analytics component is for those who are unfamiliar with AS3. I assume most of you are already using AS3, so we’ll use the AnalyticsLibrary component.

Step 7: Feeding the Fire

Inside Flash, open the FLA for the project you’re working on, click Window > Components, and drag the AnalyticsLibrary component to your library.

Step 8: Action! (Script)

Whether you’re coding on the timeline or using a document class, you’ll need to do some imports:

//import the Analytics classes
import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;

Also, in your code, create a new instance of the AnalyticsTracker:

var tracker:AnalyticsTracker = new GATracker( this, "UA-XXXXXX", "AS3", true );

The parameters are: stage, UA code, actionscript 3 mode, visual debugger on/off. Leave them all as I’ve set them, apart from the UA code which you’ll need to swap for your own. Set the last parameter to false when you are done with your testing phases, as when true it will create an overlay on top of your SWF file like in the example above.

Test this out by adding a Click event listener and handler to one of your movie clips or buttons:

myMc.addEventListener (MouseEvent.CLICK,onClick);

function onClick (event:MouseEvent):void
{
	//make your clients happy.
    //use 'event.target.name' instead of 'event.target'
	//this will display 'myMc' instead of [object myMc], which is obviously a nicer output.
	var mySelection:String = event.target.name;
	tracker.trackPageview ("gallery = " + mySelection);
}

Here we’re using the trackPageView() function. Use this for navigation purposes. You can add a string so your client knows what part is being tracked. In this case we’re tracking which gallery has been triggered. So copy and paste this code everywhere you want to track your interactions and give an understandable String to the data.

For example, if you have a “call to action” button on stage to lure potential new clients, you could write:

tracker.trackPageview("Hire me");

…in the Click event handler for that button. Or if you want to track how many times they have read your disclaimer:

tracker.trackPageview("Disclaimer");

I’m sure you get the idea.

Step 9: Event Tracking

Use event tracking if you want to track what video or MP3 event is being played, or when the user pauses it – things like that. It’s basically for any action that doesn’t represent opening a “page”.

The code looks like this:

trackEvent(category, action, label);

For example:

tracker.trackEvent("profile videos", "play", "first video: introduction");

Additionally you can add a fourth parameter. This can represent any value you like, but it must be an integer (whole number). For example, you might want to pinpoint the exact time when the video was paused.

This is great to see how well your streaming or downloading performs for your visitors (not everyone has top class Internet connections):

var currentTime:Date = new Date().time;	//get the current time
//load the video here
var readyToRoll:Date = new Date().time - currentTime;	//get time taken to load the video
tracker.trackEvent("profile videos", "playing the video", "video 1/3: introduction", readyToRoll);

Step 10: See the Data in Google Analytics

Go to http://google.com/analytics/settings/ and click your account name. Next to your domain name, click View Report.

Here you will see a timeline. (Please note: depending on your server response time it can take a while before the data gets stored, but it shouldn’t take too long.) Select the dates for when you have been testing using the calendar in the top-right:

Locate the Content Overview; here you can see which events or buttons were triggered:

As you can see, as I explained a few steps back, event.target.name displays a “nice” name like “/gallery = gallery 1″, while event.target returns something like “[object picture1]“

Clicking on one of these links – for example, “/gallery = gallery2″ – you will be able to see in-depth information, like what screen resolution your users have, when you choose an option in the drop-down menu.

There’s a deep and rich information source in nearly every single branch of the Google Analytics module. It’s nearly impossible to list all of them. Don’t be afraid; look around and see what data you can provide to your clients and yourself.

Step 11: Eliminate Yourself from the Stats using Filters

It’s a good idea to filter out your own behaviour; otherwise, it will give you incorrect data since you will probably test this in great detail.

You can do this by filtering all activity coming from your IP address – though please note, this will only work if you have a static IP address. There is a lot of documentation in the help files; I can’t cover it all here. Check out http://www.google.com/support/googleanalytics/bin/answer.py?hl=en&answer=55481

Filters can also be useful for other reasons. Here is some more information: http://www.google.com/support/googleanalytics/bin/topic.py?hl=en&topic=11091

Step 12: The End is the Beginning…

In this Quick Tip I’ve only covered a snowflake on the tip of the iceberg of what you can do with this amazing API. It’s a quick overview on the two most beneficial functions that we deal with to improve our websites and match our clients’ wishes.

You can also set predefined goals, group users that (for example) use widescreen monitors, base your Analytics on search engine keywords and so on. For your clients, you can send an email with daily, weekly or monthly reports (as xml, PDF, or other formats), or even give them access to your Analytics page. If you’d like more information, please ask in the comments!

My Opinions on Search Engine Friendly Flash Websites

Although it is beneficial to read and trace your visitors’ interactions, this is a long way from using Flash in an SEO-friendly world. I’ve warmed you up for optimal website design and focusing on Return of Investment, but we’re not there yet.

A good next step would be to look into the Gaia framework, and use its mighty setup to work with swfaddress and deeplinking. This will allow you to track individual pages of your website project and in combination with your newly learned Google Analytics magic, I am sure not only your clients will smile.

Editor’s Note: We have some Gaia tutorials lined up, don’t worry

I’ve been working for over 10 years in the graphic design world, and never had so much power to know exactly what my clients and visitors want. I often like to call it “free marketing and research from your desktop”. (If you are wondering why my own site isn’t using this technology, well honestly… I hope to re-launch by mid 2010 *sips coffee*)

I hope this opens new doors for you and boosts your skill set. Good luck and have fun!

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!

1 The Plus Project

As you may know we have some pretty big plans for these Tuts+ sites. While today they are humble little tutorial blogs, we’ve thought for some time that it would be cool to build an entire platform for education. We’re going to call that platform Plus. You’ll know Plus content as our premium content, but no longer.
Our premium content is now ‘Premium’ (go figure!) and Plus is the brand for the educational platform we’re building, which, just like Psdtuts+, will be completely free for the most part.

With Tuts+ well established now, we’ve finally begun work on the project! We’ve acquired the domain Plus.org which will be the home of the new platform (yay for our first four letter domain!) We’ve also brought over our resident code genius Ryan Allen (who built our ActiveDen platform all by himself back in 2006) to team up with Tuts+ developer extraordinaire Fred Wu and kick ass front-end guru Derek Herman. And Skellie and I have been busy spec’ing out the plans for the new site, and it’s pretty, damn cool if I do say so myself!

Right now the Tuts+ sites are fairly passive, but we’d like to get the whole community involved in writing, teaching, answering questions and generally learning. The new Plus.org platform promises to incorporate all that plus some nifty ideas we’ve taken from gaming to come together into a social education platform.

It’s going to take a long time and we’re going to roll it all out in pieces over the next 2 years. We’re super excited about it all, and I hope I’ll have more updates in the coming months!

2 Creative Sessions and Mobiletuts+

While Plus.org will take a long time, we do have some new goodies coming much sooner including Creative Sessions which is being built now, and also Mobiletuts+ which will be all about mobile development!

3 Server Update

About a week and a half ago we had some major problems with our servers. I’m happy to say that we’ve now completely resolved these issues by moving hosts and reengineering our hosting setup completely from scratch. The new setup is much quicker and has a much greater capacity for growth, so fingers crossed, that will be the last server outage for a long time to come!

4 The Redesign

The new theme has a few neat features you may want to check out including:

• Basix!
  While Tuts+ has always been known for intermediate to advanced level content, we’ve been thinking it’d be good to separate out tutorials and articles better suited to people just getting started. So we’ve created the Basix tag for quick browsing. You’ll find it in the top menu, and expect to see more Basix content soon as we beef up our library of novice-friendly content.
• Easy access to Videos, Tips and Premium Posts
  We’ve also started tagging videos, tips and Premium membership posts so that along with Basix content you can quickly find what you’re after. We’re generally going to be working to clean up our category/tagging across the network in the coming months to get it more standardized.
• Tutorial Details on Posts
  We’re also going to start standardizing all tutorials to have a "Tutorial Details" section at the top with difficulty and other pertinent details. Eventually we’ll get all the archives updated … but with over 2000 tutorials, that will take a while!
• Bigger, more readable content area
  We’ve expanded the site to be optimized for bigger 1280px wide screens, with a bit of JavaScript to resize for smaller resolutions. This has given us the space to clean up the content area to be a bit bigger and more readable generally.
• Latest Creattica content for inspiration
  We’ve also started porting over the latest Creattica content into our sidebars. There’s actually a redesign of Creattica coming in the next few weeks and we’ll be expanding the gallery to cover even more types of inspiration. The new sidebar widget will give even more exposure to those talented creatives on Creattica!
• General UI Improvements
  Most of the improvements on the new design are small, subtle improvements such as a reduction in the number of clicks needed to browse categories, a clearer search field, faster loading pages and generally cleaner, more optimized code.

One change that we have also made is to remove the community link feed. Over the years this was a great way to get exposure to community links, but unfortunately was also home to a lot of spam. So with this iteration we’ve left it behind.

Also at the moment sites with Flickr groups don’t have it showing, but don’t worry that’ll be back. There’s just a problem with our Flickr plugin at the moment!!

There are still some more tweaks to do to the new design and a lot of post formatting to do to get our archives matching up with the new theme. But for all intents and purposes the new theme is now alive and well! Enjoy!

This Quick Tip will show you how.

Ready? Let’s get started..

Section 1: Introduction

Section 2: Keying

Section 3: Encode

Section Four: Play Alpha Video

Section 5: Effects

Why Use Class Files?

I’ll admit it – sometimes, coding entirely on the timeline is useful. It’s a quick way to test out an effect, and the easiest way to sync actions to specific frames of an animation.

But for any project that relies more on code than on animation, there are serious disadvantages. All your ActionScript is trapped inside the FLA file; you can’t split the programming between different developers, you have to copy and paste code if you want to re-use it, and you’re forced to use Flash’s Actions Panel.

Using class files sets your code free. And it’s really no harder than coding on the timeline; it just involves a little more setup. I’ll walk you through creating a Flash project that uses classes, then break down a class file in detail.

(Part of the reason we’re switching to classes is to make it easier for AS3 developers that don’t use Flash itself to follow our tutorials. If you’re one of them, I expect you’re used to dealing with classes already, but you can always read this Quick Tip as a refresher – just ignore the bits about Flash!)

Step 1: Create a FLA

I’m sure you already know how to do this. Open Flash and click File > New … Flash File (ActionScript 3.0). Save it wherever you like. I’ve called mine Example.fla, but it doesn’t matter what name you choose.

Step 2: Create an ActionScript File

Click File > New … ActionScript File. Save this as Main.as in the same folder as your FLA.

This file is where we’re going to put the code that powers the FLA itself, but how will Flash know how to find it?

Step 3: Link the FLA to the AS File

You may have dozens of AS files in the same folder as the FLA, so Flash won’t want to guess which one to use. We’ll have to tell it.

Switch to the Selection tool (Shortcut: V), then make sure you have nothing selected (hit Ctrl-Shift-A). Open the Properties panel (Window > Properties).

If you’re using Flash CS3, it’ll look like this:

Enter Main in the box labeled “Document class” – that’s to match the name of your ActionScript file, minus the “.as” file extension..

If you’re using Flash CS4, it’ll look like this:

In this case, you’ll need to enter Main in the box labeled “Class”. For some reason, Adobe dropped the “Document” bit.

Step 4: (Optional) Reorganize your Folder Structure

You don’t have to keep all your files in the same directory. Check out this Quick Tip screencast if you’d like to know how to move things around.

Step 5: Write your Document Class

Open your Main.as file and paste the following code:

package
{
	import flash.display.MovieClip;
	public class Main extends MovieClip
	{
		public function Main()
		{

		}
	}
}

This is a basic empty document class. It’s the smallest amount of code we can write that will actually run. Let me break it down:

The package keyword tells Flash that all of the code between its curly braces is part of a single group.

Writing class Main also groups code together, but in a different way. Classes contain functions and variables; packages contain classes and import statements.

Note: you have to give your class the same name as the AS file: Main.

What about public? Well, that just means that other classes in your code will be able to see this class.

This class Main is going to power our FLA. By default, our FLA is a movie clip (it has a timeline).

We want Main to be able to do everything that a movie clip can do, plus more based on the code that we write. In other words, we want to extend the functionality of a regular MovieClip.

(Sometimes, we might not need to do any animation on the stage’s main timeline; in this case, we don’t need to extend MovieClip, and we can just extend Sprite instead. MovieClip itself extends Sprite, but adds extra features for animation, like the nextFrame() function. So if you’re not sure whether you should extend MovieClip or Sprite, go for MovieClip — it’s safer!)

MovieClip is itself a class.

Flash doesn’t automatically keep track of where all its class files are stored; in order for our extends MovieClip code to work, we need to tell Flash where to find the MovieClip class. That’s what the import line does.

Import statements always go inside the package and outside the class, at the top.

Every class contains a function with the same name as the class. It’s called the constructor function.

All the code inside this function is run when an object of this type of class is created – in our case, code between these curly braces will be run when the SWF is loaded.

Don’t worry if you feel you don’t quite grasp all of this yet. Once you start actually using classes and writing your own, it’ll all snap into place.

Step 6: Make it do Something

As I said in Step 5, the constructor function contains the very first code to be run when your SWF is loaded. So let’s put something in there to make sure everything’s working:

package
{
	import flash.display.MovieClip;
	public class Main extends MovieClip
	{
		public function Main()
		{
			trace( "Yep, it's working" );
		}
	}
}

Line 8 is the only new one there. Test your SWF in the usual way (Control > Test Movie). If all’s well, you should see “Yep, it’s working” pop up in the Output panel. If not…

• Have you saved the change you made to Main.as?
• Is your FLA’s Document Class set to Main?
• Are you definitely testing the Example.fla movie?

If none of these questions help, please post a comment.

Step 7: Try Something a Little More Complex

Try replacing your Main.as code with this:

package
{
	import flash.display.MovieClip;
	public class Main extends MovieClip
	{
		public function Main()
		{
			var greeting:String = "Hello";
			trace( greeting );
		}
	}
}

Simple, right? We’ve just created a new String variable inside the constructor function. Now let’s add a new function:

package
{
	import flash.display.MovieClip;
	public class Main extends MovieClip
	{
		public function Main()
		{
			var greeting:String = "Hello";
			changeGreetingToFrench();
			trace( greeting );
		}

		public function changeGreetingToFrench():void
		{
			greeting = "Bonjour";
		}
	}
}

There are a few things to note here.

Firstly, the new function goes inside the class, and after the constructor – by convention, the constructor is the first function in the class.

Secondly, the new function is public; when coding inside a class (and not on the timeline) it’s good practice to put “public” (or “private” or “protected”, but I’ll leave those for another post) at the start of the line that defines the function. It’s just a way of letting other classes know whether or not they can access it.

Thirdly, the new function’s definition ends with :void. This just means it doesn’t return a value. Constructor functions don’t need the :void because they can’t return a value.

If you test this movie, you’ll get an error message:

Main.as, Line 15: 1120: Access of undefined property greeting.

When you create a variable inside a function, it can’t be accessed by other functions. If you want every function in the class to be able to access the variable, you need to declare it inside the class but outside all of the functions:

package
{
	import flash.display.MovieClip;
	public class Main extends MovieClip
	{
		public var greeting:String = "Hello";

		public function Main()
		{
			changeGreetingToFrench();
			trace( greeting );
		}

		public function changeGreetingToFrench():void
		{
			greeting = "Bonjour";
		}
	}
}

Just as with functions, if you declare a variable outside of a function, you need to start it with “public” (or “private” or “protected”). Unlike functions, variables should be defined above the constructor.

Test your movie now and you should finally get a nice greeting in French. How useful!

Wrapping Up

So, this is not exactly an exciting result, but hopefully you now feel able to follow tutorials that don’t code on the timeline.

I really want to make sure everyone understands how to use a document class, so please, if any of this was unclear, post a note in the comments. Once we’ve sorted out the confusion, I’ll edit the Quick Tip to make it easier for the next person to understand. Thanks

In this article, I am going to walk you through some of the more important things you need to know and do when preparing Flash projects for broadcast.

A Little Background

For many of you, it may come as a bit of a surprise to discover that almost from its first release about 15 years ago, Flash animations were quietly moving from computer screens to TV screens. Animations were exported from Flash to QuickTime or AVI videos and subsequently prepared for broadcast on Avid workstations and showing up on the Saturday morning cartoon shows.

This was a painful process because everything that had to be done on the main timeline and ActionScript, nested movieclips and so on simply weren’t able to be used.

There was also a Flash constraint that continues to this day: You are “limited” to 16,000 frames and any one frame can have a “maximum” of 16,000 layers. On the surface that may seem to be more than enough room but do the math: at 30 frames per second a 16,000-frame timeline represents 9 minutes of playback. Apart from the fact that trying to get this monster to export is similar to pushing a watermelon through a worm, the odds are almost 100% that you will bump up against the 2GB limit for AVI files. This explains why many Flash animators, preparing content for broadcast, preserve their sanity by breaking their projects into 20 – 30 section chunks.

With the introduction of HD video in Flash Player 9.0.115 and the ability to create and play HD video using the H.264 codec and the .mp4 format Flash became untethered. The same video can be just as easily played in a browser as it can on a Sony Playstation or the HD screen in your living room. On top of all of that, SmartPhone manufacturers have come to the realization that their products are mobile devices which are being used for more than simply reaching out and “touching someone”. Though it is still early days in this arena, video is going to play a huge role in the rise of the smartphone. The day is not far off where, thanks to Flash Player 10, Flash animators will be producing content, in Flash, that shows up, simultaneously, on 52-inch HD screens, computer monitors, gaming systems and SmartPhone screens. In this article I am only going to deal with preparing Flash animations for TV.

Setting up Your Flash Document

Before you start it is a really good idea to know which aspect ratio you will be developing for.

The NTSC standard (National Television Standards Commission) which is used throughout North America and most of South America has a 4:3 aspect ratio which means that for every four pixels of width there are 3 pixels of height. Flash stage sizes of 640 by 480, 800 by 600 or even 320 by 240 are examples of 4:3 aspect ratios.

If you are going widescreen, the aspect ratio changes to 16:9.

Even though you have picked the appropriate stage size don’t think things stop there. We are dealing with screen-based media here and when you move from your computer screen to the TV screen the shape of the pixels change from square (computer) to rectangular (TV). If you don’t compensate for this, distortions will be introduced into your work. To overcome this, a common stage size that reflects the adjustment is 720 by 540. Flash documents created for use in a PAL setting should have a stage size of 720 by 576.

Frame Rate is Critical

Flash movies, as you know, can have varying frame rates. When Flash first appeared 12 fps was the standard. Today it is up to 24 fps, the default, though many developers and designers bump it to 30 fps or higher. Broadcast is rather rigid. The NTSC standard is 29.97 fps though 30 fps is commonly used.
If you live in Europe you most likely use the PAL (Phase Alternating Line) standard which was adopted in in the early 1960’s. It too, uses the 4:3 aspect ratio used by its NTSC cousin but there are differences you need to be aware of.

First off, the PAL frame rate is 25fps. This standard has better resolution than NTSC meaning its picture quality is also higher. Flash documents created for use in a PAL setting should have a frame rate of 25 fps.

Quicktime Isn’t Your Only Export Option

Though I showed you how to export a Flash movie as a QuickTime movie, PNG sequences are the way to go when frame accuracy is critical. With this technique your Flash movie, for want of a better analogy, is treated as a Flip Book and each frame of your Flash movie is rendered out as a numbered PNG document.

In this example I have applied one of the Motion Presets (Window > Motion Presets) to a movieclip on the Flash stage. The animation results in a 75-frame timeline. I selected File > Export > Export Movie and chose PNG Sequence from the Format pop down menu. The key here is to create a folder to hold the resulting png files. I am expecting a minimum of 75 png images but this number can grow to hundreds and even thousands depending on the number of frames in the Flash movie.

Clicking the Save button opens the Export PNG dialog box. The settings chosen are self-explanatory. Clicking the OK button starts the process.

There are now 75 png images in the folder and you will note they are sequentially numbered. It is extremely important that you don’t change any file name or number.

I opened After Effects CS4 and selected File > Import. When the Import File dialog box opened, I navigated to the folder containing the PNG images and selected the first file in the sequence. After Effects recognizes this selection as being the first image of a PNG Sequence and selecting “Force alphabetical order” makes sure the images come into After Effects in order. The neat thing about this is when I click Open, the sequence arrives in the After Effects Project panel as a single document, not 75 individual images. From there a Video or Motion Graphics artist can further manipulate the files before outputting for broadcast.

Making a Safe Flash Stage

If there is one thing that hacks me off about watching television it’s that, on occasion, the titles or the motion will be clipped off around the edges of the screen. This is due to the fact that TVs are not computer screens and in almost all cases will actually show a smaller version of the stage size. This why video producers and Motion Graphics artists will use overlays that show them both the Title Safe and the Action Safe areas of the screen.

These can be easily created in Flash and, if saved as a template, can be reused or you can use Guide Layers for single use purposes. The neat thing about Guide Layers is they aren’t exported.

In the above image I am using a template of a 720 by 540 stage. I used the Rectangle tool to create a box with a stroke and no fill that matched the stage dimensions, tucking the box up against the 0,0 point of the stage. Having the box containing the stage dimensions is an invaluable visual aid when you have content, like the above photo, that bleeds onto the pasteboard and covers the stage.

To create the Action Safe area I copied the box, selected Edit > Paste In Place and then, using the Scale and Rotate menu found in Modify > Transform > Scale and Rotate, reduced the size of the box to 90 percent of its original size. All of the important motion in your Flash movie should take place within this area.

The next step was to create the Title Safe Area. Again I selected Edit > Paste In Place and this time, in the Scale and Rotate dialog box I reduced the box to 80%. The Tile safe area ensures that the all important titles are clearly legible and aren’t cropped. This is why this area lies 20% in from the absolute edge of the stage.

I then converted the layer containing the boxes to a Guide layer by right-clicking (Command-clicking if using a Mac) on the layer name and selecting Guide from the Context menu.

TV Color Isn’t Web Color

The last thing I want to get into is the issue of color. In my previous tutorial one of the commenters, Shaun, mentioned “Just have to watch the bright colors–seem to bleed sometimes.” Some of you may have read that and wondered, “Huh?”

The fact is that your TV displays less color than your computer monitor. Your monitor can display all of the RGB colors from 0 to 255. When it comes to TV your Flash palette needs to be reduced to a range from 16 and 235. Black, [0,0,0], actually gets shifted to [16,16,16] meaning the colors between 0 and 16 are clipped. Same thing for white, [255,255,255]; it gets downshifted to [235,235,235]. The color that really tends to bleed is red, you might want to reduce it from [255,0,0] to [200,16,16] and add the swatch to your color palette.

If creating custom colors is tedious you might want to head out to the web and pick up Warren Fuller’s FlashNTSC swatch palette.

Installing it isn’t difficult. Open the Flash Swatches panel and, from the panel pop down menu select Replace colors. When the Import Swatch Color dialog box opens navigate to the folder where you saved the .clr file, select the file and click Open.

When the dialog box closes, the NTSC Swatches will appear in the Swatch panel.

To return to the default set of Flash swatches click the Swatch panel’s pop down menu and select Load Default Colors.

Conclusion

In this article I dealt with preparing Flash files for broadcast display on a TV. I started by explaining how the Flash stage size must have a particular aspect ratio and gave you the stage sizes for NTSC and PAL broadcasts that accommodate the shift from the square pixels of a computer monitor to the rectangular pixels on a TV.

I also discussed the importance of frame rate and showed you another method of export to broadcast – PNG Sequence – which is more frame accurate than the usual QuickTime export out of Flash.

From there I moved into how to identify the Action safe and Title safe areas of a screen and explained how to create these areas through the use of a Guide layer. I finished up by briefly reviewing a couple of color issues, how to deal with them and where you can pick up a free NTSC swatch file.

I hope, if you have reached this point in the article, that you understand there is a lot more to the process than simply firing up Flash’s QuickTime Exporter. That is the last step in the process.