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

  • 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 4 at Emanuele Feronato()

  • Tony

    Fantastic!!
    It’s great!!

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

  • Tony

    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

  • bigbill

    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.

  • Dan

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

  • Izy

    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.

  • Absolutely a superb collection of tutorials!

    Very well put together.

    Thank you.

  • 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!

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

  • Tony

    Thank you very much!

  • Tony

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

  • Emanuele Feronato

    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”… ??

  • guru

    when will the next tutorial be out?

  • Grifo

    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…

  • david

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

  • Tony

    The tutorial is very good. I made this game:

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

  • Tony

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

  • Mark

    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.

  • bigbill

    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.

  • BLAH

    Great tuturial.

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

  • qwerty

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

  • Per

    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.

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

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

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

  • And Mar

    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;
    }

  • 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!

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

  • Flash noob

    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?

  • luke

    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.

  • Izz

    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

  • 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?

  • 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?

  • anon

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

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

  • Des

    Great tutorial!

  • Steve

    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

  • INFERNAL

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

  • Pingback: A Gem of Flash Game Tutorials | Newbie Game Programmers()

  • Dimmy

    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

  • Dimmy

    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?

  • Dimmy

    got it working

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

  • romario

    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.

  • somebody

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

  • Frankie

    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

  • Adam

    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.

  • smitty

    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

  • viktor

    Best flash tutorial ever! THX

  • cameron

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

  • kon

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

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

  • alp

    NaN more to go…

  • Pingback: ??? ??????? Flash ???? ?? ?????????? - ????????? ?????? ? ??????????? AS3 | ????? - ???? ? ????????? ?????????? ????-???, ??????? ???????? ? ????-????????()

  • Erebus9997

    @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).