Create a Flash ball game with visual from above tutorial

June 14, 2007 • Flash by Emanuele Feronato • 73 Comments

August 3rd update: 2nd part released
December 13th update: 3rd part released
January 16th update: 4th part released

This tutorial does not cover anything new (well, this first part of this tutorial) but shows you how to create a Flash ball game with a visual from above and some decent graphics.

Being a ball game, I suggest you all to read the basics for a ball game movement in this tutorial.

In this one, there is no gravity but the method is the same.

In this tutorial I’ll cover two types of gameplay: one with the ball that runs on a static stage, and one with a fixed ball with a scrolling stage. We’ll see the pros and cons of both type of games.

First of all, let’s start with the aim of the game: you have to take your ball to the exit of each level avoiding any kind of traps.

In this first part, there isn’t any exit nor traps, just walkable tiles. So, at the moment the game will sound like “try not to fall off the tiles”.

Game type 1: moving ball on a static stage

level = new Array();
_root.attachMovie("starz", "starz", 1);
_root.createEmptyMovieClip("bricks", 2);
level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0);
level[1] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1);
level[2] = new Array(1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1);
level[3] = new Array(1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1);
level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
level[5] = new Array(1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1);
level[6] = new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1);
level[7] = new Array(1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1);
level[8] = new Array(1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1);
level[9] = new Array(1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1);
level[10] = new Array(0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1);
for (y=0; y<=10; y++) {
	for (x=0; x<=11; x++) {
		if (level[y][x] == 1) {
			place_brick = bricks.attachMovie("brick", "brick_"+bricks.getNextHighestDepth(), bricks.getNextHighestDepth(), {_x:x*40+30, _y:y*40+30});
		}
	}
}
_root.attachMovie("ball", "ball", _root.getNextHighestDepth(), {_x:30, _y:30});
ball.texture.setMask(ball.ball_itself);
power = 0.4;
yspeed = 0;
xspeed = 0;
friction = 0.99;
ball.onEnterFrame = function() {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power;
	}
	xspeed *= friction;
	yspeed *= friction;
	this._y += yspeed;
	this._x += xspeed;
	this.texture._y += yspeed;
	this.texture._x += xspeed;
	if (this.texture._x>53) {
		this.texture._x -= 63;
	}
	if (this.texture._x<-53) {
		this.texture._x += 63;
	}
	if (this.texture._y>53) {
		this.texture._y -= 63;
	}
	if (this.texture._y<-53) {
		this.texture._y += 63;
	}
	brick_x = Math.floor((this._x-10)/40);
	brick_y = Math.floor((this._y-10)/40);
	if (level[brick_y][brick_x]!=1) {
		this._x = 30;
		this._y = 30;
		xspeed = 0;
		yspeed = 0;
	}
};

Does it look too long? I guess not, because you’ll see how easy it can be if you follow all the steps.

Line 1: Declaration of level, the array that contains level data. Levels in this game will be tile based. I wrote a tutorial about managing the creation of tile based levels here.

Line 2: Attaching the movie previoulsy created and linkaged as starz. The space scene you can see in the background. I made the scene with the Photoshop action to create an outer space scene.

Line 3: Creating a new empty movie clip (bricks) that will contain level tiles.

Lines 4-14: Defining the mapping of the level. In this case, the ones mean a walkable tile while the zeros a hole. You cannot walk over holes.

Lines 15-21: Scanning all the array and attaching movieclips previously linkaged as brick into the bricks movieclip (the one created at line 3). As said, refer to this tutorial for more information.

Line 22: Attaching the ball. I created the ball in the same way as in Creation of realistic spheres in Flash with textures and masking tutorial.

Line 23: Masking the ball texture as explained in the tutorial mentioned above. I strongly suggest you to read if you haven’t done it yet, you will learn how to create proper textures for a ball and map them to it with masking.

Lines 24-27: Defining power, speed and friction as explained in here. Being a game with the visual from above, there is no gravity, and at the moment there is no wind too.

