Share
In deze Premium-zelfstudie leren we hoe u bitmaps in ActionScript 3 kunt bewerken om een nuttige toepassing voor het bijsnijden van afbeeldingen te maken. Blijf lezen!
Afbeelding door Swami Stream gelicentieerd onder Creative Commons.
Met behulp van de Flash-tools creëren we een aantrekkelijke interface die wordt aangedreven door verschillende ActionScript 3-klassen zoals MouseCursor, Bitmap, BitmapData, Rectangle, Point, Tween, FileReference en zelfs externe bibliotheken.
De gebruiker kan een afbeelding meerdere keren bijsnijden om later de beste optie te selecteren en deze op schijf op te slaan.
Open Flash en maak een 600 pixels breed, 400 pixels lang document. Stel de beeldsnelheid in op 24 fps.
Een goed uitziende mac-achtige interface zal onze code van stroom voorzien, dit omvat meerdere op tijdlijn gebaseerde knoppen, aangepaste cursors en meer.
Ga door naar de volgende stappen voor meer informatie over het maken van deze GUI.
Geen wetenschap op de achtergrond, maak gewoon een zwarte rechthoek van 600x400px en centreer deze in het werkgebied. U kunt ook de achtergrondkleur in de Stage-eigenschappen wijzigen.
We hebben een afbeelding nodig om bij te snijden, selecteren de gewenste afbeelding en importeren deze naar het werkvlak (Cmd + R).
Afbeelding door Swami Stream gelicentieerd onder Creative Commons.
We maken een aangepaste cursor om deze te gebruiken als feedback voor de gebruiker, zodat hij weet waar hij kan bijsnijden.
Selecteer de Rectangle Tool (R) en maak een 3px brede, 17px grote witte rechthoek.
Dupliceer de vorm (Cmd + D) en draai hem 90 graden om een kruis te vormen.
Herhaal dit proces met een 1px brede, 15 px lange zwarte rechthoek.
Converteer de uiteindelijke vorm naar MovieClip (F8) en stel de instantienaam in op cursor.
Deze knoppen verwerken secundaire acties in het gewas, deze acties zijn:
Selecteer het Primitieve gereedschap Rechthoek (R) en verander de hoekradius in 10, teken een rechthoek van 70x18px en vul deze met # 666666.
Dupliceer de vorm (Cmd + D), verklein hem naar 68x16px en verander de kleur in deze lineaire gradiënt # 222222 in # 444444. Gebruik het gereedschap Gradiënttransformatie (F) om het verloop te roteren.
Gebruik vervolgens het tekstgereedschap (T) om een label voor de knop te schrijven. Gebruik dit formaat: Lucida Grande Regular, 12pt, #CCCCCC.
Gebruik dezelfde techniek om de knoppen Annuleren en Wissen te maken.
Een goed gemaakte GUI-knop heeft 4 toestanden:
Converteer uw knoppen naar MovieClip en dubbelklik ze om de bewerkingsmodus te openen. Open het Tijdlijnpaneel (Venster> Tijdlijn).
Je zult merken dat het omhoog staat is al gemaakt, dit zijn de vormen die u hebt geconverteerd naar MovieClip.
Druk op F6 om een nieuw frame te maken en de middelste verloopverloopvulling te wijzigen in # 222222, # 5B5B5B. Dit zal het zijn Over staat.
Voor de naar beneden staat, selecteert u de middelste vorm en draait u deze verticaal om (Wijzigen> Tranform> Verticaal omdraaien).
De Raken staat is standaard het gebied met de grotere vorm, omdat het klikbare gebied dat we willen de hele knop is, het is niet nodig om hiervoor een kader te maken.
Wanneer al je knoppen gereed zijn, verlaat je de bewerkingsmodus en plaats je ze zoals getoond in de volgende screenshot. De witte tekst geeft de naam van de knopinstantie aan.
Er wordt een knoppenbalk gebruikt om de knop bijsnijden te plaatsen en te markeren.
Gebruik het gereedschap Rechthoek om een rechthoek met een lengte van 600x50 px te maken en vul dit verloop op #AFAFAF op # C4C4C4. Lijn de balk uit op de bodem van het werkgebied.
Als u een reliëfeffect wilt maken, tekent u twee lijnen van 600x1 px en plaatst u deze boven de knoppenbalk, vult u de bovenste met # 858585 en de andere met # D8D8D8.
De knop Bijsnijden zal de hoofd-ActionScript-functie starten die de bitmaps in de fase zal manipuleren.
Maak met het gereedschap Rechthoek een rechthoek van 33x6px en een 26x6px en gebruik deze om een rechte hoek te vormen.
Dupliceer de vorm en draai deze 180 graden om een vierkant te vormen.
Verplaats de gedupliceerde vorm 5 px naar boven en 5 px naar rechts.
Vul de resulterende vorm met deze verloopvulling: # 444444 tot # 222222. Gebruik het gereedschap Gradiënttransformatie om de vulling te roteren.
U kunt meer details toevoegen door een schaduw toe te voegen; dupliceer de huidige vorm en verplaats deze 1px naar beneden en 1px naar rechts.
Converteer tenslotte de vorm naar MovieClip en noem deze cropButton.
De uitsnedevorm is een afbeelding die wordt gebruikt om het gebied aan te geven dat wordt bijgesneden.
Selecteer het gereedschap Rechthoek en verander de lijnkleur in wit en de vulkleur in wit met 1% alpha (dit zal ons helpen de vorm van het gewas te slepen). Teken een vierkant van 10x10px en centreer het.
Selecteer een 1px-deel van het vierkant en verander de kleur in zwart.
Dupliceer de vorm en doe hetzelfde aan alle kanten.
Herhaal dit proces aan alle kanten.
Converteer het resultaat naar MovieClip en noem het cropShape, Markeer de Exporteren voor ActionScript doos.
Dubbelklik erop om de bewerkingsmodus te openen, maak een nieuw hoofdframe in frame 5 en roteer de vorm 180 graden.
Voeg 4 frames meer toe en verlaat de bewerkingsmodus.
Hiermee wordt het grafische gedeelte beëindigd, laten we beginnen met ActionScript!
Maak een nieuwe ActionScript 3.0-klasse (Cmd + N) en sla deze op als Main.as in je klasmap.
Met het sleutelwoord van het pakket kunt u uw code indelen in groepen die door andere scripts kunnen worden geïmporteerd. Het wordt aanbevolen deze een naam te geven die begint met een kleine letter en intercaps te gebruiken voor volgende woorden, bijvoorbeeld: mijn lessen. Het is ook gebruikelijk om ze een naam te geven via de website van uw bedrijf: com.mycompany.classesType.myClass.
In dit voorbeeld gebruiken we een enkele klasse, dus het is niet echt nodig om een klassenmap te maken.
pakket
Dit zijn de klassen die we moeten importeren voor onze klas om te werken, de importeren richtlijn maakt extern gedefinieerde klassen en pakketten beschikbaar voor uw code.
import flash.display.Sprite; import flash.events.MouseEvent; import flash.ui.Mouse; import flash.ui.MouseCursor; import flash.display.BitmapData; import flash.display.Bitmap; import flash.geom.Rectangle; import flash.geom.Point; import fl.transitions.Tween; import fl.transitions.easing.Strong; import flash.net.FileReference; import flash.utils.ByteArray; import com.adobe.images.JPGEncoder; import flash.events.Event;
Om de beelduitsnede op te slaan, gebruiken we een klasse die deel uitmaakt van de as3corelib. Volg de link en download de bibliotheek.
Hier verklaren we de klas met behulp van de klasse definitie sleutelwoord gevolgd door de naam die we voor de klas willen, onthoud dat je het bestand met deze naam moet opslaan.
De strekt keyword definieert een klasse die een subklasse van een andere klasse is. De subklasse erft alle methoden, eigenschappen en functies, op die manier kunnen we ze in onze klasse gebruiken.
public class Main breidt uit
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code om meer over hen te weten te komen.
privé var cropShape: CropShape; // Dit is een exemplaar van de cropShape die we vóór private var pointX: Number; // Deze var houdt de x-positie vast waar de uitsnedevorm wordt gestart. Private var pointY: Number; // Deze var houdt de y-positie vast waar de snijvorm wordt gestart. Private var added: Boolean; // Controleert of de uitsnedevorm zich in de stage bevindt. Private var images: Array = new Array (); // Slaat de afbeeldingen op gewassen private var bmd: BitmapData; // Een bitmap-gegevensobject, gebruikt om de hoofdafbeeldingsgegevens te manipuleren private var bmd2: BitmapData; // Een tweede bitmapgegevensobject, dit bevat de gegevens van de afbeelding die we willen opslaan. Private var croppedImage: Sprite; / / Houdt de bijgesneden afbeeldingen privé var cropThumb: int = 0; // Het aantal reeds aangemaakte duimen private var thumbPosX: Array = [5, 5, 5, 505, 505, 505]; // Slaat de x-posities van de duimen op private var thumbPosY: Array = [37, 135, 233, 37, 135, 233]; // Slaat de y-posities op van de duimen private var tween: Tween; // Een tween-object, de standaardanimatiebibliotheek in flash private var-bestandReferentie: FileReference; // Gebruikt om het bestand op te slaan naar privéschne byteArray: ByteArray; // Slaat binaire gegevens op die worden gebruikt om het bestand op te slaan naar een privé-jpg-bestand: JPGEncoder = new JPGEncoder (); // De afbeeldings-encoder private var zoomen: Boolean; // Controleert of de miniatuur is ingezoomd of uit private var currentCrop: Bitmap; / / Houdt de huidige ingezoomde miniatuur, die wordt opgeslagen prive var currentSprite: *; // Gebruikt om te weten welke duim actief is private var latestX: Number; // Controleert de nieuwste x van de ingezoomde duim. Privénieuws: nummer; // Controleert de nieuwste y van de ingezoomde duim
De constructor is een functie die wordt uitgevoerd wanneer een object wordt gemaakt op basis van een klasse, deze code is de eerste die wordt uitgevoerd wanneer u een exemplaar van een object maakt of wordt uitgevoerd met behulp van de documentklasse.
public function Main (): void
Dit zijn de luisteraars die bij de lancering worden gedefinieerd, ze voegen feitelijk Muisgerelateerde gebeurtenissen toe aan knoppen.
image.addEventListener (MouseEvent.MOUSE_DOWN, getStartPoint); image.addEventListener (MouseEvent.MOUSE_UP, stopDrawing); cropButton.addEventListener (MouseEvent.MOUSE_UP, bijsnijden); image.addEventListener (MouseEvent.MOUSE_OVER, customCursor); image.addEventListener (MouseEvent.MOUSE_OUT, removeCustomCursor); saveButton.addEventListener (MouseEvent.MOUSE_UP, saveImage); cancelButton.addEventListener (MouseEvent.MOUSE_UP, cancel); clearButton.addEventListener (MouseEvent.MOUSE_UP, clearThumbs);
Deze code verbergt de knoppen die op dit moment niet in gebruik zijn.
saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false; cursor.visible = false;
Met de volgende functie wordt de aangepaste cursor zichtbaar wanneer de muisaanwijzer zich boven de hoofdafbeelding bevindt.
persoonlijke functie customCursor (e: MouseEvent): void cursor.visible = true; Mouse.hide (); cursor.startDrag (true);
Verbergt de aangepaste cursor wanneer de muisaanwijzer de hoofdafbeelding verlaat.
private function removeCustomCursor (e: MouseEvent): void cursor.visible = false; Mouse.show (); cursor.stopDrag ();
Een zeer belangrijke functie, verkrijgt en slaat de coördinaten van de muisklik op en plaatst de cropShape-filmclip erin, de huidige waarde zal later worden gebruikt om de grootte van de uitsnedevorm te bepalen.
private function getStartPoint (e: MouseEvent): void pointX = mouseX; pointY = mouseY; if (! toegevoegd) cropShape = nieuwe CropShape (); cropShape.x = pointX; cropShape.y = pointY; addChild (cropShape); added = true; else removeChild (cropShape); cropShape = nieuwe CropShape (); cropShape.x = pointX; cropShape.y = pointY; addChild (cropShape);
Voegt een luisteraar toe aan de hoofdafbeelding om de uitsnedevorm bij muisbewegingen uit te vouwen en voegt de luisteraar toe om met de muis omhoog uit te breiden.
image.addEventListener (MouseEvent.MOUSE_MOVE, drawCropShape); cropShape.addEventListener (MouseEvent.MOUSE_UP, stopDrawing);
Breidt de cropShape uit volgens de opgeslagen coördinaten en de huidige coördinaten.
private functie drawCropShape (e: MouseEvent): void cropShape.width = mouseX - pointX; cropShape.height = mouseY - pointY;
Stopt de uitsnedevormuitbreiding en voegt enkele luisteraars toe die zullen worden gebruikt door de volgende functies.
private function stopDrawing (e: MouseEvent): void image.removeEventListener (MouseEvent.MOUSE_MOVE, drawCropShape); cropShape.addEventListener (MouseEvent.MOUSE_OVER, showHandCursor); cropShape.addEventListener (MouseEvent.MOUSE_OUT, hideHandCursor); cropShape.addEventListener (MouseEvent.MOUSE_DOWN, dragCrop); cropShape.addEventListener (MouseEvent.MOUSE_UP, stopDragCrop);
Gebruikt de klasse Mouse om de muisaanwijzer te manipuleren, deze code geeft de handcursor weer wanneer de muis boven de uitsnedevorm staat.
private function showHandCursor (e: MouseEvent): void Mouse.cursor = MouseCursor.HAND;
Herstelt origineel gedrag van muiscursor.
private function hideHandCursor (e: MouseEvent): void Mouse.cursor = MouseCursor.AUTO;
De uitsnedevorm kan worden versleept, zodat u gemakkelijk het gewenste gebied kunt selecteren.
privéfunctie dragCrop (e: MouseEvent): void cropShape.startDrag ();
Stopt het slepen met de muis omhoog.
persoonlijke functie stopDragCrop (e: MouseEvent): void cropShape.stopDrag ();
Deze functie zal de afbeelding bijsnijden, de bitmapgegevens van de afbeeldingen en de sprite-klasse gebruiken om een reeks miniaturen te maken die op een veilige manier kunnen worden opgeslagen.
bijsnijden van persoonlijke functies (e: MouseEvent): void
De volgende regels verwerken de bitmapgegevens die nodig zijn om de afbeelding bij te snijden.
bmd = nieuwe BitmapData (image.width, image.height, false, 0x00000000); // Maakt een nieuw bitmap-gegevensobject met de grootte van de hoofdafbeelding bmd.draw (afbeelding); // Kopieert de hoofdafbeeldingsgegevens naar de instantie bmd2 = nieuwe BitmapData (cropShape.width, cropShape.height, false, 0x00000000); // Maakt een nieuwe bitmap-gegevens met de werkelijke grootte van de uitsnedevorm
De volgende regel kopieert de pixels van het hoofdbeeld dat zich in de uitsnedevorm bevindt naar het bitmapgegevensobject BMP2.
De parameters werken zoals hieronder vermeld:
bmd2.copyPixels (bmd, nieuwe Rectangle (cropShape.x - image.x, cropShape.y - image.y, cropShape.width, cropShape.height), new Point (0, 0));
We laten de gebruiker zes keer bijsnijden en die voorvertoningen opslaan aan de zijkant van de hoofdafbeelding, daarvoor maken we een nieuwe bitmap die de bitmapgegevens van de bijgesneden thumbnail opslaat en dan voegen we deze toe als een sprite van 90x70px.
We voegen ook een luisteraar toe om in en uit te zoomen op de miniatuur.
if (cropThumb < 6) var bmp:Bitmap = new Bitmap(bmd2); var thumb:Sprite = new Sprite(); thumb.addChild(bmp); thumb.width = 90; thumb.height = 70; thumb.addEventListener(MouseEvent.MOUSE_UP, zoomThumb); addChild(thumb);
Naarmate we in elk gewas een nieuwe sprite maken, is de laatste sprite niet meer beschikbaar met de instantienaam, de tijd om de array te gebruiken die we eerder hebben gemaakt.
In deze array worden de gemaakte miniaturen opgeslagen om ze buiten de functie te openen.
images.push (duim);
Wanneer de gebruiker op de knop bijsnijden drukt, wordt een miniatuur gemaakt met de bijgesneden afbeelding. Deze miniatuur wordt later geanimeerd naar de zijkanten van de toepassing, afhankelijk van een variabele.
De miniatuurpositie wordt bepaald door deze variabele en de thumbPos arrays.
tween = nieuwe Tween (thumb, "x", Strong.easeOut, cropShape.x, thumbPosX [cropThumb], 0.5, true); tween = nieuwe Tween (thumb, "y", Strong.easeOut, cropShape.y, thumbPosY [cropThumb], 0.5, true); cropThumb ++; // Voegt een toe aan het aantal duimen
De volgende functie wordt gebruikt om de afbeelding op schijf op te slaan.
Eerst wordt de methode jpg.encode () gebruikt en worden de resulterende gegevens in de bytearray opgeslagen. Vervolgens wordt het object fileReference gebruikt om een opslagdialoogvenster weer te geven waarin de gebruiker het gecreëerde bestand kan hernoemen (hoewel er een standaardnaam is ingesteld).
private function saveImage (e: MouseEvent): void fileReference = new FileReference (); byteArray = jpg.encode (currentCrop.bitmapData); fileReference.save (byteArray, "Crop.jpg"); fileReference.addEventListener (Event.COMPLETE, saveComplete);
Nadat de afbeelding is opgeslagen, worden de miniaturen verwijderd uit het werkgebied en uit de array. De knoppen zijn verborgen en het hoofdbeeld keert terug.
private function saveComplete (e: Event): void for (var i: int = 0; i < images.length; i++) removeChild(images[i]); cropThumb = 0; images = []; tween = new Tween(image,"y",Strong.easeOut,image.y,stage.stageHeight / 2 - image.height / 2 - 30,0.5,true); added = false; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false;
Er is ook een annuleerknop waarmee u door de miniaturen kunt bladeren zonder ze op te slaan.
Wanneer deze knop wordt ingedrukt, worden alle miniaturen teruggezet naar de positie en wordt de hoofdafbeelding teruggebracht om meer bij te snijden (indien mogelijk).
privéfunctie annuleren (e: MouseEvent): void tween = nieuwe Tween (currentSprite, "width", Strong.easeOut, currentSprite.width, 90.0.5, true); tween = nieuwe Tween (currentSprite, "height", Strong.easeOut, currentSprite.height, 70.0.5, true); tween = nieuwe Tween (currentSprite, "x", Strong.easeOut, currentSprite.x, latestX, 0.5, true); tween = nieuwe Tween (currentSprite, "y", Strong.easeOut, currentSprite.y, latestY, 0.5, true); tween = nieuwe Tween (afbeelding, "y", Strong.easeOut, image.y, stage.stageHeight / 2 - image.height / 2 - 30.0.5, true); added = false; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false; cropButton.visible = true; ingezoomd = false;
Als de gebruiker de zes keer heeft toegestaan die door de app is toegestaan, en geen daarvan is het verwachte resultaat, is er altijd een manier om nog vaker bij te snijden. Dit is de taak die met de knop Clear wordt bereikt.
Het verwijdert alle miniaturen uit het werkgebied en uit de array, retourneert de hoofdafbeelding naar het werkvlak en verbergt de ongebruikte knoppen.
private function clearThumbs (e: MouseEvent): void for (var i: int = 0; i < images.length; i++) removeChild(images[i]); cropThumb = 0; images = []; tween = new Tween(image,"y",Strong.easeOut,image.y,stage.stageHeight / 2 - image.height / 2 - 30,0.5,true); added = false; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false;
We maken in deze tutorial gebruik van de documentklasse, als je niet weet hoe je het moet gebruiken of een beetje in de war bent, lees dan deze QuickTip.
Het uiteindelijke resultaat is een nuttige toepassing voor het bijsnijden van afbeeldingen die u leert hoe u bitmaps kunt manipuleren om ze aan te passen, en bijna zonder het te weten, hebt u ook geleerd hoe u een zeer mooie interface kunt maken en implementeren..
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
Accentsconagua