4) Flex - Come creare animazioni con States e Transitions

La magia ottenibile con pochi click

Una peculiarità di Flex è la possibilità di creare animazioni con pochissimi click, facendo uso degli stati e delle transizioni.

Creiamo un nuovo progetto Flex e lo chiamiamo Animations.

Andiamo nella modalità design del file mxml e sulla destra notiamo il pannello 'State'. Non avendo definito nessuno stato il nostro currentState sarà uguale al BaseState che è identificato con lo stato vuoto = ' '.

Ora inseriamo un Panel con l'attributo title = 'My Animation' e all'interno di esso inseriamo un'immagine, un text e un LinkButton con etichetta 'espandi' come in fugura:

Passando alla modalità source vedremo che il codice prodotto sarà il seguente:

<mx:Panel layout="absolute" width="306" height="231" title="My Animation" id="schedaProdotto">

<mx:Image y="10" width="112" height="125" source="boxes/flashBox.jpg" id="box" x="0"/>

<mx:LinkButton label="espandi &gt;" id="btnDettagli" right="0" bottom="0" click="currentState='dettagli'"/>

<mx:Text x="111" y="10" text="Adobe® Flash® CS4 Professional è dotato di un'interfaccia utente ottimizzata, avanzati strumenti di elaborazione video e un'eccezionale integrazione con le applicazioni correlate, che vi consentiranno di implementare un flusso di lavoro rapido ed efficiente." width="175" id="descrizione0" height="161"/>

</mx:Panel>

Ritorniamo in modalità design e clicchiamo con il destro sul pannello State e poi su new State. Chiamiamo 'dettagli' il nostro stato e gli indichiamo che si deve basare sullo stato di partenza (BaseState).

A questo punto ingrandiamo il nostro pannello, aggiungiamo un altro Text tra il testo già presente e il LinkButton e in quest'ultimo modifichiamo la scritta visualizzata in '< riduci'.

Nello stato 'dettagli' ora il nostro pannello risulterà il seguente:

Se provate a spostarvi dal BaseState all'altro noterete che effettivamente sono state memorizzati due 'fotografie' differenti del nostro pannello a seconda dello stato in cui vi trovate.

Se andate in modalità source noterete il seguente codice :

<mx:states>

<mx:State name="dettagli">

<mx:SetProperty target="{schedaProdotto}" name="width" value="360"/>

<mx:SetProperty target="{schedaProdotto}" name="height" value="376"/>

<mx:SetEventHandler target="{btnDettagli}" name="click" handler="currentState=''"/>

<mx:SetProperty target="{btnDettagli}" name="label" value="&lt; riduci"/>

<mx:AddChild relativeTo="{schedaProdotto}" position="lastChild">

<mx:Text x="15" y="190" text="Il nuovo Adobe® Flash® CS4 Professional è dotato di un'interfaccia utente ottimizzata, avanzati strumenti di elaborazione video e un'eccezionale integrazione con le applicazioni correlate, che vi consentiranno di implementare un flusso di lavoro rapido ed efficiente." width="310" id="descrizione" height="86"/>

</mx:AddChild>

</mx:State>

</mx:states>

Dentro il tag <mx:State> Vengono segnate le modifiche alle proprietà (tag <mx:SetProperty>) che han subito gli elementi del documento (indentificati con l'attributo 'target'), nel nostro caso la larghezza, l'altezza, l'evento click sul LinkButton che riporta allo stato iniziale (currentState='') e l'aggiunta del nuovo elemento Text tramite il tag <mx:AddChild>.

Ora tornate allo stato di partenza e aggiungete l'evento click sul LinkButton che mi fa fassare allo stato 'dettagli' :

click=" currentState='dettagli' ".

Diamo un tocco di animazione nel passaggio tra stati facendo entrare in gioco le transizioni:

Vogliamo che nel passaggio tra uno stato e l'altro il ridimensionamento non avvenga di colpo ma lentamente, rendendo dinamica l'applicazione.

Aggiungiamo i seguenti tags :

<mx:transitions>

<mx:Transition fromState="*" toState="*">

<mx:Resize target="{schedaProdotto}" duration="500"/>

</mx:Transition>

</mx:transitions>

Vogliamo quindi che ci sia una transizione tra tutti gli stati (indicato con *) che faccia un effetto di Resize per il nostro pannello (target='schedaProdotto') e abbia la durata di mezzo secondo (500 millisecondi).

Adesso proviamo la nostra application e per magia avremo il nostro effetto di ridimensiomento al click sul bottone.

Eccovi il codice completo del file Animations.mxml:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:transitions>

<mx:Transition fromState="*" toState="*">

<mx:Resize target="{schedaProdotto}" duration="500"/>

</mx:Transition>

</mx:transitions>

<mx:states>

<mx:State name="dettagli">

<mx:SetProperty target="{schedaProdotto}" name="width" value="360"/>

<mx:SetProperty target="{schedaProdotto}" name="height" value="376"/>

<mx:SetEventHandler target="{btnDettagli}" name="click" handler="currentState=''"/>

<mx:SetProperty target="{btnDettagli}" name="label" value="&lt; riduci"/>

<mx:AddChild relativeTo="{schedaProdotto}" position="lastChild">

<mx:Text x="15" y="190" text="Il nuovo Adobe® Flash® CS3 Professional è dotato di un'interfaccia utente ottimizzata, avanzati strumenti di elaborazione video e un'eccezionale integrazione con le applicazioni correlate, che vi consentiranno di implementare un flusso di lavoro rapido ed efficiente." width="310" id="descrizione" height="86"/>

</mx:AddChild>

</mx:State>

</mx:states>

<mx:Panel layout="absolute" width="306" height="231" title="My Animation" id="schedaProdotto">

<mx:Image y="10" width="112" height="125" source="boxes/flashBox.jpg" id="box" x="0"/>

<mx:LinkButton label="espandi &gt;" id="btnDettagli" right="0" bottom="0" click="currentState='dettagli'"/>

<mx:Text x="111" y="10" text="Adobe® Flash® CS4 Professional è dotato di un'interfaccia utente ottimizzata, avanzati strumenti di elaborazione video e un'eccezionale integrazione con le applicazioni correlate, che vi consentiranno di implementare un flusso di lavoro rapido ed efficiente." width="175" id="descrizione0" height="161"/>

</mx:Panel>

</mx:Application>

Esistono altre tipologie di effetti come la trasparenza (Fade), la rotazione (Rotation), lo spostamento (Move) facenti parte del package mx.effects o derivanti da esso.

E' inoltre possibile porre più effetti sequenzialmente alla stessa Transition inserendoli dentro il tag <mx:Sequence > o in parallelo dentro il tag <mx:Parallel>.

Sta a voi adesso iniziare a sbizzarrirvi!

Davide Graziani