Create a Flash ball game with visual from above tutorial part 3

January 16th update: 4th part released

In the third part of this tutorial I am going to fix a minor bug and introduce three new tiles:

info tile (displays a message when the ball rolls over it)
reverse control tile (reverses the controls of the ball)
checkpoint tile (makes you respawn at the checkpoint tile if you die)

Before continuing, I suggest you to read tutorials 1 and 2.

The actionscript of the last example has changed to:

Let’s comment the new lines:

Line 3: Attaching the info_panel object (the panel that will show the messages when the ball rolls over it) and making it invisible

Line 7: Creating a new variable to know if the player passed a checkpoint or not, and setting it to false by default

Line 11: Making the info panel object invisible. This may seems redundant since I alredy set it as invisible at line 3, but consider that this line is inserted into a routine to be executed at every time (so it’s redundant line 3…)

Lines 17-20: To understand this code, you must know how did I manage message tiles. Message tiles are tiles at number 12, but in the level array I assign a value of 12000+x where x is the id of the message. As an example, if a value in the level array is 12045, it meas that it’s a tile of type 12 (info tile) with the message 45. That’s what is done with this set of lines: if a value is greater than 12000, then assign 12 to type_of_tile value and type_of_tile%12000 (even if type_of_tile-12000 would be better) to the message_to_show variable

Lines 73-76: Code for the reverse controls tile (tile 11): simply multiplies power by -1

Lines 77-81: Code for the info panel tile (tile 12). Setting the info panel to visibile and assigning the dynamic text

Lines 82-87: Code for the checkpoint tile (tile 13): setting the checkpoint_passed variable to true and saving the current x and y tile position in save_x and save_y variables.

Lines 140-141: Reset the speed when a level is initialized. This will prevent the ball to mantain its speed when the player passes the level

Lines 157-159: Messages to display

Lines 225-227: If the tile number is greater than 12000, then setting the frame to stop in the tiles movieclip to 12

And that’s it: the first level has the new features while the others are the same of part 2

I am about to publish a complete game with a lot of more tiles, obviously I am releasing a full tutorial.

Meanwhile, download the source of this one

