Utwórz Paint in Flash CS3

Niedziela, 10 lutego, 2008

Jak wyjaśniono w konkursie Flash ActionScript: wykasować narzędzie nie jest możliwe, aby "wymazać" Sprite danym obszarze, lub Kształt MovieClip, które zostały wyciągnięte linie lub prostokąty za pomocą wskaźnika grafiki. Istnieje w rzeczywistości, tylko metody clear() które jednak zaczęły obowiązywać na terenie naszego tematu. Do rozwiązania problemu leży w możliwości korzystania z obiektów i BitmapData Bitmap. Zobaczymy, jak możemy bezpośrednio dostęp i manipulowanie danymi w celu Bitmap "wymazać" z cech z prawdziwym instrumentem "anuluj".

Przedstawi dwie różne metody osiągnięcia "usuń". Pierwszy "malowanie" (jasne) dane bezpośrednio do BitmapData, stosując metodę fillRect() mogą być także wykorzystywane setPixel() Druga metoda, z jednej Wolę, korzysta z metod łączenia (blendMode).

Przede wszystkim widzimy, jakiego rodzaju organizacją jest minimalnie niezbędne do osiągnięcia w prosty malarz Flash. Zarys przedstawiony poniżej stosuje się do obydwu wniosków z "delete":

schemat-bitmapy

I stworzył trzy warstwy: pierwsza, MovieClip lub Sprite, a pracuje jako tło obsługi zdarzenia (mousedown, mousemove i mouseup). Drugi, Bitmap, jest naszym głównym warstwę, która faktycznie zawiera zaprojektowane i grafiki, który będzie również funkcję "anuluj". Trzecią, i ostatnią warstwę, kształt, rozwiązuje dwie kwestie: po pierwsze, który pozwala bezpośrednio korzystać z funkcji dostępnych z graficznego wskaźnika (jak lineStyle drawRect() ...). Również zwiększa wydajność podczas śledzenia wykresu, jak to opisano szczegółowo poniżej.

METODA 1 - Bezpośredni dostęp do danych Bitmap

