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.

Thursday, October 04, 2007

AS3 Migration - XML PARSING.

Something is better than nothing. This is a thought that runs into the mind of a Flash Developer working on a project that requires a lot of XML based data handling. But now that is not the case anymore, with the new AS 3.0 comes a powerful XML parser that implements E4X standards. With this standard being implemented in AS 3.0 now we don't have to go through the pain of parsing a known XML format anymore. What I mean is  no more heavy loops and inner loops to access a childnode at a deeper levels. But still do not worry for the legacy XML AS 2.0 classes have been moved to flash.xml package and retained. So if you still want to use the old style XML class still you can have it from this package. My sincere recommendation would be to get used to the new one and discard the old fashion of parsing the XML.

When I said E4X has been implemented what do I exactly mean by that ? In ActionScripting 2.0 while dealing with XML we had to refer to children nodes and their nodes values using index positions (numbers) and never had a way to find an element in a document by using the name value. Meaning we were not able to search XML documents using name values but had to use integers as the index position for locating XML nodes. This resulted in cumbersome loops and logics to access a particular childnode that was lying deep into the rabbit hole.

 

For example consider the below family tree represented in XML.

<GrandFather>
    <children>
       <Ram>
          <children>
              <Andrew/>
              <John/>
              <Josephine age=21 isSingle ="single" sex="girl" beautiful="true"/>

           </children>
      </Ram>
      <Rahim>
         <children>
             <David/>
             <Celine/>
             <Paul/>
             <Mary age=24 isSingle = "married" sex="girl" beautiful="true"/>
         </children>
     </Rahim>
  </children>

</GrandFather>;

 

So the XML is all about some Grandfather's family. The children node clearly shows the number of sons he had under the node name children. Now further penetrating into his children nodes we understand more of his children's family and about their offspring's. Ok now let's say I am interested about the family of his first son "Ram". And to enquire about Ram's family details present in the XML using AS 2.0 would be done as shown below.

 

AS 2.0 ::::::::::::

var xml:XML = new XML('<GrandFather>

                             <children>

                                 <Ram>

                                    <children>

                                         <Andrew/>

                                         <John/>

                                         <Josephine age=21 isSingle = "single" sex="girl" beautiful="true"/>

                                   </children>

                                 </Ram>

                                 <Rahim>

                                    <children>

                                       <David/>

                                       <Celine/>

                                       <Paul/>

                                       <Mary age=21 isSingle = "married" sex="girl" beautiful="true"/>

                                   </children>

                                 </Rahim>

                             </children>

                         </GrandFather>');


xml.ignoreWhite = true;


trace(xml.firstChild.firstChild.firstChild.firstChild.childNodes
);

 

So in order to know about Ram's family we have to start from his grandpa as a reference and go all the way using the firstChild property (or childNodes[0]) for four levels and finally ask for the childNodes property to know about Ram's Children.

Now seeing that Ram's third child is a girl whose name is Josephine (nice name isn't it ?) with age being 21 and also beautiful property being true, I would like to know if she is single and hence see if I can marry her(her attribute claims that she is beautiful). Let's see how I can message her in AS 2.0 for marrying her if her status is single, for I don't want to be beaten by her husband incase she is married already.

 

var josephine:XMLNode = xml.firstChild.firstChild.firstChild.firstChild.childNodes[2];

if(josephine.attributes.isSingle == 'single')
{
    trace('Josephine will you marry me ?');
}
else
{
    trace('Convey my regards to your husband');
}

 

Without bothering about my what happened to my proposal let's get back to the tutorial and see how the above process can be done in AS 3.0.

 

AS 3.0 :::::::::::: 

var family:XML = <GrandFather>
                    <children>
                        <Ram>
                            <children>
                                <Andrew/>
                                <John/>
                                <Josephine age="21" isSingle="single" sex="girl" beautiful="true" />

                             </children>
                        </Ram>
                        <Rahim>
                            <children>
                                <David/>
                                <Celine/>
                                <Paul/>
                                <Mary/>
                            </children>
                        </Rahim>
                    </children>
                </GrandFather>;

 

trace(family.descendants('children')[1].children());

var josephine:XMLList = family.descendants('Josephine');

if(josephine.attribute('isSingle') == 'single')
{
    trace('Josephine will you marry me ?');
}
else
{
    trace('Convey my regards to your husband');
}

 

Don't you think this is much easier than the previous one? The concept reference by name is actually good. Still one can access the childnodes using index positions too but the thing is it is more easy to traverse through a XML using String based search words rather than indexes. 

Did you see the vast leap in XML processing ? I would personally say that is really a great thing Adobe has introduced into AS 3.0. For I see no more nightmares with monster loops having big i,j,k..... claws to fight through a XML and its childNodes.

Hope the above tutorial on XML was useful. More is yet to come.

 

Regards,

Ashok Srinivasan.