First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
Search tutorials
Author: The crazy flash programmer

Ok, first thing?s first, open up flash pro 8 (I have tested this tutorial in flash mx, but the zip file will only work for flash pro 8), and create a new flash document 550 pixels wide by 400 pixels high. Draw a rectangle with no stroke using the rectangle tool. Next, select the text tool, and under the properties tab, you will see a drop down menu, select static text from the options, and write something like ?play? in the middle of the button. If you want, you can center the text in the button using the ?align? tab. Next, select the rectangle, then shift select the text and click modify > convert to symbol click the ?button? radiobutton , and name your button something like ?play button?. Now draw a circle without a stroke and for a fill, select one of the radial gradient fills at the bottom of the popup tab that appears when you click the fill color icon. Next, select the gradient transform tool and click on your new circle, you will see a bunch of confusing dots around the circle, and one in the center. Grab the one in the center with your mouse and drag it to the top left corner of the circle, you will see that the center of the gradient has moved to the top left corner of your circle, like your dot from before. Select this new circle and click modify >convert to symbol like before, but this time click the movieclip radiobutton and name your hero ?hero? for future reference. Draw another circle like before with a gradient, but this time make it a red gradient, because this will be our bad guy, and move the center of the gradient to the top left corner as described above. Click this circle and make it into a movieclip like our hero except this time name the movieclip ?enemy?. Next draw a battery pack and make it into a movieclip with the name ?enemy2?. Place all these elements on the stage in the first keyframe in a single layer with some text to create an intro screen. Copy-paste the following code into the ?play button? actions, which you should have on the stage.

on(release){
gotoAndStop(2);
}

There you have it; you have just completed the first and easiest part of this tutorial.

For the next part, double-click on the hero movieclip in your library panel (if your library panel isn?t open, click window > library ), right-click on the tenth frame in the hero?s timeline and choose ? insert keyframe ?. With your playhead on frame 10, click the black arrow tool, and stretch the top of the hero a little bit to the top. Right-click on frame 5 and choose ?insert keyframe? again, and with your playhead on frame 5, stretch the top of the hero a little bit to the bottom. Left-click on frame one and drag all the way to frame 6, on the properties panel you will see the word ?tween? and a drop down menu next to it, which currently says ?none? click on the word ?none? and choose ?shape? instead. If you press enter, you will see your bubble contract and expand at the top, this will be his shooting motion. Click on the first keyframe of our hero?s animation and add this code in the actions tab

stop();

Add this to the tenth frame

_root.fire=false;

Next go to the ?enemy? timeline by clicking it in the library panel and click on the enemy and choose ?modify > group?. Right-click on the 15th frame and choose ?insert keyframe?. With your playhead on frame 15, choose the free-transform tool from the tools pallete and click on the hero. You will notice a black square surround the enemy. Hold the shift key and drag one of the corners of the square towards the center of the enemy, and you will notice that the enemy has gotten smaller. Click on frame one and choose ?motion tween? this time. If you press enter, you will see your enemy get smaller, this will be his dying animation.

Paste this code into the first frame of the enemy?s animation.

stop();

Now paste this into the 15th frame of the enemy?s animation

gotoAndStop(1);
this.reset();
_root.score+=50;

Now choose the enemy2 from the library panel, because we will be giving him a dying animation. Add a keyframe in every frame from frame 1 to 15. Starting from the second keyframe and ending in the 15th keyframe, alternate the battery pack?s color from green to red in each keyframe. In the first keyframe, add this code

stop();

In the 15th keyframe, add this code

gotoAndStop(1);
this.reset();
_root.hp-=2;
if (_root.hp == 0) { _root.gotoAndStop(4); }


Now, on the main timeline (which you can get to by clicking on the ?scene1? button at the top of the flash program), add a layer by clicking on the picture of the piece of paper with a plus in one corner, which is at the bottom left of the timeline. Name this layer ?border?, on the second frame of the main timeline in the border layer, right-click and this time choose ?insert blank keyframe?. With that blank keyframe selected, draw (with the line tool) a border that follows the stage completely around. On the left line that makes the border, the instance name should be ?wall?. The top should be ?wall2?. The bottom should be ?wall3?, and the right line should be ?wall 4?. Add another layer and call it actions. Click on the second frame of the actions layer, then shift-click on the second frame of the first layer that was created when you opened flash, which is probably named something like ?layer1? and right click > insert keyframe (note: make sure that the text from the beginning is deleted in frame 2). On the second frame of the actions layer, add this code. Warning: this code may be lengthy.

