Share
Dans ce didacticiel Premium, nous allons apprendre à manipuler des images bitmap dans ActionScript 3 pour créer une application de rognage d’images utile. Continue de lire!
Image de Swami Stream sous licence Creative Commons.
À l'aide des outils Flash, nous allons créer une interface attrayante qui sera alimentée par plusieurs classes ActionScript 3 telles que MouseCursor, Bitmap, BitmapData, Rectangle, Point, Tween, FileReference et même des bibliothèques externes..
L'utilisateur pourra recadrer une image plusieurs fois pour sélectionner ultérieurement la meilleure option et l'enregistrer sur le disque..
Ouvrez Flash et créez un document de 600 pixels de large et 400 pixels de haut. Définir le taux de trame à 24fps.
Une belle interface de type mac va dynamiser notre code. Elle implique plusieurs boutons basés sur la timeline, des curseurs personnalisés, etc..
Passez aux étapes suivantes pour apprendre à créer cette interface graphique..
Aucune science en arrière-plan, créez simplement un rectangle noir de 600 x 400 pixels et centrez-le sur la scène. Vous pouvez également modifier la couleur d'arrière-plan dans les propriétés de la scène..
Nous aurons besoin d’une image à recadrer, sélectionnez votre image préférée et importez-la sur la scène (Cmd + R).
Image de Swami Stream sous licence Creative Commons.
Nous allons créer un curseur personnalisé pour l'utiliser comme retour d'information à l'utilisateur, lui indiquant où il peut rogner.
Sélectionnez l'outil Rectangle (R) et créez un rectangle blanc de 3 pixels de large et 17 pixels de haut..
Dupliquez la forme (Cmd + D) et faites-la pivoter de 90 degrés pour former une croix..
Répétez cette procédure avec un rectangle noir de 1 px de large, 15 px de hauteur.
Convertissez la forme finale en MovieClip (F8) et définissez son nom d’instance sur le curseur.
Ces boutons traitent les actions secondaires basées sur le recadrage. Ces actions sont les suivantes:
Sélectionnez l'outil Primitive Rectangle (R) et modifiez le rayon de l'angle à 10, tracez un rectangle de 70x18px et remplissez-le avec # 666666.
Dupliquez la forme (Cmd + D), redimensionnez-la à 68x16px et remplacez sa couleur par ce dégradé linéaire # 222222 à # 444444. Utilisez l'outil de transformation du dégradé (F) pour faire pivoter le dégradé..
Ensuite, utilisez l'outil Texte (T) pour écrire une étiquette pour le bouton. Utilisez ce format: Lucida Grande Regular, 12 pt, #CCCCCC.
Utilisez la même technique pour créer les boutons Annuler et Effacer.
Un bouton d'interface graphique bien faite a 4 états:
Convertissez vos boutons en MovieClip et double-cliquez dessus pour passer en mode édition. Ouvrez le panneau Montage (Fenêtre> Montage)..
Vous remarquerez que le Up l'état est déjà créé, ce sont les formes que vous avez converties en MovieClip.
Appuyez sur F6 pour créer un nouveau cadre et changez le remplissage en dégradé de la forme centrale en # 222222, # 5B5B5B. Ce sera le Plus de Etat.
Pour le Vers le bas state, sélectionnez la forme centrale et retournez-la verticalement (Modifier> Transformer> Retourner verticalement).
le Frappé l'état est par défaut, la plus grande zone de la forme, comme la zone cliquable que nous voulons est le bouton entier, il n'y aura pas besoin de créer un cadre pour cette.
Lorsque tous vos boutons sont prêts, quittez le mode édition et placez-les comme indiqué dans la capture d'écran suivante. Le texte en blanc indique le nom de l'occurrence du bouton.
Une barre de boutons sera utilisée pour placer et mettre en surbrillance le bouton de recadrage.
Utilisez l'outil Rectangle pour créer un rectangle de 600 x 50 pixels et remplissez-le de ce dégradé en remplissant #AFAFAF à # C4C4C4. Aligner la barre au bas de la scène.
Pour créer un effet en relief, tracez deux lignes de 600x1px et placez-les au-dessus de la barre de boutons, remplissez la première avec les lettres # 858585 et l'autre avec # D8D8D8..
Le bouton Rogner démarrera la fonction ActionScript principale qui manipulera les bitmaps dans la scène..
Avec l'outil Rectangle, créez des rectangles de 33x6px et 26x6px et utilisez-les pour former un angle droit.
Dupliquez la forme et faites-la pivoter de 180 degrés pour former un carré.
Déplacez la forme dupliquée de 5 pixels vers le haut et de 5 pixels vers la droite.
Remplissez la forme obtenue avec ce remplissage en dégradé: # 444444 à # 222222. Utilisez l'outil de transformation de dégradé pour faire pivoter le remplissage..
Vous pouvez ajouter plus de détails en ajoutant une ombre; dupliquer la forme actuelle et déplacez-la 1px vers le bas et 1px à droite.
Enfin, convertissez la forme en MovieClip et nommez-la. cropButton.
La forme de recadrage est une image qui sera utilisée pour indiquer la zone qui sera recadrée.
Sélectionnez l'outil Rectangle et changez la couleur de trait en blanc et la couleur de remplissage en blanc avec 1% alpha (cela nous aidera à faire glisser la forme de rognage). Dessinez un carré de 10x10px et centrez-le.
Sélectionnez une partie du carré de 1px et changez sa couleur en noir.
Dupliquer la forme et faire la même chose sur tout le côté.
Répétez ce processus sur tous les côtés.
Convertir le résultat en MovieClip et le nommer cropShape, marque le Exporter pour ActionScript boîte.
Double-cliquez dessus pour entrer en mode édition, créez une nouvelle image clé dans l'image 5 et faites pivoter la forme de 180 degrés..
Ajoutez 4 images de plus et quittez le mode édition.
Ceci termine la partie graphique, commençons par ActionScript!
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe.
Le mot clé package vous permet d'organiser votre code en groupes pouvant être importés par d'autres scripts. Il est recommandé de les nommer en commençant par une lettre minuscule et d'utiliser des interconnexions pour les mots suivants, par exemple: mes classes. Il est également courant de les nommer sur le site Web de votre entreprise: com.mycompany.classesType.myClass.
Dans cet exemple, nous utilisons une seule classe. Il n'est donc pas nécessaire de créer un dossier de classes..
paquet
Ce sont les classes que nous devons importer pour que notre classe fonctionne, le importation directive met à la disposition de votre code des classes et des packages définis en externe.
import flash.display.Sprite; import flash.events.MouseEvent; import flash.ui.Mouse; import flash.ui.MouseCursor; import flash.display.BitmapData; import flash.display.Bitmap; import flash.geom.Rectangle; import flash.geom.Point; import fl.transitions.Tween; import fl.transitions.easing.Strong; import flash.net.FileReference; import flash.utils.ByteArray; import com.adobe.images.JPGEncoder; import flash.events.Event;
Afin de sauvegarder le recadrage de l'image, nous allons utiliser une classe qui fait partie de as3corelib. Suivez le lien et téléchargez la bibliothèque.
Ici, nous déclarons la classe en utilisant le classe mot-clé de définition suivi du nom que nous voulons pour la classe, rappelez-vous que vous devez enregistrer le fichier en utilisant ce nom.
le s'étend mot-clé définit une classe qui est une sous-classe d'une autre classe. La sous-classe hérite de toutes les méthodes, propriétés et fonctions, ainsi nous pouvons les utiliser dans notre classe.
public class Main étend Sprite
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus à leur sujet.
private var cropShape: CropShape; // Ceci est une instance du cropShape que nous avons créé avant private var pointX: Number; // Cette variable contiendra la position x où la forme de rognage est démarrée private var pointY: Number; // Cette variable contiendra la position y où la forme de la culture est démarrée. Private var added: Boolean; // Vérifie si la forme de rognage est au stade. Images var privées: Array = new Array (); // Stocke les cultures d'images private var bmd: BitmapData; // Un objet de données bitmap, utilisé pour manipuler les données d'image principale private var bmd2: BitmapData; // Deuxième objet de données bitmap, celui-ci contiendra les données de l'image que nous voulons sauvegarder. Private var croppedImage: Sprite; // Contient les images recadrées private var cropThumb: int = 0; // Le nombre de pouces déjà créé var privé private thumbPosX: Array = [5, 5, 5, 505, 505, 505]; // Stocke les positions x des thumbs private var thumbPosY: Array = [37, 135, 233, 37, 135, 233]; // Stocke les y positions des pouces private var tween: Tween; // Un objet d'interpolation, la bibliothèque d'animation par défaut dans flash private var fileReference: FileReference; // Utilisé pour enregistrer le fichier sur le disque privé var var byteArray: ByteArray; // Stocke les données binaires, utilisées pour enregistrer le fichier sur le disque privé var jpg: JPGEncoder = new JPGEncoder (); // Le codeur d'image private var zoomed: Boolean; // Vérifie si la vignette est zoomée avant ou arrière private var currentCrop: Bitmap; // Contient la vignette zoomée actuelle, celle qui sera sauvegardée private var currentSprite: *; // Utilisé pour savoir quel pouce est actif private var latestX: Number; // Vérifie la dernière x du pouce zoomé private var latestY: Number; // Vérifie le dernier y du pouce zoomé
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à s'exécuter lorsque vous créez une instance d'un objet ou que vous l'exécutez à l'aide de la classe de document..
fonction publique Main (): void
Ce sont les écouteurs qui seront définis au lancement, ils ajoutent essentiellement des événements liés à la souris aux boutons.
image.addEventListener (MouseEvent.MOUSE_DOWN, getStartPoint); image.addEventListener (MouseEvent.MOUSE_UP, stopDrawing); cropButton.addEventListener (MouseEvent.MOUSE_UP, crop); image.addEventListener (MouseEvent.MOUSE_OVER, customCursor); image.addEventListener (MouseEvent.MOUSE_OUT, removeCustomCursor); saveButton.addEventListener (MouseEvent.MOUSE_UP, saveImage); cancelButton.addEventListener (MouseEvent.MOUSE_UP, cancel); clearButton.addEventListener (MouseEvent.MOUSE_UP, clearThumbs);
Ce code cache les boutons qui ne sont pas utilisés pour le moment..
saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false; curseur.visible = faux;
La fonction suivante rend le curseur personnalisé visible lorsque le pointeur de la souris survole l’image principale..
fonction privée customCursor (e: MouseEvent): void cursor.visible = true; Mouse.hide (); curseur.startDrag (true);
Masque le curseur personnalisé lorsque le pointeur de la souris quitte l'image principale.
fonction privée removeCustomCursor (e: MouseEvent): void cursor.visible = false; Mouse.show (); curseur.stopDrag ();
Une fonction très importante, obtient et stocke les coordonnées du clic de la souris et place le clip vidéo cropShape dans celles-ci. La valeur actuelle sera utilisée ultérieurement pour déterminer la taille de la forme de la culture..
fonction privée getStartPoint (e: MouseEvent): void pointX = mouseX; pointY = sourisY; if (! added) cropShape = new CropShape (); cropShape.x = pointX; cropShape.y = pointY; addChild (cropShape); ajouté = vrai; else removeChild (cropShape); cropShape = new CropShape (); cropShape.x = pointX; cropShape.y = pointY; addChild (cropShape);
Ajoute un écouteur dans l'image principale pour développer la forme du rognage lors du déplacement de la souris et ajoute le récepteur pour arrêter de développer la souris vers le haut..
image.addEventListener (MouseEvent.MOUSE_MOVE, drawCropShape); cropShape.addEventListener (MouseEvent.MOUSE_UP, stopDrawing);
Développe le cropShape en fonction des coordonnées enregistrées et actuelles.
fonction privée drawCropShape (e: MouseEvent): void cropShape.width = mouseX - pointX; cropShape.height = mouseY - pointY;
Arrête l'expansion de la forme de rognage et ajoute des écouteurs qui seront utilisés par les prochaines fonctions.
fonction privée stopDrawing (e: MouseEvent): void image.removeEventListener (MouseEvent.MOUSE_MOVE, drawCropShape); cropShape.addEventListener (MouseEvent.MOUSE_OVER, showHandCursor); cropShape.addEventListener (MouseEvent.MOUSE_OUT, hideHandCursor); cropShape.addEventListener (MouseEvent.MOUSE_DOWN, dragCrop); cropShape.addEventListener (MouseEvent.MOUSE_UP, stopDragCrop);
Utilise la classe Mouse pour manipuler le curseur de la souris. Ce code affiche le curseur Main lorsque la souris survole la forme de rognage..
fonction privée showHandCursor (e: MouseEvent): void Mouse.cursor = MouseCursor.HAND;
Restaure le comportement d'origine du curseur de la souris.
fonction privée hideHandCursor (e: MouseEvent): void Mouse.cursor = MouseCursor.AUTO;
La forme de la récolte sera déplaçable, cela aidera à sélectionner facilement la zone que nous voulons.
fonction privée dragCrop (e: MouseEvent): void cropShape.startDrag ();
Arrête le glisser sur la souris vers le haut.
fonction privée stopDragCrop (e: MouseEvent): void cropShape.stopDrag ();
Cette fonction gérera le recadrage des images, en utilisant les données bitmap des images et la classe des images-objets pour créer une série de vignettes qu'il sera plus facile de sauvegarder..
fonction de recadrage privée (e: MouseEvent): void
Les lignes suivantes traitent les données bitmap nécessaires pour rogner l'image..
bmd = new BitmapData (image.width, image.height, false, 0x00000000); // Crée un nouvel objet de données bitmap en utilisant la taille de l'image principale bmd.draw (image); // Copie les données d'image principales dans l'instance bmd2 = new BitmapData (cropShape.width, cropShape.height, false, 0x00000000); // Crée une nouvelle donnée bitmap en utilisant la taille réelle de la forme de rognage
La ligne suivante copie les pixels de l'image principale située dans la position de la forme de rognage vers l'objet de données bitmap bmp2.
Les paramètres fonctionnent comme indiqué ci-dessous:
bmd2.copyPixels (bmd, nouveau Rectangle (cropShape.x - image.x, cropShape.y - image.y, cropShape.width, cropShape.height), nouveau Point (0, 0));
Nous allons laisser l'utilisateur rogner six fois et enregistrer les aperçus sur le côté de l'image principale. Pour cela, nous créons un nouveau bitmap qui stockera les données bitmap de la vignette recadrée, puis nous l'ajouterons sous forme d'image-objet 90x70px..
Nous ajoutons également un écouteur pour zoomer et dézoomer la vignette.
si (cropThumb < 6) var bmp:Bitmap = new Bitmap(bmd2); var thumb:Sprite = new Sprite(); thumb.addChild(bmp); thumb.width = 90; thumb.height = 70; thumb.addEventListener(MouseEvent.MOUSE_UP, zoomThumb); addChild(thumb);
Comme nous créons un nouveau sprite dans chaque culture, le dernier sprite sera inaccessible en utilisant son nom d'occurrence, il sera temps d'utiliser le tableau créé précédemment.
Ce tableau stockera les vignettes créées pour y accéder en dehors de la fonction.
images.push (thumb);
Lorsque l'utilisateur appuie sur le bouton de recadrage, une vignette est créée à l'aide de l'image recadrée. Cette vignette est ensuite animée sur les côtés de l'application, en fonction d'une variable..
La position de la vignette est déterminée par cette variable et le thumbPos tableaux.
tween = new Tween (thumb, "x", Strong.easeOut, cropShape.x, thumbPosX [cropThumb], 0.5, true); tween = new Tween (thumb, "y", Strong.easeOut, cropShape.y, thumbPosY [cropThumb], 0,5, true); cropThumb ++; // Ajoute un au nombre de pouces
La fonction suivante est utilisée pour enregistrer l'image sur le disque.
Tout d'abord, il utilise la méthode jpg.encode () et enregistre les données résultantes dans le tableau d'octets. Ensuite, l'objet fileReference est utilisé pour afficher une boîte de dialogue d'enregistrement dans laquelle l'utilisateur peut renommer le fichier créé (bien qu'un nom par défaut soit défini)..
fonction privée saveImage (e: MouseEvent): void fileReference = new FileReference (); byteArray = jpg.encode (currentCrop.bitmapData); fileReference.save (byteArray, "Crop.jpg"); fileReference.addEventListener (Event.COMPLETE, saveComplete);
Une fois l'image enregistrée, les vignettes sont supprimées de la scène et du tableau. Les boutons sont cachés et l'image principale revient.
fonction privée saveComplete (e: Event): void pour (var i: int = 0; i < images.length; i++) removeChild(images[i]); cropThumb = 0; images = []; tween = new Tween(image,"y",Strong.easeOut,image.y,stage.stageHeight / 2 - image.height / 2 - 30,0.5,true); added = false; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false;
Il y a aussi un bouton d'annulation qui vous permettra de parcourir les vignettes sans en enregistrer aucune..
Lorsque ce bouton est enfoncé, toutes les vignettes sont remises en position et l'image principale à recadrer davantage (si possible)..
fonction privée cancel (e: MouseEvent): void tween = new Tween (currentSprite, "width", Strong.easeOut, currentSprite.width, 90,0,5, true); tween = new Tween (currentSprite, "height", Strong.easeOut, currentSprite.height, 70,0,5, true); tween = new Tween (currentSprite, "x", Strong.easeOut, currentSprite.x, latestX, 0.5, true); tween = new Tween (currentSprite, "y", Strong.easeOut, currentSprite.y, latestY, 0,5, true); tween = new Tween (image, "y", Strong.easeOut, image.y, stage.stageHeight / 2 - image.height / 2 - 30,0,5, vrai); ajouté = faux; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false; cropButton.visible = true; zoomé = faux;
Si l'utilisateur a recadré les 6 temps autorisés par l'application et qu'aucun d'entre eux ne correspond au résultat attendu, il existe toujours un moyen de recadrer encore plus de fois. C’est la tâche que le bouton clair réalisera.
Il supprime toutes les vignettes de la scène et du tableau, renvoie l'image principale à la scène et masque les boutons inutilisés..
fonction privée clearThumbs (e: MouseEvent): void pour (var i: int = 0; i < images.length; i++) removeChild(images[i]); cropThumb = 0; images = []; tween = new Tween(image,"y",Strong.easeOut,image.y,stage.stageHeight / 2 - image.height / 2 - 30,0.5,true); added = false; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false;
Nous utiliserons la classe de document dans ce tutoriel. Si vous ne savez pas comment l'utiliser ou êtes un peu confus, veuillez lire cette astuce..
Le résultat final est une application utile de rognage d’images qui vous apprend à manipuler des bitmaps pour les modifier. Presque sans le savoir, vous avez également appris à créer et à mettre en oeuvre une très belle interface..
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
Accentsconagua