Flash CS4 ci mette a disposizione alcune accattivanti animazioni preconfigurate da poter utilizzare liberamente nei nostri progetti. Possono tornare utili per velocizzare la realizzazione dei nostri swf ma anche al solo scopo di studio: infatti è possibile modificare animazioni esistenti, salvarle ed esportarle.
Queste animazioni sono accessibili dal pannello Preimpostazioni Movimento (Motion Preset) dove sono memorizzati circa 30 effetti divisi tra movimenti 2d e 3d, con anche qualche effetto particolare come il 'fumo' e possono essere applicate a tutti i simboli ed anche direttamente ai campi di testo.
Possiamo aprire il pannello dal menu Finestra > Preimpostazioni Movimento. Sfogliando le animazioni contenute nella cartella Preimpostazioni predefinite, possiamo visualizzare un'anteprima degli effetti nel riquadro superiore.
Applicare le animazioni agli oggetti
Vediamo quali passaggi sono necessari per applicare queste animazioni ai nostri oggetti sulla scena.
Creiamo un MovieClip
Per iniziare creiamo un MovieClip partendo da un testo, inseriamo quindi del testo nella nostra area di lavoro.
Premiamo T sulla tastiera o clicchiamo sull'apposita icona del testo (quella con la T nella Barra degli Strumenti) e scriviamo ad esempio la parola MoTioN.
Dal pannello delle proprietà assicuriamoci che la casella di testo sia impostata in Testo Statico ed allineamolo al centro della scena dal pannello Allinea (scorciatoia CTRL+K).
Ora convertiamo il testo in movieclip, anche se, come detto, possiamo applicare molte animazioni direttamente ai campi di testo, alcuni effetti 3D necessitano dei 'Clip Filmati', quindi con la scritta selezionata andiamo su Elabora > Converti in simbolo (scorciatoia F8), diamole un nome e scegliamo Clip Filmato dal menu tipo.
Applichiamo l'animazione
Per applicare uno degli effetti, torniamo al nostro pannello con i motion preset, scegliamo l'effetto da applicare, poi selezioniamo semplicemente il nostro clip filmato e clicchiamo sul pulsante Applica in basso a destra del pannello.
Per il nostro esempio selezioniamo l'animazione Spirale-3d ed assegniamola al nostro testo. Sulla linea temporale relativa al nostro clip vedremo l'interpolazione di movimento che attesta la corretta implementazione dell'effetto.
Per vedere tale effetto in azione, trasciniamo la testina di riproduzione o lanciamo la riproduzione del filmato dal menu Controlli > Prova Filmato o dalla scorciatoia da tastiera CTRL+Invio.
Modificare le animazioni
Fin qui dovrebbe essere abbastanza semplice ed intuitivo applicare questi effetti preconfigurati nelle nostre animazioni flash. Vediamo adesso come è possibile modificare tali animazioni tramite il pannello Editor Movimento.
Selezioniamo il nostro clip sulla scena e richiamiamo l'Editor; se non fosse presente nel nostro layout, reimpostiamo l'interfaccia in Fondamentali, tramite l'apposito pulsante in alto a destra dell'interfaccia di Flash CS4. Clicchiamo quindi sul pannello Editor che a questo punto è accanto alla Linea Temporale.
L'Editor è suddiviso in diverse sezioni espandibili, all'interno delle quali troviamo alcuni attributi di cui possiamo controllare l'evoluzione grazie al meccanismo dei fotogrammi chiave.
Dal pulsante in basso a sinistra impostiamo la visualizzazione dei fotogrammi in 50, in modo da controllare tutto il contenuto dell'animazione spirale-3d
Espandendo la sezione Movimento di base notiamo che per creare questo effetto è stato necessario impostare semplicemente 2 fotogrammi chiave per il solo canale Rotazione Y: il primo all'inizio della linea temporale con il valore di 0° e il secondo, all'ultimo frame con un valore di 180°. Abbiamo così un'animazione di 180° sull'asse delle Y del nostro clip filmato.
Proviamo adesso, sempre tramite l'Editor, a modificare tutta l'animazione come segue:
- Impostiamo una dissolvenza iniziale e finale
- Inseriamo nuovi fotogrammi chiave per cambiare il 'momento' di partenza della rotazione e creiamo il 'ritorno' dell'animazione per avere una rotazione completa del testo
- Scaliamo il clip filmato al momento di massima rotazione
- Salviamo le nostre modifiche per usi futuri
Prima di tutto andiamo ad espandere l'animazione direttamente dalla linea temporale: trasciniamo l'estremità finale fino al frame 100, in modo da avere più spazio per compiere le operazioni dell'Editor.
Effetti: Fade in-out
Espandiamo la sezione Effetto Colore > Valore Alfa, posizioniamo la testina d'animazione al primo frame ed inseriamo un nuovo fotogramma chiave, cliccando sull'apposita icona a forma di rombo giallino (nell'immagine: Aggiungi/Cancella fotogrammi chiave); sempre sullo stesso livello, impostiamo il valore a 0%.
Avanziamo con il cursore fino al frame 15 ed inseriamo un altro fotogramma chiave con il valore del 100%, ripetiamo l'operazione inserendo un fotogramma al frame 80 con valore 100% ed un ultimo al frame 100 con il valore di 0% per rendere nuovamente invisibile il testo.
Rotazione e traslazione
Portiamoci nel livello Rotazione Y, spostiamo il cursore al fotogramma 10 ed inseriamo un keyframe con un valore di 0°. In questo modo la rotazione inizierà al frame 10. Andiamo al fotogramma 90 ed impostiamo un nuovo keyframe col valore di 360°. Possiamo eliminare il fotogramma al frame 100, ormai inutile: facciamolo posizionandoci sul frame e cliccando sulla stessa icona che ci consente di inserire un nuovo keyframe.
Abbiamo così creato una completa rotazione del nostro oggetto di 360 gradi.
Sempre dall'Editor, spostiamoci al fotogramma 50 e nella sezione Trasformazione impostiamo un valore di 200% nei canali Scala X e Scala Y, nei fotogrammi 0 e 100 lasciamo invece i valori al 100%.
Abbiamo fatto in modo che il testo si ingrandisca al momento della massima rotazione in modo da simulare un avvicinamento verso l'utente ed un successivo allontanamento fino alla totale scomparsa.
Provando il filmato quindi avremo un'entrata in dissolvenza del nostro clip filmato testo, la rotazione totale di 360°, il tutto mentre l'oggetto si avvicina e si allontana progressivamente dal punto di vista dell'utente.
Condividere il movimento
Per concludere selezioniamo il nostro MovieClip sulla scena e, dal pannello Preimpostazioni Movimento, clicchiamo sul pulsante in basso a sinistra Salva selezione come preimpostazione ed il nostro effetto modificato verrà aggiunto nella cartella ...personalizzate, in modo da poter essere usato subito su nuovi oggetti.
