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

OK

Vai ai contenuti

Effetti flash – creazione e controllo scorrimento del testo – SWiSH

Supporto > Tutorial

Tutorial Intermedio. Scroll del testo su pressione del mouse




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



Questa lezione spiega come creare in modo semplice un testo che l'utente può far scorrere premendo su due pulsanti appositamente predisposti.

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 creata, posizionando la prima riga dove si desidera che il testo appaia prima di essere fatto scorrere.

creare-animazioni-flash-passo-1-swish

4. Nal panello 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.

creare-animazioni-con-swish-passo-2

7. Attraverso la finestra di dialogo relativa alle impostazioni dell'effetto Movimento, cambiare i valori della X scegliendo la voce Invariato (questo manterrà lo scorrimento del testo in perfetto allineamento).

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

9. Selezionare sia il testo che l'area creata e raggruppare gli oggetti come Clip filmato (attraverso il comando Elabora | Raggruppa | come Clip filmato).

10. Attraverso l'apposito pannello, nominare il Clip filmato "SCROLL", togliere il segno di spunta dall'opzione Ferma alla fine e attivare invece l'opzione Usa ultimo oggetto come maschera.

11. Tornare al Pannello Linea temporale e verificare che il testo scorra e che la maschera funzioni.

12. Posizionarsi sul Clip filmato SCROLL, nel fotogramma 0, e inserire un'azione Stop: questo manterrà fermo il testo e il cursore fino a che non verrà dato l'input dall'utente.

Generare i pulsanti per controllare lo scorrimento del testo


Impostato il testo, bisogna far in modo che l'utente possa farlo scorrere verso l'alto e verso il basso. Per ottenere questo risultato è sufficiente creare dei pulsanti che rimandano al fotogramma seguente e al fotogramma precedente.

13. Lavorando sulla Linea temporale principale, disegnare la figura per il pulsante che consente di passare al fotogramma successivo (generalmente si utilizza una freccia che punta verso il basso) e convertirla in un pulsante (attraverso il comando Elabora| Converti | come Pulsante).

14. Volendo, è possibile modificare l'aspetto del pulsante in base allo stato che assume.

15. Se il pulsante non ha forma quadrata o rettangolare è opportuno eseguire anche le seguenti operazioni. Selezionare la figura del pulsante nello stato rilasciato, copiarla e incollarla per lo stato attivo. In questo modo si hanno due figure per lo stato Attivo: cancellare quella rettangolare in modo che il mouse non reagisca al di fuori della figura del pulsante.

16. Attraverso il pannello Pulsante, chiamare il pulsante "NEXT".

17. Creare una copia del pulsante assicurandosi, prima di copiare, che nel Pannello Linea temporale sia selezionata la Scena 1.

18. Rinominare il nuovo pulsante come "PREVIOUS".

19. Attraverso il pannello Trasforma ruotare il pulsante PREVIOUS di 180° in modo da farlo puntare in direzione opposta rispetto al pulsante NEXT.

20. Posizionare opportunamente i pulsanti creati.

Aggiungere le azioni

Le azioni da impostare per questo scroller possono sembrare eccessive. L'evento On Press non porta alla realizzazione di un pulsante che, fintanto che viene premuto, provoca lo scorrimento continuo del testo: è neccessario premere ripetutamente il pulsante o utilizzare un pulsante che sfrutti anche l'evento On Release. Per ottenere uno scroll del testo continuo è possibile, anche, combinare l'evento On Drag Over con l'evento On Drag Out, senza impiegare l'evento On Release e ricordando di impiegare l'opzione
Rintraccia come menu.

21. Attraverso il pannello Pulsante, mettere il segno di spunta sul box Rintraccia come menu per tutti i pulsanti creati.

fare-animazioni-flash-passo-3

22. Selezionare il pulsante NEXT (assicurandosi che nessuno stato del pulsante sia selezionato) ed aggiungere le seguenti azioni: ‘On (Drag Out, Drag Over)' Tell Target' (_root.SCROLL_) nextFrameAndStop(). Toglire il segno di spunta dal box "Play".

effetti-flash-passo-4-swish

23. Selezionare il pulsante PREVIOUS (assicurandosi che nessuno stato del pulsante sia selezionato) ed aggiungere le seguenti azioni: ‘On (Drag Out Drag Over)' Tell Target' (_root.SCROLL_), nextFrameAndStop.Toglire il segno di spunta dal box "Play".

24. Selezionare il pulsante NEXT e crearne una copia assicurandosi di aver selezionato la Scena 1 sul pannello Linea temporale o sul pannello Struttura prima di effettuare il Copia.

25. Selezionare il pulsante PREVIOUS e creare una copia anche di questo.

26. Selezionare tutti e quattro i pulsanti e raggrupparli come Clip filmato (attraverso il comando Elabora |
Raggruppa | come Clip filmato
).

27. Attraverso il pannello Clip filmato nominare il Clip filmato "CONTROL" e disattivare l'opzione Ferma alla fine.

28. Sul pannello Linea temporale ordinare le righe relative ai pulsanti facendo in modo che le due inerenti ai pulsanti NEXT siano sopra rispetto a quelle inerenti ai pulsanti PREVIOUS.

29. Selezionare il primo pulsante NEXT e al fotogramma 0 aggiungere l'effetto Mostra. Nel fotogramma 1, invece, aggiungere l'effetto Nascondi.

30. Selezionare il secondo pulsante NEXT e al fotogramma 1 aggiungere l'effetto Mostra.

31. Selezionare il primo pulsante PREVIOUS e al fotogramma 0 aggiungere l'effetto Mostra. Nel fotogramma 1, invece,
aggiungere l'effetto
Nascondi.

32. Selezionare il secondo pulsante PREVIUOS e al fotogramma 1 aggiungere l'effetto Mostra.

33. Tornare alla Linea temporale principale e verificare che i pulsanti funzionino.

Il testo dovrebbe ora scorrere in entrambi i sensi senza che sia neccessario spostare ripetutamente il mouse sopra i 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 dove è contenuto il testo scorrevole.

La maschera non funziona:
Controllare che nel pannello Clip filmato sia presente il segno di spunta sul box Rintraccia come menu e che la figura MASK sia ad un livello inferiore rispetto al Clip filmato CONTROLL, quindi dietro il testo.

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 non funzionano:
Controllare l'azione Tell Target assicurandosi di aver 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