Malen Sie auf eine Anwendung in Flash CS3 erstellen

Wie in erläutert Flash Actionscript Contest: Lösch-Funktion kann man nicht "löschen" einen bestimmten Bereich eines Sprite, MovieClip oder Form, auf denen Linien oder Rechtecke gezeichnet mit den Grafik-Cursor wurden. Es gibt in der Tat, die einzige Methode clear() , hat jedoch keine Auswirkungen auf die gesamte Fläche des Objekts. Die Lösung für dieses Problem liegt in der Möglichkeit der Verwendung der Bitmap-und BitmapData-Objekte. Wie wir sehen werden wir direkt zugreifen und diese manipulieren Bitmap-Daten, um "Löschen" Schläge mit einem echten Instrument "Radiergummi".

Zwei unterschiedliche Methoden, um das "Tor" zu erzielen. per esempio. Die erste "draw" (Löschen) von Daten direkt in das BitmapData, mit der Methode fillRect() - können auch verwendet werden setPixel() zum Beispiel. Die zweite Methode, die ich bevorzuge, verwendet die Methoden von Fusionen (blendMode).

Zunächst einmal wollen wir sehen, welche Art von Organisation minimal ist notwendig, um eine einfache Flash-Painter zu erreichen. Das Schema unten dargestellten gilt sowohl für die Vorschläge der "Tor":

Ich habe drei Schichten: die erste, MovieClip oder Sprite, Hintergrund und die Arbeit der Event-Handler (MouseDown, MouseMove und MouseUp). Die zweite ist die Bitmap unsere Schichten, eine, die tatsächlich gezogen werden Grafiken angewendet werden und auf denen das "Tor". , ecc…). Der dritte und letzte Schicht, die Form, geht es um zwei Fragen: die erste ist, dass er direkt die Funktionen der Grafik-Cursor (wie vorgesehen ermöglicht lineStyle , drawRect() , etc ...). Es steigert auch die Leistung während des Tracking-Chart, wie unten im Detail erläutert.

Methode 1 - Direkter Zugriff auf die Bitmap-Daten

) dalla Shape (layer 3) alla Bitmap (layer 2). Das "Probe" mit der Methode fillRect() direkt auf dem BitmapData (Schicht 2) nach dem Entwurf kopiert wurde (mit der Methode draw() ) von Shape (Layer 3) in Bitmap (Schicht 2).

Loading Flash ...

Um zu verstehen, wie es hier funktioniert, ist der gleiche Film mit dem zerlegt Schicht und Pseudo-3D - in einem farbigen Kästchen gezeichnet - Quelle :

Loading Flash ...

Wie Sie sehen können Sie auf der Schicht 3, die Form zu zeichnen. Bei der Aufnahme das MouseUp-Ereignis der Inhalte ist auf die Bitmap Form kopiert (und damit die Daten in BitmapData) und dann die Form ist sauber ( clear() ).

Hinweis: dieser letzte Punkt, die clear() auf die Form, ist nicht zu unterschätzen. Einige Beispiele für den Maler in Flash (fast alle fehlenden ein echtes "Tor") zu zeichnen direkt auf einem MovieClip oder Shape, Pflege der Daten auf den letzteren gezogen. Nach einer Weile "Sie zeichnen das System verlangsamt, da der Bereich" Vektor "der MovieClip erhöht. In dem von mir vorgestellten dieses Problem dadurch gelöst, dass die Daten Vektor der Form, wenn sie auf die Bitmap kopiert werden tasformati sind in Bits und die Form gelöscht werden, was Speicher spart und senden es an die Design-Flow!

Halten Sie die Strg (Steuerung) ist "gelöscht" direkt durch die BitmapData fillRect() . Dies ist möglich, weil fillRect() , wie auch andere Methoden, die wirken auf BitmapData, ermöglichen es Ihnen, die "Farbe" durch 0xARGB, wobei A die Alpha-Wert, Transparenz gesetzt.

Der Code wird wie folgt - Quelle :

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

. MouseEvent ; Import flash.events. MouseEvent ;
. BitmapData ; Import flash.display. BitmapData ;
. Bitmap ; Import flash.display. Bitmaps ;
. GradientType ; . import flash.display GradientType ;
/ /
. Matrix ; flash.geom Importe. Matrix ;
/ /
Boolean = false ; md var: Boolean = false;
/ /
Sprite = new Sprite ( ) ; var event_spr: Sprite = new Sprite ();
event_spr ) ; addChild (event_spr);
/ /
Number = event_spr . stage . stageWidth ; var area_width: Anzahl = event_spr Praktika stageWidth;..
Number = event_spr . stage . stageHeight - 32 ; var area_height: Anzahl .. = event_spr Praktika stageHeight - 32;
/ /
String = GradientType . LINEAR ; fillType var: String = GradientType . LINEAR;
: Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; var Farben: 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 ) { mit (event_spr. Grafiken) {
fillType , colors , alphas , ratios , matrix , spreadMethod ) ; beginGradientFill (fillType, Farben, Alphas, Verhältnisse, Matrix, spreadMethod);
0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
; endFill ();
}
/ / Paint-Ereignis
( 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. Breite, Höhe event_spr, true, 0.);
Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd);
bmp ) ; addChild (bmp);
/ / Temporäre Form
Shape = new Shape ( ) ; var draw_shape: Form = new Form ();
draw_shape ) ; addChild (draw_shape);
/ /
e : MouseEvent ) : void { _onMouseDown Funktion (e: MouseEvent ): void {
) ; debug ("_onMouseDown");
: uint = 0xffffff ; var c: uint = 0xffffff;
. lineStyle ( 10 , c , 1 ) ; .. draw_shape Grafiken lineStyle (10, c, 1);
. moveTo ( e . localX , e . localY ) ; .. draw_shape Grafiken moveTo (and. localX und localY.);
md = true;
}
/ /
e : MouseEvent ) : void { _onMouseUp Funktion (e: MouseEvent ): void {
md = false;
. draw ( draw_shape ) ; .. bmp bitmapData draw (draw_shape);
. clear ( ) ; . draw_shape Grafiken clear ().;
}
/ /
e : MouseEvent ) : void { _onMouseMove Funktion (e: MouseEvent ): void {
) ; debug ("_onMouseMove");
md && ! e . ctrlKey ) { if (md & &! und. ctrlKey) {
. lineTo ( e . localX , e . localY ) ; .. draw_shape Grafiken lineTo (and. localX und localY.);
( md && e . ctrlKey ) { } Else if (md & & und. CtrlKey) {
. fillRect ( new Rectangle ( e . target . mouseX - 10 , e . target . mouseY - 10 , 20 , 20 ) , 0 ) ; .. bmp bitmapData fillRect (neues Rectangle (and. Ziel mouseX - 10, und Ziel mouseY - 10, 20, 20), 0...);
}
}
/ /
v : String ) : void { Funktion 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 () + "" + st);
}

