Share
Per i progettisti, una parte importante dell'attrattiva di Flash risiede nella sua capacità di consentire agli utenti di aggiungere movimento e interattività a qualsiasi cosa. Per la maggior parte dei nuovi utenti, il vero Wow! il fattore arriva quando capiscono come dare vita alle cose usando la timeline Flash e ActionScript.
Oggi vedremo come possiamo sfruttare al massimo gli strumenti che Flash ci offre per aggiungere animazioni ai nostri simboli. Questo può essere un argomento piuttosto denso da trattare, considerando quanto l'applicazione sia cresciuta come una centrale multimediale fin dai suoi primi giorni, ma cercherò di mantenere le cose concise e accessibili. Per una copertura più approfondita, sentiti libero di consultare altri tutorial su Activetuts + e sono sicuro che troverai quello che stai cercando.
Sebbene questo post sia stato scritto per Flash Professional CS5, la maggior parte dei suggerimenti dovrebbe funzionare bene nelle versioni precedenti. Cercherò di renderlo un punto da evidenziare ovunque qualcosa sia molto specifico per l'ultima versione di Flash.
Prima di entrare nei dettagli, dedichiamoci qualche minuto per approfondire un po 'del gergo cui faremo riferimento qui. Dal momento che la maggior parte dei principianti di Flash ha poca o nessuna esposizione al concetto di immagini in movimento, alcuni di questi concetti possono essere un po 'scoraggianti. È meglio coprirli in anticipo prima di immergerti in profondità negli aspetti pratici dell'animazione e dell'interattività in Flash.
FPS (o frame rate), molto semplicemente, si riferisce al numero di frame renderizzati ogni secondo. Qualsiasi immagine in movimento - animazione o video - è una serie di immagini fisse, proiettate una dopo l'altra a una velocità molto elevata, causando l'illusione del movimento. Se hai visto una bobina del film dal momento in cui in realtà utilizzavano il film per girare video, vedrai che è semplicemente una striscia con molte immagini fisse. La velocità con cui il proiettore del film le attraversa è ciò che viene chiamato FPS.
L'FPS predefinito nelle versioni precedenti di Flash era 12, che ora è stato eseguito fino a 24 nell'ultimo paio di versioni. Ciò potrebbe essere dovuto al fatto che Flash è progredito dall'essere uno strumento di animazione vettoriale puro alla modalità preferita di riproduzione di video sul Web. Poiché i video devono essere riprodotti con un minimo di 24 fps per funzionare senza intoppi, il contenitore Flash deve anche recuperare. Inoltre, il Flash Player è migliorato drasticamente ora e può rendere molto più elevati i volumi di dati necessari per riprodurre a fps più alti senza subire un calo di prestazioni.
Prelevato direttamente dai libri di animazione cel, l'interpolazione (abbreviazione di "betweening") è il metodo utilizzato per creare fotogrammi intermedi tra due fotogrammi chiave. Per esempio, se dovessi animare la mano di un personaggio che va dalla sua posizione normale a puntare a qualcosa, disegnerei la prima e l'ultima posizione e poi disegnerò i fotogrammi tra i due per simulare il movimento. Il numero di fotogrammi tra i due fotogrammi chiave è definito dalla frequenza dei fotogrammi dell'animazione e dal momento in cui è necessario completare il movimento. Movimenti più lenti significano più fotogrammi di interpolazione e viceversa.
Flash ci facilita disegnando le trame stesse, diversamente da ciò che si farebbe in un'animazione tradizionale disegnata a mano. Dal CS4, ci sono tre modi nettamente diversi per interpolare: forma, classica e di movimento. Capiamolo un po ':
Interpolazione di forma: Il tipo più basilare di interpolazione, anche se probabilmente non lo userai troppo. Inizi con una forma e la trasformi nel tempo. A meno che entrambe le forme non siano complesse e siano molto simili tra loro, probabilmente avrai bisogno di molta pratica per farlo funzionare. È possibile aggiungere suggerimenti forma per forzare determinati punti su una forma da comportarsi durante la trasformazione.
Interpolazione classica: Fino alla versione CS3, questo era il metodo di interpolazione primario in Flash, uno che era tanto amato da tutti quanto odiato. Prendete fondamentalmente un simbolo e modificate le sue proprietà tra i fotogrammi chiave - come dimensione, posizione, effetto colore, ecc. Poiché il metodo dipende da due stati distinti - uno su ciascun fotogramma chiave - la modifica di un simbolo animato può essere un compito piuttosto noioso. Qualcosa di semplice come spostare il simbolo ha bisogno di selezionare il simbolo su ciascun fotogramma chiave e spostarlo esattamente nella stessa quantità.
Interpolazione di movimento: Di gran lunga il più grande aggiornamento alle funzionalità di animazione di Flash, l'interpolazione di movimento porta l'amatissimo motion editor di After Effects in Flash. Il più grande cambiamento tra il vecchio e il nuovo metodo è che l'interpolazione di movimento è ora basata su oggetti piuttosto che basata sulla timeline come nel vecchio metodo. Applica le interpolazioni ai simboli, con un controllo preciso su praticamente qualsiasi aspetto fisico dell'oggetto attraverso il pannello dell'editor di movimento. Certo, si applica ancora il movimento sulla timeline, ma ora è possibile selezionare un simbolo, spostarlo e portare con sé l'animazione.
Sappiamo che quando una palla cade nel mondo reale, la sua velocità non è sempre la stessa. Prende velocità mentre si avvicina al terreno, quindi rimbalza all'incirca alla stessa velocità e rallenta quando raggiunge la vetta dove si dirige verso il terreno. Quando animi oggetti in Flash, questi si trasformeranno ad un ritmo costante per impostazione predefinita. Se ti sei chiesto perché il tuo testo animato che entra ed esce dal palco si sente piatto, questa è la ragione. Con l'easing, puoi sostanzialmente dire a Flash di accelerare o decelerare il movimento senza dover modificare manualmente la posizione su ciascun fotogramma.
Uno dei maggiori problemi con il vecchio movimento in Flash - qualcosa che non avevo realizzato fino a quando non ho visto quello nuovo - era che l'animazione era prevalentemente basata sulla timeline. Hai creato un fotogramma chiave su un livello, inserito un simbolo su di esso, aggiunto un altro fotogramma chiave a pochi fotogrammi e modificato il simbolo. In sostanza, si trattava di due istanze distinte di un simbolo. Spostare uno non ha fatto nulla di diverso rispetto all'istanza nel prossimo keyframe. Certo, siamo passati attraverso l'inferno cercando di riposizionare gli elementi dopo averli animati, ma è proprio come Flash ha giocato le sue carte.
Poi con CS4 è arrivato il motion editor, e le cose sono cambiate per sempre. Sfortunatamente, l'editor di movimento non è esattamente la parte più conosciuta di Flash anche dopo incrementi di una versione e mezza. Permettetemi di dedicare alcuni momenti e discuterò alcune interessanti curiosità su come funziona questa cosa, e su come potete farlo funzionare per voi.
Ora puoi modificare i simboli in due modi distinti per avviare un'animazione, dall'editor di movimento o direttamente sul palco come ai vecchi tempi. Ogni parametro fisico del simbolo selezionato - come x & y, coordinate, scala, effetti colore, filtri, ecc. - è ora elencato come una riga nell'editor di movimento. È sufficiente spostarsi su un punto nella timeline e modificare il parametro e viene generato un fotogramma chiave per quel parametro. Se ti piace il tradizionale modo visivo di animare le cose, vai semplicemente su una cornice e modifica il simbolo sul palco.
Ciò che è importante capire è che i fotogrammi chiave sono ora aggiunti per parametro, quindi se hai spostato l'istanza sullo stage, ci sarà un fotogramma chiave solo per le coordinate X e / o Y nell'editor di movimento. Ciò fornisce una gamma immensamente ampia di controllo sull'animazione, cosa impossibile da ottenere nelle versioni precedenti di Flash.
Nota: Non è più necessario creare un keyframe in modo esplicito. Basta passare a una cornice, modificare qualcosa sull'istanza e un fotogramma chiave viene generato automaticamente solo per quel parametro. Per molte persone, questo è un po 'un cambiamento culturale; qualcosa a cui trovano molto difficile abituarsi. Sebbene sia ancora possibile creare manualmente un fotogramma chiave, l'ho trovato inutile per la maggior parte.
Invece del singolo campo di input e di un pulsante "Modifica", ora si ottiene un'intera riga dedicata all'allenamento nel nuovo editor di movimento. Una linea tratteggiata che copre tutti i fotogrammi di un'interpolazione rende estremamente facile vedere come funziona l'andamento. I preset inclusi sono un buon modo per iniziare. Una linea curva indica che la velocità dell'animazione sta aumentando o diminuendo gradualmente. Una linea retta indica un ritmo costante e uniforme. Puoi creare quanti più vantaggi vuoi e assegnarne di differenti a ciascun parametro. Ricorda che l'easing deve essere esplicitamente assegnato a ciascun set di parametri. A meno che non lo fai, la tua animazione continuerà ad essere lo stesso movimento piatto.
Una volta che hai capito come funziona l'andamento con i preset, è ora di diventare avventurosi e provare l'opzione 'Personalizzata'. Quello che ottieni qui è una linea continua rossa al posto di quella tratteggiata, a indicare che puoi modificarla. Vai a una cornice e crea un fotogramma chiave nella riga di andamento "Personalizzata" per aggiungere un nodo di bezier nella timeline. È quindi possibile utilizzare le maniglie del nodo per modificare il curver come si desidera.
Consiglio rapido: Se non sei troppo sicuro di come funziona l'easing ma vorresti portare immediatamente le tue animazioni su più tacche, usa questa regola che di solito vado con me stesso - gli elementi che appaiono (qualsiasi cosa entri nel frame o sul palco) funzionano meglio con un positivo " Semplice (medio) "che si attenua a '50', mentre gli elementi a scomparsa funzionano meglio con lo stesso andamento a '-50'. Ciò rende l'animazione generale molto più fluida e coerente. Di regola, utilizzo l'easing praticamente su qualsiasi cosa si muova nelle mie animazioni.
Quando si sposta un oggetto nel tempo utilizzando l'interpolazione di movimento, viene visualizzata una linea dal punto di registrazione del simbolo che mostra il punto iniziale e finale del movimento, nonché ciascuno dei fotogrammi. Una caratteristica apparentemente nascosta qui è il fatto che questo percorso è come qualsiasi altra linea in Flash. Puoi usare gli strumenti selezione e penna per modificarlo come faresti con qualsiasi altro percorso. Fai clic e trascina in un punto qualsiasi tranne le estremità del percorso (mentre non è selezionato) per convertirlo in una curva. È quindi possibile utilizzare lo strumento di selezione secondaria per modificare le maniglie di Bezier sui nodi per un controllo più preciso. Ogni volta che aggiungi un fotogramma chiave nel percorso del movimento, una nuova curva di Bézier viene aggiunta al percorso, che puoi modificare quando ne hai bisogno.
Se 3D in Flash è ciò che hai sempre desiderato, ma non hai avuto il coraggio di giocare intorno ai framework 3D come papervision, ecco un modo veloce e sporco per simulare il movimento 3D in Flash. Puoi utilizzare il nuovo strumento di rotazione 3D insieme all'editor di movimento per far ruotare gli oggetti in 3 dimensioni per quel jazz aggiunto.
La rotazione 3D non è presente nell'editor di movimento a meno che tu non la usi effettivamente su un oggetto. Per fare ciò, seleziona lo strumento di rotazione 3D, seleziona il tuo oggetto e fai clic e trascina una delle tre linee colorate che appaiono. Ciascuna delle tre linee rappresenta un asse: il verde è Y, il rosso è X e il blu è Z. X e Y sono in genere quelli che faranno apparire il tuo oggetto come se ruotasse nello spazio 3D. Portalo nella posizione desiderata, vai alla fine dell'interpolazione di movimento e spostalo nuovamente. Aggiungi una facilità "Bounce" per qualche spezia in più.
Il mio tipico flusso di lavoro di animazione consiste nel creare un insieme di fotogrammi chiave in un'animazione, quindi aggiungere movimento a ciascun oggetto secondo necessità. Per qualsiasi cosa abbia bisogno di entrare dall'esterno del palco a sinistra, questo significa che ho bisogno di spostare l'oggetto sul primo fotogramma, ridurre l'alfa, andare all'ultimo fotogramma, spostarlo di nuovo dove volevo e aumentare l'alfa al 100%. È così che è sempre stato davvero, quindi non mi sono mai preoccupato così tanto fino a una bella mattina quando ho scoperto "fotogrammi chiave inversi". L'idea è davvero stupida, ma vale la pena innumerevoli ore se animi ogni giorno le cose dentro e fuori dal palco.
Ecco come funziona. Una volta posizionato il composito, è sufficiente animare l'opposto dell'effetto desiderato. Inizia dalla posizione finale dell'oggetto, e animalo andando verso sinistra. Includere tutto ciò di cui hai bisogno per rendere l'animazione perfetta - alfa, sfocatura, ecc. Quindi, fai semplicemente clic con il pulsante destro del mouse sull'interpolazione e fai clic su "reverse keyframes", e voilà! Hai la tua diapositiva dall'animazione sinistra proprio come hai bisogno di essere.
Forse il più grande risparmio di tempo per me da quando ho iniziato a utilizzare l'editor di movimento in Flash, è stata la capacità di applicare il movimento a un oggetto, copiarlo e incollarlo per tutti gli altri simili. Questo ha più senso quando hai un gruppo di oggetti che si muovono dentro o fuori in un modo simile - un elenco di pallottole, per esempio. Dopo aver applicato un'interpolazione a una delle voci dell'elenco (supponendo che ciascuna di esse sia un singolo Movie Clip sul proprio livello, ovviamente), fare clic con il pulsante destro del mouse sull'interpolazione e selezionare "Copia movimento". Quindi seleziona semplicemente i primi fotogrammi chiave di tutti gli altri elementi dell'elenco, fai clic con il tasto destro e seleziona "Incolla movimento". È quindi possibile modificarli singolarmente se necessario.
Ecco alcuni suggerimenti rapidi per risparmiare tempo, energia e alcuni fotogrammi quando si ha a che fare con l'animazione in Flash:
Questo ci porta alla fine di un altro capitolo in Flash Tips e Best Practices for Designers. Se hai usato Flash qualche anno fa e sei tornato di recente, apprezzerai senza dubbio il grande salto che ha compiuto negli anni come strumento di animazione professionale. Spero che questi suggerimenti ti aiutino a cimentarti con alcuni degli strumenti e delle funzionalità più recenti e sorprendentemente rari. Hai altri suggerimenti e trucchi da condividere? Ne sentiamo parlare nei commenti.
Accentsconagua