Learning to use the conditional if/else statement in Flash 8

In this lesson, I will explain to you what the ActionScript if/else conditional statement is and how to use it in your Flash movies through a visual example. You will learn:

• What is a conditional statement,
• What is a circumstance,
• Various comparison operators and more.

Click on the dark area in the Flash movie below to see how the conditional if/else statement works behind the scenes to turn the light on and off.

Setting up your document

Before starting to write ActionScript code, you need to go through a few simple steps to prepare your workspace.

1. Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J). Set the width of your document to 320 pixels and the height to 240 pixels (see 1 below). Select black as background color (2) and click OK.

2. Download the image below by right-clicking on it and choosing "Save image as..." and put it somewhere on your hard drive where you will quickly and easily find it.

3. Back in Flash, select File > Import > Import to Stage. In the little window that appears, find the image you just saved to your computer, select it and click Open. The image will appear on the stage of your Flash document.

4. However, the image is not centered on stage, so do just that: go to the Align panel. If it isn't opened already, just select Window > Align or press Ctrl+K to open it. While the image is still selected (it automatically is when you import it to the stage), do the following in the Align panel:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.

5. Hit F8 (or select Modify > Convert to Symbol) to convert this image into a movie clip symbol. Select Movie clip as type, and call it room light (actually, you may call it any way you like, since this name serves for Library storage purposes only, more or less). Click OK.

6. This newly created movie clip will be selected by default. Go to the Properties Inspector (also called the Properties panel, below the scene), to its left side. You will find the Instance name input field there. Contrary to the Library name of a symbol, this one is much more important. Call this movie clip roomLight_mc.

IMPORTANT Without an Instance name, you could not possibly control a movie clip via ActionScript. Also, you cannot name it any way you like. You can NOT use spaces inside an Instance name or any special characters (for example !$-%.,& etc). Stick to using letters and numbers, and the underscore character ( _ ). While you can use any number you like inside the Instance name, it can NOT BEGIN with a number.

REMEMBER ActionScript is a case-sensitive programming language. The Instance name roomLight_mc is NOT the same as roomlight_mc or Roomlight_mc. A good rule of thumb when searching for errors in a Flash movie that doesn't work is to begin by checking to see if the Instance names of your movie clips are typed exactly the same in your ActionScript code as they were when you assigned them. Also remember that giving the suffix _mc to an Instance name of a movie clip will help ActionScript instantly recognize that this is a movie clip and not some other type of object that you are writing code about.

7. Lock this layer and call it lamp.

8. Create a new layer and call it actions.

And that's it for preparatory steps. Move on to actionscripting! Yeah!

Top of page

The if conditional statement explained

9. Click on the first (and only) keyframe of actions layer to be able to insert ActionScript inside it.

10. Hit F9 (or select Window > Actions) to open up the Actions panel.

11. As you have seen at the beginning of this exercice, the light is turned off once the movie starts. To be able to that, you must tweak a simple property of your movie clip. By lowering its alpha (transparency) value to zero, the movie clip containing the image of the light bulb that illuminates the room will effectively become invisible. This will allow the movie's black background to show through and create the atmosphere of complete darkness. To do this, write this simple line of code in the Actions panel:

roomLight_mc._alpha = 0;

12. Test your movie by selecting Control > Test Movie. If you have done everything correctly up to this point, you should only see the black background. The movie clip with the image inside it should not be visible at all.

Close the testing window and go back to ActionScript code. Let me explain you the simple line you just typed in a few memonets before: the Instance name, roomLight_mc is followed by dot (.) and than comes the _alpha property. This particular property defines the degree of transparency for a movie clip. So, to tell Flash to make the movie clip invisible, you have added the equals sign (=) and wrote zero on the right side of it. The line is ending with a semicolon (;), which means that's it - end of this chunk of code. It is much like putting a fullstop at the end of a sentence to mark its, well, end.

