ideasnextdoor.com

Oggi durante uno dei corsi di Web Design al quale insegno abbiamo affrontato il tema movieClip e le sue infinite applicazioni dal punto di vista creativo.

E’ strano ma comprensibile come sia difficile per un neofita entrare nella logica del ragionamento per clip filmato in Flash. E’ piacevole al tempo stesso vedere lo stupore sul viso del corsisti nel vedere quante applicazioni differenti possono avere determinate tecniche.

Ho deciso quindi di mostrarvi alcune applicazioni dei movieClip in Flash e del controllo della linea temporale, utilizzando sempre i riferimenti ai movieClip e un semplice comando (actionscript) di base di Flash: gotoAndPlay();

L’obettivo della corsista era il voler realizzare un candeliere che si illumina al passaggio del mouse; abbiamo realizzato quindi un esempio simile ma diverso, utilizzando una macchina sportiva ed esattamente una bella Bmw di qualche anno fa…scaricata da questo blog.

Rollover sull’immagine per vedere l’effetto.

Per ottenere questo effetto basta seguire pochi semplicissimi passi, i programmi utilizzati sono Photoshop Cs3 e Flash Cs3.

1) Aprite la foto della macchina con Photoshop, create un nuovo livello e coloratelo di nero.

2) Applicate il filtro bagliore lenticolare (filter->render->Lens Flare) e scegliete quello da 105mm Prime con valore di circa 53. Quando potete evitate di usare i primi due, sono davvero sputtanatissimi.

3) Ora cliccate su Ok e impostate il metodo di fusione del livello nero (”black”) in modalità Screen. Come per magia il riempimento nero scomparirà e vedrete solo il bagliore lenticolare in Photoshop.

4) Posizionate quindi la luce sopra il faro destro, duplicate il livello e posizionate la relatica luce sul faro destro.

5) Ora cancellate i bagliori in eccedenza.

A questo punto la preprazione in Photoshop è terminata, possiamo passare all’assemblaggio in Flash.

Salvate da Photoshop tramite la funzione Save for web due immagini, una per la macchina senza le luci ed una per la macchina con le luci. Il nostro obiettivo sarà quello di sovrapporle in Flash simulando l’accensione e lo spegnimento delle luci della vettura.

Aprite Flash e importate nella libreria le due immagini.

Posizionate sulla scena l’immagine della Bmw con le luci spente e assicuratevi che sia esattamente alle coordinate 0,0.

Selezionate l’immagine e trasformatela in un clipFilmato tramite il pulsante F8.
Attribuite al clipFilmato un nome di istanza in basso a sinistra nella barra delle proprietà.

A questo punto fate doppio click sul clip filmato appena creato per editarlo e all’interno, create un nuovo livello ed inseriteci la seconda immagine, quella con la macchina con le luci accese.

Inserite uno stop(); al primo fotogramma e convertite la seconda immagine in un simbolo grafico utilizzando il tasto F8.

Ora animate la proprietà alpha del simbolo grafico appena creato impostando al fotogramma 1, il valore 0%, al fotogramma 7 il valore 100%, ripetete il valore 100% anche poco dopo per tenere le luci un tantino più accese…e poi, al fotogramma 20, impostate il valore alpha di nuovo a 0%.

In questo modo avete creato l’animazione.
Ora uscite dal movieClip e sulla scena principale create un nuovo livello ed iseriteci dentro un pulsante trasparente della dimensione di tutta l’area del filmato o se preferite, solo del pezzo che desiderate rendere attivo al passaggio del mouse.

Selezionate il pulsante, premete F9 per far uscire il pannello delle azioni e inserite il seguente actionScript:

on(rollOver){
_root.bmw_mc.gotoAndPlay(2);
}

In questo modo, al passaggio del mouse sul pulsante, il movieClip chiamato Bmw_mc eseguirà l’animazione dal fotogramma 2 in poi. Essendoci uno stop al fotogramma 1, dopo aver eseguito l’animazione, la testina di riproduzione si fermerà.

Il metodo illustrato è estremamente semplice e non ha niente di particolare tranne il fatto che potete interagire in maniera attiva con gli oggetti che inserirete nei vostri siti web o animazioni interattive.