Share
Questo tutorial espande le tecniche illustrate nella parte 1 della serie Illustrate e Animate a Bouncing Ball. Useremo gli strumenti 3D di Illustrator per migliorare il movimento rotatorio della pallina rimbalzante di Flash e dare un'occhiata al lavoro tra le due applicazioni. I passaggi coinvolti possono anche essere seguiti indipendentemente dalla Parte 1.
Di seguito è l'animazione finale su cui lavoreremo. Vuoi accedere ai file Vector Source completi e alle copie scaricabili di ogni tutorial, incluso questo? Iscriviti a VECTORTUTS PLUS per soli 9 / mese.
... e ricordiamoci dell'animazione sottilmente più semplice che abbiamo creato durante la prima parte di questo tut ...
Alzi la mano, chi ha seguito la prima parte di questo tutorial Illustrate e animate una palla che rimbalza: Parte 1 - Adobe Flash? Beh, quelli di voi che hanno fatto avranno un file Flash da aggiungere a quelli che non l'hanno fatto, non preoccupatevi. Questa seconda parte può anche essere seguita come un singolo tut, dando un risultato finale altrettanto soddisfacente.
Per iniziare, creeremo una palla 3D in Illustrator. In secondo luogo, lo animeremo all'interno di Illustrator e infine lo porteremo a Flash per gli ultimi ritocchi. Iniziamo aprendo un nuovo documento in Illustrator. La palla che abbiamo usato per la prima parte di questo tut ha misurato 90 px x 90 px, quindi definisci la tua tavola da disegno con le stesse dimensioni.
Prima di creare il nostro oggetto 3D, aggiungiamo un motivo alla palette Simboli che useremo per mappare la palla finita. Se ti ricordi dalla prima parte del tut, la nostra palla aveva sei strisce di colore alternato - decorare la nostra versione 3D allo stesso modo sarà semplice.
Crea sei rettangoli verticali, uguali e distanziati. Colorali alternativamente con il rosso # DF3F22 e il giallo # E3CB0E. Raggrupparli insieme se lo si desidera e trascinare l'intero lotto nella tavolozza Simboli (Finestra> Simboli). Assegna a questo nuovo simbolo un nome come "ball_pattern", non che stiamo facendo altri simboli da cui devi differenziarlo ...
Utilizzeremo lo strumento 3D Revolve per fare una palla. Iniziare con lo strumento Ellisse e creare un cerchio delle stesse dimensioni di (e allineato con) la tavola da disegno. Utilizzare lo strumento selezione diretta per rimuovere il punto di ancoraggio sinistro. Finisci assicurandoti che abbia un riempimento (anche se il colore è irrilevante visto che mapperemo "palla_pattern") ma nessun tratto.
Con questo oggetto selezionato vai a Effetti> 3D> Ruota ... Controlla Anteprima e le opzioni predefinite dovrebbero darti il seguente risultato.
Ora dai la palla al modello facendo clic su Map Art all'interno della finestra di dialogo Opzioni 3D. Una sfera avrà solo una superficie da mappare; bello e semplice Seleziona il tuo "modello palla" dal menu a discesa Simbolo e seleziona Adatta in scala.
L'opzione Shade Artwork è di particolare importanza qui. Se lo controlli, otterrai un grande effetto sulla superficie della palla (vedi immagine sotto). Tuttavia, i vettori risultanti diventano così complessi che Flash trova molto difficile renderli in animazione. Ciò non significa che l'ombreggiatura della palla non sia un'opzione - se scegli di farlo, è possibile utilizzare le immagini in Flash rasterizzandole prima. Flash non ha problemi a gestire i bitmap creati, ma ovviamente si perde la flessibilità di lavorare con i percorsi.
Lo dimostrerò più tardi, ma per ora basta prendermi in parola e lasciare Shade Artwork deselezionato! Fai clic su OK per tornare alla finestra di dialogo Opzioni 3D e assicurati che l'opzione Superficie sia impostata su Nessuna ombra.
Per completare il processo 3D (per ora) posizionare la palla su un angolo adatto e fare clic su OK. Ricorda che lo animeremo ruotando intorno all'asse centrale come mostrato di seguito.
Copia e incolla la tua palla 3D in posizione (comando + C, comando + F). I due oggetti saranno visibili come percorsi separati se si espande il livello.
Con la palla duplicata selezionata, fare riferimento alla palette Aspetto (Finestra> Aspetto). Fai doppio clic sull'effetto 3D per modificarlo.
Una volta tornato nella finestra di dialogo Opzioni 3D dovrai eseguire solo una attività e poi fare clic su OK. Dobbiamo ruotare la palla intorno a 120 °. Questo trasformerà la palla nel primo punto in cui appare esattamente come il punto di partenza; non ha senso ruotarlo a 360 ° quando appare identico in tre occasioni durante una rivoluzione ...
Ciò richiederà un po 'di attenzione. Fare clic e trascinare uno dei bordi verdi sul cubo di posizione per ruotare la sfera attorno all'asse centrale. Tieni d'occhio l'anteprima della tua palla e interrompi il trascinamento quando vedi che la palla è girata abbastanza. Il wireframe della palla si abbina perfettamente al nostro schema; ogni segmento colorato della nostra palla è costituito da due segmenti longitudinali del wireframe. Questo dovrebbe rendere abbastanza facile giudicare esattamente dove interrompere il trascinamento.
Dopo aver completato i tuoi due oggetti 3D vai su Oggetto> Miscela> Opzioni di fusione. Qui dovrai specificare i passi dell'animazione tra i due stati della palla. Scegli Passi specificati e inserisci 18 (questo è arbitrario, più passaggi scegli, più graduale sarà l'animazione).
Seleziona i tuoi due oggetti e vai su Oggetto> Miscela> Crea. Il risultato sarà del tutto impercettibile: tutti i tuoi passaggi combinati sono uno sopra l'altro ...
Per animarli in Flash, dobbiamo dividere i passaggi e posizionarli su livelli separati. Espandi il livello mantenendo la fusione e assicurati di aver selezionato la fusione (come mostrato di seguito). Ora apri il menu della palette nella palette Livelli e seleziona Rilascia su livelli (sequenza).
Fatto ciò, seleziona tutti i livelli risultanti e trascinali fuori dal primo livello in cui si trovano. Abbiamo bisogno che siano completamente indipendenti. Quindi, elimina l'originale "Layer 1"; ora è vuoto dopo tutto. Sarai lasciato con una serie di livelli, ognuno contenente una palla 3D a gradi di rotazione graduali. L'ultimo e il primo sono esattamente gli stessi (erano i due stati originali che si sono mescolati) quindi puoi rimuovere anche uno di questi due livelli.
Bene, questo è quello. Ho appena spiegato cosa fare nel titolo di questo passaggio; Salva e chiudi il tuo documento. È finito!
Da quando Adobe ha assunto l'impero di Macromedia, lavorare tra le loro applicazioni è diventato più facile e più facile. Importare ed esportare tra Illustrator e Flash è stato possibile per qualche tempo, anche se i risultati a volte potrebbero essere un po 'imprevedibili. Esportare i livelli di Illustrator come sequenze di film SWF o come singoli file SWF ha dato una discreta compatibilità tra i programmi. Poi è arrivato CS3. Da quel momento siamo stati in grado di importare file AI direttamente e gestire il processo interamente da Flash stesso.
Diamo un'occhiata alle opzioni che abbiamo e applicarle a questo tut. Se hai un file Flash dalla Parte 1 di questo tut o se stai lavorando con i file di origine, apri "source_1.fla;" la nostra palla animata originale. Altrimenti, apri un nuovo documento in Flash.
Vai a Flash> Preferenze ... e scegli AI File Importer. Le opzioni sono tutte ragionevolmente auto-esplicative; dobbiamo assicurarci che i contenuti del nostro file AI siano importati come percorsi (non bitmap, anche se come ho detto prima questa è un'opzione se i percorsi sono troppo complessi). Impostato come sotto, i nostri percorsi importati saranno modificabili, i contenuti di ogni livello verranno convertiti in singoli clip filmato e tutto ciò che si trova al di fuori della tavola da disegno verrà ignorato (abbiamo solo oggetti all'interno della tavola da disegno, quindi questo non ha alcun effetto su di noi ).
OK, importiamo il nostro file sorgente AI. Di nuovo, se dovessi lavorare su un nuovo file flash, ignora i miei riferimenti alla Parte 1 di questo tut.
In "source_1.fla" (o il tuo file FLA completato dalla Parte 1) apri la Libreria (Comando + L) e fai doppio clic su "mc_ball_base". Questa era la nostra palla nel suo stato più elementare; questo filmato è stato quello che abbiamo girato e poi, a sua volta, ha rimbalzato. Quindi tutto ciò che facciamo in questo film verrà girato e rimbalzato. Blocca "Livello 1" e creane uno nuovo chiamato "palla importata".
Con il primo keyframe del layer "import ball" selezionato vai su File> Importa> Importa nello stage ...
Seleziona il file AI dal tuo sistema e fai clic su OK. Ti verrà presentato il Importa * file * nella libreria dialogo, ecco dove finalizzi le opzioni di importazione relative al tuo file AI e questo può essere fatto su un livello strato per livello, livello oggetto per oggetto.
Innanzitutto, noterai che ciascuno dei livelli di Illustrator ha un oggetto Path all'interno di esso. Ogni percorso ha un simbolo di avvertimento che indica che c'è un problema. Infatti, facendo clic su Rapporto incompatibilità si confermerà che questi oggetti non sono compatibili con Flash a causa dell'effetto di rivoluzione 3D.
Queste sono le nostre sfere 3D renderizzate e Flash non può modificarle nel loro stato attuale; avremmo dovuto espandere gli effetti 3D per renderli modificabili. Questo non è un problema nel nostro caso. Non vogliamo modificarli, ma potremmo voler ridimensionarli. Ignora l'opzione di importarli come bitmap; importeranno bene come percorsi scalabili.
Tutte le altre impostazioni predefinite qui vanno bene per le nostre esigenze; assicurati solo che i layer vengano convertiti in fotogrammi chiave. Clicca OK.
Dopo aver importato il tuo file AI, vedrai una sequenza di fotogrammi chiave sul tuo livello "palla importata". Spostando il cursore su e giù sulla timeline mostrerà come questi fotogrammi ti danno la palla girevole. Perfezionare!
Ora completa l'effetto posizionando "Livello 1" sopra "palla importata" ed eliminando tutto da questo livello eccetto il tratto. Fare clic quindi sul fotogramma sopra l'ultimo fotogramma chiave della sequenza (nel mio caso fotogramma 19) e fare clic su F5 per distribuire i fotogrammi lungo la lunghezza dell'animazione. Questo avrà posizionato il tratto originale sulla tua palla.
Il comando + Invio visualizzerà un'anteprima dell'animazione. Nel mio caso, ho anche deciso di rallentare l'effetto di rotazione originale allungando l'interpolazione di movimento nel "film mc_ball". Vedrai la palla girare a 360 ° in senso orario e anche a 360 ° attorno all'asse centrale; un effetto impossibile (senza massiccia concentrazione e un paio di mesi di disegno) usando solo Flash.
Sei curioso di sapere come sarebbe sembrato se fossimo andati per la palla in ombra? Ripeti i passaggi precedenti avendo scelto di ombreggiare la tua palla 3D in Illustrator:
Noterai che ho deciso di non importare i keyframe nel movimento rotante; la palla non gira più in senso orario. Se avessi fatto ciò, anche l'illuminazione sarebbe ruotata (e questo avrebbe rovinato l'effetto). È un bel risultato non credi? Anche in questo caso, il problema con le bitmap è che non vengono ridimensionate o ruotate correttamente in Flash. Come avrete visto, il punto in cui la palla si appiattisce quando colpisce il suolo viene reso un po 'pixelato - un problema con i vettori non ha esperienza.
Qui finisce la seconda parte di questo tutorial in 2 parti! Si spera che queste fasi finali ti forniscano una panoramica su: separare le miscele di Illustrator in livelli, importare file AI in Flash e funzionalità e limiti relativi a vettori e bitmap. Come sempre, spero che vi sia piaciuto questo!
Iscriviti al feed RSS di VECTORTUTS per rimanere aggiornato con le ultime esercitazioni e articoli vettoriali.
Accentsconagua