stop();
var numEnemy = 5;
var numEnemy2 = 2;
_root.hp = 100;
_root.score = 0;
var fire = false;
function moveHero(speed) {
//check if key is down
if (Key.isDown(Key.UP)) {
_root.hero._y -= speed;
} else if (Key.isDown(Key.LEFT)) {
_root.hero._x -= speed;
} else if (Key.isDown(Key.DOWN)) {
_root.hero._y += speed;
} else if (Key.isDown(Key.RIGHT)) {
_root.hero._x += speed;
}
if (Key.isDown(Key.SPACE)) {
if (fire == false) {
fireBullets();
}
}
}
var i = 1;
function fireBullets() {
i++;
fire = true;
_root.hero.gotoAndPlay(2);
var newname = "bullet"+i;
_root.attachMovie("bullet", newname, i*100);
_root[newname]._y = _root.hero._y-1;
_root[newname]._x = _root.hero._x+65;
_root[newname].onEnterFrame = function() {
var bullet_speed = 20;
this._y -= bullet_speed;
if (this._y<-2.0) {
this.removeMovieClip();
}
for (var h = 1; h<=numEnemy; h++) {
if (this.hitTest(_root["enemy"+h])) {
this.removeMovieClip();
_root["enemy"+h].play();
//trace("enemy"+h);
}
}
};
}
function Enemys() {
for (j=2; j<=numEnemy; j++) {
var name = "enemy"+j;
_root.enemy1.duplicateMovieClip(name, j);
}
}
Enemy2s();
for (var h = 1; h<=numEnemy2; h++) {
if (this.hitTest(_root["enemy2"+h])) {
this.removeMovieClip();
_root["enemy2"+h].play();
//trace("enemy2"+h);
}
}
;

function Enemy2s() {
for (j=2; j<=numEnemy2; j++) {
var name = "enemy2"+j;
_root.enemy2.duplicateMovieClip(name, j);
}
}
Enemy2s();
_root.onEnterFrame = function() {
moveHero(8);
};

whew! Now that we got all that coding over with, we can create the hero?s bullet. Click ?insert > new symbol? and the dialogue box will appear. Name it bullet and click the moviecip radiobutton, then click the ?advanced? tab. Click the ?export for actionscript? checkbox. ?identifier? should be ?bullet?, like the name. Click ok, and you should be automatically inside the ?bullet? movieclip. Draw your bullet the way you want it, but make sure its x and y positions are all set to 0. Click on the ?enemy1? movieclip that?s probably on the stage from the intro screen, and add this code

onClipEvent (load) {
function reset() {
this._y = -10;
this._x = math.random()*550;
enemySpeed = (math.random()*4)+1;
}
reset();
}
onClipEvent (enterFrame) {
this._y += enemySpeed;
if (this._y>400) {
reset();
}
if (this.hitTest(_root.hero)) {
_root.gotoAndStop(3);
}
}

(note: make sure that the hero?s movieclip on the stage has an instance name of ?hero? that the ?enemy? movieclip has an instance name of ?enemy1? and that the ?enemy2? movieclip has an instance name of ?enemy2?) Click on the ?enemy2? movieclip and add this code

onClipEvent (load) {
function reset() {
this._y = -10;
this._x = math.random()*550;
enemy2Speed = (math.random()*4)+1;
}
reset();
}
onClipEvent (enterFrame) {
this._y += enemy2Speed;
if (this._y>400) {
reset();
}
if (this.hitTest(_root.hero)) {
_root.gotoAndStop(3);
}
}

You can test your movie now by clicking ?control > test movie? and you see that you can move your character with the arrow keys, shoot bullets with the space key, and the red enemy?s all die when you shoot them. You may notice, however, that not all the battery packs die when you shoot them. This is a bug that I found in the game that I used to my advantage to add some excitement to the game. The only thing that?s missing are some scores , a you die screen, and a you win screen, so lets get to it!

For the scores, choose the text tool, but this time choose ?dynamic text? and you will notice that you can draw a blue rectangle like normal static text, except that it doesn?t disappear after you click away, this is good, this is exactly what we want. Select this rectangle and you will notice in the properties tab a ?var? option. Set the var to ?hp?. Now select the text tool again and put it back to static text. Write something like ?taint-o-tron hp? in front of the dynamic text rectangle. Draw another dynamic text box beneath the other one, but set var to ?score?. Write something like ?score? in front of that dynamic text box. Now when you test your movie , you will notice that the numbers ?100? and ?0? appear one on top of the other.

This is due to those little helpful dynamic text boxes that we love so much. You may also notice that each time a red enemy dies, the score goes up by 50, this is due to the coding we put earlier in the ?enemy1? actions. Each time you manage to kill one of the battery packs, you will notice that the tain-o-tron hp goes down by 2, this is due to the coding we put into the ?enemy2? actions. Click on the 3rd frame of the ?actions? layer, and shift-click on the 3rd frame of the first layer (or ?layer1?) and right click > add keyframe. With your playhead in frame 3, drag the ?play? button from the library to the stage, and add this code to it

on(release){
gotoAndStop(2);
}

Now, with the text tool, write something like ?you lose, the evil red bubble has succeeded in conquering the bubble empire?. Now click on the 4th frame of the actions layer and shift-click on the 4th frame of the ?layer1? layer. Now right-click > add keyframe. With your playhead on frame 4, write something like ?you have saved the Bubble Empire, congratulations!? Drag the ?play? button from the library and add this code to it.

on(release){
gotoAndStop(2);
}

There you go, test your movie and have fun. If you want the source file that I created to help you with this tutorial, then email me at

alex.programmer@hotmail.com

Please put your question as the subject, or else I will not answer to your email. I will only be answering people who have problems making the games with my tutorials
Thank you for reading this tutorial?

» Level Basic

Added: 2006-09-21
Rating: 3.57 Votes: 7
(10 being the highest)
» Author
I fell in love with flash and flashkit helped me take my first steps into the wonderfull world of flash
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.