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 ""

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).
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:
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:
- . MouseEvent ; flash.events importation. MouseEvent;
- / /
- / /
- / /
- event_spr ) ; addChild (event_spr);
- / /
- / /
- createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; matrice. createGradientBox (area_width, area_height, 1, 0, 0);
- / /
- event_spr . graphics ) { avec (event_spr. graphiques) (
- fillType , colors , alphas , ratios , matrix , spreadMethod ) ; (beginGradientFill fillType, couleurs, alphas, ratios, matrix, spreadMethod);
- 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
- ; endFill ();
- )
- / / Événement Paint
- ( 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 = BitmapData nouvelles (event_spr. largeur, event_spr. hauteur, true, 0);
- bmp ) ; addChild (bmp);
- / / Temporary forme
- draw_shape ) ; addChild (draw_shape);
- / /
- ) ; debug ( "_onMouseDown");
- . lineStyle ( 10 , c , 1 ) ; draw_shape. graphiques. lineStyle (10, c, 1);
- . moveTo ( e . localX , e . localY ) ; draw_shape. graphiques. moveTo (and. localX, et. localement);
- md = true;
- )
- / /
- md = false;
- . draw ( draw_shape ) ; bmp. BitmapData. draw (draw_shape);
- . clear ( ) ; draw_shape. graphiques. Clear ();
- )
- / /
- ) ; debug ( "_onMouseMove");
- md && ! e . ctrlKey ) { if (MD & &! et. ctrlKey) (
- . lineTo ( e . localX , e . localY ) ; draw_shape. graphiques. lineTo (and. localX, et. localement);
- ( md && e . ctrlKey ) { ) Else if (MD & & ET. CtrlKey) (
- )
- )
- / /
- d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (D. getMinutes () + ":" + d. getSeconds () + ":" + d. getMilliseconds () + ":" + v);
- )
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().
Version 3D - source:
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:
- . MouseEvent ; flash.events importation. MouseEvent;
- / /
- / /
- / /
- event_spr ) ; addChild (event_spr);
- / /
- / /
- createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; matrice. createGradientBox (area_width, area_height, 1, 0, 0);
- / /
- event_spr . graphics ) { avec (event_spr. graphiques) (
- fillType , colors , alphas , ratios , matrix , spreadMethod ) ; (beginGradientFill fillType, couleurs, alphas, ratios, matrix, spreadMethod);
- 0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
- ; endFill ();
- )
- / / Événement Paint
- ( 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 = BitmapData nouvelles (event_spr. largeur, event_spr. hauteur, true, 0);
- bmp ) ; addChild (bmp);
- / / Temporary forme
- draw_shape ) ; addChild (draw_shape);
- / /
- ) ; debug ( "_onMouseDown");
- . lineStyle ( 10 , c , 1 ) ; draw_shape. graphiques. lineStyle (10, c, 1);
- . moveTo ( e . localX , e . localY ) ; draw_shape. graphiques. moveTo (and. localX, et. localement);
- md = true;
- )
- / /
- md = false;
- . draw ( draw_shape , null , null , ( e . ctrlKey ? "erase" : "normal" ) ) ; bmp. BitmapData. draw (draw_shape, null, null, (and. ctrlKey? "effacer": "normal"));
- . clear ( ) ; draw_shape. graphiques. Clear ();
- )
- / /
- ) ; debug ( "_onMouseMove");
- md ) { if (md) (
- . lineTo ( e . localX , e . localY ) ; draw_shape. graphiques. lineTo (and. localX, et. localement);
- )
- )
- / /
- d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (D. getMinutes () + ":" + d. getSeconds () + ":" + d. getMilliseconds () + ":" + v);
- )
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!













[...] 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. [...]
[...] Créer une peinture dans Flash CS3 [...]
Solution optimale, adaptée pour des solutions encore innnumerevoli relatives à l'application graphique web.
@ Jim: Merci! Voir aussi peintre: application simple pour le dessin en Flash CS3 Pro