Thursday, January 26, 2012

Flash CS5 & Learning ActionScript 3.0



Flash CS5 and programming in actionscript is one of the courses have to complete this year at school. I won’t be writing any complex code or examples here as I have to start from scratch myself as well.

This isn’t a Flash CS5 course either and focus will mainly be on how to use action script with Flash CS5.
I’ll be using documentation received at school which explains the basics in Flash CS5 and a “Learning Actionscript 3.0” book from O’Reilly 2nd edition. While completing the chapters I’ll use information from the internet, as reference and guide, as well.

First of all you have to understand that there are 2 ways to execute your Actionscript code inside our Flash document, either by writing code inside the Frame Actions or by creating a class which you tie to the flash document or objects.

Second, we’ll be adding visuals to a to a display list used inside you Flash movie and those will appear on our Canvas if declared, instantiated and configured correctly.

I’ll demonstrate this by using 2 very simple examples.

Example 1 : Writing code inside the Actions Frame.

To access the Actions frame => Window/Actions or press F9.
Inside the Frame write the following code :

//First Application using a timeline script.
//This import should appear automatically
//once you use the TextField Class
import flash.text.TextField;
//Declare and instantiate a new TextField data type.
var txtFld : TextField = new TextField();
//Add the TextField to the Display List.
addChild(txtFld);
//Assign text to the text-property of the TextField using default values.
txtFld.text = "My First Application in Flash CS5";
//Make the TextField wider so we see the complete message.
txtFld.width = 250;

If you run the code CTRL+ENTER you should see the text value, assigned to the TextBlock, appear in the upper-left corner of the scene.

Example 2 : Create a class and assign it to the document.

To create a new class => File/New or CTRL+N and select Actionscript 3.0 Class. Store the class somewhere you’ll find it back easily. Open the properties pane of your flash document and write your class name inside the Class TextBox. Be sure to place both files (flash and class) at the same location.

Because the class is tied to the flash document (which in essence is an object) the default constructor of the class will be executed when you run your flash document.

Inside the class (.as)  write the following code :

package 
{
    //Imports
    import flash.text.TextField;
    import flash.display.MovieClip;
   
    public class ExOne extends MovieClip
    {
        public function ExOne()
        {
            // constructor code
            //Declare and instantiate a string variable
            var str:String = "Flash Actionscript";

            //Generates a random number between 0 and 1 and executes when less then           0.5
            if(Math.random() < 0.5)
            {
                //Declare and instantiate a new TextField
                var txtField:TextField = new TextField();
                //Add the TextField to the list of Visuals
                addChild(txtField);   
                //Fill the text value of our visual with our string variable
                txtField.text = str;
            }
            else
            {
                //For loop. Output your string 2 times
                for(var i:int = 0; i<2;i++)
                {
                    trace(str);
                }
            }
        }
    }
}

First we generate a random number ,using the Actionscript Random() function. Then we check whether the result ,which should be a number between 0 and 1, is greater or less then 0.5.

If it’s smaller  we create a TextField add it to the Flash visual List and change the TextBlock textproperty to "My First Application in Flash CS5". The TextBlock should appear in the left upper corner,on the scene, when you launch your flash document (CTRL+ENTER) displaying the assigned text value.

If it’s greater then 0.5 we trace our string value to our Output Pane 2 times.

The above code uses an If-statement and a For-loop to iterate through the code it contains.

No comments:

Post a Comment