Create a flash draw game like Line Rider or others – part 1

January 8, 2007 • Actionscript 2, Flash, Game design by Emanuele Feronato • 149 Comments

March 31st update: part 5 released
March 4th update: part 4 released
February 17th update: part 3 released
February 3rd update: part 2 released

In the last months I saw a lot of flash drawing games, like Line Rider and Softball.
The concept is very simple yet addictive because the player has the capability to draw the stage.
In the first part of this tutorial I’ll cover the drawing.

The first thing to do, in the first frame, is to create the object where we are going to draw.

Drawing lines in a movieclip

_root.createEmptyMovieClip("terrain", 1);

I have just created an empty movieclip called terrain (and, of course, instanced as terrain) at depth 1.

Now I have to decide the style of my line, I mean the color, the thickness and the transparency (alpha).

_root.terrain.lineStyle(10, 0xff0000, 100);

With this method I am telling flash that I want a line style of 10 pixel width, full red and completely opaque, because the lineStyle method has 3 parameters:

thickness, an integer that indicates the thickness of the line in points valid values are 0 to 255. If 0 (zero), then the style is the hairline, the line that never “grow” when we zoom a movie or movieclip.

rgb, a the hex color value.

alpha, an integer that indicates the alpha value of the line’s color; valid values are 0-100. If a value isn’t indicated, Flash uses 100 (solid). If the value is less than 0, Flash uses 0; if the value is greater than 100, Flash uses 100.

Now that I decided the style of the line, it’s time to draw. We are going to use two methods: moveTo and lineTo.
moveTo(x,y) moves the pen to x and y coordinates without drawing, and lineTo moves the pen to x and y coordinates drawing.

Our very first movieclip, where I draw a red box in the stage, is

createEmptyMovieClip("terrain", 1);
terrain.lineStyle(10, 0xff00ff, 100);
terrain.moveTo(100, 100);
terrain.lineTo(300, 100);
terrain.lineTo(300, 300);
terrain.lineTo(100, 300);
terrain.lineTo(100, 100);

Drawing with the mouse

Now I want to draw with the mouse and not by fixed coordinates.

This is even simpler

createEmptyMovieClip("terrain", 1);
terrain.lineStyle(10, 0xff00ff, 100);
onEnterFrame = function () {
	terrain.lineTo(_xmouse, _ymouse);
};

You are able to draw into the movie!

Now I have an issue… I cannot draw “real” curves and it seems to be a delay when I draw.
That’s due to the fps speed of the movie. If you want to make a draw game, you should raise the fps to at least 30 frames per second.

Here it is the same movie playing at 50fps

As you can see, you can create “curves” by adding short lines each close to each oterh.

Draw only when mouse button is pressed

To draw only when you press mouse button, I need a little more actionscript

createEmptyMovieClip("terrain", 1);
terrain.lineStyle(10, 0xff00ff, 100);
imdrawing = false;
onMouseDown = function () {
	if (imdrawing == false) {
		terrain.moveTo(_xmouse, _ymouse);
		imdrawing = true;
	}
	if (imdrawing == true) {
		onEnterFrame = function () {
			terrain.lineTo(_xmouse, _ymouse);
		};
	}
};
onMouseUp = function () {
	onEnterFrame = function () {
		imdrawing = false;
	};
};

Let’s analyze the script:
Line 1: create the movie clip instanced as “terrain”
Line 2: set the style of the line I am going to draw
Line 3: initialize a flag saying that I am not drawing
Line 4: Actions to perform when the mouse is “down” (when I click the mouse)
Lines 5-8: If i am not drawing, move the “pen” at current mouse location and set the drawing variable at true, to tell the script that now I am drawing
Lines 9-13: If I am drawing, every time I enter the frame a line is traced from the last line drawn to the actual mouse location
Lines 15-19: If the mouse is “up” (I am not clicking the mouse), the imdrawing variable is set back to false value each time I enter the frame. The onEnterFrame here may seem useles but without it, the script won’t work and if you start drawing, you will continue drawing even if the mouse button is not pressed.

Drawing with (more) style

As you noticed, I can decide the style of my lines declaring width, color and alpha.
But what if I want to give my lines some more style?

I have to use some filters Flash has. Flash has several filters you may apply to an object: BevelFilter, BlurFilter, ColorMatrixFilter, ConvolutionFilter, DisplacementMapFilter, DropShadowFilter, GlowFilter, GradientBevelFilter, and GradientGlowFilter.

I’ll examine the ones you may need to use in a draw game

Adding a Bevel

to add a Bevel you have to declare the following parameters:

distance:Number [optional] – The offset distance of the bevel, in pixels (floating point). The default value is 4.

angle:Number [optional] – The angle of the bevel, from 0 to 360 degrees. The default value is 45.

highlightColor:Number [optional] – The highlight color of the bevel, 0xRRGGBB. The default value is 0xFFFFFF.

highlightAlpha:Number [optional] – The alpha transparency value of the highlight color. Valid values are 0 to 1. For example, .25 sets a transparency value of 25%. The default value is 1.

shadowColor:Number [optional] – The shadow color of the bevel, 0xRRGGBB. The default value is 0×000000.

shadowAlpha:Number [optional] – The alpha transparency value of the shadow color. Valid values are 0 to 1. For example, .25 sets a transparency value of 25%. The default value is 1.

blurX:Number [optional] – The amount of horizontal blur in pixels. Valid values are 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

blurY:Number [optional] – The amount of vertical blur in pixels. Valid values are 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

