Flash game creation tutorial – part 5.2

March 14th update: part 5.3 released.

Now we will discuss about code optimization (the boring – but very important – part) and some visual tricks to make the game look better, and some more issues.

Code optimization

In tutorials 1 to 5.1, I always include the ball actionscript in the ball object. This is correct, but it might create confusion when you have to deal with a lot of objects.

You just can’t remember where did you put that piece of code. Imagine to pick up a game coded in this way after some weeks… would you really remember where did you put that collision script?

So, we will learn how to put all the code in a single frame.

Example 1: the ball

This is the same movie seen in the “No walls and speed limit” example covered in tutorial 5.1.

This time, as said, there is no actionscript in the objects, just the main script in frame 1

Let’s see the script:

Line 1: I attach the movie “hero” (the ball) on the stage and call it as “hero_on_stage” (this will be the instance name). The 10000 is the depth of the movie. An object with a higher depth than another will appear “in front” of it. Just imagine that an object with an higher depth is on an higher layer. The {_x:200,_y:20} means that the _x value is set to 200 and the _y to 20. Basically, this line acts like I took the hero from the library panel, instanced as “hero_on_stage” and position it to 200,20

Lines 2-8: Here I put the declarations previously included in the onClipEvent (load)

Line 9: The main loop previously called onClipEvent (enterFrame) now is called in this way.

The other lines work in the same way as in the previous example. Just notice that all attributes like _x, _y, _rotation are defined using this._x, this._y, this._rotation…

Example 2: The scrolling

To optimize the scrolling example seen in tutorial 5.1 we are using the same technique: one single actionscript in the first frame.

The theory is the same of the previous example, just notice lines 25-29 that makes the player (kira) face left if she is going to the left, and right if she is going to the right. How can I did it? Simply inserting two frames in the kira object, one with kira facing left, one with kira facing right.

And that’s where the boring part ends.

Now…

Eye Candy 1: Trails

Even if you may think a flash game can be funny even with simple graphics, you should improve the visual appeal as much as you can. Let’s see some tricks.

We will have our ball leaving a trail when it moves. In a very simple way.

First, you need to create a new movieclip with a shape on it, then you have to create another new movieclip with the previously created movieclip in it.

This way:

(never mind if you should find it a bit unclear, you will find all source codes at the end of the tutorial)

1: The shape itself: a red circle with a blue border

2: The movieclip where we draw the shape

3: Another movieclip, with the movieclip seen at 2 inside of it

4: Look how I instanced the movieclips

And now the actionscript:

Line 2: I attach the trail_sprite object (the one containing the movieclip with the shape) on a depth lesser than the hero’s one (it will be behind the ball)

Line 3: I create a new BitmapData object called trailbitmap.

What is a BitmapData?

From macromedia livedocs: The BitmapData class lets you create arbitrarily sized transparent or opaque bitmap images and manipulate them in various ways at runtime. This class lets you separate bitmap rendering operations from the Flash Player internal display updating routines. By manipulating a BitmapData object directly, you can create very complex images without incurring the per-frame overhead of constantly redrawing the content from vector data.

Basically, the bitmap data is a “field” where we can apply various visual effects.

It is declared in this way:

BitmapData(width:Number, height:Number, [transparent:Boolean], [fillColor:Number])

So my BitmapData has a width of 500 (same of the movie), height of 350 (same of the movie), and it’s transparent. The fourth parameter, the fillcolor, is not so important since it’s transparent.

Line 4: I create an empty movieclip (a new one) called “trail” at depth 1 (behind the other ones)

Line 5: In this trail movieclip I attach the BitmapData previously created

Line 6: I set the trail_mc clip to invisible. I mean I do not want to see the trail_mc clip, I only want to see its effects on the BitmapData

The other lines are the same seen in previous examples until…

Lines 57-58: I set the _x and _y of the trail_sprite movieclip inside the trail_mc movieclip to the same values of hero’s _x and _y. I mean that I am moving the shape movieclip inside the trail_mc movieclip that is the one containing the movieclip with the shape. Don’t worry if you think you can’t understand it… we will discuss about it in other tutorials.

Line 59: I draw the trail_mc movieclip (with its inner movieclip updated) inside the BitmapData object

Line 60: I define a rectangle starting at (0,0) with width = 500 and height = 350. This is the rectangle where we are going to create the special effect.

Line 61: Defining a blur filter. This filter has 3 parameters: The amount of horizontal blur (set to 2, I noticed it works better with multiples of 2), the amount of vertical blur (same thing) and the number of times to perform the blur (when it’is set to 1, the result is a softly unfocused look, when it’s set to 3, it approximates a Gaussian blur filter)

Line 62: The effect is applyed. It’s easier than it may seem, I am considering about creating a complete tutorial about it anyway.

Eye Candy 2: Explosions

If in the previous example we had a trail, in this one we will consider an explosion.

Let’s apply the same theory to the tunnel game:

Line 15: A new variable called die. It will states if the player… died…