Line 28: This is the main function, to be called at every frame.

Lines 29-40: Adjusting ball x and y speed according to the key the player presses, as seen here (maybe one day I’ll write an ebook and say “as seen in Chapter I” – cool).

Lines 41-42: Applying friction to x and y speed.

Lines 43-44: Adjusting ball position according to its speed.

Lines 45-58: Adjusting texture position to simulate the rolling effect as seen here.

Line 59: Determining, according to ball x position, on wich x-tile we are. I need to know the ball position inside the level array because in next tutorial I will introduce special tiles. In the formula I involved the ball radius (10) and tile size (40).

Line 60: Same thing with y position.

Lines 61-66: If the position of the ball in level array is different than 1 (solid tile) then start the death sequence: the ball is moved ad its starting position and both x and y speeds are set to zero.

That’s it! Wasn’t it easy?

This is the game

The second step is making the tiles bigger (otherwise the game may be frustrating) and have a larger, scrollable stage.

To have a scrollable background, the ball must remail fixed in the center of the stage, and the level must move, like in this tutorial.

Game type 2: static ball on a moving stage

level = new Array();
_root.attachMovie("starz", "starz", 1, {_x:-20, _y:-20});
_root.createEmptyMovieClip("bricks", 2);
level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0);
level[1] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1);
level[2] = new Array(1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1);
level[3] = new Array(1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1);
level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
level[5] = new Array(1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1);
level[6] = new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1);
level[7] = new Array(1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1);
level[8] = new Array(1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1);
level[9] = new Array(1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1);
level[10] = new Array(0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1);
for (y=0; y<=10; y++) {
	for (x=0; x<=11; x++) {
		if (level[y][x] == 1) {
			place_brick = bricks.attachMovie("brick", "brick_"+bricks.getNextHighestDepth(), bricks.getNextHighestDepth(), {_x:x*80, _y:y*80});
		}
	}
}
_root.attachMovie("ball", "ball", _root.getNextHighestDepth(), {_x:240, _y:220});
bricks._x = 240;
bricks._y = 220;
ball.texture.setMask(ball.ball_itself);
power = 0.4;
yspeed = 0;
xspeed = 0;
friction = 0.99;
ball.onEnterFrame = function() {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power;
	}
	xspeed *= friction;
	yspeed *= friction;
	bricks._y -= yspeed;
	bricks._x -= xspeed;
	starz._x = -20+((bricks._x-240)/10);
	starz._y = -20+((bricks._y-220)/10);
	this.texture._y += yspeed;
	this.texture._x += xspeed;
	if (this.texture._x>53) {
		this.texture._x -= 63;
	}
	if (this.texture._x<-53) {
		this.texture._x += 63;
	}
	if (this.texture._y>53) {
		this.texture._y -= 63;
	}
	if (this.texture._y<-53) {
		this.texture._y += 63;
	}
	brick_x = Math.floor((bricks._x-200)/80)*-1;
	brick_y = Math.floor((bricks._y-180)/80)*-1;
	if (level[brick_y][brick_x] != 1) {
		bricks._x = 240;
		bricks._y = 220;
		starz._x = -20;
		starz._y = -20;
		xspeed = 0;
		yspeed = 0;
	}
};

Main changes are at lines 45-46 where I move the bricks movieclip instead of ball one, and 47-48 where I add a little parallax scrolling to background space scene.

Ball’s position on the level, at lines 63-64, is no long determined by ball position but by bricks position, since the ball is fixed.

And this is the game. I prefer this version.

And this is where this tutorial ends.

Next step will be to create different types of tiles, each with its way to affect ball movement, and a level editor.

Now I need your creativity: suggest me a type of tile I haven’t already planned and your name will be in the credits.

Planned tiles at the moment are:

Icy/Sand/etc tiles: Affect ball friction

Left/Right/Up/Down spinning tiles: Increasing left/right/up/down ball speed

Glass tiles: Disappear once the ball has rolled out of them

