Flash actionscript basics

Why actionscript?

If you want to add interaction to your content and dynamics that can't or are hard to establish in design mode, you can use actionscript. Actionscript is the (object oriented) scripting language used inside Flash which offers a text command based input to control your content.

This page provides code snippets for actionscript 2.0

Instructions written below are based on Adobe Flash CS3 Professional.

Applying actionscript

Actions layer

Actions Panel

Output Panel

In Flash actionscript can be applied using two different working methods. The most accepted method is placing the actionscript code in a separate layer on the timeline. The most important reason to use this method is to keep an overview of all your actionscript code. The other option is to apply actionscript code directly onto an object. On this page this last method will only be used for single commands.

Actions layer

To get started create a separate actions layer on the timeline. In the example this layer is named "actions". The layer is always positioned on top and locked to prevent from placing any stage content in the layer.

Notice that an "a" is shown above the blank keyframe icon (in the first frame) of the actions layer.

Actions panel

To add actionscript code first select the keyframe you want to apply the actionscript to. In the example this is the first frame of the actions layer. Then open the actions panel via Window > Actions or by pressing F9.

Output panel

When code is echoed, using the "trace" command, the result is shown in the output panel. You can open the output panel via Window > Output or by pressing F2.

Actionscript code

Within actionscript code different parts of codes are distinguished like variables, functions and events. Each line of code that you want to execute is called a command. A command always ends with a semicolon " ; " :

x = 5 + 2;

If you want code not to be executed you turn it into a comment by adding " // " in front of the line for a single line of comment and for multiple lines of comment you start the comment block with " /* " and you end with " */ ". A comment is not a command!

// for a single line of comment
/*
   for multiple
   lines of comment
*/

variables

Actionscript variables

A variable is a "container" in which a value can be stored. This value can later be used in for instance the declaration of other variables or used in functions. There are different types of variables which can contain different types of values. To declare (/create) a variable you start a command with "var" followed by the name of the variable followed by a colon and the type of variable (like Number, String or Array) and after an equal sign " = " you assign the value. In this way you declare a variable and its type explicitly. A quick fix that also works is simply stating the name followed by the equal sign and the value. In the name of a variable only use letters (small and / or upper case), numbers, underscores " _ " and dashes " - ", no special characters. This also holds for functions, objects etc.

// type: number
var nAge:Number	   = 25;
var nLength:Number = 1.85;
 
// type: string
var sName:String = "your name";
 
// type: array
var sNames:Array = Array("first name", "second name", "third name");

After a value has been stored it can be used, for instance in a function. You can also overwrite a value in a variable by assigning it a new one. You only declare a variable once, so after you only need to refer to the name:

// declare variable
var nAge:Number	   = 25;
// use var in function
trace(nAge);
// result: 25
 
// overwrite value / store new value:
nAge = 62;
trace(nAge);
// result: 62

The function used in the example above is the trace() function and is explained below.

functions

A function is a (set of) commands that can be called (executed) multiple times. Actionscript contains many predefined functions. You can also create your own functions. Each function has the same structure:

function [functionName] ( [parameters] ) : [returnValue] { [commands] };

A function is declared by using the format above. A function name (optional) has to be unique to be able to call it elsewhere in your code. Parameters (optional) are values you can provide when calling a function so that these can be used within the function. When the function has to return a value you enter the name after ":". The return value (optional) is Void (empty) by default. The (set of) commands that have to be executed when calling the function are placed between curly brackets "{" and "}" .

Example:

// declare variables
var nValue1:Number = 25;
var nValue2:Number = 5;
var nValue3:Number = 100;
 
 
// FUNCTION TO CALCULATE SUM
// declare function:
function calcSum(nPar1:Number, nPar2:Number){
 return nPar1 + nPar2;
};
 
// call function:
var nSum = calcSum(nValue1, nValue2);
// result nSum: 30
 
// call function again:
nSum = calcSum(nValue1, nValue3);
// result nSum: 125
 
// FUNCTION TO CALCULATE PRODUCT
// declare function:
function calcProd(nPar1:Number, nPar2:Number){
 return nPar1 * nPar2;
};
 
// call function:
var nProd = calcProd(nValue1, nValue2);
// result nProd: 125
 
// call function again:
nProd = calcProd(nValue1, nValue3);
// result nProd: 2500
 
// call function again:
nProd = calcProd(nProd, 0.2);
// result nProd: 500

A very useful in predefined function in actionscript is trace() which allows you to echo / print values in the output panel:

var myVariable = "check";
trace(myVariable);
// result: check (in output panel)
 
trace("output this");
// result: output this

Predefined timeline control functions are:

play();
stop();
gotoAndPlay( [frameNumber] );
gotoAndStop( [frameNumber] );

events

To control when functions or other commands are called or executed predefined events are available in actionscript. When an event is taking place / when a handler is invoked the function is executed.

Example (onRelease event):

// declare variables:
var nStep  = 5;
var nTotal = 0;
 
// function when a button on stage with the name 'myButton' is released:
myButton.onRelease = function(){
  // add the value of nStep to nTotal:
  nTotal += nStep;
  trace(nTotal);
};
 
// before release: nTotal =  0
// 1st release:    nTotal =  5
// 2nd release:    nTotal = 10
// etc.

Useful event handlers:

target.onPress
target.onRelease
target.onReleaseOutside
target.onEnterFrame

Before an event the target object is specified. Obejcts (and attributes) are explained below.

Objects and Attributes

[item has yet to be written]

// Move target when pressing the control:
mcControl.onRelease = function(){
  mcTarget._x += 5;
}

Tutorials

• Building a web interface with actionscript
• Controlling an animation with actionscript