Spiderman 3

Operazioni Preliminari

Partiamo dall'idea base che è un'immagine wallpaper scaricabile dal sito ufficiale dedicato al terzo film della serie Spiderman ( vedi ):

L'immagine è molto bella e drammatica, per fare quello che ci serve basterà aggiungere solamente qualche effetto in Flash, per esempio:

• La pioggia dovrà essere animata.
• La scena iniziale sarà completamente nera, poi, pian piano comparirà l'immagine.
• Per dare maggiore profondità alla scena questa sarà sfocata.
• Pian piano la figura di Spiderman verrà messa bene a fuoco.
• Aggiungeremo un effetto "glow" (un alone luminescente) alla figura di Spiderman.
• Infine qualche lampo rischiarerà, ogni tanto, il cielo.

Iniziamo, prima di tutto con il definire le dimensioni dello stage: 600 x 450, per cui ridimensioniamo l'immagine, che poi importeremo in Flash, con il nostro programma di fotoritocco preferito (io uso Photoimpact della Ulead). Salviamo l'immagine in formato .jpg con un fattore di compressione che rappresenti un buon compromesso tra "peso" e qualità (80-85% dovrebbe andar bene). Alla "sfocatura" provvederemo con Flash 8 che ha integrato i filtri per questi effetti speciali.

Dobbiamo però ritagliare l'immagine di Spider, perché lo vogliamo perfettamente a fuoco: partiamo dall'immagine appena ridimensionata, scontorniamo la figura del nostro super-eroe, poi la salviamo in formato .png con sfondo trasparente, avremo un'immagine più o meno così.
Con questo abbiamo terminato i lavori preliminari.

ed ora passiamo a Flash...

Apriamo Flash, creiamo un nuovo documento, impostiamo le dimensioni dello Stage (600x450), il frame rate a 24 fps, e lo sfondo "nero".
Adesso importiamo le due immagini create al passo precedente da:
Menu -> File -> Import -> Import to Library.



Quindi creiamo tre livelli (layer) dove poi andremo a disporre gli elementi come nell'immagine sotto, dove:

1. Stage.
2. Immagine di sfondo.
3. Spiderman scontornato.
4. Velo nero.

Abituiamoci ad essere ordinati, in seguito la cosa ci tornerà utile, quindi diamo un nome ai tre layer, come nell'esempio sopra: sfondo, spider, velo. Cominciamo con l'immagine di sfondo: selezioniamo con un click il livello sfondo e trasciniamoci, dalla libreria, l'immagine di sfondo. Non importa che sia ben centrata, prima dobbiamo trasformarla in movieclip, quindi premiamo F8, nel pannello selezioniamo "movieclip" e come nome assegniamo sfondo. Ora possiamo centrare il nostro movieclip sullo stage. Dal pannello delle proprietà gli assegniamo un nome istanza: sfondo, poi clicchiamo sulla linguetta "Filters" fare l'effetto sfocatura: clicchiamo sul segno "+" per aggiungere un filtro, selezioniamo "blur" ed impostiamo i valori come sotto.
Questo livello è a posto, possiamo quindi mettere il lucchetto in modo da non modificarlo accidentalmente. Passiamo ora alla figura scontronata di Spiderman. Clicchiamo sul livello "Spider" per attivarlo e vi trasciniamo l'immagine dalla libreria, quindi premiamo F8 per trasformarlo in movieclip, attribuendogli come nome: spiderman e istanza: spider. Lo allineiamo a destra e centralmente in verticale cosicché sarà esattamente sopra all'immagine sfocata dello sfondo: abbiamo quindi quello che sarà il risultato finale, lo sfondo sfocato e Spiderman perfettamente a fuoco. Ma come avevamo detto all'inizio vogliamo creare un alone luminescente attorno alla figura dell'uomo ragno e per far questo utilizziamo ancora una volta i filtri fi Flash8. Con il movieclip selezionato, premiamo ancora una volta F8, creando così un nuovo movieclip che "incorpora" quello di Spiderman. Gli attribuiamo quindi nome: spiderclip e istanza: spiderclip. Con un doppio-click sul simbolo appena creato lo apriamo per poterlo "editare". Sulla sua timeline è presente un solo Key-Frame con il simbolo spiderman. Premiamo F5 per espandere il frame, quindi F6 per creare un nuovo KF. Ripetiamo l'operazione una seconda volta e così avremo tre KF, uno dietro l'altro, sulla timeline. Saranno i punti di partenza e arrivo della nostra animazione. Selezioniamo il 1° dei tre KF, quindi facciammo un click sul simbolo sullo stage ed un click sulla linguetta Filters: aggiungiamo un Filtro cliccando sul simbolo "+", questa volta scegliamo "Glow", impostando le ozpioni come nella parte sinistra dell'immagine sottostante. Ripetiamo la stessa operazione con il terzo KF, impostando gli stessi identici parametri. Infine selezioniamo il KF di mezzo, quindi clicchiamo sul simbolo sullo stage e aggiungiamo il filtro Glow con le opzioni che sono nella parte destra dell'immagine sottostante.

Adesso, mantenendo premuto il tasto Shift, clicchiamo prima sul primo KF, quindi sul secondo, selezionandoli così entrambe (appaiono di colore nero): click di destro sulla selezione in nero e, dal menu contestuale che compare, selezioniamo la prima voce "Create Motion Tween". In pratica abbiamo creato un'animazione che parte con certi valori del filtro Glow, questi crescono fino al 2° KF, quindi ritornano al loro valore iniziale al 3° KF. Dovremo solamente allungare opportunamente le varie fasi aggiungendo alcuni frame tra un KF e l'altro (basta selezionare un KF e premere F5 tante volte quanti sono i frame da aggiungere). Il risultato sarà quello visualizzato qui sotto:

A questo punto, se eseguiamo una prova del filmato (Ctrl+Enter) vedremo l'immagine di sfondo sfocata con la figura di Spider a fuoco e l'effetto Glow pulsante.
A livello grafico abbiamo quasi finito, mancano solo due elementi: il velo nero che all'inizio copre la scena e poi sparisce e la pioggia. Per il "velo nero" è semplicissimo: selezioniamo lo strumento rettangolo, selezioniamo il colore di riempimento = nero, clicchiamo sul terzo layer (quello che abbiamo chiamato "velo") e tracciamo un rettangolo delle stesse identiche dimensioni dello stage. Poi premiamo F8 e trasformiamo la forma in simbolo movieclip cui assegniamo nome: velo e istanza: velo. Naturalmente se adesso facciamo di nuovo "prova filmato" (Ctrl+Enter) vedremo solo un riquadro nero. Siccome la dissolvenza la eseguiremo con Actionscript, adesso, per poter vedere ciò che sta sotto impostiamo l'alpha a zero.

Ed ora vediamo di far piovere ;-)

segue...