Adobe Flash Basics

Flash Tutorial 6: A Moving Character Type 2

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:

1
2
3
4
5
stop();
if(Key.isDown(Key.RIGHT)){
   this._x+=_global.walking_speed;
   gotoAndPlay(2);
}

for facing left:

1
2
3
4
5
stop();
if(Key.isDown(Key.LEFT)){
   this._x-=_global.walking_speed;
   gotoAndPlay(2);
}

for facing forward (back of character to you):

1
2
3
4
5
stop();
if(Key.isDown(Key.UP)){
   this._y-=_global.walking_speed;
   gotoAndPlay(2);
}

for facing backwards (front of character facing you):

1
2
3
4
5
stop();
if(Key.isDown(Key.DOWN)){
   this._y+=_global.walking_speed;
   gotoAndPlay(2);
}

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
onClipEvent(enterFrame){
   _global.walking_speed = 2; //you can change this number to change the walking speed.
   
   if(Key.isDown(Key.RIGHT)){
      this._xscale = 100;
      gotoAndStop("right");
   }//end Key down RIGHT

   if(Key.isDown(Key.LEFT)){
      this._xscale = -100;
      gotoAndStop("left");
   }//end key down LEFT

   if(Key.isDown(Key.UP)){
      gotoAndStop("up");
   }//end Key down UP

   if(Key.isDown(Key.DOWN)){
      gotoAndStop("down");
   }//end key down DOWN

}//end on Clip Event

and you’re done!

Flash Tutorial 5: A Moving Character Type 1

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).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
onClipEvent(enterFrame){

   if(Key.isDown(Key.RIGHT)){
      this._xscale = 100;
      this._x += 2;
      if(_global.jumping != "yes"){
         gotoAndStop("walking");
      }
   }//end Key down RIGHT

   if(Key.isDown(Key.LEFT)){
      this._xscale = -100;
      this._x -= 2;
      if(_global.jumping != "yes"){
         gotoAndStop("walking");
      }
   }//end key down LEFT

   if(Key.isDown(Key.UP)){
      gotoAndStop("jumping");
   }//end Key down UP

   if(Key.isDown(Key.DOWN)){
      gotoAndStop("crouching");
   }//end key down DOWN

}//end on Clip Event

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:

_global.jumping = "yes";

at the first frame of your jumping animation.

and:
Code:

_global.jumping = "no"

at the end of your jumping animation.

and you’re done!

Flash Tutorial 4: Fun with the Cursor!

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:

this.startDrag("true");

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

Mouse.hide();

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:

1
2
3
4
onClipEvent(enterFrame){
_parent.mousex.text = _root._xmouse;
_parent.mousey.text = _root._ymouse;
}

Now you can see the coordinates of your mouse!

Flash Tutorial 3: Event Detection

This tutorial is for action-script 2.0

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

onClipEvent(load){ }
onClipEvent(unload){ }
onclipEvent(enterFrame){ }
onclipEvent(mouseMove) { }
onclipEvent(mouseDown) { }
onclipEvent(mouseUp) { }
onclipEvent(keyDown) { }
onclipEvent(keyUp) { }
onclipEvent(data) { }
on(rollOver){ }
on(rollOut){ }
on(press){ }
on(release){ }

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

1
2
3
on(press){
     trace("this happens when the movie-clip is pressed by the mouse");
}

* 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.

Flash Tutorial 2

This tutorial is for actionscript 2.0

commands/statements to be covered:

stop();
gotoAndPlay();
_parent.
gotoAndStop();
if { }
else if { }
else { }

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:

Stop();

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.

gotoAndPlay();

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.

if(){ }

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Toms_color = "green";
var Arias_color = "blue";
var Jacksons_color = "red";
var Brians_color = "blue";
var Nicks_color = "red";

if(Toms_color == "red"){
     trace("Toms color is red");
}
if(Toms_color == "blue"){
     trace("Toms color is blue");
}
if(Toms_color == "green"){
     trace("Toms color is green");
}

As you can see, you type:

1
2
3
if(*condition*){
*action if condition is met*
}

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:

1
2
3
if(1 + 1 + 1 == 3){
     trace("I can do math!");
}
else if(){ }

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Toms_color = "green";
var Arias_color = "blue";
var Jacksons_color = "red";
var Brians_color = "blue";
var Nicks_color = "red";

if(Toms_color == "red"){
     trace("Toms color is red");
} else if(Toms_color == "blue"){
     trace("Toms color is blue");
} else if(Toms_color == "green"){
     trace("Toms color is green");
} else if(1 + 1 == 2){
     trace("this condition will not be met");
}

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.

else{}

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Toms_color = "Purple";
var Arias_color = "blue";
var Jacksons_color = "red";
var Brians_color = "blue";
var Nicks_color = "red";

if(Toms_color == "red"){
     trace("Toms color is red");
} else if(Toms_color == "blue"){
     trace("Toms color is blue");
} else if(Toms_color == "green"){
     trace("Toms color is green");
} else {
     trace("Toms color is not red, green, or blue, it is "+Toms_color);
}

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:

1
2
3
4
5
6
7
8
9
10
11
if(1+1==2 && 1+2==3 && 1+3==4){
     trace("this will be displayed because all of the statements are true.");
}

if(1+1==2 && 1+4==3 && 1+3==4){
     trace("this will not be displayed because 1 + 4 != 3.");
}

if(1+1==2 || 1+4==3 || 1+4==4){
     trace("this will be displayed because at least one of the statements is true, 1 + 1 = 2");
}