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

OK

Vai ai contenuti

Risorse flash – creare testo scorrevole con barra di scorrimento

Supporto > Tutorial

Tutorial Intermedio. Scroll del testo attraverso barra di scorrimento




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



Questa lezione spiega come creare in modo semplice una casella di testo scorrevole, con una barra di scorrimento ed un cursore.

Conoscenze acquisite: utilizzo dell'azione Tell Target e dei percorsi.






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

Creazione di un testo scorrevole

1.
Disegnare una figura per creare l'area dove si desidera scrivere il testo. Scrivere "MASK", come nome, all'interno della casella di testo posta nel pannello Figura.

2. Scrivere ed allineare il testo.

3. Disporre il testo sopra la figura disegnata, posizionando la prima riga dove si desidera che il testo appaia prima di essere fatto scorrere.

risorse-flash-tutorial-animazioni-flash

4. Nal panello della Linea temporale selezionare il fotogramma 0 relativo all'oggetto Testo e impostare l'effetto Mostra.

5. Selezionare, quindi, il fotogramma 1 e imostare l'effetto Movimento. Si può incominciare con il regolare la durata a 40 fotogrammi: è possibile, comunque, aumentarla nel caso di testi particolarmente lunghi.

6. Cliccare sull'ultimo fotogramma dell'effetto Movimento (in questo modo viene impostata la modalità Anteprima Frame) e trascinare il testo in modo da collocarne l'ultima riga dove si desidera che compaia al termine dello scorrimento.

testo-scorrevole-effetti-flash-swish

7. Attraverso la finestra di dialogo relativa alle impostazioni dell'effetto Movimento, confermare per l'opzione X la voce Invariato (questo manterrà lo scorrimento del testo in perfetto allineamento).

8. Premere il tasto Play per lanciare l'anteprima e assicurarsi che il testo scorra ad una velocità accettabile.

Creazione della Barra di Scorrimento

10.
Disegnare un rettangolo da utilizzare come tracciato (è necessario che l'altezza sia la stessa della figura creata per il testo).

11. Cambiare l'ordine di visualizazione degli oggetti portando questo rettangolo in secondo piano. Selezionare questo rettangolo e quello disegnato per lo sfondo del testo e raggrupparli come figura (attraverso il comando Elabora | Raggruppa | come Figura). Nel pannello Figura, all'interno dell'apposita casella di testo, scrivere "MASK" come nome per la figura così ottenutta.

12. Disegnare una freccia da utilizzare come tasto. Creare una copia della freccia: attraverso il pannello Trasforma ruotare la seconda freccia di 180°. Disporre la prima freccia in cima al rettangolo e la seconda al fondo.

13. Disegnare un rettangolo da utilizzare come cursore e posizionarlo sopra il tracciato, proprio sotto la freccia superiore.

Creazione dei pulsanti per controllare la barra di scorrimento

A questo punto, è necessario creare i pulsanti veri e propri, dal momento che tutto ciò che è stato creato fino ad ora risolve solo l'aspetto grafico. Ciò che fa funzionare la barra di scorrimento sono due pulsanti invisibili: per chiarezza, nell'immagine di seguito, tali pulsanti sono colorati, rispettivamente, in blu e rosso.

creare-animazioni-flash-barra-scorrimento

Ciò che non si riesce a vedere, è che questi due bottoni quasi si incontrano al centro del cursore.

14. Disegnare un rettangolo che abbia approssimativamente le stesse dimensione del primo rettangolo impostato come traccia. Convertirlo in pulsante.

15. Nel pannello Pulsante scrivere "NEXT" nell'apposito campo e attivare l'opzione Rintraccia come menu.

creare-animazioni-con-swish-testo-scorrevole

16. Creare una copia del pulsante, assicurandosi, prima di copiare, che nella Linea temporale o nel pannello Struttura sia selezionata la Scena 1.

17. Attraverso il pannello Pulsante, sostituire il nome "NEXT" con "PREVIOUS".

18. Posizionare il pulsante PREVIOUS in modo che si sovrapponga alla metà superiore del cursore. Analogamente, posizionare il pulsante NEXT in modo che si sovrapponga alla metà inferiore del cursore. Lasciare fra i due pulsanti un piccolo spazio vuoto.

19. Modificare l'ordine degli oggetti, portando in primo piano il cursore.

20. Selezionare il cursore, il bottone NEXT e il bottone PREVIOUS e raggrupparli come Clip filmato.

21. Attraverso il pannello relativo al Clip filmato nominarlo "DRAG".

22. Nascondere i pulsanti NEXT e PREVIOUS (nel pannello Struttura, cliccare sopra l'icona con l'occhio per entrambe) e ritornare alla Linea temporale principale.

23. Aggiungere l'effetto Mostra nel fotogramma 0 del Clip filmato DRAG.

24. Nel fotogramma 1, aggiungere l'effetto Movimento impostando la stessa durata prevista per il testo. Trascinare il Clil filmato in modo da posizionarlo proprio sopra la freccia in basso della barra di scorrimento.

25. Attraverso la finestra di dialogo relativa alle impostazioni dell'effetto Movimento, confermare per l'opzione X il valore Invariato. Cliccare sul tasto Play per lanciare l'anteprima e verificare che il testo scorre verso l'alto mentre il cursore della barra di scorrimento si muove verso il basso.

26. Selezionare tutti gli oggetti (incluso il Clip filmato DRAG) e raggruppare come Clip filmato. Sulla linea temporale, ora, questo Clip filmato dovrebbe essere l'unico oggetto presente.

27. Attraverso il pannello Clip filmato scrivere "SCROLL" nell'apposita casella di testo, attivare le opzioni Ferma alla fine e Usa l'ultimo oggetto come maschera.

28. Aggiungere un'azione Stop al fotogramma 0 del Clip filmato SCROLL (questo manterrà fermo il testo e il cursore fino a che non verrà dato l'input dall'utente).

Aggiungere le azioni


Ritornare a lavorare sulla Linea temporale relativa al Clip filmato DRAG.

29. Selezionare il pulsante NEXT (assicurarsi che nessuno degli stati del pulsante sia selezionato) e aggiungere le seguenti azioni: 'On (Drag Out Drag Over)' Tell Target' ‘/SCROLL', Goto Frame Next. Togliere la spunta dal box "Play".

risorse-flash-animazioni-flash-swish

30. Creare una copia del pulsante.

31. Per il primo pulsante NEXT, aggiungere l'effetto Mostra nel fotogramma 0 e l'effetto Nascondi nel fotogramma 1. Per il secondo pulsante NEXT, invece, aggiungere l'effetto Place nel fotogramma 1.

32. Selezionare il pulsante PREVIOUS (assicurarsi che nessuno degli stati del pulsanti sia selezionato) ed aggiungere le seguenti azioni: ‘On (Drag Out Drag Over)' Tell Target' ‘/SCROLL', Goto Frame Previous. Togliere la spunta dal box "Play".

33. Ripetere i punti 30 e 31 per il pulsante PREVIOUS.

34. Selezionare i due pulsanti NEXT e raggrupparli come Clip filmato.

35. Attraverso il pannello Clip filmato inserire il nome "NEXT" all'interno dell'apposita casella di testo e mettere il segno di spunta nel box "Loop".

36. Selezionare i due tasti PREVIOUS e raggrupparli come Clip filmato.

37. Attraverso il pannello Clip filmato nserire il nome "PREVIOUS" all'interno dell'apposita casella di testo e disattivare l'opzione Ferma alla fine.

38. Ritornare alla Linea temporale principale e verificare il corretto funzionamento dei pulsanti.

Errori più comuni:

Il testo scorre prima che l'utente abbia interagito con esso:
Controllare che vi sia uno Stop nel fotogramma 0 della Linea temporale del Clip filmato che contiene il testo scorrevole.

La maschera non funziona:
Controllare che nel pannello Clip filmato relativo al Clip filmato SCROLL sia selezionata l'opzione
Usa ultimo oggetto come maschera e che la figura MASK sia sul livello inferiore del Clip filmato.

Durante lo scorrimento il testo non rimane allineato:
Controllare che, nelle impostazioni dell'effetto
Movimento aggiunto al testo, l'opzione X=Y non sia selezionata e che per l'opzione _X sia selezionata la voce Invariato.

I pulsanti e il cursore non funzionano:
Controllare l'azione Tell Target assicurandosi di avere immesso correttamente il percorso. Controllare anche le azioni impostate per tutti i pulsanti. Controllare, infine, che per ogni pulsante nel pannello Pulsante sia selezionata la voce
Rintraccia come menu.



Torna ai contenuti | Torna al menu