Flash game creation tutorial - part 5

December 31, 2006 by Emanuele Feronato
Filed Under Flash •  

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

PLAIN TEXT
ACTIONSCRIPT:
  1. onClipEvent (load) {
  2.     yspeed = 0;
  3.     xspeed = 0;
  4.     wind = 0.00;
  5.     power = 0.65;
  6.     gravity = 0.1;
  7.     upconstant = 0.75;
  8.     friction = 0.99;
  9.     collected_coins = 0;
  10. }
  11. onClipEvent (enterFrame) {
  12.     if (Key.isDown(Key.LEFT)) {
  13.         xspeed = xspeed-power;
  14.     }
  15.     if (Key.isDown(Key.RIGHT)) {
  16.         xspeed = xspeed+power;
  17.     }
  18.     if (Key.isDown(Key.UP)) {
  19.         yspeed = yspeed-power*upconstant;
  20.     }
  21.     if (Key.isDown(Key.DOWN)) {
  22.         yspeed = yspeed+power*upconstant;
  23.     }
  24.     xspeed = (xspeed+wind)*friction;
  25.     yspeed = yspeed+gravity;
  26.     _y = _y+yspeed;
  27.     _x = _x+xspeed;
  28.     _rotation = _rotation+xspeed*2;
  29.     if (_root.coin.hitTest(this.hero_hit)) {
  30.         _root.coin._x = Math.random()*400+50;
  31.         collected_coins++;
  32.         _root.level1_text.text = 10-collected_coins+" more to go";
  33.         if (collected_coins == 10) {
  34.             _root.gotoAndPlay(2);
  35.         }
  36.     }
  37.     if (_root.wall.hitTest(_x, _y, true)) {
  38.         xspeed = 0;
  39.         yspeed = 0;
  40.         _x = 120;
  41.         _y = 120;
  42.     }
  43. }

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

PLAIN TEXT
ACTIONSCRIPT:
  1. onClipEvent (load) {
  2.     yspeed = 0;
  3.     xspeed = 0;
  4.     wind = 0.00;
  5.     power = 0.65;
  6.     gravity = 0.1;
  7.     upconstant = 0.75;
  8.     friction = 0.99;
  9. }
  10. onClipEvent (enterFrame) {
  11.     if (Key.isDown(Key.LEFT)) {
  12.         xspeed = xspeed-power;
  13.     }
  14.     if (Key.isDown(Key.RIGHT)) {
  15.         xspeed = xspeed+power;
  16.     }
  17.     if (Key.isDown(Key.UP)) {
  18.         yspeed = yspeed-power*upconstant;
  19.     }
  20.     if (Key.isDown(Key.DOWN)) {
  21.         yspeed = yspeed+power*upconstant;
  22.     }
  23.     xspeed = (xspeed+wind)*friction;
  24.     yspeed = yspeed+gravity;
  25.     _y = _y+yspeed;
  26.     _x = _x+xspeed;
  27.     _rotation = _rotation+xspeed*2;
  28.     if (_root.exit.hitTest(_x, _y, true)) {
  29.         _root.gotoAndPlay(3);
  30.     }
  31.     if (_root.wall.hitTest(_x, _y, true)) {
  32.         xspeed = 0;
  33.         yspeed = 0;
  34.         _x = 120;
  35.         _y = 120;
  36.     }
  37. }

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

PLAIN TEXT
ACTIONSCRIPT:
  1. onClipEvent (load) {
  2.     if (_root.throughdoor == 1) {
  3.         yspeed = _root.save_y_speed;
  4.         xspeed = _root.save_x_speed;
  5.         _y = _root.save_y_position;
  6.         _x = 470;
  7.     }
  8.     else{
  9.         yspeed = 0;
  10.         xspeed = 0;
  11.     }
  12.     wind = 0.00;
  13.     power = 0.65;
  14.     gravity = 0.1;
  15.     upconstant = 0.75;
  16.     friction = 0.99;
  17. }
  18. onClipEvent (enterFrame) {
  19.     if (Key.isDown(Key.LEFT)) {
  20.         xspeed = xspeed-power;
  21.     }
  22.     if (Key.isDown(Key.RIGHT)) {
  23.         xspeed = xspeed+power;
  24.     }
  25.     if (Key.isDown(Key.UP)) {
  26.         yspeed = yspeed-power*upconstant;
  27.     }
  28.     if (Key.isDown(Key.DOWN)) {
  29.         yspeed = yspeed+power*upconstant;
  30.     }
  31.     xspeed = (xspeed+wind)*friction;
  32.     yspeed = yspeed+gravity;
  33.     _y = _y+yspeed;
  34.     _x = _x+xspeed;
  35.     _rotation = _rotation+xspeed*2;
  36.     if (_root.door.hitTest(_x, _y, true)) {
  37.         _root.save_x_speed = xspeed;
  38.         _root.save_y_speed = yspeed;
  39.         _root.save_y_position = _y;
  40.         _root.gotoAndPlay(4);
  41.     }
  42.     if (_root.wall.hitTest(_x, _y, true)) {
  43.         xspeed = 0;
  44.         yspeed = 0;
  45.         _x = 120;
  46.         _y = 120;
  47.     }
  48. }

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.

