The first thing we need to do is open Flash CS3 and create a new Flash File (ActionScript 3.0) as I did in Figure 1-1.


Figure 1-1: Create a new Flash AS3 file.

Next we have to save the file. When you save place the file in a directory called c:\Projects\GettingStartedWithAS3\Dev_Develop and call our file Main like I have done in Figure 1-2.


Figure 1-2: Save our new file in a directory called c:\Projects\Dev_Develop\Main.fla

Next go into c:\Projects\ and create a directory called Dev_Deploy. Once you have done that go into the publish settings of you new Main.fla and change the publish path for the swf and the html to Dev_Deploy. See Figure 1-3.




Figure 1-3: Set the publish settings in Main.fla to have the swf and html export to the Dev_Deploy directory.

This is not really essential and not specific to AS3 but I find that it is much easier when uploading the finished project to your server because all of you development files are seperate from you deployable files.

Lets now move onto the next step and create our DocumentClass.

Now we need to create the Document Class that will drive our simple application.  To do that click File>New and select ActionScript File (see Figure 2-1).


Figure 2-1: Create new ActionScript File.

Now we need to save this new AS file in a package.  Packages are a tiddy way to put our Classes into folders.  It is common to create your custom Classes in a directory that is the reverse order of your website or company website name.  My company name is IdentityMine.com so I saved my AS file in a directory called com\identityMine\documentClass\ and named it DocumentClass.as (see Figure 2-2).


Figure 2-2: Save your new AS file in a package or directory structure of com\identityMine\documentClass\DocumentClass.as

Now we need to do something that was introduced in AS3 and that is to create a namespace.  A namespace of an AS file is the same as the package that the AS file is in.  So in our DocumentClass.as file put in the namespace like I did in the code below:

[code]
package com.identityMine.documentClass
{
 
}
[/code]

Now we need to declare the class.  This is the same name as our AS file, see the code below:

[code]
package com.identityMine.documentClass
{
 public class DocumentClass extends MovieClip
 {
  
 }
}
[/code]

In the code above we declared our class as a public class that extends a MovieClip which means it now will inherit all of the properties of a MovieClip.  We need to do this because our DocumentClass is the main Class for our movie.

Something also new to AS3 is that if we want to extend our new DocumentClass to a MovieClip we need to import the Flash MovieClip Class.  I have done this in the code below:

[code]
package com.identityMine.documentClass
{
 import flash.display.MovieClip;
 public class DocumentClass extends MovieClip
 {
  
 }
}
[/code]

Notice that the import statement is above the class declaration.

Now we need to create a Contructor for our DocumentClass.  A contructor is not new to AS3 as AS2 Classes need them as well.  A Constructor is basically a function or method that is called whenever the DocumentClass gets instantiated.  In the case of a Document Class it will get instantiated when our movie first runs.  I have created my constructor in the code below:

[code]
package com.identityMine.documentClass
{
 import flash.display.MovieClip;
 public class DocumentClass extends MovieClip
 {
  public function DocumentClass()
  {
   
  }
 }
}
[/code]

Note: a Contructor must never have a return type such as "void"

Now, lets add a trace statement into our Constructor so we can tell when it is instantiated:

Now let's move onto the next phase and hook our DocumentClass up to our Main.fla

Now, if you switch back to Main.fla and click off the stage you will see the Properties for the page in the Properties Panel.  There you will see a field that is new to Flash CS3 called the Document Class field.  Here is where we put the fully qualified path of our DocumentClass Class. (see Figure 3-1).


Figure 3-1: Put our fully qualified path of com.identityMine.documentClass.DocumentClass in this field. 

Now if you run your application you should see "DocumentClass Initialized" in our Output Window. (see Figure 3-2).


Figure 3-2: Our Output Window shows our trace statement so we now know that we have succesfully connected our DocumentClass with our Main.fla.

Next let's go on and create a very simple navigation button and create a Class for it.

Now lets grab our Rectangle tool from the toolbar and create a simple rectangle on the Stage like I have done in Figure 4-1.


Figure 4-1 shows a simple rectangle drawn on the Stage of Main.fla

Now select that rectangle and hit F8 to turn it into a MovieClip symbol called NavBtn. (see Figure 4-2)


Figure 4-2: We now turn our rectangle into a MovieClip symbol and call it NavBtn.

Now create a new AS file and save it as com.identityMine.navigation.NavigationButton.as
And like before we have to set the package, class declaration with a extend on it, our import statement and our Constructor for our new AS file like I have done below:

[code]
package com.identityMine.navigation
{
 import flash.display.MovieClip;
 public class NavigationButton extends MovieClip
 {
  public function NavigationButton()
  {
   
  }
  
 }
 
}
[/code]

Inside the Contructor notice I have put a trace statement of that should trace out "NavigationButton Initilized"

Now I am going to go back to Main.fla and delete the NavBtn off the stage.  In the Library I am going to right-click on NavBtn and left-click on Linkage and click Export for ActionScript. (see Figure 4-3)


Figure 4-3:  Here I am setting our NavBtn's linkage.

Now, this is a little different in AS3 because I can leave the default Class of NavBtn and place my NavigationButton Class in the Base Class.  If I do this Flash will see that the NavBtn Class does not exist and prompt me to make one for me.  If I do that, then I can reuse this Class on other navigation buttons.  So, I am going to do exactly that. 

