Thomas Palmer

Flash can create two types of tweened animation using timeline:

1. Motion Tween
2. Shape Tween

Creation of Motion/Shape tween using timeline is the basics of Flash.

By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, and color of shapes.
Please note:
1. You need to have Flash Player 7.0 or higher installed to view the Flash animation.
2. Flash MX 2004 or higher must be installed in your system to download the .fla file.

This tutorial will teach you a simple shape tween.
Steps to follow:

* Open a new flash file (Ctrl+N).
New Document window will appear
Select General panel and choose Type: Flash Document . Press OK.
* If your timeline window is not open, press (Ctrl+Alt+T).
* Now you can see a single Layer called “Layer1″ in your timeline Window.

* Select the first frame. Now go to your working area and draw any object. To start off with, may be you can draw a circle.This is going to be your initial object.
In the this demonstration, my initial object is a short line.
* Select frame 20 and press F6 to insert a new keyframe.
* Still keeping playhead on frame 20, delete the object present in your working area. Now draw a different object, may be a square.
In the above demonstration, I have drawn a long line.
* Select any frame between, 2 to 19 and select Shape from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below.

* Now press (Ctrl+Enter) to view your motion tween.

In the above tutorial, you learned how to create a simple shape tween. Believe me, using this logic you can create a number of beautiful things.

Flash can create two types of tweened animation using timeline:

1. Motion Tween
2. Shape Tween

Creation of Motion/Shape tween using timeline is the basics of Flash.

Motion tween is nothing but tweening a Symbol’s movement from one position to another.
To implement Motion Tween all that you have to do is, provide Flash with Symbol’s initial position and the end position. Rest is taken care by Flash. Isn’t it really simple.

For example in this demonstration, I have converted the pencil object to a Symbol. Provided Flash with its initial and the end position, intermediate tweening is done by Flash. Motion Tween animation is as simple as that \:\)
Okay, you ready to learn how to create motion tween. All you have to do is just follow this tutorial step by step.

Please note:

1. You need to have Flash Player 7.0 or higher installed to view the Flash animation.
2. Flash MX 2004 or higher must be installed in your system to download the .fla file.

Steps to follow:

1. Open a new flash file (Ctrl+N).
2. New Document window will appear
3. Select General panel and choose Type: Flash Document . Press OK.
4. If your timeline window is not open, press (Ctrl+Alt+T).
5. Now you can see a single Layer called “Layer1″ in your timeline Window.
6. Select the first frame. Import your image onto stage, upon which you would want to implement motion tween. File>Import>Import to Stage, or just press (Ctrl+R) or you can even draw your own object, you can either choose Rectangular tool or Oval tool from the tool box and draw your desired shape.
7. Now select your object on the stage and press F8 to convert this image to a Symbol. Convert to Symbol window will pop-up.
8. Name your Symbol what ever you like.
9. Select Graphic behavior and press OK.

Note: You can create motion tween only on symbols. So any object upon which you would want to implement motion tween, First convert the object to a Symbol.

10. Right now your Symbol is in frame1 of Layer1. Select frame 20 and press F6 to insert a new keyframe.
11. Still keeping playhead on frame 20, move your Symbol to any other position other than the present one.
12. Select any frame between, 2 to 19 and select Motion from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below.
13. Now press (Ctrl+Enter) to view your motion tween.

If you have already made a moving character (type 2), this Tutorial will be very easy for you.

Set up your new AI enemy exactly as you did your moving character (make sure that everything in the main movie clip is CENTERED). Give it the instance name “AI2″ and use the following script to control it (instead of key down detection):

This is for action-script 2.0.

Well, if you’ve gone though my moving character tutorials, or if you already know how to make moving characters…you may be wondering “How can I make an AI enemy? A monster if you will.”. As always, I’m here to help!

First things first, make sure your character movie-clip (as I am assuming it is already made) has the instance name “character”.

