Tutorials »Development» Internet »Graphic Design» Flash CS3 »Actionscript 3.0

Painting Flash CS3: real time erase tool

Monday, February 11, 2008

Starting from the codes provided in Create a Paint in Flash CS3, and performing small modifications, it can greatly improve the tool to "erase". Adding a Shape is not visible, you can use it as a "plan" to run the draw() in blend mode "erase". As shown in the example below, after you draw something, hold down the Ctrl key and the effect of "erasing" now appears in real time.

Loading Flash Player ...

The code is as follows - source:

PLAIN TEXT
ActionScript
  1. . MouseEvent ; import flash.events. MouseEvent;
  2. . BitmapData ; import flash.display. BitmapData;
  3. . Bitmap ; import flash.display. Bitmap;
  4. . GradientType ; import flash.display. GradientType;
  5. / /
  6. . Matrix ; import flash.geom. Matrix;
  7. / /
  8. Boolean = false ; var md: Boolean = false;
  9. / /
  10. Sprite = new Sprite ( ) ; var event_spr: Sprite = new Sprite ();
  11. event_spr ) ; addChild (event_spr);
  12. / /
  13. Number = event_spr . stage . stageWidth ; var area_width: Number = event_spr. stage. stageWidth;
  14. Number = event_spr . stage . stageHeight - 32 ; var area_height: Number = event_spr. stage. stageHeight - 32;
  15. / /
  16. String = GradientType . LINEAR ; var fillType: String = GradientType. Linearity;
  17. : Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; var colors: Array = [0xFF0000, 0x00FF00, 0x0000ff];
  18. : Array = [ 1 , 1 , 1 ] ; var alphas: Array = [1, 1, 1];
  19. : Array = [ 0 , 128 , 255 ] ; var ratios: Array = [0, 128, 255];
  20. String = SpreadMethod . PAD ; var spreadMethod: String = SpreadMethod. PAD;
  21. : Matrix = new Matrix ( ) ; var matrix: Matrix = new Matrix ();
  22. createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; matrix. createGradientBox (area_width, area_height, 1, 0, 0);
  23. / /
  24. event_spr . graphics ) { with (event_spr. graphics) (
  25. fillType , colors , alphas , ratios , matrix , spreadMethod ) ; beginGradientFill (fillType, colors, alphas, ratios, matrix, spreadMethod);
  26. 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
  27. ; endFill ();
  28. )
  29. / / Paint event
  30. ( MouseEvent . MOUSE_DOWN , _onMouseDown ) ; event_spr. addEventListener (MouseEvent. MOUSE_DOWN, _onMouseDown);
  31. ( MouseEvent . MOUSE_MOVE , _onMouseMove ) ; event_spr. addEventListener (MouseEvent. MOUSE_MOVE, _onMouseMove);
  32. ( MouseEvent . MOUSE_UP , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_UP, _onMouseUp);
  33. ( MouseEvent . MOUSE_OUT , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_OUT, _onMouseUp);
  34. / /
  35. BitmapData = new BitmapData ( event_spr . width , event_spr . height , true , 0 ) ; var bmpd: BitmapData = new BitmapData (event_spr. width, event_spr. height, true, 0);
  36. Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd);
  37. bmp ) ; addChild (bmp);
  38. / /
  39. / / Temporary shape
  40. Shape = new Shape ( ) ; var draw_shape: Shape = new Shape ();
  41. draw_shape ) ; addChild (draw_shape);
  42. / /
  43. / / Shape, not visible, used for the "cancellation"
  44. Shape = new Shape ( ) ; var erase_shape: Shape = new Shape ();
  46. / /
  47. e : MouseEvent ) : void { _onMouseDown function (e: MouseEvent): void (
  48. ) ; debug ( "_onMouseDown");
  49. . lineStyle ( 10 , 0xffffff , 1 ) ; draw_shape. graphics. lineStyle (10, 0xffffff, 1);
  50. . lineStyle ( 20 , 0xffffff , 1 ) ; erase_shape. graphics. lineStyle (20, 0xffffff, 1);
  51. . moveTo ( e . localX , e . localY ) ; draw_shape. graphics. moveTo (and. localX, and. localy);
  52. . moveTo ( e . localX , e . localY ) ; erase_shape. graphics. moveTo (and. localX, and. localy);
  53. md = true;
  54. )
  55. / /
  56. e : MouseEvent ) : void { _onMouseUp function (e: MouseEvent): void (
  57. md = false;
  58. . draw ( draw_shape ) ; bmp. bitmapData. draw (draw_shape);
  59. . clear ( ) ; draw_shape. graphics. Clear ();
  60. . clear ( ) ; erase_shape. graphics. Clear ();
  61. )
  62. / /
  63. e : MouseEvent ) : void { _onMouseMove function (e: MouseEvent): void (
  64. ) ; debug ( "_onMouseMove");
  65. md && ! e . ctrlKey ) { if (md & &! and. ctrlKey) (
  66. . lineTo ( e . localX , e . localY ) ; draw_shape. graphics. lineTo (and. localX, and. localy);
  67. ( md && e . ctrlKey ) { ) Else if (md & & and. CtrlKey) (
  68. . lineTo ( e . localX , e . localY ) ; erase_shape. graphics. lineTo (and. localX, and. localy);
  69. . draw ( erase_shape , null , null , "erase" ) ; bmp. bitmapData. draw (erase_shape, null, null, "erase");
  70. )
  71. )
  72. / /
  73. v : String ) : void { function debug (v: String): void (
  74. : Date = new Date ( ) ; var d: Date = new Date ();
  75. d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + ":" + d. getSeconds () + ":" + d. GetMilliseconds () + ":" + v);
  76. )