Ten "próbki" wykorzystuje metodę fillRect() bezpośrednio na BitmapData (warstwa 2) po hotelu został skopiowany (przy zastosowaniu metody draw() przez Kształt (Layer 3) do Bitmap (warstwa 2).

Loading Flash Player ...

Aby zrozumieć, jak jest to ten sam film z warstw i pseudo łamane w 3D - wyciągnięte w kolorowej ramce - źródło:

Loading Flash Player ...

Jak widać go wywodzi się z warstwy 3, kształt. Gdy zdarzenie mouseup Kształt zawartość jest kopiowana na Bitmap (a następnie dane te są w BitmapData) i kształt jest czysty clear()

Uwaga: ten ostatni punkt, clear() Kształt nie wolno lekceważyć. Niektóre przykłady malarza we Flashu (prawie wszystkie z nich są prawdziwe "anuluj") czerpać bezpośrednio na MovieClip lub kształtu, przechowując je na dane. Po pewnym czasie ", aby wyciągnąć system spowalnia, ponieważ obszar" wektor "z MovieClip podwyżek. Metoda I przedstawiła ten problem jest rozwiązany, ponieważ wektor danych kształtu, kiedy skopiowany do Bitmap są tasformati bitowych i kształt jest usuwane, uwalniając pamięć i restituiendo płynność pracy!

Ctrl (kontroli) jest "wyczyszczona" bezpośrednio poprzez BitmapData fillRect() Jest to możliwe, ponieważ fillRect() podobnie jak inne metody, które działają na BitmapData, umożliwiają ustawienie "kolor" poprzez 0xARGB, gdzie A jest wartość alfa, przejrzystości.

Kod wygląda następująco - źródło:

Plain Text
ActionScript:
  1. . MouseEvent ; przywozu flash. wydarzeń. MouseEvent;
  2. . BitmapData ; przywozu flash. wyświetlacza. BitmapData;
  3. . Bitmap ; przywozu flash. wyświetlacza. Bitmap;
  4. . GradientType ; przywozu flash. wyświetlacza. GradientType;
  5. / /
  6. . Matrix ; przywozu flash. Geom. Matrix;
  7. / /
  8. = false ; var MD: Boolean = false;
  9. / /
  10. Sprite ( ) ; var event_spr: Sprite = new Sprite ();
  11. ; addChild (event_spr);
  12. / /
  13. = event_spr. stage . stageWidth ; var area_width: Number = event_spr. etapie. stageWidth;
  14. = event_spr. stage . stageHeight - 32 ; var area_height: Number = event_spr. etapie. stageHeight - 32;
  15. / /
  16. = GradientType. LINEAR ; var fillType: String = GradientType. liniowe;
  17. = [ 0xFF0000, 0x00FF00, 0x0000ff ] ; var kolory: Array = [0xFF0000, 0x00FF00, 0x0000ff];
  18. = [ 1 , 1 , 1 ] ; var Alpha: Array = [1, 1, 1];
  19. = [ 0 , 128 , 255 ] ; var wskaźniki: Array = [0, 128, 255];
  20. = SpreadMethod. PAD ; var spreadMethod: String = SpreadMethod. PAD;
  21. Matrix ( ) ; var matrycy: Matrix = new Matrix ();
  22. area_width, area_height, 1 , 0 , 0 ) ; matrycy. createGradientBox (area_width, area_height, 1, 0, 0);
  23. / /
  24. event_spr. graphics ) { z (event_spr. grafika) (
  25. fillType,colors,alphas,ratios,matrix,spreadMethod ) ; beginGradientFill (fillType, kolory, Alpha, wskaźniki, matryca, spreadMethod);
  26. , 0 ,area_width, area_height ) ; drawRect (0, 0, area_width, area_height);
  27. ; endFill ();
  28. )
  29. / / Paint wydarzenia
  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 ( event_spr. width ,event_spr. height , true , 0 ) ; var bmpd: BitmapData = new BitmapData (event_spr. szerokość, event_spr. wysokości, true, 0);
  36. Bitmap ( bmpd ) ; var bmp: = new Bitmap Bitmap (bmpd);
  37. ; addChild (bmp);
  38. / / Tymczasowa kształt
  39. Shape ( ) ; var draw_shape: Shape = new Shape ();
  40. ; addChild (draw_shape);
  41. / /
  42. e :MouseEvent ) : void { _onMouseDown function (e: MouseEvent): void (
  43. ) ; debug ( "_onMouseDown");
  44. var c: UINT = 0xffffff;
  45. ( 10 ,c, 1 ) ; draw_shape. grafiki. LineStyle (10, c, 1);
  46. ( e . localX , e . localY ) ; draw_shape. grafiki. moveTo (E. localX, i. localY);
  47. md = true;
  48. )
  49. / /
  50. e :MouseEvent ) : void { _onMouseUp function (e: MouseEvent): void (
  51. md = false;
  52. ( draw_shape ) ; bmp. BitmapData. remis (draw_shape);
  53. ( ) ; draw_shape. grafiki. clear ();
  54. )
  55. / /
  56. e :MouseEvent ) : void { _onMouseMove function (e: MouseEvent): void (
  57. ) ; debug ( "_onMouseMove");
  58. md && ! e . ctrlKey ) { if (MD & &! i. ctrlKey) (
  59. ( e . localX , e . localY ) ; draw_shape. grafiki. lineTo (E. localX, i. localY);
  60. ( md && e . ctrlKey ) { ) Else if (e & & md. CtrlKey) (
  61. ( new Rectangle ( e . target . mouseX - 10 , e . target . mouseY - 10 , 20 , 20 ) , 0 ) ; bmp. BitmapData. fillRect (nowy prostokąt (E. docelowych. mouseX - 10, oraz. docelowych. nieśmiały - 10, 20, 20), 0);
  62. )
  63. )
  64. / /
  65. v: String ) : void { Funkcja debug (v: String): void (
  66. = new Date ( ) ; var id: date = new Date ();
  67. d. getMinutes ( ) + ":" +d. getSeconds ( ) + ":" +d. getMilliseconds ( ) + ": " +v ) ; trace (zm. getMinutes () + ":" + d. getSeconds () + ":" + d. getMilliseconds () + ":" + v);
  68. )

