Share
La prima parte di questo tutorial porterà i principianti di Flash attraverso i principi fondamentali dietro il disegno e l'animazione dei vettori in Flash. Disegneremo e animeremo un pallone da spiaggia rimbalzante. Ovviamente, la conoscenza pregressa di Flash aiuterà, ma le seguenti tecniche dovrebbero essere accessibili a tutti e con la maggior parte delle versioni del software. Parte 2 in arrivo ...
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.
Iniziamo aprendo un nuovo documento (File> Nuovo ...). Solo un documento Flash File (ActionScript 2.0) va bene; la versione di Actionscript non è rilevante in quanto non ne useremo nessuna.
Usa la finestra di ispezione Proprietà nella parte inferiore dello schermo per accedere alle Proprietà del documento, fai clic sul pulsante Dimensioni. Innanzitutto, assegna un titolo al documento, quindi assegna lo stage (l'area del documento che sarà visibile al momento della pubblicazione) con dimensioni di 600 px per 400 px. Il colore di sfondo lasceremo bianco, ma cambiamo la frequenza fotogrammi a 21 fps (fotogrammi al secondo). 21 fps offre una velocità di animazione rapida e uniforme.
L'organizzazione è fondamentale quando si lavora con Flash, quindi prima di iniziare a disegnare la nostra palla, chiamiamo il livello su cui si sederà. Fai doppio clic su Livello 1 e chiamalo "Palla".
Seleziona lo strumento Ovale, definisci un tratto e un colore di riempimento, come quelli mostrati. Quindi disegna un cerchio uniforme (tenendo premuto Maiusc e trascinando il mouse). Inoltre, usa la finestra di ispezione Proprietà per assegnare alla corsa 3px di peso.
Creando simboli in Flash puoi utilizzare più istanze degli stessi oggetti in un unico file. I simboli sono tutti accessibili dalla palette Libreria (Finestra> Libreria). Modificando un simbolo, tutte le istanze di quel simbolo all'interno del file verranno modificate.
Trasformeremo il nostro cerchio in un simbolo che diventerà la nostra palla. Seleziona l'intero cerchio e premi F8. Chiamalo "mc_ball", scegli di trasformarlo in un simbolo di clip filmato e fai clic su OK.
Aggiungi un secondo livello sotto il livello "Palla" e chiamalo "Ombra". All'interno del primo fotogramma di questo livello disegna un'ellisse per formare un'ombra sotto la palla. Rimuovi la pennellata e colorala # E2E0E5. Trasformalo in un simbolo come hai fatto prima con la palla, quindi chiamalo "mc_shadow".
Posiziona i due simboli all'incirca all'altezza corretta per suggerire che la palla sia seduta a terra. Nella palette Allinea (Finestra> Allinea) selezionare In fase e centrare i due simboli orizzontalmente.
Abbiamo creato i nostri simboli nella loro forma più semplice, ora iniziamo ad animarli. Tenere premuto MAIUSC e fare clic sul fotogramma 20 di entrambi i livelli sulla linea temporale. Vai a Modifica> Linea temporale> Converti in fotogrammi chiave o premi F6 per trasformare questi fotogrammi in fotogrammi chiave. I fotogrammi chiave rappresentano punti lungo la linea del tempo in cui succede qualcosa. Questo punto sulla Timeline sarà la fine dell'animazione; in altre parole, la palla sarà rimbalzata da terra, raggiunto il suo apice e ritornata in questa posizione di partenza. Lo stesso vale per la nostra ombra: sarà sbiadita quando la palla è salito e tornò a questo stato di partenza al fotogramma 20.
Ora aggiungiamo il punto in cui la palla è al suo massimo. Seleziona il fotogramma 10 su entrambi i livelli e premi F6 per trasformarli in fotogrammi chiave.
Con lo Slider ancora al fotogramma 10, sposta il simbolo della palla verticalmente verso l'alto in un punto dello stage. Seleziona lo strumento Trasformazione libera e allarga l'istanza del simbolo "shadow_main".
Infine, con l'ombra selezionata, vai a Colore nell'Inspector proprietà e modificalo in un valore Alfa del 30%.
Il tweening è il processo mediante il quale Flash genera automaticamente tutte le fasi fra un oggetto o forma due stati.
Abbiamo intenzione di interpolare i fotogrammi tra il nostro primo fotogramma e l'animazione a metà del fotogramma 10. Seleziona un fotogramma qualsiasi tra 1 e 10 su entrambi i livelli e fai nuovamente riferimento all'Inspector proprietà. Scegli Movimento dall'interpolazione e vedrai che i fotogrammi risultanti diventano viola.
Sposta il cursore avanti e indietro lungo la timeline con il mouse e vedrai la palla e l'ombra ben animate. La velocità di questo movimento è comunque completamente uniforme. Abbiamo bisogno che la palla deceleri quando raggiunge il suo apice e possiamo farlo con alleviare (ah ah).
Ancora una volta, con una cornice di ciascun livello selezionata (all'interno dell'area interpolata) fare riferimento a Proprietà Ispettore. Cambia l'interpolazione per uscire con un valore di 100. Questo rallenterà la nostra palla da scalata.
Avendo animato con successo il sollevamento della palla, ripetere i passaggi di interpolazione per i fotogrammi 11-20. Questa volta facilita l'interpolazione di movimento nel -100, facendo accelerare la palla mentre si avvicina al terreno.
Premi Comando + Invio per visualizzare la tua palla animata finora. Dovrebbe assomigliare all'animazione mostrata sotto.
Supponendo che la nostra palla sia fatta di qualcosa di un po 'più flessibile del diamante, cambierà leggermente forma dopo impatto con il terreno. Aggiungiamo un ultimo fotogramma chiave dove la palla si appiattisce momentaneamente.
Seleziona il fotogramma 21 su entrambi i livelli e premi F6 per trasformarli in fotogrammi chiave. Quindi utilizzare lo strumento di trasformazione gratuito per schiacciare il simbolo "palla" dal bordo superiore (tieni premuto Alt mentre lo fai per mantenere il bordo inferiore dove è).
Il nostro movimento di rimbalzo è completo. Ora abbiamo bisogno di aggiungere ulteriori dettagli e movimento alla nostra palla. Fare doppio clic sul simbolo "palla" su uno qualsiasi dei fotogrammi chiave per inserire la timeline di quel simbolo. Vedrai la tua posizione attuale sotto la timeline - dovresti trovarti all'interno di "Scene 1, mc_ball".
Fai clic sull'icona Inserisci livello per creare un secondo livello sopra quello corrente. Copia e incolla il cerchio sul posto dal Livello 1 al Livello 2 (Comando + C, Comando + Maiusc + V). Adesso chiama lo strato inferiore "Ball Spinning" e quello superiore "Shade". Infine, blocca il livello "Ball Spinning".
Disegna un grande cerchio da qualche parte sul palco, assicurandoti che abbia un colore diverso rispetto al cerchio esistente.
Posiziona il cerchio più grande in modo che quello che può ancora essere visto del cerchio giallo sia sulla forma giusta per ombreggiare la palla. Rilascia tutti gli oggetti.
Ora seleziona nuovamente il cerchio più grande e premi Elimina. Posizionando le forme non raggruppate o non simbolizzate l'una sull'altra, le combini come con i pixel nelle applicazioni di disegno. Ora rimuovendo il cerchio più grande ti rimane solo la piccola mezzaluna che diventerà l'ombreggiatura della palla. Seleziona e rimuovi il tratto rimanente e colora la mezzaluna # E2E0E5.
Dato che questa mezzaluna funge da ombreggiatura sulla nostra palla, sarebbe bello dargli una multipla Opacità. Per fare questo dobbiamo convertirlo in un simbolo di clip filmato (dovresti essere abituato a questa azione ora). Premi F8 e chiamalo "mc_ball_shading" (questi nomi stanno diventando scomodi). Fare riferimento alla finestra di ispezione Proprietà e cambiarla è Blend to Multiply. Perfezionare!
Premi Comando + Invio di nuovo per visualizzare la tua palla animata finora. Dovrebbe assomigliare all'animazione sottostante.
Avendo affrontato l'ombreggiatura ora puoi bloccare il livello "Shade" (forse anche renderlo invisibile per rendere il lavoro più semplice) e sbloccare "Ball Spinning". Stiamo per aggiungere un modello per dare al nostro cerchio l'aspetto di un pallone da spiaggia. Usa lo Strumento Ovale per disegnare un grande ovale sul palco. Ha bisogno di un tocco di 1px e #FFFFFF, ma senza colore di riempimento.
Posiziona il tratto come mostrato nell'immagine qui sotto e rilascia. Ora seleziona la parte del tratto che si trova all'esterno della palla semplicemente cliccandoci sopra. Come nel fare prima la mezzaluna dell'ombreggiatura, tutti i vettori su questo strato si sono fusi insieme formando regioni separate. Elimina la parte esterna del tratto.
Disegna un paio di altri ovali e posizionali in cima al cerchio in modo che si congiungino in alto da qualche parte. Quindi rimuovere l'eccesso dall'esterno del cerchio. Gli ovali non devono essere tutti di dimensioni uguali o proporzioni, basta provare a ricreare qualcosa un po 'come l'immagine qui sotto. Ciò che avremo creato è una serie di segmenti che ora possono essere colorati individualmente.
Colorate i segmenti alternati con # EA512D e cancellate tutti i pezzi di tratto bianco dalla palla. Premi Comando + Invio per visualizzare ciò che hai fatto finora. Dovrebbe assomigliare all'animazione sottostante.
Aggiungiamo un'ultima dimensione di movimento all'animazione, faremo girare la palla lentamente mentre rimbalza. Per fare questo, per prima cosa, abbiamo bisogno che la palla sul layer "Ball Spinning" sia convertita in un simbolo. Fai clic sul primo fotogramma chiave del livello per assicurarti che tutto sia selezionato. Ora premi F8 e chiama questo simbolo "mc_ball_base". Vedrai che è stato aggiunto tra gli altri simboli nella palette Libreria (Finestra> Libreria).
Seleziona il frame 32 della timeline sul layer "Spinning Ball" e premi F6 per creare un nuovo Keyframe. Seleziona il fotogramma 32 della timeline sul livello in alto e premi F5. Questo creerà un nuovo frame, ma poiché il simbolo "Shade" non cambia affatto stato, non è necessario renderlo un Keyframe. Dobbiamo solo assicurarci che quando lo Slider raggiunge questo punto lungo la timeline, è presente il simbolo "Shade".
Perché abbiamo scelto il frame 32? Bene, facendo così faremo ruotare la nostra palla una volta ogni 32 fotogrammi. La nostra palla rimbalza una volta ogni 20 fotogrammi e quindi questo tempismo irregolare significherà che la palla si troverà a livelli di spin continuamente differenti durante il rimbalzo. Se questo non è ancora chiaro, presto sarà ...
Seleziona un fotogramma da qualche parte lungo la timeline sul livello "Gira a pallini" e fai riferimento all'Inspector Proprietà. Seleziona l'interpolazione di movimento come hai fatto con il movimento di rimbalzo. Questa volta, non vogliamo alcun valore di Ease, abbiamo bisogno che la palla ruoti costantemente alla stessa velocità. Seleziona CW (in senso orario) dal menu a discesa Ruota e lascia 1 come la quantità di volte in cui la palla ruoterà durante l'interpolazione. Ovviamente, il livello "Shade" non è influenzato e l'ombreggiatura rimarrà quindi nella stessa posizione sulla faccia della palla.
Così il gioco è fatto! Premi Comando + Invio di nuovo e verifica che il movimento sia come desiderato. Se è necessario modificarlo, è possibile aumentare la quantità di fotogrammi nei tween, modificare l'altezza della pallina, la quantità di volte in cui ruota ecc. Questo tutorial ti ha fornito una panoramica su: la timeline Flash e i livelli, il comportamento di Flash strumenti di disegno vettoriale, la gerarchia di simboli e oggetti Flash e interpolazione di movimento.
Spero ti sia piaciuto! La parte 2 è prevista per la pubblicazione il mese prossimo e si espanderà su queste tecniche, migliorando il processo con un tocco di Illustrator ...
Iscriviti al feed RSS di VECTORTUTS per rimanere aggiornato con le ultime esercitazioni e articoli vettoriali.
Accentsconagua