Painting Flash CS3: real time erase tool

Starting from the codes provided in Paint Create an application in Flash CS3 , and performing minor adjustments, you can dramatically improve the instrument of "erase". Adding a Shape not visible, you can use it as a "plan" to run the draw() in the blending mode "erase". As shown in the example below, after drawing something, hold down the Ctrl key and the effect of "cancellation" now appears in real time.

Loading ... Flash Player

The code is as follows - source :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
. MouseEvent ; import flash.events. MouseEvent ;
. BitmapData ; import flash.display. BitmapData ;
. Bitmap ; import flash.display. Bitmap ;
. GradientType ; import flash.display. GradientType ;
/ /
. Matrix ; import flash.geom. Matrix ;
/ /
Boolean = false ; var md: Boolean = false;
/ /
Sprite = new Sprite ( ) ; var event_spr: Sprite = new Sprite ();
event_spr ) ; addChild (event_spr);
/ /
Number = event_spr . stage . stageWidth ; var area_width: Number = event_spr. internship. stageWidth;
Number = event_spr . stage . stageHeight - 32 ; var area_height: Number = event_spr. internship. stageHeight - 32;
/ /
String = GradientType . LINEAR ; fillType var: String = GradientType . LINEAR;
: Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; var colors: Array = [0xFF0000, 0x00FF00, 0x0000FF];
: Array = [ 1 , 1 , 1 ] ; var alphas: Array = [1, 1, 1];
: Array = [ 0 , 128 , 255 ] ; var ratios: Array = [0, 128, 255];
String = SpreadMethod . PAD ; spreadMethod var: String = SpreadMethod . PAD;
: Matrix = new Matrix ( ) ; var matrix: Matrix = new Matrix ();
createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; matrix. createGradientBox (area_width, area_height, 1, 0, 0);
/ /
event_spr . graphics ) { with (event_spr. graphics) {
fillType , colors , alphas , ratios , matrix , spreadMethod ) ; beginGradientFill (fillType, colors, alphas, ratios, matrix, spreadMethod);
0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
; endFill ();
}
/ / Paint event
( MouseEvent . MOUSE_DOWN , _onMouseDown ) ; event_spr. addEventListener ( MouseEvent . MOUSE_DOWN, _onMouseDown);
( MouseEvent . MOUSE_MOVE , _onMouseMove ) ; event_spr. addEventListener ( MouseEvent . MOUSE_MOVE, _onMouseMove);
( MouseEvent . MOUSE_UP , _onMouseUp ) ; event_spr. addEventListener ( MouseEvent . MOUSE_UP, _onMouseUp);
( MouseEvent . MOUSE_OUT , _onMouseUp ) ; event_spr. addEventListener ( MouseEvent . MOUSE_OUT, _onMouseUp);
/ /
BitmapData = new BitmapData ( event_spr . width , event_spr . height , true , 0 ) ; var bmpd: BitmapData = new BitmapData (event_spr. width, event_spr. height, true, 0);
Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd);
bmp ) ; addChild (bmp);
/ /
/ / Temporary shape
Shape = new Shape ( ) ; var draw_shape: Shape = new Shape ();
draw_shape ) ; addChild (draw_shape);
/ /
/ / Shape, not visible, used for the "cancellation"
Shape = new Shape ( ) ; var erase_shape: Shape = new Shape ();

