Créer une peinture dans Flash CS3

Dimanche, Février 10, 2008

Comme indiqué dans Flash Actionscript Concours: effacer outil vous ne pouvez pas "effacer" une zone particulière d'une des lignes Sprite, MovieClip et forme sur laquelle ont été tracés ou des rectangles en utilisant le pointeur de graphiques. Il ya, en fait, la seule méthode clear() qui, toutefois, n'a aucun effet sur toute la surface de notre objet. La solution au problème réside dans la possibilité d'utiliser le bitmap et des objets BitmapData. Comme nous allons le voir, nous pouvons accéder et manipuler des données bitmap directement dans le but «d'effacer» les traits d'un instrument réel "à la gomme."

Je vais présenter deux méthodes différentes pour atteindre la "porte". Le premier "dessiner" (supprimer) des données directement dans BitmapData, en utilisant le fillRect() méthode fillRect() - Vous pouvez également utiliser setPixel() par exemple. La seconde méthode, que nous préconisons, utilise les méthodes de fusions (blendMode).

Tout d'abord nous allons voir ce genre d'organisation est nécessaire pour atteindre un minimum simple peintre en Flash. Les grandes lignes présentées ci-dessous s'applique aux deux propositions de la porte ""

schema-bitmap

J'ai créé trois couches: la première, MovieClip ou Sprite, travaille comme gestionnaire et des événements de fond (MouseDown, MouseMove et MouseUp). Le second, le bitmap est notre couche principale, celle qui contient les graphiques effectivement conçus et qui appliquera les "supprimer". La troisième et dernière couche, la forme, traite de deux questions: la première est d'être capable d'utiliser directement les fonctions prévues par pointeur graphique (comme lineStyle drawRect() etc ...). Il augmente également les performances lors de tableau de suivi, comme détaillé ci-dessous.

Méthode 1 - L'accès direct aux données bitmap

