Utilizzo dello strumento di disegno New Deco in Flash CS5

In questo tutorial utilizzeremo le nuove funzionalità dello strumento Deco di Flash CS5 per creare uno sfondo animato di cartoni animati.


Adobe Flash in Creative Suite 5 è stato arricchito con alcuni aggiornamenti e miglioramenti eccezionali. Adobe Flash CS5 include nuove funzionalità per designer e sviluppatori come il nuovo pannello Snippet di codice, l'integrazione con Flash Builder e il nuovo strumento Spring for Bones.

Una delle nuove funzionalità di Flash CS5 è lo strumento di disegno Deco (anche se, in realtà, lo strumento Deco non è una nuova funzionalità in quanto è stato aggiunto a Flash CS4.) Consente di creare disegni e animazioni basate su forme e colori dinamici . È uno degli strumenti intelligenti che consente di risparmiare tempo e fatica creando oggetti di disegno e animazioni utilizzando simboli e oggetti pronti o caricando simboli personalizzati dalla libreria.

In Adobe Flash CS5, lo strumento Deco è stato migliorato per includere nuove forme e funzioni come vedremo in questo tutorial. L'esempio che tratteremo dovrebbe fornire una comprensione approfondita dello strumento Deco creando uno sfondo animato con gli strumenti Deco. Quasi tutto il lavoro in questo esempio è fatto usando lo strumento Deco e le sue funzioni. Tuttavia, lo scopo di questo esempio è mostrare come utilizzare lo strumento Deco e comprenderne le funzioni attraverso la creazione di sfondi animati Flash o altri progetti e l'utilizzo di oggetti che verranno presi dall'elenco degli oggetti Deco.

Questo tut dimostrerà quanto tempo e sforzi possono essere salvati utilizzando lo strumento Deco. Mentre l'esempio di sfondo del fumetto di seguito richiede ore per creare utilizzando gli strumenti di disegno in Flash insieme ad alcune abilità di disegno, possiamo creare questo esempio in meno di un'ora usando lo strumento Deco, e non abbiamo bisogno di alcuna abilità di disegno.

Devi avere una conoscenza di base degli strumenti di Flash, dato che scaverò direttamente nello strumento Deco, mostrando come personalizzarlo per creare lo sfondo e l'animazione. Tuttavia, iniziamo dal passaggio 1 ...


Anteprima del risultato finale

Diamo un'occhiata al risultato finale su cui lavoreremo:


Passaggio 1: Costruisci la base della scena

Inizieremo creando il documento Flash, preparandolo prima di iniziare ad aggiungere gli oggetti dello strumento Deco.

Crea un nuovo documento Flash con le dimensioni 600 px x 450 px. Aggiungi un rettangolo con le stesse dimensioni del documento e riempi il rettangolo con un riempimento lineare (come nella figura seguente) per creare l'effetto del cielo scuro.


Passaggio 2: strade e edifici

Ora creeremo lo sfondo della strada, usando lo strumento Linea, creeremo la sagoma della strada e la riempiremo di colori grigi per simulare l'asfalto reale. Quindi crea le nuvole usando lo strumento Ovale e il risultato finale dovrebbe apparire come segue:

Ora, inizieremo a utilizzare lo strumento Deco per creare gli edifici da utilizzare per il marciapiede stradale creato sopra. È possibile impostare il tipo di grattacielo che si desidera utilizzare o utilizzare edifici casuali. Inoltre, puoi impostare la dimensione degli edifici.


Passaggio 3: Edifici casuali

Seleziona lo strumento Deco o premi il tasto U sulla tastiera. Nel pannello Proprietà, seleziona "Pennello edificio" dall'elenco a discesa Effetto disegno. Quindi, vai su Opzioni avanzate scegli "Costruzione casuale" e imposta la dimensione su 2.


Step 4: Costruzione

Fare clic sulla strada, quindi trascinare verso l'alto e rilasciare il mouse per creare il primo edificio. Ripeti il ​​passaggio precedente per creare altri edifici sulla strada come mostrato nella figura sottostante

Nei seguenti passaggi, utilizzeremo il pennello dell'albero per creare alberi sul marciapiede e utilizzare il pennello fiore per creare rami fioriti su alcuni edifici. Con questo pennello puoi impostare la dimensione dell'albero e il suo colore di ramo, foglia e fiore / frutto.


Passaggio 5: pennello dell'albero

Crea un nuovo livello sul livello degli edifici. Seleziona lo strumento Deco. Nel pannello delle proprietà, scegli Tree Brush dal menu a discesa e, in Avanzate, seleziona "Aspen Tree".


Step 6: Crescita

