In questo articolo esaminiamo una delle caratteristiche di Flash CS4 che segnano una differenza importante con tutte le versioni precedenti. Si tratta della creazione di animazioni per interpolazioni di movimento, forse lo strumento più importante per la creazione delle animazioni, che era rimasto praticamente inalterato dalla versione mx.
Prima di addentrarci nel vivo dell'articolo, ripassiamo le modalità e le tecniche che Flash ci offre per animare gli elementi sulla scena:
| Tecnica | Descrizione |
|---|---|
| Interpolazione di movimento | Si impostano due fotogrammi chiave, A e B, sulla timeline. Se la posizione dell'oggetto in A è diversa da quella in B, è Flash a creare l'animazione necessaria per il movimento dal punto A al punto B |
| Interpolazione di forme | Stessa logica dell'Interpolazione di Movimento, riferita però alle forme. Se creiamo due oggetti, ad esempio un quadrato ed un cerchio, grazie a questo tipo di animazione Flash può generare un "morphing" ossia una transizione graduale tra le due forme, aggiungendo in automatico i passaggi necessari |
| Frame-by-frame | Animazione che possiamo definire 'manuale', in quanto siamo noi stessi ad impostare tutti i cambiamenti necessari in ogni frame. In pratica l'esatto opposto dell'animazione tramite Interpolazione di Movimento |
| Livelli guida | Permette di disegnare una curva e di agganciarvi un oggetto. Dato poi un lasso di tempo sulla Linea Temporale, Flash in automatico genera il movimento facendo seguire in automatico tutto il percorso al nostro oggetto |
| Preimpostazioni movimento | I motion preset sono animazioni preconfigurate presenti in Flash CS4, liberamente applicabili a tutti i nostri oggetti |
| Cinematica Inversa | Una tecnica interessantissima introdotta con Flash CS4, che ci permette di animare i nostri oggetti/personaggi, creando una vera e propria struttura ossea, tramite cui poter muovere realisticamente porzioni degli elementi stessi |
| ActionScript | Animazione totalmente creata tramite codice AS3 |
Interpolazione 'classica'
Anche se sono state introdotte alcune novità per l'interpolazione, Flash CS4 ci permette comunque di creare animazioni col tradizionale metodo presente fino alla versione CS3, chiamato adesso Interpolazione 'classica', offrendoci così un passaggio graduale al nuovo tipo. Ma facciamo subito dei semplici esempi pratici per vedere quanto è facile ed intuitivo animare.
Creare l'interpolazione di movimento
Disegniamo un semplice cerchio sulla scena (scorciatoia da tastiera o), tenendo premuto il tasto maiuscolo per mantenere le proporzioni fisse e creare così un cerchio perfetto.
Clicchiamo con il tasto destro sull'unico fotogramma nella linea temporale, dove appunto risiede il cerchio; dal menu contestuale scegliamo Crea Interpolazione Movimento.
Con un messaggio, Flash ci avverte che, per poter applicare l'interpolazione, è necessario convertire le forme in simboli, clicchiamo su OK e il nostro oggetto, sarà convertito in un Clip Filmato.
È utile notare che alla linea temporale del nuovo MovieClip sono stati aggiunti dei fotogrammi, 24 per l'esattezza, in quanto Flash associa, per default, 1 secondo (24 frame) di animazione per la nostra interpolazione. Notiamo pure che la testina di riproduzione va a posizionarsi all'ultimo fotogramma, in questo modo ci basta spostare l'oggetto sulla scena, trascinandolo ad esempio verso l'estremità opposta, per creare l'animazione.
Analizzando la linea temporale del nostro clip filmato, notiamo alcune differenze rispetto al 'vecchio' metodo di animazione: graficamente, sono cambiate le icone che identificano questo nuovo tipo di interpolazione, sia nel livello accanto al nome, sia per i fotogrammi chiave inseriti che adesso hanno la forma di un diamante, ma sopratutto è cambiato il metodo di associare l'animazione agli oggetti, infatti adesso facciamo sempre riferimento ad un solo simbolo per volta, a differenza del metodo classico, dove viene creata l'interpolazione tra fotogrammi.
Sulla Scena ora, ogni animazione è associata ad un proprio Percorso di Movimento, composto da una retta e tanti puntini, uno per ogni fotogramma.
Questo comporta numerosi vantaggi, possiamo:
- modifcare l'animazione trascinando semplicemente gli oggetti sulla scena
- modificare la durata dell'animazione, allungando o accorciando la Linea Temporale stessa, o anche semplicemente trascinando per spostarla nel 'tempo', essendo sicuri di modificare sempre tutti i fotogrammi chiave
- copiare, salvare e riutilizzare l'animazione
- sostituire facilmente l'oggetto dell'animazione, semplicemente trascinando un nuovo simbolo dalla libreria, mantenendo inalterata l'animazione stessa
Ci sono anche alcuni piccoli svantaggi:
- è impossibile interpolare due diverse proprietà di un simbolo come ad esempio passare da una dissolvenza ottenuta applicando la caratteristica Trasparenza (Alpha) e cambio di Tinta. Possiamo applicare queste variazioni soltanto per una proprietà
- a volte è difficile impostare avanzati effetti di Andamento (Easing)
- non è possibile collegare diversi simboli allo stesso Percorso di Animazione
Fatte queste considerazioni, torniamo ad occuparci del nostro esempio.
Finora abbiamo creato una semplice animazione di 24 fotogrammi (1 secondo) per il nostro cerchio; possiamo effettuare un test digitando CTRL + Invio, oppure utilizzando il Controller (Finestra > Barra degli Strumenti > Controller) per vedere il movimento all'interno dello stage stesso.
Modificare la posizione del simbolo
Posizioniamo la Testina di Riproduzione sul fotogramma 8 e, dallo stage, muoviamo il cerchio in una nuova posizione; ripetiamo l'operazione sul fotogramma 16.
In questo modo Flash inserirà in automatico due nuovi fotogrammi chiave contraddistinti, sulla linea temporale da icone a forma di diamante e sulla scena, da punti più grandi lungo il percorso.
Cambiare velocità e durata dell'animazione
Volendo adesso rendere più lenta tutta l'animazione, possiamo trascinare l'estremità finale dell'interpolazione sulla Linea Temporale, trascinando dalla maniglia che appare una volta posizionato il mouse. Trasciniamo fino ad arrivare al fotogramma 48.
Abbiamo così distribuito tutto il movimento del simbolo in un lasso di tempo maggiore (2 secondi), rendendo tutto il movimento più lento.
Come abbiamo notato, Flash mantiene una distanza proporzionata tra i fotogrammi chiave ed aggiorna il Percorso di Movimento inserendo i punti per i nuovi fotogrammi.
Tracciare traiettorie modificando il path di animazione
Piuttosto che utilizzare i fotogrammi, vediamo adesso come modificare l'animazione del simbolo andando a modificare il percorso di animazione.
Possiamo anzitutto cancellare l'animazione creata, cliccando col tasto destro su un fotogramma vuoto dell'interpolazione e dal menu contestuale scegliamo Rimuovi Interpolazione, per lasciare il solo fotogramma iniziale.
Posizioniamoci sull'ultimo fotogramma e impostiamo nuovamente l'interpolazione, questa volta dal menu che appare cliccando sempre col tasto destro, direttamente sul MovieClip. Trasciniamo il nostro oggetto in una nuova posizione in modo da creare il movimento necessario per l'animazione.
Assicuriamoci di avere selezionato lo Strumento Freccia (v sulla tastiera) e trasciniamo il Percorso di Movimento fino a trasformare la retta in una curva.
Facilmente quindi, abbiamo cambiato il movimento del nostro oggetto, senza dover aggiungere nessun nuovo fotogramma chiave.
Ma andiamo oltre, modifichiamo in maniera più radicale il percorso da far compiere al nostro oggetto. Selezioniamo lo strumento Sottoselezione (a) e clicchiamo una volta sul punto iniziale o finale della nostra curva: il percorso si trasformerà in una curva di Bezier con in evidenza le maniglie per compiere modifiche più accurate.
Trasciniamo la maniglia di sinistra ed disegniamo una nuova curva. Possiamo anche trascinare i due punti alle estremità per sistemare la curva in modo che si estenda lungo tutta la scena. Cliccando al centro della curva e trascinando, possiamo riposizionare tutto il tracciato.
Sempre senza l'ausilio di nuovi fotogrammi chiave, abbiamo fatto compiere un percorso più complesso al nostro MovieClip, mantenendo inalterato il peso finale del file swf.
Nella seconda parte dell'articolo vedremo come introdurre accelerazioni al percorso, come applicare il movimento ad oggetti diversi, come orientare gli oggetti sul percorso e come applicare un movimento con ActionScript 3.
Easing (Andamento)
Vediamo adesso come rendere più accattivante e meno uniforme questa animazione, agendo sul controllo Andamento direttamente dal Pannello delle Proprietà.
Selezioniamo la curva o clicchiamo in un punto qualsiasi della Linea Temporale; dal Pannello delle Proprietà sulla destra, troveremo una voce Andamento dove possiamo impostare un valore che va da -100 a 100. Questa funzione permette di far compiere un'accelerazione iniziale o finale al nostro simbolo, rendendo tutta l'animazione più realistica.
È possibile avere un riscontro visivo di questo effetto, guardando il percorso d'animazione che, a seconda delle impostazioni, andrà ad avvicinare oppure a distanziare i fotogrammi tra di essi, seguendo la regola basilare di animazione in cui più frame vicini si traducono in un rallentamento del movimento.
Cambiare il soggetto
Vediamo adesso come è semplice cambiare il clip filmato, oggetto della nostra animazione.
Creiamo un nuovo simbolo andando sul menu Inserisci > Nuovo Simbolo > Immagine (CTRL+F8 o Command+F8 per gli utenti mac) e disegniamo questa volta un semplice rettangolo. Torniamo sulla scena principale dove risiede l'animazione e, dalla libreria, trasciniamo direttamente sulla scena un'istanza del nuovo simbolo grafico.
Flash con un avviso, ci chiederà di sostituire l'oggetto corrente, clicchiamo su OK e vedremo agganciato al percorso il nuovo simbolo. Alternativamente possiamo cambiare il soggetto dell'animazione, selezionando il clip sulla scena e dal pannello delle proprietà scegliere il nuovo disegno dal pulsante Scambia...
Orientare al percorso
Approfittando del disegno del nuovo simbolo sulla scena, vediamo adesso come fare in modo che il nostro oggetto si orienti, ruotando, in base alla curva da seguire.
Selezioniamo con un click il percorso e dal pannello delle Proprietà, spuntiamo la voce Orienta sul tracciato nella sezione ruota. Vedremo inserire nella linea temporale tanti fotogrammi chiave per tutta la lunghezza dell'animazione, ed il clip filmato ruotare per assecondare la curva.
Può capitare che l'oggetto non segua perfettamente la curva, possiamo facilmente risolvere questo problema, portandoci alla fine del filmato e con lo strumento Trasformazione Libera (Q), ruotiamo il clip in modo che segua correttamente il tracciato. In automatico saranno modificati tutti gli altri fotogrammi in base alle nostre impostazioni, facendo orientare correttamente il nostro simbolo. Proviamo il filmato con CTRL+INVIO.
Copiare le animazioni
Con Flash CS4 abbiamo la possibilità di riutilizzare le animazioni create con il nuovo metodo di interpolazione, in diversi modi:
- tramite il comando Copia Movimento
- con Copia Movimento come ActionScript 3.0
- tramite il pannello Preimpostazione Movimento, visto in un precedente articolo
Esaminiamo i primi due metodi. Occorre un nuovo simbolo a cui applicare l'animazione, creiamone uno o utilizziamo il simbolo non in uso del cerchio. Creiamo un nuovo livello sulla Linea Temporale e trasciniamone un'istanza direttamente dalla libreria.
Clicchiamo adesso col tasto destro sull'interpolazione dell'animazione creata e scegliamo dal menu Copia Movimento. Tasto destro sul simbolo del cerchio e scegliamo questa volta Incolla Movimento: vedremo cosi l'animazione riprodotta anche nel nuovo simbolo, con tutte le caratteristiche, come la rotazione, correttamente impostate.
Copia delle animazioni tramite ActionScript
Cancelliamo l'interpolazione appena creata per il cerchio, cliccando col tasto destro e scegliendo Rimuovi Interpolazione. Col clip ancora selezionato, inseriamo un nome di istanza in modo da poterlo richiamare con ActionScript. Dal pannello delle proprietà inseriamo cerchio nell'apposita casella in alto.
Torniamo sulla linea temporale del movimento del rettangolo e, col tasto destro, questa volta scegliamo Copia Movimento come ActionScript 3.0.
Creiamo un nuovo livello e con la testina di riproduzione ferma al 1mo frame, lanciamo il pannello ActionScript (Finestra > Azioni) e cliccando col tasto destro al suo interno, incolliamo il codice.
Non curandoci della complessità del codice, spostiamoci alla fine dello script fino ad arrivare alla scritta:
// __animFactory_Simbolo2_6.addTarget(, 0);
Ora basterà inserire il nome di istanza del nostro simbolo e decommentare la stringa; ecco il codice:
__animFactory_Simbolo2_6.addTarget(cerchio, 0);
Proviamo la scena e vedremo il cerchio compiere la stessa animazione del rettangolo, ma senza l'ausilio dell'interpolazione, il tutto esclusivamente tramite codice ActionScript 3.0
