dispatchEvent() Blog™

Here’s a little trick that can help you save lots of time that might otherwise be spent creating multiple specialized classes in your Flash project. This trick makes use of the Base Class field in a symbol’s actionscript properties. (For info on creating pseudo-abstract classes in AS3, go here)

By the way, this tip may be common knowledge to Flash users. I use FlexBuilder almost exclusively these days but recently have had to dip back into the twisted world of the Flash IDE so please refrain from leaving any comments about how I shouldn’t use the timeline.

The Problem

Say you have several different buttons for a site that each look of behave slightly differently but all share the same underlying functionality. In this example, I’ll be using a crude set of video controls. I want each of these different controls to respond to rollovers by showing the label beneath the icon.

Each  control has different icons and text so they’re going to need to be kept in different symbols. One solution might be to try to cram all the icons into one master symbol and change between the different icon frames using code. But that’s sloppy and unnecessary. Another solution might be to create 4 different classes that each implement the functionality or each extend a class with common functionality. This is a much better solution, but requires you to create 4 AS files for what functionally is just 1 type. You cannot use the same class for multiple symbols in your library though. Fortunately, Flash offers another solution that may be a bit less intuitive.

The Solution

If you needed to create the same sort of control components purely using code (using Flex for example), your first step would likely be to create some sort of base class that implements the common functionality of the 4 controls. Here’s an example of a base class for these 4 controls.

package {

	import flash.text.*;
	import flash.display.*;
	import flash.events.*;

	public class AbstractVideoControl extends MovieClip {
		// you'll need to create this text field on the timeline
		// and set the instance name to "label"
		public var label:TextField;

		public function AbstractVideoControl() {
			label.visible = false;
			addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
			addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
		}

		protected function onMouseOver(event:MouseEvent):void {
			label.visible = true;
		}

		protected function onMouseOut(event:MouseEvent):void {
			label.visible = false;
		}
	}
}

Note: In many non-ActionScript languages, there is a construct called an “abstract type” which  is simply a base class that cannot be instantiated on its own, only extended. In Flash, proper abstract types don’t exist, but we can consider a class Abstract if it shouldn’t be extended. More on that at Wikipedia.

Next, let’s make our controls extend this class. For each symbol, check the Export for ActionScript box in the symbol properties. Since Flash can automatically generate classes for symbols when an .as file doesn’t exist, the only thing you’ll need to fill in is the Base Class field (later, you can create a class for PlayButton if you need one). Make sure you use the fully qualified name if you’re using packages.

Moar

I found this technique was very useful for when I wanted to animate TextFields on the timeline. Timeline animations, as you probably are aware, only work with MovieClip symbols. That means that even simple animations on text require the text to be contained in a symbol. I created an AbstractTextFieldWrapper class so that I could easily work with animated type without having to create new classes every time the format changes.

package {
	import flash.display.MovieClip;
	import flash.text.TextField;

	/**
	 * This class allows you to create an animated text field on the
	 * timeline and still set the text of the field without creating a new
	 * class for each text field that does this.
	 *
	 * @use In the flash library, create a new movieclip symbol containing the
	 * 		textField. Make sure you set the instance name for the text field to
	 * 		"textField". Make the base class for the symbol
	 * 		"AbstractTextFieldWrapper".
	 * 		In another class, use the type AbstractTextFieldWrapper insatead of
	 * 		TextField for your text field variable.
	 */
	public class AbstractTextFieldWrapper extends MovieClip
	{
		public var textField:TextField;
		public function set text(text:String):void {
			textField.text = text;
		}
		public function get text():String {
			return textField.text;
		}
	}
}