What is ActionScript?

ActionScript is automatically included in the Flash CS3, so you don’t need to do any additional installs. Basically, ActionScript enables you to develop interactive Flash applications. Allthough ou can build some kind of interactivity without writing any code, I strongly suggest that you make an effort and learn ActionScript. It pays off at the end. My tutorials will focus on ActionScript 3.0, which is the newest version of ActionScript. I’m not going to cover the differences between the old and the new versions, since there are many sites about that already.

Your first ActionScript application

Now we’re ready to build our first Flash application with ActionScript. To start off, follow these simple steps.

1. Create a new document (Flash File ActionScript 3.0)

2. Create a new layer, name it ”ActionScript”.

3. In the ”ActionScript” layer, select the first frame.

It is always a good practice to create a new layer for ActionScript. Although you can insert code into any layer, it keeps you more organized to have all your ActionScript in one layer.

4. Type the following code in the actions panel. If you don’t see the panel, press F9 (Window -> Actions).

trace("Welcome to learn ActionScript");

Note that a small ”a” symbol appears in the frame where you inserted ActionScript code.

5. Test the movie (Ctrl + Enter). You should see the same as below:

That’s how easy it is to insert ActionScript into your Flash application. I admit it, this application doesn’t do much, but as we go on, you’ll start to see the real power behind ActionScript.

Adding movie clips to our application

Next, we create two movie clips into our application, which we manipulate by using actionsctipt.

1. Create a new layer called ”ball”. Draw a ball in that layer and convert it into a movie clip. You can name it anyway you want.

2. Create a new layer called ”rectangle”. Draw a rectangle and convert it into a movie clip. You can name it anyway you want.

3. Select the ball. Give it an instance name ”myFirstBall”.

We give our movie clips instance names, so we can access them by using ActionScript.

4. Select the rectangle. Give it an instance name ”myFirstRectangle”.

5. Open the actions panel and write the following.

myFirstBall.alpha = 0.2;
myFirstRectangle.scaleY = 2;

6. Test your movie.

You should see that the ball’s alpha has reduced and it’s more transparent. The rectangle has stretched in vertical direction. All this happened, because we changed their properties by using ActionScript. These changes only apply to these two instances. If you were to drag a new rectangle to the stage, it’s going to look normal, since we haven’t used any actionsctipt for that particlar rectangle.

In this example, I only modified the alpha and scaleY properties, but you can manipulate all the object’s properties. For a list of the properties, refer to Adobe’s documentation.

Using functions

We already have used one function in this tutorial, the trace() function. It is a function that prints into the Flash output window. In our case, we gave it a parameter called ”Welcome to learn ActionScript”. We are not bound to use only the functions that Flash provides. We can also create our own functions. This lesson is all about creating and using functions. You can continue using the same flash file as earlier..

1. In the actions panel, type

var firstNumber:Number = 3;
var secondNumber:Number = 5;

Explanation:

The ”var” stands for variable. Everytime you create a new variable, you start the name with a ”var” statement. After the ”var”, you give your variable a name. This is the same as giving instance names (as we did earlier with the ball and the rectangle).

The ”Number” tells that the variable is a number. There are many different types of variables that you’ll learn by following my tutorials. After the name and type declaration, we assingn a value to a variable.

2. Add the following code (after the variable declarations).

function addNumbers(first:Number, second:Number):void  {
        var result:Number = first + second;
        trace("Result is " + result);
}

Explanation:

Functions always start with the word ”function”. After that, you give it a name. Our function is called ” addNumbers”. The function simply adds two numbers.

The function takes two parameters. These parameters are called ”first” and ”second”. These parameters can only be used inside of the function. You don’t need a ”var” statement with function parameters.

The ”:void” tells that this function isn’t going to return any value. We’ll learn more about this later, so don’t worry about it now.

In the function ”addNumbers”, we simply add two numbers that were sent into the function. We use the ”trace” function to print the result.

3. Insert the function call.

addNumbers(firstNumber, secondNumber);

Explanation:

This line calls our function. Without this line, the result wouldn’t be displayed in the output window, since nothing would call the “addNumbers” function!

4. Test your movie.

Final Code

trace("Welcome to learn ActionScript");
 
myFirstBall.alpha = 0.2;
myFirstRectangle.scaleY = 2;
 
var firstNumber:Number = 3;
var secondNumber:Number = 5;
 
//This function adds two numbers
function addNumbers(first:Number, second:Number):void  {
        var result:Number = first + second;
        trace("Result is " + result);
}
 
addNumbers(firstNumber, secondNumber);

Related tutorials:

1. ActionScript 3.0 Events
2. Particle Fountain with ActionScript
3. Animating with Flash
4. Basic Preloader
5. Movie Clip Trail Effect