Share
I den här snabba tipsen visar jag hur du skapar ett Shapshot-verktyg som kopierar en del av scenen och sparar resultatet som ett PNG-bild.
Detta är det slutliga resultatet. Klicka bara på scenen och dra sedan musen för att ta en ögonblicksbild.
Skapa en ny mapp för detta projekt och ge det något namn du vill ha. Gå till Github och hämta den senaste versionen av as3corelib Klass. För denna snabba tips har jag använt versionen .93. Extrahera ZIP-filen och gå till as3corelib-93> src.
Kopiera com katalog till din nyskapade mapp. Detta paket har en mycket användbar PNGEncoder Klass som vi ska använda för att koda
ögonblicksbild till en PNG-bild.
Starta Flash och skapa ett nytt Flash-dokument. Se till att det är publicerat för Actionscript 3.0 och Flash Player 10. Du kan kontrollera detta i egenskaperna
panelen eller genom att välja Publicera inställningar ... och sedan klicka på Blixt flik.
Vi behöver lite innehåll i Flash-filen för att kontrollera om ögonblicksverktyget fungerar korrekt. Vi ska skapa några cirklar och placera dem slumpmässigt runt scenen. Skapa en ny dokumentklass som heter Circles.as och lägg till följande kod. Kom ihåg att länka klassen till Flash-filen genom att skriva cirklar i Klass fält i Egenskaper Panel.
paket import flash.display.Shape; importera flash.display.Sprite; offentliga klassen Cirklar sträcker sig Sprite private var _circleCount: int = 20; offentliga funktionen Cirklar () makeCircles (); privat funktion 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 ögonblicksfunktion kommer dock att fungera med något skedeinnehåll, men så känner du inte att du måste begränsa dig till enkla former!
Skapa en ny klassfil och ge den ett namn på SnapShot.as. Det här är klassen som håller alla metoder som används för att ta en ögonblicksbild. Lägg till följande kod i klassen.
paket import flash.display.Stage; offentlig klass SnapShot privat var _stage: Stage; Offentlig funktion Snapshot () Offentlig funktion aktiveras (stadium: Stage): void _stage = stage;
Lägg till följande rader av kod till cirklar Klass. Vi använder Aktivera() metod för att skicka en referens till scenen längs med SnapShot Klass. Vi gör det så att vi kan komma åt innehållet på scenen.
paket import flash.display.Shape; importera flash.display.Sprite; offentliga klassen Cirklar sträcker sig Sprite private var _circleCount: int = 20; privat var _snapshot: SnapShot; offentliga funktionen Cirklar () makeCircles (); _snapshot = ny SnapShot (); _snapshot.activate (steg); privat funktion 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);
Expandera SnapShot Klass för att inkludera följande metoder. Dessa metoder används för att rita gränserna, vilket gör det möjligt för användarna att välja vilken del av scenen som ska kopieras till ögonblicksbilden.
paket import flash.display.Shape; importera flash.display.Stage; importera flash.events.Event; importera flash.events.MouseEvent; offentlig klass SnapShot privat var _stage: Stage; privat var _gräns: Form; privat var _originX: int; privat var _originY: int; privat var _mouseX: int; privat var _mouseY: int; offentlig funktion SnapShot () allmän funktion aktiverad (scen: Steg): void _stage = stage; addMouseListeners (); privat funktion addMouseListeners (): void _stage.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _stage.addEventListener (MouseEvent.MOUSE_UP, onMouseUp); privat funktion onMouseDown (e: MouseEvent): void _stage.addEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); // Dessa värden används senare som utgångspunkt för gränsen. _originX = _stage.mouseX; _originY = _stage.mouseY; Private Function drawBoundaries (e: MouseEvent): void if (_boundary == null) _boundary = new Shape (); clearBoundaries () // Det här gör att mouseY-värdet stannar inom gränserna för scenen. _mouseY = Math.max (Math.min (_stage.mouseY, _stage.stageHeight), 0); // Det här gör att mouseX-värdet stannar inom gränserna för 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); // Den här koden ser till att vi alltid ritar från den övre vänstra punkten längst ner till höger. _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 funktion clearBoundaries (): void _boundary.graphics.clear (); privat funktion onMouseUp (e: Event): void _stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); clearBoundaries ();
Vi börjar med att kontrollera om användaren har klickat på Skede. När han klickar på scenen börjar vi springa drawBoundaries () metod när musen flyttas. Denna metod drar gränserna; vad som än faller inom den svarta svarta linjen kommer att ingå i ögonblicksbilden. När användaren släpper ut musen slutar vi leta efter musrörelser.
Importera BitmapData och Matris Klasser och lägg till _innehåll egendom till listan över privata fastigheter.
paket importera flash.display.BitmapData; importera flash.display.Shape; importera flash.display.Stage; importera flash.events.Event; importera flash.events.MouseEvent; importera flash.geom.Matrix; importera flash.geom.Rectangle; offentlig klass SnapShot privat var _stage: Stage; privat var _gräns: Form; privat var _content: BitmapData; privat var _originX: int; privat var _originY: int; privat var _mouseX: int; privat var _mouseY: int;
Lägg till följande kod längst ner i klassen:
privat funktion onMouseUp (e: Event): void _stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); clearBoundaries (); createBitmap (); privat funktion createBitmap (): void // Vi lägger till -2 för att kompensera för gränslinjen. _content = ny BitmapData (Math.abs (_mouseX - _originX) - 2, Math.abs (_mouseY - _originY) - 2); // -1 läggs av samma skäl för att hålla linjen inte i den slutliga bilden. var bitmapMatrix: Matrix = ny matris (1, 0, 0, 1, -Math.min (_originX, _mouseX) - 1, -Math.min (_originY, _mouseY) - 1); _content.draw (_stage, bitmapMatrix);
De createBitmap () Metoden skapar en ny BitmapData objekt med bredden och höjden på innehållsområdet inuti gränsen. De matris variabla övergångar (flyttar) bilden så att när dra() Metoden heter det börjar kopiera från det övre vänstra hörnet av gränsområdet.
För att spara bitmap måste vi importera flera klasser.
Accentsconagua
Bytearray Klass används för att koda BitmapData objekt.PNGEncoder Klass används för att konvertera kodade data till en PNG-bild.Filreferens Klass används för att spara bilden till användarens hårddisk.Vi har också lagt till en _imageCount egenskap som vi använder för att öka bildnamnen.
paket import com.adobe.images.PNGEncoder; importera flash.display.BitmapData; importera flash.display.Shape; importera flash.display.Stage; importera flash.events.Event; importera flash.events.MouseEvent; importera flash.geom.Matrix; importera flash.geom.Rectangle; importera flash.net.FileReference; importera flash.utils.ByteArray; public class Snapshot private var _stage: Stage; privat var _gräns: Form; privat var _content: BitmapData; privat var _originX: int; privat var _originY: int; privat var _mouseX: int; privat var _mouseY: int; privat var _imageCount: int = 1;
Lägg till följande kod längst ner i SnapShot-klassen:
privat funktion createBitmap (): void _content = new BitmapData (Math.abs (_mouseX - _originX) - 2, Math.abs (_mouseY - _originY) - 2); var bitmapMatrix: Matrix = ny matris (1, 0, 0, 1, -Math.min (_originX, _mouseX) - 1, -Math.min (_originY, _mouseY) - 1); _content.draw (_stage, bitmapMatrix); saveBitmap (); privat funktion saveBitmap (): void var encodedContent: ByteArray = PNGEncoder.encode (_content); var fileWindow: FileReference = ny FileReference (); fileWindow.save (encodedContent, "Image_" + _imageCount + ".png"); _imageCount ++;
De saveBitmap Metoden är ganska lätt att förstå. Vi kodar för BitmapData objekt och spara det på användarens hårddisk.
Vi använder _imageCount egenskap för att underlätta för användaren att spara flera bilder i rad.
Snapshot Tool är nu komplett och med bara tre rader av kod kan implementeras i något projekt.
Se till att du kör Flash Player 10 och att du har as3corelib-paketet i rätt katalog.
Jag hoppas att du haft denna snabba tips, tack för att du läste!
