Share
I denne Premium-opplæringen lærer vi hvordan du manipulerer Bitmaps i ActionScript 3 for å lage et nyttig bildebeskjæringsprogram. Fortsett å lese!
Bilde av Swami Stream lisensiert under Creative Commons.
Ved hjelp av Flash Tools vil vi opprette et attraktivt grensesnitt som vil bli drevet av flere ActionScript 3-klasser som MouseCursor, Bitmap, BitmapData, Rectangle, Point, Tween, FileReference og til og med eksterne biblioteker.
Brukeren vil kunne beskjære et bilde flere ganger for senere å velge det beste alternativet og lagre det på disk.
Åpne Flash og lag et 600 piksler bredt, 400 piksler høyt dokument. Still inn rammefrekvensen til 24fps.
Et flott mac-lignende grensesnitt vil melde koden vår, dette innebærer flere tidslinjebaserte knapper, egendefinerte markører og mer.
Fortsett til de neste trinnene for å lære hvordan du oppretter denne GUI.
Ingen vitenskap i bakgrunnen, bare opprett et svart rektangel på 600x400px og senter det i scenen. Du kan også endre bakgrunnsfargen i scenegenskapene.
Vi trenger et bilde for å beskjære, velg ønsket bilde og importer det til scenen (Cmd + R).
Bilde av Swami Stream lisensiert under Creative Commons.
Vi lager en tilpasset markør for å bruke den som tilbakemelding til brukeren, og lar ham få vite hvor han kan beskjære.
Velg Rectangle Tool (R) og lage et 3px bredt, 17px høyt hvitt rektangel.
Dupliser formen (Cmd + D) og roter den 90 grader for å danne et kryss.
Gjenta denne prosessen med et 1 px bredt, 15 px høyt svart rektangel.
Konverter den endelige formen til MovieClip (F8) og angi sitt forekomstnavn til markør.
Disse knappene håndterer sekundære handlinger basert på avlingen, disse handlingene er:
Velg Rectangle Primitive Tool (R) og endre hjørneradius til 10, tegne et 70x18px rektangel og fyll det med # 666666.
Dupliser formen (Cmd + D), resize den til 68x16px og endre fargen til denne lineære gradienten # 222222 til # 444444. Bruk Gradient Transform Tool (F) for å rotere graden.
Deretter bruker du tekstverktøyet (T) til å skrive en etikett for knappen. Bruk dette formatet: Lucida Grande Regular, 12pt, #CCCCCC.
Bruk samme teknikk for å opprette Avbryt og Slett-knappene.
En godt laget GUI-knapp har 4 stater:
Konverter knappene dine til MovieClip og dobbeltklikk dem for å gå inn i redigeringsmodus. Åpne tidslinjepanelet (Vindu> Tidslinje).
Du vil legge merke til at Opp Status er allerede opprettet, dette er de figurene du konverterte til MovieClip.
Trykk F6 for å opprette en ny ramme og endre senterformgradgradientfyllingen til # 222222, # 5B5B5B. Dette vil være Over stat.
For Ned tilstand, velg midtformen og vri den vertikalt (Modifiser> Tranform> Flip Vertical).
De Truffet tilstand er som standard, jo større formområde, da det klikkbare området vi vil ha er hele knappen, er det ikke nødvendig å lage en ramme for dette.
Når alle knappene er klare, må du gå ut av redigeringsmodus og plassere dem som vist på følgende skjermbilde. Den hvite teksten indikerer knappens forekomstnavn.
En knappestang brukes til å plassere og markere avlingsknappen.
Bruk rektangulærverktøyet til å lage et 600x50 px rektangel og fyll det denne gradientfyllingen #AFAFAF til # C4C4C4. Juster stangen i bunnen av scenen.
For å lage en preget effekt trekker du to 600x1px linjer og legger dem over knappestangen, fyll den øverste med # 858585 og den andre med # D8D8D8.
Crop-knappen starter Main ActionScript-funksjonen som vil manipulere bitmapene i scenen.
Med rektangulærverktøyet lager du en 33x6px og en 26x6px rektangler og bruker dem til å danne en riktig vinkel.
Dupliser formen og drei den 180 grader for å danne en firkant.
Flytt duplisert form 5px opp og 5px til høyre.
Fyll den resulterende formen med denne gradientfyllingen: # 444444 til # 222222. Bruk Gradient Transform Tool til å rotere fyllingen.
Du kan legge til flere detaljer ved å legge til en skygge; dupliser gjeldende form og flytt den 1px ned og 1px til høyre.
Til slutt konvertere formen til MovieClip og gi den navnet cropButton.
Beskjæringsformen er et bilde som skal brukes til å indikere området som skal beskjæres.
Velg rektangulærverktøyet og endre slagfargen til hvitt og fyll farge til hvitt med 1% alfa (dette vil hjelpe oss med å dra beskjæreformen). Tegn en 10x10px firkant og senter den.
Velg en 1px del av torget og endre fargen til svart.
Dupliser formen og gjør det samme på hele siden.
Gjenta denne prosessen på alle sider.
Konverter resultatet til MovieClip og navnet på det cropShape, merk av Eksporter for ActionScript eske.
Dobbeltklikk det for å gå inn i redigeringsmodus, opprett en ny Keyframe i ramme 5 og roter formen 180 grader.
Legg til 4 rammer mer og avslutt redigeringsmodus.
Dette slutter den grafiske delen, la oss starte med ActionScript!
Opprett en ny (Cmd + N) ActionScript 3.0-klasse og lagre den som Main.as i klassemappen din.
Pakkeordet gir deg mulighet til å organisere koden din i grupper som kan importeres av andre skript. Det anbefales å nevne dem med en liten bokstav og bruk sammenkoblinger for etterfølgende ord, for eksempel: timene mine. Det er også vanlig å navngi dem ved å bruke bedriftens nettsted: com.mycompany.classesType.myClass.
I dette eksemplet bruker vi en enkelt klasse, så det er egentlig ikke et behov for å lage en klassemappe.
pakke
Dette er klassene vi må importere for vår klasse for å jobbe, importere Direktivet gir eksternt definerte klasser og pakker tilgjengelig for koden din.
importer flash.display.Sprite; importer flash.events.MouseEvent; importere flash.ui.Mouse; importer flash.ui.MouseCursor; importer flash.display.BitmapData; importer flash.display.Bitmap; importer flash.geom.Rectangle; importer flash.geom.Point; importere fl.transitions.Tween; importere fl.transitions.easing.Strong; importer flash.net.FileReference; importere flash.utils.ByteArray; importer com.adobe.images.JPGEncoder; importere flash.events.Event;
For å lagre bildeavlingen bruker vi en klasse som er en del av as3corelib. Følg lenken og last ned biblioteket.
Her erklærer vi klassen ved hjelp av klasse definisjon søkeord etterfulgt av navnet vi ønsker for klassen, husk at du må lagre filen ved hjelp av dette navnet.
De strekker Søkeord definerer en klasse som er en underklasse av en annen klasse. Underklassen arver alle metodene, egenskapene og funksjonene, slik at vi kan bruke dem i vår klasse.
offentlig klasse Main utvider Sprite
Dette er variablene vi skal bruke, les kommentarene i koden for å finne ut mer om dem.
privat var cropShape: CropShape; // Dette er en forekomst av cropShape vi opprettet før private var pointX: Number; // Denne varen vil holde x-posisjonen der skjæreformen startes privat var pointY: Number; // Denne varen vil holde y-posisjonen der beskjæreformen er startet, privat var lagt til: Boolsk; // Kontrollerer om beskjæreformen er i scenen private varbilder: Array = new Array (); // Lagrer bildene avlinger private var bmd: BitmapData; // En bitmap dataobjekt, som brukes til å manipulere hovedbildedataene private var bmd2: BitmapData; // En andre bitmap dataobjekt, denne vil holde dataene på bildet vi vil lagre private var croppedImage: Sprite; // Holder de beskjærte bildene private var cropThumb: int = 0; // Antall tommelen som allerede er opprettet private var thumbPosX: Array = [5, 5, 5, 505, 505, 505]; // Lagrer x-stillingene til tommelen private var thumbPosY: Array = [37, 135, 233, 37, 135, 233]; // Lagrer y-posisjonene til tommelen private var-tween: Tween; // En tweenobjekt, standard animasjonsbiblioteket i flash private var fileReference: FileReference; // Brukes til å lagre filen på disken privat var byteArray: ByteArray; // Lagrer binære data, brukes til å lagre filen på disken privat var jpg: JPGEncoder = ny JPGEncoder (); // Bildekoderen privat var zoomet: Boolsk; // Kontrollerer om miniatyrbildet er zoomet inn eller ut privat var currentCrop: Bitmap; // Holder gjeldende zoomte miniatyrbildet, den som vil bli lagret privat var nåværendeSkjul: *; // Viste å vite hvilken tommel er aktiv, privat var latestX: Number; // Kontrollerer siste x av den zoomede tommelen privat var sisteY: Nummer; // Kontrollerer siste y av den zoomede tommelen
Konstruktøren er en funksjon som kjører når et objekt er opprettet fra en klasse, denne koden er den første som skal utføres når du lager en forekomst av et objekt eller kjører ved hjelp av dokumentklassen.
offentlig funksjon Main (): void
Dette er lytterne som vil bli definert ved lansering, de legger i utgangspunktet musrelaterte hendelser til knapper.
image.addEventListener (MouseEvent.MOUSE_DOWN, getStartPoint); image.addEventListener (MouseEvent.MOUSE_UP, stopDrawing); cropButton.addEventListener (MouseEvent.MOUSE_UP, crop); image.addEventListener (MouseEvent.MOUSE_OVER, customCursor); image.addEventListener (MouseEvent.MOUSE_OUT, removeCustomCursor); saveButton.addEventListener (MouseEvent.MOUSE_UP, saveImage); cancelButton.addEventListener (MouseEvent.MOUSE_UP, avbryt); clearButton.addEventListener (MouseEvent.MOUSE_UP, clearThumbs);
Denne koden skjuler knappene som ikke er i bruk for øyeblikket.
saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false; cursor.visible = false;
Følgende funksjon gjør den egendefinerte markøren synlig når musepekeren er over hovedbildet.
privat funksjon customCursor (e: MouseEvent): void cursor.visible = true; Mouse.hide (); cursor.startDrag (true);
Skjuler egendefinert markør når musepekeren forlater hovedbildet.
privat funksjon removeCustomCursor (e: MouseEvent): void cursor.visible = false; Mouse.show (); cursor.stopDrag ();
En svært viktig funksjon, får og lagrer museklikkoordinatene og plasserer cropShape movieclip i dem, den nåværende verdien vil bli brukt senere for å bestemme størrelsen på beskjæreformen.
privat funksjon getStartPoint (e: MouseEvent): void pointX = mouseX; pointY = mouseY; hvis (! lagt til) cropShape = new CropShape (); cropShape.x = pointX; cropShape.y = pointY; addChild (cropShape); lagt til = sant; annet removeChild (cropShape); cropShape = nytt CropShape (); cropShape.x = pointX; cropShape.y = pointY; addChild (cropShape);
Legger til en lytter i hovedbildet for å utvide beskjæringsformen på musebevegelsen og legger lytteren til å slutte å utvide på musen opp.
image.addEventListener (MouseEvent.MOUSE_MOVE, drawCropShape); cropShape.addEventListener (MouseEvent.MOUSE_UP, stopDrawing);
Utvider cropShape etter de lagrede koordinatene og de nåværende.
privat funksjon drawCropShape (e: MouseEvent): void cropShape.width = mouseX - pointX; cropShape.height = mouseY - pointY;
Stopper utbyggingen av beskjæreform og legger til noen lyttere som vil bli brukt av de neste funksjonene.
privat funksjon 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);
Bruker musklassen til å manipulere musemarkøren, denne koden vil vise håndmarkøren når musen er over beskjæreformen.
privat funksjon showHandCursor (e: MouseEvent): void Mouse.cursor = MouseCursor.HAND;
Gjenoppretter musepekerenes opprinnelige oppførsel.
privat funksjon hideHandCursor (e: MouseEvent): void Mouse.cursor = MouseCursor.AUTO;
Beskjæringsformen vil bli slepbar, dette vil hjelpe til med å velge området vi vil ha lett.
privat funksjon dragCrop (e: MouseEvent): void cropShape.startDrag ();
Stopper dra på musen opp.
privat funksjon stopDragCrop (e: MouseEvent): void cropShape.stopDrag ();
Denne funksjonen håndterer bildet beskjæring, ved hjelp av bildene bitmap data og sprite klassen for å lage en serie av miniatyrbilder som vil være elegant å lagre.
privat funksjon avling (e: MouseEvent): void
De neste linjene håndterer bitmapdataene som kreves for å beskjære bildet.
bmd = ny BitmapData (image.width, image.height, false, 0x00000000); // Oppretter et nytt bitmap dataobjekt ved hjelp av størrelsen på hovedbildet bmd.draw (bilde); // Kopierer hovedbildedataene til forekomsten bmd2 = ny BitmapData (cropShape.width, cropShape.height, false, 0x00000000); // Oppretter en ny bitmap-data ved hjelp av den faktiske størrelsen på beskjæreformen
Neste linje kopierer pikslene til hovedbildet som er plassert i beskjæringsformposisjonen til bitmapdataobjektet BMP2.
Parametrene fungerer som beskrevet nedenfor:
bmd2.copyPixels (bmd, nytt rektangel (cropShape.x - image.x, cropShape.y - image.y, cropShape.width, cropShape.height), nytt punkt (0, 0));
Vi skal la brukeren beskjære seks ganger og lagre forhåndsvisninger på siden av hovedbildet, for det lager vi en ny bitmap som lagrer bitmapdataene på den beskårne miniatyrbilden, og vi legger den til som en 90x70px sprite.
Vi legger også til en lytter for å zoome inn og ut miniatyrbildet.
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);
Når vi lager en ny sprite i hver avling, vil den siste sprite være utilgjengelig ved å bruke forekomstnavn, tid til å bruke oppsettet vi opprettet før.
Dette arrayet lagrer de opprettede miniatyrbildene for å få tilgang til dem utenfor funksjonen.
images.push (tommel);
Når brukeren trykker på beskjæringsknappen, opprettes et miniatyrbilde ved hjelp av det beskårne bildet, blir dette miniatyrbildet animert senere på sidene av programmet, avhengig av en variabel.
Miniatyrposisjonen bestemmes av denne variabelen og thumbPos arrays.
tween = ny Tween (tommel, "x", Strong.easeOut, cropShape.x, thumbPosX [cropThumb], 0.5, true); tween = ny Tween (tommel, "y", Strong.easeOut, cropShape.y, thumbPosY [cropThumb], 0.5, true); cropThumb ++; // Legger til en til antall tommelfinger
Den neste funksjonen brukes til å lagre bildet på disken.
Først bruker den metoden jpg.encode () og lagrer de resulterende dataene til byte-arrayet, så brukes filenReference-objektet til å vise en lagringsdialog hvor brukeren kan endre navn på filen som er opprettet (selv om et standardnavn er angitt).
privat funksjon saveImage (e: MouseEvent): void fileReference = new FileReference (); byteArray = jpg.encode (currentCrop.bitmapData); fileReference.save (byteArray, "Crop.jpg"); fileReference.addEventListener (Event.COMPLETE, saveComplete);
Når bildet er lagret, blir miniatyrbildene fjernet fra scenen og fra gruppen. Knappene er skjult og hovedbildet returnerer.
privat funksjon 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;
Det er også en avbryt-knapp som lar deg bla gjennom miniatyrbildene uten å lagre noen av dem.
Når denne knappen trykkes, returneres alle miniatyrbildene til postering og bringer hovedbildet tilbake for å beskjære mer (hvis mulig).
privat funksjon avbryte (e: MouseEvent): void tween = ny Tween (currentSprite, "width", Strong.easeOut, currentSprite.width, 90,0.5, true); tween = ny Tween (currentSprite, "height", Strong.easeOut, currentSprite.height, 70,0.5, true); tween = ny Tween (currentSprite, "x", Strong.easeOut, currentSprite.x, latestX, 0.5, true); tween = ny Tween (currentSprite, "y", Strong.easeOut, currentSprite.y, latestY, 0.5, true); tween = ny Tween (image, "y", Strong.easeOut, image.y, stage.stageHeight / 2 - image.height / 2 - 30,0.5, true); lagt til = false; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false; cropButton.visible = true; zoomet = false;
Hvis brukeren har beskjæret de seks ganger tillatt av appen, og ingen av dem er det forventede resultatet, er det alltid en måte å beskjære enda flere ganger på. Dette er oppgaven som den klare knappen vil oppnå.
Det fjerner alle miniatyrer fra scenen og fra matrisen, returnerer hovedbildet til scenen og skjuler de ubrukte knappene.
privat funksjon 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;
Vi bruker dokumentklassen i denne opplæringen, hvis du ikke vet hvordan du bruker den eller er litt forvirret, vennligst les denne QuickTip.
Det endelige resultatet er en nyttig Image Cropping-applikasjon som lærer deg hvordan du manipulerer bitmaps for å endre dem, og nesten uten å vite det, lærte du også å lage og implementere et veldig fint grensesnitt.
Jeg håper du likte denne opplæringen, takk for å lese!
Accentsconagua