ActionScript Basics

ActionScript is the programming language of Adobe Flash.
The code you produce can be very difficult, but it can also be very simple. You can choose to keep it simple, or go for it and write very complex programs.
More knowledge means more options/freedom (and more effort to gain the knowledge).

If you start programming, you face two problems: the use of the language and the math involved.
After awhile, the commands, and the way you combine them, become more and more routine.
First concentrate on realizing a project, and once you get the idea of how it could be done, concentrate on the most efficient way to do it.
Computer graphics involves the most complex types of calculations you can make; more skill means more options/freedom, less lines of code and more flexible programs.

The very basics of ActionScript will be explained in the next text.

Like all programming languages, ActionScript has many built-in commands.
A command to print a message, for example. In ActionScript, 'trace' can be used. The command 'trace' needs a so-called argument or parameter. The argument is the text you want to print to the output window in the Adobe Flash environment.
If you use the command 'trace' without specifying the text you want to print, an error message - wrong number of parameters; trace requires exactly 1 - will show up.

The trace command can only function if a parameter is specified.
The prevent an error message, the next line of code can be used to print a text to the output window.

This works fine because the trace command is used the way the creators of ActionScript had in mind.
Besides the trace command, many other commands are available. To get an impression, take a look at ActionScript Dictionary. Don't panic about the amount of commands. You don't have to learn them by heart to use them. After a while you probably use some of them very frequently, and others almost never.

Now that you know the first command, the question may rise as to where to put this line of ActionScript code inside your Adobe Flash animation.

Select the first frame of your animation and choose 'Window' > 'Action' in the menu, or press F9. The ActionScript window will appear.
Type the trace command and press CTRL + ENTER to preview the Adobe Flash animation. The message 'hello world!' appears in the output window.

The trace command can be used to track problems if your ActionScript code becomes more complex.
By using trace to output the value of variables (this will be explained later) you can keep track of what's going on in the memory of your computer. Misspell the name of a variable, for example, and your ActionScript code may not working properly anymore.
Finding the cause of a problem - the so called 'bug', or plural 'bugs' - will take up most of your time.

Keep your code clean and readable.
This can be done by adding 'comment' to your code. If you have to change your program after some time, comment can help you more easily find the pieces of code and their purpose.

Comment can be added with '/* */' or '//'.
In case the comment is just one line, use '// comment' or '/* comment */'.

If the comment has more lines, use '/* comment */', or, per line, '/* comment' */' or '// comment'.

Like all programming language, ActionScript uses so called variables to store numbers, characters, words, and so on.
A variable has a name and a value. The name has to be unique, so that you won't reference to the same variable that has two different values.

The rules for the name of a variable are quite simple. The name should start with a letter or underscore, followed by a combination of letters (upper- and lowercase), underscores and/or digits (0-9); spaces are not allowed.
Reserved names are also not allowed; a variable cannot have the same name as a command used by the programming language itself.

ActionScript is case-sensitive. This means that a variable with the name 'Number_of_options' is not the same as 'number_of_options' (the first variable starts with a capital 'N', the second variable with a lowercase 'n').

A variable name is preceded by the word 'var', the abbreviation of 'variable'.
In ActionScript, you have to specify the type of variable after the name of the variable. In this example, 'String' is used since the variable is a string: a combination of characters.
In the last part of the ActionScript code, the string "drububu" is stored in the variable 'name', which is a string.

You have to tell the computer explicitly which value a variable contains. If you don't specify the value of a variable, the computer uses a default value.

In the next example, the value of variable 'name' is not specified. The trace command is used to print the value of variable 'name' to the output window.
The trace command has two parts. The first part is "name : "; this is a string and will be printed to the output window. The second part is "+name". 'name' refers to the variable 'name'. The plus sign is used to paste the string "name : " to the variable 'name'.

If you run the Adobe Flash animation (press CTRL + ENTER), 'name : undefined' will appear in the output window; 'undefined' is the default value of variables in Adobe Flash.
In the next lines of ActionScript code, the variable 'name' becomes equal to "drububu". If you run the Adobe Flash animation (press CTRL + ENTER), 'name : drububu' will appear in the output window.