strength:Number [optional] – The strength of the imprint or spread. The larger the value, the more color is imprinted and the stronger the contrast between the bevel and the background. Valid values are 0 to 255. The default value is 1.

quality:Number [optional] – The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

type:String [optional] – The type of bevel. Valid values are “inner”, “outer”, and “full”. The default value is “inner”.

knockout:Boolean [optional] – Applies a knockout effect (true), which effectively makes the object’s fill transparent and reveals the background color of the document. The default value is false (no knockout).

You have to play a bit with the parameters to achieve the effect you prefer.

import flash.filters.BevelFilter;
var distance:Number = 2;
var angleInDegrees:Number = 45;
var highlightColor:Number = 0xff00ff;
var highlightAlpha:Number = 1;
var shadowColor:Number = 0xbb00bb;
var shadowAlpha:Number = 1;
var blurX:Number = 8;
var blurY:Number = 8;
var strength:Number = 10;
var quality:Number = 3;
var type:String = "inner";
var knockout:Boolean = false;
var my_bevel_filter:BevelFilter = new BevelFilter(distance, angleInDegrees, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout);
createEmptyMovieClip("terrain", 1);
terrain.lineStyle(20, 0xdd00dd, 100);
terrain.filters = new Array(my_bevel_filter);
imdrawing = false;
onMouseDown = function () {
	if (imdrawing == false) {
		terrain.moveTo(_xmouse, _ymouse);
		imdrawing = true;
	}
	if (imdrawing == true) {
		onEnterFrame = function () {
			terrain.lineTo(_xmouse, _ymouse);
		};
	}
};
onMouseUp = function () {
	onEnterFrame = function () {
		imdrawing = false;
	};
};

Line 1: import the filter – it won’t work without this line
Lines 2-13: declaration of the various parameters
Line 14: creation of the filter itself
Line 17: the filter is applied to the movieclip instanced as terrain. Look at the array declaration: that’s because it’s possible to add several effect to a single movieclip

Adding a blur effect

to add a Bevel you have to declare the following parameters:

blurX:Number [optional] – The amount to blur horizontally. Valid values are from 0 to 255 (floating-point value). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

blurY:Number [optional] – The amount to blur vertically. Valid values are from 0 to 255 (floating-point value). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

import flash.filters.BlurFilter;
var blurX:Number = 30;
var blurY:Number = 30;
var quality:Number = 3;
var my_blur_filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
createEmptyMovieClip("terrain", 1);
terrain.lineStyle(20, 0xdd00dd, 100);
terrain.filters = new Array(my_blur_filter);
imdrawing = false;
onMouseDown = function () {
	if (imdrawing == false) {
		terrain.moveTo(_xmouse, _ymouse);
		imdrawing = true;
	}
	if (imdrawing == true) {
		onEnterFrame = function () {
			terrain.lineTo(_xmouse, _ymouse);
		};
	}
};
onMouseUp = function () {
	onEnterFrame = function () {
		imdrawing = false;
	};
};

This script is similar to the previous one, and applies a blur instead of a bevel

Adding a Glow

Parameters:

color:Number [optional] – The color of the glow, in the hexadecimal format 0xRRGGBB. The default value is 0xFF0000.

alpha:Number [optional] – The alpha transparency value for the color. Valid values are 0 to 1. For example, .25 sets a transparency value of 25%. The default value is 1.

blurX:Number [optional] – The amount of horizontal blur. Valid values are 0 to 255 (floating point). The default value is 6. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

blurY:Number [optional] – The amount of vertical blur. Valid values are 0 to 255 (floating point). The default value is 6. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

strength:Number [optional] – The strength of the imprint or spread. The higher the value, the more color is imprinted and the stronger the contrast between the glow and the background. Valid values are 0 to 255. The default is 2.

quality:Number [optional] – The number of times to apply the filter. Valid values are 0 to 15. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

inner:Boolean [optional] – Specifies whether the glow is an inner glow. The value true indicates an inner glow. The default is false, an outer glow (a glow around the outer edges of the object).

knockout:Boolean [optional] – Specifies whether the object has a knockout effect. The value true makes the object’s fill transparent and reveals the background color of the document. The default is false (no knockout effect).

import flash.filters.GlowFilter;
var color:Number = 0x33CCFF;
var alpha:Number = .8;
var blurX:Number = 35;
var blurY:Number = 35;
var strength:Number = 2;
var quality:Number = 3;
var inner:Boolean = false;
var knockout:Boolean = false;
var my_glow_filter:GlowFilter = new GlowFilter(color, alpha, blurX, blurY, strength, quality, inner, knockout);
createEmptyMovieClip("terrain", 1);
terrain.lineStyle(20, 0xdd00dd, 100);
terrain.filters = new Array(my_glow_filter);
imdrawing = false;
onMouseDown = function () {
	if (imdrawing == false) {
		terrain.moveTo(_xmouse, _ymouse);
		imdrawing = true;
	}
	if (imdrawing == true) {
		onEnterFrame = function () {
			terrain.lineTo(_xmouse, _ymouse);
		};
	}
};
onMouseUp = function () {
	onEnterFrame = function () {
		imdrawing = false;
	};
};

Same as before…

Adding a shadow

distance:Number [optional] – The offset distance for the shadow, in pixels. The default value is 4 (floating point).

angle:Number [optional] – The angle of the shadow, 0 to 360Ëš (floating point). The default value is 45.

color:Number [optional] – The color of the shadow, in hexadecimal format 0xRRGGBB. The default value is 0×000000.

alpha:Number [optional] – The alpha transparency value for the shadow color. Valid values are 0 to 1. For example, .25 sets a transparency value of 25%. The default value is 1.

