Share
In deze Snelle tip laat ik je zien hoe je een Shapshot-tool maakt die een deel van de stage kopieert en het resultaat opslaat als een PNG-afbeelding.
Dit is het eindresultaat. Klik gewoon op het werkgebied en sleep vervolgens met de muis om een foto te maken.
Maak een nieuwe map voor dit project en geef deze elke gewenste naam. Ga naar Github en download de nieuwste versie van de as3corelib Klasse. Voor deze Quick Tip heb ik versie .93 gebruikt. Pak het ZIP-bestand uit en ga naar as3corelib-.93> src.
Kopieer de com map naar uw nieuw gemaakte map. Dit pakket heeft een zeer nuttig PNGEncoder Klasse die we zullen gebruiken voor het coderen van de
momentopname in een PNG-afbeelding.
Start Flash en maak een nieuw Flash-document. Zorg ervoor dat het is ingesteld om te publiceren naar Actionscript 3.0 en Flash Player 10. U kunt dit controleren in de eigenschappen
paneel of door te selecteren Instellingen publiceren ... en klik vervolgens op de Flash tab.
We hebben wat inhoud in het Flash-bestand nodig om te controleren of de snapshot-tool naar behoren werkt. We gaan een aantal cirkels maken en deze willekeurig rond het podium plaatsen. Maak een nieuwe documentklasse met de naam Circles.as en voeg de volgende code toe. Vergeet niet om de klasse aan het Flash-bestand te koppelen door te schrijven cirkels in de Klasse veld in de de eigenschappen Paneel.
pakket import flash.display.Shape; import flash.display.Sprite; public class Circles breidt Sprite uit private var _circleCount: int = 20; public function Circles () makeCircles (); private function 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);
Onze snapshot-functie werkt echter met elke fase-inhoud, dus denk niet dat je jezelf moet beperken tot eenvoudige vormen!
Maak een nieuw Class-bestand en geef het een naam SnapShot.as. Dit is de klasse die alle methoden bevat die worden gebruikt om een momentopname te maken. Voeg de volgende code toe aan de klas.
pakket import flash.display.Stage; public class SnapShot private var _stage: Stage; publieke functie Snapshot () public function activate (stage: Stage): void _stage = stage;
Voeg de volgende regels toe aan de cirkels Klasse. Wij gebruiken de activeren() methode om een verwijzing naar het werkgebied door te geven aan het Momentopname Klasse. We doen dit om toegang te krijgen tot de inhoud van het werkgebied.
pakket import flash.display.Shape; import flash.display.Sprite; public class Circles breidt Sprite uit private var _circleCount: int = 20; private var _snapshot: SnapShot; public function Circles () makeCircles (); _snapshot = nieuwe SnapShot (); _snapshot.activate (trap); private function 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);
Vouw het Momentopname Klasse om de volgende methoden op te nemen. Deze methoden worden gebruikt om het grenzenframe te tekenen, waarmee gebruikers kunnen selecteren welk deel van de fase naar de momentopname wordt gekopieerd.
pakket import flash.display.Shape; import flash.display.Stage; import flash.events.Event; import flash.events.MouseEvent; public class SnapShot private var _stage: Stage; privé var _ boundary: Shape; privé var _originX: int; private var _originY: int; privé var _mouseX: int; private var _mouseY: int; openbare functie SnapShot () openbare functie activeren (fase: Stage): void _stage = stage; addMouseListeners (); private function addMouseListeners (): void _stage.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _stage.addEventListener (MouseEvent.MOUSE_UP, onMouseUp); private function onMouseDown (e: MouseEvent): void _stage.addEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); // Deze waarden worden later gebruikt als startpunt voor de grens. _originX = _stage.mouseX; _originY = _stage.mouseY; private function drawBoundaries (e: MouseEvent): void if (_boundary == null) _boundary = new Shape (); clearBoundaries () // Dit is om de waarde mouseY binnen de limieten van het werkgebied te houden. _mouseY = Math.max (Math.min (_stage.mouseY, _stage.stageHeight), 0); // Dit is om de mouseX-waarde binnen de limieten van het werkgebied te houden. _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); // Deze code zorgt ervoor dat we altijd van linksboven naar rechtsonder tekenen. _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 (); private function onMouseUp (e: Event): void _stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); clearBoundaries ();
We beginnen met het controleren of de gebruiker op de knop heeft geklikt Stadium. Als hij op het podium klikt, beginnen we het drawBoundaries () methode wanneer de muis wordt verplaatst. Deze methode trekt de grenzen; alles wat binnen de dunne zwarte lijn valt, zal deel uitmaken van de momentopname. Wanneer de gebruiker de muis loslaat, stoppen we met het controleren op muisbewegingen.
Importeer de BitmapData en Matrix Klassen en voeg de _inhoud eigenschap aan de lijst met privé-eigendommen.
pakket 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; privé var _ boundary: Shape; private var _content: BitmapData; privé var _originX: int; private var _originY: int; privé var _mouseX: int; private var _mouseY: int;
Voeg de volgende code toe aan de onderkant van de klas:
private function onMouseUp (e: Event): void _stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawBoundaries); clearBoundaries (); createBitmap (); private function createBitmap (): void // We voegen de -2 toe om te compenseren voor de grenslijn. _content = nieuwe BitmapData (Math.abs (_mouseX - _originX) - 2, Math.abs (_mouseY - _originY) - 2); // De -1 wordt om dezelfde reden toegevoegd, om te voorkomen dat de regel in de uiteindelijke afbeelding verschijnt. var bitmapMatrix: Matrix = nieuwe matrix (1, 0, 0, 1, -Math.min (_originX, _mouseX) - 1, -Math.min (_originY, _mouseY) - 1); _content.draw (_stage, bitmapMatrix);
De createBitmap () methode maakt een nieuw BitmapData object met de breedte en de hoogte van het inhoudsgebied binnen de grens. De Matrix variabele overgangen (beweegt) de afbeelding zodat wanneer de trek() methode wordt genoemd, het begint te kopiëren vanuit de linkerbovenhoek van het grensgebied.
Om de bitmap op te slaan, moeten we verschillende klassen importeren.
Accentsconagua
ByteArray Klasse wordt gebruikt om het te coderen BitmapData voorwerp.PNGEncoder Klasse wordt gebruikt om de gecodeerde gegevens om te zetten in een PNG-afbeelding.FileReference Klasse wordt gebruikt om de afbeelding op te slaan op de harde schijf van de gebruiker.We hebben ook een toegevoegd _imageCount eigenschap die we gebruiken om de afbeeldingsnamen te verhogen.
pakket 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; privé var _ boundary: Shape; private var _content: BitmapData; privé var _originX: int; private var _originY: int; privé var _mouseX: int; private var _mouseY: int; privé var _imageCount: int = 1;
Voeg de volgende code toe aan de onderkant van de SnapShot-klasse:
private function createBitmap (): void _content = new BitmapData (Math.abs (_mouseX - _originX) - 2, Math.abs (_mouseY - _originY) - 2); var bitmapMatrix: Matrix = nieuwe 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 ++;
De saveBitmap methode is redelijk eenvoudig te begrijpen. We coderen voor de BitmapData object en sla het op op de harde schijf van de gebruiker.
Wij gebruiken de _imageCount eigenschap om het voor de gebruiker gemakkelijker te maken om meerdere afbeeldingen op een rij te bewaren.
De Snapshot-tool is nu voltooid en met slechts drie regels code kan in elk project worden geïmplementeerd.
Zorg ervoor dat je Flash Player 10 gebruikt en dat je het as3corelib-pakket in de juiste map hebt staan.
Ik hoop dat je deze snelle tip leuk vond, bedankt voor het lezen!
