Quick Tips: Opprette et stillbilde Tool i Flash
Del
Del
to
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne hurtig Tips, skal jeg vise deg hvordan du oppretter en Shapshot Tool som kopierer en del av scenen og lagrer resultatet som en PNG-bilde.
Endelig resultat Forhåndsvisning
Dette er det endelige resultatet. Bare klikk på scenen og deretter dra musen for å ta et øyeblikksbilde
Trinn 1:. Last ned as3corelib Class
Opprett en ny mappe for dette prosjektet og gi den det navnet du ønsker . Gå til Github og laste ned den nyeste versjonen av as3corelib Kopier com katalog til den nyopprettede mappen. Denne pakken har en meget nyttig PNGEncoder klasse som vi vil bruke for koding av Launch Flash og opprette en ny Flash-dokument. Sørg for at det er satt til å publisere til Actionscript 3.0 og Flash Player 10. Du kan sjekke dette i egenskaper Vi trenger noe av innholdet i Flash-filen for å kontrollere om snapshot verktøyet fungerer. Vi kommer til å lage noen sirkler og legg dem tilfeldig rundt på scenen. Opprett et nytt dokument klasse som heter Circles.as Hotell og legge til følgende kode. Husk å knytte klasse til Flash-filen ved å skrive Circles Vår snapshot-funksjonen vil fungere med alle scene innhold, skjønt, så ikke føler at du må begrense deg til enkle figurer Opprett en ny klasse fil og gi den et navn på SnapShot.as Legg til følgende linjer med kode til Circles Utvid SnapShot klasse til å omfatte følgende metoder. Disse metodene brukes til å trekke grensene ramme, som gjør at brukerne kan velge hvilken del av scenen vil bli kopiert til øyeblikksbildet Vi starter med å sjekke om brukeren har klikket på scenen. Når han klikker på scenen starter vi kjører drawBoundaries () -metoden når musen beveges. Denne metoden trekker grensene; uansett faller innenfor den tynne svarte linjen vil være en del av snapshot. Når brukeren slipper muse vi slutter å sjekke for musebevegelser Importer BitmapData og Matrix Klasser og tilsett _content eiendom til listen over private eiendommer. Legg til følgende kode i bunnen av Klasse: createBitmap () metoden skaper en ny BitmapData objekt med bredden og høyden av innholdet området innenfor grensen. matrix Hvis du vil lagre bitmap vi trenger å importere flere Klasser Vi har også lagt en _imageCount eiendom som vi bruker til å øke bildenavnene. Legg til følgende kode i bunnen av SnapShot Klasse: saveBitmap metoden er ganske lett å forstå. Vi kode BitmapData objekt og lagre det til brukerens harddisk. Snapshot Tool er nå fullført, og med bare tre linjer med kode kan implementeres i ethvert prosjekt. Pass på at du kjører Flash Player 10, og at du har den as3corelib pakken i riktig katalog. Jeg håper du likte denne Quick Tips, takk for lesing!
Class. For dette Quick Tips har jeg brukt versjon 0,93. Pakk ut ZIP-filen og gå til as3corelib-0,93 > src
.
snapshot inn et PNG-bilde
Trinn 2:. Setup din Flash File
panelet eller ved å velge Publiser Innstillinger ... Hotell og deretter klikke på Flash
kategorien
Trinn 3:. Content for lengre opphold
i Class
feltet i Egenskaper
Panel.
pakke {import flash.display.Shape; import flash.display.Sprite; public class Circles strekker Sprite {private Var _circleCount: int = 20; offentlig funksjon Circles () {makeCircles (); } Private funksjon makeCircles (): void {for (var i: int = 0; i < _circleCount, jeg ++) {var sirkel: 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 (sirkel); }}}}
Trinn 4: Lag SnapShot Class
. Dette er den klassen som vil holde alle de metoder som brukes for å ta et øyeblikksbilde. Legg til følgende kode i klasse
pakke {import flash.display.Stage.; public class SnapShot {private Var _stage: Stage; offentlig funksjon stillbilde () {} offentlig funksjon activate (etappe: Stage): void {_stage = scenen; }}}
Class. Vi bruker activate () metode for å passere en referanse til Stage sammen til øyeblikksbildet Class. Vi gjør dette for å så vi kan få tilgang til innholdet på Stage
pakke {import flash.display.Shape.; import flash.display.Sprite; public class Circles strekker Sprite {private Var _circleCount: int = 20; private Var _snapshot: Fotografi; offentlig funksjon Circles () {makeCircles (); _snapshot = new stillbilde (); _snapshot.activate (scene); } Private funksjon makeCircles (): void {for (var i: int = 0; i < _circleCount, jeg ++) {var sirkel: 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 (sirkel); }}}}
Trinn 5: Tegning grensene
pakke {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; offentlig funksjon stillbilde () {} offentlig funksjon activate (etappe: Stage): void {_stage = scenen; addMouseListeners (); } Private funksjon addMouseListeners (): void {_stage.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _stage.addEventListener (MouseEvent.MOUSE_UP, onMouseUp); } Private funksjon onMouseDown (e: MouseEvent): void {_stage.addEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); //Disse verdiene benyttes senere som et startpunkt for grensen. _originX = _stage.mouseX; _originY = _stage.mouseY; } Private funksjon drawBoundaries (e: MouseEvent): void {if (_boundary == null) {_boundary = new Shape (); } ClearBoundaries () //Dette er å gjøre mousey verdi opphold innenfor rammene av Stage. _mouseY = Math.max (Math.min (_stage.mouseY, _stage.stageHeight), 0); //Dette er å gjøre mouseX verdi opphold innenfor rammene av 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); //Denne koden gjør at vi alltid trekke fra øverst til venstre punkt 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); } Private funksjon clearBoundaries (): void {_boundary.graphics.clear (); } Private funksjon onMouseUp (e: Hendelses): void {_stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); clearBoundaries (); }}}
Trinn 6:. Stage innhold til Bitmap
pakke {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;
privat funksjon onMouseUp (e: Hendelses): void {_stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); clearBoundaries (); createBitmap ();} private funksjon createBitmap (): void {//Vi legger til -2 for å oppveie for grenselinjen. _content = new BitmapData (Math.abs (_mouseX - _originX) - 2, Math.abs (_mouseY - _originY) - 2); //Den -1 legges av samme grunn, til å holde linjen vises i det endelige bildet. Var bitmapMatrix: Matrix = new Matrix (1, 0, 0, 1, -Math.min (_originX, _mouseX) - 1, -Math.min (_originY, _mouseY) - 1); _content.draw (_stage, bitmapMatrix);}
variable overganger (trekk) bildet slik at når trekningen () metoden kalles det begynner å kopiere fra øverste venstre hjørne av grenseområdet.
Trinn 7:. Lagre Bitmap
ByteArray klassen brukes til å kode BitmapData objekt <. br>
Den PNGEncoder Class brukes til å konvertere de kodede data inn i et PNG-bilde.
FileReference Class brukes til å lagre bildet til brukere harddisken.
pakke {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;
privat funksjon 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 funksjon saveBitmap (): void {var encodedContent: ByteArray = PNGEncoder.encode (_content); Var fileWindow: FileReference = new FileReference (); fileWindow.save (encodedContent, "Image_" + _imageCount + "PNG"); _imageCount ++;}
Vi bruker _imageCount eiendommen for å gjøre det enklere for brukeren å lagre flere bilder på rad.
Konklusjon