Build 10 classic Flash games and learn game development along the way with this ultra-fast paced game development course.

If you love this blog, this is the book for you.

Buy the book

Get the source code of 12 commercial Flash games, which have been loaded more than 50 million times!

Learn from real world successful examples.

Get it now

Box2D for Flash Games teaches you how to make Flash physics games from scratch with the most advanced features.

Create the new Flash game smashing hit.

Buy the book

Flash game creation tutorial – part 5

March 14th update: part 5.3 released.
March 3rd update: part 5.2 released.
February 9th update: part 5.1 released.

Here I am with the 5th step of the flash game creation tutorial.

Read steps 1,2,3 and 4 and you’re ready.

I know some readers are in trouble with this tutorial because they can’t make their games work.
Unfortunately, I cannot reply to all private messages asking “how can I draw the ball?” or similar questions.

If you are completely new to Flash, then you should learn the basics, not only to follow this tutorial, but as a good way to start mastering any software.

Well, now let’s start the tutorial.

Many of you asked for a level management, and that’s what I am going to give you.

First, play 4 or 5 minutes with this little “game”.

It’s made of 4 levels, and each level is a frame.

Level 1: You have to collect 10 bubbles or coins or whatsoever to complete it
Level 2: You have to reach the exit
Level 3 and Level 4 aren’t properly levels but “rooms” with communicating doors. This is a new feature that isn’t included in Ball Revamped, but it can be useful if you want to create a game with “rooms” like old arcades during Commodore 64 age.

Every frame must have a stop(); in its actions window

Let’s see the actionscript in the frame 1 hero:

Frame 1

Nothing new but some minor changes at lines 29-36, where I check the collision between the hero and the coin, increase a variable (initialized at line 9) and go to the next frame if I collected the right amount of coins.

Please note: most of you sent me their works with a

gotoAndPlay(2);

but remember this actionscript is in the hero, not in the frame, so you must write

_root.gotoAndPlay(2);

to have it working.

If first frame is simple, the second is even simpler

Frame 2

Create a movieclip instanced as “exit” (the exit square) and check the collision. If the collision is true then go to frame 3.
That’s all.

Creating “rooms” instead of “levels” is a bit more complicated because until now the player “popped” in the stage, appearing from nowhere. If we have rooms, we want the player to pass through these rooms without popping from nowhere.

That’s the “difficult” part.

Frame 3

Let’s think about frame/level 3: how many ways does the player enter in frame 3? He can pop from frame 2 or enter from frame 4 through the door.

Some actionscript

Lines 2-7: Check if a root variable called throughdoor is set to 1. I decided to set this variable at 1 (almost) every time the player passes through a door. So if the player passed (the value is 1), I execute some strange code I will explain later.
Lines 8-11: If the throughdoor is different than 1, it means the player did not pass through a door, so I want to have xspeed and yspeed values set to zero, just line in all other examples seen before.

Lines 36-41: Check the collision between the player and a movieclip instanced as door (the “door” itself).
If the collision is true, I need to save xspeed, yspeed and y position of the hero. Why? Because I want to give the player a felling of “continuity” when passing through a door. If the player passes a door close to its upper margin and at a low speed, I want him to find himself in the next room close to the upper margin of the door at a low speed.
That why I save all these values.
Then I go to frame 4

Frame 4

Player can only enter in frame 4 from the door on frame 3.

Lines 2-4: I retrieve previously saved (from frame 3) values for xspeed, yspeed and y position
Line 5: I set x position to 30. It’s a value that gives the feeling of being just entered through the door
Lines 30-36: Checks collision between the player and the door in the same way as for frame 3, but I set the _root.throughdoor to 1 because I am “warning” frame 3 I did not came from the exit on frame 2 but through a door from frame 4.

That’s why in frame 3 I have the lines

I retrieve the speed and y position values like I did on frame 4 (but I set the x position to 470, giving the feeling of being just entered through the door) only if the _root.throughdoor variable is set to 1 (in this example, only if I come from frame 4).

And that’s all for now with level changing.

Some code improvements are on the horizon, but I’ll cover them in next tutorials.

Now you have not excuses not to send me a game made by you following these tutorials.
If you send me the game with the source code, I’ll publish to this site with a credit to you.

Meanwhile, download the source code and enjoy.

Waiting for your games and feedback now…