Clicca sul marciapiede tra gli edifici per creare gli alberi. Assicurati di trascinare per alcuni pixel per creare piccoli alberi. Più a lungo si trascina, più grande diventa la dimensione dell'albero. L'effetto finale dopo aver aggiunto gli alberi, dovrebbe essere il seguente:


Step 7: Fiori

Ora, seleziona il Pennello fiore, quindi dall'opzione Avanzata seleziona "Poinsettia". Imposta la dimensione del fiore e l'angolo al 50% e assicurati che la casella di controllo Branch sia selezionata


Passaggio 8:

Trascina lo schermo per creare rami di fiori. Dovrebbero essere alti per visualizzarli come un ramo. Se il ramo risultante è troppo grande, puoi selezionarlo e ridurne le dimensioni. Quindi posiziona il ramo di fiore ridimensionato sugli edifici come mostrato nella figura seguente:

I seguenti passaggi spiegano come creare botti di fuoco animate. Useremo anche il pennello Animazione di fuoco che ti consente di creare un fuoco vettoriale animato. È possibile impostare le dimensioni dell'incendio, la velocità e la durata del fotogramma. Inoltre, puoi impostare il colore della fiamma e la scintilla.


Step 9: Great Barrels of Fire

Crea un nuovo simbolo andando su Inserisci> Nuovo simbolo o usa la scorciatoia Ctrl + F8 (Comando + F8 in Mac) e impostalo come clip filmato.

Nel livello attivo, crea un cerchio per rappresentare la parte superiore della canna e un altro per creare il fondo della canna. Trascina due linee tra di loro e completa il riempimento del barile con linee intermedie per assomigliare all'esempio seguente:


Step 10: Fire Animation

Crea un nuovo livello per contenere l'animazione del fuoco. Seleziona lo strumento Deco o premi U nella tastiera, scegli Animazione fuoco dall'elenco a discesa nel pannello Proprietà e imposta l'animazione fuoco su 50 fotogrammi.


Passaggio 11: Applicazione del fuoco

  • Fai clic e tieni premuto sullo schermo per avviare l'animazione dell'incendio.
  • Attualmente, l'animazione del fuoco creato inizia in piccolo e si ingrandisce fino alla fine dell'animazione. Questo creerà un taglio indesiderato nell'animazione loop. Per risolvere questo, rimuoveremo i telai di partenza per il fuoco. Nella timeline, seleziona tutti i fotogrammi in cui il fuoco è ancora in crescita. In questo esempio, abbiamo selezionato i primi 15 fotogrammi. Fai clic con il tasto destro sulla timeline e seleziona Rimuovi fotogrammi (o premi Maiusc + F5).
  • Assicurati che la canna abbia lo stesso numero di fotogrammi dell'animazione antincendio.

Passaggio 12: riposizionare

Ora cambieremo la dimensione e la posizione del fuoco per far sembrare che le fiamme stiano alzandosi dalla canna:

  • Per cambiare la dimensione dell'incendio per adattarla al barile, seleziona tutti i fotogrammi e fai clic sull'icona Modifica più fotogrammi sotto la timeline.
  • Fai clic sull'icona della Cipolla in basso e seleziona Cipolla tutto dall'elenco.
  • Seleziona lo strumento Trasformazione libera e assicurati che tutti i fotogrammi siano selezionati.
  • Ridimensiona la palla di fuoco per adattarla alla canna.

Step 13:

Torna al palco principale e aggiungi il filmato del barile di fuoco sul palco accanto agli edifici come mostrato nella figura sottostante. Puoi testare il film premendo Ctrl + Invio (Comando + Invio in Mac)


Passaggio 14: creazione di neve

Sebbene lo strumento Deco non fornisca tutti i possibili pennelli o forme, è possibile personalizzarlo in base alle proprie esigenze utilizzando i simboli oi colori che si desidera visualizzare. Ora, useremo il sistema di particelle che ti permette di creare animazioni fluenti come neve che cade, fuochi d'artificio e altri effetti che dipendono da piccole particelle che esplodono da una fonte.

Questo pennello si basa su due particelle che possono essere simboli predefiniti oppure puoi utilizzare i simboli della libreria. Inoltre, puoi impostare altre opzioni come la lunghezza dell'animazione, la frequenza per fotogramma e altre opzioni come vedremo di seguito:

Crea un nuovo simbolo usando Inserisci> Nuovo simbolo o usa la scorciatoia Ctrl + F8 (Comando + F8 in Mac) e impostalo come clip filmato. Torna allo stage e trascina il simbolo vuoto appena creato dalla libreria allo stage, quindi fai doppio clic sul simbolo per entrare nella sua modalità di modifica


Step 15: Sistema di particelle