Cet échantillon "" utilise le fillRect() méthode fillRect() directement sur BitmapData (couche 2) après le dessin ou modèle a été copié (en utilisant le draw() méthode draw() de la forme (couche 3) en Bitmap (couche 2).

Chargement Flash Player ...

Pour comprendre comment cela fonctionne ici est le même film avec des couches et de troubles en pseudo 3D - établi dans la case de couleur - source:

Chargement Flash Player ...

Comme vous pouvez le voir vous tirez sur la couche 3, le Shape. MouseUp événement se déclenche lorsque le contenu est copié sur le bitmap forme (et donc les données sont présentes dans BitmapData) et puis la forme est propre clear()

Note: ce dernier point, le clear() de la forme, ne pas être sous-estimée. Quelques exemples du peintre en Flash (presque tous dépourvus d'une véritable "porte") en dessinant directement sur un MovieClip ou une forme, en conservant les données sur ce tirage. Après un peu de "vous dessinez le système ralentit, car la zone" vecteur "de la hausse des MovieClip. Dans la méthode que j'ai présenté ce problème est résolu parce que le vecteur de données de forme, quand ils sont copiés sur le bitmap, tasformati sont en bits et la forme est supprimé, libérant ainsi la mémoire et le retourner à l'écoulement de design!

Maintenant enfoncée la touche Ctrl (contrôle) est «supprimé» directement via le fillRect() BitmapData fillRect() Cela est possible parce fillRect() comme les autres méthodes qui fonctionnent sur un BitmapData, vous permettent de définir la «couleur» à travers 0xARGB, où A est la valeur alpha, transparent.

Le code est le suivant - source:

ActionScript
  1. . MouseEvent ; flash.events importation. MouseEvent;
  2. . BitmapData ; l'importation flash.display. BitmapData;
  3. . Bitmap ; l'importation flash.display. Bitmap;
  4. . GradientType ; l'importation 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: Number = event_spr. scène. stageWidth;
  14. Number = event_spr . stage . stageHeight - 32 ; var area_height: Number = event_spr. scène. stageHeight - 32;
  15. / /
  16. String = GradientType . LINEAR ; var fillType: String = GradientType. Linéarité;
  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 matrice: Matrix = new Matrix ();
  22. createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; matrice. createGradientBox (area_width, area_height, 1, 0, 0);
  23. / /
  24. event_spr . graphics ) { avec (event_spr. graphiques) (
  25. fillType , colors , alphas , ratios , matrix , spreadMethod ) ; (beginGradientFill fillType, couleurs, alphas, ratios, matrix, spreadMethod);
  26. 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
  27. ; endFill ();
  28. )
  29. / / Événement Paint
  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 = BitmapData nouvelles (event_spr. largeur, event_spr. hauteur, true, 0);
  36. Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = Bitmap nouvelles (bmpd);
  37. bmp ) ; addChild (bmp);
  38. / / Temporary forme
  39. Shape = new Shape ( ) ; var draw_shape: Shape = Shape nouveau ();
  40. draw_shape ) ; addChild (draw_shape);
  41. / /
  42. e : MouseEvent ) : void { fonction _onMouseDown (e: MouseEvent): void (
  43. ) ; debug ( "_onMouseDown");
  44. : uint = 0xffffff ; var c: uint = 0xFFFFFF;
  45. . lineStyle ( 10 , c , 1 ) ; draw_shape. graphiques. lineStyle (10, c, 1);
  46. . moveTo ( e . localX , e . localY ) ; draw_shape. graphiques. moveTo (and. localX, et. localement);
  47. md = true;
  48. )
  49. / /
  50. e : MouseEvent ) : void { fonction _onMouseUp (e: MouseEvent): void (
  51. md = false;
  52. . draw ( draw_shape ) ; bmp. BitmapData. draw (draw_shape);
  53. . clear ( ) ; draw_shape. graphiques. Clear ();
  54. )
  55. / /
  56. e : MouseEvent ) : void { fonction _onMouseMove (e: MouseEvent): void (
  57. ) ; debug ( "_onMouseMove");
  58. md && ! e . ctrlKey ) { if (MD & &! et. ctrlKey) (
  59. . lineTo ( e . localX , e . localY ) ; draw_shape. graphiques. lineTo (and. localX, et. localement);
  60. ( md && e . ctrlKey ) { ) Else if (MD & & ET. CtrlKey) (
  61. . fillRect ( new Rectangle ( e . target . mouseX - 10 , e . target . mouseY - 10 , 20 , 20 ) , 0 ) ; bmp. BitmapData. hg.fillRect (new Rectangle (and. cible. mouseX - 10, et. cible. mouseY - 10, 20, 20), 0);
  62. )
  63. )
  64. / /
  65. v : String ) : void { debug function (v: String): void (
  66. : Date = new Date ( ) ; var d: Date = Date de nouvelles ();
  67. d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (D. getMinutes () + ":" + d. getSeconds () + ":" + d. getMilliseconds () + ":" + v);
  68. )

Ligne 61, comme indiqué dans le code ci-dessus, elle est si long quand la touche Contrôle est enfoncée. Comme vous pouvez le voir cette partie de code dessine directement dans le BitmapData avec 0 couleur, ce qui est 0x0000!

MÉTHODE 2 - Utilisation des modes de mélange

C'est probablement la meilleure méthode à autre vous permet d'utiliser n'importe quel type de "gate". Contrairement à la méthode précédente ne pas accéder directement aux données bitmap présents dans BitmapData, mais ils exploitent le mélange (blendMode) et la copie de bitmaps en utilisant le draw(). méthode draw().

Chargement Flash Player ...

Version 3D - source:

Chargement Flash Player ...

Exactement de la même manière que nous copier les données de la forme Bitmap, la "porte" est "simultanément" en copiant les données du Bitmap forme, mais cette fois, la fixation du draw() méthode blendMode draw() pour erase

Le code est le suivant - source:

ActionScript
  1. . MouseEvent ; flash.events importation. MouseEvent;
  2. . BitmapData ; l'importation flash.display. BitmapData;
  3. . Bitmap ; l'importation flash.display. Bitmap;
  4. . GradientType ; l'importation 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: Number = event_spr. scène. stageWidth;
  14. Number = event_spr . stage . stageHeight - 32 ; var area_height: Number = event_spr. scène. stageHeight - 32;
  15. / /
  16. String = GradientType . LINEAR ; var fillType: String = GradientType. Linéarité;
  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 matrice: Matrix = new Matrix ();
  22. createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; matrice. createGradientBox (area_width, area_height, 1, 0, 0);
  23. / /
  24. event_spr . graphics ) { avec (event_spr. graphiques) (
  25. fillType , colors , alphas , ratios , matrix , spreadMethod ) ; (beginGradientFill fillType, couleurs, alphas, ratios, matrix, spreadMethod);
  26. 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
  27. ; endFill ();
  28. )
  29. / / Événement Paint
  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 = BitmapData nouvelles (event_spr. largeur, event_spr. hauteur, true, 0);
  36. Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = Bitmap nouvelles (bmpd);
  37. bmp ) ; addChild (bmp);
  38. / / Temporary forme
  39. Shape = new Shape ( ) ; var draw_shape: Shape = Shape nouveau ();
  40. draw_shape ) ; addChild (draw_shape);
  41. / /
  42. e : MouseEvent ) : void { fonction _onMouseDown (e: MouseEvent): void (
  43. ) ; debug ( "_onMouseDown");
  44. : uint = ( ! e . ctrlKey ? 0xffffff : 0x000000 ) ; var c: uint = (! et. ctrlKey? 0xffffff: 0x000000);
  45. . lineStyle ( 10 , c , 1 ) ; draw_shape. graphiques. lineStyle (10, c, 1);
  46. . moveTo ( e . localX , e . localY ) ; draw_shape. graphiques. moveTo (and. localX, et. localement);
  47. md = true;
  48. )
  49. / /
  50. e : MouseEvent ) : void { fonction _onMouseUp (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? "effacer": "normal"));
  53. . clear ( ) ; draw_shape. graphiques. Clear ();
  54. )
  55. / /
  56. e : MouseEvent ) : void { fonction _onMouseMove (e: MouseEvent): void (
  57. ) ; debug ( "_onMouseMove");
  58. md ) { if (md) (
  59. . lineTo ( e . localX , e . localY ) ; draw_shape. graphiques. lineTo (and. localX, et. localement);
  60. )
  61. )
  62. / /
  63. v : String ) : void { debug function (v: String): void (
  64. : Date = new Date ( ) ; var d: Date = Date de nouvelles ();
  65. d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (D. getMinutes () + ":" + d. getSeconds () + ":" + d. getMilliseconds () + ":" + v);
  66. )

Ce code n'est pas très dissemblable de l'année précédente. La vraie différence se trouve dans la ligne 52! Ceci détermine le mode "mélange" lorsque vous copiez du Bitmap Forme, et quand la touche Contrôle est enfoncée est utilisée la méthode de la fusion erase
That's all! Nous parlons plus de la bitmap dès que possible et les différences entre les MovieClip, Sprite, Forme et Bitmap ... Tous les objets visuels!

Related Post

Cet article était utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Chargement ...

4 commentaires pour "Créer une peinture dans Flash CS3»

  1. getAvatar 1.0
    31 mars 2008 Undolog.com »Blog Archive» Comment faire pour enregistrer des images dans Flash CS3:

    [...] Comment faire pour enregistrer des images dans Flash CS3 Tags: ActionScript 3.0, Bitmap, BitmapData, Flash CS3, GD, GD Bibliothèques, Internet, PHP, Flash Save Image, développement, TutorialsCon Flash CS3 en utilisant le Bitmap est tellement améliorée que est immédiatement voulu créer un petit Paint. Nous avons déjà vu comment faire une peinture de petite taille (voir Création d'un € ™ application de peinture dans Flash CS3 et peintre: application simple pour le dessin en Flash CS3 Pro), peut soutenir une porte "true" - fonction d'effacement, par l'usage couche particulière Forme et Bitmap. Disons que Flash (par opposition à "Flex") ne permettra pas à l'encodage (format JPG ou PNG) sera l'enregistrement automatique des images bitmap. Toutefois, vous pouvez surmonter cet obstacle en utilisant un script côté serveur et la capacité d'envoyer des données en POST Flash. [...]

  2. getAvatar 1.0
  3. getAvatar 1.0
    30 octobre 2008 Gianni:

    Solution optimale, adaptée pour des solutions encore innnumerevoli relatives à l'application graphique web.

  4. getAvatar 1.0

Laissez un commentaire

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