Animazione flash ispirata ad una pubblicità

Recentemente ho visto una pubblicità in cui alla fine appare la scritta “Buon Natale” con un effetto molto carino: infatti all’inizio si vede solo una linea bianca; poi la neve scende e man mano sembra “riempire” la scritta. Purtroppo non mi ricordo quale prodotto sponsorizzasse la pubblicità: tu lo ricordi? Se sì, dimmelo! ;)
Comunque sia, quando l’ho visto mi è subito venuta voglia di riprodurlo in Flash; se clicchi sulla thumbnail qui a sinistra vedi il risultato. Questo tutorial spiega come fare (per il file sorgente, vai alla fine dell’articolo): 

1. Apri Flash e imposta lo stage (ctrl+j) con dimensioni a piacere: io ho usato 550.8 x 232.1 px. Imposta la frequenza fotogrammi a 35 f/s.
2. Nomina il livello corrente “Buon Natale” e disegna un rettangolo rosso che copra tutto lo stage.
3. Crea un altro livello, con nome “Linea bianca“, e disegna una linea bianca orizzontale. Questo livello dovrà stare sopra gli altri.
4. Torna in “Buon Natale” e crea la scritta “Buon Natale!” (io ho usato il font Verdana). Poi crea l’alberello mettendo uno sopra l’altro tre triangolini e un piccolo rettangolo per tronco. Poi crea la stellina.
5. Ora crea un nuovo livello, “Sipario“. Dovrà stare tra “Linea bianca” e “Buon Natale“. Questo livello contiene, appunto, un “sipario” che si deve alzare gradualmente a rivelare la scritta e l’albero che stanno sotto.
6. Sempre in “Sipario“, inserisci un clip filmato che chiamerai “sipario“.
7. In questa clip crea una forma simile a quella della figura qui sotto e riempila di rosso: deve nascondere la scritta e l’albero completamente.

   

   Al fotogramma 365, incolla in posizione, e poi sposta verso l’alto la forma (maiuscolo + freccia su) finché non scopre la scritta e l’alberello. Modifica anche la parte sottostante della forma, in maniera da creare una variazione nelle ondulazioni.

8. Crea un’interpolazione forma tra i due stati, così la forma sale, ma si modificano anche le ondulazioni (così simula meglio l’effetto della neve che si accumula). Aggiungi anche dei fotogrammi vuoti (io arrivo fino al fotogramma 500), in maniera che ci sia un po’ di pausa dopo che il sipario si è alzato completamente.
9. Torna alla scena 1 e trasforma anche la stellina in una clip filmato. Il primo fotogramma contiene la stellina normale, l’ultimo fotogramma (per me è il 40esimo) contiene la stellina “schiacciata” (basta usare lo strumento “trasformazione libera”). Crea un’interpolazione forma, e otterrai così l’effetto di vedere la stellina girare sempre su se stessa.
10. Ora è giunto il momento di aggiungere la neve! ;) Per farlo, ho seguito pari pari questo tutorial: http://www.techxcel.com/content/view/16/99999. Ho tolto però la possibilità di cambiare direzione alla neve; puoi lasciarla, se ti piace!
11. Per comodità, ho creato un livello a parte chiamato “Neve” e ho inserito lì i clip filmato (beh, *il* clip filmato, nel mio caso, perché mi è bastato solo un fiocco). Attenzione, però, perché bisogna adattare un po’ il codice: infatti noi vogliamo che la neve si fermi sulla linea di terra. Perciò andiamo a modificare le linee di codice relative all’area interessata dall’effetto neve (sono le prime linee di codice nella Scena 1, fotogramma 1):
    mw = 550; //Movie Width
    mh = 136; //Movie Height

Buon divertimento con Flash… E se magari ti ricordassi la pubblicità da cui ho tratto ispirazione, mi faresti un grande piacere!

File sorgente: buon_natale