Read 4th part released

  • Frederik J

    Really, really nice Emanuele. You’re monetizing it as well, right?
    Love it!

  • The ball is really looking perfect!
    As a suggestion for some more levels, how about sprinkling some other balls on the tracks, which should also not fall from the track, so you shouldn’t bump too hard against them.

  • maciek

    yay Cool, but I must say there is something about that game I dont like…

  • chaew

    yeh thats really good! but when are you actually going to post the code to circle chain? we’re all eagerly waiting in anticipation…

  • The circle chain source was already posted.

  • Yeah gr8 as usual.
    Emanuele, pls release the circle chain tutorial as you have only published the source code.
    We would appreciate it

  • Where did you learn actionscripting, Emanuele?

  • Awesome! :D

  • David

    are we able to create arrays or any size as long as we change the number 4 on lines 219 and 220?

    great tutorials keep it up!

  • Xodus

    Hey, Emanuele,

    I’m a big fan of your site, and on one of the previous posts, you said that if we got here from a tut link not created by you, we should notify you. So, go to this site:

    I HATE copycats!

  • Matt

    I think that was posted by Emanuele. The person who posted it, username is triqui which is the same as his newgrounds username:

  • Tom

    Hello i have a problem

    so the maps are currently:

    case 7 :
    _root.ball_start_x = 2;
    _root.ball_start_y = 2;
    level[0] = new Array(0, 0, 0, 0, 0);
    level[1] = new Array(0, 0, 0, 0, 0);
    level[2] = new Array(0, 0, 12001, 0, 0);
    level[3] = new Array(0, 0, 0, 0, 0);
    level[4] = new Array(0, 0, 0, 0, 0);

    Something like that but i wanted to add more levels so i did –

    case 2 :
    _root.ball_start_x = 0;
    _root.ball_start_y = 0;
    level[0] = new Array(12001, 7, 1, 1, 1);
    level[1] = new Array(0, 0, 0, 0, 1);
    level[2] = new Array(1, 1, 1, 1, 1);
    level[3] = new Array(1, 0, 0, 0, 0);
    level[4] = new Array(1, 2, 3, 0, 1);
    level[5] = new Array(0, 1, 2, 1, 1);
    level[6] = new Array(0, 0, 0, 0, 10);
    level[7] = new Array(0, 0, 0, 0, 10);
    messages[1] = “What will it do?”;

    but it osnt work any clues?

  • lewis

    Use invisible tiles there great. You can make them by creating a new tile in the tile movie clip and changing it’s alpha to 0.
    Also how do you make it so that when you finish a certain level you go to the next slide.

  • ben

    hey! guys if any one can give me the flash code for the game boulder dash, i want a max of 3 levels! i will b willing to pay for it! i really need it so if any one knws anything bout it please contact me my email address is thank you

  • How do I know what level I’m on?
    Right Now the game on this page has 5 flashing Green tiles, 2nd tile is yellow etc o.o

  • phore_eyes

    how do u make it so that it can be more than 5 tiles wide???

  • Emanuele Feronato

    just make you array bigger

  • justin

    Hey i tried expanding the map. It works but how do i make the additional tiles show up????

  • justin

    nvm. i asked a stupid question. and i figured it out after reading over everything again. BUT how do i add sounds after certain actions such as dying, entering a certain level and just about any other point?

  • RJ

    if(something happens){
    music = new Sound(this);

    And you only have to check that your sound is linked correctly.

  • Pingback: Create a Flash ball game with visual from above tutorial part 2 : Emanuele Feronato - italian geek and PROgrammer()

  • Laxaria

    Just a question. Is there a way to make it such that instead of going to the next class of the frame, could you make it go to another frame instead? Thanks.

  • nachoman

    great tutorial

    I just have 2 question. i need a code to be able to make a tile in the last level that sends the player to the next frame where is says something like
    “Congrats! You win!!—— Replay?”
    I just don’t know how?
    and the other one is how to add a score so when you pass a level you get points

  • @phore_eyes: On lines 219 and 220, change the “4”s to the amount of tiles you want going across and going up.

    @Emanuele: This is a great tutorial. Your site has taught me loads, thanks. I am developing a game with this engine, do I need to put credit to you in it?

  • Matt Saunders

    If you want to make your levels bigger than 5×5..

    _root.createEmptyMovieClip(“bricks”, 2);
    bricks._x = 240-(80*ball_start_x);
    bricks._y = 220-(80*ball_start_y);
    for (y=0; y<=4; y++) {
    for (x=0; x0) {
    depth = y*12+x;
    place_brick = bricks.attachMovie(“brick”, “brick_”+depth, bricks.getNextHighestDepth(), {_x:x*80, _y:y*80});

    localte this and then change the 4s is this bit..
    for (y=0; y<=4; y++) {
    for (x=0; x<=4; x++) {

    to whatever you want :) if you make it 1000 you dont have to use all the squares.

    GREAT tutorial btw.

  • lucky

    its awesome! Emanuele…
    i really enjoyed playing it. kindly send me more tutorials on games.
    hav a nice day

  • Randylin26

    Mat Saunders….. Your right…….

  • heyy,
    very good tutorial but i have a question.
    If i want to create m own level,then when the new level should came the next ones come and not the ones that i have made.

    i finish level 1.
    i created level 2…
    but then level 3 comes and not level 2 that i made.

    help me pls?

  • SG

    Thanks for the great tutorials! Here’s a way to get a smoother death when the ball hits an empty tile (obviously my ball is bigger than yours):

    default :
    //empty space
    friction = .7;
    power = 0;
    this._width = this._width-15;
    this._height = this._height-15;
    if(this._width <= 10){
    this._height = 280;
    this._width = 280;

    I've also gave it a teleport sequence when it hits the exit tile and explode when it hits an active lava tile :D

  • make this and the ball falling ;-)

    function ball_die() {
    xspeed = 0;
    yspeed = 0;
    ball._xscale -= 5;
    ball._yscale = ball._xscale;
    if (ball._yscale <= 0) {
    bricks._x = 240-(80*_root.ball_start_x);
    bricks._y = 220-(80*_root.ball_start_y);
    ball._xscale = 100;
    ball._yscale = 100;

  • sorry
    so is better ;-)

    function ball_die() {
    xspeed = 0;
    yspeed = 0;
    power = 0;
    ball._xscale -= 5;
    ball._yscale = ball._xscale;
    if (ball._yscale <= 0) {
    bricks._x = 240-(80*_root.ball_start_x);
    bricks._y = 220-(80*_root.ball_start_y);
    ball._xscale = 100;
    ball._yscale = 100;