Tutorials »Aufbau» Internet »Graphic Design» Flash CS3 »Actionscript 3,0

Erstellen Sie eine Farbe in Flash CS3

Sonntag, 10. Februar 2008

Wie in Flash Actionscript Contest erklärte: Löschen-Werkzeug können Sie nicht "löschen" einem bestimmten Bereich ein Sprite, MovieClip, und Form, auf denen verfolgt wurden Linien oder Rechtecke mit dem Zeiger Grafiken. Es gibt in der Tat die einzige Methode clear() die jedoch keine Auswirkungen auf den gesamten Bereich unseres Objektes. Die Lösung des Problems liegt in der Möglichkeit der Verwendung der Bitmap-und BitmapData-Objekte. Wie wir sehen werden, können wir den Zugang und Bitmap-Daten direkt zu manipulieren, um "Löschen" die Züge mit einem echten Instrument "Radiergummi."

Ich werde zwei verschiedene Methoden für die Erreichung der "Tor" präsentieren. Der erste "ziehen" (delete)-Daten direkt in BitmapData, mit der Methode fillRect() - Sie können auch setPixel() zum Beispiel. Die zweite Methode, die bevorzugte Lösung nutzt die Methoden der Fusionen (blendMode).

Zunächst einmal wollen wir mal sehen, welche Art von Organisation ist nötig, um eine minimale einfache Painter in Flash zu erreichen. Die Übersicht unten vorgestellten gilt sowohl für die Vorschläge des "Tor"

Schema-Bitmap

Ich habe drei Schichten: die erste, MovieClip oder Sprite, arbeitet als Manager und Background-Events (MouseDown, MouseMove und MouseUp). Die zweite ist die Bitmap unserer wichtigsten Schicht, die ein, dass die Grafiken enthalten tatsächlich entwickelt wird und die Regelung für die "löscht". Die dritte und letzte Schicht, die Form, befasst sich mit zwei Themen: die erste ist, dass man direkt auf die Funktionen, die der Zeiger vorgesehen Grafiken verwenden (wie lineStyle drawRect() etc. ...). Es erhöht auch die Leistung während der Verfolgung Tabelle, wie im Folgenden beschrieben.

Methode 1 - Direkter Zugriff auf Bitmap-Daten

