Gli effetti

In questo capitolo ci occuperemo degli effetti messi a disposizione dal Flex Framework e della loro applicazione grazie a Flash Builder. Definiamo un effetto in questo modo: un effetto è un elemento che permette di modificare l'aspetto di un componente in un intervallo di tempo. Questo strumento ci consente di migliorare l'esperienza utente e la gradevolezza delle applicazioni.

Possiamo modificare diverse proprietà del componente, tipicamente agiamo sulle proprietà legate alla visualizzazione del componente, ma possiamo scegliere di lavorare anche con i suoni, ad esempio, con il componente SoundEffect.

Come per i componenti, Flash Builder ci propone due tipi di effetti:

• effetti Spark possono essere applicati a qualsiasi controllo, sia Spark che Halo, comprese le primitive grafiche FGX
• effetti Halo possono essere applicati quasi esclusivamente ai controlli Halo

I due tipi di effetti convivono nelle applicazioni Flex ma data la duttilità dei controlli Spark, ma Adobe sconsiglia l'utilizzo degli effetti Halo nelle nuove applicazioni.

Dichiarare un effetto

Per dichiarare un effetto in Flash Builder utilizziamo la modalità Source e aggiungiamo alla nostra applicazione il tag <fx:Declarations>.

<fx:Declarations>
   <!-- qui in nostri effetti -->
</fx:Declarations>

All'interno di questo tag definiamo gli effetti specificando:

• obbligatoriamente i controlli da animare attraverso la proprietà target di tipo oggetto o targets di tipo Array
• opzionalmente o obbligatoriamente, in base al tipo di effetto, la/le proprietà degli oggetti target da animare
• opzionalmente la durata della animazione attraverso la proprietà duration espressa in millisecondi
• opzionalmente il numero delle ripetizioni dell'effetto attraverso la proprietà repeatCount

Modificare le proprietà

Tutti gli effetti Spark derivano dalla classe Animate che a sua volta deriva dalla classe base Effect (su cui sono basati gli effetti Halo), queste classi forniscono assieme tutte le proprietà e i metodi base delle animazioni Spark.

La classe Animate ha un proprietà motionPaths di tipo array che contiene un insieme di oggetti MotionPath che, finalmente, rappresentano le singola proprietà da modificare nell'oggetto target.

Possiamo agire su molte proprietà: dalle coordinate dell'oggetto rispetto al contenitore (x, y, z), allo zoom, alla variazione della trasparenza.

Le proprietà numeriche le modifichiamo aggiungendo al nome della proprietà i suffissi "From" e "To" in questo modo: xxxFrom e xxxTo, con xxx si intende il nome della proprietà: ad esempio yFrom, yTo o widthFrom e widthTo.

Questi parametri "speciali" si impostano a coppia e rappresentano il valore iniziale e finale della proprietà che vogliamo modificare. I valori che assumono le proprietà nelle posizioni intermedie, durante l'esecuzione dell'effetto, sono calcolate automaticamente attraverso interpolazione (regolabile con le funzioni di "easing").

Possiamo personalizzare l'incremento dei valori attraverso la direttiva xxxBy, dove al solito xxx rappresenta il nome della proprietà: ad esempio heightBy. Va da sé che le proprietà xxxFrom, xxxTo e xxxBy sono mutualmente esclusive: se si utilizzano le prime due non si può utilizzare l'ultima e viceversa.

Un semplice esempio

Supponiamo di voler spostare un bottone di 100 pixel verso destra, possiamo utilizzare l'effetto Move in questo modo:

<s:Application ...>
  <s:Button id="bottone" label="Spostami" click="sposta.play();" /> 
  <fx:Declarations>
    <s:Move id="sposta"
            target="{bottone}"
            xBy="100"
            duration="1000"/>
  </fx:Declarations> 
</s:Application>

Abbiamo dichiarato uno spostamento di 100 pixel, che identifichiamo come "sposta", che applicheremo al target "bottone" e che dura 1 secondo.

Abbiamo anche collegato questo spostamento all'evento click del bottone, nelle prossime lezioni esamineremo meglio le modalità di avvio degli effetti.