Share
Deux fois par mois, nous revoyons certains des articles préférés de nos lecteurs dans l’histoire d’Activetuts +. Ce tutoriel a été publié pour la première fois en août 2009.
Dans ce didacticiel, nous allons créer une application de dessin avec des fonctions de base et une interface facile à utiliser. Vous vous sentez artistique? Alors allons-y?
Cette application comportera une série d'outils tels qu'un crayon, une gomme, un outil texte et également la possibilité d'enregistrer votre dessin au format png à l'aide de l'encodeur PNG d'Adobe..
Ouvrez Flash et créez un nouveau fichier Flash (ActionScript 3)..
Définissez la taille de la scène sur 600x350px et la cadence sur 25 images par seconde.
Dessinez un rectangle blanc de 600 x 290 pixels et convertissez-le en MovieClip. Définissez son nom d'instance sur "board" et alignez-le en haut à gauche de la scène.
Ce sera le domaine sur lequel nous pourrons dessiner.
Créez un rectangle de 600px de large, 60px de haut gris (#DFDFDF) et alignez-le au bas de la scène. Ce sera notre fond pour le panneau Outils.
Je ne vais pas aborder la création des icônes d'outils car ce n'est pas l'intention du réalisateur, vous pouvez néanmoins voir comment elles sont créées dans le fichier Fla inclus dans la source.
Comme vous pouvez le voir sur l'image, nous allons utiliser deux icônes, l'une en gris et l'autre en couleur.
Convertissez l'icône en crayon gris en bouton (F8) et nommez-la "outil-crayon", double-cliquez dessus pour la modifier et ajoutez un KeyFrame (F6) à l'état "terminé". Voici où nous allons mettre la version couleur de l'icône.
Enfin, ajoutez une autre KeyFrame dans l'état "hit" et dessinez un carré de 30x30px pour qu'il serve de zone touchée du bouton..
Répétez ce processus avec toutes les icônes de vos outils, n'oubliez pas de leur donner les noms d'instance corrects (eraserTool, textTool, saveButton, clearTool).
Pour afficher l'icône de l'outil actif, nous allons utiliser la version couleur de l'icône et la placer à la même position que le bouton créé précédemment. Les noms d'occurrence seront "crayon", "gomme" et "texte".
Nous cacherons ces icônes plus tard en utilisant ActionScript.
Lorsque nous utilisons l'option de sauvegarde, nous allons afficher un message "Enregistrer avec succès".
Créez un rectangle noir de 600 x 350 pixels avec 50% d'alpha à utiliser comme arrière-plan.
Ajoutez un rectangle arrondi noir au centre avec l'icône du bouton Enregistrer et un texte indiquant que la sauvegarde est terminée..
Créez un bouton de fermeture et alignez-le dans le coin supérieur gauche du rectangle arrondi, nommez-le "closeBtn". Comme vous pouvez l’imaginer, ce bouton ferme la boîte de dialogue Enregistrer..
Convertissez tous les éléments en un seul MovieClip et cochez la case "Exporter pour ActionScript". Définissez le champ de texte Classe sur "SaveDialog".
Nous instancierons cette classe lorsque l'utilisateur appuiera sur le bouton de sauvegarde et que la sauvegarde sera terminée..
Le panneau de taille est la zone dans laquelle vous pouvez modifier la taille du crayon, de la gomme et de l'outil Texte. Vous pouvez le faire en cliquant dans la zone du panneau ou dans l’ovale.
Sélectionnez l'outil Rectangle Primitive, définissez le rayon de l'angle sur 4 et créez un rectangle #EFEFEF 80x50px. Convertissez-le en MovieClip et nommez-le "sizePanel".
Ouvrez le panneau Filtres et ajoutez une ombre portée avec les valeurs suivantes:
Utilisez maintenant l'outil Ovale pour créer un cercle noir de 5 x 5 pixels, centrez-le dans le panneau de taille, convertissez-le en MovieClip et définissez son nom d'occurrence sur "shapeSize"..
Nous allons créer une palette de couleurs par défaut au lieu d'utiliser le composant Sélecteur de couleurs.
Créez un cercle 22x22px à l'aide de l'outil Ovale, définissez sa couleur sur #EEEEEE et convertissez-la en MovieClip. Ajouter le même filtre Ombre portée que nous avons utilisé dans le panneau Taille.
Dessinez un second cercle de 16x16px et utilisez le noir pour la couleur cette fois-ci. Centrez les cercles et répétez cette procédure en modifiant la couleur du dernier cercle comme suit:
Alignez-les pour obtenir quelque chose comme ceci:
Convertissez toutes les couleurs en un seul MovieClip, nommez-le "couleurs" et veillez à définir le point d'enregistrement dans le coin supérieur gauche, car nous allons obtenir des données de pixels à l'aide de la classe Bitmap.
Pour utiliser la fonction Enregistrer, nous avons besoin du codeur Adobe PNG, qui fait partie du fichier as3corelib que vous pouvez trouver dans Google Code..
Pour utiliser cette classe en dehors du paquet fourni par défaut, nous devons changer une ligne. Ouvrez le fichier PNGEncoder.as et modifiez la ligne "package com.adobe?" En "package". Cela nous permettra d’appeler la classe dans le répertoire où se trouve le fichier Fla..
Une seule classe gérera cette application. Ouvrez le panneau de propriétés dans le fichier Fla et définissez la classe de document sur "Principal"..
Créez un nouveau document ActionScript et enregistrez-le sous le nom "Main.as" dans le même répertoire que le fichier Fla..
Ce sont les classes dont nous aurons besoin dans cette application. N'oubliez pas de consulter l'aide de Flash (F1) si vous n'êtes pas sûr d'une classe spécifique.
package import PNGEncoder; import flash.display.MovieClip; import flash.display.Shape; import flash.display.DisplayObject; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldType; import flash.text.TextFieldAutoSize; import flash.display.BitmapData; import flash.geom.ColorTransform; import flash.events.MouseEvent; import flash.events.Event; import flash.utils.ByteArray; import flash.net.FileReference;
Nous étendons la classe MovieClip puisque nous utilisons les propriétés et méthodes spécifiques de cette classe.
Classe publique principale étend MovieClip
Ce sont les variables que nous allons utiliser. Ils sont tous expliqués dans les commentaires du code.
/ * Forme de l'outil Pencil, tout ce qui est dessiné avec cet outil et la gomme est stocké dans board.pencilDraw * / var pencilDraw: Shape = new Shape (); / * Format du texte * / var textformat: TextFormat = new TextFormat (); / * Colors * / var colorsBmd: BitmapData; // Nous utiliserons ces données bitmap pour obtenir la valeur RVB en pixels lorsque vous cliquez dessus var pixelValue: uint; var activeColor: uint = 0x000000; // Il s'agit de la couleur actuellement utilisée, affichée par le ShapeSize MC / * Instance de la boîte de dialogue Enregistrer * / var saveDialog: SaveDialog; / * Actif var, pour vérifier quel outil est actif * / var actif: String; / * Couleur de la taille de la forme * / var ct: ColorTransform = new ColorTransform ();
La fonction principale se chargera de définir le format de texte de l'outil de texte, de convertir les couleurs MovieClip en données bitmap afin d'extraire la valeur RVB de pixels, d'ajouter les écouteurs et de masquer les icônes actives..
fonction publique Main (): void textformat.font = "Quicksand Bold Regular"; // Vous pouvez utiliser n'importe quelle police que vous aimez textformat.bold = true; textformat.size = 16; / * Nous créons ces fonctions plus tard * / convertToBMD (); addListeners (); / * Masquer les outils surlignés * / pencil.visible = false; hideTools (gomme, txt);
Les actions des outils sont chacune divisées en quatre fonctions.
Le premier définira l'outil sur son état actif, les deuxième et troisième géreront les événements de souris (comme le dessin ou l'effacement) et le quatrième arrêtera ces événements..
Ces fonctions traitent l’outil Crayon, lisent les commentaires dans le code pour une meilleure compréhension.
La mise en fonction active:
fonction privée PencilTool (e: MouseEvent): void / * Quitter l'outil actif * / quitActiveTool (); // Cette fonction sera créée ultérieurement / * Activer * * / active = "Pencil"; // Définit la variable active sur "Crayon" / * Ajoute les écouteurs au tableau MovieClip, pour dessiner juste dedans * / board.addEventListener (MouseEvent.MOUSE_DOWN, startPencilTool); board.addEventListener (MouseEvent.MOUSE_UP, stopPencilTool); / * Mettez en surbrillance, définit l'icône de l'outil Crayon sur la version couleur et masque tout autre outil * / highlightTool (crayon); hideTools (gomme, txt); / * Définit la variable de couleur active en fonction de la valeur Color Transform et utilise cette couleur pour le shapeSize MovieClip * / ct.color = activeColor; shapeSize.transform.colorTransform = ct;
La fonction de démarrage; cette fonction est appelée lorsque vous appuyez sur Board MovieClip.
fonction privée startPencilTool (e: MouseEvent): void pencilDraw = new Shape (); // Nous ajoutons une nouvelle forme à dessiner toujours en haut (en cas de texte ou de gomme) board.addChild (pencilDraw); // Ajoute cette forme au tableau MovieClip pencilDraw.graphics.moveTo (mouseX, mouseY); // Déplace la position du dessin vers la position de la souris pencilDraw.graphics.lineStyle (shapeSize.width, activeColor); // définit l'épaisseur du trait sur la taille ShapeSize MovieClip et définit sa couleur sur la carte de couleur active actuelle.addEventListener (MouseEvent.MOUSE_MOVE , drawPencilTool); // Ajoute un écouteur à la fonction suivante
La fonction Draw; appelé lorsque l'utilisateur appuie sur le Board MovieClip et déplace la souris.
fonction privée drawPencilTool (e: MouseEvent): void pencilDraw.graphics.lineTo (mouseX, mouseY); // Trace une ligne de la position actuelle de la souris à la position déplacée de la souris
Fonction stop, exécutée lorsque l'utilisateur relâche la souris.
fonction privée stopPencilTool (e: MouseEvent): void tableau.removeEventListener (MouseEvent.MOUSE_MOVE, drawPencilTool); // arrête le dessin
L’outil Gomme est à peu près le même que l’outil Crayon, sauf que nous n’utilisons aucune couleur autre que le blanc..
fonction privée EraserTool (e: MouseEvent): void / * Quitter l'outil actif * / quitActiveTool (); / * Actif * / actif = "Gomme"; / * Listeners * / board.addEventListener (MouseEvent.MOUSE_DOWN, startEraserTool); board.addEventListener (MouseEvent.MOUSE_UP, stopEraserTool); / * Mettez en surbrillance * / highlightTool (gomme); hideTools (crayon, txt); / * Utiliser la couleur blanche * / ct.color = 0x000000; shapeSize.transform.colorTransform = ct; fonction privée startEraserTool (e: MouseEvent): void pencilDraw = new Shape (); board.addChild (pencilDraw); pencilDraw.graphics.moveTo (mouseX, mouseY); pencilDraw.graphics.lineStyle (shapeSize.width, 0xFFFFFF); // Couleur blanche board.addEventListener (MouseEvent.MOUSE_MOVE, drawEraserTool); fonction privée drawEraserTool (e: MouseEvent): void pencilDraw.graphics.lineTo (mouseX, mouseY); function stopEraserTool (e: MouseEvent): void board.removeEventListener (MouseEvent.MOUSE_MOVE, drawEraserTool);
Comme vous pouvez le constater, le code est le même, sauf pour les changements de couleur blanche.
L'outil texte n'a que deux fonctions; l'un chargé de l'activer, l'autre de gérer l'écriture du texte. Nous allons jeter un coup d'oeil:
fonction privée TextTool (e: MouseEvent): void / * Quitter l'outil actif * / quitActiveTool (); / * Activer * / active = "Text"; / * Listener * / board.addEventListener (MouseEvent.MOUSE_UP, writeText); / * Mettez en surbrillance * / highlightTool (txt); hideTools (crayon, gomme); function privée writeText (e: MouseEvent): void / * Créer un nouvel objet TextField, afin de ne pas remplacer les anciennes instances * / var textfield = new TextField (); / * Définir les formats, la position et le focus * / textfield.type = TextFieldType.INPUT; textfield.autoSize = TextFieldAutoSize.LEFT; textfield.defaultTextFormat = textformat; textfield.textColor = activeColor; textfield.x = mouseX; textfield.y = mouseY; stage.focus = textfield; / * Ajouter du texte à la carte * / board.addChild (textfield);
Celui-ci était facile, rappelez-vous que vous pouvez changer la taille et la couleur en utilisant le shapeSize et les couleurs MovieClips.
L'option de sauvegarde gérée par saveButton utilisera la classe PNGEnconder d'Adobe pour enregistrer l'illustration au format PNG..
fonction privée export (): void var bmd: BitmapData = new BitmapData (600, 290); // crée un nouveau BitmapData avec la taille du tableau bmd.draw (tableau); // dessine le tableau MovieClip dans un BitmapImage dans BitmapData. var ba: ByteArray = PNGEncoder.encode (bmd); // Crée un ByteArray de BitmapData, codé en tant que fichier PNG var: FileReference = new FileReference (); // instancie un nouvel objet de référence de fichier pour gérer l'enregistrement save file.addEventListener (Event.COMPLETE, saveSuccessful); // Ajoute un nouvel écouteur à écouter lorsque la sauvegarde est terminée file.save (ba, "MyDrawing.png"); // enregistre l'objet ByteArray en tant que fonction privée PNG saveSuccessful (e: Event): void saveDialog = new SaveDialog (); // instancie une nouvelle classe SaveDialog addChild (saveDialog); // Ajoute le MovieClip SaveDialog à la scène saveDialog.closeBtn.addEventListener (MouseEvent.MOUSE_UP, closeSaveDialog); // ajoute un écouteur au bouton de fermeture de la fonction privée closeSaveDialog (e: MouseEvent): void removeChild (saveDialog) ; // Supprime la boîte de dialogue de la fonction privée Stage save (e: MouseEvent): void export (); // Appelle la fonction d'exportation pour commencer le processus de sauvegarde
L'outil Clear ajoutera un écran blanc devant tous les éléments pour que le tableau soit prêt à dessiner à nouveau..
fonction privée clearBoard (e: MouseEvent): void / * Crée un rectangle blanc au-dessus de tout * / var blank: Shape = new Shape (); blank.graphics.beginFill (0xFFFFFF); blank.graphics.drawRect (0, 0, board.width, board.height); blank.graphics.endFill (); board.addChild (vierge);
Pour obtenir la valeur des couleurs que nous utilisons dans Colours MovieClip, nous le convertissons en objet BitmapData et utilisons la méthode getPixel pour obtenir la valeur RVB du pixel cliqué..
fonction privée convertToBMD (): void colorsBmd = new BitmapData (colors.width, colors.height); colorsBmd.draw (couleurs); function privée ChooseColor (e: MouseEvent): void pixelValue = colorsBmd.getPixel (colors.mouseX, colors.mouseY); // Obtient la valeur RVB du pixel agité activeColor = pixelValue; / * Utilisez un objet ColorTransform pour modifier la couleur de shapeSize MovieClip * / ct.color = activeColor; shapeSize.transform.colorTransform = ct;
Nous ajouterons l'écouteur ChooseColor dans la fonction addListeners ultérieurement dans le code..
Auparavant, nous avions déclaré une variable pour définir l'outil actif ou actuel, et nous appelons cette fonction pour supprimer les écouteurs correspondants afin d'avoir un seul outil actif..
En gros, la fonction vérifie la variable "active" dans une boucle de commutation, puis en fonction de sa valeur, supprime les écouteurs dont elle dispose..
fonction privée quitActiveTool (): void commutateur (actif) case "Pencil": board.removeEventListener (MouseEvent.MOUSE_DOWN, startPencilTool); board.removeEventListener (MouseEvent.MOUSE_UP, stopPencilTool); case "Eraser": board.removeEventListener (MouseEvent.MOUSE_DOWN, startEraserTool); board.removeEventListener (MouseEvent.MOUSE_UP, stopEraserTool); case "Text": board.removeEventListener (MouseEvent.MOUSE_UP, writeText); défaut :
Nous devons également mettre en évidence l'outil actif et masquer les autres:
fonction privée highlightTool (tool: DisplayObject): void tool.visible = true; // Met en surbrillance l'outil dans le paramètre / * Masque les outils dans les paramètres * / private function hideTools (tool1: DisplayObject, tool2: DisplayObject): void tool1.visible = false; tool2.visible = false;
Nous cliquons sur le panneau de taille ou le ShapeSize MovieClip pour modifier la taille de l'outil Crayon, Gomme et Texte. La taille est modifiée par intervalles de 5 et est réinitialisée lorsque la taille est supérieure ou égale à 50. Regardez le code:
fonction privée changeShapeSize (e: MouseEvent): void if (shapeSize.width> = 50) shapeSize.width = 1; shapeSize.height = 1; / * TextFormat * / textformat.size = 16; else shapeSize.width + = 5; shapeSize.height = shapeSize.width; / * TextFormat * / textformat.size + = 5;
Une fonction pour ajouter tous les auditeurs.
fonction privée addListeners (): void pencilTool.addEventListener (MouseEvent.MOUSE_UP, PencilTool); eraserTool.addEventListener (MouseEvent.MOUSE_UP, EraserTool); textTool.addEventListener (MouseEvent.MOUSE_UP, TextTool); saveButton.addEventListener (MouseEvent.MOUSE_UP, save); clearTool.addEventListener (MouseEvent.MOUSE_UP, clearBoard); colors.addEventListener (MouseEvent.MOUSE_UP, ChooseColor); sizePanel.addEventListener (MouseEvent.MOUSE_UP, changeShapeSize); shapeSize.addEventListener (MouseEvent.MOUSE_UP, changeShapeSize);
Testez votre application en appuyant sur cmd + return et vérifiez si tout fonctionne comme prévu.
Utilisez tous les outils, les couleurs et les fonctions et commencez à dessiner votre scène!
Ce film Flash peut être facilement adapté en tant qu’application de dessin pour enfants. Il dispose d’une interface utilisateur conviviale et d’outils de base permettant d’apprendre le fonctionnement de la souris tout en vous amusant..
Vous pouvez également explorer le reste de as3corelib et lire sa documentation pour apprendre de nouvelles fonctionnalités ActionScript..
Merci d'avoir lu!
Accentsconagua