Astuce Créer un outil de capture instantanée dans Flash

Dans cette astuce, je vais vous montrer comment créer un outil Shapshot qui copie une partie de la scène et enregistre le résultat sous forme d'image PNG..


Aperçu du résultat final

C'est le résultat final. Il suffit de cliquer sur la scène puis de faire glisser la souris pour prendre un instantané.


Étape 1: Téléchargez la classe as3corelib

Créez un nouveau dossier pour ce projet et donnez-lui le nom de votre choix. Allez sur Github et téléchargez la dernière version du as3corelib Classe. Pour cette astuce, j'ai utilisé la version .93. Extraire le fichier ZIP et aller à as3corelib-.93> src.

Copier le com répertoire dans votre dossier nouvellement créé. Ce paquet a un très utile PNGEncoder Classe que nous allons utiliser pour encoder le
capture instantanée dans une image PNG.


Étape 2: Configurez votre fichier Flash

Lancez Flash et créez un nouveau document Flash. Assurez-vous qu’il est configuré pour publier dans Actionscript 3.0 et Flash Player 10. Vous pouvez le vérifier dans les Propriétés.
panneau ou en sélectionnant Publier les paramètres… puis en cliquant sur le Flash languette.


Étape 3: contenu à capturer

Il nous faut du contenu dans le fichier Flash pour vérifier si l’outil de capture instantanée fonctionne correctement. Nous allons créer des cercles et les placer au hasard autour de la scène. Créez une nouvelle classe de document appelée Cercles.as et ajoutez le code suivant. N'oubliez pas de lier la classe au fichier Flash en écrivant Cercles dans le Classe champ dans le la Propriétés Panneau.

 package import flash.display.Shape; import flash.display.Sprite; Classe publique Circles. Sprite private var _circleCount: int = 20; fonction publique Circles () makeCircles ();  fonction privée makeCircles (): void pour (var i: int = 0; i < _circleCount; i++)  var circle:Shape = new Shape(); circle.graphics.lineStyle(1, 0xCCCCCC, 1); circle.graphics.beginFill(0x333333, 0.5); circle.graphics.drawCircle(Math.random() * stage.stageWidth, Math.random() * stage.stageHeight, (Math.random() * 40) + 20); circle.graphics.endFill(); addChild(circle);    

Notre fonction d'instantané fonctionnera avec n'importe quel contenu de scène, alors ne vous sentez pas obligé de vous limiter à des formes simples.!


Étape 4: Créez la classe de capture instantanée

Créez un nouveau fichier de classe et nommez-le. SnapShot.as. C'est la classe qui contiendra toutes les méthodes utilisées pour prendre un instantané. Ajoutez le code suivant à la classe.

 package import flash.display.Stage; classe publique SnapShot private var _stage: Stage; fonction publique Snapshot ()  fonction publique activer (stage: Stage): void _stage = stage; 

Ajoutez les lignes de code suivantes au Cercles Classe. Nous utilisons le Activer() méthode pour passer une référence à la scène le long de la Instantané Classe. Nous faisons cela pour pouvoir accéder au contenu sur la scène..

 package import flash.display.Shape; import flash.display.Sprite; Classe publique Circles. Sprite private var _circleCount: int = 20; private var _snapshot: SnapShot; fonction publique Circles () makeCircles (); _snapshot = new SnapShot (); _snapshot.activate (stage);  fonction privée makeCircles (): void pour (var i: int = 0; i < _circleCount; i++)  var circle:Shape = new Shape(); circle.graphics.lineStyle(1, 0xCCCCCC, 1); circle.graphics.beginFill(0x333333, 0.5); circle.graphics.drawCircle(Math.random() * stage.stageWidth, Math.random() * stage.stageHeight, (Math.random() * 40) + 20); circle.graphics.endFill(); addChild(circle);    

Étape 5: Tracer les limites

Étendre le Instantané Classe pour inclure les méthodes suivantes. Ces méthodes sont utilisées pour dessiner le cadre des limites, ce qui permet aux utilisateurs de sélectionner quelle partie de la scène sera copiée dans l'instantané.

 package import flash.display.Shape; import flash.display.Stage; import flash.events.Event; import flash.events.MouseEvent; classe publique SnapShot private var _stage: Stage; private var _boundary: Shape; private var _originX: int; var _originY privé: int; var privé_mouseX: int; var_mouseY privé: int; fonction publique SnapShot ()  fonction publique activer (stage: Stage): void _stage = stage; addMouseListeners ();  fonction privée addMouseListeners (): void _stage.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _stage.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);  fonction privée onMouseDown (e: MouseEvent): void _stage.addEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); // Ces valeurs sont utilisées plus tard comme point de départ pour la limite. _originX = _stage.mouseX; _originY = _stage.mouseY;  fonction privée drawBoundaries (e: MouseEvent): void if (_boundary == null) _boundary = new Shape ();  clearBoundaries () // Ceci permet à la valeur mouseY de rester dans les limites de la scène. _mouseY = Math.max (Math.min (_stage.mouseY, _stage.stageHeight), 0); // Cela permet à la valeur mouseX de rester dans les limites de la scène. _mouseX = Math.max (Math.min (_stage.mouseX, _stage.stageWidth), 0); _boundary.graphics.lineStyle (2, 0x0, 0.5); _boundary.graphics.drawRect (_originX, _originY, _mouseX - _originX, _mouseY - _originY); _boundary.graphics.lineStyle (4, 0x0, 0.2); // Ce code garantit que nous dessinons toujours du point en haut à gauche au coin en bas à droite. _boundary.graphics.drawRect (Math.min (_originX, _mouseX) - 3, Math.min (_originY, _mouseY) - 3, Math.abs (_mouseX - _originX) + 6, Math.abs (_mouseY - _originY) + 6) ; _stage.addChild (_boundary);  fonction privée clearBoundaries (): void _boundary.graphics.clear ();  fonction privée onMouseUp (e: Event): void _stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); clearBoundaries (); 