You have added a new shape, erase_shape not visible (has not been made any addChild()

PLAIN TEXT
ActionScript
  1. ...
  2. / / Shape, not visible, used for the "cancellation"
  3. Shape = new Shape ( ) ; var erase_shape: Shape = new Shape ();

In the part of code that takes care of design has been introduced to control the Ctrl key and if pressed, is concerned precisely the Shape erase_shape and copied to the Bitmap:

PLAIN TEXT
ActionScript
  1. ....
  2. . lineTo ( e . localX , e . localY ) ; erase_shape. graphics. lineTo (and. localX, and. localy);
  3. . draw ( erase_shape , null , null , "erase" ) ; bmp. bitmapData. draw (erase_shape, null, null, "erase");

Related Post

Was this article helpful?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags:

2 comments to "Painting Flash CS3: real time erase tool"

  1. getAvatar 1.0
    November 20, 2009 Greg

    A lever mejora en la función y drenaje of the hizo a mí clase.

    PLAIN TEXT
    ActionScript
    1. package (
    3. . Sprite ; import flash.display. Sprite;
    4. . MouseEvent ; import flash.events. MouseEvent;
    5. . BitmapData ; import flash.display. BitmapData;
    6. . Bitmap ; import flash.display. Bitmap;
    7. . GradientType ; import flash.display. GradientType;
    8. . SpreadMethod ; import flash.display. SpreadMethod;
    9. . Shape ; import flash.display. Shape;
    10. . Matrix ; import flash.geom. Matrix;
    11. . setInterval ; import flash.utils. setInterval;
    12. . clearInterval ; import flash.utils. clearInterval;
    14. BitmapErase extends Sprite { public class BitmapErase extends Sprite (
    16. md : Boolean = false ; private var md: Boolean = false;
    17. event_spr : Sprite ; private var event_spr: Sprite;
    18. area_width : Number ; private var area_width: Number;
    19. area_height : Number ; private var area_height: Number;
    20. fillType : String = GradientType . LINEAR ; private var fillType: String = GradientType. Linearity;
    21. colors : Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; private var colors: Array = [0xFF0000, 0x00FF00, 0x0000ff];
    22. alphas : Array = [ 1 , 1 , 1 ] ; private var alphas: Array = [1, 1, 1];
    23. ratios : Array = [ 0 , 128 , 255 ] ; private var ratios: Array = [0, 128, 255];
    24. spreadMethod : String = SpreadMethod . PAD ; private var spreadMethod: String = SpreadMethod. PAD;
    25. matrix : Matrix = new Matrix ( ) ; private var matrix: Matrix = new Matrix ();
    26. erase_shape : Shape ; private var erase_shape: Shape;
    27. draw_shape : Shape ; private var draw_shape: Shape;
    28. bmpd : BitmapData ; private var bmpd: BitmapData;
    29. bmp : Bitmap ; private var bmp: Bitmap;
    30. interval : uint ; private var interval: uint;
    32. BitmapErase ( ) { BitmapErase public function () (
    33. ( ) ; draw_shape = new Shape ();
    34. draw_shape ) ; addChild (draw_shape);
    35. ( ) ; erase_shape = new Shape ();
    36. ( ) ; event_spr = new Sprite ();
    37. event_spr ) ; addChild (event_spr);
    38. . stageWidth ; area_width = event_spr. stage. stageWidth;
    39. . stageHeight - 32 ; area_height = event_spr. stage. stageHeight - 32;
    40. createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; matrix. createGradientBox (area_width, area_height, 1, 0, 0);
    42. . beginGradientFill ( fillType , colors , alphas , ratios , matrix , spreadMethod ) ; event_spr. graphics. beginGradientFill (fillType, colors, alphas, ratios, matrix, spreadMethod);
    43. . drawRect ( 0 , 0 , area_width , area_height ) ; event_spr. graphics. drawRect (0, 0, area_width, area_height);
    44. . endFill ( ) ; event_spr. graphics. endFill ();
    46. ( MouseEvent . MOUSE_DOWN , _onMouseDown ) ; event_spr. addEventListener (MouseEvent. MOUSE_DOWN, _onMouseDown);
    47. ( MouseEvent . MOUSE_MOVE , _onMouseMove ) ; event_spr. addEventListener (MouseEvent. MOUSE_MOVE, _onMouseMove);
    48. ( MouseEvent . MOUSE_UP , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_UP, _onMouseUp);
    49. ( MouseEvent . MOUSE_OUT , _onMouseUp ) ; event_spr. addEventListener (MouseEvent. MOUSE_OUT, _onMouseUp);
    51. ( event_spr . width , event_spr . height , true , 0 ) ; bmpd = new BitmapData (event_spr. width, event_spr. height, true, 0);
    52. ( bmpd ) ; bmp = new Bitmap (bmpd);
    53. bmp ) ; addChild (bmp);
    54. )
    56. _onMouseDown ( e : MouseEvent ) : void { private function _onMouseDown (e: MouseEvent): void (
    57. / / debug ( "_onMouseDown");
    58. . lineStyle ( 10 , 0xffffff , 1 ) ; draw_shape. graphics. lineStyle (10, 0xffffff, 1);
    59. . lineStyle ( 20 , 0xffffff , 1 ) ; erase_shape. graphics. lineStyle (20, 0xffffff, 1);
    60. . moveTo ( e . localX , e . localY ) ; draw_shape. graphics. moveTo (and. localX, and. localy);
    61. . moveTo ( e . localX , e . localY ) ; erase_shape. graphics. moveTo (and. localX, and. localy);
    62. md = true;
    63. )
    64. _onMouseUp ( e : MouseEvent ) : void { private function _onMouseUp (e: MouseEvent): void (
    65. md = false;
    66. . clear ( ) ; draw_shape. graphics. Clear ();
    67. . clear ( ) ; erase_shape. graphics. Clear ();
    68. interval ) ; clearInterval (interval);
    69. )
    70. _onMouseMove ( e : MouseEvent ) : void { private function _onMouseMove (e: MouseEvent): void (
    71. / / debug ( "_onMouseMove");
    72. md && ! e . ctrlKey ) { if (md & &! and. ctrlKey) (
    73. . lineTo ( e . localX , e . localY ) ; draw_shape. graphics. lineTo (and. localX, and. localy);
    74. drawNow , 1 ) ; interval = setInterval (drawNow, 1);
    75. ( md && e . ctrlKey ) { ) Else if (md & & and. CtrlKey) (
    76. . lineTo ( e . localX , e . localY ) ; erase_shape. graphics. lineTo (and. localX, and. localy);
    77. . draw ( erase_shape , null , null , "erase" ) ; bmp. bitmapData. draw (erase_shape, null, null, "erase");
    78. )
    79. )
    80. debug ( v : String ) : void { private function debug (v: String): void (
    81. : Date = new Date ( ) ; var d: Date = new Date ();
    82. d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + ":" + d. getSeconds () + ":" + d. GetMilliseconds () + ":" + v);
    83. )
    84. drawNow ( ) : void { private function drawNow (): void (
    85. . draw ( draw_shape ) ; bmp. bitmapData. draw (draw_shape);
    86. )
    87. )
    88. )

    Reply Share
  2. getAvatar 1.0
    November 20, 2009 Giovambattista Fazioli:

    @ Greg: good! : D

    Reply Share

Leave a comment

TAG XHTML PERMISSIONS: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL