This site is now just an archive over the rise and fall of Flash. The domain is available for sale
Login | Register

Variables - The invisible essence of programming (Flash 4)

In this chapter, you will learn about an important part of any programming language; variables. Variables are used in almost all programs to keep track of results of things occurring in the programs. By the time you have finished this tutorial, you will be able to make a simple shooting game.

28. AUGUST 2000, Jens Chr. Brynildsen Observe: this tutorial teaches Flash 4 style actionscript. It will be rewritten to Flash 5/MX style when time allows

You might have heard programmers talk about variables in mysterious ways, but what is it? If you look at the meaning of the word, it says, "it's variable, the content may vary". The best way to envision what a variable is, is to think of it as a box that can only contain one thing at a time, but the content of the box may change over time.

imageWe use variables to store and keep track of things, just as we do with boxes in daily life. If we need to know what is in the box, we just open it to see what's inside. We may have many boxes, and to keep them apart, we usually name them separately. This is called "variable names".

imageTo make sure you can find a variable easily, always name it so that the name explains what is in the box. If you don't, you will be spending a lot of time looking through boxes just to find the right content (just as in normal life), and when you find it, it may turn out to be another box, just with somewhat similar content.

Let's apply this to Flash and ActionScript.
1. Open Flash and make a new movie.
2. Click the keyframe in frame one and open the Actions panel
3. Click "Actions" and choose "set variable"

There are two things to fill in, variable and value. The variable is the name of our box, and the value is what is in it. Type the letters Test in the variable-box and the number 1 in the value-box. It should now look like this:

Test = "1";

Test your movie by pressing CTRL Enter (Mac: CMD Enter), nothing will shows up. The variable is still there, it is just hidden since we usually don't want it to be visible. You can easily check if a variable is present by choosing the "List variables"-option in the "Debug"-menu. When you do, a window will open and all variables in your movie will be listed:

Layer #0: 
Variable _level0:$version = "WIN 5,0,0,24"
Variable _level0:Test = "1"

The "$version "-variable is an ever-present variable in Flash. It tells what platform you are on, and the version number of your Flash plugin. Below it is your newly created variable "Test". Now you should know what a variable is and how to create one within Flash. So let's start using it for something useful:

1. Open Flash and make a new movie.

2. Open the standard buttons library (Window -> Common Libraries -> Buttons), and drag the "animated button"
onto the stage

3. Hold the Alt-key down while dragging the button to a new position. This will create a copy.

4. Use your Type-tool to write the letter "A" upon one button, and the letter "B" upon the other button.

Using the arrow tool, right-click the A-button and bring up the Actions panel. Click "Actions" and scroll down to the "set variable" command. Set the variable name to "Button" and the value to "A". Notice that since this is a button, Flash will add some extra info to decide what event should cause the variable to be set. In this case, the variable should be set when the button is "Released". Your script should now look like this:

