Share
I denne Quick Tip viser jeg deg hvordan du lager et Shapshot-verktøy som kopierer en del av scenen og lagrer resultatet som et PNG-bilde.
Dette er sluttresultatet. Bare klikk på scenen og dra deretter musen for å ta et øyeblikksbilde.
Opprett en ny mappe for dette prosjektet og gi det noe navn du vil ha. Gå til Github og last ned den nyeste versjonen av as3corelib Klasse. For denne Quick Tip har jeg brukt versjon .93. Trekk ut ZIP-filen og gå til as3corelib-.93> src.
Kopier com katalog til den nylig opprettede mappen din. Denne pakken har en veldig nyttig PNGEncoder Klasse som vi skal bruke til koding av
øyeblikksbilde i et PNG-bilde.
Start Flash og opprett et nytt Flash-dokument. Pass på at det er satt til å publisere til Actionscript 3.0 og Flash Player 10. Du kan sjekke dette i egenskapene
panelet eller ved å velge Publiser innstillinger ... og deretter klikke på Blits tab.
Vi trenger litt innhold i Flash-filen for å sjekke om øyeblikksbildeverktøyet fungerer som det skal. Vi skal lage noen sirkler og plassere dem tilfeldig rundt scenen. Opprett en ny dokumentklasse som heter Circles.as og legg til følgende kode. Husk å koble klassen til Flash-filen ved å skrive Circles i Klasse feltet i feltet Eiendommer Panel.
pakke import flash.display.Shape; importer flash.display.Sprite; offentlig klasse Sirkler strekker seg Sprite private var _circleCount: int = 20; offentlig funksjon Sirkler () makeCircles (); private funksjon 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);
Vår stillbildefunksjon vil fungere med et hvilket som helst trinninnhold, men føl deg så ikke at du må begrense deg til enkle former!
Opprett en ny Klassefil og gi den navnet SnapShot.as. Dette er klassen som vil holde alle metodene som brukes til å ta et øyeblikksbilde. Legg til følgende kode i klassen.
pakke import flash.display.Stage; offentlig klasse SnapShot private var _stage: Stage; offentlig funksjon Snapshot () offentlig funksjon aktiveres (scene: scenen): void _stage = stage;
Legg til følgende linjer med kode til Circles Klasse. Vi bruker (slås på) metode for å sende en referanse til scenen sammen til SnapShot Klasse. Vi gjør dette slik at vi kan få tilgang til innholdet på scenen.
pakke import flash.display.Shape; importer flash.display.Sprite; offentlig klasse Sirkler strekker seg Sprite private var _circleCount: int = 20; privat var _snapshot: SnapShot; offentlig funksjon Sirkler () makeCircles (); _snapshot = ny SnapShot (); _snapshot.activate (trinn); private funksjon 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);
Utvid SnapShot Klasse for å inkludere følgende metoder. Disse metodene brukes til å tegne grenserammen, som lar brukerne velge hvilken del av scenen som skal kopieres til stillbildet.
pakke import flash.display.Shape; importer flash.display.Stage; importere flash.events.Event; importer flash.events.MouseEvent; offentlig klasse SnapShot private var _stage: Stage; privat var _grense: Shape; privat var _originX: int; privat var _originY: int; privat var _mouseX: int; privat var _mouseY: int; offentlig funksjon SnapShot () offentlig funksjon aktivert (scene: Stage): void _stage = stage; addMouseListeners (); privat funksjon addMouseListeners (): void _stage.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _stage.addEventListener (MouseEvent.MOUSE_UP, onMouseUp); privat funksjon onMouseDown (e: MouseEvent): void _stage.addEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); // Disse verdiene brukes senere som utgangspunkt for grensen. _originX = _stage.mouseX; _originY = _stage.mouseY; Private funksjon drawBoundaries (e: MouseEvent): void if (_boundary == null) _boundary = new Shape (); clearBoundaries () // Dette er for å gjøre mouseY-verdien forbli innenfor rammen av scenen. _mouseY = Math.max (Math.min (_stage.mouseY, _stage.stageHeight), 0); // Dette er for å gjøre mouseX-verdien forbli innenfor rammene av scenen. _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); // Denne koden sørger for at vi alltid tegner fra øverste venstre punkt til nederst til høyre. _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); privat funksjon clearBoundaries (): void _boundary.graphics.clear (); privat funksjon onMouseUp (e: Event): void _stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); clearBoundaries ();
Vi starter med å sjekke om brukeren har klikket på Scene. Når han klikker på scenen begynner vi å kjøre drawBoundaries () metode når musen er flyttet. Denne metoden trekker grensene; det som faller innenfor den tynne, svarte linjen, vil være en del av øyeblikksbildet. Når brukeren slipper ut musen, stopper vi med å sjekke musebevegelser.
Importer BitmapData og Matrise Klasser og legg til _innhold eiendom til listen over private eiendommer.
pakke import flash.display.BitmapData; importer flash.display.Shape; importer flash.display.Stage; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.geom.Matrix; importer flash.geom.Rectangle; offentlig klasse SnapShot private var _stage: Stage; privat var _grense: Shape; private var _content: BitmapData; privat var _originX: int; privat var _originY: int; privat var _mouseX: int; privat var _mouseY: int;
Legg til følgende kode i bunnen av klassen:
privat funksjon onMouseUp (e: Event): void _stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); clearBoundaries (); createBitmap (); privat funksjon createBitmap (): void // Vi legger til -2 for å kompensere for grenselinjen. _content = ny BitmapData (Math.abs (_mouseX - _originX) - 2, Math.abs (_mouseY - _originY) - 2); // -1 legges av samme grunn, for å holde linjen fra å vises i det endelige bildet. Var bitmapMatrix: Matrise = Ny Matrise (1, 0, 0, 1, -Math.min (_originX, _mouseX) - 1, -Math.min (_originY, _mouseY) - 1); _content.draw (_stage, bitmapMatrix);
De createBitmap () Metoden skaper en ny BitmapData objekt med bredden og høyden på innholdsområdet innenfor grensen. De matrise variable overganger (flyttes) bildet slik at når tegne() Metoden heter det begynner å kopiere fra øverste venstre hjørne av grenseområdet.
For å lagre bitmapet må vi importere flere klasser.
Accentsconagua
ByteArray Klassen brukes til å kode inn BitmapData gjenstand.PNGEncoder Klassen brukes til å konvertere de kodede dataene til et PNG-bilde.FileReference Klassen brukes til å lagre bildet til brukerens harddisk.Vi har også lagt til en _imageCount eiendom som vi bruker til å øke bildenavnene.
pakke import com.adobe.images.PNGEncoder; importer flash.display.BitmapData; importer flash.display.Shape; importer flash.display.Stage; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.geom.Matrix; importer flash.geom.Rectangle; importer flash.net.FileReference; importere flash.utils.ByteArray; offentlig klasse Snapshot private var _stage: Stage; privat var _grense: Shape; private var _content: BitmapData; privat var _originX: int; privat var _originY: int; privat var _mouseX: int; privat var _mouseY: int; privat var _imageCount: int = 1;
Legg til følgende kode nederst på SnapShot-klassen:
privat funksjon createBitmap (): void _content = new BitmapData (Math.abs (_mouseX - _originX) - 2, Math.abs (_mouseY - _originY) - 2); Var bitmapMatrix: Matrise = Ny Matrise (1, 0, 0, 1, -Math.min (_originX, _mouseX) - 1, -Math.min (_originY, _mouseY) - 1); _content.draw (_stage, bitmapMatrix); saveBitmap (); privat funksjon saveBitmap (): void var encodedContent: ByteArray = PNGEncoder.encode (_content); var filWindow: FileReference = ny FileReference (); fileWindow.save (encodedContent, "Image_" + _imageCount + ".png"); _imageCount ++;
De saveBitmap Metoden er ganske lett å forstå. Vi koder for BitmapData objekt og lagre den på brukerens harddisk.
Vi bruker _imageCount Egenskapen gjør det enklere for brukeren å lagre flere bilder på rad.
Stillbildeverktøyet er nå fullført, og med bare tre linjer med kode kan implementeres i et hvilket som helst prosjekt.
Pass på at du kjører Flash Player 10, og at du har as3corelib-pakken i riktig katalog.
Jeg håper du likte denne Quick Tip, takk for å lese!