blurX:Number [optional] – The amount of horizontal blur. Valid values are 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

blurY:Number [optional] – The amount of vertical blur. Valid values are 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

strength:Number [optional] – The strength of the imprint or spread. The higher the value, the more color is imprinted and the stronger the contrast between the shadow and the background. Valid values are 0 to 255. The default is 1.

inner:Boolean [optional] – Indicates whether or not the shadow is an inner shadow. A value of true specifies an inner shadow. The default is false, an outer shadow (a shadow around the outer edges of the object).

hideObject:Boolean [optional] – Indicates whether or not the object is hidden. A value of true indicates that the object itself is not drawn; only the shadow is visible. The default is false (show the object).

import flash.filters.DropShadowFilter;
var distance:Number = 20;
var angleInDegrees:Number = 45;
var color:Number = 0x000000;
var alpha:Number = .8;
var blurX:Number = 16;
var blurY:Number = 16;
var strength:Number = 1;
var quality:Number = 3;
var inner:Boolean = false;
var knockout:Boolean = false;
var hideObject:Boolean = false;
var my_shadow_filter:DropShadowFilter = new DropShadowFilter(distance, angleInDegrees, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject);
createEmptyMovieClip("terrain", 1);
terrain.lineStyle(20, 0xdd00dd, 100);
terrain.filters = new Array(my_shadow_filter);
imdrawing = false;
onMouseDown = function () {
	if (imdrawing == false) {
		terrain.moveTo(_xmouse, _ymouse);
		imdrawing = true;
	}
	if (imdrawing == true) {
		onEnterFrame = function () {
			terrain.lineTo(_xmouse, _ymouse);
		};
	}
};
onMouseUp = function () {
	onEnterFrame = function () {
		imdrawing = false;
	};
};

Mixing all together

You can obviously mix all styles together, but pay attention: the more complex your line style, the more CPU expansive the movie, as you can see in this example

// bevel filter
import flash.filters.BevelFilter;
var distance:Number = 5;
var angleInDegrees:Number = 45;
var highlightColor:Number = 0xFFFF00;
var highlightAlpha:Number = .8;
var shadowColor:Number = 0x0000FF;
var shadowAlpha:Number = .8;
var blurX:Number = 5;
var blurY:Number = 5;
var strength:Number = 5;
var quality:Number = 3;
var type:String = "inner";
var knockout:Boolean = false;
var my_bevel_filter:BevelFilter = new BevelFilter(distance, angleInDegrees, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout);
// blur filter
import flash.filters.BlurFilter;
var blurX:Number = 30;
var blurY:Number = 30;
var quality:Number = 3;
var my_blur_filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
// shadow
import flash.filters.DropShadowFilter;
var distance:Number = 20;
var angleInDegrees:Number = 45;
var color:Number = 0x000000;
var alpha:Number = .8;
var blurX:Number = 16;
var blurY:Number = 16;
var strength:Number = 1;
var quality:Number = 3;
var inner:Boolean = false;
var knockout:Boolean = false;
var hideObject:Boolean = false;
var my_shadow_filter:DropShadowFilter = new DropShadowFilter(distance, angleInDegrees, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject);
// glow
import flash.filters.GlowFilter;
var color:Number = 0x33CCFF;
var alpha:Number = .8;
var blurX:Number = 35;
var blurY:Number = 35;
var strength:Number = 2;
var quality:Number = 3;
var inner:Boolean = false;
var knockout:Boolean = false;
var my_glow_filter:GlowFilter = new GlowFilter(color, alpha, blurX, blurY, strength, quality, inner, knockout);
_root.createEmptyMovieClip("terrain", 1);
_root.terrain.lineStyle(10, 0xff00ff, 100);createEmptyMovieClip("terrain", 1);
terrain.lineStyle(20, 0xdd00dd, 100);
terrain.filters = new Array(my_shadow_filter,my_glow_filter,my_blur_filter,my_bevel_filter);
imdrawing = false;
onMouseDown = function () {
	if (imdrawing == false) {
		terrain.moveTo(_xmouse, _ymouse);
		imdrawing = true;
	}
	if (imdrawing == true) {
		onEnterFrame = function () {
			terrain.lineTo(_xmouse, _ymouse);
		};
	}
};
onMouseUp = function () {
	onEnterFrame = function () {
		imdrawing = false;
	};
};

That’s all at the moment, donwload all sources and give me feedback.
In the next step I’ll teach you how to save the drawing and add a bouncing ball to the stage…

Rate this post: 1 Star

(91 votes, average: 4.70 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 149 comments

nyls

on January 9, 2007 at 11:47 am

That is a easy implementation of drawing, but let’s say we want to save our ‘line’ and redraw it.. Would you use a bitmap class ? or save the moveTo, lineTo points ??
Tony

on January 9, 2007 at 7:05 pm

Interesting and useful…
jonathan

on January 10, 2007 at 4:10 am

Sorry for such a simple question. But what version of flash do you use to start the process. Do you need the $600 verison/
thanks
mark

on January 11, 2007 at 3:32 am

very cool. could you show me how to add a button so when it is pressed it will change the color of the line?
Atilla

on January 11, 2007 at 5:38 pm

This tut is awesome!, i’ll wait for the next and then i start creating ;)
Ray

on January 12, 2007 at 11:05 pm

Can you explain us about shooting, please??

I can’t wait for that tutorial

This is really good
eblup

on January 14, 2007 at 9:57 am

like line rider whare the beep is the car lol ill just wait
Jack

on January 15, 2007 at 5:00 am