As you have seen, the equals sign (=) is used to assign a value (to a movie clip's property in this case) and that's why in ActionScript programming language it is called the assignment operator. It serves to assign values and not to test for equality.

Ok, by making the movie clip in question invisible, you have "turned off the light" in your Flash movie. But you must somehow tell Flash that this condition exists. That's really easy.

13. Add the line shown in bold to your existing code:

roomLight_mc._alpha = 0;
var lightOn:Boolean = false;

There is no need to test your movie now, as nothing visible to the eye will happen. But, a variable will be created and stored in computer's memory while this movie is running.

A variable is created by writing the keyword var followed by the variable's name, which is lightOn in this case. After that follows a colon (:), followed by the keyword Boolean. This part of variable definition tells Flash what type of variable this is. Unlike a String (text) type of variable which can store any kind of text inside it or a numerical one, which can hold any number you want, a Boolean type of variable can have only two values inside it: true or false. In fact, this is very handy: it serves exactly that - to determine is something is true or not, if something exists or not. This will serve you very well in this exercise.

So, by writing

var lightOn:Boolean = false;

you are using this practical ActionScript routine to tell Flash that the light is turned off once the movie loads.

14. Add the next piece of code right after the two already exisiting lines:

roomLight_mc.onPress = function() {
if (lightOn == false) {
roomLight_mc._alpha = 100;
}
}

15. Test your movie again (shortcut key: Ctrl+Enter). Click anywhere on it. Ta-daa! The light will turn on (the movie clip will appear)!

How did this happen? Let's have a look at the code. To make possible for a user to click the movie clip, an event handler is introduced: the onPress event handler. In ActionScript, an event handler server just that - to handle events - things that happen in your Flash movie. So, for Flash to be able to do something when a user presses his mouse while over this movie clip, you use the onPress event handler. Bear in mind that this event handler reacts when the mouse button is pressed over a movie clip, not when it is pressed and released, which is handled by the onRelease event handler.

By writing roomLight_mc.onPress, you are assigning the onPress event handler to roomLight_mc movie clip, i.e. beginning to tell Flash that something should be done when the mouse is clicked while it is over this particular movie clip. Next, you see the good ol' assignment operator (=), followed by the start of a function definiton: function() {. What this means is that this function should be run when the mouse is clicked. It is that simple.

So when a user clicks on your movie clip, the above mentioned function is called (meaning it is being run, it is executed). The code that is being executed is the one placed between the function's curly brackets, { and }. In this case, what will be executed are three lines of code:

if (lightOn == false) {
roomLight_mc._alpha = 100;
}

And what's that? The if conditional statement! It works like this: the first thing that must be written is the ActionScript keyword if. It is in turn followed by some code placed between parenthesis, which is called a circumstance. In this tutorial, the circumstance used is: lightOn == false. Not unlike in real life (offline life :), by way of evaluating a circumstance, a computer can decide for itself what to do.

To be able to understand this more easily and quickly, imagine for a moment that you are standing on the sidewalk, about to cross the street. You can see cars passing by and the pedestrian red light turned on, therefore you decide not to cross the street yet. You have made a decision based on current circumstances. By putting together a conditional statement in ActionScript, you enable Flash to decide what to do next, based on a circumstance or set of circumstances.

And it works like this: if the circumstance (sometimes also called a condition) between the parenthesis turns out to be true, the code placed between the conditional statements curly brackets will be executed. To help you better understand this, I will translate the ActionScript code into English:

if (this circumstance tuns out to be true) {
... run all the code that is placed here,
between the curly brackets.
}

Ok? Fine. Let's get back to real code.

if (lightOn == false) {
roomLight_mc._alpha = 100;
}

As you can see, Flash checks if it is true that the value of the lightOn variable equals false: lightOn == false. To put it in plain words, is it true that the light is turned off? Yes, it is true, because the value of the lightOn variable really equals false - you have defined it as such in the second line of your ActionScript code, to tell Flash that there is no light when the movie starts.

Another important thing here: to check for equality, you must use the equality operator (==). This operator is represented by two equals signs joined together, unlike the assignment operator (=) which I mentioned before on this page.

So, Flash looks at the circumstance, sees that it evaluates as true (it is true that the value of the lightOn variable equals false) and it proceeds to run the code placed between the conditional statement's curly braces. Which in turn consists of a single line of code:

roomLight_mc._alpha = 100;

It sets the _alpha property of roomLight_mc movie clip back to 100, making it completely opaque and fully visible.

But what if the circumstance (condition) turns out to be false? Let's have a look at that. Suppose that, at the beginning of your code, instead of writing

var lightOn:Boolean = false;

you actually wrote (the modification is shown in bold)

var lightOn:Boolean = true;

Flash will evaluate the circumstance (lightOn == false) and will see that it turns out to be false. Exactly the same as before, it checks if the value of the lightOn variable equals false. No, it does not, because you defined it as true this time. In reaction to this ( the case when the circumstance turns out as being false), Flash completely ignores the code between the curly brackets. It just goes on, executing all subsequent code, if there is any.

In this case, this means the movie clip with the image won't show up at all. Try it! Change the value of the lightOn variable from false to true, test your movie and try clicking the movie clip. You will be able to click it, but nothing will happen - the black background will just stay there.

Ok, now that you've seen how Flash can decide by itself what to do thanks to the if conditional statement, let's see how to make it turn the light off again. You will use the if/else conditional logic to do that.

IMPORTANT: if you have changed the value of the lightOn variable from false to true, put it back to false. You will need it to be as it was when you started coding, to be able to successfully follow this tutorial. Once you've done that, please proceed onto the next page.