Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
17. Add this code right after all the ActionScript written so far:
function write(clicked:String):Void {
switch (clicked) {
case "car" :
info_txt.text = "The "+clicked+" is a terrestrial vehicle.";
break;
case "boat" :
info_txt.text = "The "+clicked+" is a sea vehicle.";
break;
case "airplane" :
info_txt.text = "The "+clicked+" is an aerial vehicle.";
break;
default :
info_txt.text = "You haven't clicked on a vehicle.";
}
}
A function is a collection of data: various ActionScript commands and pieces of code put together that serves a purpose — a function is written to perform a certain task. But it just sits idly there unless you call it. The function call is being issued every time one of the four movie clips in this exercise is clicked:
write(clicked);
This function could be called like this, too: write(); — but in this example it would yield no results, because the function makes use of the clicked variable. So the function call is made by passing a variable to it — the clicked variable.
That's the reason this variable is mentioned in the opening line of the function:
function write(clicked:String):Void {
First you write the keyword function, followed by its name (write) and in the parenthesis is the variable (clicked) that is being passed to it, along with its type (String). You must specify the type of the variable passe to a function: this helps you check for any potential errors in your code, and if that happens, Flash will be able to notify you about it. Lastly, there is the Void keyword, which signifies that this function does not return a value. Some functions do, some don't. And yes, if a function does not return a value, you should tell this Flash too.
The function used in this lesson serves for displaying some text in the dynamic text field. In case when a value is returned from the function, it is handed back over to whatever called it in the first place. And here, when a movie clip is clicked upon, it just passes a value to the function which then continues working on its own, without communicating back with movie clips.
As you remember from the previous page, the contents of a function are placed between its curly braces: { and }. The contents of the write functions consist of a conditional switch/case statement:
switch (clicked) {
case "car" :
info_txt.text = "The "+clicked+" is a terrestrial vehicle.";
break;
case "boat" :
info_txt.text = "The "+clicked+" is a sea vehicle.";
break;
case "airplane" :
info_txt.text = "The "+clicked+" is an aerial vehicle.";
break;
default :
info_txt.text = "You haven't clicked on a vehicle.";
}
Let me explain you in detail how this nifty ActionScript construct works!
The first line of a switch/case logical construct,
switch (clicked) {
evaluates the piece of code between its parenthesis, which is a variable in most cases, as it is in this one too. As with the function, a switch/case conditional statement's code is placed between curly braces: { and }. Next, the value is being compared to the value of each case line of code:
case "car" :
info_txt.text = "The "+clicked+" is a terrestrial vehicle.";
break;
case "boat" :
info_txt.text = "The "+clicked+" is a sea vehicle.";
break;
case "airplane" :
info_txt.text = "The "+clicked+" is an aerial vehicle.";
break;
If a match is found, the ActionScript contained inside that case chunk of code is executed. Say, for example, that a user clicked on the boat_mc movie clip. As you recall, once this movie is clicked, it will look up its own Instance name, extract a string value (a piece of text) from it, and pass that value to the write function. This function will in turn execute its own code, which is the conditional switch/case statement I'm discussing right now.
So, a match is found:
case "boat" :
info_txt.text = "The "+clicked+" is a sea vehicle.";
break;
The line of code which displays text in the info_txt dynamic text field is executed.
info_txt.text = "The "+clicked+" is a sea vehicle.";
Translated into English, the construct info_txt.text tells Flash "the text that will be displayed in the info_txt text field" is the one on the right side of the assignment operator (=): "The "+clicked+" is a sea vehicle."
As the value of the clicked variable equals "boat" if the user clicked on the boat movie clip, what will be displayed in the info_txt text field is "The boat is a sea vehicle". Flash reads this in the following way (translated into human language):
switch (have a look at this and evaluate it) {
if that value matches "car" :
Do this...
break;
if it happens to match "boat" :
Do this...
break;
if it matches "airplane" :
Do this...
break;
default (if a match is not found above):
Do this.
}
Ok, now you know how this works. Let's have a closer look at the details of a switch/case conditional statement. Like I said, the value between the parenthesis following the keyword switch is evaluated and then compared to each case statement. Once a match is found, the appropriate case statement (the code contained within it) gets executed.
At the end of each case statement there is a break command. This prevents the next case from being executed if a match is found. If a match is not found, the default piece of code gets executed:
default :
info_txt.text = "You haven't clicked on a vehicle.";
18. Try it out: test your movie by selecting Control > Test Movie (shortcut key: Ctrl+Enter). Then click on each movie clip. If you click on any of the first three movie clips, a similar message will appear in the dynamic text field, depending on the particular case statement. But when you click on the island_mc movie clip, the default statement will be executed, with a different text being displayed in the text field.
Also, a nice thing that can be done with this conditional statement is to have Flash do the same thing for multiple cases. Say, for example, that you wanted Flash to display the same message each time one of the "vehicle" movie clips was clicked: "The [insert one of the three here] is a vehicle". You would do it like this:
switch (clicked) {
case "car" :
case "boat" :
case "airplane" :
info_txt.text = "The "+clicked+" is a vehicle.";
break;
default :
info_txt.text = "You haven't clicked on a vehicle.";
}
As you can see, there is only one break statement here. So if any of the three cases is matched, the same line of code gets executed. If no match is found, the default piece of code is run. Flash interprets this in the following way:
switch (have a look at this and evaluate it) {
if the value matches either "car" or "boat" or "airplane" :
Do this...
break;
default (if a match is not found above):
Do this.
}
This conditional logic is easy to use, isn't it? Sure it is! :) Let me show you now why it is a better solution than using the if/else conditional statement in some cases.
Suppose that you wanted to use the if/else conditional logic in this exercice, instead of switch/case. Your code would look like this (I will show you the write function only, since the rest of the code stays the same):
function write(clicked:String):Void {
if (clicked == "car") {
info_txt.text = "The "+clicked+" is a terrestrial vehicle.";
} else if (clicked == "boat") {
info_txt.text = "The "+clicked+" is a sea vehicle.";
} else if (clicked == "airplane") {
info_txt.text = "The "+clicked+" is an aerial vehicle.";
} else {
info_txt.text = "You haven't clicked on a vehicle.";
}
}
Clearly, this code is much less readable than the previous one. The switch/case logic is much easier to read, update and check for any potential errors.
In addition to readability, what is really important is the performance. The if/else logic evaluates each condition (if, else, else if, etc). In applications where there is a big amount of data that has to be evaluated, the switch/case statement has a significantly better performance (meaning a lesser load on the user's computer processor). This is because the value in the switch statement gets evaluated only once.
You see now how efficient the switch/case logic can be. You will learn now how to make your code more compact, without any loss to the functionality of your SWF movie.
The code that handles the user's clicking on movie clips currently looks like this:
car_mc.onRelease = function() {
var myName:String = this._name;
var clicked:String = myName.substr(0, -3);
write(clicked);
}
boat_mc.onRelease = function() {
var myName:String = this._name;
var clicked:String = myName.substr(0, -3);
write(clicked);
}
airplane_mc.onRelease = function() {
var myName:String = this._name;
var clicked:String = myName.substr(0, -3);
write(clicked);
}
island_mc.onRelease = function() {
var myName:String = this._name;
var clicked:String = myName.substr(0, -3);
write(clicked);
}
Obviously, the same exact code gets executed when each of these movie clips is clicked upon. Therefore, there is no sense at all in having so much code. Erase that code and type in the following one:
car_mc.onRelease = boat_mc.onRelease = airplane_mc.onRelease = island_mc.onRelease = function() {
var myName:String = this._name;
var clicked:String = myName.substr(0, -3);
write(clicked);
};
Ain't this much better? If you were to add or edit something, you can do it in one place instead of having to edit the code for each of these movie clips.
The new code functions exactly the same as the previous one. It says that the onRelease event handler for each of these movie clips will do the same thing: run a function assigned to it.
I hope that you had fun learning from this lesson! To learn even more, be sure to check out my other ActionScript lessons. There are some cool things shown there, like the ActionScript-only clock, a slick dynamic mask effect and more. As always, you can download the source FLA file for this project below (it is in Flash MX 2004 format).
Download the source FLA file for the example shown at the start of this lesson.
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