Diese "Stichprobe" verwendet die Methode fillRect() direkt auf BitmapData (Layer 2) nach dem Design kopiert worden sind (unter Verwendung der Methode draw() aus der Form (Layer 3) bis (Layer 2) Bitmap.

Loading Flash Player ...

Um zu verstehen, wie es funktioniert ist hier der gleiche Film mit Ebenen und in Pseudo-3D-Unordnung - im farbigen Feld gezogen - Quelle:

Loading Flash Player ...

Wie Sie sehen können Sie auf Layer 3 zu ziehen, die Form. MouseUp Ereignis wird ausgelöst, wenn der Inhalt auf die Form Bitmap kopiert (und somit die Daten in BitmapData vorhanden) und dann die Form ist sauber clear()

Hinweis: Dieser letzte Punkt, der clear() die Form, die nicht unterschätzt werden. Einige Beispiele des Malers in Flash (fast alle ohne ein echtes "Tor"), indem er direkt auf einen MovieClip oder Form, halten die Daten auf, die zu ziehen. Nach ein wenig "ziehen Sie das System verlangsamt, da der Bereich" Vektor "der MovieClip erhöht. In der Methode habe ich dieses Problem gelöst wird dargestellt, da die Daten Vektor der Form, wenn sie an das Bitmap kopiert werden, tasformati sind in Bits und Form wird gestrichen, die Freisetzung Speicher und sendet es an die Design-Flow!

Halten Sie die Strg (Steuerung) ist "gelöscht" direkt über die BitmapData fillRect() Dies ist möglich, weil fillRect() wie auch andere Methoden, die auf ein BitmapData tätig sind, können Sie die "Farbe" gesetzt durch 0xARGB, wobei A die Alpha-Wert, transparent ist.

Der Code lautet wie folgt - Quelle:

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: Anzahl = event_spr. Bühne. stageWidth;
  14. Number = event_spr . stage . stageHeight - 32 ; var area_height: Anzahl = event_spr. Bühne. stageHeight - 32;
  15. / /
  16. String = GradientType . LINEAR ; var fillType: String = GradientType. Linearität;
  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 ) { mit (event_spr. Grafiken) (
  25. fillType , colors , alphas , ratios , matrix , spreadMethod ) ; beginGradientFill (fillType, Farben, Alphas, Finanzkennzahlen, Matrix, spreadMethod);
  26. 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
  27. ; endFill ();
  28. )
  29. / / Paint-Ereignis
  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. Breite, event_spr. Höhe, true, 0);
  36. Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd);
  37. bmp ) ; addChild (bmp);
  38. / / Temporary Form
  39. Shape = new Shape ( ) ; var draw_shape: Shape = new Shape ();
  40. draw_shape ) ; addChild (draw_shape);
  41. / /
  42. e : MouseEvent ) : void { _onMouseDown function (e: MouseEvent): void (
  43. ) ; debug ( "_onMouseDown");
  44. : uint = 0xffffff ; var c: uint = 0xFFFFFF;
  45. . lineStyle ( 10 , c , 1 ) ; draw_shape. Grafiken. lineStyle (10, c, 1);
  46. . moveTo ( e . localX , e . localY ) ; draw_shape. Grafiken. moveTo (and. localX, und. localy);
  47. md = true;
  48. )
  49. / /
  50. e : MouseEvent ) : void { _onMouseUp function (e: MouseEvent): void (
  51. md = false;
  52. . draw ( draw_shape ) ; bmp. bitmapData. draw (draw_shape);
  53. . clear ( ) ; draw_shape. Grafiken. Clear ();
  54. )
  55. / /
  56. e : MouseEvent ) : void { _onMouseMove function (e: MouseEvent): void (
  57. ) ; debug ( "_onMouseMove");
  58. md && ! e . ctrlKey ) { if (md & &! und. ctrlKey) (
  59. . lineTo ( e . localX , e . localY ) ; draw_shape. Grafiken. lineTo (and. localX, und. localy);
  60. ( md && e . ctrlKey ) { ) Else if (md & & und. CtrlKey) (
  61. . fillRect ( new Rectangle ( e . target . mouseX - 10 , e . target . mouseY - 10 , 20 , 20 ) , 0 ) ; bmp. bitmapData. hg.fillRect (new Rectangle (and. Ziel. mouseX - 10, und. target. mouseY - 10, 20, 20), 0);
  62. )
  63. )
  64. / /
  65. v : String ) : void { Debug-Funktion (v: String): void (
  66. : Date = new Date ( ) ; var d: Date = new Date ();
  67. d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + ":" + d. getSeconds () + ":" + d. getMilliseconds () + ":" + v);
  68. )

Linie 61, wie in dem obigen Code angezeigt, es läuft so lange, wenn die Strg-Taste gedrückt wird. Wie Sie diesen Abschnitt des Codes sehen zieht direkt in die BitmapData mit Farbe 0, die 0x0000 ist!

Methode 2 - Verwenden Mischmodi

Dies ist wahrscheinlich die beste Methode zu Zeit können Sie jede Art von "Tor". Im Gegensatz zu den früheren Verfahren nicht direkt auf die Bitmap-Daten, die in BitmapData, sondern nutzen die Mischung (blendMode) und die Kopie von Bitmaps mit der Methode draw().

Loading Flash Player ...

3D-Version - Quelle:

Loading Flash Player ...

Genau die gleiche Weise, dass wir die Daten aus dem Bitmap-Form, das "Tor" Kopie "gleichzeitig" durch das Kopieren der Daten aus der Shape Bitmap aber diesmal Einstellung der blendMode Methode draw() erase

