One question I get quite often is how to setup a development environment.  Another question I commonly get is how to use gProject.  gProject is a panel that allows you to easily create a project, manage your library and most importantly allows you to very easily create custom Classes in custom packages.  Further it allows you to auto import UI (User Interface) objects into your custom built Classes.  If you don't yet have it I strongly suggest you stop this tutorial and go and get it.  It WILL make your life much easier.  You can get it here:  http://www.gskinner.com/products/gProject/about.php

In this tutorial I am going to show you how to:
1. Create the development directory structure;
2. Set up your deployment settings;
3. Set up a Classpath:
4. Create a Main MovieClip and create a Class for that clip that is stored in a custom package;
5. Create a TestObject MovieClip and create a custom Class for it;
6. Import that new UI TestObject into your Main Class and then do something to it (simply change it's alpha to 50%).

If you need help on setting up gProject you can get that from the site above.

First create a new directory for your project.  I named mine development_tutorial.  In that directory add two directories, Dev_Develop and Dev_Deploy (some developers like to use Dev_Source instead of Dev_Develop, I will leave the choice up to you).  So now your directory structure should look like this:


Once you do that you can go into Flash and create a new FLA called Main inside the Dev_Develop directory.

In your new FLA go to file>publish settings.  On the Formats tab change the swf and HTML paths to point to Dev_Deploy:


So now when you compile your movie it will compile into the Dev_Deploy directory.  This is very handy when you just want to hand your client a directory that has everything they need to deploy the site/project.

Next click on the Flash tab and click the ActionScript 2.0 Settings button. Click the plus (+) button to add a new Classpath and type in ./classes



This tells Flash to look in a local directory called classes for any custom Classes. 

Click okay and we now have our basic directory structure set up as well as our FLA.  Lets move on and write some custom Classes.

In your FLA use your textTool to create a static textField with text that reads Main.   Place it just off your stage as you will not want the user to see this when the movie compiles. 

Click on your text and hit F8 to create a new MovieClip.  Give it the name Main and an instance name of Main. 


In your gProject panel click the dropdown and click on new project and give it a name (mine is DevelopmentTutorial)


Now in the library click on the Main symbol so it is highlighted.  Then click on the gProject panel and hit the new Class icon:



The gProject Class creation dialog box pops up and here is where we can place the our new Class in a custom package. 

Let me digress for a minute and explain packages:  Packages may sound a bit scary at first but they are really nothing more then a custom directory structure so that custom Class filenames do not collide.  So say I have a custom Class called Customer.  Well in a huge application it is possible that I am using a custom Class that someone else built named Customer.  This would be bad because now I have two Classes with the same name and the Flash compiler will not know which one I want to use. 
If I place my custom Customer Class in a unique directory structure and then point Flash to it then there is no chance (well very slim chance anyway) that the other Customer class will have the same directory structure and therefore no collision will occur. 

So back to our Main Class creation dialog box.  In the box where I put the name gProject allows me to define my package there as well.  Not only that but gProject will create the directory structure for me.  Further, it will organize my library so that it mimics my package directory structure.  Cool hu?  Thanks, Grant Skinner.

So here is my dialog box now:



Notice the name box has com.rezn8.Main.  Commonly developers, in order to make their packages unique will put their site name backward.  I work for a company called REZN8 so I take the website name rezn8.com and put it backwards like this com.rezn8 and then put the name of my new Class, Main so I now have:
com.rezn8.Main

I check Open, Bound, Use Selected, Fill UI Elements and Full Path as Linkage

This creates the Main class for me, the packages (directories), it fills in any UI elements that may be in Main (currently there are none but soon there will be) and adds the linkage to the Main MovieClip of com.rezn8.Main.as.

Now we have our custom Class.  Pretty painless, right?  Lets now add a new MovieClip into Main and then make a custom class for it.

Okay, now that we have our Main Class lets put an object in it and then hook it up so Main can control it. 
I do realize than many developers like to add MovieClips dynamically to the stage and here I am adding them physically.  If you want to add them dynamically follow the process that I show you and then just delete them.  You can add them to the stage later dynamically and control them through Main as they will have their linkage (in case you don't know, linkage makes a MovieClip in the library assessable to ActionScript).

Okay, so drill into Main and use your text tool to create a static textField with the text value of TestObject, yeah, I know, very creative naming convention.

Now select TestObject and hit F8 to turn it into a symbol with a name of TestObject and an instance name of testObject (*** NO CAP T**).  Now select it in the library and click the new Class Icon in gProject.  Make the package name com.rezn8.ui.TestObject (ui is for User Interface). 



Make sure to select open, bound, etc, etc,

Now gProject makes our custom Class for us, builds the directory structure and organized our library.


Now, we want Main to control TestObject, right?  Well it cannot yet but if you go onto the last section I will show you how you can.  Excited?  Yeah, me too...

You will be happy to hear that gProject makes this so simple a child can do it (granted it would have to be one smart ars kid but I stand by my claim ;)

Okay, go into your library and select your Main MovieClip, go back to the gProject panel and select your Main.as class.  Then click the dropdown icon at the top and navigate to Utilities>Update UI Elements and click on it.

gProject looks at the Main MovieClip and sees that it has an instance of TestObject in it.  Further it sees that TestObject has a Class and then it imports, into Main.as the TestObject Class.  Take a look at Main.as and you will see this:

// ** AUTO-UI IMPORT STATEMENTS **
import com.rezn8.ui.TestObject;

// ** AUTO-UI ELEMENTS **
 private var testObject:TestObject;

So now you have access to TestObject.  So in the constructor put this:

private function configUI():Void {
  testObject._alpha = 50;
  
 }

When you run the movie you will see that TestObject now has an alpha of 50%.



Thats it we're done.