Articolo su Flash

Personalizzare i Component di Flash 8

Indice

Personalizzare Con Codice

Generalmente, se desiderate più controllo sugli skin, dovete utlizzare il codice. In alcuni casi, questo metodo offre opzioni di personalizzazione non disponibili nei precedenti metodi studiati. Alcuni metodi sono abbastanza semplici, mentre altri possono essere piuttosto complessi.

Utiliizare il Metodo Prototype

Il metodo prototype è il più semplice metodo di programmaziolne. Coinvolge la scrittura del codice che ridefinisce il valore di default delle proprietà degli skin.

Prendiamo come esempio il component Pulsante. Se desiderate impostare i quattro principali valori delle proprietà di skin (falseUpSkin, falseDownSkin, falseOverSkin e falseDisabledSkin), dovreste fare quanto segue—il risultato finale può essere nella cartella Prototype del codice di esempio scaricabile:

Create un simbolo movie clip per ogni stato nella vostra libreria.

Assicuratevi che l'identificatore del collegamento sia impostato per ogni stato. Generalmente è meglio seguire alcune convenzioni standard per la nominazione. Per questo esempio, utilizzo gli identificatori BlueButtonUpSkin, BlueButtonDownSkin, BlueButtonOverSkin e BlueButtonDisabledSkin (guardate Figura 2).

Figura 2. Finestra di dialogo per le Proprietà Complete di Collegamento per l'identificatore BlueButtonUpSkin.

Notate che non ho impostato il simbolo per l'esportazione nel primo fotogramma. Se non non avete intenzione di esportare tutti i vostri simboli nel primo fotogramma, potete lasciare l'opzione di Esporta nel primo Fotogramma selezionata e saltare allo Step 5.
Create un nuovo simbolo movie clip e chiamatelo FirstFrameExporter. Il simbolo non necessita di avere un identificatore di collegamento. Nel nuovo simbolo movie clip creerete due fotogrammi.
Nel primo fotogramma avrete bisogni di una funzione di stop(). Posizionate i quattro simboli realizzati nello Step 1 sul secondo fotogramma (vedete Figura 3).

Figura 3.Simbolo Completed FirstFrameExporter Completo
Posizionate una copia del nuovo simbolo sullo Stage. Notate che risulta essere solo un elemento vuoto con visibile il punto di regiastrazione. Generalmente è più semplice posizionare questo simbolo al punto di registrazione 0,0.

Posizionate il codice che imposterà i valori delle proprietà uguali agli identificatori di collegamento. Il modo più semplice è aprire il file FLA, andare sulla Timeline principale e inserire il seguente codice:

mx.controls.Button.prototype.falseUpSkin = "BlueButtonUpSkin";
mx.controls.Button.prototype.falseDownSkin = "BlueButtonDownSkin";
mx.controls.Button.prototype.falseOverSkin = "BlueButtonOverSkin";
mx.controls.Button.prototype.falseDisabledSkin = "BlueButtonDisabledSkin";

Posizionate un component Pulsante sullo Stage.
Selezionate Controlli > Prova Filmato per vedere il risultato.

Questo metodo è il più semplice per personalizzare i component tramite il codice. Ha il vantaggio di permettere la definizione dei valori delle proprietà degli skin di tutte le istanze di un component in un unica posizione. Con l'esempio precedente, tutti i component pulsante che aggiungete al vostro progetto utilizzaranno i nuovi valori di default invece dei valori originali con cui è stato impostato il component.

Questo metodo ha anche il vantaggio di permettervi di impostare i valori delle proprietà degli skin per subcomponent di component. Un buon esempio di questo uso è il component ComboBox che utilizza un component ListBox. Se impostate i valori delle proprietà degli skin per un component ListBox utilizzando questo metodo, il component ComboBox ListBox all'interno del component ListBox utilizzarà automaticamente i nuovi valori.

Questo metodo ha comunque un lato negativo, che potrebbe non interessarvi—l'impossibilità di personalizzare il component sulla base delle istanze. Molte volte questo non è necessario, ma ci sono volte in cui desiderate personalizzare i valori delle proprietà di un component per una istanza specifica. In questo caso, potete utilizzare un altro metodo che richiede il codice.

Passare i Valori con initObject

Un altro approccio al metodo prototype è passare i nuovi valori delle proprietà di skin all'oggetto initObject quando importiamo un component tramite codice, invece di impostarli tramite il metodo prototype. Per utilizzare questo metodo, potete seguire questi step:

