ActionScript 3.0 Design Patterns

Thanks for explaining this cool feature which I had no idea existed. I can see it being very useful when dealing with animated MovieClip assets … eg. a game where you want to know when the player’s ship has finished blowing up. The one thing that seems awkward is having to reference the exact frame number.. wish there was a way to use a frame label instead.

Hi David, You can do the following if you know that certain labels exist in a movie clip.

The following class extends an MC on the stage that has two labels called ‘start’ and ‘end’ on the tween.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

package
{
    import flash.display.MovieClip;
    import flash.display.FrameLabel;
 
    public class MyMovieclip extends MovieClip
    {
        private var labels:Object
 
        public function MyMovieclip()
        {
            labels = this.currentLabels;
 
            for ( var i:uint = 0; i < labels.length; i++ )
            {
                var framelabel:FrameLabel = labels[i];
                labels[ framelabel.name ] = framelabel.frame
            }
 
            addFrameScript( labels['start'], onStartAnim, labels['end'] - 1, onEndAnim );
        }
 
        public function onStartAnim():void
        {
            trace('starting animation');
        }
 
        public function onEndAnim():void
        {
            trace('ending animation');
        }
    }
}

Now you can safely modify the tween lengths etc. knowing that the code references the labels and not explicit frame numbers.

Hi Bill and Chandima,

Thanks for the tip about the playhead. I figured out how to use addFrameScript() with an event dispatch and thus avoid having a script on the timeline, and it certainly is cool! I made a little app that has 3 colored balls moving across the stage. When the red one gets to the end of its timeline, it triggers the green one etc. Here’s the URL: http://bitsong.com/forPosting/dispatchTest/dispatchTest.html

Here’s some of my code: I include Main.as and one of the colored ball classes, RedBallContainer.as Your blog is a great place to get exciting new ideas! Thanks.

Barbara

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

package{
	import flash.display.MovieClip;
	import flash.events.Event;
 
	public class Main extends MovieClip{
		public function Main(){
			redBallContainer.stop();
			greenBallContainer.stop();
			blueBallContainer.stop();
 
			redBallContainer.gotoAndPlay(2); // starts everything rolling
 
			stage.addEventListener("startRed", onStartRed); // listener for function called when playhead reaches frame 60
			stage.addEventListener("startGreen", onStartGreen);
			stage.addEventListener("startBlue", onStartBlue);
		}
 
		private function onStartRed(event:Event){
			redBallContainer.gotoAndPlay(2);
			trace("start red");
		}
		private function onStartGreen(event:Event){
			greenBallContainer.gotoAndPlay(2);
			trace("start green");
		}
		private function onStartBlue(event:Event){
			blueBallContainer.gotoAndPlay(2);
			trace("start blue");
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

package{
	import flash.display.MovieClip;
	import flash.events.Event;
 
	public class RedBallContainer extends MovieClip{
		public function RedBallContainer(){
			this.addFrameScript(59, stopRedStartGreen) // this is instead of having to call stopRedStartGreen()
													   // from frame 60 of RedBallContainer timeline
		}
		public function stopRedStartGreen(){ // called using addFrameStript above
			this.gotoAndStop(60); // stops red ball movement on frame 60
			dispatchEvent(new Event("startGreen", true)); // dispatches event to start green ball
		}
	}
}

Nice post, but one thing needs to be said!

Lets say you have some code on your timeline, for example a stop(); function call, and then after discovering this amazing function ( addFrameScript()) you decide to give it a try. Remember that the timeline code will be completely overwritten!

So its one or the other, not both!

In digging into this method I found that the function that is added to the frame doesn’t have a parent, when you look at the variable parent you see “SecurityError: Error #2000: No active security context.”.

Interesting, No?

A cleaner way to do this that doesn’t rely on undocumented methods or risk security concerns is posted here http://www.developria.com/2010/04/combining-the-timeline-with-oo.html

I often just leave the “Base Class” field in the library symbol blank and let the “extends” keyword in the .as Class tell the symbol what it is. If I need a timeline (or if I forget) the as will extend MC, otherwise it will extend Sprite. So I often forget that’s a separate field. When I say “base Class”, I’m not talking about that field, but the one above it, labeled simply “Class.”

Usually my View Classes are a bit more complex than a simple Sprite. For instance, I might have a QuestionView that shows a Question and allows a user to answer it, so you’d need to provide it with a stem and a set of choices. When a choice is clicked, the QuestionView will generate an event that says what answer was chosen. This is all provided as part of the QuestionView’s API (ok, events are not explicit due to the nature of Flash, but you know what I mean) and that’s all the parent really needs to know.

If the Question Stem is a stage instance, the distractors are drawn dynamically (because we don’t know at design time hoe many we’ll need) and the Submit button is a stage instance, the parent doesn’t need to care.

There are several reasons to put objects on the stage/timeline

1) It gets a picture in front of the user much more quickly. Because you don’t have to embed everything prior to Frame 1, only the objects you need to display or use immediately need to be embedded there.

2) It’s easier to see what is going on. You can actually see where things are without digging through as code and try to visualize where on screen something will wind up where myThing.x=200; myThing.y=500.

3) It’s less work. If you get a comp where the button is in a particular spot, just convert that button to a MyCustomButtonClass and it’s where it needs to be on stage, relative to all the other visuals that came in with the rest of the comp on the frame where you needed it to be. No more “that’s a bit too far to the left, what if I add 10px? No, maybe 8.”

4) You don’t have to export so many things for actionscript and address them through code. Since you leave most instantiation to the Player, you only address the objects that you actually need to interact with.

5) It’s more reusable. Since the the placement of visual elements is not handled through code, you can use a different layout by attaching the base Class to a different symbol. And child symbols can be totally different implementations of the same Class and the code doesn’t have to change. So, if you have a symbol that extends QuestionView and it uses blue Comic Sans and another QuestionView that has red Helvetica, you can have a Quiz symbol that embeds one and a different Quiz that embeds the other, and your Quiz code and your Course code don’t have to care.

By contrast, if your Quiz handles the instantiation of questions, when it uses the new operator it will have to know whether it is creating a RedQuestionView or a BlueQuestionView. Granted, you can mitigate this with a Factory, but somewhere along the line something in your as code will need to make a decision of what to make. Using the timeline/stage, nothing in your as code ever needs to know that there are two separate implementations of a QuestionView. You simply handle it very intuitively and visually by creating a Quiz that plonks either a RedQuestionView symbol or a BlueQuestionView symbol on the stage, and it’s referred to in the code as a QuestionView.

6) Thrift. I paid for that Flash IDE dammit (ok, not really but I could have), and that IDE has wonderful visual/temporal layout tools. Throwing those away is wasteful of my resources and an insult to the smart people who worked so hard to provide them.

7) I’m wired that way. I spent 10 years programming in an environment that’s essentially a flow chart (Authorware). I want to see the thing that happens first, first. The thing that happens second, I want to see second. If the project has storyboards, it has a strong temporal quality, and I want to represent that temporal quality in a way that makes sense–on the timeline.

I love that you’re willing to engage on these topics and keep going back and forth until both parties come to a mutual understanding of each other’s position. Too many bloggers/authors are quick to dismiss others, and I highly respect that you aren’t like that.

I look forward to your next installment of choosing a design pattern .