Linii 61, jak pokazano w kodzie powyżej, jest uruchamiany, gdy klawisz jest wciśnięty. Jak widać tej sekcji kodu zwraca się bezpośrednio do BitmapData z kolor 0, lub 0x0000!

METODA 2 - Korzystanie z metod łączenia

To prawdopodobnie jest najlepiej, gdy pozwala na użycie dowolnego typu "anuluj". W odróżnieniu od poprzedniej metody nie mają bezpośredniego dostępu do danych w BitmapData bitmapy, ale korzystanie z metody połączenia (blendMode) oraz kopię Bitmap w sposób ci draw().

Loading Flash Player ...

Wydanie 3D - Źródło:

Loading Flash Player ...

Dokładnie ten sam sposób można skopiować dane z Bitmap Kształt, "Usuń" to "jednocześnie" przez skopiowanie danych z Shape Bitmap, ale tym razem ustawienie blendMode metody draw() aby erase

Kod wygląda następująco - źródło:

Plain Text
ActionScript:
  1. . MouseEvent ; przywozu flash. wydarzeń. MouseEvent;
  2. . BitmapData ; przywozu flash. wyświetlacza. BitmapData;
  3. . Bitmap ; przywozu flash. wyświetlacza. Bitmap;
  4. . GradientType ; przywozu flash. wyświetlacza. GradientType;
  5. / /
  6. . Matrix ; przywozu flash. Geom. Matrix;
  7. / /
  8. = false ; var MD: Boolean = false;
  9. / /
  10. Sprite ( ) ; var event_spr: Sprite = new Sprite ();
  11. ; addChild (event_spr);
  12. / /
  13. = event_spr. stage . stageWidth ; var area_width: Number = event_spr. etapie. stageWidth;
  14. = event_spr. stage . stageHeight - 32 ; var area_height: Number = event_spr. etapie. stageHeight - 32;
  15. / /
  16. = GradientType. LINEAR ; var fillType: String = GradientType. liniowe;
  17. = [ 0xFF0000, 0x00FF00, 0x0000ff ] ; var kolory: Array = [0xFF0000, 0x00FF00, 0x0000ff];
  18. = [ 1 , 1 , 1 ] ; var Alpha: Array = [1, 1, 1];
  19. = [ 0 , 128 , 255 ] ; var wskaźniki: Array = [0, 128, 255];
  20. = SpreadMethod. PAD ; var spreadMethod: String = SpreadMethod. PAD;
  21. Matrix ( ) ; var matrycy: Matrix = new Matrix ();
  22. area_width, area_height, 1 , 0 , 0 ) ; matrycy. createGradientBox (area_width, area_height, 1, 0, 0);
  23. / /
  24. event_spr. graphics ) { z (event_spr. grafika) (
  25. fillType,colors,alphas,ratios,matrix,spreadMethod ) ; beginGradientFill (fillType, kolory, Alpha, wskaźniki, matryca, spreadMethod);
  26. , 0 ,area_width, area_height ) ; drawRect (0, 0, area_width, area_height);
  27. ; endFill ();
  28. )
  29. / / Paint wydarzenia
  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 ( event_spr. width ,event_spr. height , true , 0 ) ; var bmpd: BitmapData = new BitmapData (event_spr. szerokość, event_spr. wysokości, true, 0);
  36. Bitmap ( bmpd ) ; var bmp: = new Bitmap Bitmap (bmpd);
  37. ; addChild (bmp);
  38. / / Tymczasowa kształt
  39. Shape ( ) ; var draw_shape: Shape = new Shape ();
  40. ; addChild (draw_shape);
  41. / /
  42. e :MouseEvent ) : void { _onMouseDown function (e: MouseEvent): void (
  43. ) ; debug ( "_onMouseDown");
  44. ! e . ctrlKey ?0xffffff:0x000000 ) ; var c: UINT = (! i. ctrlKey? 0xffffff: 0x000000);
  45. ( 10 , c, 1 ) ; draw_shape. grafiki. LineStyle (10, c, 1);
  46. ( e . localX , e . localY ) ; draw_shape. grafiki. moveTo (E. localX, i. localY);
  47. md = true;
  48. )
  49. / /
  50. e :MouseEvent ) : void { _onMouseUp function (e: MouseEvent): void (
  51. md = false;
  52. ( draw_shape, null , null , ( e . ctrlKey ? "erase" : "normal" ) ) ; bmp. BitmapData. remis (draw_shape, null, null, (E. ctrlKey? "wymazać", "normalne"));
  53. ( ) ; draw_shape. grafiki. clear ();
  54. )
  55. / /
  56. e :MouseEvent ) : void { _onMouseMove function (e: MouseEvent): void (
  57. ) ; debug ( "_onMouseMove");
  58. md ) { if (md) (
  59. ( e . localX , e . localY ) ; draw_shape. grafiki. lineTo (E. localX, i. localY);
  60. )
  61. )
  62. / /
  63. v: String ) : void { Funkcja debug (v: String): void (
  64. = new Date ( ) ; var id: date = new Date ();
  65. d. getMinutes ( ) + ":" +d. getSeconds ( ) + ":" +d. getMilliseconds ( ) + ": " +v ) ; trace (zm. getMinutes () + ":" + d. getSeconds () + ":" + d. getMilliseconds () + ":" + v);
  66. )