Bouncing ball? I wanna learn how to put the linerider guy on there and do it like the line rider guy does!
Toast

on January 15, 2007 at 7:48 pm

Are you going to cover tracing games? Like having an outline and however well you trace it determines points earned?
chris

on January 17, 2007 at 7:27 pm

what fore program do you need to make this ?.. thank you
Patrick

on January 18, 2007 at 5:48 am

ya dude, this hardly has anything to do with line rider
Emanuele Feronato

on January 18, 2007 at 11:53 am

That’s the “line” part.
“Rider” will follow…
Ben Fleming

on January 18, 2007 at 11:41 pm

This is a good tutorial, but if you are going to impletement the collision detection, it is going to need some hefty modifications. I’ve built one of these engines before. Still, the tutorial is nice :)
A.G.

on January 19, 2007 at 3:25 pm

Woah REALLY NICE TUTORIAL ! 10/10
Tony

on January 20, 2007 at 12:33 pm

I recomend you this program to make videos of your tutorials, Emanuele
its good and very useful to make tutorials

Camtasia Studio 4
Mousey

on January 20, 2007 at 10:22 pm

wow great tute!

keep up the good work!

carn’t wait for the next part!
Renuka

on January 21, 2007 at 10:18 am

Its just fantastic
Matt

on January 21, 2007 at 6:51 pm

Why Don’t You Just Use The
updateAfterEvent() function instead of putting the fps up because if you draw alot of lines flash has to redraw them every time you draw one and if you add filters and increased fps you can make flash slow down and come to a complete stop
Mindbreaker9

on January 23, 2007 at 12:30 pm

Make the 2nd part !! You are a realy good AS ! :p
crisel

on January 24, 2007 at 11:39 pm

That’s a wonderful tutorial! I like it! ;)
Hope u can help out to develop my knowledge using flash both in animation and action scripting.

God speed!
sam

on January 26, 2007 at 12:39 am

sry if this sounds like a noob question but i just started fash yesturday an d i wanted to know how to make a new movie?
thanks and nice tut
rage thomas

on January 30, 2007 at 1:39 am

omg thats so amazing thanx
Create a flash draw game like Line Rider or others - part 2 at Emanuele Feronato

on February 3, 2007 at 5:18 pm

[...] Please read part 1 if you didn’t already. [...]
Priya

on February 4, 2007 at 3:35 am

Nice..but how to fix this script for a button…..?
Rivhard

on February 10, 2007 at 5:48 am

is this flash mx… ?

i have an error

“Scene=Scene 1, Layer=Layer 1, Frame=1: Line 1: ‘;’ expected
import flash.filters.DropShadowFilter;”

why??
gknu.com » Flash Game Building- Extra Credit

on February 12, 2007 at 6:04 am

[...] Flash Game Creation Line Rider etc [...]
ashley tunley

on February 12, 2007 at 1:14 pm

i found this so helpful
i even..

created my own line rider
it is awesome
you have been the main reason as to why i created it succesfully
your great
thnx

ashley
=)
V34

on February 17, 2007 at 5:24 am

I’m very impressive that you want to share the experience with us. I’m very thankful for you doing this. Tomorrow I’m going to dedicate the day for learning what you’ve just showed us.
Create a flash draw game like Line Rider or others - part 3 at Emanuele Feronato

on February 17, 2007 at 5:51 pm

[...] Read lessons 1 and 2 if you haven’t done it already. [...]
miffy

on February 17, 2007 at 5:57 pm

this game looks fun
Flash simple timer/countdown at Emanuele Feronato

on February 19, 2007 at 8:37 pm

[...] This is a very simple function we will use in the games we are going to create, such as “line rider”. [...]
jay

on February 25, 2007 at 12:56 pm

how do i change the depth of the object. i got 2004 version
Joe