Continue to part 5.1

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (40 votes, average: 4.75 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 57 comments

  1. Flash game creation tutorial - part 1 at Emanuele Feronato

    on December 31, 2006 at 11:26 pm

    [...] December 23rd update: 5th part released. December 23rd update: 4th part released. December 6th update: 3rd part released. November 18th update: 2nd part released. [...]

  2. Flash game creation tutorial - part 2 at Emanuele Feronato

    on December 31, 2006 at 11:27 pm

    [...] December 31st update: 5th part released. December 23rd update: 4th part released. December 6th update: 3rd part released. [...]

  3. Flash game creation tutorial - part 4 at Emanuele Feronato

    on December 31, 2006 at 11:27 pm

    [...] WordPress « Collectabubble Flash game creation tutorial – part 5 » [...]

  4. Tony

    on January 1, 2007 at 7:39 pm

    Fantastic!!
    It’s great!!

    I’m making the game… I’ll tell you when I’m finished

  5. Tony

    on January 2, 2007 at 12:08 am

    How can I add sound to my game ?

    I tried with this in the actions layer and in the hero’s layer but it doesn’t work

    new Sound (C:\…);

    I also tried this

    new Sound,(C:\…);

    And this

    new (Sound,(C:\…));

    But anything works

  6. bigbill

    on January 3, 2007 at 5:23 pm

    Hi, first of all I just wanted to say that I think these tutorials are great, some really usefull info going on here and please keep up the good work.

    Second, I can make a game like the one above with two rooms conecting together but i’m having difficulty when I try more than one door in a single frame, any help would be appreciated.

  7. Dan

    on January 4, 2007 at 3:47 pm

    Hi nice tute!:) Ive looked for ages for one like yours! Keep it up!:)

  8. Izy

    on January 4, 2007 at 6:18 pm

    Thank you so much for these tutorials.

    I’ve tried quite a few tutorials for Flash, but not until I found yours could I tackle dynamic motion with ActionScript.

    Can’t wait for the next part, thanks a million.

  9. Francois

    on January 4, 2007 at 10:46 pm

    Absolutely a superb collection of tutorials!

    Very well put together.

    Thank you.

  10. Alexander

    on January 5, 2007 at 11:04 am

    Hey,

    Maybe an idea for the next tutorial: High Score list
    I know how to build one, but I think not many know…

    My old game, now a bit harder and with high score list:
    http://82.171.133.44/spel/

    Thanks alot for ur tuts!

  11. Alexander

    on January 5, 2007 at 11:07 am

    For sound do this:

    1. Import a sound file to your library.
    2. Make a new layer, named Music
    3. Drag the sound file in the library to the scene and your done :-)

  12. Tony

    on January 5, 2007 at 6:57 pm

    Thank you very much!

  13. Tony

    on January 7, 2007 at 11:46 pm

    Is this the last tutorial or are there going to be more?

  14. Emanuele Feronato

    on January 8, 2007 at 12:46 am

    It’s not the last tutorial, since the game is not completed.
    I am going to cover smart enemies, shooting, levels with multipe exit/doors, level editors and some other tricks. And I am preparing a step by step tutorial to make another classic… what if I say “Line rider”… ??

  15. guru

    on January 8, 2007 at 7:15 pm

    when will the next tutorial be out?

  16. Grifo

    on January 9, 2007 at 8:14 pm

    Really nice tutorial,
    I couldn’t find any other as good as this one.
    I did not read it all at this moment, but I can see it’s great.

    Emanuele, how many more “parts” do you expect this to have?
    Is it near the end or do you have lot’s of other cool things in Flash to show us?

    Thanks a lot, I’m waitin for the next one.

    —I’m brazilian, please forgive my writting(or writing?) errors…

  17. david

    on January 13, 2007 at 11:24 pm

    you can make sound play(but unfortunatly not stop) by:
    1 placing sound into a empty key frame
    2 give sound a instance name of “sSound”
    3 add this action script to the sound,

    sKeySound = new Sound();
    sKeySound.attachSound(“sSound”);
    watchKeyBoard = new Object();
    watchKeyBoard.onKeyDown = function() {
    trace(Key.getAscii());
    if (Key.getAscii() == 32) {
    box_mc._xscale = box_mc._yscale -= 5;
    }
    if (Key.getAscii() == 115) {
    sKeySound.start();
    }
    };
    watchKeyBoard.onKeyUp = function() {
    arrowMC.removeMovieClip();
    };
    Key.addListener(watchKeyBoard);

  18. Tony

    on January 14, 2007 at 7:34 pm

    The tutorial is very good. I made this game:

    http://img168.imageshack.us/my.php?image=supermagiantc2.swf

  19. Tony

    on January 16, 2007 at 6:47 pm

    Here’s the source code for you Emanuele
    http://www.box.net/public/gzxkl8jje8

  20. Mark

    on January 17, 2007 at 5:21 am

    thanx for the tutorials. Heres what i made from learning from your tut.

    http://www.deviantart.com/deviation/46645092/

    gj the tut was very informational.

  21. bigbill

    on January 17, 2007 at 12:49 pm

    Is there any way to increase the reliability of the hit test? because sometimes my character goes flying of the edge of the screen when the test runs repeatedly, any help would be appreciated.

  22. BLAH

    on January 21, 2007 at 2:24 am

    Great tuturial.

    How would you make solid walls that simply stop your characters movement though? (Rather than respawning him).

  23. qwerty

    on January 21, 2007 at 7:04 am

    I think you would just not include the

    _x = 120;
    _y = 120;

    which I believe makes the x and y coords 120

    correct me if I’m wrong :)

  24. Per

    on January 21, 2007 at 9:55 pm

    Great tutorials Emanuele!

    Hope you have the time and energy to show us more possibillities in this game. I think we are quite a few who are dropping by this site every day to see if there is new stuff.

  25. Garr

    on January 22, 2007 at 1:55 pm

    Hey, what do you do if you want to cap off the speeds? I’ve considered throwing a conditional statement around the incrementers and multipliers. Something like

    if (Math.abs(xspeed)

  26. Flash game creation tutorial - part 6a at Emanuele Feronato

    on January 24, 2007 at 12:37 pm

    [...] First, if you haven’t done it yet, read all steps from 1st to 5th, then here we go. [...]

  27. Flash game creation tutorial - part 3 at Emanuele Feronato

    on February 9, 2007 at 7:02 pm

    [...] February 9th update: part 5.1 released. December 31st update: 5th part released. December 23rd update: 4th part released. [...]

  28. And Mar

    on February 9, 2007 at 10:23 pm

    to blah

    I think to stop your character, rather than respawning him you would say

    if (_root.wall.hitTest(_x, _y, true)) {
    _x -= xspeed;
    _y -= yspeed;
    xspeed = 0;
    yspeed = 0;
    }

  29. Doug

    on March 2, 2007 at 11:44 pm

    Thanks for the superb tutorials! I’ve used it for an educational game at http://www.higherbebington.wirral.sch.uk/spacequest.html to help the kids with their maths! I’ve learnt so much from this!

    Thanks again!

    PS Let me know what you think!

  30. Flash game creation tutorial - part 5.1 at Emanuele Feronato

    on March 14, 2007 at 12:56 pm

    [...] Well, since lots of readers commented and mailed me part 6a is too hard and I should split it in pieces, that’s what I am going to do. This is the part 5.1, to be read after part 5. [...]

  31. Flash noob

    on April 14, 2007 at 7:58 am

    SO how would i put this code to make different levels and the exits and doors into the flash where the walls move instead of the hero?

  32. luke

    on May 20, 2007 at 4:05 pm

    hi, just here to say i need help on making the doors work thats hard for me since im a beginner could u tell me as easily as possible, thanks.

  33. Izz

    on July 1, 2007 at 12:20 pm

    Thank you so much! I’ve done almost all of this series of tutorials (taken me a few days, I’m pretty noobish) but I’ve learnt so much. I’ll give you the link for my game when I’m finished. They really are like the best tutorials on the web. They beat all the ones on NewGrounds & Tutorialised

  34. Nabz

    on July 18, 2007 at 12:24 am

    Hey! I really love your tutorials, I used them alot in the game I’m making. But I don’t understand how to implement advancing levels in my game ’cause my game is different than yours so all the things are different. Can you please teach me how to add something so that when I get XX amount of coins or touch something I proceed to the next level?

  35. some1

    on July 20, 2007 at 7:57 pm

    GREAT TUTS Im very excited now that i can do this, but i was wondering if you can tell me what are the names of the books that you learnt from?

  36. anon

    on July 28, 2007 at 4:46 pm

    First things first; amazing tutorials, i can’t believe i can do this much with flash though i’ve only owned it for a few days, thanks :-)

    But i have a problem, maybe i misunderstood, but you mentioned putting different actionscript into different frames, on the hero. I can’t find how to do this…. Do i put the actionscript into the frame now instead of the hero?, please help.

    (I’m having trouble downloading the source codes, otherwise i wouldn’t have asked).

  37. António

    on July 31, 2007 at 10:51 pm

    How can I, instead of lose when I touch a wall, make the “wall” a ground?
    Please awnser.
    And a magnificent tutorial, by the way.

  38. Des

    on September 1, 2007 at 6:44 pm

    Great tutorial!

  39. Steve

    on October 14, 2007 at 5:22 am

    This is very cool stuff, you could also make it so theres a wall on room 4 that you need a certan speed to get thru, having to go back into room 3 to build up speed o.O

  40. INFERNAL

    on December 2, 2007 at 5:20 pm

    Thanks for the tutorial really help me on making games thanks a lot

  41. A Gem of Flash Game Tutorials | Newbie Game Programmers

    on December 17, 2007 at 4:22 pm

    [...] game creation tutorial – Part 1 :: Part 2 :: Part 3 :: Part 4 :: Part 5 :: Part 5.1 :: Part 5.2 :: Part [...]

  42. Dimmy

    on January 21, 2008 at 9:20 am

    Hi

    I need little help *suprise suprise*

    How can i make simple Exit (When my “hero” hits it, scene2 starts)My game is little simpler than this coin thing, just move hero to the exit throught every level(something like that) Im newbie in flash games so i dont really know what scritp to type and where :) If you know what i mean and want to help, then please email me slenkovaari@hotmail.com

    Thanks for the tutorial

  43. Dimmy

    on January 21, 2008 at 12:08 pm

    if (_root.exit.hitTest(_x, _y, true)) {
    _root.gotoAndPlay(3);

    I think thats what i need, but i want it to change to scene2 not frame 2. Does this make sense? What do i need to write to make it change to scene2 on hit?

  44. Dimmy

    on January 21, 2008 at 12:21 pm

    got it working

  45. Flashtoo

    on February 13, 2008 at 7:55 pm

    DEAR TONY, youmust import the audio into the movie, not by AS, but by using FILE>Import… and select the wanted audio. PEACE.:LOL

  46. romario

    on March 26, 2008 at 4:41 am

    when i type “if (_root.coin.hitTest(this.hero_hit)) {” my hero doesn’t collect it but when i type”if (_root.coin.hitTest(this)) {” my hero colects it why does that happen.

  47. somebody

    on May 15, 2008 at 2:47 pm

    thanx. now i don’t need to think about what i write! i can just copy and paste! my favorite action!

  48. Frankie

    on October 1, 2008 at 12:45 pm

    Very nice! But I warn the newbies not to do bigger games in frames. They should be done in one frame. Just right click on the game above and press “forward”. Then you’ll see why :P

  49. Adam

    on March 5, 2009 at 8:43 pm

    Frankie, I’ve found that a crude but effective way to get around this is to create an additional frame after each scene that redirects back to the scene before it.

    But I’d be grateful if you could provide an example (or refer me to a site that has examples) on how to go about adding new scenes/levels within a one-frame program.

  50. smitty

    on March 16, 2009 at 11:13 pm

    I was having trouble with saving the player position when moving from room to room in an RPG I was working on (kingdom of sorrow)…I was over complicating things. Thanks. Great tutorial(s), lots of info :-)
    Some requests for the future:

    High score (php, but I have not got a grasp of it)
    Save Game

  51. viktor

    on January 1, 2010 at 10:50 pm

    Best flash tutorial ever! THX

  52. cameron

    on March 31, 2010 at 4:12 pm

    i want to make a character like the line rider sledger with the same physics and all that. have you got any ideas?

  53. kon

    on August 15, 2010 at 10:38 am

    i wanna know how to make a zombie game.of course there will be shooting

  54. fayt

    on March 22, 2011 at 5:50 am

    its NICEEEEEEEEEEE!!!!!!!!!!
    IWANT TO BE YOUR STUDENTS!!!!!!!!!!!

  55. alp

    on March 12, 2012 at 11:19 pm

    NaN more to go…

  56. ??? ??????? Flash ???? ?? ?????????? - ????????? ?????? ? ??????????? AS3 | ????? - ???? ? ????????? ?????????? ????-???, ??????? ???????? ? ????-????????

    on October 25, 2012 at 11:24 pm

    [...] ??? ?????? ? ??? ???????? ???????????? hitTest (01, 02, 03, 04, 05, 05_1, 05_2, [...]

  57. Erebus9997

    on December 28, 2012 at 5:41 pm

    @alp: In the line ‘_root.level1_text.text = 10 – collected_coins + ” more to go”;’, I found that removing the ‘.text’ fixes the NaN problem. So what I have is ‘_root.level1_text = 10 – collected_coins + ” more to go”;’. If this doesn’t work, make sure the text box’s ‘Var:’ is set to ‘level1_text’ (or whatever you have in the code).