on (release) {
Button = "A";

Click OK, and do the same for the other button, but this time set the variable to "B". The script for button B should look like this:

on (release) {
Button = "B";

Test your movie by pressing CTRL Enter (Mac: CMD Enter). The two buttons show up. Choose the "List variables"-option in the "Control"-menu, and nothing but the "$version"-variable will appear.

Press the A-button and choose "List variables" The output reads:

Layer #0:
Variable _level0:$version = "WIN 5,0,0,24"
Variable _level0:Button = "A"

Press the B-button and choose "List variables". The output reads:

Layer #0:
Variable _level0:$version = "WIN 5,0,0,24"
Variable _level0:Button = "B"

By creating these two ActionScripts, we have made a system to track which button the user has clicked. It is however a bit cumbersome to have to use the "List variables"-function every time to see if there has been a change. Let us make it easier to check.

Just below your buttons, type the text "You clicked button". To the right of this text, make a new empty text, and right-click the empty text field. Bring up the "Text Options" panel.

Click the dropdown "Static Text" and change it to "Dynamic Text". The text is now is now a programmable "Text Field".

A Text Field is a text that can be changed via programming. A good example would be the Score displayed during a game. The content of the Score-Text Field will change during the game to reflect the increased score.
The Text Fields has many options. Experiment on your own and use the (much better than version 4) Help files.

Flash deals with Text Fields in a much more simplified way than other programming- / scripting-languages by letting the name of the text field be the same as any variable name and thereby reflecting all changes made to the variable.

Did that sound difficult? It's not. In the Variable field on the "Text Options" panel, type "Button. You remember that when we clicked our buttons, the variable "Button" changed between A and B?

This text field will now, at all times show the current value of this variable since the variable of the field is the same as our "button" variable. Test your movie by pressing CTRL+Enter (Mac: CMD Enter), and see it for yourself.

Let's start building your first simple shooting-game. Download the file "ButtonGame.fla" to your computer. The file contains a button (animated bird) that is tweened along a path. (This is a basic technique and beyond the scope of this book. If you don't know how to do this, look it up in the Flash-Manual that came with the program under the chapter "Motion Guides").

Press CTRL Enter (Mac: CMD Enter) to see how it works. The purpose of this simple game will be to shoot the bird. If you have been wondering why there are so many shooting games made with Flash (and elsewhere), it's simply because shooting games are the easiest games to make. The logic is simple: If the user clicks the bird, he/she gets another point added to the score.

Let's start by adding the Text Field that will show the score. Go to keyframe 5, and click the keyframe in the text-layer. Use your text-tool, and make a new text next to the "SCORE"-text. Type a Zero and change it to a text-field by changing it's properties to "Dynamic Text" in the "Text Options" panel. Expand the text-field by dragging the corner to make space for more numbers.

In the "Text Options" panel type "score" in the variable field, and uncheck the "Selectable"-option.

Click the first keyframe on the text-layer. Now we need to make sure the "score" is set to Zero if we restart the game after playing. It's easy to forget many things like this when you make your first games, but soon you'll remember it.

Open the Actions panel (CTRL ALT A) and insert a "Set variable" statement. Set the variable to "score" and the value to "0". Also, make sure you check the "expression"-button to change the value (not the variable) into a expression. This is to tell Flash that we want this to be a number and not a string of text. Click OK to close the dialogue.

Strings and Numbers
In programming, the value of variables can be of two basic types:

1. Strings: Can contain any combination of text, characters and numbers.
2. Numbers: Can contain only numbers.

If we try to add the strings "Peter" and "Anne" together, we'll get the result "PeterAnne", as there is no way a machine can add two names. If we add some numeric (expression) variables for "Peter" and "Anne", (i.e. their age: 19 23) we'll get a reasonable answer (42). This is maybe the most common mistake you'll be doing when working with ActionScript, so if something isn't working out as planned, make sure your variables are set to the right type.

The next thing is to add the scoring mechanism. Go to keyframe 5 and click the bird. This bird is actually a button, so bring up the Actions panel. Add a "Set variable"-statement and set variable to "score" and value to "Score 1". Make sure you change this into a expression checking the expression box. If you don't, the script will not work since Flash will not read the text string "Score 1" as something sensible unless it is an expression. Also make sure you click "on (Release)" and change it into "on (Press)".
Your script should now look like this:

on (press) {
Score = Score 1;

What does the above mean? Every time the button is pressed (the player hit the bird), Flash will add one point to the current value of the numeric "Score" variable. If the "Score" variable is 5, Flash will add 1 and the "Score" variable will become 6.

Initializing your variables
There is one more reason for adding the "Score = 0" command in frame 1? If "Score" equals nothing, Flash will not be able to add 1 to nothing. By setting "Score" to Zero before starting to use it, it will be "initialized", and Flash will be able to do the calculation (0 1=1).

Almost there...
Test the movie, and notice that it doesn't work properly. Every time the bird is finished moving along it's path, it will play the first frame and the score will be set to Zero. To prevent this we will have to add a command that only plays back the frames from 5 to 150. Go to frame 150 and click the keyframe in the button layer. Open the Actions panel, click Actions and add the "goto" command. Type the number "5" in the "Frame" field. Make sure the "Go to and play" option is checked.

This will cause the movie to return to the first frame the bird appears and playback from there, thus preventing it from playing frame 1 where we Zero the score. Test the movie, and see the game working.

This is the "easy" way to make a "goto" statement, but it can also create a lot of extra work. What would happen if we needed an intro screen to this game and we added some extra frames? The script would go to frame 5 where the bird used to start animating, but at this point, there might be something different at frame 5 (i.e. the intro screen). The smartest way to make "goto" commands is using "labels".

A label will stick to a keyframe, no matter where it is placed in your timeline. Let's add a label. Go to frame 5 and right-click the keyframe in the text-layer. Bring up the "Frame" panel and type "game" in the "frame" field. Next, go to the looping frame (150) and change the "goto"-command to "Label".

The complete statement should now look like this:

gotoAndPlay ("game");

If you need to insert any frames now, it will not affect the playback of the bird. This is a very crude game, but save the file, as we will enhance on this later. If you would like to enhance it yourself, try adding a "New Game" button, and if you know how to do it, make a timer.


About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

Get new stories first

Click to follow us on Twitter!



No comments for this page.

Submit a comment

Only registered members can comment. Click here to login or here to register