Actionscript 3 is complete re-write of the Actionscript language that fuels Flash’s ability to create dynamic content and games. It could be said that AS3 is such a departure that many designers and some programmers will be left in the dark by this new version. I for one, think AS3 is awesome. It fixes many of the problems I had with AS2 and it also standardizes everything into a hyper charged object oriented framework. Today we are going to look at the very basics of using AS3 with Flash CS3 and will answer this age old question – Where does all my main timeline code go? We will also cover the basics of the new event model and create some interactive actions.
Here I will break down the merits of three basic methods of adding code to control your AS3 Flash CS3 application:
A. On the main timeline (sounds obvious, doesn’t it?).
Yes, code can still go here, and it is useful for basic actions, but you should shy away from this as much as possible. Also, code cannot be placed directly on a button or movieclip instance. This is the place that most designers and basic coders will want to put their code. AS3 has replaced all of the old mouse and keyboard event code with the new event broadcaster / listener model. You cannot put code directly on a movieclip or a button instance. This alone is going to drive many basic coders and designers batty because some are used to delivering their designs / basic coded .fla files with event code directly on button and movieclip instances.
B. In a class instance that extends movieClip – the composition method.
For the uninitiated, this is where it starts to get a little bit complicated. I have two basic theories on how best to create the main code for your new Flash CS3 / AS3 project.. The first method, I call composition, is to put all the code for the .fla in a class called Main (or name it the same name as your movie). For example, if your movie is called DonkeyKong.fla, then your main class that controls the game can be named DonkeyKong, Main, or something like Game (or any other name you choose). It doesn’t matter what you name it, only that this will replace most if not all of the main timeline based code that you would have used in a Flash 8/AS2 solution. This is called composition because your Main class and your main timeline are only related by composition – neither inherits or extends from one another.
In this composition method, you have not replaced the main timeline class with a new class (that comes next), but have created an instance of a Main class in your main timeline script code. This class must extend the MovieClip class. To implement this class, you add code to a frame of the main timeline to create an instance of this Main class (or whatever name you gave it), and then add it to the displayList for the main timeline. Inside this Main class you write code, and use other custom or built-in classes to completely control your movie. This would include controlling any designer provided animations, instances of library symbols, etc. With this solution, you still need to put code on the main timeline. At least one frame of the main .fla file must have the code necessary to instantiate the Main class and add it to the root displayList.
Here is a step by step example: We are going to create very simple application that waits for a button click and then displays a message to the user.
1. Create a new.fla and call it composition_sample.fla. – Make sure to choose a new Flash File (Actionscript 3)
2. Insert a new new symbol, name it button1, and set it to be a MovieClip
3. Edit this symbol. Put a 100 x 50 rectangle @ 0,0. Add a static text box with “Press Me” as the text. Make the box gray with a black border and make the text yellow..
4. Select the text and make it into a movieclip ->Insert ->Convert to Symbol. Name it “pressme” in the library. Also, give it an instance name of “pressme”.
5. Add Button1 to the main timeline stage @ 100,220. Give it an instance name of “click_btn”.
6. Add another layer on the main timeline stage.
7. Add a text box directly on the main timeline stage in the new layer. Put it underneath the button, make it dynamic text and give it an instance name of “messageBox_txt”.
It should look like this (if you change the document background to a light gray.
8. The next step is to write a Main class that will act as our main timeline controller.
9. Create a new Actionscript file, name it Main.as and place it in the same folder as the composition_sample.fla.
10. Below is the code for the Main class.
[cc lang=”javascript” width=”550″]
package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
public class Main extends MovieClip {
var timeline:MovieClip;
public function Main(tl:MovieClip) {
timeline=tl;
timeline.messageBox_txt.text=”I have not been pressed.”
timeline.click_btn.addEventListener(MouseEvent.MOUSE_DOWN,clicked);
}
private function clicked(e:MouseEvent):void {
timeline.messageBox_txt.text=”I’ve been clicked!”
removeEventListener(MouseEvent.CLICK,clicked);
}
}
}
[/cc]
1. First we declare a generic package for our class.
2. Next we import the MovieClip and MouseEvent classes. The MovieClip class must be imported because we are going to extend MovieClip.
3. Next we create a variable called “timeline” to hold a reference to the main timeline.
4. Our Main class constructor comes next. It accepts in one parameter, a movieClip that will reference the main timeline.
5. Next we set our local timeline variable to equal the passed in tl value.
6. After that, we use that variable reference to add some text to our messageBox_txt that we placed on the main timeline.
7. The final line of the constructor is the creation of an event listener to “listen” for mouse clicks on the “click_btn” that we placed on the main timeline.
8. There is one function left, and it is the “clicked” function that is fired off when the user clicks on the “click_btn” button.
Our Main class is ready, all we have to do now is a add a layer to the “composition_sample.fla” and call it code. In the actions panel for the first key frame in that layer, put the following code:
[cc lang=”javascript” width=”550″]
import Main;
var main:Main = new Main(this)
addChild(main);
[/cc]Publish this movie, click on the button and you should see the text change.
Below is a screen grab of the working output.
Download the source files
C. In the main document class (the extension method)
The next theory is very much like the first, with one major exception. You still must create one Main class that controls the entire movie, but instead of creating an instance of that class on the main timeline, you just set this class as the Document Class of the main timeline. This can be done easily in the main document properties window. This is my preferred method, and a step by step example is below: I call this the extension method because your Main2 class is basically an extension of the mainline. It is the main timeline and no composition or reference passing is necessary for it to gain that control.
1. Make a copy of the composition_sample.fla and call it documentClass_sample.fla.
2. Make a copy of the Main.as and call it Main2.as
3. Edit the Main2.as and change it to look like the code below:
[cc lang=”javascript” width=”550″]
package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.text.*;
public class Main2 extends MovieClip {
public function Main2() {
messageBox_txt.text=”I have not been pressed.”
click_btn.addEventListener(MouseEvent.MOUSE_DOWN,clicked);
}
private function clicked(e:MouseEvent):void {
messageBox_txt.text=”I’ve been clicked!”
removeEventListener(MouseEvent.CLICK,clicked);
}
}
}
[/cc]
This is very similar to the Main.as, but we have made some definite changes.
1. We need to now import the Flash.text.* set of classes to deal with the textBox placed on the main timeline.
2. The new Main2() constructor no longer needs a reference to the main timeline because it IS the main timeline.
3. We have also removed all declarations and references or the timeline variable as they are not needed anymore. As you can see, the messageBox_txt and the click_btn as actually part of this Main2 class now, so no need to reference the “timeline” variable when accessing those screen objects.
To see this example in action, we must make two more changes to the documentClass_sample.fla.file.
1. Remove all code in the first frame of the main timeline. It is no longer needed.
2. Click on the document stage (or the sides of the stage), but not on any the button or textfield. This will display the movie properties in the properties window. If that window is not showing at all, you can make it viewable by selecting it from the window >properties menu item.
3. Now, enter Main2 in the textbox for Document Class.
That’s it. Publish the movie.
Download the source files
I think this second method if more elegant, and easier to understand that the composition method, but both can be used just as easily.
That’s it for this lesson. We have covered the basic ground to help you get started in AS3 for Flash CS3. Good luck and have fun.