Share
De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Activetuts +. Acest tutorial a fost publicat pentru prima oară în august 2009.
În acest tutorial, vom crea o aplicație de desen cu funcții de bază și o interfață ușor de utilizat. Sentimentul artistic? Atunci să mergem?
Această aplicație va conține o serie de instrumente, cum ar fi creionul, radiera, instrumentul de text și, de asemenea, posibilitatea de a salva desenul în format png utilizând encoderul PNG al Adobe.
Deschideți Flash și creați un fișier Flash nou (ActionScript 3).
Setați dimensiunea scenei la 600x350px și rata de cadre la 25fps.
Desenați un dreptunghi alb de 600x290 pixeli și convertiți-l în MovieClip. Setați numele instanței în "bord" și aliniați-l la partea din stânga sus a scenei.
Aceasta va fi zona pe care o vom putea desena.
Creați un dreptunghi de dimensiune gri (600 pixeli), de 600 de culori, de lățime mare (#DFDFDF), și aliniați-l la partea de jos a scenei. Acesta va fi fundalul pentru panoul de instrumente.
Nu voi acoperi crearea icoanelor de instrumente, deoarece aceasta nu este intenția turistică, totuși, puteți vedea cum sunt făcute în fișierul Fla inclus în Sursă.
După cum puteți vedea în imagine, vom folosi două icoane, unul cu un ton gri și altul cu culoare.
Conversați pictograma creionului gri pe un buton (F8) și numiți-l "pencilTool", faceți dublu clic pentru ao edita și adăugați un keyFrame (F6) în starea "over". Iată unde vom pune versiunea color a pictogramei.
În cele din urmă, adăugați un alt KeyFrame în starea "lovitură" și trageți un pătrat de 30x30px pentru a acționa ca zona de lovire a butonului.
Repetați acest proces cu toate pictogramele instrumentului, nu uitați să le dați numele corecte de instanțe (eraserTool, textTool, saveButton, clearTool).
Pentru a afișa pictograma activă a instrumentului, vom folosi versiunea color a pictogramei și o vom plasa în aceeași poziție a butonului creat anterior. Numele instanțelor vor fi "creion", "eraser" și "text".
Vom ascunde aceste pictograme mai târziu folosind ActionScript.
Când vom folosi opțiunea de salvare, vom afișa un mesaj "salvați succesul".
Creați un dreptunghi negru de 600x350 pixeli cu 50% alfa pentru a fi utilizat ca fundal.
Adăugați un dreptunghi rotund negru în centru cu pictograma buton de salvare și un text care indică faptul că salvarea a fost finalizată.
Creați un buton de închidere și aliniați-l în partea din stânga sus a dreptunghiului rotunjit, denumiți-l "closeBtn". După cum vă puteți imagina, acest buton va închide dialogul de salvare.
Transformați toate elementele într-un singur filmClip și bifați caseta de selectare "Export pentru ActionScript". Setați câmpul de text Clasă la "SaveDialog".
Vom exemplifica această clasă atunci când utilizatorul apasă butonul SaveButton și salvarea este finalizată.
Panoul Dimensiune este zona în care puteți schimba dimensiunea creionului, a radiatorului și a instrumentului de text. Puteți face acest lucru făcând clic în zona panoului sau în interiorul ovalului.
Selectați Instrumentul primitiv dreptunghi, setați raza de colț la 4 și creați un dreptunghi #EFEFEF 80x50px. Convertiți-l într-un filmClip și denumiți-l "sizePanel".
Deschideți panoul Filtre și adăugați o Shadow Drop cu următoarele valori:
Acum, folosiți instrumentul Oval pentru a crea un cerc negru de 5x5 pixeli și a-l centra în panoul Dimensiune, convertiți-l în MovieClip și setați numele de instanță la "shapeSize".
Vom crea o paletă de culori implicită în loc să folosim componenta Color Picker.
Creați un cerc de 22x22 pixeli utilizând Instrumentul Oval, setați culoarea lui la #EEEEEE și convertiți-o în MovieClip. Adăugați același filtru de umbră pe care l-am folosit în panoul Dimensiune.
Desenați un al doilea cerc de 16x16 px și folosiți negru pentru culoare de această dată. Centrează cercurile și repetați acest proces schimbând culoarea ultimului cerc în următoarele:
Aliniați-le să se încheie cu ceva de genul:
Convertiți toate culorile într-un singur film, denumiți-l "culori" și asigurați-vă că setați Punctul de Înregistrare la Top-Stânga, deoarece vom primi date pixel utilizând Clasa Bitmap.
Pentru a utiliza funcția Salvare, avem nevoie de Encoderul PNG Adobe care face parte din as3corelib pe care îl puteți găsi în Google Code.
Pentru a folosi această clasă în afara pachetului, este disponibil ca implicit, trebuie să schimbăm o linie. Deschideți fișierul PNGEncoder.as și modificați linia "pachet com.adobe?" Doar la "pachet". Acest lucru ne va permite să sunăm clasa în directorul unde este fișierul Fla.
O singură clasă va gestiona această aplicație. Deschideți panoul Proprietăți din fișierul Fla și setați Clasa de documente ca "Main".
Creați un nou document ActionScript și salvați-l ca "Main.as" în același director unde este fișierul Fla.
Acestea sunt clasele de care avem nevoie în această aplicație. Nu uitați să verificați Ajutorul Flash (F1) dacă nu sunteți sigur de o anumită clasă.
pachet 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; importul flash.events.MouseEvent; importul flash.events.Event; import flash.utils.ByteArray; import flash.net.FileReference;
Extinem clasa MovieClip deoarece folosim proprietățile și metodele specifice acestei clase.
clasa publică principală extinde MovieClip
Acestea sunt variabilele pe care le vom folosi. Toate acestea sunt explicate în comentariile codului.
/ * Creion Forma instrumentului, totul desenat cu acest instrument și instrumentul de ștergere este stocat în interiorul board.pencilDraw * / var pencilDraw: Shape = Formă nouă (); / * Formatul textului * / var textformat: TextFormat = new TextFormat (); / * Culori * / var culoriBmd: BitmapData; // Vom folosi aceste date Bitmap pentru a obține valoarea pixelului RGB atunci când faceți clic pe var pixelValue: uint; var activColor: uint = 0x000000; // Aceasta este culoarea curentă în uz, afișată de instanța de dialog shapeSize MC / * Save * / var saveDialog: SaveDialog; / * Active var, pentru a verifica ce unealtă este activă * / var active: String; / * Culoarea dimensiunii formei * / var ct: ColorTransform = new ColorTransform ();
Funcția principală va avea grijă să setați Text Format al Instrumentului de Text, convertindu-i culorile MovieClip la date Bitmap, astfel încât să extragem valoarea pixelilor RGB, adăugând ascultătorii și ascunzând pictogramele active.
funcția publică principală (): void textformat.font = "Quicksand Bold Regular"; // Puteți utiliza orice font care vă place textformat.bold = true; textformat.size = 16; / * Creăm aceste funcții mai târziu * / convertToBMD (); addListeners (); / * Ascunde evidența instrumentelor * / pencil.visible = false; hideTools (eraser, txt);
Acțiunile instrumentelor sunt fiecare împărțite în patru funcții.
Primul va seta instrumentul la starea sa activă, al doilea și al treilea se vor ocupa de evenimentele mouse-ului (cum ar fi desenarea sau ștergerea), iar cel de-al patrulea va opri acele evenimente.
Aceste funcții se ocupă de creionul creionului, citiți comentariile din cod pentru o mai bună înțelegere.
Setarea funcției active:
funcția privată PencilTool (e: MouseEvent): void / * Quit tool active * / quitActiveTool (); // Această funcție va fi creată mai târziu / * Setare la Active * / active = "Creion"; // Setează variabila activă la "Pencil" / * Adaugă ascultătorii la tabla MovieClip, pentru a desena doar în el * / board.addEventListener (MouseEvent.MOUSE_DOWN, startPencilTool); board.addEventListener (MouseEvent.MOUSE_UP, stopPencilTool); / * Highlight, setează pictograma Tool Pencil pe versiunea color și ascunde orice alt instrument * / highlightTool (creion); hideTools (eraser, txt); / * Setează variabila de culoare activă pe baza valorii Color Transform și folosește acea culoare pentru shapeSize MovieClip * / ct.color = activeColor; shapeSize.transform.colorTransform = ct;
Funcția Start; această funcție se numește când este apăsat butonul FilmClip.
funcția privată startPencilTool (e: MouseEvent): void pencilDraw = new Shape (); // Adăugăm o nouă formă pentru a desena mereu în partea superioară (în cazul desenelor de text sau radiere) board.addChild (pencilDraw); // Adăugați acea formă la placa FilmClip pencilDraw.graphics.moveTo (mouseX, mouseY); // Mută poziția de desen la poziția mouse-ului pencilDraw.graphics.lineStyle (shapeSize.width, activeColor); // Setează grosimea liniei la dimensiunea ShapeSize MovieClip și își stabilește culoarea la culoarea actuală activă.addEventListener (MouseEvent.MOUSE_MOVE , drawPencilTool); // Adaugă un ascultător la următoarea funcție
Funcția Draw; numit atunci când utilizatorul apasă pe tablă BoardClip și mișcă mouse-ul.
funcția privată drawPencilTool (e: MouseEvent): void pencilDraw.graphics.lineTo (mouseX, mouseY); // Creează o linie din poziția curentă a mouse-ului la poziția Mouse mutată
Stop, executată atunci când utilizatorul eliberează mouse-ul.
funcția privată stopPencilTool (e: MouseEvent): void board.removeEventListener (MouseEvent.MOUSE_MOVE, drawPencilTool); // Oprește desenul
Instrumentul Eraser este aproape identic cu instrumentul Creion, cu excepția faptului că nu folosim altă culoare decât White.
funcția privată EraserTool (e: MouseEvent): void / * Quit tool active * / quitActiveTool (); / * Setați la Active * / active = "Eraser"; / * Ascultători * / board.addEventListener (MouseEvent.MOUSE_DOWN, startEraserTool); board.addEventListener (MouseEvent.MOUSE_UP, stopEraserTool); / * Evidențiați * / highlightTool (eraser); hideTools (creion, txt); / * Utilizați culoarea albă * / ct.color = 0x000000; shapeSize.transform.colorTransform = ct; funcția privată startEraserTool (e: MouseEvent): void pencilDraw = new Shape (); board.addChild (pencilDraw); pencilDraw.graphics.moveTo (mouseX, mouseY); pencilDraw.graphics.lineStyle (shapeSize.width, 0xFFFFFF); // Culoarea White board.addEventListener (MouseEvent.MOUSE_MOVE, drawEraserTool); funcția privată drawEraserTool (e: MouseEvent): void pencilDraw.graphics.lineTo (mouseX, mouseY); funcția stopEraserTool (e: MouseEvent): void board.removeEventListener (MouseEvent.MOUSE_MOVE, drawEraserTool);
După cum puteți vedea, codul este același, cu excepția modificărilor culorii albe.
Instrumentul Text are numai două funcții; unul însărcinat să îl activeze, iar celălalt pentru manipularea textului. Hai să aruncăm o privire:
funcția privată TextTool (e: MouseEvent): void / * Quit tool active * / quitActiveTool (); / * Setați la Active * / active = "Text"; / * Listener * / board.addEventListener (MouseEvent.MOUSE_UP, scriereText); / * Evidențiați * / highlightTool (txt); hideTools (creion, radieră); private function writeText (e: MouseEvent): void / * Crearea unui nou obiect TextField, astfel incat nu vom inlocui instantele mai vechi * / var textfield = new TextField (); / * Setați formate, poziție și focalizare * / textfield.type = TextFieldType.INPUT; textfield.autoSize = TextFieldAutoSize.LEFT; textfield.defaultTextFormat = textformat; textfield.textColor = activColor; textfield.x = mouseX; textfield.y = mouseY; stage.focus = textfield; / * Adăugați textul în bord * / board.addChild (câmp text);
Acesta a fost ușor, amintiți-vă că puteți schimba dimensiunea și culoarea cu ajutorul formelor shapeSize și Colors MovieClips.
Opțiunea de salvare gestionată de saveButton va face uz de clasa Adobe PNGEnconder pentru a salva opera de artă ca fișier PNG.
funcția privată export (): void var bmd: BitmapData = nou BitmapData (600, 290); // Creează o nouă BitmapData cu dimensiunea bmd.draw (board); var ba: ByteArray = PNGEncoder.encode (bmd); // Creează un ByteArray al BitmapData, codificat ca fișier PNG var: FileReference = FileReference nou (); // Instanțiatesază un nou obiect de referință pentru fișiere pentru a gestiona fișierul save.addEventListener (Event.COMPLETE, saveSuccessful); // Adaugă un nou ascultător pentru a asculta când salvarea este completă file.save (ba, "MyDrawing.png"); // Salvează ByteArray ca PNG funcția privată saveSuccessful (e: Event): void saveDialog = new SaveDialog (); // Instanțiatesază o nouă clasă SaveDialog addChild (saveDialog); // adaugă SaveDialog MovieClip în scenă saveDialog.closeBtn.addEventListener (MouseEvent.MOUSE_UP, closeSaveDialog); // adaugă un ascultător la butonul de închidere al dialogului private mode closeSaveDialog (e: MouseEvent): void removeChild (saveDialog) ; // Elimină dialogul din funcția privată Salvare (e: MouseEvent): void export (); // Apel la funcția de export pentru a începe procesul de salvare
Instrumentul Clear va adăuga un ecran alb în fața tuturor elementelor pentru a lăsa tabla gata să deseneze din nou.
funcția privată clearBoard (e: MouseEvent): void / * Crearea unui dreptunghi alb peste tot * / var blank: Shape = new Shape (); blank.graphics.beginFill (0xFFFFFF); blank.graphics.drawRect (0, 0, placă de bord, placă de înălțime); blank.graphics.endFill (); board.addChild (martor);
Pentru a obține valoarea culorilor pe care le folosim în Colour MovieClip, îl convertim într-un obiect BitmapData și folosim metoda getPixel pentru a obține valoarea RGB a pixelului dat.
funcția privată convertToBMD (): void colorsBmd = BitmapData nou (colors.width, colors.height); colorsBmd.draw (culori); funcția privată chooseColor (e: MouseEvent): void pixelValue = colorsBmd.getPixel (colors.mouseX, colors.mouseY); // Obține valoarea pixelului RGB activatcolor = pixelValue; / * Utilizați un obiect ColorTransform pentru a schimba culoarea shapeSize MovieClip * / ct.color = activeColor; shapeSize.transform.colorTransform = ct;
Vom adăuga alegereaColor ascultător în funcția addListeners mai târziu în cod.
Anterior, am declarat o variabilă pentru a seta instrumentul activ sau curent în uz și numim această funcție pentru a elimina ascultătorii corespunzători pentru a avea doar un instrument activ.
Practic, funcția verifică variabila "activă" într-o buclă de comutare, în funcție de valoarea acesteia, elimină ascultătorii pe care îi are.
funcția privată quitActiveTool (): void comutare (activă) caz "Creion": board.removeEventListener (MouseEvent.MOUSE_DOWN, startPencilTool); board.removeEventListener (MouseEvent.MOUSE_UP, stopPencilTool); cazul "Eraser": board.removeEventListener (MouseEvent.MOUSE_DOWN, startEraserTool); board.removeEventListener (MouseEvent.MOUSE_UP, stopEraserTool); cazul "Text": board.removeEventListener (MouseEvent.MOUSE_UP, writeText); Mod implicit :
De asemenea, trebuie să evidențiem instrumentul activ și să ascundem celelalte:
funcția privată highlightTool (instrument: DisplayObject): void tool.visible = true; / / Ascunde instrumentele în parametri * / funcția privată hideTools (instrument1: DisplayObject, instrument2: DisplayObject): void tool1.visible = false; tool2.visible = false;
Facem clic pe panoul Dimensiune sau pe ShapeSize MovieClip pentru a schimba dimensiunea creionului, Eraser și Text Tool. Dimensiunea este schimbată în intervale de 5 și este resetată când dimensiunea este mai mare sau egală cu 50. Consultați codul:
schimbarea funcției private ShapeSize (e: MouseEvent): void if (shapeSize.width> = 50) shapeSize.width = 1; shapeSize.height = 1; / * TextFormat * / textformat.size = 16; altfel shapeSize.width + = 5; shapeSize.height = shapeSize.width; / * TextFormat * / textformat.size + = 5;
O funcție pentru a adăuga toți ascultătorii.
funcția privată 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, salvați); clearTool.addEventListener (MouseEvent.MOUSE_UP, clearBoard); colors.addEventListener (MouseEvent.MOUSE_UP, alegeColor); dimensiunePanel.addEventListener (MouseEvent.MOUSE_UP, changeShapeSize); formaSize.addEventListener (MouseEvent.MOUSE_UP, changeShapeSize);
Testați aplicația apăsând cmd + return și verificați dacă totul funcționează conform așteptărilor.
Folosiți toate uneltele, culorile și funcțiile și începeți să desenați scenă!
Acest film Flash poate fi ușor adaptat ca o aplicație de desen pentru copii, are o interfață prietenoasă de utilizator și instrumente de bază care pot învăța cum funcționează mouse-ul în timp ce au o distracție colorată în proces.
Puteți explora, de asemenea, restul de as3corelib și citiți documentația sa pentru a afla unele noi caracteristici ActionScript.
Vă mulțumim pentru lectură!
Accentsconagua