Share
In questo tutorial, impareremo come utilizzare AS3 per creare un RIA in grado di modificare le proprietà del colore di un'immagine, come Luminosità, Contrasto, Tonalità e Saturazione. Continuare a leggere!
Diamo un'occhiata al risultato finale su cui lavoreremo:
Useremo una classe ActionScript nativa che otterrà nuovi valori da un componente Slider e quindi li applicherà all'immagine di destinazione utilizzando la classe ColorMatrixFilter.
Avvia Flash e crea un nuovo documento. Imposta la dimensione dello stage su 557x400px e la frequenza fotogrammi su 24 fps.
L'interfaccia sarà molto semplice; solo un'immagine nello stage che verrà poi modificata dai componenti Sliders nel pannello Adjust Color.
Avremo bisogno di un'immagine per testare la nostra applicazione, selezionarla dalla tua collezione personale o scaricarne una per il test.
Questa è l'immagine della demo, ottenuta da Flickr, con una licenza Creative Commons.
Fiore di Antonio Manchado
Crea un pannello e quattro cursori con nomi di istanze come mostrato nell'immagine seguente:
Puoi aggiungere barre sopra i cursori come mostrato per migliorare l'aspetto.
Impostiamo i valori dei componenti Slider.
Questi sono ottenuti dai valori minimi e massimi validi della classe AdjustColor, che useremo per regolare ciascuna proprietà:
Crea una nuova classe ActionScript 3.0 (Cmd + N) e salvala come Main.as nella tua cartella di classe.
Crea la tua struttura di base per iniziare a scrivere il tuo codice.
> pacchetto import flash.display.Sprite; public class Main estende Sprite public function Main (): void // constructor code
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 fl.motion.AdjustColor; import flash.filters.ColorMatrixFilter; importare fl.events.SliderEvent;
Queste sono le variabili che useremo; leggi i commenti nel codice per saperne di più su di loro.
colore var privato: AdjustColor = new AdjustColor (); // Questo oggetto manterrà le proprietà dei colori private var filter: ColorMatrixFilter; // Memorizzerà il filtro colorato modificato per cambiare l'immagine
Il costruttore è una funzione che viene eseguita quando un oggetto viene creato da una classe; questo codice è il primo ad essere eseguito quando si crea un'istanza di un oggetto, o in questo caso viene eseguito quando viene caricato il file SWF, come nella classe del documento.
Eseguirà le azioni necessarie per avviare l'applicazione.
funzione pubblica finale Main (): void // Code
La matrice di colori verrà generata dai valori memorizzati nelle proprietà AdjustColor; abbiamo bisogno di impostare i valori iniziali per queste proprietà al fine di ottenere una matrice corretta. Se non lo facciamo, verrà generato un array con valori null.
/ * Necessario per creare Matrix iniziale * / color.brightness = 0; color.contrast = 0; color.hue = 0; color.saturation = 0; / * Questa funzione aggiungerà i necessari listener di eventi * / addListeners ();
Questa funzione aggiunge listener ai componenti Slider per chiamare determinate funzioni ogni volta che i loro valori cambiano.
funzione finale privata addListeners (): void colorPanel.brightSL.addEventListener (SliderEvent.CHANGE, adjustBrightness); colorPanel.contSL.addEventListener (SliderEvent.CHANGE, adjustContrast); colorPanel.hueSL.addEventListener (SliderEvent.CHANGE, adjustHue); colorPanel.satSL.addEventListener (SliderEvent.CHANGE, adjustSaturation);
Questa funzione modifica il valore di Luminosità, ottenendo i suoi dati da brightSL componente di scorrimento.
funzione finale privata adjustBrightness (e: SliderEvent): void color.brightness = e.target.value; aggiornare();
Questa funzione modifica il valore del Contrasto, ottenendo i suoi dati dal contSL componente di scorrimento.
funzione finale privata adjustContrast (e: SliderEvent): void color.contrast = e.target.value; aggiornare();
Questa funzione modifica il valore di tonalità, ottenendo i suoi dati dal hueSL componente di scorrimento.
private final function adjustHue (e: SliderEvent): void color.hue = e.target.value; aggiornare();
Quando modifichi la tonalità di un colore, lo sposti attorno alla ruota dei colori per il numero specificato di gradi.
Questa funzione modifica il valore di Saturazione, ottenendo i suoi dati dal satSL componente di scorrimento.
private final function adjustSaturation (e: SliderEvent): void color.saturation = e.target.value; aggiornare();
Quando modifichi la saturazione di un colore, lo sposti verso o lontano dal centro della ruota dei colori.
Questa funzione è chiamata in ogni cambio del cursore. Si rinnova il ColorMatrixFilter valore e lo applica all'immagine in scena.
private final function update (): void filter = new ColorMatrixFilter (color.CalculateFinalFlatArray ()); image.filters = [filtro];
Faremo uso della Document Class in questo tutorial, se non sai come usarlo o sei un po 'confuso per favore leggi questo QuickTip.
Sei pronto per testare - premi Cmd + Invio per esportare la tua applicazione e vederla funzionare!
Hai imparato un'eccellente tecnica di manipolazione delle immagini, sperimentale!
Grazie per aver letto questo tutorial, spero che tu l'abbia trovato utile!
Accentsconagua