Search Box

Google
 

Thursday, September 13, 2007

AS 3 Migration ..... Part 2

As each day is progressing with AS-3, my life has become really interesting nowadays. Today we will be seeing the next step's we will be taking in learning more about AS-3 migration. To do that we will start with a small hello world application. By this way we will learn almost all  of the basic aspects of Flash/AS 3.0 and by the way to do this exercise you need to have Flash CS3 installed in your machine.

Before starting with the new HelloWorld application, we have a small home work to be done initially. Create a new folder in a location and with name of your convenience and inside the folder you created just now, create a new folder named "Hello World". Once that is done then navigate inside the created folder and create a subfolder named "com". Inside "com" create another subfolder named "learn". Don't get angry with me but for the one final time create two folders named "as3" and "Main" as subfolder's inside the last created folder "learn".

Now if look at  your current screen it should look like the one below(except for the three red circles which was made by me using mspaint to show the path and the two subfolders created for reference).

 

Thats it for now and run the Flash IDE, after it has initialized completely do select "File" -> "New". From the options select "Flash File(ActionScript 3.0)" and click "OK". The screenshot is attached below for your reference.

 

After creating the Actionscript 3.0  type File click on the stage and create two objects as follows

1) Dynamic TextField  - instance name "$dyn".

2) Simple Button - instance name "$btn" .

 

Now click an stage area and open the properties panel(shortcut ctrl+f3). Now the property panel is open type com.learn.Main.Main in the Document Class field. See screenshot below.

 

 

 

Do not try to compile for we have to add the class files now. Still you wish to know what could have changed in the error messages go ahead and try it.

After all the above steps are completed hit Ctrl+N or create a new ActionScript File from the New Document window just like the way you created a new flash file sometime before but select ActionScript File (which would be probably the sixth item). Upon successfully opening an empty ActionScript file copy and paste the code below. see screenshots first.

 

 

package com.learn.Main
{
    import flash.display.MovieClip;
    import flash.text.TextField;
    import flash.events.MouseEvent;
    import flash.display.SimpleButton;
    import com.learn.as3.HelloWorld;
    public class Main extends MovieClip
    {
        private var hWorld:HelloWorld;
        public function Main()
        {
            init();
        }
        private function init():void
        {
            trace('I N I T');
            hWorld = new HelloWorld();
            $dyn.text = hWorld.sayHello();
            $btn.addEventListener(MouseEvent.CLICK,releaseAction);
        }
        private function releaseAction(e:MouseEvent):void
        {
            trace('onRelease : '+e.target.name);
        }

   }
}

Finished pasting the above code ???? Now save it in the name "Main" under the folder com->learn->Main->Main.as. What we have done now is an ActionScript class has been associated with the FlashDocument itself. have you ever remembered this being possible in the previous versions ? what we have been doing earlier was that we wrote an class file and associated the main timeline as an parameter to AS2.0 class file. But now the Flash File itself can be associated with an Custom Class File. isn't this great ?

We are almost 70% done for the tutorial to be completed. The one final thing you have to do is create another ActionScript Class just like the way you created Main.as and paste the below code in that. Save the file under the folder com->learn->as3 with the name HelloWorld.as.

 

package com.learn.as3
{
    public class HelloWorld
    {
        public function HelloWorld()
        {
        }
        public function sayHello():String
        {
            return "Hello World";
        }
    }
}

Done pasting the second code? Now get back to the fla file and save it under the folder Hello World with the file named as "HelloWorld.fla". Now there should be a flash source file "HelloWorld.fla"(you will see file name extension ".fla" only if you have enabled show extensions setting in windows) and a folder (which we created initially) named "com" inside the folder HelloWorld. To avoid confusion and for having a clarity see screenshot below.


Now that everything is in place and the only step remaining is to compile the flash file we have created. Doing this will generate the swf file named "HelloWorld.swf " without any errors if you had copied and pasted the code and saved them with the appropriate names and at correct location specified above. The output of the swf  is attached as a screenshot below.

But still if you wish to know what happens when the button is clicked you need to either run it from the Flash IDE or have some good logger tools like afterthought or Flash Tracer plugin for firefox.

Thats it for now and we will in less time see what the chunk of code written for this tutorial does.

 

Regards,

Ashok Srinivasan.

4 comments:

Anonymous said...

Ashok:

Thanks for writing the hello world tutorial, it helped me lot to start the writing AS 3.0. if possible write more tutorials.

Ashok Srinivasan said...

Thank you anonymous, feeling good about your comments. But it would be great if you can post the comments in your name rather than the name "Anonymous".

Prakashan said...

Hi Ashok,

I think this is going to be a great place for learning AS3(especialliy to AS3 biggners). So please do more tutorial, love to learn from you. Also the way of teaching is very cool. (with ScreenShots :))

Have a doubt... I am not a techi person. so please can you explain more about "package" and why you writing in "Main.as"... and usage?

And why you import all this code?
" import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.display.SimpleButton;
import com.learn.as3.HelloWorld;

"

Thanks
Prakashan

Ashok Srinivasan said...

Thank you prakashan for your nice and optimistic comments.

Regarding your first question " why and what are package"

Suppose a project demands two classes with the same name then you use this concept of package. I can try to explain with a small example.

Assume you neighbor's name is also Prakshan but he has different attributes from you like age,height,color, weight etc., and moreover you both live in the same location but different house separated by a plot number. Now when a courier package arrives in the name of "Prakashan". Who receives this is identified by the address after the name of the recipient. So this address can be assumed as the concept of Package name. Though there might be two classes with the same name but they originate from two different addresses and does not resolve in conflicts. And hence the compiler (post master in our example) will use the package name /address to deliver the package. Please note this example cannot be taken as an exact one for this depends upon the context based on which you assume. Please feel free to ask me if you still need any clarifications.

Regarding your second clarification, the reason i have included those packages are that now in AS3 every package needs to be imported for to be used in the AS documents we write. For example in AS2 Movieclip was a Top level class and we never had to import the class seperately. But whereas if we had wanted to create a component dynamically then we had to import it. Same as in AS2 holding for importing components classes, in AS3 even a MovieClip package needs to be imported before being used in the user based class.

Hope that your queries have been resolved, if not please feel free to contact me.

Regards,

Ashok Srinivasan.