Erstellen Sie eine Anwendung in Flash CS3 Farbe - Undolog.com

Wie in angegeben Flash Actionscript Contest: Lösch-Funktion kann man nicht "löschen" ein bestimmtes Gebiet in einem Sprite, MovieClip oder Form der Linien oder Rechtecke wurden mit Hilfe der Zeiger Grafiken verfolgt haben. Es ist in der Tat, die einzige Methode clear() , die jedoch keinen Einfluss auf die gesamte Fläche der unser Objekt. Die Lösung des Problems liegt in der Fähigkeit, die Bitmap und BitmapData-Objekt verwenden. Wie wir sehen werden wir direkt zugreifen und diese manipulieren die Bitmap-Daten, um "Löschen" die Züge mit einem echten Instrument "Radiergummi".

Werden zwei unterschiedliche Methoden präsentieren, die "Radiergummi" zu realisieren. per esempio. Die erste "zieht" (delete) Daten direkt in das BitmapData, mit der Methode fillRect() - Sie können auch setPixel() zum Beispiel. Die zweite Methode, die ich bevorzuge, verwendet die Methoden von Fusionen (blendMode).

Zunächst einmal wollen wir sehen, was für eine Organisation erforderlich ist, um eine minimale einfache Painter in Flash zu erreichen. Das Schema unten dargestellten gilt sowohl für die Vorschläge der "Radiergummi"

Ich habe drei Schichten: die erste, MovieClip oder Sprite, Hintergrund und fungiert als Event-Handler (MouseDown, MouseMove und MouseUp). Die zweite ist die Bitmap unsere oberste Schicht, die eine, die tatsächlich Grafik gezogen und welche wird in den "Radiergummi" angewendet werden. , ecc…). Die dritte und letzte Schicht, die Form, befasst sich mit zwei Fragen: Die erste ist, dass es direkt die Funktionen, die durch den Zeiger Grafiken (wie vorgesehen erlaubt lineStyle , drawRect() , etc ...). Es erhöht auch die Performance bei der Spurhaltung Graph, wie unten im Detail erläutert.

METHODE 1 - Direkter Zugriff auf Bitmap-Daten

) dalla Shape (layer 3) alla Bitmap (layer 2). Diese "Probe" verwendet die Methode fillRect() direkt auf BitmapData (Schicht 2), nachdem das Design kopiert wurde (mit der Methode draw() ) von der Form (Layer 3) Bitmap (Schicht 2).

Wird geladen ... Flash Player

Um zu verstehen, wie es hier funktioniert, ist der gleiche Film mit den Schichten auseinander und in Pseudo-3D - gezeichnet in farbigen Box - Quelle :

Wird geladen ... Flash Player

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

Hinweis: dieser letzte Punkt, der clear() auf der Form ist es nicht zu unterschätzen. Einige Beispiele des Malers in Flash (fast alle fehlenden a true "Radiergummi") zeichnen direkt auf einen MovieClip oder Form, halten die letzteren auf Daten gezogen. Nach einer Weile "Sie zeichnen das System verlangsamt, weil das Gebiet" vector "der MovieClip zunimmt. In dem Verfahren stellte ich dieses Problem dadurch gelöst, dass die Daten-Vektor der Form, wie die Bitmap kopiert, tasformati sind in Bits und die Form ist gelöscht, die Freisetzung Speicher und restituiendo Fließfähigkeit der design!

Halten Sie die Strg-Taste (Steuerung), wird "gelöscht" direkt durch die BitmapData fillRect() . Dies ist möglich, weil fillRect() , wie die anderen Methoden, die wirken auf BitmapData, erlauben, die "Farbe" über 0xARGB, wobei A die Alpha-Wert, Transparenz gesetzt.

Der Code ist 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 ; importieren 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: Anzahl .. = event_spr Praktikum stageWidth;
Number = event_spr . stage . stageHeight - 32 ; var area_height: Anzahl .. = event_spr Praktikum 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 Verhältnisse: 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, wahr, 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 (z. 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 &&! e. ctrlKey) {
. lineTo ( e . localX , e . localY ) ; .. draw_shape Grafiken lineTo (z. localX und localY.);
( md && e . ctrlKey ) { } Else if (md && e. CtrlKey) {
. fillRect ( new Rectangle ( e . target . mouseX - 10 , e . target . mouseY - 10 , 20 , 20 ) , 0 ) ; .. bmp bitmapData fillRect (new Rectangle (z. Ziele mouseX - 10 und Ziele mouseY - 10, 20, 20), 0...);
}
}
/ /
v : String ) : void { Funktion debug (v: String ): void {
: Date = new Date ( ) ; var d: Datum = new Datum ();
d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (gest. getMinutes () + ":" + d getSeconds () + ":" + d getMilliseconds () + ":".. + v);
}

Die Linie 61, wie in der oben angezeigten Code ist esguita wenn die Strg-Taste gedrückt wird. Wie Sie sehen können diese Code-Abschnitt zieht direkt in ein BitmapData mit Farbe 0 oder 0 × 0000!

METHODE 2 - Mit Füllmethoden

Dies ist wahrscheinlich die beste Methode, wenn Sie jede Art von "Radiergummi" verwenden können. Im Gegensatz zu dem bisherigen Verfahren hat keinen direkten Zugriff auf die Bitmap-Daten in BitmapData, aber Sie nutzen Füllmethoden (blendMode) und der Kopie des Bitmap mit der Methode draw().

Wird geladen ... Flash Player

3D-Version - Quelle :

Wird geladen ... Flash Player

. In genau der gleichen Weise, dass wir die Daten aus der Form zu Bitmap zu kopieren, ist das "Radiergummi" "simultato" Kopieren der Daten von der Form zu Bitmap, aber dieses Mal, die Einstellung der blendMode der Methode draw() zu erase .

Der Code ist 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 ; importieren 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: Anzahl .. = event_spr Praktikum stageWidth;
Number = event_spr . stage . stageHeight - 32 ; var area_height: Anzahl .. = event_spr Praktikum 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 Verhältnisse: 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, wahr, 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 = (!.? e ctrlKey 0xffffff: 0x000000);
. lineStyle ( 10 , c , 1 ) ; .. draw_shape Grafiken lineStyle (10, c, 1);
. moveTo ( e . localX , e . localY ) ; .. draw_shape Grafiken moveTo (z. 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, (e. ctrlKey "Löschen": "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 (z. localX und localY.);
}
}
/ /
v : String ) : void { Funktion debug (v: String ): void {
: Date = new Date ( ) ; var d: Datum = new Datum ();
d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (gest. getMinutes () + ":" + d getSeconds () + ":" + d getMilliseconds () + ":".. + v);
}

Dieser Code ist nicht sehr verschieden von der vorherigen. Der wirkliche Unterschied ist in Zeile 52! Dies bestimmt die "Füllmethode" beim Kopieren von Shape zu Bitmap, und wenn die Strg-Taste gedrückt wird, die Füllmethode verwendet werden, um erase .
Das ist alles! Wir werden auf die Bitmap so bald wie möglich und die Unterschiede zwischen MovieClip, Sprite, Form und Bitmap zurück ... alle visuellen Objekte!