Adobe Flash Basics

Flash Animation/Effects Tutorial 2: Shape Tweens

0

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 Animation/Effects Tutorial 1: Motion Tweens

0

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

  11. Right now your Symbol is in frame1 of Layer1. Select frame 20 and press F6 to insert a new keyframe.
  12. Still keeping playhead on frame 20, move your Symbol to any other position other than the present one.
  13. 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.
  14. Now press (Ctrl+Enter) to view your motion tween.

Flash Tutorial 8: AI Enemies Type 2

0

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


onClipEvent(enterFrame){
var AI_speed = 6; //the higher this number the faster the AI moves
var reaction_distance = 300; //this higher this number, the farther the AI can "see" your character from.

var AI_width = this._xscale / 2;
var AI_hight = this._yscale / 2;

if(this._y < _parent.character._y){ var view_direction2 = "down"; var y_dif = _parent.character._y - this._y; this._xscale = 100; if(y_dif > x_dif){
gotoAndStop("down");
}
} else {
var view_direction2 = "up";
var y_dif = this._y - _parent.character._y;
this._xscale = 100;
if(y_dif > x_dif){
gotoAndStop("up");
}
}

if(this._x < _parent.character._x){ var view_direction = "right"; var x_dif = _parent.character._x - this._x; this._xscale = 100; if(x_dif > y_dif){
gotoAndStop("right");
}
} else {
var view_direction = "left";
var x_dif = this._x - _parent.character._x;
this._xscale = -100;
if(x_dif > y_dif){
gotoAndStop("left");
}
}

if(view_direction == "left"){
if(x_dif > AI_width + 100){
this._x -= AI_speed;
} else {
if(y_dif < AI_hight + 1){ trace("you've been hit!"); } } } else if(view_direction == "right"){ if(x_dif > AI_width){
this._x += AI_speed;
} else {
if(y_dif < AI_hight){ trace("you've been hit!"); } } } if(view_direction2 == "up"){ if(y_dif > AI_hight){
this._y -= AI_speed;
} else {
if(x_dif < AI_width + 1){ trace("you've been hit!"); } } } else if(view_direction2 == "down"){ if(y_dif > AI_hight){
this._y += AI_speed;
} else {
if(x_dif < AI_width + 1){ trace("you've been hit!"); } } } }

Flash Tutorial 7: AI Enemies Type 1

0

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.


onClipEvent(enterFrame){

var AI_speed = 1.5; //the higher this number the faster the AI moves
var reaction_distance = 500; //this higher this number, the farther the AI can "see" your character from.

var AI_width = this._xscale;
var AI_highth = this._yscale;

if(this._x < _parent.character._x){ var view_direction = "right"; var x_dif = _parent.character._x - this._x; var y_dif = _parent.character._y - this._y; } else { var view_direction = "left"; var x_dif = this._x - _parent.character._x; var y_dif = this._y - _parent.character._y; } if(y_dif <= reaction_distance){ if(view_direction == "left"){ gotoAndStop("jumping"); } else { gotoAndStop("crouching"); } } if(x_dif <= reaction_distance){ if(view_direction == "left"){ this._xscale = -100; this._x -= 2; if(_global.jumping != "yes"){ gotoAndStop("walking"); } } else { this._xscale = 100; this._x += 2; if(_global.jumping != "yes"){ gotoAndStop("walking"); } } } }//end on Clip Event

Flash Tutorial 6: A Moving Character Type 2

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:

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

for facing left:


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

for facing forward (back of character to you):


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

for facing backwards (front of character facing you):


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:


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!

Go to Top