Kod ten nie jest bardzo odmienna w porównaniu z rokiem poprzednim. Prawdziwa różnica jest rzędu 52! Ten określa tryb syntezy jądrowej "podczas kopiowania z Shape Bitmap, gdy klawisz jest wciśnięty jest używany mieszankę erase
Z tym jest to! Wrócić do rozmowy o Bitmap jak najszybciej i różnice między MovieClip, Sprite, kształt i Bitmap ... Wszystkie elementy wizualne!

Powiązane Post

Tagi: remis usun ± ć Flash Graphics Internet, Samouczki

4 komentarze do: "Tworzenie Paint in Flash CS3"

  1. getAvatar 1.0 Poniedziałek, 31 marca 2008 r. 23:38
    Undolog.com »Blog Archive» Jak zapisać obrazy w Flash CS3 powiedział:

    [...] Zapisywanie obrazów w Flash CS3 Tagi: ActionScript 3.0, Bitmap, BitmapData, Flash CS3, GD, GD Library, Internet, PHP, Flash Zapisz obraz, Rozwoju, TutorialsCon Flash CS3 używając Bitmap jest tak, że poprawa chcesz po prostu stworzyć małe Paint. Mamy już mały jak Paint (patrz Tworzenie € ™ Paint stosowania w Flash CS3 i malarz: prosta aplikacja do rysowania w Flash Pro CS3) zdolnej do wspierania "anuluj" - skasować poprzez wykorzystanie funkcji konkretnej warstwy kształtu i Bitmap. Mówimy, że teraz Flash (w odróżnieniu od "Flex") nie pozwalają na ich kodowania (typu JPG lub PNG) będzie automatycznie zapisywać obrazy Bitmap. Ale można obejść przeszkodę przy użyciu skryptów po stronie serwera i możliwość wysyłania danych do Flash w POST. [...]

  2. getAvatar 1.0 Środa, 08 października 2008 r. 02:38
    Przewodnik ActionScript 3 w Flash CS3: wydarzenia myszy | Marcello Surdo powiedział:

    [...] Utwórz Paint in Flash CS3 [...]

  3. getAvatar 1.0 Czwartek, 30 października 2008 r. 20:08
    Gianni powiedział:

    Doskonałe rozwiązanie, nadaje się do innnumerevoli rozwiązań odnoszących się do internetowych aplikacji graficznych.

    Odpowiedź Cytat
  4. getAvatar 1.0 Czwartek, 30 października 2008 r. 21:24
    Giovambattista Fazioli powiedział:

    @ Gianni: thanks! Patrz także: Malarz: prosta aplikacja do rysowania w Flash CS3 Pro

    Odpowiedź Cytat

Zostaw komentarz

TAG XHTML <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> href="" <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Użyj <pre> umieszczenie kodu