Leave you Class set to NavBtn and change the Base Class to:

com.identityMine.navigation.NavigationButton

Select OK and Flash will tell you that NavBtn does not exist and ask to create it for you.  Click OK.

Now at this point if we were to run our application we would not see our NavigationButton trace statement because currently there is no NavBtn being added to the stage.  Next we are going to go back to our DocumentClass and make that happen!

In our DocumentClass we first need to import the NavBtn Class.  Then we need to declare a private var called _navBtn and declare it as a NavBtn.  See the code below:

[code]
package com.identityMine.documentClass
{
 import flash.display.MovieClip;
 import NavBtn;
 public class DocumentClass extends MovieClip
 {
  private var _navBtn:NavBtn
  public function DocumentClass()
  {
   trace("DocumentClass Initialized");
   
  }
 }
}
[/code]

Now inside the Constructor we can instantiate a new NavBtn like I did in the code below:

[code]

package com.identityMine.documentClass
{
 import flash.display.MovieClip;
 import NavBtn;
 public class DocumentClass extends MovieClip
 {
  private var _navBtn:NavBtn
  public function DocumentClass()
  {
   trace("DocumentClass Initialized");
   _navBtn = new NavBtn();
  }
 }
}

[/code]

Now if you run the application you will see that our Output Window has the "NavigationButton Initilized" trace statement as well as the "DocumentClass Initialized"  Sweet huh?  But wait, where, you ask is the NavBtn on the Stage?

Well, it is not there yet because we have just instantitaed it and not actually added it to the Stage.  So let's do that now. 

Under the instantiation of NavBtn add the following code so that now your DocumentClass Constructor looks like this:

[code]

public function DocumentClass()
  {
   trace("DocumentClass Initialized");
   _navBtn = new NavBtn();
   addChild(_navBtn);
   _navBtn.x = 100;
   _navBtn.y =100;
  }

[/code]

Notice I put in a x and y coord value of 100 because default would have been 0 and 0 and hard to see.  So if you run our app now you will see a new NavBtn at x of 100 and y of 100. (see Figure 5-1).


Figure 5-1: Our new NavBtn has been added to the Stage at x of 100 and y of 100

Now, the next and final thing I am going to do is to add an Event Listener for _navBtn in our DocumentClass and then create a Event Handler to handle the event.  Let's move on and do that now!

So before we can add an Event Listener we need need to import MouseEvents.  In our DocumentClass right under our MovieClip import add the following line of code:

[code]

import flash.display.MovieClip;
import flash.events.MouseEvent;

[/code]

Then under our Constructor add the following Event Listener code so that your Constructor looks like mine below:

[code]

public function DocumentClass()
{
   trace("DocumentClass Initialized");
   _navBtn = new NavBtn();
   addChild(_navBtn);
   _navBtn.x = 100;
   _navBtn.y =100;
   _navBtn.addEventListener(MouseEvent.CLICK, navBtnClicked);
}

[/code]

What we did was to addEventListener which will listen for a MouseEvent of CLICK and when it hears it, it will run the yet to be created navBtnClicked Method.  Let's create that now.

Under our Constructor we are going to add the navBtnClicked method, see my code below:

[code]

private function navBtnClicked(event:MouseEvent):void
{
   trace("_navBtn was clicked!");
}
[/code]

I want to mention a couple of things about this Method.  First, we declared the Method as private.  This is because we don't want any other object running this function other than DocumentClass.  Declaring our Method as private will ensure this.  Next notice we passed an event into the Method.  We can use that event to tell us who fired the event by changing our code to this:

[code]

private function navBtnClicked(event:MouseEvent):void
{
   trace(event.target+" was clicked!");
}

[/code]

So now if we run our applicaton and click the navigation button we will see what we see in Figure 6-1:


Figure 6-1:  We see the trace output that tells us the navigation button was clicked and we are capturing the sender of the event

Well that is it.  Note that is a very simple AS3 application but it should point you in the right direction so that you can start creating awesome AS3 applications that have no timeline objects or even timeline code!

I also made this tutorial available as a video tutorial at http://creativenetdesign.com/as3Tutorial/as3Tutorial.html

Below is all of the code for each of the Classes we created:

DocumentClass.as

[code]
package com.identityMine.documentClass
{
 import flash.display.MovieClip;
 import flash.events.MouseEvent;
 import NavBtn;
 public class DocumentClass extends MovieClip
 {
  private var _navBtn:NavBtn
  public function DocumentClass()
  {
   trace("DocumentClass Initialized");
   _navBtn = new NavBtn();
   addChild(_navBtn);
   _navBtn.x = 100;
   _navBtn.y =100;
   _navBtn.addEventListener(MouseEvent.CLICK, navBtnClicked);
  }
  private function navBtnClicked(event:MouseEvent):void
  {
   trace(event.target+" was clicked!");
  }
 }
}
[/code]

NavigationButton.as

[code]

package com.identityMine.navigation
{
 import flash.display.MovieClip;
 public class NavigationButton extends MovieClip
 {
  public function NavigationButton()
  {
   trace("NavigationButton Initilized");
  }
  
 }
 
}

[/code]

Main.fla:

NONE!!  ;)

Happy Coding !

Victor Gaudioso AKA: Super Moderator, dvlnblk