on February 27, 2007 at 2:02 am

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 19: Operator ‘=’ must be followed by an operand
Â Â if (imdrawing == false) {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 20: Syntax error.
Â Â Â Â terrain.moveTo(_xmouse, _ymouse);

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 21: Syntax error.
Â Â Â Â imdrawing = true;

Total ActionScript Errors: 3 Reported Errors: 3

I DONT UNDERSTAND WHY
Joe

on February 27, 2007 at 2:25 am

I figured it out… i copy pasted the script and for some reason after i deleted all of the numbers the spaces that were left over had to be removed… my bad
Marcel Ngan

on February 27, 2007 at 1:51 pm

It said unexpected file format when I try to start it!!!
Jeff Nemeth

on February 28, 2007 at 4:28 pm

I had an error in my actionscript on the last part( where you combine all the filters).
Dee

on March 1, 2007 at 4:51 pm

Is there a way to save the drawing you’ve created?
Lachlan

on March 4, 2007 at 1:58 am

Great! Thank you so much!!

I’m coming to this site more often now!
Create a flash draw game like Line Rider or others - part 4 at Emanuele Feronato

on March 4, 2007 at 7:30 pm

[...] Here we go with the 4th part. Read steps 1, 2 and 3 and you’re ready to go. [...]
Jimmy

on March 9, 2007 at 2:29 am

Just what I was looking for!

Very helpful indeed.
Flash game creation tutorial - part 5.3 at Emanuele Feronato

on March 14, 2007 at 12:54 pm

[...] filters:Array – An indexed array containing each filter object currently associated with the text field. (you can see some filters in action in draw game creation tutorial part 1) [...]
cody

on March 27, 2007 at 12:21 am

dude where can i go to get this stuff free i want the program do you know where i can get it free?
Create a flash draw game like Line Rider or others - part 5 at Emanuele Feronato

on March 31, 2007 at 12:11 am

[...] You should read steps 1 to http://www.emanueleferonato.com/2007/03/04/create-a-flash-draw-game-like-line-rider-or-others-part-4/ before continuing with this one, although this time it’s not so important, because before to approach the “running car” I am going to explain the “walking man” on a line. [...]
Shanda

on April 3, 2007 at 12:44 am

Where exactly do you put these codes at???

thank you
richard

on April 12, 2007 at 12:32 pm

Hi Emanuele,

Thanks for these examples of drawing, these are great. Do you know if it is posible to save the final drawings into a signal frame of a fla file? or to a database?

thank you
juan

on April 14, 2007 at 5:19 am

man awsome…. that was very instructive….
just what y was looking for
» Flash Tutorials

on April 27, 2007 at 5:15 pm

[...] Create Line Rider – 5 Part indepth tutorial on how to create a game like Line Rider [...]
Craig Akehurst

on April 28, 2007 at 5:46 pm

Hey

I was wondering if you could help me! What im trying to do is use this type of line drawing to let the user define the path of a movieclip. In the same way that guide layer works. Hope that makes sense!

Cheers
Ese

on May 2, 2007 at 6:17 pm

Awsome 100/10
Shawn

on May 10, 2007 at 4:21 am

where do i type all that stuff into is it a program or like a windows command prompt?
thomas

on May 11, 2007 at 11:34 pm

amazing
kieren

on May 14, 2007 at 8:53 am

No, Shawn, it’s Flash.

Visit http://www.adobe.com/products/flash/ to buy.
Cutie

on May 23, 2007 at 9:54 am

nice…:P
Cayson H

on June 11, 2007 at 10:55 pm

Wow, you people complain a lot. You open the window to type this into by pressing F9 in flash. The program you need is Flash, anyone one of them that supports Actionscript 2.0/3.0 (either one will do). This includes Flash MX 2004, Flash 8, and Flash CS3 (Brand New!). It cost’s about $700 USD. This is very much so of a line rider game. Look at the name of ‘Line’ Rider, Hint Hint Nudge Nudge. Don’t expect to learn it all in a hour, or one tutorial! Have patience, you need to know this for a later tutorial (when you make the terrain) and I’ve been studying Flash 8 Pro/Flash MX 2004 Pro for over a year, read over 60 tutorials, read over 500 pages about flash, and still learning from these uber nice people, who take this much time to teach you so much, â€°/10 (Unlimited out of 10). I’ve tried to spread my knowledge through tutorials, video and HTML documents, It takes alot of work, more than these whiners can imagine, Thanks so much â˜»â˜ºâ˜»â˜ºâ˜»

P.S. Goodluck with your motion path’s (Yes, you explained it good!) Craig â˜ºâ™€â˜»â™€â˜º
Cutie

on June 13, 2007 at 9:17 pm

it is only the drawing part, can u show me some coding on how to do the coloring after finish drawing? can i save the file and print it?

thankz..:P
chris

on June 22, 2007 at 4:59 pm

haha i love it, its the first actionscript that i used that actually works
On the horizon #1 at Emanuele Feronato

on June 24, 2007 at 2:03 am

[...] Next part of the line rider tutorial [...]
Creation of the engine behind “Nodes” game with Flash at Emanuele Feronato

on July 7, 2007 at 5:14 pm

[...] Line 15: Moving the line pointer to the first laser centre. At this point I recommed you to read Create a flash draw game like Line Rider or others – part 1 tutorial for more information about line drawing in Flash. [...]
Creation of a game like String Avoider tutorial at Emanuele Feronato

on July 12, 2007 at 4:13 pm

[...] Line 13: Setting the line style of the tail movieclip with a stroke height of 2 filled with green. For more information about drawing and line styles, check this tutorial. [...]
Throw a ball with a sling physics Flash tutorial at Emanuele Feronato

on August 13, 2007 at 4:08 pm

[...] Line 14: Placing the pen on the center of the first sling. If you aren’t familiar with draw commands, read Create a flash draw game like Line Rider or others – part 1 tutorial. [...]
Creation of a Ragdoll with Flash part 2: Constraints at Emanuele Feronato

on August 26, 2007 at 8:46 pm

[...] Line 8: Defining the drawing style as a red 3 pixels thick pencil. To know more about drawing styles refer to this tutorial [...]
Miguel

on August 27, 2007 at 2:38 am

This is extremely useful
I really like it GREAT TUTORIAL!!!!!!!!!!!!!!!!
chazzer

on September 1, 2007 at 1:16 pm

To complicated
That one guy

on September 5, 2007 at 6:38 pm

how do you make the next part with the person that follows the lines??
That one guy

on September 5, 2007 at 6:54 pm

Also i need help because my line starts with the mouse held down and you have to click once to get it to stop drawing. How do i fix this. (there is a place on the screen and itll make a lin from that place to where the mouse is) PLEASE HELP!!
Hugh Rection

on September 9, 2007 at 2:37 am

I’m trying to make a little thing where the background is white and in front of the background is a picture, and in front of the picture is a black box. I want so that by moving the mouse, the black box is erased, and the picture is revealed bit by bit. Any help?
alasdair

on September 11, 2007 at 10:05 am

hi i am alasdair hall

i have all ways loved you website it is very help full,but i have been serching the web and i haven’t fownd a website that can teach me how to make a 2D game like “top gear radom”or”adrenalin”or”four weels of madness”.
could you please help me
Create a survival horror game in Flash tutorial - part 1 : Emanuele Feronato - blog of an italian geek

on September 26, 2007 at 8:40 pm

[...] Line 41: Setting the line style to a white, one pixel line. For more information about Flash drawing, read Create a flash draw game like Line Rider or others – part 1. [...]
Darrell

on September 29, 2007 at 1:13 am

Is it possible to use a jpeg photo instead of the standard rider?
David

on October 4, 2007 at 4:47 pm

Why does the line always appear on the top level??? How can I force it to appear in the background so it appears behind other objects in my movie?
randomator

on October 17, 2007 at 5:54 pm

by changing the depth
richter

on November 27, 2007 at 10:34 pm

AWSOME ^-^
izzy032294

on December 3, 2007 at 1:11 am

just read the script and on the button put

on(release){“part of script you want changed”}

example:
on(release){terrain.lineStyle(20, 0xdd00dd, 100);}

that’s pretty simple how hard was it to figure out…better question did you try something b4 you asked the question honestly it takes 4 seconds to figure out
suhwa Lee

on December 6, 2007 at 9:26 am

Wow. It’s amazing! Thanks for this useful tutorial!
jagga

on December 18, 2007 at 1:23 am

its a good game
Custard

on December 27, 2007 at 1:32 pm

Nice one!
eric

on December 30, 2007 at 6:34 am

COMPILATION ERROR in code action
Error in code at line 14:
var my_bevel_filter:BevelFilter = new BevelFilter(distance, angleInDegrees, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout)
malique

on January 7, 2008 at 1:58 am

this is a good game and I like it
hennie

on January 11, 2008 at 11:06 pm

i have the same problem

my line starts with the mouse hold down and you have to click once to get it to stop drawing

PLEASE HELP
Create a Flash game like Metro Siberia Underground : Emanuele Feronato - italian geek and PROgrammer

on January 18, 2008 at 2:16 pm

[...] Lines 2-3: Defining ship and smoke glow filters. This will give the blurry effect. More information about filters at Create a flash draw game like Line Rider or others – part 1. [...]
Mem

on January 20, 2008 at 5:56 am

Try this:

http://www.lukamaras.com/tutorials/cool-design/flash-drawing-pad.html
jake

on January 27, 2008 at 6:53 pm

you guys suck!!! you dont give a download to make the game you only teach! i hate you! fuck you!
line physics « headwinds lab

on February 1, 2008 at 6:01 pm

[...] Line Rider Tutorial by Emanuele Feronato [...]
danny

on February 3, 2008 at 3:29 am

you need flash 8… i think it’s $350 but i’m not sure
teshn

on February 4, 2008 at 1:08 am

Wow!!! Whaen do we get to make a game?
izms » Blog Archive » links for 2008-02-04

on February 5, 2008 at 12:19 am

[...] Create a flash draw game like Line Rider or others – part 1 : Emanuele Feronato – italian geek and P… In the last months I saw a lot of flash drawing games, like Line Rider and Softball. The concept is very simple yet addictive because the player has the capability to draw the stage. (tags: as3 physics actionscript flash drawing source tutorial gamedev game) [...]
ises

on February 7, 2008 at 11:45 am

FANTASTICO !!!! thank you so much. only now we need to create button to change the color and erase some drawing.
Sergiu

on February 20, 2008 at 10:35 am

Greatest tutorial about drawing I ever seen, it tells everything you want to know. I searched the internet for day until i found this, and this solved all my problems!
dafd

on February 22, 2008 at 8:01 pm

cool
Sacrafan

on March 1, 2008 at 7:28 am

how do you make it so you can play the game with a rider and everything?? btw i want MX 2004, is there anyway to upgrade for free?
Jaco208

on March 12, 2008 at 12:19 am

It’s called a platformer, and it is quite hard to make, unless you have a good engine made…
How To Make A Bouncy Ball Game «

on March 25, 2008 at 8:00 pm

[...] How To Make A Bouncy Ball Game This is actually from http://www.emanueleferonato.com/2007/01/08/create-a-flash-draw-game-like-line-rider-or-others-part-1... [...]
DRM

on April 3, 2008 at 12:48 am

http://www.lukamaras.com/tutorials/cool-design/flash-drawing-pad.html

I can’t apply the filters with this tutorial??
need some help!!
hfcxgxhcfg

on April 14, 2008 at 12:00 am

dumbest fag game i’ve ever scene
saivan

on April 15, 2008 at 5:39 am

to change the color of the lines all you have to do is make a new button symbol and inside the actionscript panel for the button (actionscript 2) type this code

on (release) {
terrain.lineStyle(13,0×666600,50);
}

thats it and you have to reddo for every color inside the bracket first specify line size
then in the colour pallet specify the color as i have
and the last comma is alpha or transperency

ok thats it
Kfbdude

on April 15, 2008 at 2:06 pm

hfcxgxhcfg this is part 1 its not supposed to be a game yet… andits also just a tutorial not an actual game. Well thanks it is an awesome tutorial this is meant for line rider but I’m just using part one for like a drawing thing.
x33

on April 30, 2008 at 1:39 pm

i just want to make a game
x33

on April 30, 2008 at 1:40 pm

i just want to make a game.
numdg jr

on May 3, 2008 at 12:28 pm

can some one please put a link to the game they have made like line rider
onlineflash

on May 12, 2008 at 8:21 pm

I cant always understand these tutorials on this site as there is too much on one page
My Flash Resource - New Ideas and News for Applying Flash to Complex Gaming Apps » Blog Archive » Great Flash Tutorial: How to make a game like “Line Rider”

on May 14, 2008 at 9:46 pm

[...] Create A Flash Draw Game [...]
ravi

on May 19, 2008 at 2:02 pm

it was nice,but i wan this line should be in particular area,
do u no ? how can it possible
Raghav

on May 19, 2008 at 2:51 pm

Wow, I have no words to express.
draw it and ride it

on May 31, 2008 at 10:15 pm

this game is ware you draw your track and you have a can and ride you track
Austin

on June 9, 2008 at 7:43 am

Hey it’s easy to make different color lines with a button changer. Say you want 3 colors, then make 3 different frames. set it so you can see multiple frames. then make the actionscript for the button icons be,

on(release){gotoAndStop(2);}

if you want the next color for the next frame, so ex: if your color is green (1st frame) and your second frame color is red, your color will switch. Actionscript is same for third color exept it’s like:

on(release){gotoAndStop(3);}

and for frame 1 color:

on(release){gotoAndStop(1);}

Enjoy,

PS: you can find use multiple frames tutorial on many google searches.
Austin

on June 9, 2008 at 7:44 am

Dont forget to add the dra actionscript to every frame but in different colors.
Josh

on June 13, 2008 at 5:17 am

i know this is old and you might not read it but all you have to do is make a button (letz call it “red_btn” and whatever your line MC is use that in *line*) in the red_btn actions put

on (press) {
line.lineStyle (1, 0xFF0000, 100)
}
kurt

on June 21, 2008 at 1:58 am

Does anyone know an easy way to make an on(release) funtion that clears all the lines, and one that deletes the last line? Kind of like a Reset and Undo button.
Aang

on June 30, 2008 at 7:54 pm

Very very useful… but I need save the draw to post it on the website…

anybody can help me with this?
great

on July 6, 2008 at 12:27 pm

Great!
Thanks!
Thauwa

on July 8, 2008 at 4:55 pm

This is all I needed….
Thank You!!
Thauwa

on July 8, 2008 at 5:09 pm

This is all I needed….
Thank You!!

Does anyone know how to button all stlyes individually?

Like, when clicked on BLUR button, instead on plain lines, blur comes?
Dani

on July 12, 2008 at 12:02 am

Kl, Very gd but i kinda dont understand wot u have to do! LOL
MGO Ice-pick

on August 22, 2008 at 3:08 pm

Create a Line Rider Part 1

This is a great tutorial however I had identified a problem with a bit of the code. imdrawing = false; did not work on my Apple Mac so I have to change it a bit to var imdrawing = “no” and imdrawing = “yes”.

Anyway its still a great tutorial thanks for passing on your skills
julian

on August 28, 2008 at 5:04 am

hi,
it works great with me…
i was just wondering how do i make it so that
when you draw you can also chose
what colour you want it to be.

could you help?

thanks julian
julian

on August 28, 2008 at 5:38 am

HI,
I FIGERD IT OUT,
I HAVE MAE BUTTONS THAT CHANGE THE COLOUR BUT WHEN EVER I CHANGE THE COLOUR WITH THE BUTTONS
THE THING I HAVE DRAWED DISAPIERS…
COULD YOU HELP ME??

JULIAN
j

on August 28, 2008 at 3:54 pm

Great tutorial man. Have you done anything like this with custom “pen styles”. For example, instead of drawing with just a line, how about drawing with a star shape? or an oval? Square? etc? I’ve been trying to figure it out. Getting close, but I think I’m approaching it all wrong. Any help would be great. Thanks man!
Adobe Flash Tutorial Part 2

on September 8, 2008 at 10:55 am

[...] Line Rider is a game where player has the capability to draw the stage (with lines) and the rider will ride the line. [...]
Calvin

on September 29, 2008 at 7:08 pm

This might sound like a silly question, but where so I type all this code for the game? In Notepad?

Please Answer!
clark

on October 23, 2008 at 3:21 pm

Sei un grande!
grazie per questi bellissimi tutorial!
Eliott

on November 23, 2008 at 4:12 pm

Okay, Nice tutorial man! AWESOME, but one problem… I have no idea how to limit the drawing. I have tried putting a bar that changes colour but what do i do. I would like it so that i could have a time limit or something that starts going down on click and stops when released. Only problem how do i limit the amount available to draw because it will carry on drawing until mouse released, THEN it will stop. And only then… Any help apprciated
A guy who posted this at November 26th, thats right, he posted it

on November 26, 2008 at 8:14 pm

Awsome!!!!. Emanuele, i want to thank you for the good work, you have taught me more than i already knew… 1 more book to the library in my brain… i am more aware of filters and how to use them. but instead of using more code (var inner:Boolean = false, distance, etc.) i just type the numbers in the filter command:
var glow1:GlowFilter = new GlowFilter(0x00FF00, 100, 15, 15, 4, 3, false, false);
var bevel1:BevelFilter = new BevelFilter(2, 45, 0x65FF00, 1, 0×006600, 1, 5, 5, 3, 3, “inner”, false); // filters

and to save space+lag, i collapse the actions into sertain sections (//filters, //line, //mainActions, etc.);

So thanks
A guy who posted this at November 26th, thats right, he posted it

on November 26, 2008 at 8:30 pm

Calvin… You must type the actions in the Actions Column (by pressing F9) on Flash Products (google it) in a Flash Document that is ActionScript 2.0.

:)
peter

on December 21, 2008 at 5:32 pm

how do make a ‘rubber’
E-Book & Tutorial IT » Blog Archive » Flash Tutorials 2

on December 25, 2008 at 3:27 am

[...] Create Line Rider – 5 Part indepth tutorial on how to create a game like Line Rider [...]
Flash Oyun Dersleri Ã‡izgi OyunlarÄ± (1) « Es8 Rss KaynaÄŸÄ±nÄ±z

on March 19, 2009 at 7:12 am

[...] KodlarÄ± yazan : HayranÄ± olduÄŸum Ferenato [...]
mike

on May 12, 2009 at 2:26 pm

pretty cool
saurabh

on June 25, 2009 at 2:33 pm

Your examples are cool.
But, I want to draw a line with 90 degree bounded like “L” shape in a single mouse movement.

How it can be?
Create a flash draw game like Line Rider or others – part 1 | Tutorial Collection

on June 27, 2009 at 4:04 am

[...] View Tutorial No Comment var addthis_pub="izwan00"; BOOKMARK This entry was posted on Saturday, June 27th, 2009 at 7:33 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. [...]
Radthemad4

on July 2, 2009 at 8:15 pm

Awesome code but I’ve found that using onMouseMove results in a much smoother line than onEnterFrame even in 1 FPS.
iWolf

on September 1, 2009 at 4:54 pm

Hi emanuele, i took a look at your tutorial and its excellent. But the only thing missing is how to create an eraser. Do you think perhaps there could be a way to erase parts of the line you make with a set radius around the mouse (eraser).
Chrispy

on December 6, 2009 at 3:17 pm

I dont know which program to use. :(
Shelbi

on February 18, 2010 at 8:36 pm

Lol. Hi. i love it
!
is very simple and easy:P
but i only played it like 3 4
times lol.
XD

I hope ya had fun -_-
MrP

on February 19, 2010 at 6:15 am

yo your tuts are amazing im a noob flsher lol and i understood everything lol

ty

for reals
J. Ramon Leon

on April 13, 2010 at 10:37 am

Great tutorial. Thanks Emanuel, great job!.

Best regards from Spain.
EdVentures in Technology » Diigo Links 04/20/2010

on April 20, 2010 at 7:33 pm

[...] Create a Flash game like Linerider – Emanuele Feronato [...]
Jesse

on June 20, 2010 at 3:18 am

If you have problems actually figuring out the simple stuff, such as where to put the code, you should look up beginner’s tutorials, not in-depth ones like this. The Kongregate.com tutorials are nice but, unfortunately, use seperate actionscript files, unlike this tutorial.
Miniclip

on June 23, 2010 at 10:40 am

Wow… great tutorial man! Just found your blog and I can’t stop reading. Bookmarked!
ALEX

on July 7, 2010 at 8:31 pm

What im trying to do here is create a game where you can click on a color and you write in that color, i.e. click on a black dot and draw black, and maybe also, say, a spray can, where you get the blur affect, and a pencil, just plain drawing. Then you can hit NEXT FRAME and you are presented with the same thing except a blank drawing area and two buttons: previous frame and next frame. And so on for about 200 frames. Also on every frame is a preview button, which, instead of gotoAndStop();
it says gotoAndPlay, so you make your own animation and preview it! But I need help making different colors and such, as I am just starting with AS2. Please email any help to me @ alex.kolozsy@yahoo.com
Giuseppe

on September 21, 2010 at 2:13 am

Grazie Emanuele, molto interessante :)
CyberSam

on December 3, 2010 at 12:23 pm

Great. Challenged my students to make a Line rider game in class using Aligator Flash Designer. I thought I’d do some research. Excellent Tutorial. I tried your script in their program. Works beautifully. Looking forward to the rest.
Free Flash Animation

on December 5, 2010 at 3:15 pm

Thank you for sharing this information. I found it very needful for me. Wonderful job.
Ravi Sharma

on January 8, 2011 at 11:18 am

Thanks a lot for givig such helpful information.

Its reeeally helpful.
Jojo

on February 1, 2011 at 3:57 pm

Excellent tutorial Emanuele, it tells everything you need to know. Thanks a lot.
formula 21 formen

on March 1, 2011 at 11:42 am

Wow… great tutorial man! Just found your blog and I can’t stop reading. Bookmarked!
Zach

on April 30, 2011 at 10:53 pm

Thanks! I always look to this site when I’m having questions about Flash.
Is there any way to have color buttons, so when you click on a button of that color that’s what color the brush is?
See, I’m trying to make a game like MS Paint, and I want to be able to change the color in-game.
Lucas

on July 1, 2011 at 3:47 am

i made a wonderful game
rajat de

on September 11, 2011 at 1:29 pm

Very nice and cool and good and useful and gr8
forklift ehliyeti

on November 10, 2011 at 2:48 pm

Grazie Emanuele, molto interessante :)

italian geek and PROgrammer

This post has 149 comments

Tony

jonathan

mark

Ray

eblup

Toast

chris

Patrick

Emanuele Feronato

A.G.

Tony

Renuka

Matt

Mindbreaker9

crisel

rage thomas

Priya

ashley tunley

miffy

jay

Joe

Joe

Marcel Ngan

Jeff Nemeth

Dee

Lachlan

Jimmy

cody

Shanda

richard

Shawn

thomas

Cutie

Cayson H

Cutie

chris

Miguel

chazzer

That one guy

That one guy

Hugh Rection

Darrell

David

richter

izzy032294

suhwa Lee

Custard

eric

hennie

Mem

teshn

ises

dafd

DRM

hfcxgxhcfg

saivan

x33

x33

numdg jr

ravi

Raghav

Austin

Austin

Josh

great

Dani

MGO Ice-pick

julian

julian

j

Calvin

clark

A guy who posted this at November 26th, thats right, he posted it

A guy who posted this at November 26th, thats right, he posted it

peter

mike

saurabh

Radthemad4