Lines 29-32: xspeed and yspeed are updated only if the player didn’t die.

Line 41: Things to do if the player hit the wall and die < 100 Line 46: Tell the explosion movieclip (the “trail_sprite” in the previous example) to goto and play frame die*2+1. Now we have no more a shape but an explosion movieclip to be blurred

Line 47: Set the player alpha to 0 (to “remove” the bubble from stage)

Line 52: Increment die by 0.5. In this way we will remain inside this loop until die < 100... 200 frames or so. Lines 52-60: Things to do if die >=100 (the player died some frames ago): set the _alpha to 100 (return visible), set die to 0 again and reset wall _x and _y and speed.

Now that some visual effects are done, it’s time to…

Adding sound

In this example we want to add a sound effect to our explosion.

First, you must import the sound in the library and instance it. When you have a linkage, the actionscript is very simple:

Line 8: Defines a variable (exp_sound) for a new sound

Line 9: Attaching the sound. In this case, boom is the linkage name of the sound

Lines 43-45: When the collision is checked and die is equal to 0 (it’s the first frame where we are checking the collision), play the sound.

Now download the source code of all examples, give me feedback and proceed to part 5.3

  • Pingback: Flash game creation tutorial - part 1 at Emanuele Feronato()

  • Pingback: Flash game creation tutorial - part 2 at Emanuele Feronato()

  • Pingback: Flash game creation tutorial - part 3 at Emanuele Feronato()

  • Pingback: Flash game creation tutorial - part 4 at Emanuele Feronato()

  • Pingback: Flash game creation tutorial - part 5 at Emanuele Feronato()

  • Pingback: Flash game creation tutorial - part 5.1 at Emanuele Feronato()

  • Pingback: » Blog Archive » Colección de Vínculos Flex()

  • sambondashus

    awsome, but how do you get something in the bacground to stay where it is to lead to another frame when you hit it without being part of the wall and reseting your spot

  • Alex

    I LOVE IT

  • Nic C

    Sweet Man. Your tutorials rock. Keep them coming. What do you do for a living?

  • Mike

    I’ve learned a lot from your tuts, and it’s good to see that you are still updating this one and not focusing all your efforts on the line rider one….good job =)

  • abhilash

    nice tutorial only one suggestion
    u should cover more things in a tutorial

  • Pingback: Flash game creation tutorial - part 5.3 at Emanuele Feronato()

  • ahmad

    thank, it helps me very much

  • Excellent job! Thank you for the very helpful tutorial. I’m looking at Flash for our games and educational tools for kids with disabilities. Your game examples are great. I appreciate the effort you put into putting this together.

  • Charles

    Brilliant tutorial!
    I’m going to try and make a game now…wish me luck!

  • Pingback: Using hotoshop to draw levels for Flash games at Emanuele Feronato()

  • Pingback: Create a Flash ball game with visual from above tutorial at Emanuele Feronato()

  • i really dont know how to thank you for all what you did for us(beginners).. i think, the best way is to make something based on your tutorial and send it to you..
    thank you

  • ok… i tried the 1 script thing in the root frame but it wont put my hero onto the screen, i even tried an exact copy/paste and it still didnt work. My hero is named “hero” in the library.

  • Wow! Your tutorials are AWESOME!! Keep ’em coming!

  • AwesomeRific

    Hey man, how can I change the walls? Well what I really mean is, I’ve changed the walls but not the code doesn’t work… What am I suppose to do?

    I eventually after a while got the

  • jimbob

    can some1 tell me how to play a sound when mouse is clicked??? iv got the sound and linkage it and all that but i need code

  • I have a question. How would you attach the trail to the hero clip instead of the explosion? I can attach the trail clip, but I cannot figure out how to make the trail extend from the hero clip.

    See actionscript here:

    _root.attachMovie(“kira”, “kira”, 8000, {_x:234, _y:159});
    _root.attachMovie(“wall”, “wall”, 10000, {_x:240, _y:0, _width:5700, _height:5700});
    _root.attachMovie(“trail_sprite”, “trail_mc”, 4000);
    trailbitmap = new flash.display.BitmapData(500, 350, true, 0x000000);
    _root.createEmptyMovieClip(“trail”, 1);
    trail.attachBitmap(trailbitmap, 0);
    trail_mc._visible = false;
    yspeed = 0;
    xspeed = 0;
    wind = 0.00;
    power = 0.65;
    gravity = 0.1;
    upconstant = 0.75;
    friction = 0.99;
    kira.onEnterFrame = function() {
    if (Key.isDown(Key.LEFT)) {
    xspeed = xspeed-power;
    }
    if (Key.isDown(Key.RIGHT)) {
    xspeed = xspeed+power;
    }
    if (Key.isDown(Key.UP)) {
    yspeed = yspeed-power*upconstant;
    }
    if (Key.isDown(Key.DOWN)) {
    yspeed = yspeed+power*upconstant;
    }
    xspeed = (xspeed+wind)*friction;
    yspeed = yspeed+gravity;
    if (xspeed>0) {
    this.kira.gotoAndStop(1);
    } else {
    this.kira.gotoAndStop(2);
    }
    _root.wall._y -= yspeed;
    _root.wall._x -= xspeed;
    if (_root.wall.hitTest(this._x, this._y, true)) {
    xspeed = 0;
    yspeed = 0;
    _root.wall._x = 240;
    _root.wall._y = 0;
    }
    this._rotation = this._rotation+xspeed;
    _root.trail_mc.trail_sprite._x = this._x;
    _root.trail_mc.trail_sprite._y = this._y;
    _root.trailbitmap.draw(_root.trail_mc);
    trail_rectangle = new flash.geom.Rectangle(0, 0, 500, 350);
    trail_blur = new flash.filters.BlurFilter(2, 2, 3);
    _root.trailbitmap.applyFilter(_root.trailbitmap, trail_rectangle, new Point(0, 0), trail_blur);
    };

  • B

    Do you have any examples that include both a score and a maze? I am making a game that includes both and it is insisting on putting the score behind the maze so you cannot see it most of the time. I cannot attach the score as a movie, then give it a higher lever number, because then it does not know what the score is. thanks

  • Hello Emanuele, I really love your tutorials you’ve been an inspiration to start coding flash games.

    I just have a little question for you. I can’t get the “Trails eyecandy” part to work. My question is: how do i make the “trail_shape” MC to be INSIDE the “trail_sprite” MC?

    Thanks in advance!

  • Tim wilson

    just awsome so simple but efective you should be a teacher, most flash tutorials are so boring just reading a huge wall of text but you have fun examples evry step of the way.

    never stop making these

  • Umer

    good

  • The Erik

    this is excellent! :)

  • Ola

    Hi!
    How can I make that when energy is 0, game moves to frame 2, where is text “Game Over” and button “start again”.

    I tried this, but it didnt work:

    if (energy==0) {
    gotoAndStop(2);
    }

  • Gino Zappia

    I came to check in on my question six months later. Sad to see no response. :(

  • n

    very good

  • ‘sdflf’akdlfkl

    When you die, you can still move the maze around the explosion, and it will pause the animation until you hit a wall again.

  • E200

    It’s great, socurcecode works fine.
    But, when i create a new file, it doesn’t work.
    It seems _root.attachMovie(“hero”, “hero_on_stage”, 10000, {_x:200,_y:20});
    not get executed. anybody help

  • uno

    E200 you need to check “Export for ActionScript” in the hero symbol properties

  • Yuval

    in the last examples u can play with the explosion and as long you’re away from the corner it continue

  • Tommy

    ‘sdflf’akdlfkl was my nickname for 2008.

    I came back to my post 9 months later. Sad to see no response… :(

  • Hey there. Thanks for the fantastic tutorials.

    I have one suggestion. I don’t know if anyone else stated before but, you are putting multiple swf files showing your steps on the pages. But each one of them starts as the page loads. Some of them constantly makes sounds like the one with the explosion on this page. Or multiple running swf’s may degrade the performance on some computers.

    Do you plan to put a “switch” to “run” the animation? It would be a nice feature, allowing us to fully enjoy your tutorials.

    Cheers,

    Sinan

  • Crescent

    There is a glitch you are still able to fly after you die and this can allow you to survive about 3 deaths

  • zard

    you can move with the explosion and continue alive

  • Serkan Buldan

    I recognised the same and about the suggest removing event listeners for keyboard, after collision.

  • Thwap Thwap

    Hi,just wanted to say, these tutorials are the best thing for helping beginners like me understand flash and be able to make fun games.

    But being a beginner and all, i am now stuck on this tutorial. I have always been able to understand how to apply coding to a MC but then at the start of this tut. the coding involves the “_root.attachMovie” thingy.

    I am stuck now, because when i try to do this all i achieve is “Access of undefined property / root …”

    Help would be accepted gratefully.

    Also, if there is one, could you please link the tutorial for how to make and work packages and imports?

  • person

    it is funny how you can “move the explosion” with the arrows

  • raco

    man this is fkin unbelivable. Im trying with this “trails” and “explosions” 4 a week and this is just frustrating for me. The trail is just a blured circle, and the explosion: at first i can’t even draw it like u did, so i just did in fram by frame. But it doesnt play… this trail_mc, trail_sprite, bitmap datasa and al that crap… I’ve wirie and draw everything by myself, then i copyed from ur files and it’s still not working.

    So when i will cool daow i will try in some other way. maybie _root.save…

    SO in the end: is it so hard to describe this things a little more. Don’t take me wrong. This are good tutorials although i’m staring at my notes, in adobe flash. I’m trying to find solution on google and youtube, but i don’t even know what to look 4 -.- coz for me everything it the sam like ur riles (exept colours)

  • John

    If my hero is a straight line, not a circle, when i try rotate, the single thing that rotates is the shape, but the trail stays normal. How can I fix it?

    Sorry for my spelling.