In Adobe Flash several types of variables can be used.
A number is a type of variable, as is a string.

Numbers come in different types: these can be divided into floating point-numbers or integers.
Depending on the computer languages used, numbers can have all kinds of different flavors, besides just floating points and integers.

Floating point numbers are numbers like 3.245, 245.456, -15.467 and so on.
Integers or natural numbers are numbers like 132, 356, -566 and so on.
Floating point numbers and integers can be used in ActionScript as the value for variables of the type 'Number'.

To convert - or typecast - a floating point into an integer, the ActionScript command 'int' is used.
'Int' is the abbreviation for integer.

Press CTRL + ENTER to run the Adobe Flash animation, and 'value : 20.24 integer value : 20' will appear in the output window.

A movieclip with pixel art or a textfield with a pixel font, for example, should be positioned on an integer position; otherwise the movieclip or textfield will be anti-aliased.
If a variable is used to position a movielclip with pixel art, or a textfield with a pixel font, a typecast to an int can be used to preserve the crisp quality of the movieclip's pixel art or pixel font.

Along with the integer position of the textfield, the size of the pixel font is also important and should be equal to, or a multiple of, the purpose-made size.
If you respect these two rules, your pixel font will look crisp.

Besides a type, variables have a 'scope' as well, which means that the value of a variable can be read or changed within specific parts of your program.
The scope of a variable can be global or local.
A global variable is accessible in the whole program, a local variable is only accessible within a function.

A function is a collection of ActionScript code that performs a specific task.
The number of lines in a function can range from zero to many, depending on the task the function has to perform.

The name of a function is preceded by the word 'function', followed by the function name and ending with '() : Void'.
'Void' is used to indicate that the function does not return a variable to the function call.

The ActionScript code inside a function is only executed when the function gets a function call (last line of code in the example below).

Recall variables have a scope: 'local' or 'global'. Variables inside a function have a local scope, and exist only inside the function.
The number of lines in a function are most of the time limited, so short variable names like 'a', 'b', 'c', and so on, can be used to reduce typing.
These short variable names can be used again in other functions without interfering with each other.
In general, global variables have longer and more descriptive names like 'number_of_particles'. A global variable can be read or changed within every function in the program, so more effort is needed to choose a unique and more descriptive name.

The next function adds the value of two local variables 'a' and 'b' and stores the result in variable 'c'. All variables involved are numbers.
The trace command is used to print the result of the addition to the output window.

To make the function 'add' in the previous example more flexible, so that other values can be added as well, arguments are added.
Two variables are included in the function call and sent to the function. The function 'add' is extended with the variables 'a' and 'b', both numbers (see example below).
In the function call - add(2,4); - at the last line of the ActionScript, 2 and 4 are sent to the function 'add'. The value '2' is copied inside variable 'a', and '4' is copied to variable 'b'. 'a' and 'b' have local scope and can be used inside the function.

The variable 'c' is added to the function and the result of adding 2 ('a') and 4 ('b') is stored in this variable. When you run the animation, the trace command prints the value of variable c to the output window.

By using arguments, a function becomes more flexible; the same tasks - in this case adding - can be done again and again with the same function, but with different values.

The previous function performed a simple task; the result of an addition is sent to the output window.
By changing the function a little bit, the result can be returned to the function call.

The value of the addition is returned with the ActionScript command 'return'. In this example the variable 'c' will be returned, so 'return c;' is used.

If you take a good look at the beginning of the function, you will see a slight difference with respect to the previous example. Instead of ': Void' at the end of the function name, ': Number' is used.
This is done to indicate that the function returns a number to the function call (add(2,4)). The result is printed to the output window with the trace command at the last line of code.

The last line of code prints the result of the addition to the output window.

Movieclips have properties, which can be read and set by ActionScript.
To reference to a specific movieclip, the movieclip should have a unique name.

