August 30, 2014

[Flash] Action Script 3.0 Basic Part I

0 comments
Today, I will explain about the basic programming in ActionScript 3.0 (AS3) using Adobe Flash Professional. This is a very basic principle and it's actually the fundamentals of any programming language. You can use this principle to any programming language. The only difference is just the syntax (the way the code is written), but the concept remains the same.


So in this part 1, I will cover some basics about:
- Declaring Variable
- Conditional Statement
- Loop Statement

You can use this in any version of Flash Professional that supports ActionScript 3.0 (Macromedia Flash 8, CS, and CC version). Let's get started! :D

Creating New File

When we open Flash, there will be a Welcome Screen. With that many options, choose Create New File - ActionScript 3.0. Then we're ready to code, as simple as that. Note that if you use AS3 code in AS2 project, you will get error message when you compile the movie.

A few things to keep in mind before we begin to code in AS3:

- AS3 is case-sensitive language, meaning the uppercase and lowercase letter is recognized differently. For example, if we type a text data 'string' instead of 'String', then we'll get error. Because Flash recognizes 'String' (with capital S letter) instead of 'string' as a data type for text data. The easiest way to avoid that mistake, you can notice that the term will always change to blue color if Flash recognizes it as its default scripting term.
- Always use semicolon (;) to end a statement. It's recommended to use semicolon (;) to end each statement so you'll not find really hard when you learn other programming language that force you to use it. In Flash, it's actually not really necessary to use, you can simply use a line break (Enter), but still, I recommend you to use semicolon.
- You can access the ActionScript window by pressing F9, and compile the script by using Test Movie (Ctrl+Enter).
- Like any other programming language, AS3 will be executed in order from top to bottom lines. So in some cases, if the order is not right, then it will throw some errors. For example, we set a value to a variable before declaring that variable first will throw error because it's unable to find the variable. It's illogical to set a value to a non-existed variable.

Declaring Variable

So, what is variable? Variable is like a container to hold something, and this container have specific type to match with the content. For example, if we have a water container, then it should be used to contain water. So if we have a text variable, then we can use it to contain text data. Variables value can also be changed dynamically as long as the value is the same type as the variable type.

The syntax:
var var_name:var_type = value;
var_name is the variable name, you can name it everything you like with some conditions: variable name cannot contain only number or started by number, but combination of text+number is fine. Also it's recommended to avoid the same name as Flash default scripting term (when the text turns to blue). For example:
  • var 123:int; is incorrect
  • var 1ove:int; is incorrect
  • var a:int; is correct
  • var number01:int; is correct
  • var var:int; is incorrect since var is Flash default scripting term

var_type is the type of the variable. Normally, when we type var a:, then the autocomplete window will appear, showing the list of all available data type to help us get the right term. You can see it in the image below (the color might be different from yours because I have my actionscript color preferences set to my custom colors). :p
AutoComplete Feature in Flash Professional
AutoComplete Feature in Flash Professional
Now, let's try creating a variable. You can type this into your Actions window:
var a:int;
trace(a);
int is a data type for round number, it's derived from the word 'integer'.
trace() is a function to show a value of a variable. The value will be shown in the Output window when we compile the movie.

Now, hit Ctrl+Enter to execute the script. You will get 0 in the Output window. Why? because we didn't set any value to the variable a yet. Now set the value to 2.
var a:int = 2;
trace(a);
Hit Ctrl+Enter again and now it will show 2. That means that our variable 'a' now has a value, which is 2.

Now let's try a simple math:
var a:int = 2;
var b:int = 3;
var c:int;

c = a+b;
trace(c);
Hit Ctrl+Enter again and now you will see 5 in the output window. What exactly happened here? First, we create a variable a with value 2, variable b with value 3, and variable c with empty value. Then, we set the value of variable c by adding 'a' value (2) with 'b' value (3). Thus we get 5.

Conditional Statement

Conditional Statement is used when we need to check whether a condition is met or not.

The syntax:
if (condition){
    //Do something
}
condition is where we put something to check; I'll explain next with an example. Note that in this syntax, we use brackets {}. This is what we call a 'code block', a place where we can put some code to be executed when certain condition is met. Also, you can see the //, this is called a 'comment'. Anything that we put after the // will not be executed by the compiler (try yourself and see what you type turns to grey color), so it is good to use when we want to give notes.

