As we already noticed in the introductory tutorial of the Bridging the Gap section, once you have a class, it is extremely easy to create multiple instances of the class within one applet. This is what we have done in the applet below: we created two instances of the FlipImageSimple class using two pairs of images imported to the Library. In addition, we moved all the code from the Timeline to another AS3 class, which we call CardApp. Then we assigned CardApp as the Document Class for our applet. The concept of the Document Class has many intricate details and aspects to it and it is a topic for a separate tutorial. In this tutorial, we want to provide the first example of a class assigned as the Document Class in a fla file.

Download

• Download all 'fla' and 'as' files corresponding to this tutorial: card_take1.zip

The files that correspond to the applet above are: FlipImageSimple.as, CardApp.as, and card_take1_b.fla. All these files must be in the same directory for the fla file to compile.

The Document Class is a new construct in Flash CS3 and AS3. When you click on the empty point on the Stage of your fla file and the document information is displayed in the Properties panel, you see the field 'Document Class'. You can enter a name of an AS3 class as your Document Class. In our case, we have entered: CardApp. (Note: it is 'CardApp' and not 'CardApp.as'.)

What is the Document Class? If you specify your Document Class, this class will be automatically instantiated when your movie opens. Thus, the Document Class is the entry point to your whole application. When you use the Document Class, you can keep all of your code in external files and none of it goes on the Timeline. Many developers consider this approach to be representative of best AS3 practices.

Using the Document Class is optional. If you do not specify your Document Class, Flash will create one for you automatically; you don't even have to be aware of it. The precise relationship between the Document Class and other elements of your fla file is an interesting subject that warrants a separate (upcoming) tutorial. Technically, the MainTimeline of your movie is an instance of the Document Class.

A class assigned as the Document Class must extend the MovieClip class. (Occasionally, it is sufficient if the Document Class extends the Sprite class. To be on the safe side, though, it is better to make it a subclass of the MovieClip class as we did in our applet.) You can still put code on the Timeline even if you specified your Document Class, but your code in that case must be written as if you were inside your Document Class. (In a sense, you are. You can even access private properties of your Document Class from the Timeline.) However, the main purpose of the Document Class is to provide a way for keeping all of your code in external files.

Here is the code in CardApp assigned as our Document Class. As you see, the code is very similar to the code that resided on the Timeline on the previous page, except that we create two instances of the FlipImageSimple class. Our two pairs of pictures in the Library are linked to AS3 with the names: Blue, Brown, Redjack, and BlackJack.

 

package {

 

import flash.display.MovieClip;

 

public class CardApp extends MovieClip {

 

public var card1:FlipImageSimple;

public var card2:FlipImageSimple;

 

public function CardApp(){

 

card1=new FlipImageSimple(new Blue(120,172),new Blackjack(120,172));

this.addChild(card1);

card2=new FlipImageSimple(new Brown(120,172),new Redjack(120,172));

this.addChild(card2);

setCardsPosAndProps();

 

}

 

private function setCardsPosAndProps():void {

 

card1.x=100;

card1.y=70;

card1.fLen=300;

card2.x=290;

card2.y=70;

card2.fLen=300;

 

}

}

}

 

All you need to do in order to customize the applet is to import your new images, say YourImg1, YourImg2, YourImg3, YourImg4, to the Library and link them to AS3 via the Linkage item in the Library menu. YourImg1 and YourImg2 should be of the same size, say yourWidth1, yourHeight1, but not necessarily of the same size as our current images, Blue, Brown, etc. Similarly, YourImg3 and YourImg4 should be of the same size, yourWidth2, yourHeight2. Then you change the corresponding lines above to:

card1=new FlipImageSimple(new YourImg1(yourWidth1,yourHeight1),new YourImg2(yourWidth1,yourHeight1));

and

card2=new FlipImageSimple(new YourImg3(yourWidth2,yourHeight2),new yourImg4(yourWidth2,yourHeight2));

For you fla file to compile, the files FlipImageSimple.as, CardApp.as and you fla file must be in the same folder.