Crystal tiles: Disappear once the ball has rolled on them (so move fast!)

Tunnel tiles: You can’t see the ball because it’s under the tunnel…

Spinning tiles: Increase ball speed in the direction the ball rolled on them

Invert tiles: Ball controls are inverted while on these tiles

Teleport tiles: … need an explication?

Exit tile: …

Now it’s up to you.

Take the source codes and give me feedback.

Read part 2

Rate this post: 1 Star

(35 votes, average: 4.57 out of 5)

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 73 comments

Frederik J

on June 14, 2007 at 2:49 pm

Thats really nice. I like it. :) I think the ball is quite to fast, but anyway; nice game!
Dean

on June 14, 2007 at 3:46 pm

Nice tutorial. I always find your work helpful, and it has inspired me to start developing my own game. Thanks a million!! How about a trampoline tile that bounces you across a gap to another tile, or picking up a bonus that puts rails around the maze for a period of time. Great job as usual & thanks for the tutorials!
Emanuele Feronato

on June 14, 2007 at 4:00 pm

Nice ideas, Dean!
Fairlyn

on June 14, 2007 at 5:46 pm

how about a “switch” tile that activates a few other tiles for a few seconds

moving tiles (you didn’t have these right ?)

slippery tile (the ball continues in the specified direction and don’t react to input (is this what you meant by ice tiles ?))

“tutorial” tiles (displays a message when rolled over)

seems interesting so far
Emanuele Feronato

on June 14, 2007 at 7:02 pm

Good! You guys have lot of ideas… hope we’ll get to Newgrounds frontpage…
Michael

on June 14, 2007 at 7:33 pm

Nice game, and it’s even cooler when you understand how it works, lol.

I really like Dean’s ideas. :)

Once again, great tutorial.
Frederik J

on June 14, 2007 at 7:39 pm

I got one :)

A lava tile. That shines every 3 seconds. If you hit it, shining, you’ll die!

And a tile or bonus, that gives you one ekstra life.
Fairlyn

on June 14, 2007 at 9:02 pm

windmill (pushes the player away from it when hre is in one of the adjacent tiles)

inviciple tiles (reflections show where they are every x seconds)

“plasma”/ghost tiles (cav only be passed when visible)

how about unlockable balls ?

helium ball(beach ball ?) (can be off cource for x second before being game over) or (stays afloat after being pushed away by the windmill(could be useful for secret/bonus areas)) should not make the glass tiles break

iron ball (is immune to the windmill, but can’t pass the glass tile due to heawy weight)

“enemy” balls trying to push you off ?
cannon/laser shooting at you trying to force you off the tiles
laser blockades that have to be shut off ?
Hamly

on June 14, 2007 at 9:09 pm

Disappearing tiles, you can only move over them while visible.
Hamly

on June 14, 2007 at 9:28 pm

“â€œplasmaâ€/ghost tiles (cav only be passed when visible)”
Sorry didn’t refresh my page before posting.
eblup

on June 15, 2007 at 6:41 am

hey good job. how did you make the ball look so kool. i want to change it into a pokeball!
eblup

on June 15, 2007 at 6:48 am

hey i cant open youre sourse file what is wrong
djmashedman

on June 15, 2007 at 8:47 am

He made a tutorial on how to make a ball look like that.

As for tiles -

bouncy tile – basically bounces your ball and makes it go all over the place.
speed tile – speeds up/slows down your tile
extra lives tile – in a hard to reach place, ie.at the end of a very windy and small bit.
‘bigger tile’/smaller ball tile – again, in a hard to reach place.

The latter could also be a tile that either -
makes your ball smaller or tiles bigger
OR
makes your ball bigger or tiles smaller.

But it could be random, and sometimes compulsory.

And you could always have smaller tile tiles just before a tricky bit, just to be mean.
Pebal

on June 15, 2007 at 2:36 pm

Nice ;)
Emanuele Feronato

on June 15, 2007 at 9:28 pm

