Share
In questo suggerimento rapido, ti mostrerò come creare uno strumento Shapshot che copia parte del palco e salva il risultato come un'immagine PNG.
Questo è il risultato finale. Basta fare clic sul palco e quindi trascinare il mouse per scattare un'istantanea.
Crea una nuova cartella per questo progetto e assegnagli il nome che desideri. Vai su Github e scarica l'ultima versione di as3corelib Classe. Per questo suggerimento veloce ho usato la versione .93. Estrai il file ZIP e vai a as3corelib-.93> src.
Copia il com directory alla cartella appena creata. Questo pacchetto è molto utile PNGEncoder Classe che useremo per codificare il
istantanea in un'immagine PNG.
Avvia Flash e crea un nuovo documento Flash. Assicurati che sia impostato per la pubblicazione su Actionscript 3.0 e Flash Player 10. Puoi verificarlo nelle Proprietà
pannello o selezionando Pubblica impostazioni ... e quindi facendo clic sul Veloce linguetta.
Abbiamo bisogno di alcuni contenuti nel file Flash per verificare se lo strumento snapshot funziona correttamente. Creeremo delle cerchie e le posizioneremo a caso sul palco. Crea una nuova classe di documenti chiamata Circles.as e aggiungi il seguente codice. Ricordarsi di collegare la classe al file Flash scrivendo Circles nel Classe campo nel Proprietà Pannello.
package import flash.display.Shape; import flash.display.Sprite; circoli di classe pubblica estende Sprite private var _circleCount: int = 20; funzione pubblica Circles () makeCircles (); funzione privata makeCircles (): void for (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);
La nostra funzione di istantanea funzionerà con qualsiasi contenuto dello stage, quindi non pensare di doverti limitare a forme semplici!
Creare un nuovo file di classe e dargli un nome SnapShot.as. Questa è la classe che conterrà tutti i metodi utilizzati per scattare un'istantanea. Aggiungi il seguente codice alla classe.
pacchetto import flash.display.Stage; public class SnapShot private var _stage: Stage; public function Snapshot () public function activate (stage: Stage): void _stage = stage;
Aggiungere le seguenti righe di codice al Circles Classe. Noi usiamo il attivare() metodo per passare un riferimento allo stage lungo il SnapShot Classe. Facciamo questo per poter accedere ai contenuti sullo stage.
package import flash.display.Shape; import flash.display.Sprite; circoli di classe pubblica estende Sprite private var _circleCount: int = 20; private var _snapshot: SnapShot; funzione pubblica Circles () makeCircles (); _snapshot = new SnapShot (); _snapshot.activate (fase); funzione privata makeCircles (): void for (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);
Espandi il SnapShot Classe per includere i seguenti metodi. Questi metodi sono utilizzati per disegnare la cornice dei contorni, che consente agli utenti di selezionare quale parte dello stage verrà copiata nell'istantanea.
package import flash.display.Shape; import flash.display.Stage; import flash.events.Event; import flash.events.MouseEvent; public class SnapShot private var _stage: Stage; private var _boundary: Shape; private var _originX: int; private var _originY: int; private var _mouseX: int; private var _mouseY: int; funzione pubblica SnapShot () public function activate (stage: Stage): void _stage = stage; addMouseListeners (); funzione privata addMouseListeners (): void _stage.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _stage.addEventListener (MouseEvent.MOUSE_UP, onMouseUp); funzione privata onMouseDown (e: MouseEvent): void _stage.addEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); // Questi valori vengono utilizzati in seguito come punto di partenza per il limite. _originX = _stage.mouseX; _originY = _stage.mouseY; private function drawBoundaries (e: MouseEvent): void if (_boundary == null) _boundary = new Shape (); clearBoundaries () // Serve per mantenere il valore mouseY entro i limiti dello stage. _mouseY = Math.max (Math.min (_stage.mouseY, _stage.stageHeight), 0); // Questo serve a fare in modo che il valore del mouseX rimanga entro i limiti dello stage. _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); // Questo codice ci assicura di pescare sempre dal punto in alto a sinistra in basso a destra. _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); private function clearBoundaries (): void _boundary.graphics.clear (); funzione privata onMouseUp (e: Event): void _stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); clearBoundaries ();
Iniziamo controllando se l'utente ha cliccato su Palcoscenico. Quando fa clic sul palco iniziamo a eseguire il drawBoundaries () metodo ogni volta che viene spostato il mouse. Questo metodo disegna i confini; qualunque cosa rientri nella sottile linea nera farà parte dell'istantanea. Quando l'utente rilascia il mouse smettiamo di controllare i movimenti del mouse.
Importa il BitmapData e Matrice Classi e aggiungi il _soddisfare proprietà alla lista di proprietà private.
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; public class SnapShot private var _stage: Stage; private var _boundary: Shape; private var _content: BitmapData; private var _originX: int; private var _originY: int; private var _mouseX: int; private var _mouseY: int;
Aggiungi il seguente codice alla fine della classe:
funzione privata onMouseUp (e: Event): void _stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); clearBoundaries (); CreateBitmap (); funzione privata createBitmap (): void // Aggiungiamo il -2 all'offset per la linea di confine. _content = new BitmapData (Math.abs (_mouseX - _originX) - 2, Math.abs (_mouseY - _originY) - 2); // Il -1 viene aggiunto per lo stesso motivo, per impedire alla linea di apparire nell'immagine finale. var bitmapMatrix: Matrix = new Matrix (1, 0, 0, 1, -Math.min (_originX, _mouseX) - 1, -Math.min (_originY, _mouseY) - 1); _content.draw (_stage, bitmapMatrix);
Il CreateBitmap () metodo crea un nuovo BitmapData oggetto con la larghezza e l'altezza dell'area del contenuto all'interno del confine. Il matrice transizioni variabili (sposta) l'immagine in modo che quando il disegnare() il metodo è chiamato inizia a copiare dall'angolo in alto a sinistra dell'area del contorno.
Per salvare la bitmap dobbiamo importare diverse classi.
Accentsconagua
ByteArray La classe è usata per codificare il BitmapData oggetto.PNGEncoder La classe viene utilizzata per convertire i dati codificati in un'immagine PNG.File di riferimento La classe viene utilizzata per salvare l'immagine sul disco rigido dell'utente.Abbiamo anche aggiunto un _imageCount proprietà che usiamo per incrementare i nomi delle immagini.
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; public class Snapshot private var _stage: Stage; private var _boundary: Shape; private var _content: BitmapData; private var _originX: int; private var _originY: int; private var _mouseX: int; private var _mouseY: int; private var _imageCount: int = 1;
Aggiungi il seguente codice alla fine della classe SnapShot:
funzione privata 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 (); private function saveBitmap (): void var encodedContent: ByteArray = PNGEncoder.encode (_content); var fileWindow: FileReference = new FileReference (); fileWindow.save (encodedContent, "Image_" + _imageCount + ".png"); _imageCount ++;
Il saveBitmap il metodo è abbastanza facile da capire. Noi codifichiamo BitmapData oggetto e salvarlo sul disco rigido dell'utente.
Noi usiamo il _imageCount proprietà per rendere più facile per l'utente salvare più immagini di seguito.
Lo Snapshot Tool è ora completo e con solo tre righe di codice può essere implementato in qualsiasi progetto.
Assicurati di utilizzare Flash Player 10 e di avere il pacchetto as3corelib nella directory corretta.
Spero ti sia piaciuto questo suggerimento rapido, grazie per la lettura!
