Possiamo creare gli effetti in maniera dichiarativa, partendo dall'oggetto principale per le animazioni, Animate
, oppure facendo uso di alcuni dei suoi derivati, come abbiamo già visto nella lezione precedente.
Vediamo ad esempio una semplicissima applicazione che dichiara un oggetto Animate
:
<?xml version="1.0" encoding="utf-8"?>
<s:Application ...>
<s:Button id="button" label="Bottone"
creationCompleteEffect="animate" />
<fx:Declarations>
<s:Animate target="{button}" id="animate" duration="2000" repeatCount="3" repeatBehavior="reverse" >
<s:SimpleMotionPath property="width" valueFrom="0" valueTo="100" />
<s:SimpleMotionPath property="height" valueFrom="0" valueTo="100" />
</s:Animate>
</s:Application>
Nel codice di sopra viene creata una animazione della durata di 2 secondi, ripetuta per tre volte e con un comportamento della ripetizione (repeatBehavior
) che inverte la variazione precedente.
Attenzione, il repeatBehavior è valido se repeatCount > 1
, inoltre il reverse
occupa una unità di conteggio.
I percorsi di animazione dichiarati variano il primo la proprietà width
, e il secondo la proprietà height
da 0
a 100
pixel, e queste variazioni avvengono in parallelo, cioè contemporaneamente.
L'uso di oggetti Animate
ci consente di creare effetti personalizzati, in maniera molto efficace, ma spesso è preferibile utilizzare uno degli effetti derivati da Animate
, già messi a disposizione dal Flex Framework e che realizzano gli effetti e le animazioni più comuni, componendo al loro interno, diverse azioni.
Ad esempio l'effetto precedente può essere ottenuto più semplicemente e in modo più compatto con l'effetto Resize
, nel modo seguente:
<s:Resize id="resize" repeatCount="3" repeatBehaviour="reverse"
widthFrom="0" heightFrom="0" widthTo="100" heightTo="100"
target="{button}" duration="2000" />
Tutti gli effetti mettono a disposizione degli eventi in corrispondenza dell'inizio e della fine dell'evento e delle ripetizioni; è possibile utilizzare queste eventi per sincronizzare gli effetti con altre azioni come ad esempio l'emissione di un suono.
Un elenco degli oggetti creati da Adobe con lo scopo anzidetto sono tutti racchiusi nel namespace spark.effects
e tra questi abbiamo:
AnimateColor | CrossFade | Fade |
Move | Move3D | Resize |
Rotate | Rotate3D | Scale |
Scale3D | Wipe | WipeDirection |