Rotazioni 3D con Flex 4!

Scritto da Salvatore Laisa il 11 giugno 2010

Ciò che contraddistingue le Rich Internet Applications, oltre che le funzionalità avanzate, sono anche le animazioni di transizione o di interazione. Chi è abituato a lavorare con Flash e ActionScript 3 sa che spesso ottenere animazioni da codice può essere non proprio immediato – a volte possono essere necessarie librerie esterne –, ma grazie al nuovo framework Flex 4 integrato in Flash Builder 4 animazioni semplici ma accattivanti come le rotazioni 3D posso essere utilizzate con sforzi minimi!

Guardate una demo del risultato finale.

1. Creiamo un nuovo documento

Creaimo un nuovo progetto che utilizzi il framework Spark (SDK Flex 4) e passiamo subito alla visualizzazione del codice nella modalità “source”.

All’interno del tag <fx:Declarations> creiamo un oggetto di tipo “Rotation 3D” al quale assegnamo subito un id per poterlo richiamare più avanti:

<s:Rotate3D id=”ruota” />

Il tag <fx:Declarations> è stato introdotto nel framework Flex 4 per creare una zona nel codice MXML dove dichiarare solo gli oggetti non visuali, quindi non bottoni, liste e simili.

2. Impostare la rotazione

Ora inseriamo un po’ di proprietà analizzandole. Il risultato di queste sarà una rotazione sull’asse Y dell’oggetto che dura un secondo dal centro dello stesso:

<s:Rotate3D id=”ruota” angleYFrom=”0″ angleYTo=”360″ duration=”1000″ autoCenterTransform=”true” />

angleYFrom e angleYto : rispettivamente angolo dell’asse Y di inizio e di fine, possiamo anche usare gli assi X e Z!

duration: indica in millisecondi la durata dell’interpolazione, quindi 1000 = 1 secondo.

autoCenterTransform: impostando “true” o “false” decidiamo se vogliamo la rotazione dal centro dell’oggeto oppure no.

3. Click e via!

Ora l’interpolazione è creata… ma inutilizzata! Trasciniamo nel nostro layout dalla modalità “design” una copia del componente Button e una copia del componente DateChooser:

torniamo alla modalità “source”, diamo un id al DateChooser (io l’ho chiamato “vittima”) e aggiungiamo una proprietà nel tag del bottone:

<s:Button label=”Ruotalo!” click=”ruota.play([vittima])” />

con la proprietà “click” su un componente Button attiviamo delle azioni che vengono lanciate quando premiamo quel bottone. In questo caso richiamo la mia rotazione 3D alla quale ho dato id “ruota” e con il metodo “play()” avvio l’animazione. Tra le parentesi tonde posso indicare i bersagli dell’animazione: siccome possono essere più di uno, li scriviamo dentro parentesi quadre (eventualmente ne mettiamo altri e li separiamo con la virgola).

Conclusione

Di seguito potete vedere il risultato finale , cliccate sul bottone per vedere ruotare il calendario soprastante:

Avete visto che grazie al framework Spark (la 4° versione di Flex) si può facilmente creare e applicare un qualunque tipo di rotazione 3D a praticamente ogni oggetto, vi basta cambiare l’asse di rotazione e il nome del bersaglio (o bersagli) dentro “ruota.play()” e il gioco è fatto!