Aprite il file FLA che avete creato nel precedente esempio.
Rimuovete il codice posizionato nella Timeline principale e cancellate l'istanza del component Pulsante dallo Stage. Assicuratevi di non eliminare l'istanza dalla libreria—vi servirà per importare il component tramite codice.

Sulla Timeline principale, create un oggetto initObject con le proprietà e valori di skin e passate l'oggetto alla chiamata createClassObject(), utilizzando il seguente codice:

var initObj:Object = new Object();
initObj.falseUpSkin = "BlueButtonSkin";
initObj.falseDownSkin = "BlueDownSkin";
initObj.falseOverSkin = "BlueOverSkin";
initObj.falseDisabledSkin = "BlueDisabledSkin";
createClassObject(mx.controls.Button,"myButton",1,initObj);

Selezionate Controlli > Prova Filmato per vedere il risultato.

Questo metodo offre diversi benefici. Per esempio, permette di specificare il valore dei component in base alle istanze. Nonostante alcune applicazioni possono vivere con un unico skin per component, incontrerete spesso situazioni in cui vi serve un controllo maggiore.

Anche questo metodo ha alcuni risvolti negativi Il più ovvio è che richiede di specificare questa informazioni per ogni istanza di un component. Può diventare tedioso farlo per ogni component che pensate di utilizzare. Un altro requisito è quello di collegare il component via codice. Importo quasi sempre i miei component via codice ma se non siete abituati a farlo e posizionate un component sullo Stage, questo metodo non funziona.

Al di là di tutto, preferisco utilizzare una combinazione del metodo initObject e del metodo prototype nelle mie applicazioni. Utilizzo il metodo prototype per specificare i valori generali di un component con una applicazione e il metodo initObject per sovrascrivere questi valori valutando caso per caso.

Subclassing di una Component Class

L'ultimo metodo che desidero descrivere è il subclassing di una component class per definire i valori delle proprietà di skin. Questo approccio vi permette di creare una subclass del component che definisce nuovi valori di skin.

Seguite questi step:

Create un nuovo file FLA e salvatelo.
Aprite il file StandardComponents.fla posizionato qui:
- (Windows) C:\Program Files\Macromedia\Flash 8\<language>\Configuration\ComponentFLA
- (Macintosh) Hard Drive/Users/<username>/Library/Application Support/Macromedia/Flash 8/<language>/Configuration/ComponentFLA
Aprite le librerie di entrambi i file FLA.
Create una nuova cartella nella libreria nel file FLA vuoto chiamato Flash UI Components 2.
Individuate la base del component Pulsante nel file StandardComponents.fla e trascinatelo nella cartella di libreria creata nello Step 4. Il simbolo è nella libreria Flash UI Components 2. La vostra libreria ora dovrebbe apparire simile a Figura 4.

Figura 4.Copiare i simboli relativi al component Pulsante nel pannello della Libreria.
Create un'altra cartella nel pannello della Libreria chiamato My Components.
Create un duplicato del simbolo principale del component Pulsante nella nuova cartella.
Specificate un identificatore e una classe per il simbolo duplicato. Per questo esempio, ho utilizzato com.rewindlife.controls.MyButton per entrambi e deselezionato la casella Esporta nel primo Fotogramma (vedete Figura 5).

Figura 5.Finestra di dialogo Simbolo Duplicato Completo
Create una cartella chiamata Skins nella cartella di libreria My Components.
Create quattro skin per i differenti stati del Pulsante e includete l'identificatore di collegamento come avete fatto allo Step 1 e 2 del metodo prototype. Oppure, potete copiare il simbolo dalla libreria dell'esempio del metodo prototype in questo. La libreria dovrebbe apparire come in Figura 6.

Figura 6.Skin aggiunti e simbolo MyButton.
Fate doppio click sul simbolo MyButton e selezionate il secondo fotogramma del livello assets. Trascinate quattro nuovi skin e posizionateli sul secondo fotogramma per assicurarvi che vengano esportati correttamente al momento in cui Flash compilerà i vostri nuovi component personalizzati (vedere Figura 7).

Figura 7. Simbolo MyButton con gli skin

Ora avete completato tutto il lavoro prima di iniziare a scrivere codice. L'ultimo passo è scrivere la classe del vostro component, che sarà una sottoclasse della classe Button.
Create una nuova cartella per posizionare la vostra classe nel pacchetto corretto (in questo esempio, il pacchetto è com.rewindlife.controls, quindi create la struttura della cartella com/rewindlife/controls), create un nuovo file ActionScript chiamato MyButton.as e salvatelo in questa cartella (vedere Figura 8).