It's good practice to precede the name of a movieclip by 'mc_' - the abbreviation for movieclip - so it's clear that you refer to a movieclip in your ActionScript code.
Select the movieclip on the stage, and type the name in the property window.

With the knowledge of functions, variables, and properties, it's fairly easy to create a simple ActionScript-driven animation.
In the 'Adobe Flash' chapter, you've read about how to set up a Adobe Flash animation.

Once you've set up a new Flash animation, you can directly create an animation on the main timeline, or create the animation on the timeline of a movieclip.
By using a movieclip instead of the main timeline, the entire animation can be copied and pasted into other Adobe Flash animations. If your projects become larger, you can start with stand-alone animations. Once these stand-alone animations work properly, they can be copied to the main animation.
If the stand-alone animations are created directly on the main timeline, you have to copy all the layers; if you used a movieclip, all you have to do is copy and paste one single movieclip.

In this example, the animation is not created on the main timeline, but in a separate movieclip called 'animation'.

The main timeline has four keyframes (see image).

The first keyframe has one line of ActionScript:

This line of ActionScript code prevents the scaling of a Adobe Flash movie.

The next line of code is:

The first line is the trace command with a formula.
The formula has two parts: 'this.getBytesLoaded()' and 'this.getBytesTotal()'.

'getBytesLoaded()' is used to find out how many bytes are loaded; 'getBytesTotal()' is used to retrieve the total amount of bytes of the animation.
At the start of the animation, the loaded bytes will be less, say 100 bytes. Suppose the animation is 10.000 bytes large/small. The result of the calculation is 0,01 (100 bytes/10.000 bytes). As soon as the complete animation is loaded, the result of the calculation is 1.0 (10.000 bytes/10.000 bytes). The amount of loaded bytes is equal to the overall size of the animation.

The result of the calculation changes from 0.0 at the start to 1.0 at the end.
This value can be used to change the width property of the movieclip - a loading bar - or the result can be sent to a textfield.
In this example, the value is only sent to the output window.

The second line of code in keyframe 2 checks, if (key)frame 4 is loaded.
Keyframe 4 contains the movieclip with the animation. If the complete animation is loaded, Adobe Flash jumps to the fourth keyframe and stops. If the fourth frame isn't loaded completely, Adobe Flash continues the timeline and jumps to the third keyframe.

The ActionScript of keyframe 3:

The third keyframes redirects Adobe Flash back to the previous keyframe, keyframe two.
This keyframe calculates the amount of loaded data, sends the result to the output window, and checks if the fourth frame is completely loaded. If not, Adobe Flash jumps to the third keyframe, etc.
As soon as the fourth keyframe is completely loaded, the animation in the main timeline stops.

The ActionScript of keyframe 4:

If you preview the animation (press CTRL + ENTER), you probably don't see the result of the calculation in the second keyframe.
The Adobe Flash animation runs on your local computer and the complete animation is processed almost immediately, since you don't have to download it via an internet connection.
Adobe Flash offers an option to mimic download time on your local computer, so that you can check what happens while downloading.

Select 'View' in the animation window, then select 'Download Settings'.
Multiple options appear. Select the connection speed you prefer.
To check if the trace function in the second keyframe works properly, choose a slow connection speed. Once selected, multiple lines with values ranging from 0.0 to 1.0 will show up in the output window.

The main animation is a circle which animates continuously.

The position of the ball is updated every new frame.
If the ball bounces against the horizontal or vertical border, the direction of the ball is adjusted.

The ball will be placed inside a movieclip, so that the position can be retrieved from the movieclip position properties: mc_ball._x and mc_ball._y.

Two global variables, 'direction_x' and 'direction_y', are used to keep track of the direction.
If the value of the variables is equal to 0, the horizontal or vertical position will increase; the movieclip will move to the right and/or to the bottom. If the value is not equal to 0, the movieclip will move to the left and/or top.

