Search Box

Google
 

Wednesday, October 24, 2007

Organizing your ActionScript code.

Well when it comes to actionscript projects, one stops to think and wonder how do I start ? Wow that's a very elementary question but also it is very important and fundamental.

One approach is to open flash IDE and start writing the code like hell and pride yourself with the speed with which you complete, and end up being the most most happiest person in this whole world. Days pass by and one day something new to be added turns up for the happiest project you did once before only to make you feel annoyed and irritated at the end of the day. Remember writing code would be like getting married to a girl due to infatuation where you enjoy the initial phase but regret later. Whereas on the contrary if things had been organized and are in the right places with proper framework will result in something that can be better maintained and a good rapport will always exist between you and your code(wife). Forget about maintaining it yourself but anyone who takes it later will load you with lot's of blessings (in real life scenario this does not apply to my example).

Have you decided about your attitude towards writing code ? If yes please proceed further, else you always have time to take a decision and make a choice out of yourself.

Whatever I am going to explain hereafter will strongly pertain to AS3 and still will be applicable to AS2 also. I will not be explaining about frameworks or design patterns for I myself lack a lot in that area and lot to be learned is still pending. Instead what you will see in this tutorial is some of the techniques I have been following till now in my ActionScript career.

 

 

The folder Architecture :::::::::::::::::::

Before you start with a project ensure to maintain proper folder architecture. A good developer will always do this. Ensure that you have the following folders for sure in your project folder.

 

com - Folder consisting of your class files.

src - Folder containing your source FLA file(s).

bin - Contains the output file (subfolder's Release || Debug).

assets - Contains the graphic assets required for designing your flash project.

includes (If as2 ) - Folder containing the necessary include files (Generally there is only main.as).

 

Folder "com" explained

Usually this folder contains a folder named "yourcompany" which in turn will contain subfolder named "yourprojectname" and subfolders with the following names.

 

main - The main controlling class file Main.as is present here.

display - Class files used for linking to display objects or referenced via linkage id are created here.

components - Class files used for your custom components are created here. (example : CustomScrollbar.as etc., )

utils - Class files that are written to do some utility operations (example : MyMath.as, Logging.as etc.,)

 

With this you will now be able to sort out and will be able to design your application framework in an even better way.

 

Some example classes are written below for your better understanding.

 

Display class example :

 

package com.yourcompany.yourprojectname.display

{

public class YourClassName extends MovieClip
{
    public function YourClassName ()
    {


    }
}

}

Component class example :

package com.yourcompany.yourprojectname.component

{

public class YourComponentName extends MovieClip
{
    public function YourComponentName()
    {


    }
}

}

Main class example :

This differs a little bit based on the version you are currently targeting. The immediate below one is an example of AS3 and the next is for AS2 

 

AS3:::::::::::::::

package com.yourcompany.yourprojectname.main

{

public class Main extends MovieClip

{
    public function Main()
    {


    }
}

}

 

AS2:::::::::::::::

class Main

{

    private var mainmovie:MovieClip;

  
    public function Main(targetScope:MovieClip)
    {

         mainMovie = targetScope;

    }

}

 

Utils class example :

package com.yourcompany.yourprojectname.utils

{

public class YourUtilClassName

{
    public function YourUtilClassName()
    {


    }
}

}

Fine I accept the way you have presented and will attempt to try this. But tell me how do I proceed after this ?

That was a good question you asked now, get back to the folder architecture mentioned above for a flash project. Supposing you are using AS3 then you just need to set the Main.as as the document's class with the path com.yourcompany.yourprojectname.main.Main.as. Once again if you are using AS2 then comes the role of the "includes" folder where you write a small main.as and place it in this folder. The content of the main.as file would be something like as shown below.

 

import com.yourcompany.yourprojectname.main.Main;

var main:Main = new Main(this);

Save this file and include it in the first frame of the main main using :

#include "includes/main.as"

 

Now try compiling the file and lo the compile has failed ! But why ? I don't want to realize now that after all this amount of reading this has resulted in an error. Please don't tell me that.

 

Patience my friend I did not want you to anticipate errors and the reason for this is just wanted you to wonder and know the concept of Document Class Path setting. If you remember correctly we have put the fla inside a folder named "src" and the files are above one level from the path of the flash source file. So when the movie is compiled it starts to look for the class files and the included file and hence it panics for it expects to find the folder "includes" and "com" inside "src" itself. To clarify all about this we will now look at Publish Settings.

 

Publish Settings ::::::::::::::::::::::

 

Document Class Path :

Since we wanted to maintain the architecture of the folder intact we have kept the files in their respective directories. So in order to compile the class files along with the included "as" files we will add an new path using the PLUS button and enter ".." to Document Class Path in the Publish Settings for swf. Screenshot available for more clarification.

 

 

Publish Location Setting. Since the outputs generally go to the bin folder decide if the version is a release version or the debugger version and point them to the respective folders (release/debug) inside bin folder.

 

That's all is needed to be known for a effective project maintenance and the rest lies upon your rational and creative intelligence. See you all in a short time and till then bye.

 

Regards,

Ashok Srinivasan.