Seleziona lo strumento Deco o fai clic sul tasto U sulla tastiera e scegli Sistema particelle dall'elenco a discesa Effetto disegno nel pannello Proprietà. Seleziona sia Particella 1 che Particella 2, imposta il loro colore su bianco per simulare la neve che cade e usa la forma predefinita. Imposta gli altri valori come segue:

  • Imposta la lunghezza totale e la generazione di particelle su 100 fotogrammi
  • Tasso per fotogramma: 1
  • Durata: 100 fotogrammi
  • Velocità iniziale: 10px
  • Dimensioni iniziali: 10%
  • Gravità: 5px

Passaggio 16: generazione

Ora fai clic sulla parte superiore del palco per far cadere il sistema di particelle dalla parte superiore del palco alla base. Noterai che l'animazione delle particelle viene generata e vengono creati i fotogrammi.


Step 17:

L'animazione della neve inizia piccola e aumenta fino alla fine dell'animazione. Questo (come con il fuoco) creerà un taglio indesiderato nell'animazione loop. Per risolvere questo, possiamo ancora rimuovere i telai di partenza per le particelle di neve di partenza. Seleziona il fotogramma fino al punto in cui la nevicata copre tutto il palco. In questo esempio, selezioneremo i primi 40 fotogrammi. Fai clic con il tasto destro e seleziona Rimuovi fotogrammi o premi Maiusc + F5.

Se noti che l'animazione si muove velocemente, puoi aggiungere una cornice in più dopo ogni fotogramma chiave selezionando il fotogramma chiave e premendo F5.


Passaggio 18: aggiunta di un fulmine

Aggiungiamo alcuni effetti lampo usando il pennello Lightning. Questo fulmine dovrebbe animare e apparire casualmente. È possibile impostare un sacco di opzioni con questo pennello come il colore dell'illuminazione, la sua scala, larghezza del fascio e complessità. Inoltre, puoi scegliere se deve o meno essere animato.

Crea un nuovo simbolo di clip filmato e aggiungilo al livello dietro il livello degli edifici. Nel simbolo del clip filmato, premi F7 per creare una cornice vuota all'inizio del clip filmato e vai al fotogramma 20.


Step 19: Lighting Brush

Seleziona lo strumento Deco e dal pannello Proprietà scegli Pennello illuminazione. Mantenere le impostazioni uguali, basta cambiare il colore in bianco e selezionare la casella di controllo Animazione.


Passo 20: complessità

Puntare il cursore del mouse in alto a sinistra dello stage, fare clic e tenere premuto il mouse finché il lampo raggiunge la complessità desiderata, quindi rilasciare il mouse. Premi F7 dopo l'animazione per aggiungere una cornice vuota dopo di essa.


Passo 21: più fulmini

Vai al fotogramma 70, ripeti i passaggi precedenti per creare più fulmini sulla mano destra del palco con diversa complessità e premi F7 dopo l'animazione per rimuovere il fulmine dal palco.


Step 22: Test

Puoi testare il film facendo clic su Ctrl + Invio (Comando + Invio in Mac) o scegli File> Pubblica per esportare il filmato come file SWF e HTML.


Step 23: Ottimizzazione

Generalmente, i file che utilizzano lo strumento Deco generano file SWF di grandi dimensioni perché lo strumento Deco genera i pennelli e l'animazione come forme non raggruppate e animazioni fotogramma per fotogramma. Questi due metodi aumentano la dimensione totale del file. Tuttavia, è consigliabile ottimizzare il file dopo aver raggiunto i risultati richiesti. Ci sono alcuni suggerimenti per ridurre le dimensioni del file come di seguito:

  • Converti oggetti usati frequentemente, come alberi simili e barili di fuoco, in simboli; questo farà in modo che Flash li contenga come un unico simbolo, indipendentemente dal numero di volte in cui il simbolo viene usato.
  • Rompere i gruppi sovrapposti per ridurre al minimo l'elaborazione hardware necessaria per caricarlo e la dimensione SWF.
  • Prova a utilizzare l'interpolazione di movimento quando possibile poiché l'animazione fotogramma per fotogramma aumenta la dimensione del file SWF.

Conclusione

Nell'esempio sopra, abbiamo imparato come utilizzare lo strumento Deco per creare uno sfondo animato di cartoni animati. Ciò consente di risparmiare tempo e non richiede abilità speciali per disegnare o disegnare cartoni animati. Puoi scoprire il resto dei pennelli disponibili negli strumenti di disegno Deco, vedere come utilizzarli e le diverse opzioni associate a ciascuno di essi.

Spero che questo tutorial ti sia piaciuto, grazie per la lettura!