Search Box


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.display.SimpleButton;
    import com.learn.as3.HelloWorld;
    public class Main extends MovieClip
        private var hWorld:HelloWorld;
        public function Main()
        private function init():void
            trace('I N I T');
            hWorld = new HelloWorld();
            $dyn.text = hWorld.sayHello();
        private function releaseAction(e:MouseEvent):void
            trace('onRelease : ';


Finished pasting the above code ???? Now save it in the name "Main" under the folder com->learn->Main-> 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 and paste the below code in that. Save the file under the folder com->learn->as3 with the name


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.



Ashok Srinivasan.

Tuesday, September 11, 2007

AS3 Migration......


Hi folks,
it's been a long time once again. Latest news at my end is that i have started working on AS3 and i need to say at this point that it really great and cool. With the new AVM2 (adobe virtual machine version 2) powering players above 9 one can really create wonders double/triple the times over the previous versions.
Initially i was a bit skeptical about getting into AS3 for my current projects i am working on are so Himalayan such that it would take a lot of time and energy to really convert it to support flash player9. Moreover i felt it was a great paradigm shift for someone like me for AS3 migration. Guru's out there have really started rocking with AS3, while a lot of children like me sitting here keep wondering about what's the deal in the new version of flash. I was also feeling that i am not doing my homework on learning AS3 for my current projects did not spare me the time for that but luckily and also daringly i thought of starting my new project based on AS3. Though it was a great risk but still was ready to face it.
Below i have mentioned a few areas where great changes have happened.

The new Class style :::::

Whenever we wanted to have more than one class file to share the same name serving different purpose but could not have it. In As3 they have introduced the concept of package naming culture as used in JAVA(but can you tell me what in Actionscript is not like JAVA?). This serves as a way to differentiate two classes sharing the same name but serving different purposes. Look below for an example.

An example of a AS3 class file

package com.mycompany.myprojectname.purposename;
     import requiredclasses.*;
     public class MyClass
            public function MyClass()

            public function doSomething():void






And now after the class is being written we can as usual import the package in the timeline and instantiate the variable the usual way as we do in AS2.0

Example ::::::

import com.mycompany.myprojectname.purposename.MyClass;

var mclass:MyClass =  new MyClass();



And now as we have now seen how the classes have changed to a class way we will now look at what has happened to our onPress, onRelease, onReleaseOutside etc.,


Handling Events ::::::

Before dwelling deep into the details we will now look at how we assigned mouse events to movieclips and buttons the AS-2.0 way.


       Example AS-2.0 ::::

       var mc:MovieClip = this.createEmptyMovieClip("mc",0);

       mc.onPress = function()


        trace("Hey i think a jerk pressed me");

        //output shows this message when pressed



 Example AS-3.0 ::::::

First create a rectangle and convert it to movieclip with the library name MyMc. Below are the screenshot's for your reference.



import flash.display.MovieClip;


var mc:MyMc = new MyMc();

function myMcClick(e:MouseEvent):void


   trace("Hey some jerk pressed me");





So this is the way we add actions to the new version of Flash.


Depth Management ::::::

Yeah this is the part i loved the most with AS-3.0. From the above example's code for AS-2.0 and 3.0 you would have noticed that there are some differences in the way we work with adding and assigning actions to MovieClips. The thing is that in the new version we have been spared the job of assigning the depth. You just need to use the keyword "addChild" which is a method in any MovieClip to add a childMovieClip.

Example ::::

//to create an MovieClip from the library.

var myMc:MyMc = new MyMc();



So how do we remove a MovieClip we added to the stage ????

Example :::::

//to create an EmptyMovieClip from the library.

var myMc:MyMc = new MyMc(); = ''foo';


//To remove this movieclip you have created.

this.removeChildAt(0);//where the number is the index.






Many more promising new things have come in the new version and i am at all loss of words to express it completely now. Better keep visiting my blog for there will be more updates,posts and learning's with what's new in AS-3.0.