Figura 8. Struttura della cartella con il nuovo file della classe

Inserite il seguente codice nel file MyButton.as:

// Buona norma è includere questa informazione
//e in alcuni casi è necessario
import mx.controls.Button

class com.rewindlife.controls.MyButton extends Button
{
    //Questi valori sono necessari per tutti i component;
    //impostate il nuovo nome del simbolo uguale all'identificatore
    //del cvostro component.
    //
    //Impostate l'associazione del simbolo al relativo
    //nome della classe.  
    //
    //Potete copiare questi valori dalla originale classe Button
    //come punto di partenza; il file della Classe può essere trovato qui:
    //C:\Program Files\Macromedia\Flash 8\<language>\First Run\Classes\mx\controls (Windows)
    //Hard Drive/Applications/Flash 8/First Run/Classes/mx/controls (Mac)
    
    static var symbolName:String = "com.rewindlife.controls.MyButton";
    static var symbolOwner = com.rewindlife.controls.MyButton;
    
    //Qui definite gli SkinID. //Ancora potete semplicemente aprire la 
    //classe Button e copiare ed incollare gli attuali valori come buon
    //punto di partenza
    var falseUpSkin:String  = "BlueButtonUpSkin";
    var falseDownSkin:String  = "BlueButtonDownSkin";
    var falseOverSkin:String = "BlueButtonOverSkin"
    var falseDisabledSkin:String = "BlueButtonDisabledSkin";
}

Posizionate il simbolo component MyComponent nello Stage principale e selezionate Controlli>Prova Filmato per vedere il risultato.

Come avete visto, questo metodo è quello che impiega maggiormante metodi di programmazione. Inizialmente non sembra ottimale ma decisamente porta molti vantaggi. Per esempio, permette di creare differenti pulsanti e riutilizzae facilmente un pulsante senza dover ridefinire i valori delle proprietà degli skin ogni volta, come dovete fare con il metodo initObject.

Mi piace utilizzare questo metodo quando lavoro su un progetto che ha diverse interfacce e quelle interfacce condividono alcune comuni definizioni delle proprietà degli skin. Con questo metodo posso creare un pulsante e riutilizzarlo nei miei progetti senza dover riscrivere nulla. Se dovessi voler cambiare le proprietà degli skin per questi component in un secondo momento, posso modificare un singolo file di classe e riesportare tutte le mie interfacce con i valori aggiornati. Questo è anche il solo metodo di programmazione che mi permette di utilizzare component che sono personalizzati tramite codice senza nessun codice—questo è quello che ho impostato.

Personalizzazione Più Avanzata

Fino ad ora avete utilizzato dei simboli grafici in libreria per rappresentare uno specifico skin. Questo approccio è il più semplice e diretto. Comunque, dovrestre almeno conoscere un'altra opzione che vi permette di scrivere codice per impostare uno skin invece di una immagine grafica statica. Ricordatevi che uno skin è solo un movie clip e un movie clip può essere molto di più di un grafico statico. Tutto ciò che fate in un movie clip può in realtà essere uno skin. Per esempio, se desiderate utilizzare le Drawing API per disegnare i vostri skin invece di utilizzare simboli di libreria statici, lo potete fare. Nel tema di default (Halo) che viene fornito con Flash, Macromedia fa esattamente questo: Fa un uso estensivo delle Drawing API per renderizzare uno skin invece di utilizzare un grafico statico in libreria.

Quali sono i vantaggi di questo approccio? Il vantaggio più grande di utilizzare il codice per renderizzare uno skin è la possibilità di avere maggior controllo su come uno skin si ridimensiona. Di solito, quando create skin personalizzati per il vostro utilizzo, conoscete la dimensione definita e potete facilmente costruirli. Macromedia, ha voluto costruire gli skin che potessero scalare correttamente e renderizzare perfettamente la dimensione del component.

Dove Andare da Qui

Avete percorso una lunga strada per esplorare i varimetodi per personalizzare i component di Flash. A questo punto, dovreste comprendere meglio le opzioni ed essere in grado di personalizzare i component delle vostre applicazioni.

Per informazioni relazionate fate riferimento alle seguenti risorse:

Personalizzare il component FLVPlayback di Dan Carr
Personalizzare il Cmponent V2 ProgressBar* (moock.org)
Personalizzare i component di Flash MX 2004* (ultrashock.com)
Sviluppare i component in Flash MX 2004* (ultrashock.com)
Introduzione all'Architettura dei Component V2* (ultrashock.com)