Now, let's try a little example:
var a:int = 1;
if (a==1){
    trace("a is one");
}
What this code means? It means that we want to check whether the value of 'a' is equal to 1. Notice that I use == instead of =. When we want to check the value of a variable, we use ==is used when we want to set a value.

Then, what happened when the condition is met? Hit Ctrl+Enter and you can see 'a is one' text in your output window. Since the value of 'a' is equals to 1, it means the condition is met, so the code within the code block is executed, which is trace("a is one"). Wait, why use double quotes ("")? Whenever it's a text data (called String data type), we have to use " before and after the text. If we don't, Flash will throw errors. We can also use single quotes (') interchangeably if our text data contain double quotes, e.g. 'a is "one" ' . In Flash, every String data will turns to green color by default.

Now, what if the condition is not met? Let's modify our code a little:
var a:int = 2;
if (a==1){
    trace("a is one");
} else {
    trace("a is not one");
}
I change the value of 'a' to 2, and add an else clause. What does this else clause do? Whenever a condition is not met, the code within the else clause will be executed. If you don't give any else clause, then nothing will be executed. Now hit Ctrl+Enter, you should now see 'a is not one' text in your output window because the value of 'a' is 2 and not 1.

Let's make things a little bit more complicated. What if the condition to check is more than 1? If so, we can use the else if clause:
var a:int = 2;
if (a==1){
    trace("a is one");
} else if (a==2){
    trace("a is two");
} else {
    trace("a is not one nor two");
}
Now hit Ctrl+Enter again, you will see 'a is two' text in your output window. What happened here is Flash will first check, whether the value of 'a' is equals to 1, which is not. So, Flash will skip the first code block and jump to the second check: is value of 'a' equals to 2? It's true, so Flash runs the following code block, thus we get 'a is two' text in our output window. Note that once a condition is met, then Flash won't run the following else and else if clause (if there is any). In our case, the else clause won't be run because the condition (a==2) has been met.

Loop Statement

Loop Statement is used to execute some codes repeatedly for a specific number of times when a certain condition is met.

The syntax:
for (counter; condition; action){
    //Do Something
}
counter is any number variable, it's used as an iterator or starting number. The second parameter is condition, this is where we set a condition for our counter to meet. The last parameter is action, where we define how the counter will increase, decrease, or multiply. This action will be executed for every loop cycle.

Let's say we want to trace "Hello World!" for 5 times, in ancient-fashioned way, we can use:
trace("Hello World!");
trace("Hello World!");
trace("Hello World!");
trace("Hello World!");
trace("Hello World!");
Imagine when we need to trace that for a hundred times.. @.@
Instead, we can use this:
var i:int;
for (i=0; i<5; i++ {
    trace("Hello World!");
}
When you hit the magic button, Ctrl+Enter, you will find exactly the same result as the first one.
First, we start by declaring a variable 'i' with integer type, then followed by the for-loop statement.
- i=0 is how we set the starting number of our counter; we set it to 0.
- i<5 is the condition we set for our counter to meet.
- i++ has the same meaning as i=i+1, which will add 1 to our counter for each loop cycle. You can use any math operation of course to accommodate your need, increasing our counter by 1 for each loop cycle is what we most generally used.

To explain better how this for-loop statement works, we will modify our code a little:
var i:int;
for (i=0; i<5; i++ {
    //trace("Hello World!");
    trace("Hello World!, i="+i); //will trace the value of i
}
This will result:
How the For-Loop Statement Works
How the For-Loop Statement Works

You can see that our counter starts with 0, as we stated before i=0. Then after executing the trace() code, it increases by 1 for every loop cycle. The cycle stops when the counter reached 5, because it's no longer meet our i<5 or i is less than 5 condition. That's why the last trace() executed is when the counter value is 4.


--
So, this is the end of part 1. I hope this will be a useful tutorial, especially for those who wants to start learning AS3. Any positive comments are welcomed to make this tutorial better. :)

Cheers!

0 comments :

Post a Comment

Related Posts Plugin for WordPress, Blogger...