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

Posted by Emanuele Feronato on 01/8/07 in Flash

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

PLAIN TEXT
ACTIONSCRIPT:
  1. createEmptyMovieClip("terrain", 1);
  2. terrain.lineStyle(10, 0xff00ff, 100);
  3. terrain.moveTo(100, 100);
  4. terrain.lineTo(300, 100);
  5. terrain.lineTo(300, 300);
  6. terrain.lineTo(100, 300);
  7. 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

PLAIN TEXT
ACTIONSCRIPT:
  1. createEmptyMovieClip("terrain", 1);
  2. terrain.lineStyle(10, 0xff00ff, 100);
  3. onEnterFrame = function () {
  4.     terrain.lineTo(_xmouse, _ymouse);
  5. };

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

PLAIN TEXT
ACTIONSCRIPT:
  1. createEmptyMovieClip("terrain", 1);
  2. terrain.lineStyle(10, 0xff00ff, 100);
  3. imdrawing = false;
  4. onMouseDown = function () {
  5.     if (imdrawing == false) {
  6.         terrain.moveTo(_xmouse, _ymouse);
  7.         imdrawing = true;
  8.     }
  9.     if (imdrawing == true) {
  10.         onEnterFrame = function () {
  11.             terrain.lineTo(_xmouse, _ymouse);
  12.         };
  13.     }
  14. };
  15. onMouseUp = function () {
  16.     onEnterFrame = function () {
  17.         imdrawing = false;
  18.     };
  19. };

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.

PLAIN TEXT
ACTIONSCRIPT:
  1. import flash.filters.BevelFilter;
  2. var distance:Number = 2;
  3. var angleInDegrees:Number = 45;
  4. var highlightColor:Number = 0xff00ff;
  5. var highlightAlpha:Number = 1;
  6. var shadowColor:Number = 0xbb00bb;
  7. var shadowAlpha:Number = 1;
  8. var blurX:Number = 8;
  9. var blurY:Number = 8;
  10. var strength:Number = 10;
  11. var quality:Number = 3;
  12. var type:String = "inner";
  13. var knockout:Boolean = false;
  14. var my_bevel_filter:BevelFilter = new BevelFilter(distance, angleInDegrees, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout);
  15. createEmptyMovieClip("terrain", 1);
  16. terrain.lineStyle(20, 0xdd00dd, 100);
  17. terrain.filters = new Array(my_bevel_filter);
  18. imdrawing = false;
  19. onMouseDown = function () {
  20.     if (imdrawing == false) {
  21.         terrain.moveTo(_xmouse, _ymouse);
  22.         imdrawing = true;
  23.     }
  24.     if (imdrawing == true) {
  25.         onEnterFrame = function () {
  26.             terrain.lineTo(_xmouse, _ymouse);
  27.         };
  28.     }
  29. };
  30. onMouseUp = function () {
  31.     onEnterFrame = function () {
  32.         imdrawing = false;
  33.     };
  34. };

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.

PLAIN TEXT
ACTIONSCRIPT:
  1. import flash.filters.BlurFilter;
  2. var blurX:Number = 30;
  3. var blurY:Number = 30;
  4. var quality:Number = 3;
  5. var my_blur_filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
  6. createEmptyMovieClip("terrain", 1);
  7. terrain.lineStyle(20, 0xdd00dd, 100);
  8. terrain.filters = new Array(my_blur_filter);
  9. imdrawing = false;
  10. onMouseDown = function () {
  11.     if (imdrawing == false) {
  12.         terrain.moveTo(_xmouse, _ymouse);
  13.         imdrawing = true;
  14.     }
  15.     if (imdrawing == true) {
  16.         onEnterFrame = function () {
  17.             terrain.lineTo(_xmouse, _ymouse);
  18.         };
  19.     }
  20. };
  21. onMouseUp = function () {
  22.     onEnterFrame = function () {
  23.         imdrawing = false;
  24.     };
  25. };

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

PLAIN TEXT
ACTIONSCRIPT:
  1. import flash.filters.GlowFilter;
  2. var color:Number = 0x33CCFF;
  3. var alpha:Number = .8;
  4. var blurX:Number = 35;
  5. var blurY:Number = 35;
  6. var strength:Number = 2;
  7. var quality:Number = 3;
  8. var inner:Boolean = false;
  9. var knockout:Boolean = false;
  10. var my_glow_filter:GlowFilter = new GlowFilter(color, alpha, blurX, blurY, strength, quality, inner, knockout);
  11. createEmptyMovieClip("terrain", 1);
  12. terrain.lineStyle(20, 0xdd00dd, 100);
  13. terrain.filters = new Array(my_glow_filter);
  14. imdrawing = false;
  15. onMouseDown = function () {
  16.     if (imdrawing == false) {
  17.         terrain.moveTo(_xmouse, _ymouse);
  18.         imdrawing = true;
  19.     }
  20.     if (imdrawing == true) {
  21.         onEnterFrame = function () {
  22.             terrain.lineTo(_xmouse, _ymouse);
  23.         };
  24.     }
  25. };
  26. onMouseUp = function () {
  27.     onEnterFrame = function () {
  28.         imdrawing = false;
  29.     };
  30. };

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

