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

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

Drawing with the mouse

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

This is even simpler

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

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 0x000000.

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.

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.

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 and approximates a Gaussian blur.

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

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 0x000000.

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.

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

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 is false (no knockout).

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

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

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…

  • 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

    Interesting and useful…

  • jonathan

    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

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

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

  • Ray

    Can you explain us about shooting, please??

    I can’t wait for that tutorial

    This is really good

  • eblup

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

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

  • Toast

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

  • chris

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

  • Patrick

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

  • Emanuele Feronato

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

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

    Woah REALLY NICE TUTORIAL ! 10/10

  • Tony

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

    Camtasia Studio 4

  • wow great tute!

    keep up the good work!

    carn’t wait for the next part!

  • Renuka

    Its just fantastic

  • Matt

    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

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

  • crisel

    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

    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

    omg thats so amazing thanx

  • Pingback: Create a flash draw game like Line Rider or others - part 2 at Emanuele Feronato()

  • Priya

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

  • is this flash mx… ?

    i have an error

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

    why??

  • Pingback: gknu.com » Flash Game Building- Extra Credit()

  • ashley tunley

    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

    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.

  • Pingback: Create a flash draw game like Line Rider or others - part 3 at Emanuele Feronato()

  • miffy

    this game looks fun

  • Pingback: Flash simple timer/countdown at Emanuele Feronato()

  • jay

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

  • Joe

    **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

    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

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

  • Jeff Nemeth

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

  • Dee

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

  • Lachlan

    Great! Thank you so much!!

    I’m coming to this site more often now!

  • Pingback: Create a flash draw game like Line Rider or others - part 4 at Emanuele Feronato()

  • Jimmy

    Just what I was looking for!

    Very helpful indeed.

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

  • cody

    dude where can i go to get this stuff free i want the program do you know where i can get it free?

  • Pingback: Create a flash draw game like Line Rider or others - part 5 at Emanuele Feronato()

  • Shanda

    Where exactly do you put these codes at???

    thank you

  • richard

    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

  • man awsome…. that was very instructive….
    just what y was looking for

  • Pingback: » Flash Tutorials()

  • 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

    Awsome 100/10

  • Shawn

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

  • thomas

    amazing

  • No, Shawn, it’s Flash.

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

  • Cutie

    nice…:P

  • Cayson H

    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

    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

    haha i love it, its the first actionscript that i used that actually works

  • Pingback: On the horizon #1 at Emanuele Feronato()

  • Pingback: Creation of the engine behind “Nodes” game with Flash at Emanuele Feronato()

  • Pingback: Creation of a game like String Avoider tutorial at Emanuele Feronato()

  • Pingback: Throw a ball with a sling physics Flash tutorial at Emanuele Feronato()

  • Pingback: Creation of a Ragdoll with Flash part 2: Constraints at Emanuele Feronato()

  • Miguel

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

  • chazzer

    To complicated

  • That one guy

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

  • That one guy

    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

    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?

  • 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

  • Pingback: Create a survival horror game in Flash tutorial - part 1 : Emanuele Feronato - blog of an italian geek()

  • Darrell

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

  • David

    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?

  • by changing the depth

  • richter

    AWSOME ^-^

  • izzy032294

    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

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

  • its a good game

  • Custard

    Nice one!

  • eric

    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)

  • this is a good game and I like it

  • hennie

    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

  • Pingback: Create a Flash game like Metro Siberia Underground : Emanuele Feronato - italian geek and PROgrammer()

  • Mem
  • you guys suck!!! you dont give a download to make the game you only teach! i hate you! fuck you!

  • Pingback: line physics « headwinds lab()

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

  • teshn

    Wow!!! Whaen do we get to make a game?

  • Pingback: izms » Blog Archive » links for 2008-02-04()

  • ises

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

  • 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

    cool

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

  • It’s called a platformer, and it is quite hard to make, unless you have a good engine made…

  • Pingback: How To Make A Bouncy Ball Game «()

  • DRM

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

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

  • hfcxgxhcfg

    dumbest fag game i’ve ever scene

  • saivan

    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

  • 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

    i just want to make a game

  • x33

    i just want to make a game.

  • numdg jr

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

  • I cant always understand these tutorials on this site as there is too much on one page

  • Pingback: 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”()

  • ravi

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

  • Raghav

    Wow, I have no words to express.

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

  • Austin

    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

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

  • Josh

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

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

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

    anybody can help me with this?

  • great

    Great!
    Thanks!

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

  • 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

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

  • MGO Ice-pick

    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

    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

    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

    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!

  • Pingback: Adobe Flash Tutorial Part 2()

  • Calvin

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

    Please Answer!

  • clark

    Sei un grande!
    grazie per questi bellissimi tutorial!

  • 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

    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, 0x006600, 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

    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

    how do make a ‘rubber’

  • Pingback: E-Book & Tutorial IT » Blog Archive » Flash Tutorials 2()

  • Pingback: Flash Oyun Dersleri Çizgi Oyunları (1) « Es8 Rss Kaynağınız()

  • mike

    pretty cool

  • saurabh

    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?

  • Pingback: Create a flash draw game like Line Rider or others – part 1 | Tutorial Collection()

  • Radthemad4

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

  • iWolf

    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

    I dont know which program to use. :(

  • Shelbi

    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

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

    ty

    for reals

  • Great tutorial. Thanks Emanuel, great job!.

    Best regards from Spain.

  • Pingback: EdVentures in Technology » Diigo Links 04/20/2010()

  • Jesse

    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.

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

  • ALEX

    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

  • Grazie Emanuele, molto interessante :)

  • CyberSam

    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.

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

  • Ravi Sharma

    Thanks a lot for givig such helpful information.

    Its reeeally helpful.

  • Jojo

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

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

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

  • i made a wonderful game

  • rajat de

    Very nice and cool and good and useful and gr8

  • Grazie Emanuele, molto interessante :)

  • i have used your tutorials to create a drawing game that has a character so you can move the character around but when you jump i changed the gravito to 1.5 and increased speed and changed the jump to UP instead of space. i will paste the web address where i uploaded it. http://silentshadow001.deviantart.com/#/d4tir0m

  • Hello,

    very good, I will start to learn flash and these codes will help me very much.

    tks.

    Elson

  • Kitty

    Is there a way to add pressure sensitivity? Thanks!

  • Pingback: GuessNext: complete Flash game with highscores | Emanuele Feronato()

  • ian

    can i use this for making a “letter and number tracing game”?
    and do you have a tutorial in such game?

    • Emanuele Feronato

      sure you can!!

      • ian

        thank you…
        but im having trouble on making this into as3
        my mind is spinning while trying to recode this to as3 hahaha
        (ps. is it ok if i put your name on my credits pane?)
        (im making my thesis and all i left is the “letter tracing” thou im going to make it free hand and your code on the 5th example is very catchy on the eyes for kids)

      • ian

        and im having trouble with this one making to as3 can you help me?
        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;
        };
        };