/ /
e : MouseEvent ) : void { _onMouseDown function (e: MouseEvent ): void {
) ; debug ("_onMouseDown");
. lineStyle ( 10 , 0xffffff , 1 ) ; draw_shape. graphics. lineStyle (10, 0xffffff, 1);
. lineStyle ( 20 , 0xffffff , 1 ) ; erase_shape. graphics. lineStyle (20, 0xffffff, 1);
. moveTo ( e . localX , e . localY ) ; draw_shape. graphics. moveTo (e. localX, and. localY);
. moveTo ( e . localX , e . localY ) ; erase_shape. graphics. moveTo (e. localX, and. localY);
md = true;
}
/ /
e : MouseEvent ) : void { _onMouseUp function (e: MouseEvent ): void {
md = false;
. draw ( draw_shape ) ; bmp. bitmapData. draw (draw_shape);
. clear ( ) ; draw_shape. graphics. clear ();
. clear ( ) ; erase_shape. graphics. clear ();
}
/ /
e : MouseEvent ) : void { _onMouseMove function (e: MouseEvent ): void {
) ; debug ("_onMouseMove");
md && ! e . ctrlKey ) { if (md &&! e. ctrlKey) {
. lineTo ( e . localX , e . localY ) ; draw_shape. graphics. lineTo (e. localX, and. localY);
( md && e . ctrlKey ) { } Else if (md && e. CtrlKey) {
. lineTo ( e . localX , e . localY ) ; erase_shape. graphics. lineTo (e. localX, and. localY);
. draw ( erase_shape , null , null , "erase" ) ; bmp. bitmapData. draw (erase_shape, null, null, "erase");
}
}
/ /
v : String ) : void { function debug (v: String ): void {
: Date = new Date ( ) ; var d: Date = new Date ();
d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + ":" + d. getSeconds () + ":" + d. getMilliseconds () + ":" + v);
}

): We have added a new Shape, erase_shape , not visible (has not been made ​​any addChild() ):

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

In the code that takes care of drawing has been introduced to control the Ctrl key, when pressed, is concerned precisely the Shape erase_shape and copied to the bitmap:

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