PLAIN TEXT
ACTIONSCRIPT:
  1. import flash.filters.DropShadowFilter;
  2. var distance:Number = 20;
  3. var angleInDegrees:Number = 45;
  4. var color:Number = 0x000000;
  5. var alpha:Number = .8;
  6. var blurX:Number = 16;
  7. var blurY:Number = 16;
  8. var strength:Number = 1;
  9. var quality:Number = 3;
  10. var inner:Boolean = false;
  11. var knockout:Boolean = false;
  12. var hideObject:Boolean = false;
  13. var my_shadow_filter:DropShadowFilter = new DropShadowFilter(distance, angleInDegrees, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject);
  14. createEmptyMovieClip("terrain", 1);
  15. terrain.lineStyle(20, 0xdd00dd, 100);
  16. terrain.filters = new Array(my_shadow_filter);
  17. imdrawing = false;
  18. onMouseDown = function () {
  19.     if (imdrawing == false) {
  20.         terrain.moveTo(_xmouse, _ymouse);
  21.         imdrawing = true;
  22.     }
  23.     if (imdrawing == true) {
  24.         onEnterFrame = function () {
  25.             terrain.lineTo(_xmouse, _ymouse);
  26.         };
  27.     }
  28. };
  29. onMouseUp = function () {
  30.     onEnterFrame = function () {
  31.         imdrawing = false;
  32.     };
  33. };

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

PLAIN TEXT
ACTIONSCRIPT:
  1. // bevel filter
  2. import flash.filters.BevelFilter;
  3. var distance:Number = 5;
  4. var angleInDegrees:Number = 45;
  5. var highlightColor:Number = 0xFFFF00;
  6. var highlightAlpha:Number = .8;
  7. var shadowColor:Number = 0x0000FF;
  8. var shadowAlpha:Number = .8;
  9. var blurX:Number = 5;
  10. var blurY:Number = 5;
  11. var strength:Number = 5;
  12. var quality:Number = 3;
  13. var type:String = "inner";
  14. var knockout:Boolean = false;
  15. var my_bevel_filter:BevelFilter = new BevelFilter(distance, angleInDegrees, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout);
  16. // blur filter
  17. import flash.filters.BlurFilter;
  18. var blurX:Number = 30;
  19. var blurY:Number = 30;
  20. var quality:Number = 3;
  21. var my_blur_filter:BlurFilter = new BlurFilter(blurX, blurY, quality);
  22. // shadow
  23. import flash.filters.DropShadowFilter;
  24. var distance:Number = 20;
  25. var angleInDegrees:Number = 45;
  26. var color:Number = 0x000000;
  27. var alpha:Number = .8;
  28. var blurX:Number = 16;
  29. var blurY:Number = 16;
  30. var strength:Number = 1;
  31. var quality:Number = 3;
  32. var inner:Boolean = false;
  33. var knockout:Boolean = false;
  34. var hideObject:Boolean = false;
  35. var my_shadow_filter:DropShadowFilter = new DropShadowFilter(distance, angleInDegrees, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject);
  36. // glow
  37. import flash.filters.GlowFilter;
  38. var color:Number = 0x33CCFF;
  39. var alpha:Number = .8;
  40. var blurX:Number = 35;
  41. var blurY:Number = 35;
  42. var strength:Number = 2;
  43. var quality:Number = 3;
  44. var inner:Boolean = false;
  45. var knockout:Boolean = false;
  46. var my_glow_filter:GlowFilter = new GlowFilter(color, alpha, blurX, blurY, strength, quality, inner, knockout);
  47. _root.createEmptyMovieClip("terrain", 1);
  48. _root.terrain.lineStyle(10, 0xff00ff, 100);createEmptyMovieClip("terrain", 1);
  49. terrain.lineStyle(20, 0xdd00dd, 100);
  50. terrain.filters = new Array(my_shadow_filter,my_glow_filter,my_blur_filter,my_bevel_filter);
  51. imdrawing = false;
  52. onMouseDown = function () {
  53.     if (imdrawing == false) {
  54.         terrain.moveTo(_xmouse, _ymouse);
  55.         imdrawing = true;
  56.     }
  57.     if (imdrawing == true) {
  58.         onEnterFrame = function () {
  59.             terrain.lineTo(_xmouse, _ymouse);
  60.         };
  61.     }
  62. };
  63. onMouseUp = function () {
  64.     onEnterFrame = function () {
  65.         imdrawing = false;
  66.     };
  67. };

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

