01 Simple movement in Actionscript

Creating movement is one of the most essential parts of creating interactive and interesting In this lesson we’ll explore what makes movement happen in terms of Actionscript programming.

Object Properties

To begin with, all objects used in a game have object properties. This includes simple things like horizontal and vertical position, visibility, rotation, and scale, as well as slightly more complex properties like color and opacity.

Horizontal and vertical position for an object thisBox are written in code as thisBox.x and thisBox.y. These properties are controlled through numbers as follows:

thisBox.x = 250;
thisBox.y = 200;

In this example the object will show up at (250,200). It’s worth noting that the top left corner of our Flash Stage is (0,0). That means that while x increases to the right, y increases going down, which is upside down for the expectations of many people.

Variables

We can also create variables to apply to this situation. Variables are terms that hold values, objects, text, and other static or dynamic terms. Often variables are created/defined in the top of the code. this makes them easy to find and change as needed during development of a program.

Here we’ll create variables for the x and y position of the box and apply them using the above code. This will set the position of the box every time the code is run.

var startX:Number = 200;
var startY:Number = 200;
thisBox.x = startX;
thisBox.y = startY;

Note the syntax used in defining the variable:

  • Definition of a variable starts with the term var
  • Next in line we have the name of the variable, which must be unique, and is followed by the type of variable (more on variable types later. varName:varType
  • Finally, there is an assignment operator, = followed by the value being assigned to the variable.
  • It is important to note that variable names are very much case specific and consist of a single term. That is, capitals and lower case make crucial differences, and breaking a term with a space starts a new term:
    • myNumber is different from mynumber is different from MyNumber.
    • My Number is actually two terms if used as a variable

In the above examples the lines of code are executed only once, upon loading in the browser window or Flash Player. Code that is executed a single time cannot create movement, since that would mean changing the values as the script is run repeatedly.

Listeners and Functions

So how do we create movement? This is where we introduce a Listener and a Function. A Listener is created that pays attention to specific events in the code:

  • stage.addEventListener(Event.ENTER_FRAME,moveIt);  //this is attached to the stage and pays attention to the passage of time. Since time in Flash is measured in terms of frames (12 or 24 frames per second). we pay attention to Event.ENTER_FRAME, which is followed by the name of a function called. This means that if the Flash movie is set to play at 24 frames per second, the moveIt function will be executed 24 times per second. We’ll explore other listeners later as needed.
  • A function is simply any number of lines that may be used repeatedly.  Whether the function contains two lines of instructions or one hundred lines, executing the instructions  by calling  the name of the function is always faster and more efficient than writing the lines of code over  and over.
  • The syntax for  function is as follows:
    • The term function lets the compiler know that we’re defining a function.
    • Next is the name of the function, which, like a variable, is case specific and is a single term, as in moveThing in the example below.
    • After the name of the function we have parentheses, in which any expected input is defined. If empty, there  is no input.
    • After the input we have a colon (:) followed by any expected output. If no output is expected we see the term null, as shown here.
    • Braces contain instructions to be executed as  part of this function.
function moveThing(): null { 
boxyThing.x +=10;
}

An example of these concepts is demonstrated in this Flash movie:

Get Adobe Flash player

 Now You Try!