Linie 61, wie im Code oben gezeigt, läuft so, wenn die Strg-Taste gedrückt wird. Wie Sie sehen können diesen Codeabschnitt zieht direkt in die BitmapData mit einem farbigen 0, 0 × 0000!

Methode 2 - Verwenden des Blends

Dies ist wahrscheinlich die beste Methode zu benutzen, wenn es jede Art von "Tor" ermöglicht. Im Gegensatz zu der bisherigen Methode nicht direkt auf die Bitmap-Daten BitmapData vorhanden, aber die Vorteile der Vermischung (blendMode) und kopieren Sie die Bitmap mit der Methode draw().

Loading Flash ...

3D-Version - Quelle :

Loading Flash ...

. In genau der gleichen Weise, dass wir die Daten aus dem Bitmap Form zu kopieren, ist das "Tor" "gleichzeitig" durch das Kopieren der Daten aus dem Bitmap Shape, aber dieses Mal, Einstellung der blendMode die Methode draw() zu erase .

Der Code wird wie folgt - Quelle :

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

. MouseEvent ; Import flash.events. MouseEvent ;
. BitmapData ; Import flash.display. BitmapData ;
. Bitmap ; Import flash.display. Bitmaps ;
. GradientType ; . import flash.display GradientType ;
/ /
. Matrix ; flash.geom Importe. Matrix ;
/ /
Boolean = false ; md var: Boolean = false;
/ /
Sprite = new Sprite ( ) ; var event_spr: Sprite = new Sprite ();
event_spr ) ; addChild (event_spr);
/ /
Number = event_spr . stage . stageWidth ; var area_width: Anzahl = event_spr Praktika stageWidth;..
Number = event_spr . stage . stageHeight - 32 ; var area_height: Anzahl .. = event_spr Praktika stageHeight - 32;
/ /
String = GradientType . LINEAR ; fillType var: String = GradientType . LINEAR;
: Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; var Farben: 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 ) { mit (event_spr. Grafiken) {
fillType , colors , alphas , ratios , matrix , spreadMethod ) ; beginGradientFill (fillType, Farben, Alphas, Verhältnisse, Matrix, spreadMethod);
0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
; endFill ();
}
/ / Paint-Ereignis
( 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. Breite, Höhe event_spr, true, 0.);
Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd);
bmp ) ; addChild (bmp);
/ / Temporäre Form
Shape = new Shape ( ) ; var draw_shape: Form = new Form ();
draw_shape ) ; addChild (draw_shape);
/ /
e : MouseEvent ) : void { _onMouseDown Funktion (e: MouseEvent ): void {
) ; debug ("_onMouseDown");
: uint = ( ! e . ctrlKey ? 0xffffff : 0x000000 ) ; var c: uint = (und ctrlKey 0xffffff: 0x000000!.?);
. lineStyle ( 10 , c , 1 ) ; .. draw_shape Grafiken lineStyle (10, c, 1);
. moveTo ( e . localX , e . localY ) ; .. draw_shape Grafiken moveTo (and. localX und localY.);
md = true;
}
/ /
e : MouseEvent ) : void { _onMouseUp Funktion (e: MouseEvent ): void {
md = false;
. draw ( draw_shape , null , null , ( e . ctrlKey ? "erase" : "normal" ) ) ; .. bmp bitmapData draw (draw_shape, null, null, (and. ctrlKey "löschen" oder "normal")?);
. clear ( ) ; . draw_shape Grafiken clear ().;
}
/ /
e : MouseEvent ) : void { _onMouseMove Funktion (e: MouseEvent ): void {
) ; debug ("_onMouseMove");
md ) { if (md) {
. lineTo ( e . localX , e . localY ) ; .. draw_shape Grafiken lineTo (and. localX und localY.);
}
}
/ /
v : String ) : void { Funktion 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 () + "" + st);
}

Dieser Code ist nicht sehr verschieden von dem Vorjahr. Der wirkliche Unterschied ist in Zeile 52! Dies bestimmt die "Füllmethode" beim Kopieren von der Shape-Bitmap, wenn die Strg-Taste gedrückt wird, verwendet die Beimischung erase .
Das ist alles! Wir kommen wieder, sobald das Bitmap und die Unterschiede zwischen MovieClip, Sprite, Form-und Bitmap-Objekte kommen ... alle visuellen!