Share
Due volte al mese, rivisitiamo alcuni dei post preferiti dei nostri lettori da tutta la storia di Activetuts +. Questo tutorial è stato pubblicato per la prima volta nell'agosto 2009.
In questo tutorial, creeremo un'applicazione di disegno con funzioni di base e un'interfaccia facile da usare. Ti senti artistico? Allora andiamo?
Questa applicazione presenta una serie di strumenti come matita, gomma, strumento di testo e anche la possibilità di salvare il tuo disegno in formato png usando l'Encoder PNG di Adobe.
Apri Flash e crea un nuovo file Flash (ActionScript 3).
Imposta le dimensioni dello stage su 600x350 px e il frame rate su 25fps.
Disegna un rettangolo bianco 600x290px e convertilo in MovieClip. Imposta il suo nome istanza su "board" e allinearlo in alto a sinistra dello stage.
Questa sarà l'area su cui saremo in grado di disegnare.
Crea un rettangolo di 60px di larghezza 60px ad alta (#DFDFDF) e allinealo alla fine dello stage. Questo sarà il nostro background per il pannello Strumenti.
Non coprirò la creazione delle icone degli strumenti poiché non è questa l'intenzione del turorial, tuttavia, puoi vedere come sono realizzate nel file Fla incluso nel sorgente.
Come puoi vedere nell'immagine, useremo due icone, una in tono grigio e l'altra a colori.
Converti l'icona della matita grigia in un pulsante (F8) e chiamalo "pencilTool", fai doppio clic per modificarlo e aggiungi un KeyFrame (F6) nello stato "sopra". Ecco dove metteremo la versione a colori dell'icona.
Infine, aggiungi un altro KeyFrame nello stato "hit" e disegna un quadrato 30x30px che funga da area colpita dal pulsante.
Ripeti questo processo con tutte le icone degli strumenti, non dimenticare di fornire loro i nomi di istanza corretti (eraserTool, textTool, saveButton, clearTool).
Per visualizzare l'icona dello strumento attivo, utilizzeremo la versione a colori dell'icona e la posizioneremo nella stessa posizione del pulsante che abbiamo creato in precedenza. I nomi delle istanze saranno "matita", "gomma" e "testo".
Nasconderemo queste icone in un secondo momento utilizzando ActionScript.
Quando usiamo l'opzione di salvataggio mostreremo un messaggio "salva successo".
Crea un rettangolo nero 600x350px con 50% di alpha da utilizzare come sfondo.
Aggiungi un rettangolo nero arrotondato al centro con l'icona del pulsante di salvataggio e un testo che indica che il salvataggio è stato completato.
Crea un pulsante di chiusura e allinealo nella parte in alto a sinistra del rettangolo arrotondato, chiamalo "closeBtn". Come puoi immaginare, questo pulsante chiuderà la finestra di dialogo Salva.
Converti tutti gli elementi in un singolo MovieClip e contrassegna la casella di controllo "Esporta per ActionScript". Imposta il campo di testo Class su "SaveDialog".
Istanziamo questa classe quando l'utente preme il pulsante Salva e il salvataggio è completato.
Il Pannello dimensioni è l'area in cui è possibile modificare le dimensioni della matita, della gomma e dello strumento testo. Puoi farlo facendo clic nell'area del pannello o sull'ovale al suo interno.
Seleziona lo strumento Rettangolo, imposta il raggio dell'angolo su 4 e crea un rettangolo #EFEFEF 80 x 50 px. Convertilo in MovieClip e chiamalo "sizePanel".
Apri il pannello Filtri e aggiungi un'ombra esterna con i seguenti valori:
Ora usa lo Strumento Ovale per creare un cerchio nero 5x5px e centrarlo nel Pannello dimensioni, convertirlo in MovieClip e impostare il nome dell'istanza su "shapeSize".
Creeremo una tavolozza colori predefinita invece di usare il componente Color Picker.
Crea un cerchio 22x22px usando lo Strumento Ovale, imposta il suo colore su #EEEEEE e convertilo in MovieClip. Aggiungi lo stesso filtro ombra esterna che abbiamo usato nel Pannello dimensioni.
Disegna un secondo cerchio di 16x16 px e usa il nero per il colore questa volta. Centrare i cerchi e ripetere questo processo cambiando l'ultimo colore del cerchio con il seguente:
Allinearli per finire con qualcosa di simile a questo:
Converti tutti i colori in un singolo MovieClip, chiamalo "colors" e assicurati di impostare il punto di registrazione in alto a sinistra, dato che otterremo i dati dei pixel usando la classe Bitmap.
Per utilizzare la funzione Salva abbiamo bisogno di Adobe PNG Encoder che fa parte di as3corelib che puoi trovare in Google Code.
Per utilizzare questa classe al di fuori del pacchetto fornito come predefinito, è necessario modificare una riga. Aprire il file PNGEncoder.as e cambiare la riga "pacchetto com.adobe?" In "pacchetto". Questo ci consentirà di chiamare la classe nella directory in cui si trova il file Fla.
Una singola classe gestirà questa applicazione. Aprire il pannello Proprietà nel file Fla e impostare la Document Class come "Main".
Crea un nuovo documento ActionScript e salvalo come "Main.as" nella stessa directory in cui si trova il file Fla.
Queste sono le classi di cui avremo bisogno in questa app. Ricordati di controllare la Guida di Flash (F1) se non sei sicuro di una classe specifica.
package 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;
Stiamo estendendo la classe MovieClip poiché utilizziamo proprietà e metodi specifici di questa classe.
la classe pubblica Main estende MovieClip
Queste sono le variabili che useremo. Sono tutti spiegati nei commenti al codice.
/ * Forma dello strumento matita, tutto ciò che viene disegnato con questo strumento e lo strumento gomma viene memorizzato all'interno di board.pencilDraw * / var pencilDraw: Shape = new Shape (); / * Formato di testo * / var textformat: TextFormat = new TextFormat (); / * Colori * / var colorsBmd: BitmapData; // Useremo questi dati bitmap per ottenere il valore RGB del pixel quando si fa clic su var pixelValue: uint; var activeColor: uint = 0x000000; // Questo è il colore corrente in uso, visualizzato dall'istanza di finestra di dialogo shapeSize MC / * Save * / var saveDialog: SaveDialog; / * Var attiva, per verificare quale strumento è attivo * / var active: String; / * Colore dimensione forma * / var ct: ColorTransform = new ColorTransform ();
La funzione principale si occuperà di impostare il formato testo dello strumento di testo, convertendo i colori MovieClip in dati bitmap in modo da poter estrarre il valore RGB Pixel, aggiungere gli ascoltatori e nascondere le icone attive.
public function Main (): void textformat.font = "Quicksand Bold Regular"; // Puoi usare qualsiasi font che ti piace textformat.bold = true; textformat.size = 16; / * Creiamo queste funzioni in seguito * / convertToBMD (); addListeners (); / * Nascondi gli evidenziatori degli strumenti * / pencil.visible = false; hideTools (gomma, txt);
Le azioni degli strumenti sono suddivise in quattro funzioni.
Il primo imposterà lo strumento sul suo stato attivo, il secondo e il terzo gestiranno gli eventi del mouse (come Disegnare o Cancellare) e il quarto fermerà quegli Eventi.
Queste funzioni gestiscono lo strumento Pencil, leggono i commenti nel codice per una migliore comprensione.
L'insieme alla funzione attiva:
funzione privata PencilTool (e: MouseEvent): void / * Esci da tool attivo * / quitActiveTool (); // Questa funzione verrà creata in seguito / * Impostare su Attivo * / attivo = "Matita"; // Imposta la variabile attiva su "Pencil" / * Aggiunge gli ascoltatori alla scheda MovieClip, per disegnare solo in essa * / board.addEventListener (MouseEvent.MOUSE_DOWN, startPencilTool); board.addEventListener (MouseEvent.MOUSE_UP, stopPencilTool); / * Evidenzia, imposta l'icona dello strumento Pencil sulla versione a colori e nasconde qualsiasi altro strumento * / highlightTool (matita); hideTools (gomma, txt); / * Imposta la variabile di colore attiva in base al valore Trasformazione colore e utilizza quel colore per shapeSize MovieClip * / ct.color = activeColor; shapeSize.transform.colorTransform = ct;
La funzione Start; questa funzione viene chiamata quando si preme Board Movie Clip.
funzione privata startPencilTool (e: MouseEvent): void pencilDraw = new Shape (); // Aggiungiamo una nuova forma per disegnare sempre in cima (in caso di testo, o disegni di gomma) board.addChild (pencilDraw); // Aggiungi quella forma alla scheda MovieClip pencilDraw.graphics.moveTo (mouseX, mouseY); // Sposta la posizione del disegno nella posizione del mouse pencilDraw.graphics.lineStyle (shapeSize.width, activeColor); // Imposta lo spessore della linea sulla dimensione ShapeSize MovieClip e imposta il colore sul bordo attivo corrente board.addEventListener (MouseEvent.MOUSE_MOVE , drawPencilTool); // Aggiunge un listener alla funzione successiva
La funzione Draw; chiamato quando l'utente preme il MovieClip Board e sposta il mouse.
funzione privata drawPencilTool (e: MouseEvent): void pencilDraw.graphics.lineTo (mouseX, mouseY); // Disegna una linea dalla posizione corrente del mouse alla posizione del mouse spostata
Arresta la funzione, eseguita quando l'utente rilascia il mouse.
funzione privata stopPencilTool (e: MouseEvent): void board.removeEventListener (MouseEvent.MOUSE_MOVE, drawPencilTool); // interrompe il disegno
Lo strumento Gomma è praticamente lo stesso dello strumento Pencil, tranne per il fatto che non usiamo colori diversi dal bianco.
funzione privata EraserTool (e: MouseEvent): void / * Esci da tool attivo * / quitActiveTool (); / * Imposta su Attivo * / attivo = "Gomma"; / * Listeners * / board.addEventListener (MouseEvent.MOUSE_DOWN, startEraserTool); board.addEventListener (MouseEvent.MOUSE_UP, stopEraserTool); / * Evidenzia * / highlightTool (gomma); hideTools (matita, txt); / * Usa colore bianco * / ct.color = 0x000000; shapeSize.transform.colorTransform = ct; funzione privata startEraserTool (e: MouseEvent): void pencilDraw = new Shape (); board.addChild (pencilDraw); pencilDraw.graphics.moveTo (mouseX, mouseY); pencilDraw.graphics.lineStyle (shapeSize.width, 0xFFFFFF); // White Color board.addEventListener (MouseEvent.MOUSE_MOVE, drawEraserTool); private function drawEraserTool (e: MouseEvent): void pencilDraw.graphics.lineTo (mouseX, mouseY); function stopEraserTool (e: MouseEvent): void board.removeEventListener (MouseEvent.MOUSE_MOVE, drawEraserTool);
Come puoi vedere, il codice è lo stesso ad eccezione delle modifiche al colore bianco.
Lo strumento di testo ha solo due funzioni; uno incaricato di impostarlo su attivo e l'altro per gestire la scrittura del testo. Diamo un'occhiata:
funzione privata TextTool (e: MouseEvent): void / * Esci da tool attivo * / quitActiveTool (); / * Imposta su Attivo * / attivo = "Testo"; / * Listener * / board.addEventListener (MouseEvent.MOUSE_UP, writeText); / * Evidenzia * / highlightTool (txt); hideTools (matita, gomma); private function writeText (e: MouseEvent): void / * Crea un nuovo oggetto TextField, in questo modo non sostituiremo le vecchie istanze * / var textfield = new TextField (); / * Imposta formati, posizione e focus * / textfield.type = TextFieldType.INPUT; textfield.autoSize = TextFieldAutoSize.LEFT; textfield.defaultTextFormat = textformat; textfield.textColor = activeColor; textfield.x = mouseX; textfield.y = mouseY; stage.focus = campo di testo; / * Aggiungi testo a Board * / board.addChild (campo di testo);
Questo è stato facile, ricorda che puoi cambiare dimensione e colore usando shapeSize e Colors MovieClip.
L'opzione di salvataggio gestita da saveButton utilizzerà la classe PNGEnconder di Adobe per salvare il disegno come file PNG.
funzione privata export (): void var bmd: BitmapData = new BitmapData (600, 290); // Crea un nuovo BitmapData con la dimensione della scheda bmd.draw (scheda); // Disegna la scheda MovieClip in una BitmapImage in BitmapData var ba: ByteArray = PNGEncoder.encode (bmd); // Crea un ByteArray di BitmapData, codificato come file var PNG: FileReference = new FileReference (); // Crea un'istanza di un nuovo oggetto di riferimento file per gestire il file save.addEventListener (Event.COMPLETE, saveSuccessful); // Aggiunge un nuovo listener da ascoltare quando il salvataggio è completo file.save (ba, "MyDrawing.png"); // Salva la proprietà privata di ByteArray come PNG saveSuccessful (e: Event): void saveDialog = new SaveDialog (); // Crea un'istanza di una nuova classe SaveDialog addChild (saveDialog); // Aggiunge SaveDialog MovieClip allo Stage saveDialog.closeBtn.addEventListener (MouseEvent.MOUSE_UP, closeSaveDialog); // Aggiunge un listener al pulsante di chiusura della finestra di dialogo private function closeSaveDialog (e: MouseEvent): void removeChild (saveDialog) ; // Rimuove la finestra di dialogo dello stage funzione privata save (e: MouseEvent): void export (); // Chiama la funzione di esportazione per iniziare il processo di salvataggio
Lo strumento Cancella aggiungerà uno schermo bianco davanti a tutti gli elementi per lasciare la scacchiera pronta per disegnare di nuovo.
private function clearBoard (e: MouseEvent): void / * Crea un rettangolo bianco sopra tutto * / var blank: Shape = new Shape (); blank.graphics.beginFill (0xFFFFFF); blank.graphics.drawRect (0, 0, board.width, board.height); blank.graphics.endFill (); board.addChild (blank);
Per ottenere il valore dei colori che utilizziamo in Colors MovieClip, lo convertiamo in un oggetto BitmapData e utilizziamo il metodo getPixel per ottenere il valore RGB del pixel su cui si fa clic.
funzione privata convertToBMD (): void colorsBmd = new BitmapData (colors.width, colors.height); colorsBmd.draw (colori); private function chooseColor (e: MouseEvent): void pixelValue = colorsBmd.getPixel (colors.mouseX, colors.mouseY); // Ottiene il valore RGB del pixel tratteggiato activeColor = pixelValue; / * Utilizzare un oggetto ColorTransform per modificare il colore shapeSize MovieClip * / ct.color = activeColor; shapeSize.transform.colorTransform = ct;
Aggiungeremo il listener chooseColor nella funzione addListeners più avanti nel codice.
In precedenza, abbiamo dichiarato una variabile per impostare lo strumento attivo o corrente in uso e chiamiamo questa funzione per rimuovere gli ascoltatori corrispondenti in modo da avere un solo strumento attivo.
Fondamentalmente, la funzione controlla la variabile "attiva" in un ciclo di switch, quindi in base al suo valore rimuove gli ascoltatori che ha.
private function quitActiveTool (): void switch (attivo) 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); predefinito :
Dobbiamo anche evidenziare lo strumento attivo e nascondere gli altri:
private function highlightTool (tool: DisplayObject): void tool.visible = true; // Strumento di evidenziazione nel parametro / * Nasconde gli strumenti nei parametri * / private hideTools (tool1: DisplayObject, tool2: DisplayObject): void tool1.visible = false; tool2.visible = falso;
Facciamo clic sul pannello delle dimensioni o su ShapeSize MovieClip per modificare le dimensioni della matita, della gomma e dello strumento testo. La dimensione viene modificata a intervalli di 5 e viene ripristinata quando la dimensione è maggiore o uguale a 50. Dai un'occhiata al codice:
funzione privata changeShapeSize (e: MouseEvent): void if (shapeSize.width> = 50) shapeSize.width = 1; shapeSize.height = 1; / * TextFormat * / textformat.size = 16; else shapeSize.width + = 5; shapeSize.height = shapeSize.width; / * TextFormat * / textformat.size + = 5;
Una funzione per aggiungere tutti gli ascoltatori.
funzione privata 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, save); clearTool.addEventListener (MouseEvent.MOUSE_UP, clearBoard); colors.addEventListener (MouseEvent.MOUSE_UP, chooseColor); sizePanel.addEventListener (MouseEvent.MOUSE_UP, changeShapeSize); shapeSize.addEventListener (MouseEvent.MOUSE_UP, changeShapeSize);
Prova la tua app premendo cmd + return e controlla se tutto funziona come previsto.
Usa tutti gli strumenti, i colori e le funzioni e inizia a disegnare la scena!
Questo filmato Flash può essere facilmente adattato come applicazione di disegno per bambini, ha un'interfaccia utente intuitiva e strumenti di base che possono insegnare come funziona il mouse, pur avendo un certo divertimento colorato nel processo.
È inoltre possibile esplorare il resto di as3corelib e leggere la relativa documentazione per apprendere alcune nuove funzionalità di ActionScript.
Grazie per aver letto!
Accentsconagua