ActionScript 3.0 - How to move an image over the canvas

This will be the first post of a series.
In this post we look at how to move an imported image over the stage.

1. You'll need an image that will be used to move over the canvas. Could be any image you prefer really. There are plenty to be found on the internet.
2. Start a new Actionscript 3.0 document in Flash CS5
3. Import the image into your stage or library. File > Import > Import To Stage or CTRL+R
4. Right-click the image and convert it to a symbol

A MovieClip will be added to your library and the item is ready to be instantiated using code at runtime.

Let's head over to the actions pane of our stage and write the necessary code to move the icon inside the canvas pressing the arrow keys UP-DOWN-LEFT & RIGHT.

First lines of code :

import flash.display.MovieClip;

//Declare a UserIcon of the type MovieClip

var userIcon:MovieClip;

//Instantiate the MovieClip

userIcon = new UserIcon;

//Add it to the DisplayList.

//On startup the imagelist it's children get added to the stage

stage.addChild(userIcon);

Launch the application. The picture should appear in the left-top corner of the canvas.

Make the image move code :

We need an Eventlistener who will monitor if a keyboard button is pressed.

We need a function who will determine what key is pressed and who acts accordingly.

//First create the Eventlistener which is a KeyboardEvent

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);

//Now we are monitoring keyboard button keydown events but we

//still have to determine what key is pressed and then act accordingly

//We will also need to set the boundary of the stage to make sure the picture

//Doesn't dissapear when we move it out of the canvas boundaries

function keyDown(e: KeyboardEvent):void{

       //Use the keycode of the eventlistener to determine what key got pressed.

       switch(e.keyCode)

       {

             //In case the keyboard button UP is pressed

             case Keyboard.UP:

                    if(userIcon.y > 0)

                           userIcon.y = userIcon.y - 5;

                    break;

             //In case the keyboard button DOWN is pressed

             case Keyboard.DOWN:

                    if(userIcon.y +5 < stage.stageHeight -userIcon.height)

                           userIcon.y = userIcon.y + 5;

                    break;

             //In case the keyboard button LEFT is pressed

             case Keyboard.LEFT:

                    if(userIcon.x > 0)

                           userIcon.x = userIcon.x - 5;

                    break;

             //In case the keyboard button RIGHT is pressed

                    case Keyboard.RIGHT:

                    if(userIcon.x +5 < stage.stageWidth -userIcon.width)

                           userIcon.x = userIcon.x + 5;

                    break;

                    trace(e.keyCode);

       }

}

Full Project Download

Next post we'll add more features! 

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.