Now, lets make the movie-clip for the AI (give it the instance name “AI1″ (It is set up very similarly to your character movie-clip). In fact, set it up EXACTLY as you did your character, except use this script in the “AI1″ movie-clip. And you MUST have everything in the AI1 movie-clip placed at 0,0.

This is for action-script 2.0

There are two types of moving character. As I like to classify them, full 2D and semi 2D. This tutorial is for the semi 2D type.
(A popular example being the original Zelda game.

To make it you need the following:

animations:
-top view facing forwards (1 frame animation)
-top view facing backwards (1 frame animation)
-top view facing right (we can make it face left with action-script) (1 frame animation)
-top view walking facing forwards (standard 2-3 frames)
-top view walking facing backwards (standard 2-3 frames)
-top view walking facing left (we can make it face right with action-script) (standard 2-3 frames)

Detection Scripts:
-Detect the pressing of the UP key
-Detect the pressing of the Down key
-Detect the pressing of the Left key
-Detect the pressing of the Right key

Action Scripts:
-Flip the character
-Make the character move left/right/up/down

so, how do we set this up you ask?

First, lets put the animations in order and set up their action-script. In all of your “view facing” animations (use the facing right animation for facing left, so you have the same animations for left and right) (they should only be one frame), put the following script in the first frame:

for facing right:

for facing left:

for facing forward (back of character to you):

for facing backwards (front of character facing you):

Now, you know those 2-3 frames of walking animation you have? places them after the first frame of their corresponding facing directions. For example, the walking right three frames of animation I have would be pasted into the three frames after the first frame of my view facing right frame. Making a total of 4 frames. (Again, make sure facing left and facing right / walking left and walking right animations are the same in everything except the script on the first frame).

At this point you should now really only have 4 animations (yes, two are the same [left and right]. Make a movie-clip called “character” and make 4 blank frames in it. label the frames “right”, “left”, “up”, “down”. Now put the 4 animations you have in their corresponding frames. (switching left and right doesn’t matter). the animation with your character’s back shown goes in “up”. The animation where their front is shown goes in the “down”.

now, put this script in the “character” movie-clip itself:

and you’re done!

This is for action-script 2.0

There are two types of moving character. As I like to classify them, full 2D and semi 2D. This tutorial is for the full 2D type.
(A popular example being the original Mario game.

To make it you need the following:

animations:
-right view standing (1 frame)
-right view walking (standard of 3-4 frames)
-right view jumping (standard of 12 frames (tween up and down))
-right view crouching (1 frame)
(there are no left view because action-script can change it’s direction dynamically).

Detection Scripts:
-Detect the pressing of the UP key
-Detect the pressing of the Down key
-Detect the pressing of the Left key
-Detect the pressing of the Right key

Action Scripts:
-Flip the character
-Make the character jump
-Make the character move left/right

so, how do we set this up you ask?

First, make a movie clip for each of the animations (all 4).
Then, Make a new movie clip called “character” and give it the instance name “character”. Make 4 blank frames in the “character” movie-clip and put one of the animation movie-clips in each of them. Then put the Stop(); command on all of the 4 frames. Now, label each frame as appropriate to its animation “walking” “standing” “jumping” “crouching”.

now It’s time for the action-script! (To be placed in the “character” movie-clip).

Now for the last bit of scripting.

Make sure you put the stop command in the last frame of every animation except “walking”;

Now put:

at the first frame of your jumping animation.

and:
Code:

at the end of your jumping animation.

and you’re done!

This tutorial is in action-script 2.0

First, lets make a cursor.
Draw a cursor and turn it into a movie clip.
open up the actions window for the movie clip and place this action-script in it:

now go into your first frame’s actions window and type:

congratz! you now have a custom cursor!

but, lets do a little more now.

go into your cursor’s movie-clip and make two dynamic text boxes next to your cursor. now, give one box the instance name mousex and the other the instance name mousey.

now, select your cursor image (not the text boxes) and make it into a movie-clip again, so you have a movie-clip inside a movie-clip. in the actions of your new movie clip, type:

Now you can see the coordinates of your mouse!

This tutorial is for action-script 2.0

Commands to be covered: (all commands to be used in movie clips)

Code placed in the { } is executed when the specified condition occurs. For example:
Code:

* load
The action is initiated as soon as the movie clip is instantiated and appears in the Timeline.

* unload
The action is initiated in the first frame after the movie clip is removed from the Timeline. The actions associated with the Unload movie clip event are processed before any actions are attached to the affected frame.

* enterFrame
The action is triggered continually at the frame rate of the movie clip. The actions associated with the enterFrame clip event are processed before any frame actions that are attached to the affected frames.

* mouseMove
The action is initiated every time the mouse is moved.

* mouseDown
The action is initiated when the left mouse button is pressed.

* mouseUp
The action is initiated when the left mouse button is released.

* keyDown
The action is initiated when a key is pressed. Use Key.getCode() to retrieve information about the last key pressed.

* keyUp
The action is initiated when a ky is released. Use the Key.getCode() method to retrieve information about the last key pressed.

* data
The action is initiated when data is received in a loadVariables() or loadMovie() action. When specified with a loadVariables() action, the data event occurs only once, when the last variable is loaded. When specified with a loadMovie() action, the data event occurs repeatedly, as each section of data is retrieved.

* rollOver
The action is initiated when the move clip is rolled over by the mouse.

* rollOut
The action is initiated when the mouse rolls off of the movie clip.

* press
The action is initiated when the mouse presses the movie clip.

* release
The action is initiated when the mouse releases a press on the movie clip.

This tutorial is for actionscript 2.0

commands/statements to be covered:

Definitions:

The  stop(); command:
The stop command is used to stop your flash file from moving further in its time-line.

The gotoAndPlay(); command:
The gotoAndPlay command does exactly what it sounds like, it goes to a frame in the time-line, and has the time-line continue playing from there.

The gotoAndStop(); command:
The gotoAndStop command is just like the gotoAndPlay command except once it goes to the designated frame, it stops progressing further in the time-line.

The if(){ } statement:
The if statement is used to restrict a script action from occurring unless a certain requirement or condition is met.

The else if() { } statement:
The else if statement is used after the if statement when the if statements requirement is not met and the programmer wants to check for a different requirement and designate a different response to be taken if the new requirement is met.

The else() { } statement:
The else statement is used after the if statement or else if statement if the programmer wants an action to be executed on the event that none of the requirements listed in the if/else if statement(s) are met.

Usage:

The stop command can only be placed as action-script in a frame. Just write “Stop();” anywhere in the action-script of a frame, and the time-line will stop progressing at that frame.

The gotoAndPlay command can only be placed as action-script in frames or movie-clips. in a frame, all you need to do is place the command in the frame you want to skip from and place the frame number you want to skip to inside the (). for Example: gotoAndPlay(5); placed in a frame will cause the time-line to skip from the frame where the command is written to frame 5 and have the time-line continue to play from there.
If you write this command as action-script in a movie-clip placed in your main time-line, your movie-clip will gotoAndStop(5); instead of your main time-line because movie-clips have time-lines of their own, and the time-line it is placed on is it’s “parent”. to control the main time-line (in this case the movie-clip’s parent) you must access. You can access the parent of a movie-clip simply by typing _parent. before the command. So to control the main time-line from this movie-clip, you can type _parent.gotoAndStop(5); furthermore, if you place yet another movie-clip inside this movie clip, the main time-line becomes the new movie-clip’s parent’s parent. So, to access the main time-line from this movie-clip inside the original movie-clip, just type _parent._parent.gotoAndStop(5); It’s that simple.

To use the if statement, you must first know what requirement or condition you are looking to see is met. You must then know what you want to happen if that condition is met. For example, ill use this script: (to be placed in a frame)
Code:

As you can see, you type:

I used == instead of = because == is used if you want to compare two variables for equivalence. = is used if you want to make a variable equivalent to a different variable.

you can even make if statements like:
Code:

The else if statement is written just like the if statement. The difference is that there MUST be an if statement or another else if statement before it, and its condition can only be met if none of the conditions before it are met. For example:

Code:

because the condition if(Toms_color == "green") is met, the else if statement if(1 + 1 == 2) will not be checked.
If however you change Toms_color to “purple”, the condition if(Toms_color == "green") will not be met, and if(1 + 1 == 2){ will be met.

The else statement MUST be used after an if statement or an else if statement. The else statement will only execute if none of the statements before it are met. For example:

Code:

Because Toms_color does not equal red,blue, or green, the else statement is triggered, and the trace command is output.

functions that can be used in these statements:

== (is equivalent to)
!= (is not equivalent to)
> (is greater than)
< (is less than)
>= (is greater than or equal to)
<= (is less than or equal to)

you can also shorten your script by placing multiple conditions in one if/else if statement by using && or ||.

using && is almost like saying “and”.
using || is almost like saying “or”.
in &&, all of the conditions must be met.
in ||, only one of the conditions must be met.
For example:
Code:

To make things easier for those who are new to flash, we will be using actionscript 2.0

Before I explain some action-script, I will briefly describe the flash interface. If you are already familiar with it’s basics, you may skip this.

First, we need to start up flash. Once started, you will see the option to make a new flash document, click it. (If you are using flash CS3, choose to use action-script 2.0)
You now have a blank document open. Here are some things you should notice:
At the very top are the basic options (file, edit, view, insert, etc…) I may refer to those options in other tutorials.

Below this is the time-line. the time-line is broken into frames (labeled at the top from 1 to infinite).

You will notice that to the left of the time-line, are the layers. below the layers you see some small buttons to have layers added or deleted.

Below The time-line and layers, is the main window. This is where all images and objects are displayed. You can put images or objects above other images or objects simply by having them placed in a higher layer.

To the left of the main window you see various tools used for objects in the main window such as (select, moves, line creation, rectangle/circle creation, the paint bucket, etc…)

On the very bottom bar (below the main window) you can choose from options such as the main window’s size, the frame rate, and the background color.

Now that you know some of the basics of the interface, I can explain some basic action-script. these are the commands I will cover:

Now, you may ask, where do I type these commands? Well, in action-script 2.0, you can apply script to many objects such as buttons, movie-clips, and frames. to do this, select the object (by clicking it and seeing that it is “highlighted”) and press your F9 key. or right click and select “actions”.
So, to start this off, go to your tools to the left of the main window, select the rectangle tool and draw a rectangle in the main window. then, choose the black arrow tool(selection/normal cursor) and select your rectangle. Then, you can either right click and select “convert to symbol” or you can press F8. In the popup, write a name for you move-clip and make sure the check-box for “movie-clip” is selected. then press “ok”.
you can now add action-script to this movie-clip. left click it once and press F9 or right click it and select “actions”.
in the window that pops up type the following:
Code:

now, press CTRL + Enter to preview your flash file. you should notice three things.
1. text keeps popping up non-stop
2. you can see “hello world”
3. you see undefined most of the time.
This can all be explained in the code you put into the movie-clip.
I will explain the code line by line:

Because there is only one frame, you will “enterFrame” at whatever speed your frames per second is. (The default is 12, so you whatever you have inside the { } after onClipEvent(enterFrame){ will happen 12 times every second.

The trace command is a useful command for flash developers because it allows us to see when things happen, or what a variable is equal to. It is especially useful because it wont be shown when the document is published. In this case we have (“Hello World”); after it. no matter what you want to output with the trace command, you will always put it in () and end it with ; However, if what you want to output is a string of text, like Hello World, you must put it in double quotes so flash nows that it is just a string of text. hence trace(“Hello World”);.

again the trace command. The difference here however is that there are no double quotes. because of this, flash interprets “variable_1″ as the name of a variable. We have, however, not made a variable so it does not know what value to output. because of this, it will, by default output “undefined”. Meaning that the variables is undefined.

and

This again is the trace command, and again, there are no quotes, so flash will take _global.variable_1 and _global.variable_2 as variable names (that are of course undefined). the difference here though, as I’m sure you have noticed is the “_global.” _global. is placed in front of a variables when it is to be used from any place in your flash document. without it, the variable is restricted to the code where it is defined.

this last bracket is used to close off the onClipEvent(enterFrame){ bracket. Everything between those two curly brackets is supposed to happen “onClipEvent(enterFrame)” or, 12 times a second.

Now, lets make this a little more interesting.

Open up the actions for the movie clip you made and add
Code:

right below onClipEvent(enterFrame){

If you press CTRL + Enter you will see that Hello World and Hello to you too! are both output by the trace commands.

This is because you designated a value for the variable “variable_1″; by using the var command. you made the variable_1 = a string of text by putting the text in double quotes. If you did not use double quotes, it would think Hello to you too was the name of a variable and try to make variable_1 equal it its value (undefined).

Well, now we should finish this off. Exit the actions window for the movie-clip and open the actions window for frame 1 be either right clicking it and selecting “actions” or left clicking it once and pressing F9.

here type the following code:

Code:

now, I will explain this line by line:

the var command states that there is a variable named whatever comes after it (in the case “a_brake”). at the same time, we can put = #/variable/”text”. if you want it to equal a number, do not use double quotes. if you want it to equal a variable, do not use double quotes, but if you want it to equal a string of text, put that string of text in double quotes. You can also split this up. First declare the variable exists by saying “var a_brake” and then latter on in the script you can make it equal to something a_brake = #/variable/”text” .

when making a _global. variable, the var command is not needed.
however, everything after it is the same.

here I said it equals “watcha ” (the string of text “watcha “) + “wanna” (the string of text “wanna”) + ” do?” (the string of text ” do?”). when adding string of text together, it appends one after the other, meaning _global.variable_1 will equal “watcha wanna do?”. because this is an _global. variable, it can be accessed by the script in our movie clip.

Here, we say that _global.variable2 equals the string of text “take ” plus the variable a_brake (it’s a variable because there are no quotes around it). because a_brake is a equal to a string of text, it will append it after “take “.

pressing CTRL + Enter should display this.