3 comments to: " "

  1. November 20, 2009 Greg:

    A mejora the levers en mí y función of the drenaje Hizo a clase.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    package {

    . Sprite ; import flash.display. Sprite ;
    . MouseEvent ; import flash.events. MouseEvent ;
    . BitmapData ; import flash.display. BitmapData ;
    . Bitmap ; import flash.display. Bitmap ;
    . GradientType ; import flash.display. GradientType ;
    . SpreadMethod ; import flash.display. SpreadMethod ;
    . Shape ; import flash.display. Shape ;
    . Matrix ; import flash.geom. Matrix ;
    . setInterval ; import flash.utils. setInterval;
    . clearInterval ; import flash.utils. clearInterval;

    BitmapErase extends Sprite { BitmapErase public class extends Sprite {

    md : Boolean = false ; private var md: Boolean = false;
    event_spr : Sprite ; private var event_spr: Sprite ;
    area_width : Number ; private var area_width: Number ;
    area_height : Number ; private var area_height: Number ;
    fillType : String = GradientType . LINEAR ; private var fillType: String = GradientType . LINEAR;
    colors : Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; private var colors: Array = [0xFF0000, 0x00FF00, 0x0000FF];
    alphas : Array = [ 1 , 1 , 1 ] ; private var alphas: Array = [1, 1, 1];
    ratios : Array = [ 0 , 128 , 255 ] ; private var ratios: Array = [0, 128, 255];
    spreadMethod : String = SpreadMethod . PAD ; private var spreadMethod: String = SpreadMethod . PAD;
    matrix : Matrix = new Matrix ( ) ; private var matrix: Matrix = new Matrix ();
    erase_shape : Shape ; private var erase_shape: Shape ;
    draw_shape : Shape ; private var draw_shape: Shape ;
    bmpd : BitmapData ; private var bmpd: BitmapData ;
    bmp : Bitmap ; private var bmp: Bitmap ;
    interval : uint ; private var interval: uint ;

    BitmapErase ( ) { BitmapErase public function () {
    ( ) ; draw_shape = new Shape ();
    draw_shape ) ; addChild (draw_shape);
    ( ) ; erase_shape = new Shape ();
    ( ) ; event_spr = new Sprite ();
    event_spr ) ; addChild (event_spr);
    . stageWidth ; area_width = event_spr. internship. stageWidth;
    . stageHeight - 32 ; area_height = event_spr. internship. stageHeight - 32;
    createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; matrix. createGradientBox (area_width, area_height, 1, 0, 0);

    . beginGradientFill ( fillType , colors , alphas , ratios , matrix , spreadMethod ) ; event_spr. graphics. beginGradientFill (fillType, colors, alphas, ratios, matrix, spreadMethod);
    . drawRect ( 0 , 0 , area_width , area_height ) ; event_spr. graphics. drawRect (0, 0, area_width, area_height);
    . endFill ( ) ; event_spr. graphics. endFill ();

    ( MouseEvent . MOUSE_DOWN , _onMouseDown ) ; event_spr. addEventListener ( MouseEvent . MOUSE_DOWN, _onMouseDown);
    ( MouseEvent . MOUSE_MOVE , _onMouseMove ) ; event_spr. addEventListener ( MouseEvent . MOUSE_MOVE, _onMouseMove);
    ( MouseEvent . MOUSE_UP , _onMouseUp ) ; event_spr. addEventListener ( MouseEvent . MOUSE_UP, _onMouseUp);
    ( MouseEvent . MOUSE_OUT , _onMouseUp ) ; event_spr. addEventListener ( MouseEvent . MOUSE_OUT, _onMouseUp);

    ( event_spr . width , event_spr . height , true , 0 ) ; bmpd = new BitmapData (event_spr. width, event_spr. height, true, 0);
    ( bmpd ) ; bmp = new Bitmap (bmpd);
    bmp ) ; addChild (bmp);
    }

    _onMouseDown ( e : MouseEvent ) : void { private function _onMouseDown (e: MouseEvent ): void {
    / / Debug ("_onMouseDown");
    . lineStyle ( 10 , 0xffffff , 1 ) ; draw_shape. graphics. lineStyle (10, 0xffffff, 1);
    . lineStyle ( 20 , 0xffffff , 1 ) ; erase_shape. graphics. lineStyle (20, 0xffffff, 1);
    . moveTo ( e . localX , e . localY ) ; draw_shape. graphics. moveTo (e. localX, and. localY);
    . moveTo ( e . localX , e . localY ) ; erase_shape. graphics. moveTo (e. localX, and. localY);
    md = true;
    }
    _onMouseUp ( e : MouseEvent ) : void { private function _onMouseUp (e: MouseEvent ): void {
    md = false;
    . clear ( ) ; draw_shape. graphics. clear ();
    . clear ( ) ; erase_shape. graphics. clear ();
    interval ) ; clearInterval (interval);
    }
    _onMouseMove ( e : MouseEvent ) : void { private function _onMouseMove (e: MouseEvent ): void {
    / / Debug ("_onMouseMove");
    md && ! e . ctrlKey ) { if (md &&! e. ctrlKey) {
    . lineTo ( e . localX , e . localY ) ; draw_shape. graphics. lineTo (e. localX, and. localY);
    drawNow , 1 ) ; interval = setInterval (drawNow, 1);
    ( md && e . ctrlKey ) { } Else if (md && e. CtrlKey) {
    . lineTo ( e . localX , e . localY ) ; erase_shape. graphics. lineTo (e. localX, and. localY);
    . draw ( erase_shape , null , null , "erase" ) ; bmp. bitmapData. draw (erase_shape, null, null, "erase");
    }
    }
    debug ( v : String ) : void { private function debug (v: String ): void {
    : Date = new Date ( ) ; var d: Date = new Date ();
    d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + ":" + d. getSeconds () + ":" + d. getMilliseconds () + ":" + v);
    }
    drawNow ( ) : void { drawNow private function (): void {
    . draw ( draw_shape ) ; bmp. bitmapData. draw (draw_shape);
    }
    }
    }
  2. January 27, 2011 Sarah-Jane:

    This is totally awesome! Great job. Is it possible to have the same thing here except That it is erasing a movieclip exposing the background image underneath it?

    This is totally awesome! Great job. You can have the same thing here except that is deleting a clip of the film that exposes the background image?

Leave a comment

TAG XHTML PERMITS: CODE ENTRY:
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL