Sito Italiano ufficiale di SWiSH - Creare animazioni Flash senza usare Flash!

OK

Vai ai contenuti

Tutorial animazioni flash – Effetto Raggio di Luce – SWiSH

Supporto > Tutorial

Tutorial Principiante. Raggi di luce




Scarica la trial di SWiSH Max4 e incomincia subito a lavorare.



Questa lezione spiega come creare
in modo molto semplice l'effetto "raggio di luce".

Conoscenze acquisite: utilizzo degli strumenti base di disegno e di rimodellamento.






Le versioni dimostrative di tutti i
software SWiSH sono completamente funzionanti e limitate unicamente nell'esportazione.

Puoi acquistare la tua copia del software per poter continuare a lavorare ai tuoi progetti.

Download

ZIP

SWF


Per incominciare


Prima di incominciare, osserviamo il filmato da ricreare. Notiamo che la fonte della luce è posizionata dietro la lettera al centro e che tanto più i raggi sono lontani dalla fonte, tanto più diventano larghi e corti. Notiamo anche che dalla lettera posta di fronte alla fonte di luce partono raggi di luce che si dipartono sia verso destra che verso sinistra.
Nell'esempio la scritta presenta un numero dispari di lettere ed è possibile ottenere coppie di lettere a eguale distanza dalla fonte di luce. Se la parola avesse un numero pari di lettere, sarebbe necessario prendere in considerazione questo fattore nel predisporre le coppie di lettere e lasciare la prima o l'ultima spaiata.

Con SWiSH questo effetto può essere realizzato in maniera ragionevolmente facile: il rimodellamento dei raggi è l'operazione che richiede più tempo. E' più semplice impostare questo effetto se si sceglie una parola che ha lettere con poche curve e scritta in maiuscolo con font San Serif (come, per esempio, Arial).

Generazione dei raggi

1.
Per prima cosa, si deve colorare lo sfondo del filmato di nero e creare la o le parole della scritta su cui si vuole lavorare attraverso lo strumento Testo. Il testo deve essere scritto in bianco.

2. Dopo aver creato la scritta, disegnare una linea orizzontale e posizionarla centralmente rispetto alla scritta stessa. Questa linea servirà come riferimento per il posizionamento dei raggi.

Stabilire dove posizionare la fonte della luce.

3. Disegnare un rettangolo da utilizzare per il raggio relativo alla prima lettera. Questo rettangolo deve avere un'altezza pari a 1 ½ o 2 volte quella della lettera e larghezza pari a 4 volte quella della lettera (maggiore è il numero delle lettere che compongono la parola, minore deve essere l'altezza dei raggi esterni).

4. Attraverso il Pannello Figura, personalizzare il rettangolo disegnato facendo in modo che le linee del perimetro siano di un colore facilmente visibile rispetto alla scritta e allo sfondo del filmato e che non ci sia alcun colore di riempimento.

5. Posizionare il rettangolo disegnato sulla prima lettera della parola, avendo cura di far sovrapporre il suo lato destro con il margine destro della lettera stessa. Definire le dimensioni del rettangolo e centrarlo orizzontalmente rispetto alla linea guida predisposta.

6. Creare una copia del rettangolo e posizionarla sull'ultima lettera della parola, in modo tale che il suo lato sinistro sia sovrapposto al margine sinistro della lettera stessa. Centrare anche questo secondo rettangolo orizzontalmente rispetto alla linea guida.

tutorial-animazioni-flash-generazione-raggi


Rimodellamento dei raggi

7.
Selezionare il rettangolo posizionato sulla prima lettera della scritta e, dalla Barra Strumenti laterale, scegliere lo strumento Prospettiva.
Trascinare il vertice superiore destro del rettangolo, in modo da far toccare il suo lato superiore con il margine superiore della lettera. In maniera analoga, trascinare il vertice inferiore destro del rettangolo, in modo da far toccare il suo lato inferiore con il margine inferiore della lettera. Inserire un'ancora attraverso un click del tasto destro del mouse e trascinare quest'ancora in un punto adeguato per fare in modo che la parte destra del rettangolo si adatti il più possibile al profilo della lettera.

creare-animazioni-flash-rimodellamento-raggi

8. Completato il modellamento del primo raggio, procedere in maniera analoga per rimodellare il secondo rettangolo adattandone il lato sinistro al profilo sinistro dell'ultima lettera della parola.

9. Disegnare un nuovo rettangolo per la seconda lettera della parola, avendo cura di renderlo più alto e più stretto rispetto a quelli impostati per la prima e l'ultima lettera.

10. Copiare e incollare quest'ultimo rettangolo in modo da crearne una copia da utilizzare per la penultima lettera della parola.

11. Proseguire creando, centrando e modellando rettangoli per ciascuna lettera della parola, fino a che non si arriva alla lettera centrale.

12. Per la lettera posta al centro della parola è necessario prevedere un rettangolo per il raggio che si sviluppa verso destra, ed uno speculare per il raggio che si sviluppa verso sinistra.

effetti-flash-tutorial-animazioni-flash


Aggiunta di un riempimento sfumato

13.
Ogni raggio deve presentare una sfumatura lineare bianca: deve risultare bianco al 100% nella parte più vicina alla fonte e degradare fino al colore di sfondo (bianco allo 0%). Impostata la sfumatura, occorre rendere invisibili le linee perimetrali.

creare-un-sito-flash-aggiunta-riempimento-sfumato

14. Per la lettera centrale è necessario prevedere anche un cerchio del diametro pari a 2 volte l'altezza della lettera stessa e centrato rispetto alla linea guida: questo cerchio deve essere riempito con una sfumatura radiale bianca.

15. Volendo aggiungere uno scintillio come nell'esempio, è necessario creare un primo ellisse molto stretto da colorare con una sfumatura radiale bianca e, attraverso un copia e incolla, crearne una copia. Il secondo ellisse deve quindi essere ruotato di 180° rispetto al primo. Dopo aver fatto corrispondere i centri dei due ellissi, è possibile procedere a raggrupparli.

Aggiunta degli effetti


Prima di applicare gli effetti, è necessario fare in modo che ciascuna lettera della scritta venga considerata come un oggetto a se stante. Il modo più semplice per ottenere questo risultato è quello di selezionare la scritta e scegliere il comando
Elabora| Raggruppa | Come gruppo, quindi scegliere Elabora | Raggruppa | Separa. Solo a questo punto a ogni lettera può essere associato un effetto.

16. Sui raggi deve essere applicato l'effetto Dissolvenza in uscita. In questo esempio, la velocità di riproduzione del filmato è di 20 fps e la durata degli effetti e di 5 fotogrammi.

17. Sulle lettere, invece, deve essere impostato l'effetto Dissolvenza in entrata: l'effetto deve durare 4 fotogrammi e avere inizio nel fotogramma successivo a quello in cui parte l'effetto legato al raggio corrispondente.

18. L'effetto sul raggio relativo alla seconda lettera deve avere inizio un fotogramma prima rispetto a quello in cui ha inizio l'effetto della prima lettera: per esempio, se nel fotogramma 1 ha inizio l'effetto di Dissolvenza in uscita sul raggio della prima lettera, nel fotogramma 2 deve partire l'effetto di Dissolvenza in entrata della lettera stessa, nel fotogramma 3 di nuovo l'effetto di Dissolvenza in uscita sul raggio della seconda lettera e così via fino al raggio relativo alla lettera centrale.

19. Entrambe i raggi relativi alla lettera centrale devono avere inizio nello stesso fotogramma. Analogamente, anche la lettera centrale e il cerchio colorato con la sfumatura radiale bianca devono avere inizio nello stesso fotogramma. La lettera centrale deve durare per 5 fotogrammi.

20. Sul cerchio con la sfumatura radiale deve essere applicato l'effetto Dissolvenza in uscita con una durata di 5 fotogrammi. Nel fotogramma successivo a quello in cui ha inizio questo effetto sul cerchio, deve essere impostato per il gruppo dello scintillio, in primo luogo, l'effetto Mostra con il valore Alfa impostato al 100% trasparente, in secondo luogo, l'effetto Dissolvenza in entrata con una durata di 3 fotogrammi e una rotazione di 90° e, infine, l'effetto Nascondi.

Se si preferisce un'animazione complessivamente più lenta, specialmente nel caso in cui la parola sia composta da molte lettere, è sufficiente regolare opportunamente la durata dei singoli effetti e spaziare sulla Linea temporale la comparsa dei singoli oggetti.



Torna ai contenuti | Torna al menu