Create en Basic Drawing Application i Flash
20
Del
4
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble første gang utgitt i august 2009.
I denne opplæringen, vil vi lage en tegning søknad med grunnleggende funksjoner og et brukervennlig grensesnitt. Føler kunstnerisk? Så la oss gå ..
Trinn 1: Oversikt
Denne applikasjonen vil inneholde en rekke verktøy som blyant, viskelær, tekst verktøyet, og også mulighet for å lagre tegningen i PNG-format ved hjelp av Adobes PNG Encoder
Trinn 2:. Sette opp
Åpne Flash og opprette en ny Flash-fil (Actionscript 3)
.
Angi scenen størrelse til 600x350px og bildefrekvensen til 25fps
Trinn 3:. Board
Tegn et 600x290px hvitt rektangel og konvertere den til MovieClip. Sette sitt eksempel navn til "board" og justere den til øverst til venstre på scenen.
Dette vil være et område hvor vi vil være i stand til å tegne.
Trinn 4: Verktøy Panel
Lag en 600px bredt 60px høy grå (#DFDFDF) rektangel og justere den til bunnen av scenen. Dette vil være vår bakgrunn for Verktøy Panel
Trinn 5:. Verktøy Icons
Jeg kommer ikke til å dekke etableringen av verktøy ikoner siden det ikke er intensjonen av turorial, likevel, kan du se hvordan de er laget i Fla filen inkludert i Kilden.
Som du ser på bildet, vi kommer til å bruke to ikoner, en i en grå tone og den andre i fargen.
Konverter grå blyantikonet til en knapp (F8) og gi den navnet "pencilTool", dobbeltklikk for å redigere den og legge til en keyframe (F6) i "over" tilstand. Her er der vi kommer til å sette farge versjon av ikonet.
Til slutt, legge til et nøkkelbilde i "hit" tilstand, og tegne et 30x30px firkant for å fungere som knappens hit området.
< p> Gjenta denne prosessen med alle dine verktøy ikonene, ikke glem å gi dem de riktige forekomsten navn (eraserTool, textTool, saveButton, clearTool).
For å vise aktiv verktøyikonet, vi er kommer til å bruke den fargen versjon av ikonet og plassere den i samme posisjon for knappen vi laget før. De forekomstnavn vil være "blyant", "viskelær" og "tekst"
Vi vil skjule disse ikonene senere ved hjelp av Action
Trinn 6:.. Save Dialog Anmeldelser
Når vi bruker lagringsalternativ vi kommer en "lagre vellykket" melding for å vise.
Lag en 600x350px svart rektangel med 50% alfa å bruke som bakgrunn.
Legg en svart avrundet rektangel i midten med på lagre knappen ikon og litt tekst som indikerer at lagringen er fullført.
Lag en lukkeknapp og juster den i øverste venstre for avrundet rektangel, name it "closeBtn ". Som du kan forestille deg, vil denne knappen lukke Lagre Dialog.
Konverter alle elementene til en enkelt MovieClip og merk den "Export for Action" boksen. Sett Class tekstfeltet til «SaveDialog"
Vi vil bruke denne klassen når brukeren trykker på SaveButton og lagringen er fullført
Trinn 7:.. Størrelse Panel Anmeldelser
panelstørrelsen er området der du kan endre størrelsen på blyant, viskelær og tekstverktøyet. Du kan gjøre det ved å klikke i panelet området eller oval inne i den.
Velg rektangel Primitive Tool, satt hjørnet radius på fire og lage en #EFEFEF 80x50px rektangel. Konvertere den til en MovieClip og gi den navnet "sizePanel"
Åpne Filters panel og legge til en Drop Shadow med følgende verdier:.
Nå bruker Oval Tool til å lage en 5x5px svart sirkel og sentrere den i størrelse Panel, konvertere den til MovieClip og sette eksempel navn til "shapeSize"
Trinn 8:. Standard farger
Vi vil lage en standard fargepalett stedet for å bruke fargevelgeren Component.
Lag en 22x22px sirkel med Oval Tool, satt sin farge til #EEEEEE og konvertere den til MovieClip. Legg samme Drop Shadow Filter vi brukte i panelstørrelsen.
Tegn en andre sirkel av 16x16px og bruke svart for fargen denne gangen. Sentrere sirklene og gjenta denne prosessen har endret den siste sirkelen farge til følgende:
Juster dem å ende opp med noe som dette:
Konverter alle farger til en enkelt MovieClip, name it " farger "og være sikker på å sette Registrering Pek på øverste venstre, siden vi kommer til å få pikseldata ved hjelp av Bitmap Class
Trinn 9:. Adobe PNG Encoder
For å kunne bruke Lagre funksjonen vi trenger Adobe PNG Encoder wich er en del av as3corelib som du finner i Google Code.
Hvis du vil bruke denne klassen utsiden av pakken den kommer med som standard, vi trenger å endre en linje. Åpne PNGEncoder.as filen og endre linjen "pakken com.adobe ..." å bare "pakke". Dette vil la oss kalle den klassen i katalogen der Fla filen er
Trinn 10:. Hoved Class
En enkelt klasse vil håndtere dette programmet. Åpne Egenskaper Panel i Fla filen og angi dokument klasse som "Main".
Opprett en ny Actionscript dokument og lagre det som "Main.as" i samme katalogen der Fla filen er.
Trinn 11: Import Obligatoriske Classes
Dette er de klassene vi kommer til å trenge i dette programmet. Husk å sjekke Flash Hjelp (F1) hvis du er usikker på en bestemt klasse
pakke {import PNGEncoder.; import flash.display.MovieClip; import flash.display.Shape; import flash.display.DisplayObject; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldType; import flash.text.TextFieldAutoSize; import flash.display.BitmapData; import flash.geom.ColorTransform; import flash.events.MouseEvent; import flash.events.Event; import flash.utils.ByteArray; import flash.net.FileReference;
Trinn 12:. Utvide Class
Vi utvider den MovieClip klasse siden vi bruker denne klassen 'spesifikke egenskaper og metoder
public class Hoved strekker MovieClip {
Trinn 13: Variabler
Dette er de variablene vi vil bruke. De er forklart i kode kommentarer Twitter /* Pencil Tool form, alt er tegnet med dette verktøyet og viskelæret lagret inne board.pencilDraw * /var pencilDraw: Shape = new Shape (); /* Tekstformat. * /var tekstformat: tekstformat = new tekstformat (); /* Farger * /var colorsBmd: BitmapData; //Vi vil bruke dette Bitmap Data for å få pikslers RGB-verdi når clickedvar pixelValue: uint; Var activeColor: uint = 0x000000; //Dette er den nåværende fargen er i bruk, vises av shapeSize MC /* Lagre dialog eksempel * /var saveDialog: SaveDialog; /* Aktiv var, for å sjekke hvilket verktøy er aktiv * /var aktiv: String; /* Shape størrelse farge * /var ct: ColorTransform = new ColorTransform ();
Trinn 14: Main Funksjon
Hovedfunksjonen vil ta seg av å sette Text Format av Text Tool, konvertere farger MovieClip til Bitmap data slik at vi kan trekke ut Pixels RGB verdi, og legger til lytterne og skjule de aktive ikoner
offentlig funksjon main (): void {textformat.font = "kvikksand Fet Regular."; //Du kan bruke en hvilken som helst font du liker textformat.bold = true; textformat.size = 16; /* Vi skaper disse funksjonene senere * /convertToBMD (); addListeners (); /* Skjul verktøy høydepunkter * /pencil.visible = false; Hidetools (viskelær, txt);}
Trinn 15: Verktøy Actions
verktøy handlinger er hver delt inn i fire funksjoner.
Den første vil sette verktøyet til aktiv tilstand, det andre og tredje de vil håndtere mus hendelser (som tegning eller sletting) og den fjerde vil stoppe disse hendelsene.
< h2> Trinn 16: Pencil Tool
Disse funksjonene håndtere Pencil Tool, lese kommentarene i koden for en bedre forståelse
Settet til aktiv funksjon.
privat funksjon PencilTool ( e: MouseEvent): void {/* Avslutt aktive verktøyet * /quitActiveTool (); //Denne funksjonen vil bli opprettet senere /* Sett til Aktiv * /aktiv = & quot; Pencil & quot;; //Setter aktiv variabel til & quot; Pencil & quot; /* Legger lytterne til styret MovieClip, å tegne akkurat i det * /board.addEventListener (MouseEvent.MOUSE_DOWN, startPencilTool); board.addEventListener (MouseEvent.MOUSE_UP, stopPencilTool); /* Uthev, setter Pencil Tool Ikon til fargeversjonen, og skjuler et annet verktøy * /highlightTool (blyant); Hidetools (viskelær, txt); /* Setter den aktive fargen variable basert på Color Transform verdi og bruker den fargen på shapeSize MovieClip * /ct.color = activeColor; shapeSize.transform.colorTransform = ct;}
Start-funksjon; Denne funksjonen kalles når styret MovieClip trykkes
privat funksjon startPencilTool (e: MouseEvent): void {pencilDraw = new Shape ();. //Vi vil legge til en ny form for å trekke alltid i toppen (i tilfelle av tekst, eller viskelær tegninger) board.addChild (pencilDraw); //Legg at formen til styret MovieClip pencilDraw.graphics.moveTo (mouseX, mousey); //Flytter Tegning posisjon til Mus Plasser pencilDraw.graphics.lineStyle (shapeSize.width, activeColor); //Setter linjetykkelsen til ShapeSize MovieClip størrelse og setter sin farge til den aktive fargen board.addEventListener (MouseEvent.MOUSE_MOVE , drawPencilTool); //Legger en lytter til neste funksjon}
Uavgjort funksjon; . kalles når brukeren trykker styret MovieClip og flytter muse
privat funksjon drawPencilTool (e: MouseEvent): void {pencilDraw.graphics.lineTo (mouseX, mousey); //Tegner en linje fra den gjeldende Mouse stilling til den flyttet Mouse stilling}
Stop-funksjon, utføres når brukeren slipper muse
privat funksjon stopPencilTool (e: MouseEvent):. Void {board.removeEventListener (MouseEvent. MOUSE_MOVE, drawPencilTool); //Stopper tegningen}
Trinn 17:. Eraser Tool
The Eraser Tool er ganske mye det samme som Pencil Tool, bortsett fra at vi ikke bruker noe annet enn Hvit farge
privat funksjon EraserTool (e: MouseEvent): void {/* Avslutt aktive verktøyet * /quitActiveTool (); /* Sett til Aktiv * /aktiv = "Eraser"; /* Lyttere * /board.addEventListener (MouseEvent.MOUSE_DOWN, startEraserTool); board.addEventListener (MouseEvent.MOUSE_UP, stopEraserTool); /* Highlight * /highlightTool (viskelær); Hidetools (blyant, txt); /* Bruk hvit farge * /ct.color = 0x000000; shapeSize.transform.colorTransform = ct;} private funksjon startEraserTool (e: MouseEvent): void {pencilDraw = new Shape (); board.addChild (pencilDraw); pencilDraw.graphics.moveTo (mouseX, mousey); pencilDraw.graphics.lineStyle (shapeSize.width, 0xFFFFFF); //Hvit Farge board.addEventListener (MouseEvent.MOUSE_MOVE, drawEraserTool);} private funksjon drawEraserTool (e: MouseEvent): void {pencilDraw.graphics.lineTo (mouseX, mousey);} funksjon stopEraserTool (e: MouseEvent): void {bord .removeEventListener (MouseEvent.MOUSE_MOVE, drawEraserTool);}
Som du kan se, er den samme, bortsett fra for de hvite fargeendringer koden
Trinn 18: Text Tool
privat funksjon TextTool (e: MouseEvent): void {/* Avslutt aktive verktøyet * /quitActiveTool (); /* Sett til Aktiv * /aktiv = "Text"; /* List * /board.addEventListener (MouseEvent.MOUSE_UP, writeText); /* Highlight * /highlightTool (txt); Hidetools (blyant, viskelær);} private funksjon writeText (e: MouseEvent): void {/* Lag en ny Textfield Object, på denne måten vil vi ikke erstatte eldre forekomster * /var tekstfeltet = new Textfield (); /* Sett formater, posisjon, og fokus * /textfield.type = TextFieldType.INPUT; textfield.autoSize = TextFieldAutoSize.LEFT; textfield.defaultTextFormat = tekstformat; textfield.textColor = activeColor; textfield.x = mouseX; textfield.y = mousey; stage.focus = tekstfeltet; /* Legg tekst til styret * /board.addChild (tekstfeltet);}
Denne var lett, husk at du kan endre størrelse og farge ved hjelp av shapeSize og fargene movieclips
. Trinn 19: Save Option
spare alternativet håndtert av saveButton vil gjøre bruk av Adobes PNGEnconder Class lagre kunstverket som en PNG-fil
privat funksjon eksport (). void {var BMD: BitmapData = new BitmapData (600, 290); //Oppretter en ny BitmapData med styret størrelse bmd.draw (styret); //Tegner styret MovieClip inn en BitmapImage i BitmapData Var BA: ByteArray = PNGEncoder.encode (BMD); //Oppretter en ByteArray av BitmapData, kodet som PNG Var file: FileReference = new FileReference (); //Instantiates en ny fil referanseobjekt for å håndtere lagringen file.addEventListener (Event.COMPLETE, saveSuccessful); //Legger til en ny lytteren til å lytte når lagringen er fullført file.save (ba, "MyDrawing.png"); //Lagrer ByteArray som en PNG} privat funksjon saveSuccessful (e: Hendelses): void {saveDialog = new SaveDialog (); //instantiates en ny SaveDialog Class addChild (saveDialog); //Legger SaveDialog MovieClip til Stage saveDialog.closeBtn.addEventListener (MouseEvent.MOUSE_UP, closeSaveDialog); //Legger en lytter til lukkeknappen i dialogboksen} private funksjon closeSaveDialog (e: MouseEvent): void {removeChild (saveDialog); //Fjerner dialogen av Stage} private funksjon redning (e: MouseEvent): void {eksport (); //Calls eksportfunksjonen for å starte lagringsprosessen}
Trinn 20: Clear Tool
Clear Tool vil legge en hvit skjerm foran alle elementene for å forlate styret klar tegne igjen
privat funksjon clearBoard (e: MouseEvent): void {/* Lag en hvit firkant på toppen av alt * /var blank. Shape = new Shape (); blank.graphics.beginFill (0xFFFFFF); blank.graphics.drawRect (0, 0, board.width, board.height); blank.graphics.endFill (); board.addChild (blank);}
Trinn 21: Få Colors Verdi
For å få verdien av fargene vi bruker i fargene MovieClip, vi konvertere den til en BitmapData Object og bruke getPixel metoden for å få RGB-verdien på pikselen klikket
privat funksjon convertToBMD (). void {colorsBmd = new BitmapData (colors.width, colors.height); colorsBmd.draw (farger);} private funksjon ChooseColor (e: MouseEvent): void {pixelValue = colorsBmd.getPixel (colors.mouseX, colors.mouseY); //Får cliked pikslers RGB-verdi activeColor = pixelValue; /* Bruk en ColorTransform objekt for å endre shapeSize MovieClip farge * /ct.color = activeColor; shapeSize.transform.colorTransform = ct;}
Vi vil legge til ChooseColor lytteren i addListeners funksjon senere i koden
Trinn 22:. Aktiv Tool
Tidligere, vi erklært en variabel for å sette den aktive eller gjeldende verktøy i bruk, og vi kaller denne funksjonen for å fjerne de tilsvarende lytterne for å ha bare ett aktivt verktøy.
I utgangspunktet kontrollerer funksjonen "aktiv" variabel i en bryter loop, deretter avhengig av sin verdi fjerner lytterne det har
privat funksjon quitActiveTool (): void {switch (aktiv) {case "Pencil". board.removeEventListener (MouseEvent.MOUSE_DOWN, startPencilTool); board.removeEventListener (MouseEvent.MOUSE_UP, stopPencilTool); case "Eraser": board.removeEventListener (MouseEvent.MOUSE_DOWN, startEraserTool); board.removeEventListener (MouseEvent.MOUSE_UP, stopEraserTool); case "Text": board.removeEventListener (MouseEvent.MOUSE_UP, writeText); standard:}}
Vi trenger også å fremheve det aktive verktøyet og skjule de andre:
privat funksjon highlightTool (verktøy: Displayobject): void {tool.visible = true; //Høydepunkter verktøy i parameter} /* Skjuler verktøy i parametrene * /private funksjons Hidetools (verktøy1: Displayobject, tool2: Displayobject): void {tool1.visible = false; tool2.visible = false;}
Trinn 23: Shape Størrelse
klikk panelstørrelsen eller ShapeSize MovieClip å endre størrelsen på blyant, viskelær og Text Tool. Størrelsen er endret i intervaller på fem, og tilbakestilles når størrelsen er større eller lik 50. Ta en titt på koden:
privat funksjon changeShapeSize (e: MouseEvent): void {if (shapeSize.width > = 50) {shapeSize.width = 1; shapeSize.height = 1; /* Tekstformat * /textformat.size = 16; } Else {shapeSize.width + = 5; shapeSize.height = shapeSize.width; /* Tekstformat * /textformat.size + = 5; }}
Trinn 24: Legg Lyttere
En funksjon for å legge til alle lyttere
private funksjons addListeners (). void {pencilTool.addEventListener (MouseEvent.MOUSE_UP, PencilTool); eraserTool.addEventListener (MouseEvent.MOUSE_UP, EraserTool); textTool.addEventListener (MouseEvent.MOUSE_UP, TextTool); saveButton.addEventListener (MouseEvent.MOUSE_UP, lagre); clearTool.addEventListener (MouseEvent.MOUSE_UP, clearBoard); colors.addEventListener (MouseEvent.MOUSE_UP, ChooseColor); sizePanel.addEventListener (MouseEvent.MOUSE_UP, changeShapeSize); . shapeSize.addEventListener (MouseEvent.MOUSE_UP, changeShapeSize);}
Trinn 25: Test
Test din app ved å trykke cmd + retur og sjekke om alt fungerer som forventet
Bruk alle verktøy, farger og funksjoner, og begynne å tegne din scene!
Konklusjon
Dette Flash Movie kan enkelt tilpasses som en kids tegning søknad, det har et brukervennlig grensesnitt og grunnleggende verktøy som kan lære hvordan musen fungerer samtidig ha litt fargerik moro i prosessen.
Du kan også utforske resten av as3corelib og lese dokumentasjonen for å lære noen nye Action funksjoner.
Takk for lesing! Anmeldelser