Der Code lautet wie folgt - Quelle:

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: Anzahl = event_spr. Bühne. stageWidth;
  14. Number = event_spr . stage . stageHeight - 32 ; var area_height: Anzahl = event_spr. Bühne. stageHeight - 32;
  15. / /
  16. String = GradientType . LINEAR ; var fillType: String = GradientType. Linearität;
  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 ) { mit (event_spr. Grafiken) (
  25. fillType , colors , alphas , ratios , matrix , spreadMethod ) ; beginGradientFill (fillType, Farben, Alphas, Finanzkennzahlen, Matrix, spreadMethod);
  26. 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
  27. ; endFill ();
  28. )
  29. / / Paint-Ereignis
  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. Breite, event_spr. Höhe, true, 0);
  36. Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd);
  37. bmp ) ; addChild (bmp);
  38. / / Temporary Form
  39. Shape = new Shape ( ) ; var draw_shape: Shape = new Shape ();
  40. draw_shape ) ; addChild (draw_shape);
  41. / /
  42. e : MouseEvent ) : void { _onMouseDown function (e: MouseEvent): void (
  43. ) ; debug ( "_onMouseDown");
  44. : uint = ( ! e . ctrlKey ? 0xffffff : 0x000000 ) ; var c: uint = (! und. ctrlKey? 0xffffff: 0x000000);
  45. . lineStyle ( 10 , c , 1 ) ; draw_shape. Grafiken. lineStyle (10, c, 1);
  46. . moveTo ( e . localX , e . localY ) ; draw_shape. Grafiken. moveTo (and. localX, und. localy);
  47. md = true;
  48. )
  49. / /
  50. e : MouseEvent ) : void { _onMouseUp function (e: MouseEvent): void (
  51. md = false;
  52. . draw ( draw_shape , null , null , ( e . ctrlKey ? "erase" : "normal" ) ) ; bmp. bitmapData. draw (draw_shape, null, null, (and. ctrlKey? "löschen": "normal"));
  53. . clear ( ) ; draw_shape. Grafiken. Clear ();
  54. )
  55. / /
  56. e : MouseEvent ) : void { _onMouseMove function (e: MouseEvent): void (
  57. ) ; debug ( "_onMouseMove");
  58. md ) { if (md) (
  59. . lineTo ( e . localX , e . localY ) ; draw_shape. Grafiken. lineTo (and. localX, und. localy);
  60. )
  61. )
  62. / /
  63. v : String ) : void { Debug-Funktion (v: String): void (
  64. : Date = new Date ( ) ; var d: Date = new Date ();
  65. d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + ":" + d. getSeconds () + ":" + d. getMilliseconds () + ":" + v);
  66. )

Dieser Code ist nicht sehr verschieden von dem Vorjahr. Der eigentliche Unterschied ist in Zeile 52! Dieser bestimmt die "Füllmethode" beim Kopieren von der Form Bitmap, und wenn die Strg-Taste gedrückt wird, wird verwendet, erase die Methode der erase
That's all! Wir reden mehr über das Bitmap so bald wie möglich und die Unterschiede zwischen MovieClip, Sprite, Shape-und Bitmap-... Alle visuellen Objekten!

Verwandte Post

War dieser Artikel hilfreich?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags:

4 Kommentare zu "Erstellen Sie eine Farbe in Flash CS3"

  1. getAvatar 1,0
    31. März 2008 Undolog.com »Blog Archiv» So speichern Sie Bilder in Flash CS3:

    [...] Wie man Bilder in Flash CS3 Tags speichern: ActionScript 3.0, Bitmap, BitmapData, Flash CS3, GD, GD-Bibliothek, Internet, PHP, Flash Bild speichern, Entwicklung, TutorialsCon Flash CS3 mit der Bitmap wird verbessert, so dass sofort wollte eine kleine Paint erstellt haben. Wir haben bereits gesehen, wie man eine kleine Paint machen (siehe Erstellen eines € ™ Paint Anwendung in Flash CS3 und Maler: einfache Anwendung für die Erstellung von Flash CS3 Pro) eine echte "Tor unterstützen kann" - löschen Funktion, durch die Nutzung bestimmte Schicht Form und Bitmap. Nehmen wir an, dass Flash (als Gegensatz zu Flex) werden nicht zulassen, Codierung (JPG oder PNG) wird das automatische Speichern von Bitmap-Bildern. Sie können jedoch dieses Hindernis zu überwinden, indem Sie einen Server-Side-Scripting und die Fähigkeit, Daten in Flash POST senden. [...]

  2. getAvatar 1,0
    08 ott, 2008 Guide ActionScript 3 in Flash CS3: die Fälle der Maus | Marcello Surdi:

    [...] Erstellen Sie eine Farbe in Flash CS3 [...]

  3. getAvatar 1,0
    30. Oktober 2008 Gianni:

    Optimale Lösung, geeignet für noch innnumerevoli Lösungen in Bezug auf Web-Applikation Grafiken.

    Antwort: Stellen
  4. getAvatar 1,0
    30. Oktober 2008 Giovambattista Fazioli:

    @ Jim: Danke! Siehe auch Maler: einfache Anwendung für die Erstellung von Flash CS3 Pro

    Antwort: Stellen

Leave a comment

TAG XHTML Berechtigungen: <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