Share
Flash CS4 è venuto con alcune grandi modifiche e funzionalità che ancora ci stupiscono anche dopo la versione più recente di Flash CS5. Flash ora ha la capacità di lavorare con oggetti nello spazio 3D direttamente all'interno dell'ambiente di lavoro.
Sebbene sia ancora una caratteristica di base rispetto a ciò che puoi fare con il 3D nelle classi ActionScript, questo strumento apre la porta a designer e animatori che non sanno molto del codice. Permette loro di iniziare a spostare i loro oggetti nello spazio 3D senza la necessità di utilizzare metodi vecchi (come l'importazione di animazioni 3D in immagini di sequenza, ecc.)
Insieme allo strumento 3D, Flash ha cambiato il modo in cui intendiamo l'interpolazione di movimento aggiungendo il nuovo stile di interpolazione di movimento, che è più simile alla chiave automatica di animazione in After Effects. Insieme alle modifiche dell'interpolazione di movimento, Flash viene fornito con l'Editor di movimento. Questo pannello ha molte caratteristiche e capacità che danno all'animatore un maggiore controllo sull'animazione in Flash usando le curve di animazione.
Il pannello Editor movimento non solo migliora l'animazione offrendo più opzioni attraverso il controllo delle curve, ma fornisce anche il controllo sull'allentamento delle animazioni, dando un aspetto più realistico. Il concetto di easing è noto in molte applicazioni di animazione come After Effects, ma in precedenza era così basilare in Flash e limitato alla modifica del valore di andamento da 100 a -100. Le nuove funzioni di andamento ti danno più possibilità di controllare l'andamento delle animazioni come vedremo nei passaggi seguenti.
In questo tutorial, uniremo le funzioni di 3D e di alleggerimento creando animazioni 3D in Flash e applicando anche le curve di andamento.
Diamo un'occhiata al risultato finale su cui lavoreremo:
La prima parte del nostro tutorial è costruire la scena dei cartoni animati per una stanza con una porta.
Apri un nuovo documento Flash con le dimensioni 600 x X 450 px e inizia a disegnare il contorno della stanza mostrato nella figura seguente.
Si noti che lo strumento 3D è disponibile solo quando si dispone delle impostazioni di pubblicazione del documento per ActionScript 3 e Flash Player 10 o versioni successive. Inoltre, può essere applicato solo sui simboli dei clip filmato. Dovresti assicurarti che il tuo file pubblica impostazioni (trovato in File> Impostazioni pubblicazione, sorprendentemente) sono impostati su Action Script 3 e Flash Player 10 o versioni successive.
Taglia l'area della porta e posizionala su un nuovo livello per poterla controllare usando gli strumenti 3D.
Ora aggiungiamo alcuni dettagli allo sfondo per dargli un aspetto da cartone animato. Aggiungiamo anche alcune ombre e trame al pavimento e alla porta.
Convertire il simbolo della porta in un clip filmato e assegnargli il nome "Porta".
La risorsa di navigazione 3D comprende quattro cicli, trascinando su ciascun ciclo consente di ruotare il simbolo in una delle direzioni come segue:
Mentre è selezionato il simbolo della porta, scegliere lo strumento 3D. I cicli di risorse 3D appaiono nel mezzo del simbolo del clip filmato.
Fare clic sul punto centrale dei cicli 3D e trascinare la risorsa di navigazione nella parte centrale destra della porta per renderla il punto centrale in cui la porta ruota. L'aspetto finale dello sfondo dovrebbe essere il seguente.
Nei passaggi precedenti, abbiamo preparato lo sfondo del fumetto per l'animazione 3D attraverso l'interpolazione di movimento. In questa animazione, animeremo la porta per aprire e chiudere usando lo strumento 3D. Trascina l'indicatore della timeline sul primo fotogramma nel pannello Timeline per avviare l'animazione.
Fare clic sullo strumento Ruota 3D e fare clic sul simbolo della porta. Si noti che la risorsa di navigazione 3D viene visualizzata sul lato destro dell'oggetto.
Fare clic sul ciclo verde e trascinare per aprire la porta nella direzione esterna alla stanza, come mostrato nella figura seguente.
Sposta l'indicatore della timeline sul fotogramma 50. Usa lo strumento Ruota 3D per ruotare la porta sull'altro lato della stanza come mostrato nella figura sotto.
Ora abbiamo creato l'animazione 3D per la porta sul palco Flash. Successivamente, utilizzeremo l'editor di movimento per creare effetti di animazione più realistici utilizzando le curve di smussamento nel pannello Editor movimento. Mentre questa funzione di miglioramento avanzata è stata aggiunta a Flash CS4 e alle versioni più recenti, le versioni precedenti di Flash avevano una funzione di semplificazione semplificata tramite il valore Easing nel pannello delle proprietà. È comunque possibile trovare questo valore quando si fa clic in qualsiasi punto dell'interpolazione di movimento, ma questo metodo non ha mai dato molte opzioni oltre a facilitare l'ingresso e l'uscita.
Il pannello Editor movimento è costituito da curve di animazione che controllano le proprietà dell'oggetto tramite l'animazione nel periodo di tempo. Ogni curva rappresenta una proprietà specifica per l'oggetto ed è responsabile della sua modifica nel tempo e del livello della modifica. Ad esempio, la curva X rappresenta l'animazione dell'oggetto sull'asse X. Questo valore diventa attivo quando si crea un interpolazione di movimento associato ad esso.
Le curve di andamento nel pannello Movimento sono simili al resto delle curve di animazione del motion editor in quanto ti danno più possibilità di controllare il movimento realistico delle animazioni.
Esistono due metodi principali per creare la curva di andamento. Il primo è attraverso il menu a tendina Predefiniti Ease che include opzioni di easing già pronte. Il secondo metodo consiste nel creare la curva di andamento personalizzata. In questo tutorial proveremo entrambi i metodi.
Prima di procedere, ecco una breve panoramica delle curve di andamento nel pannello Movimento.
Nella parte Easing del pannello Editor movimento, è possibile aggiungere / rimuovere e modificare le curve di andamento semplicemente selezionando la curva desiderata. Prima di vedere come applicare l'effetto di andamento sull'animazione 3D, vedremo brevemente come funziona la curva di andamento nel pannello Editor movimento.
La curva di andamento è un metodo completo per controllare come l'animazione accelera attraverso l'interpolazione di movimento per creare un'animazione più realistica; mostra il valore di accelerazione o decelerazione dell'animazione nel tempo.
Il pannello Editor movimento offre la possibilità di creare molte curve di andamento e assegnare curve diverse a ciascuna proprietà di movimento e applicare differenti attenuazioni a ciascuna funzione. Nei seguenti passaggi, inizieremo applicando una preimpostazione di andamento all'animazione di apertura della porta.
Selezionare il clip filmato o fare clic su un punto qualsiasi dell'interpolazione di movimento, andare al pannello Editor movimento e navigare fino alla sezione Facilità.
Fai clic sull'icona più nella sezione Facilità per aggiungere facilità dai predefiniti di andamento a discesa. Scegli l'allentamento della primavera.
Vai alla curva Rotazione Y che mostra l'animazione della porta. Nell'elenco a discesa Easing, selezionare Spring. Premi Ctrl + Invio per testare l'animazione.
Noterai che l'animazione della porta è cambiata da una semplice animazione di due fotogrammi chiave a un'animazione complessa con effetto molla. Inoltre, puoi aggiungere altri preset di andamento e provarli per vedere come influenza l'animazione della porta. L'animazione dovrebbe essere come segue:
Nei passaggi seguenti, creeremo una curva di andamento personalizzata e la applicheremo all'animazione di apertura della porta. Daremo un'occhiata più da vicino a come funziona la curva e come gestire il problema.
Per prima cosa, rimuoviamo l'allentamento precedente selezionando No Ease dall'elenco a discesa di andamento o facendo clic sull'icona meno nella sezione di andamento e scegliendo l'andamento che vorresti rimuovere. In questo esempio, rimuoveremo l'allentamento Spring.
Fai clic sull'icona più accanto alla sezione Facilità e scegli Personalizzata dall'elenco a discesa. Questo creerà una nuova curva di andamento personalizzata con una curva verde per indicare che è modificabile. Se crei curve di andamento personalizzate aggiuntive, ad ogni curva verrà associato un colore univoco.
La curva di facilità funziona in modo simile ai tracciati di disegno. Puoi creare punti su di esso; questi punti rappresentano i fotogrammi chiave oi punti che indicano i cambiamenti nell'animazione di andamento. Ogni punto ha due maniglie per cambiare l'aspetto delle parti destra e sinistra della curva. Ora creeremo dei punti sulla curva di andamento che influenzerà l'animazione della porta:
Fare clic con il tasto destro sulla curva di andamento e creare i fotogrammi chiave sui fotogrammi 10, 20, 30 e 40
La curva di andamento è compresa tra zero e 100. Quando la curva si sposta verso il valore zero, l'animazione si sposta verso il primo fotogramma e spostando la curva sul valore 100 significa che si sposta alla fine dell'animazione. Inoltre, si noti che la curva di slittamento duro significa accelerazione di velocità superiore e slittamento lento significa accelerazione di animazione lenta.
Modificheremo la posizione e la curva dei punti per influenzare l'accelerazione dell'animazione. Seleziona il primo punto e spostalo al valore di andamento 100. Ciò significa che l'animazione raggiungerà la sua fine a questo punto e la slitta dura significa che l'animazione accelererà velocemente.
Spostare il secondo punto sul valore zero, il terzo punto sul valore 50 e il quarto punto sul valore 50.
Usa i gestori di punti negli ultimi due punti per creare uno scivolamento curvo e liscio per rendere la porta più animata alla fine dell'animazione. La curva di andamento finale dovrebbe essere simile alla seguente figura:
Premi Ctrl + Invio per testare l'animazione e vedere come la nuova curva di andamento influenza l'animazione della porta. L'animazione finale per l'attenuazione personalizzata dovrebbe essere la seguente:
Questa è la fine del tutorial. Ha lo scopo di aiutarti a capire come utilizzare gli strumenti 3D di Flash per creare animazioni nello spazio 3D e applicare le funzioni di andamento complete nel pannello Movimento attraverso le curve di andamento.
Comprendere le curve di Easing può aiutarti a creare animazioni complesse e realistiche in modo più semplice ed efficiente applicando curve di andamento all'animazione invece di creare molti fotogrammi chiave nell'interpolazione di movimento.
.
Accentsconagua