Adobe Flash uses a coordinate system that differs from the commonly used coordinate system.
In the commenly used Cartesian coordinate system the horizontal x position increases when a point is moving to the right on the x-axis, and the vertical y position increases when a point is moving up to the y-axis in a coordinate system (left image).
Inside Adobe Flash, the horizontal x position behaves 'normally'; the more to the right the higher the x value, the more to left the lower the x value.
The vertical y position behaves differently. The y position increases when moved downwards on the y-axis, and decreases when moved upwards on the y-axis (right image).

Beside the direction variables, two extra variables are used: 'width' and 'height', the dimension of the animation.
These values are needed to detect if the direction of the ball needs to be adjusted. Both variables have a global scope, like the direction variables.

The fundamental element of an animation is time. Instead of using time in (milli)seconds, the frame rate is used to update the animation.
Adobe Flash updates an animation at a specific amount of frames per second. This can be 24 frames per second or, for instance, 31 frames per second, depending on what you have specified in the 'Document Properties' popup in Adobe Flash.

The ActionScript 'onEnterFrame' command is executed 24, 31 - or whatever value you use for the frame rate - times per second.

All ActionScript code inside the onEnterFrame function is executed a number of times per second.
In this example, the code is just a call to a function called 'animate'.
The function animate performs all the calculations needed for the animation.

The Animate function is the heart of the animation.
Inside the function, the position of the movieclip is updated based on the value of variables 'direction_x' and 'direction_y'.
As soon as the position is updated, the new position is checked to find out if the movieclip is still inside the Adobe Flash animation. If the movieclip is (partly) outside the Adobe Flash animation, the position should be adjusted and the direction inverted.

The next code is used for the horizontal position; the code for the vertical position is the same, only 'width' becomes 'height'.

The variable 'direction_x' is used to move the movieclip to the left or right.
If the value of 'direction_x' is equal to 0, the movieclip moves to the right, and the horizontal position increases.

An if-else construction is used to check the value of variable 'direction_x'.
If the value of variable 'direction_x' is equal to 0, the code between the braces - '{' and '}' - directly after if is executed. If the value is not equal to 0, the code between the braces is executed directly after else.

Notice the use of '==' to check if a variable is equal to a certain value.
Do not mistake this with '='. If you use '=', the variable 'direction_x' will be set to zero.

The ActionScript code to update the movieclip if the variable 'direction_x' is equal to 0:

First the movieclip horizontal position property, this.mc_ball._x, is updated.
The current horizontal position is retrieved and increased by 2.
Next, the new horizontal position is checked. The new position should not be greater than the value of the width minus the width of the movieclip.

The circle is positioned at position 0,0 inside the movieclip 'ball'.
The movieclip has a certain width and height. By subtracting the width of the movieclip from the width of the animation, the movieclip - mc_ball - stays within the visible area of the animation (see image).

If the movieclip is (partly) outside the Adobe Flash animation (the horizontal position is greater than the value of the variable 'width' minus the width of the movieclip), the movieclip position is adjusted to the maximum position and the value of direction_x is adjusted.
The value of variable 'direction_x' becomes 1 minus 'direction_x'. Initially, the value of 'direction_x' is 0, so direction_x = 1-direction_x, becomes direction_x = 1-0, which results in 1. 'Direction_x' is set to 1.
Practically, this means that the direction is reversed.

The next time the animate function is called, the value of 'direction_x' is not equal to 0 anymore, so the code after the braces is executed directly after else.

Instead of increasing the horizontal position of the movieclip, the horizontal position is decreased so that the movieclip moves to the left.
The keep the movieclip within the visible area of the animation, the position of the movieclip is checked.
The horizontal position should not be less than zero. If the horizontal position is less than zero, the position is corrected to zero and the value of variabel 'direction_x' is adjusted, so that the direction is reversed.

The same process is repeated for the vertical position of the movieclip.

The ActionScript code in this example is added to the timeline inside the Adobe Flash animation.
The code can also be typed in an external ActionScript file.

The ActionScript code to include an external ActionScript file:

By using external ActionScript files, which code is involved in your project becomes more clear.

the complete ActionScript code is available in the commercial version of this tutorial.