PLAIN TEXT
ACTIONSCRIPT:
  1. onClipEvent (load) {
  2.     yspeed = _root.save_y_speed;
  3.     xspeed = _root.save_x_speed;
  4.     _y = _root.save_y_position;
  5.     _x = 30;
  6.     wind = 0.00;
  7.     power = 0.65;
  8.     gravity = 0.1;
  9.     upconstant = 0.75;
  10.     friction = 0.99;
  11. }
  12. onClipEvent (enterFrame) {
  13.     if (Key.isDown(Key.LEFT)) {
  14.         xspeed = xspeed-power;
  15.     }
  16.     if (Key.isDown(Key.RIGHT)) {
  17.         xspeed = xspeed+power;
  18.     }
  19.     if (Key.isDown(Key.UP)) {
  20.         yspeed = yspeed-power*upconstant;
  21.     }
  22.     if (Key.isDown(Key.DOWN)) {
  23.         yspeed = yspeed+power*upconstant;
  24.     }
  25.     xspeed = (xspeed+wind)*friction;
  26.     yspeed = yspeed+gravity;
  27.     _y = _y+yspeed;
  28.     _x = _x+xspeed;
  29.     _rotation = _rotation+xspeed*2;
  30.     if (_root.door.hitTest(_x, _y, true)) {
  31.         _root.save_x_speed = xspeed;
  32.         _root.save_y_speed = yspeed;
  33.         _root.save_y_position = _y;
  34.         _root.throughdoor = 1;
  35.         _root.gotoAndPlay(3);
  36.     }
  37.     if (_root.wall.hitTest(_x, _y, true)) {
  38.         xspeed = 0;
  39.         yspeed = 0;
  40.         _x = 120;
  41.         _y = 120;
  42.     }
  43. }

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

PLAIN TEXT
ACTIONSCRIPT:
  1. if (_root.throughdoor == 1) {
  2.     yspeed = _root.save_y_speed;
  3.     xspeed = _root.save_x_speed;
  4.     _y = _root.save_y_position;
  5.     _x = 470;
  6. }
  7. else{
  8.     yspeed = 0;
  9.     xspeed = 0;
  10. }

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

Related Item: casino game

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (8 votes, average: 4.63 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.

48 Responses to “Flash game creation tutorial - part 5”

  1. Tony on January 1st, 2007 7:39 pm

    Fantastic!!
    It’s great!!

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

  2. Tony on January 2nd, 2007 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

  3. bigbill on January 3rd, 2007 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.

  4. Dan on January 4th, 2007 3:47 pm

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

  5. Izy on January 4th, 2007 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.

  6. Francois on January 4th, 2007 10:46 pm

    Absolutely a superb collection of tutorials!

    Very well put together.

    Thank you.

  7. Alexander on January 5th, 2007 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!

  8. Alexander on January 5th, 2007 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 :-)

  9. Tony on January 5th, 2007 6:57 pm

    Thank you very much!

  10. Tony on January 7th, 2007 11:46 pm

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

  11. Emanuele Feronato on January 8th, 2007 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”… ??

  12. guru on January 8th, 2007 7:15 pm

    when will the next tutorial be out?

  13. Grifo on January 9th, 2007 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…

  14. david on January 13th, 2007 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);

  15. Tony on January 14th, 2007 7:34 pm

    The tutorial is very good. I made this game:

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

  16. Tony on January 16th, 2007 6:47 pm

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

  17. Mark on January 17th, 2007 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.

  18. bigbill on January 17th, 2007 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.

  19. BLAH on January 21st, 2007 2:24 am

    Great tuturial.

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

  20. qwerty on January 21st, 2007 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 :)

  21. Per on January 21st, 2007 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.

  22. Garr on January 22nd, 2007 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)

  23. And Mar on February 9th, 2007 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;
    }

  24. Doug on March 2nd, 2007 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!

  25. Flash noob on April 14th, 2007 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?

  26. luke on May 20th, 2007 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.

  27. Izz on July 1st, 2007 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

  28. Nabz on July 18th, 2007 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?

  29. some1 on July 20th, 2007 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?

  30. anon on July 28th, 2007 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).

  31. António on July 31st, 2007 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.

  32. Des on September 1st, 2007 6:44 pm

    Great tutorial!

  33. Steve on October 14th, 2007 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

  34. INFERNAL on December 2nd, 2007 5:20 pm

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

  35. Dimmy on January 21st, 2008 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

  36. Dimmy on January 21st, 2008 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?

  37. Dimmy on January 21st, 2008 12:21 pm

    got it working

  38. Flashtoo on February 13th, 2008 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

  39. romario on March 26th, 2008 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.

  40. somebody on May 15th, 2008 2:47 pm

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

  41. Frankie on October 1st, 2008 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

Leave a Reply




Trackbacks

  1. Flash game creation tutorial - part 1 at Emanuele Feronato on December 31st, 2006 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 31st, 2006 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 31st, 2006 11:27 pm

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

  4. Flash game creation tutorial - part 6a at Emanuele Feronato on January 24th, 2007 12:37 pm

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

  5. Flash game creation tutorial - part 3 at Emanuele Feronato on February 9th, 2007 7:02 pm

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

  6. Flash game creation tutorial - part 5.1 at Emanuele Feronato on March 14th, 2007 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. [...]

  7. A Gem of Flash Game Tutorials | Newbie Game Programmers on December 17th, 2007 4:22 pm

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