Other Resources: casino game

If you liked this post buy me a beer (or two)

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

del.icio.us tag this | permalink | trackback url

90 Comment(s)

  1. nyls | Jan 9, 2007 | Reply

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

  2. Tony | Jan 9, 2007 | Reply

    Interesting and useful…

  3. jonathan | Jan 10, 2007 | Reply

    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

  4. mark | Jan 11, 2007 | Reply

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

  5. Atilla | Jan 11, 2007 | Reply

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

  6. Ray | Jan 12, 2007 | Reply

    Can you explain us about shooting, please??

    I can’t wait for that tutorial

    This is really good

  7. eblup | Jan 14, 2007 | Reply

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

  8. Jack | Jan 15, 2007 | Reply

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

  9. Toast | Jan 15, 2007 | Reply

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

  10. chris | Jan 17, 2007 | Reply

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

  11. Patrick | Jan 18, 2007 | Reply

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

  12. Emanuele Feronato | Jan 18, 2007 | Reply

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

  13. Ben Fleming | Jan 18, 2007 | Reply

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

  14. A.G. | Jan 19, 2007 | Reply

    Woah REALLY NICE TUTORIAL ! 10/10

  15. Tony | Jan 20, 2007 | Reply

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

    Camtasia Studio 4

  16. Mousey | Jan 20, 2007 | Reply

    wow great tute!

    keep up the good work!

    carn’t wait for the next part!

  17. Renuka | Jan 21, 2007 | Reply

    Its just fantastic

  18. Matt | Jan 21, 2007 | Reply

    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

  19. Mindbreaker9 | Jan 23, 2007 | Reply

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

  20. crisel | Jan 24, 2007 | Reply

    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!

  21. sam | Jan 26, 2007 | Reply

    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

  22. rage thomas | Jan 30, 2007 | Reply

    omg thats so amazing thanx

  23. Priya | Feb 4, 2007 | Reply

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

  24. Rivhard | Feb 10, 2007 | Reply

    is this flash mx… ?

    i have an error

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

    why??

  25. ashley tunley | Feb 12, 2007 | Reply

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

  26. V34 | Feb 17, 2007 | Reply

    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.

  27. miffy | Feb 17, 2007 | Reply

    this game looks fun

  28. jay | Feb 25, 2007 | Reply

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

  29. Joe | Feb 27, 2007 | Reply

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

  30. Joe | Feb 27, 2007 | Reply

    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

  31. Marcel Ngan | Feb 27, 2007 | Reply

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

  32. Jeff Nemeth | Feb 28, 2007 | Reply

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

  33. Dee | Mar 1, 2007 | Reply

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

  34. Lachlan | Mar 4, 2007 | Reply

    Great! Thank you so much!!

    I’m coming to this site more often now!

  35. Jimmy | Mar 9, 2007 | Reply

    Just what I was looking for!

    Very helpful indeed.

  36. cody | Mar 27, 2007 | Reply

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

  37. Shanda | Apr 3, 2007 | Reply

    Where exactly do you put these codes at???

    thank you

  38. richard | Apr 12, 2007 | Reply

    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

  39. juan | Apr 14, 2007 | Reply

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

  40. Craig Akehurst | Apr 28, 2007 | Reply

    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

  41. Ese | May 2, 2007 | Reply

    Awsome 100/10

  42. Shawn | May 10, 2007 | Reply

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

  43. thomas | May 11, 2007 | Reply

    amazing

  44. kieren | May 14, 2007 | Reply

    No, Shawn, it’s Flash.

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

  45. Cutie | May 23, 2007 | Reply

    nice…:P

  46. Cayson H | Jun 11, 2007 | Reply

    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 ☺♀☻♀☺

  47. Cutie | Jun 13, 2007 | Reply

    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

  48. chris | Jun 22, 2007 | Reply

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

  49. Miguel | Aug 27, 2007 | Reply

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

  50. chazzer | Sep 1, 2007 | Reply

    To complicated

  51. That one guy | Sep 5, 2007 | Reply

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

  52. That one guy | Sep 5, 2007 | Reply

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

  53. Hugh Rection | Sep 9, 2007 | Reply

    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?

  54. alasdair | Sep 11, 2007 | Reply

    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

  55. Darrell | Sep 29, 2007 | Reply

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

  56. David | Oct 4, 2007 | Reply

    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?

  57. randomator | Oct 17, 2007 | Reply

    by changing the depth

  58. richter | Nov 27, 2007 | Reply

    AWSOME ^-^

  59. izzy032294 | Dec 3, 2007 | Reply

    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

  60. suhwa Lee | Dec 6, 2007 | Reply

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

  61. jagga | Dec 18, 2007 | Reply

    its a good game

  62. Custard | Dec 27, 2007 | Reply

    Nice one!