Share
In questo Tutorial Premium impareremo come manipolare Bitmap in ActionScript 3 per produrre un'applicazione utile per il ritaglio di immagini. Continua a leggere!
Immagine di Swami Stream con licenza Creative Commons.
Usando gli strumenti di Flash creeremo un'interfaccia accattivante che sarà alimentata da diverse classi di ActionScript 3 come MouseCursor, Bitmap, BitmapData, Rectangle, Point, Tween, FileReference e persino librerie esterne.
L'utente sarà in grado di ritagliare più volte un'immagine per selezionare successivamente l'opzione migliore e salvarla sul disco.
Apri Flash e crea un documento di 600 pixel di larghezza e 400 pixel di altezza. Imposta la frequenza dei fotogrammi su 24 fps.
Un'interfaccia simile a quella di mac darà forza al nostro codice, che coinvolge più pulsanti basati sulla timeline, cursori personalizzati e altro ancora.
Continuare con i passaggi successivi per imparare come creare questa GUI.
Nessuna scienza in background, basta creare un rettangolo nero 600x400px e centrarlo sul palco. Puoi anche cambiare il colore di sfondo nelle Proprietà dello stage.
Avremo bisogno di un'immagine da ritagliare, selezionare l'immagine che preferisci e importarla sul palco (Cmd + R).
Immagine di Swami Stream con licenza Creative Commons.
Creeremo un cursore personalizzato per utilizzarlo come feedback per l'utente, per fargli sapere dove può tagliare.
Seleziona lo strumento Rettangolo (R) e crea un rettangolo bianco largo 3px e 17px.
Duplica la forma (Cmd + D) e ruotala di 90 gradi per formare una croce.
Ripeti questo processo con un rettangolo nero alto 1px largo, 15 px.
Converti la forma finale in MovieClip (F8) e imposta il nome dell'istanza su cursore.
Questi pulsanti gestiscono le azioni secondarie in base al ritaglio, queste azioni sono:
Seleziona lo Strumento Rettangolo Primitivo (R) e modifica il raggio dell'angolo a 10, disegna un rettangolo 70x18 px e riempilo con # 666666.
Duplica la forma (Cmd + D), ridimensionala a 68x16 px e modifica il suo colore con questo gradiente lineare # 222222 a # 444444. Utilizzare lo strumento Trasformazione sfumatura (F) per ruotare la sfumatura.
Quindi, utilizzare lo strumento Testo (T) per scrivere un'etichetta per il pulsante. Usa questo formato: Lucida Grande Regular, 12pt, #CCCCCC.
Usa la stessa tecnica per creare i pulsanti Annulla e Cancella.
Un pulsante GUI ben fatto ha 4 stati:
Converti i pulsanti in MovieClip e fai doppio clic su di essi per accedere alla modalità di modifica. Apri il pannello Timeline (Finestra> Timeline).
Noterai che il Su lo stato è già stato creato, queste sono le forme che hai convertito in MovieClip.
Premi F6 per creare un nuovo Frame e modifica il riempimento del gradiente di forma centrale con # 222222, # 5B5B5B. Questo sarà il Al di sopra di stato.
Per il Giù stato, selezionare la forma centrale e capovolgerla verticalmente (Modifica> Tranform> Capovolgi verticalmente).
Il Colpire lo stato è di default, l'area di forma più grande, poiché l'area cliccabile che vogliamo è l'intero pulsante, non ci sarà bisogno di creare una cornice per questo.
Quando tutti i tuoi pulsanti sono pronti, esci dalla modalità di modifica e posizionali come mostrato nella seguente schermata. Il testo bianco indica il nome dell'istanza del pulsante.
Una barra dei pulsanti verrà utilizzata per posizionare ed evidenziare il pulsante di ritaglio.
Usa lo strumento Rettangolo per creare un rettangolo di 600x50 px e riempilo con questo riempimento sfumato #AFAFAF su # C4C4C4. Allinea la barra nella parte inferiore del palco.
Per creare un effetto rilievo, disegna due linee 600x1 px e posizionale sopra la barra dei pulsanti, riempi quella superiore con # 858585 e l'altra con # D8D8D8.
Il pulsante Ritaglia avvierà la funzione ActionScript principale che manipolerà le bitmap nello stage.
Con lo strumento rettangolo, crea un rettangolo 33x6 px e 26 x 6 px e utilizzali per formare un angolo retto.
Duplica la forma e ruotala di 180 gradi per formare un quadrato.
Sposta la forma duplicata 5px su e 5px a destra.
Riempi la forma risultante con questo riempimento sfumato: # 444444 a # 222222. Utilizzare lo strumento Trasformazione sfumatura per ruotare il riempimento.
Puoi aggiungere più dettagli aggiungendo un'ombra; duplica la forma corrente e spostala 1 px in basso e 1 px a destra.
Infine, converti la forma in MovieClip e assegnagli il nome cropButton.
La forma del ritaglio è un'immagine che verrà utilizzata per indicare l'area che verrà ritagliata.
Seleziona lo strumento Rettangolo e cambia il colore del tratto in bianco e il colore di riempimento in bianco con 1% alfa (questo ci aiuterà a trascinare la forma del ritaglio). Disegna un quadrato di 10 x 10 px e centralo.
Seleziona una parte 1px del quadrato e cambia il suo colore in nero.
Duplica la forma e fai lo stesso su tutto il lato.
Ripeti questo processo su tutti i lati.
Converti il risultato in MovieClip e chiamalo cropShape, segnare il Esporta per ActionScript scatola.
Fare doppio clic per accedere alla modalità di modifica, creare un nuovo fotogramma chiave nel fotogramma 5 e ruotare la forma di 180 gradi.
Aggiungi altri 4 fotogrammi e esci dalla modalità di modifica.
Questo termina la parte grafica, iniziamo con ActionScript!
Creare una nuova classe ActionScript 3.0 (Cmd + N) e salvarla come Main.as nella tua cartella di classe.
La parola chiave package ti consente di organizzare il tuo codice in gruppi che possono essere importati da altri script, si consiglia di nominarli partendo da una lettera minuscola e utilizzare gli intercaps per le parole successive, ad esempio: le mie classi. È anche comune denominarli utilizzando il sito Web della tua azienda: com.mycompany.classesType.myClass.
In questo esempio, stiamo usando una singola classe, quindi non c'è davvero bisogno di creare una cartella delle classi.
pacchetto
Queste sono le classi che dovremo importare affinché la nostra classe funzioni, il importare direttiva rende disponibili classi e pacchetti definiti esternamente al codice.
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; importare fl.transitions.Tween; importare fl.transitions.easing.Strong; import flash.net.FileReference; import flash.utils.ByteArray; import com.adobe.images.JPGEncoder; import flash.events.Event;
Per salvare il ritaglio dell'immagine, useremo una classe che fa parte di as3corelib. Segui il link e scarica la libreria.
Qui dichiariamo la classe usando il classe definizione della parola chiave seguita dal nome che vogliamo per la classe, ricorda che devi salvare il file usando questo nome.
Il si estende keyword definisce una classe che è una sottoclasse di un'altra classe. La sottoclasse eredita tutti i metodi, le proprietà e le funzioni, in questo modo possiamo usarli nella nostra classe.
public class Main estende Sprite
Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su di loro.
private var cropShape: CropShape; // Questa è un'istanza di cropShape creata prima del punto var privatoX: Number; // Questa variabile manterrà la posizione x in cui viene avviata la forma del ritaglio private var pointY: Number; // Questo varterrà la posizione y in cui viene avviata la forma del ritaglio var privata aggiunta: Boolean; // Controlla se la forma del raccolto è nelle immagini var private di stage: Array = new Array (); // Memorizza le immagini delle colture private var bmd: BitmapData; // Un oggetto dati bitmap, utilizzato per manipolare i dati dell'immagine principale private var bmd2: BitmapData; // Un secondo oggetto dati bitmap, questo conterrà i dati dell'immagine che vogliamo salvare private var croppedImage: Sprite; // Contiene le immagini ritagliate private var cropThumb: int = 0; // Il numero di pollici già creato private var thumbPosX: Array = [5, 5, 5, 505, 505, 505]; // Memorizza le posizioni x dei pollici private var thumbPosY: Array = [37, 135, 233, 37, 135, 233]; // Memorizza le posizioni y dei pollici interpolazione privata var: Tween; // Un oggetto interpolato, la libreria di animazione predefinita in flash private var fileRiferimento: FileReference; // Usato per salvare il file su disco private var byteArray: ByteArray; // Memorizza i dati binari, usati per salvare il file su disco private var jpg: JPGEncoder = new JPGEncoder (); // Il codificatore di immagini private var ingrandito: Boolean; // Controlla se l'anteprima è ingrandita o ridotta privativa var currentCrop: Bitmap; // Contiene l'anteprima zoomata corrente, quella che verrà salvata var varicorrente privato: *; // Utilizzato per sapere quale pollice è attivo var privato latestX: Number; // Controlla l'ultima x del pollice ingrandito var privativoY: Numero; // Controlla l'ultima y del pollice ingrandito
Il costruttore è una funzione che viene eseguita quando viene creato un oggetto da una classe, questo codice è il primo ad essere eseguito quando si crea un'istanza di un oggetto o viene eseguita utilizzando la classe documento.
funzione pubblica Main (): void
Questi sono gli ascoltatori che verranno definiti all'avvio, in pratica aggiungono eventi relativi al mouse ai pulsanti.
image.addEventListener (MouseEvent.MOUSE_DOWN, getStartPoint); image.addEventListener (MouseEvent.MOUSE_UP, stopDrawing); cropButton.addEventListener (MouseEvent.MOUSE_UP, ritaglio); 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);
Questo codice nasconde i pulsanti che non sono in uso al momento.
saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false; cursor.visible = false;
La seguente funzione rende visibile il cursore personalizzato quando il puntatore del mouse si trova sopra l'immagine principale.
private function customCursor (e: MouseEvent): void cursor.visible = true; Mouse.hide (); cursor.startDrag (true);
Nasconde il cursore personalizzato quando il puntatore del mouse lascia l'immagine principale.
funzione privata removeCustomCursor (e: MouseEvent): void cursor.visible = false; Mouse.show (); cursor.stopDrag ();
Una funzione molto importante, ottiene e memorizza le coordinate del clic del mouse e posiziona il clip di ritaglio cropShape in essi, il valore corrente verrà utilizzato in un secondo momento per determinare la dimensione della forma del ritaglio.
funzione privata getStartPoint (e: MouseEvent): void pointX = mouseX; pointY = mouseY; if (! added) cropShape = new CropShape (); cropShape.x = pointX; cropShape.y = pointY; addChild (cropShape); aggiunto = true; else removeChild (cropShape); cropShape = new CropShape (); cropShape.x = pointX; cropShape.y = pointY; addChild (cropShape);
Aggiunge un listener nell'immagine principale per espandere la forma del ritaglio sul movimento del mouse e aggiunge all'ascoltatore l'interruzione dell'espansione al passaggio del mouse.
image.addEventListener (MouseEvent.MOUSE_MOVE, drawCropShape); cropShape.addEventListener (MouseEvent.MOUSE_UP, stopDrawing);
Espande il cropShape in base alle coordinate salvate e quelle correnti.
funzione privata drawCropShape (e: MouseEvent): void cropShape.width = mouseX - pointX; cropShape.height = mouseY - pointY;
Arresta l'espansione della forma del ritaglio e aggiunge alcuni listener che verranno utilizzati dalle funzioni successive.
funzione privata 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);
Usa la classe Mouse per manipolare il cursore del mouse, questo codice mostrerà il cursore Mano quando il mouse si trova sopra la forma di ritaglio.
funzione privata showHandCursor (e: MouseEvent): void Mouse.cursor = MouseCursor.HAND;
Ripristina il comportamento originale del cursore del mouse.
funzione privata hideHandCursor (e: MouseEvent): void Mouse.cursor = MouseCursor.AUTO;
La forma del raccolto sarà trascinabile, questo aiuterà a selezionare l'area che vogliamo facilmente.
funzione privata dragCrop (e: MouseEvent): void cropShape.startDrag ();
Arresta il trascinamento del mouse verso l'alto.
funzione privata stopDragCrop (e: MouseEvent): void cropShape.stopDrag ();
Questa funzione gestirà il ritaglio dell'immagine, utilizzando i dati bitmap delle immagini e la classe sprite per creare una serie di miniature che saranno elegibili per salvare.
crop di funzioni private (e: MouseEvent): void
Le righe successive gestiscono i dati bitmap richiesti per ritagliare l'immagine.
bmd = new BitmapData (image.width, image.height, false, 0x00000000); // Crea un nuovo oggetto dati bitmap usando la dimensione dell'immagine principale bmd.draw (immagine); // Copia i dati dell'immagine principale sull'istanza bmd2 = new BitmapData (cropShape.width, cropShape.height, false, 0x00000000); // Crea un nuovo dato bitmap utilizzando la dimensione effettiva della forma del ritaglio
La riga successiva copia i pixel dell'immagine principale situati nella posizione della forma di ritaglio sull'oggetto dati bitmap BMP2.
I parametri funzionano come elencato di seguito:
bmd2.copyPixels (bmd, new Rectangle (cropShape.x - image.x, cropShape.y - image.y, cropShape.width, cropShape.height), new Point (0, 0));
Lasciamo che l'utente ritiri sei volte e salvi quelle in anteprima a lato dell'immagine principale, per questo creiamo una nuova bitmap che memorizzerà i dati bitmap della miniatura ritagliata e quindi la aggiungiamo come sprite 90x70px.
Aggiungiamo anche un listener per ingrandire e ridurre la miniatura.
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);
Quando creiamo un nuovo sprite in ogni crop, l'ultimo sprite sarà inaccessibile usando il suo nome di istanza, il tempo di usare l'array che abbiamo creato prima.
Questo array memorizzerà le miniature create per accedervi al di fuori della funzione.
images.push (pollice);
Quando l'utente preme il pulsante di ritaglio viene creata una miniatura utilizzando l'immagine ritagliata, questa miniatura viene successivamente animata ai lati dell'applicazione in base a una variabile.
La posizione dell'anteprima è determinata da questa variabile e il thumbPos array.
tween = new Tween (thumb, "x", Strong.easeOut, cropShape.x, thumbPosX [cropThumb], 0.5, true); tween = new Tween (thumb, "y", Strong.easeOut, cropShape.y, thumbPosY [cropThumb], 0.5, true); cropThumb ++; // Aggiunge uno al numero di pollici
La funzione successiva viene utilizzata per salvare l'immagine sul disco.
Innanzitutto, utilizza il metodo jpg.encode () e salva i dati risultanti nell'array di byte, quindi l'oggetto fileReference viene utilizzato per visualizzare una finestra di dialogo di salvataggio in cui l'utente può rinominare il file creato (sebbene sia impostato un nome predefinito).
funzione privata saveImage (e: MouseEvent): void fileReference = new FileReference (); byteArray = jpg.encode (currentCrop.bitmapData); fileReference.save (byteArray, "Crop.jpg"); fileReference.addEventListener (Event.COMPLETE, saveComplete);
Una volta salvata l'immagine, le miniature vengono rimosse dallo stage e dall'array. I pulsanti sono nascosti e l'immagine principale ritorna.
funzione privata 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;
C'è anche un pulsante Annulla che ti permetterà di sfogliare le miniature senza salvare nessuno di loro.
Quando viene premuto questo pulsante, restituisce tutte le miniature alla posizione e riporta l'immagine principale per ritagliare più (se possibile).
funzione privata cancel (e: MouseEvent): void tween = new Tween (currentSprite, "width", Strong.easeOut, currentSprite.width, 90,0.5, true); tween = new Tween (currentSprite, "height", Strong.easeOut, currentSprite.height, 70,0.5, true); tween = new Tween (currentSprite, "x", Strong.easeOut, currentSprite.x, latestX, 0.5, true); tween = new Tween (currentSprite, "y", Strong.easeOut, currentSprite.y, latestY, 0.5, true); tween = new Tween (immagine, "y", Strong.easeOut, image.y, stage.stageHeight / 2 - image.height / 2 - 30,0.5, true); aggiunto = falso; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false; cropButton.visible = true; ingrandito = falso;
Se l'utente ha ritagliato le 6 volte consentite dall'app, e nessuno di loro è il risultato previsto, c'è sempre un modo per ritagliare ancora più volte. Questo è il compito che otterrà il pulsante di cancellazione.
Rimuove tutte le anteprime dal palco e dall'array, restituisce l'immagine principale allo stage e nasconde i pulsanti non utilizzati.
funzione privata 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;
Faremo uso della Document Class in questo tutorial, se non sai come usarlo o sei un po 'confuso per favore leggi questo QuickTip.
Il risultato finale è una utile applicazione Image Cropping che ti insegna come manipolare le bitmap per modificarle, e quasi senza saperlo, hai anche imparato come creare e implementare un'interfaccia molto bella.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Accentsconagua