Nous commençons par vérifier si l'utilisateur a cliqué sur le bouton Étape. Quand il clique sur la scène, nous commençons à exécuter le drawBoundaries () méthode chaque fois que la souris est déplacée. Cette méthode dessine les limites; tout ce qui tombe dans la fine ligne noire fera partie de l'instantané. Lorsque l'utilisateur relâche la souris, nous ne vérifions plus les mouvements de la souris..

Étape 6: Mettre en scène le contenu en bitmap

Importer le BitmapData et Matrice Classes et ajouter le _contenu propriété à la liste des propriétés privées.

 package import flash.display.BitmapData; import flash.display.Shape; import flash.display.Stage; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Matrix; import flash.geom.Rectangle; classe publique SnapShot private var _stage: Stage; private var _boundary: Shape; private var _content: BitmapData; private var _originX: int; var _originY privé: int; var privé_mouseX: int; var_mouseY privé: int;

Ajoutez le code suivant au bas de la classe:

 fonction privée onMouseUp (e: Event): void _stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); clearBoundaries (); createBitmap ();  fonction privée createBitmap (): void // Nous ajoutons le décalage -2 à la ligne de démarcation. _content = new BitmapData (Math.abs (_mouseX - _originX) - 2, Math.abs (_mouseY - _originY) - 2); // Le -1 est ajouté pour la même raison, pour empêcher la ligne d'apparaître dans l'image finale. var bitmapMatrix: Matrix = new Matrix (1, 0, 0, 1, -Math.min (_originX, _mouseX) - 1, -Math.min (_originY, _mouseY) - 1); _content.draw (_stage, bitmapMatrix); 

le createBitmap () méthode crée un nouveau BitmapData objet avec la largeur et la hauteur de la zone de contenu à l'intérieur de la limite. le matrice transitions variables (déplace) l'image de sorte que lorsque dessiner() méthode est appelée, il commence à copier à partir du coin supérieur gauche de la zone limite.

Étape 7: Enregistrement du bitmap

Pour enregistrer le bitmap, nous devons importer plusieurs classes..

  • le ByteArray La classe est utilisée pour encoder le BitmapData objet.
  • le PNGEncoder La classe est utilisée pour convertir les données encodées en une image PNG..
  • le FileReference La classe est utilisée pour enregistrer l'image sur le disque dur de l'utilisateur..

Nous avons également ajouté un _imageCount propriété que nous utilisons pour incrémenter les noms d'images.

 package import com.adobe.images.PNGEncoder; import flash.display.BitmapData; import flash.display.Shape; import flash.display.Stage; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Matrix; import flash.geom.Rectangle; import flash.net.FileReference; import flash.utils.ByteArray; Classe publique Snapshot private var _stage: Stage; private var _boundary: Shape; private var _content: BitmapData; private var _originX: int; var _originY privé: int; var privé_mouseX: int; var_mouseY privé: int; private var _imageCount: int = 1;

Ajoutez le code suivant au bas de la classe SnapShot:

 fonction privée createBitmap (): void _content = new BitmapData (Math.abs (_mouseX - _originX) - 2, Math.abs (_mouseY - _originY) - 2); var bitmapMatrix: Matrix = new Matrix (1, 0, 0, 1, -Math.min (_originX, _mouseX) - 1, -Math.min (_originY, _mouseY) - 1); _content.draw (_stage, bitmapMatrix); saveBitmap ();  fonction privée saveBitmap (): void var encodedContent: ByteArray = PNGEncoder.encode (_content); var fileWindow: FileReference = new FileReference (); fileWindow.save (encodedContent, "Image_" + _imageCount + ".png"); _imageCount ++; 

le saveBitmap méthode est assez facile à comprendre. Nous encodons le BitmapData objet et enregistrez-le sur le disque dur de l'utilisateur.
Nous utilisons le _imageCount propriété permettant à l'utilisateur de sauvegarder plusieurs images à la suite.

Conclusion

L'outil de capture instantanée est maintenant terminé et avec seulement trois lignes de code, il peut être implémenté dans n'importe quel projet..

Assurez-vous que vous utilisez Flash Player 10 et que le package as3corelib est dans le bon répertoire..

J'espère que vous avez apprécié ce petit conseil, merci d'avoir lu!