At this time I coded the following tiles:

Direction spin tiles: tiles that spins the ball in one of the four directions

Spin tile: Spins the ball in the direction the ball already has

Vanishing tile: When the ball rolls over, the tile starts vanishing until it disappears

Passive tile: The ball does not react to input and there is no friction

Beam tiles: Every 3 seconds they are letal for the ball for 1 second

I think I’ll publish the tut very soon, just let me add about 10 more tile types…
eblup

on June 16, 2007 at 2:43 am

i made a pokeball! it is amasing. o and ideas for tiles ummm…

moveing: the tiles move side to side…

spining: the tiles Spin around…

moveing and spining: the tiles spin and move side to side…
amorphis

on June 20, 2007 at 10:07 pm

Could you just pleaseeeeeee upload some of the new types of tiles you have coded in order to see how do you place them among the normal ones and how do you make the ball interact with them because I am building a project for school and I am really short of time, and believe me very very very desperate :(((((((! So, if you could just give one example how to create the “weird” tile, how to place it among the other normal ones and how to make the ball interact with it I would be very very very grateful!!!!!!!

Thank you very much in front!

P.S. You are a live savior if you do me this favor!
eblup

on June 21, 2007 at 5:13 am

hey when is youre next tut.
can youre next tut be how to make a above view train follow a track
djmashedman

on June 21, 2007 at 8:48 am

amorphis – why are you doing a school project on something you do not know much about?
Pretty stupid, if you ask me.
lewis

on June 21, 2007 at 6:53 pm

i have an idea for the new tiles
a moving tile 1 that moves from side to side or up and down
Jerm

on June 23, 2007 at 1:46 am

you could make invisible tiles that could be a shortcut to the end
Jerm

on June 23, 2007 at 9:56 pm

How about a checkpoint tile or some tiles with holes in them to make it harder.
I HAD to do it… at Emanuele Feronato

on June 24, 2007 at 1:37 am

[...] This is the comment I received from amorphis some days ago about the creation of a flash ball game with visual from above. [...]
Jerm

on June 27, 2007 at 12:38 am

you could make a tile that moves in circles like an O
lewis

on June 29, 2007 at 7:05 pm

good ideas!
flaming

on July 14, 2007 at 2:43 am

how about a tile that changes its properties every few seceonds?
or a tile that changes your ball to a bowling ball or soemthing
Rick

on July 20, 2007 at 12:15 pm

Looks great but I’m also unable to extract the zip file with the source. Could you check and upload the source again in case the file was corrupted or something? thanks
(and great tutorial as usual ;)
miff

on July 30, 2007 at 12:13 am

First, you are great person really. And sorry for my bed English.
I’m live in Serbia, and really love to spare my time with AS and Flash.
I download your tiled ball i do some mod to your code to look like this http://www.borcafe.com/tileball2.swf , your and mine work is http://www.borcafe.com/tileball2.rar.
Send me a email iv been interesting for OOP in flash about year, so tell me the my direction ok?
Jake

on August 2, 2007 at 1:30 am

how about a button block that you have to go down a long passage to push then go back and you can pass a laser block or something, so the buton disables the laser
Jake

on August 2, 2007 at 1:33 am

or a checkpoint block so peopl edont get too frusterated playing this game, because these types of games can get very frusterating if someone keeps dying in the same spot or a pickup that once the person dies it will place them back in the center of the block they died on and they are completely stopped
Jake

on August 2, 2007 at 1:34 am

by the way i can spell i was just typing fast
Create a Flash ball game with visual from above tutorial part 2 at Emanuele Feronato

on August 3, 2007 at 6:33 pm

[...] I suggest you to read part 1 before reading this post. Here I will start adding features to our game as said in the I Had to do it post. [...]
Thomas

on August 16, 2007 at 7:50 am

I think a good think would to have a sort of “falling off” animation, so it doesn’t just immediately go back to the start.
jamie

on August 17, 2007 at 12:28 am

how about a jump tile that acts as a draw bridge. when the tile is up(one ends visualy larger) you can jump a gap to another set of tiles.
_ _ /| _ _ _
|_|_| |= jump up, |_|_|_|= jump down.
\|
jamie

on August 17, 2007 at 12:31 am

illistration error. but you get the basic idea

._ _ /|……….. _ _ _………….
|_|_| |= jump up, |_|_|_|= jump down.
…..\|…………………………
Dieter Galea

on August 23, 2007 at 1:31 am

hey, thanks for the tutorial, how can i make a function, that when the ball goes on the last tile, a new ‘map’ of bricks will come? kind of lvl 2
computergeek67

on September 17, 2007 at 12:19 am

Hey, Emanuele, can I post this tutorial on my tutorial forum? I’ll give you credit, of course.
Jonathan

on September 18, 2007 at 5:00 am

Nice tutorial, but how can you make everything go away once it’s past the last level?
James

on September 22, 2007 at 3:27 pm

nice man i love ur other one the tunnel thingy anyways how bout
death tile: kills u when u roll on it
triangle tiles:half a square
hexagon tiles:hexagon tiles
wall tiles:tile with a wall on any sides
gift/item tiles:give u a random/fixed powerup!

Powerups:
Shield:Protects u from a death tile
Slow:slows u down for a while
Fast:speeds u up for a while
Invert:reverses ur directions
wind:wind pushes you in a direction
tommy

on November 12, 2007 at 10:05 am

hey i got a quistion how do u make it to where the ball rolles like that when u roll its like ur relly rolling a ball how to i do that with just basic onClipEvent stuff

oh and i got an idea for a tile
you should make a level where theres a big gap
in the maze and there 1 tile that moves from the right side teh the gap letting u go ferther in the maze and then u have to go on it win its on ur side to go across but the right side of the gap tile should be doing somthing that will make the ball die so u have to waint on time to go on the moving tile
im just guessin things

but anyways i would really like to know how to make the ball roll like its a rolling ball
thanks
Experiment: monetizing a Flash game - Part 6 : Emanuele Feronato - italian geek and PROgrammer

on December 5, 2007 at 2:37 pm

[...] don’t know at this time if this will work or not… I know of a clone of my Create a Flash ball game with visual from above tutorial sold for $400 without buying me a beer so maybe it’s a bad idea… but come on! An [...]
A Gem of Flash Game Tutorials | Newbie Game Programmers

on December 17, 2007 at 4:24 pm

[...] Create a Flash ball game with visual from above tutorial – Part 1 :: Part 2 :: Part 3 [...]
Create a Flash ball game with visual from above tutorial part 4 : Emanuele Feronato - italian geek and PROgrammer

on January 16, 2008 at 11:06 pm

[...] steps 1, 2 and 3 before [...]
Orava

on February 1, 2008 at 2:26 pm

Is it possible to plant buttons to this?
i’m doing a RPG guide for a game and i just need to make it somehow moveable (20 classes and no space for them all in single Non-moving screen)
i got a movieclip and only a movieclip moving…
the buttons just stayed there…

(and if possible without the array thing, i don’t get it at all ;S)
thanks for help.
Rick

on February 14, 2008 at 4:25 pm

QUESTION:

(Hello there, great tut btw)

If I use the code;

…
place_brick = bricks.attachMovie(“brick”, “brick_”+bricks.getNextHighestDepth(), bricks.getNextHighestDepth(), {_x:x*40+30, _y:y*40+30});
…

to place tile movieclips, Im successful in placing the tiles…

but, what name do I use afterwards for each tile if I want to affect the movieclip, such as changing the alpha of a specific tile or use a .gotoAndPlay to start an animation inside that clip?
Owais

on March 8, 2008 at 6:55 pm

Vaaaaaaaaaaaaaaaallllllllllleeeeeeeeeentttttttt…….. Goooooooooooooooddddddddddddddd…

I have no words……………
Genious…………….man..
Genious……
thanks.
Closing the blog : Emanuele Feronato - italian geek and PROgrammer

on April 1, 2008 at 1:32 pm

[...] one of the biggest software house in the world saying that Tileball and its clones generated from this tutorial have the same concept of a next-to-be-released triple-A [...]
Scott D. Purdie

on May 6, 2008 at 8:01 pm

Hi Really nice tutorial but i had a question about the code. The line

brick_x = Math.floor((bricks._x-200)/80)*-1;

I was wondering how do you know to use those values, 200, 80 and -1? Sorry if its a silly question.

Thanks
Arch Games Webmasters - Arcade Webmasters » Game Developer tutorial List

on May 13, 2008 at 7:33 pm

[...] http://www.emanueleferonato.com/2007/06/14/create-a-flash-ball-game-with-visual-from-above-tutorial/... [...]
gregory

on June 21, 2008 at 1:29 am

i want to create a ball game bacause in my life ive expierienced many ball games and i liked them all like the two versions of hamster bal, gyroball, metal ball, and across the line ball
DJ Pp

on July 23, 2008 at 7:45 am

I am the second one to rate 5 out of 5, it is that good !!!
=D
Cool Stuff !! LOL
DJ Pp

on July 23, 2008 at 7:46 am

how can i download Flash ???
35+ Flash Game Development Tutorials & FLA Files | Showcases | PelFusion.com

on April 28, 2009 at 8:37 am

[...] 34. Flash Ball Game [...]
Cómo crear juegos en Flash, 20 formas de hacerlo | portafolio blog

on June 11, 2009 at 9:51 pm

[...] de la gallina y los huevos en Flash. 14. Como crear un juego de una mini carrera en Flash. 15. Como hacer un juego de bola escurridiza en Flash. 16. Como hacer un juego de pelea en Flash. 17. Como crear un juego de rompecabezas sencillo en [...]
Ryan

on June 22, 2009 at 1:59 am

Here is my list of ideas you could make:

how about an explosion tile that explodes you or a upgrade/downgrade tile that when you roll over it it makes you bigger or smaller, or a mystery tile that does something random, or a time bomb tile that when you roll over it it lays a time bomb on all the tiles you hit for ten seconds then explodes, or an invisible tile that makes you invisible for 3 seconds, or a trap tile that when you roll over it guns start firing at you
Create a Flash ball game with visual from above | Tutorial Collection

on July 1, 2009 at 5:57 am

[...] View Tutorial No Comment var addthis_pub="izwan00"; BOOKMARK This entry was posted on Wednesday, July 1st, 2009 at 9:27 am and is filed under Adobe Flash Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
Roller – jQuery based game | YABIBO.COM - YOUR WEB WORLD

on August 9, 2009 at 9:58 am

[...] break out the everyday routine. Last night I was surfing the web with no direction and I found this tutorial and I said: “This can be done in JavaScript too.”. I start to plan this a little bit [...]
20 Best Flash Game Tutorials to Create Your Own Flash Game | Dzine Blog

on December 28, 2009 at 8:48 pm

[...] 11. )Ball Game [...]
eagrapho » 20 Best Flash Game Tutorials to Create Your Own Flash Game

on January 11, 2010 at 9:51 pm

[...] 11. )Ball Game [...]
?????20???Flash?? | ??????

on January 20, 2010 at 9:02 pm

[...] 11. )Ball Game [...]
Flash Game Development Tutorials & FLA Files

on February 25, 2010 at 3:34 pm

[...] Flash Ball Game [...]
MIND BLOWING PRASANTH

on August 13, 2010 at 3:07 am

HI
what is the code for win the game or go to next level.. reply must.
Como criar jogos online em flash | NR Host Blog

on August 15, 2010 at 8:37 am

[...] Flash para Celular 18. Jogo de Luta 19. Jogo de Bola 20. Jogo de sinuca 21. Jogo de mini carros 22. Jogo de bola com efeitos 23. Jogo de quebra cabeça 24. Jogo para iniciantes 25. Jogo Simples 26. Tutorial de criação de [...]
andy

on August 31, 2010 at 5:40 pm

nice tutorial and game!
how about a tile that reeverses your movements?
8 bài h??ng d?n chuy?n PSD sang HTML | Blog thi?t k? Website

on September 18, 2010 at 12:39 am

[...] 12. Ball Game [...]
leonardo

on February 14, 2011 at 8:25 pm

level = new Array();
_root.attachMovie(“starz”, “starz”, 1, {_x:-20, _y:-20});
_root.createEmptyMovieClip(“bricks”, 2);
level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0);
level[1] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1);
level[2] = new Array(1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1);
level[3] = new Array(1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1);
level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
level[5] = new Array(1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1);
level[6] = new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1);
level[7] = new Array(1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1);
level[8] = new Array(1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1);
level[9] = new Array(1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1);
level[10] = new Array(0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1);
for (y=0; y<=10; y++) {
for (x=0; x53) {
this.texture._x -= 63;
}
if (this.texture._x53) {
this.texture._y -= 63;
}
if (this.texture._y<-53) {
this.texture._y += 63;
}
brick_x = Math.floor((bricks._x-200)/80)*-1;
brick_y = Math.floor((bricks._y-180)/80)*-1;
if (level[brick_y][brick_x] != 1) {
bricks._x = 240;
bricks._y = 220;
starz._x = -20;
starz._y = -20;
xspeed = 0;
yspeed = 0;
}
};
Matt

on May 30, 2011 at 5:47 pm

Great tutorial, it was very useful. An idea I got for a tile is a spike tile, similar to the lava tile, but it happens more quickly so you have to move fast. Another idea I got is that you could make enemies on some tiles and you have to shoot them down to get past them. Maybe you could even make some enemies to shoot you.
Jer

on August 2, 2011 at 4:30 pm

Great tutorial, easy to understand and use. As for ideas… A checkpoint tile?
Maybe even a seperate path that leads to a shop tile, when rolled on a screen will pop up, where you can buy upgrades, like decrease the balls speed, or something like that. As to get money for the shop… i dont know.
a flash lover

on August 16, 2011 at 1:30 am

If you are not the author of this selling file, i guess you should contact Envato for copyright violation:
http://activeden.net/item/rolling-ball/451663
Kulgar

on October 5, 2011 at 11:35 am

Great tutorial as always !

For the tiles… Why not a steep slope tile ? Once the ball roll over this tile it accelerates a lot and can’t go back.
20 Frash Flash Game Tutorials For Flash Designer | 1step web design: Best for developer and designer

on February 17, 2012 at 10:06 am

[...] Create a Flash Ball Game with Visual from Above Tutorial [...]
Pavan

on March 4, 2012 at 4:28 am

My set of new types of tiles for this game
wormhole teleports you randomly to any non empty tile
fake tile looks like a real tile but is an empty tile in disguise
moving tile moves in a defined path while stepped on
invisible tile the name explains it
Top 10 Game Tuts | Geeks Desk

on March 18, 2012 at 2:11 am

[...] Tutorial: http://www.emanueleferonato.com/2007/06/14/create-a-flash-ball-game-with-visual-from-above-tutorial/ [...]

italian geek and PROgrammer

This post has 73 comments

Dean

Emanuele Feronato

Fairlyn

Emanuele Feronato

Fairlyn

Hamly

Hamly

eblup

eblup

Pebal

Emanuele Feronato

eblup

amorphis

eblup

lewis

Jerm

Jerm

Jerm

lewis

flaming

Rick

Jake

Jake

Jake

Thomas

jamie

jamie

Dieter Galea

Jonathan

James

tommy

Orava

Rick

Owais

Scott D. Purdie

DJ Pp

DJ Pp

MIND BLOWING PRASANTH

andy

Jer

a flash lover

Pavan

Flash Game Development by Example

Protect from Flash decompilers

Top categories

All categories