Flash Animations
Flash Animations
Animation 1:
The following steps are designed to work in Flash MX 2004, but they should work in Flash MX and maybe even Flash 5:
i. Create a new document in Flash. Set the movie's width to 300 and movie's height to 200. Set your Flash movie's frame rate to 25.
ii. Now, draw a filled-in circle using the Circle tool. Your drawing area should look like the following image:
[ draw a circle ]
iii. Once your circle has been drawn, select your circle and press F8. The Convert to Symbol dialog box should appear. Select the option for Movie Clip and press OK.
iv. Select your newly converted movie clip if it is not selected. Give your movie clip the instance name, dot:
[ give your movie clip the instance name 'dot' ]
v. Now, select your movie clip and press F9. The actions dialog box will appear. Copy and paste the following section of code:
onClipEvent (load) {
//data you may want to change
width = 300;
height = 200;
speed = Math.round(Math.random()*2)+1;
//initial positions
x = this._x=Math.random()*width;
y = this._y=Math.random()*height;
x_new = Math.random()*width;
y_new = Math.random()*height;
}
onClipEvent (enterFrame) {
//x movement
if (x_new>this._x) {
sign_x = 1;
} else {
sign_x = -1;
}
dx = Math.abs(x_new-this._x);
if ((dx>speed) || (dx<-speed)) { this._x += sign_x*speed; } else { x_new = Math.random()*width; } //y movement if (y_new>this._y) {
sign_y = 1;
} else {
sign_y = -1;
}
dy = Math.abs(y_new-this._y);
if ((dy>speed) || (dy<-speed)) { this._y += sign_y*speed; } else { y_new = Math.random()*height; } } vi. Now, select the first frame of your timeline. Press F9 again to display the Actions dialog box for the frame. Copy and paste the following section of code into that frame: i = 0; while (i<25) mouseinterval="setInterval(changeAlpha,100);" _alpha =" Math.round(_root._xmouse/550*100);" snowflakes =" 75;" snowflakes =" 75;" width =" 300;" height =" 200;" _xscale =" this._yscale="50+Math.random()*100;" _alpha =" 20+Math.random()*50;" _x =" -width+Math.random()*(3*width);" _y =" -10+Math.random()*height;" i =" 1+Math.random()*2;" k =" -Math.PI+Math.random()*Math.PI;" rad =" 0;" xmovement =" _root._xmouse;">(width+50)) {
this._x = -45;
this._y = Math.random()*height*2;
}
if (this._x<-50) { this._x = width+45; this._y = Math.random()*height*2; } if (this._y>=height) {
this._y = -50;
this._x = -width+Math.random()*(3*width);
}
The above three sections of code are fairly self-explanatory. The three sections control when to remove a snowflake from display and when to display it again. There are two horizontal boundaries and one vertical boundaries set in the code. Because the width and height are constrained by the actual values of the width and height variables, the boundaries scale evenly with the size of your movie.
Animation 4:
We will start off by drawing 2 objects on the stage and making them movie clips (MC’s).
The first MC is your character. For now, we will draw a circle. Draw your circle, select it and press F8. Once you circle is a movie clip double click it. Then select all of the shape. Press Ctrl + K and align the shape horizontally centered and bottom edge We now need to give it an instance name, for this tutorial we will call it char.
Your next MC will be your ground. So, draw a rectangle about 20px thick underneath your character, so when we add jumping he has something to fall on to. Once you have created it give the instance name of ground.
Basic Movement
Now for our first bit of code, in a platform game, you will need left and right movement. The following code also has friction in it. Friction gives the game a more realistic feel:
Go down to the actions for your character movie clip and add this code:
onClipEvent (load) {
speed = 0;
maxmove = 15;
}
onClipEvent (enterFrame) {
if (_root.dead) {
this.gotoAndStop("dead");
} else {
speed *= .85;
if (speed>0) {
dir = "right";
} else if (speed<0) dir = "left" dir ="="" dir ="="">-maxmove) {
speed--;
}
this.gotoAndStop("run");
this._xscale = -100;
} else if (Key.isDown(Key.RIGHT)) {
if (speed
speed = 0;
this.gotoAndStop("idle");
}
}
}
Gravity and Jumping
Next up we need jumping. This code will give you jumping; it would be inserted after the other key.isDown events:
if (speed<1>-1 && !attacking) {
speed = 0;
this.gotoAndStop("idle");
}
if (Key.isDown(Key.UP) && !jumping) {
jumping = true;
}
if (jumping) {
this.gotoAndStop("jump");
this._y -= jump;
jump -= .5;
if (jump<0) falling =" true;" jump =" -15;" jumping =" true;" jump =" 0;" speed =" 0;" maxmove =" 15;" jump =" -15;" jump =" 12;" jumping =" false;" falling =" false;" jumping =" true;" speed =" 0;" maxmove =" 15;" jump =" 0;" dir ="="">0) {
dir = "right";
} else if (speed<0) dir = "left" dir ="="" dir ="="">-maxmove) {
speed--;
}
this.gotoAndStop("run");
this._xscale = -100;
} else if (Key.isDown(Key.RIGHT)) {
if (speed
speed = 0;
this.gotoAndStop("idle");
}
if (Key.isDown(Key.UP) && !jumping) {
jumping = true;
}
if (jumping) {
this.gotoAndStop("jump");
this._y -= jump;
jump -= .5;
if (jump<0) falling =" true;" jump =" -15;" jump =" 12;" jumping =" false;" falling =" false;" dir ="="" dir ="="" text="0;" speed="0;." dir ="="" dir ="="" enemyspeed =" 2;" enemystepsright =" 0;" enemystepsleft =" 0;" enemydir = "left" enemydir ="="" _xscale =" -100;" enemydir ="="" _xscale =" 100;" enemystepsright ="="" enemystepsright =" 0;" enemydir = "left" enemystepsleft ="="" enemystepsleft =" 0;" enemydir = "right" dir="right" _xscale="100;" run="" attack="" attacking="true;" then="" next="" part="" go="" on="" your="" characters="" actions="" but="" stops="" from="" going="" frame="" which="" it="" will="" due="" code="" sets="" character="" idle="" when="" the="" is="" below="" 1="" and="" greater="" that="" negative="" so="" we="" need="" to="" add="" this="" into="" our="" else="" if="" speed="0;"><1>-1 && !attacking) {
speed = 0;
this.gotoAndStop("idle");
}
The last code is for the enemy, it needs to check if the enemy is hitting our attack point, which we placed on, our characters attack frame. Insert this on the enemy object:
onClipEvent (enterFrame) {
if (this.hitTest(_root.char.attackpoint)) {
enemyspeed = 0;
enemystepsright = 0;
enemystepsleft = 0;
dead = true;
this.gotoAndStop("dead");
}
if (this.hitTest(_root.char) && !dead) {
_root.char.jumping = false;
_root.dead = true;
}
When doing this it is vital you put the italic part (the part that kills you character) after the bold part, as the script reads down, and it sets that you enemy is dead before it hits your character.
Now we have set attacking true, we need to set it false, when control is released. So add this to the bottom of your char.
if (_root.ground.hitTest(this._x, this._y, true) && falling) {
jump = 12;
jumping = false;
falling = false;
}
}
}
onClipEvent (keyUp) {
// on Key Up
if (Key.getCode() == Key.CONTROL) {
// if the release is control
attacking = false;
// attacking is false
}
}
More Animations
In both your character and enemy MCs you need to put it a new frame, with the label dead. This is the frame where it shows your dead characters.
Obstacles
Probably the easiest things in the game to do are the obstacles such as spikes, etc. With this code we will not kill the enemy but set the _root timeline position back to 0 and send the character to a specified position and then resets all our variables. All you need to do is insert your obstacle image, make it a MC, and give it this code:
onClipEvent (enterFrame) {
if (this.hitTest(_root.char)) {
_root._x = 0;
_root.char._x = _root.char.startX;
_root.char._y = _root.char.startY;
_root.char._y = _root.char.startY+Stage.height/2;
_root.char.speed = 0;
}
}
We also need our characters’ Y position to be collected at the start of the game, so flash knows where to moves the character to:
onClipEvent (load) {
jumping = true;
speed = 0;
maxmove = 15;
Ypos = this._y;
jump = 0;
}
Health
Now for health we need to do multiple things. We firstly need to make another dynamic text box with the instance name health. We then need to set all our variables.
So, on the frame we will need to add:
score.text=0;
health.text=100;
Then on our obstacles we need to check if the health is smaller than or equal to 0, which is italics (you only need this on one obstacle) then we need to check that they are not dead before we set health down, so insert this:
onClipEvent (enterFrame) {
if (this.hitTest(_root.char)) {
if (_root.health.text<=0) { _root.dead = true; } if (!_root.dead) { _root.health.text -= 5; _root._x = 0; … … _root.char.speed = 0; } } } And we need to make the health move with the screen, so with the character edit in: if (dir == "right" && !_root.leftblock.hitTest(this._x+20, this._y, true)) { _root.health._x += speed; _root.score._x += speed; this._x += speed; _root._x -= speed; } if (dir == "left" && !_root.rightblock.hitTest(this._x-20, this._y, true)) { _root.health._x += speed; _root.score._x += speed; this._x += speed; _root._x -= speed; } To set the health up with a pickup you would put _root.health.text += 1 instead of the score so: onClipEvent (enterFrame) { if (this.hitTest(_root.char)) { _root.health.text += 1; unloadMovie(this); } } Pick up and Shoot Gun Now we get to the hardest part of the whole game, being able to pick up, and then shoot a gun. From the start, when I was creating my gunning abilities: First of all, I drew my picture of a gun, made that a MC, and gave it a code a code similar to the pickup items codes but setting a variable (gotgun) true, and then this is later checked and if it is true it will fire. Here it is: onClipEvent (enterFrame) { if (this.hitTest(_root.char)) { _root.gotgun = true; unloadMovie(this); } } I then had to draw in my shooting frames into my character MC, and then gave it a frame label of shoot. After that I added in 2 points of codes to my character. i. onClipEvent (load) { jumping = true; speed = 0; maxmove = 15; jump = 0; _root.maxshoottime = 100; } ii. onClipEvent (enterFrame) { if (!_root.ground.hitTest(this._x, this._y, true) && !jumping) { this._y += 6; jump = 0; jumping = true; } if (!_root.shooting) { _root.timer = 0; _root.mvsp = _xscale/20; } … iii. } else if (Key.isDown(Key.CONTROL)) { this.gotoAndStop("attack"); attacking = true; speed = 0; } else if (Key.isDown(Key.SPACE)) { if (_root.gotgun == true && !_root.shooting) { _root.attachMovie("bullet", "bulleter", 1, {_x:_root.char._x, _y:_root.char._y-25}); _root.shooting = true; with (_root.bulleter) { onEnterFrame = function () { if (_root.timer>_root.maxshoottime) {
_root.shooting = false;
unloadMovie(this);
}
_root.timer++;
_x += _root.mvsp;
};
}
speed = 0;
this.gotoAndStop("shoot");
}
} else if (speed<1>-1 && !attacking) {
…
You now have to draw your bullet. Once you have drawn it press F8 to make it a MC. Then open your library, find your bullet, Right-click it, go to linkage and click it. Then select the checkbox next to “Export for Action Script”. Now go to the Identifier field and type bullet.
One final thing is, you may notice that after a while of playing your game all your objects go out of place. To fix that you would insert in a code to re-enforce them. To re-enforce objects when moving your _root timeline you need to set their x position to the position in which they started at minus the current position of the _root.
So for that you need to place in a code into your characters load actions to get the starting x co-ordinates of your objects. We will also get the y position of your character for when he dies.
onClipEvent (load) {
jumping = false;
speed = 0;
maxmove = 15;
healthX = _root.health._x;
scoreX = _root.score._x;
Xpos = this._x;
Ypos = this._y;
_root.maxshoottime = 100;
}
And in the enterFrame events you re-enforce their positions:
onClipEvent (enterFrame) {
_x = Xpos-_root._x;
_root.score._x = scoreX-_root._x;
_root.health._x = healthX-_root._x;
if (!_root.ground.hitTest(this._x, this._y, true) && !jumping) {
---
Labels: flash animations
posted by Dinesh @ 11:59 PM
0 Comments
)
)
)
)
)
)
)
)
