Aggiunta di interattività di base

Cerca

Ultimo aggiornamento il May 03, 2021 11:52:40 AM GMT

Nota:

A partire da novembre 2015, lo sviluppo di Edge Animate non è più perseguito attivamente. Per ulteriori informazioni, consultate Famiglia di prodotti Edge | Fine dello sviluppo.

Panoramica della lezione

In questa lezione imparerete a:

Comprendere l’interattività
Utilizzare la sintassi di JavaScript
Riconoscere la relazione tra JavaScript, jQuery e l’API di Edge Animate
Differenziare attivatori, eventi e azioni
Aggiungere attivatori alla Linea temporale
Inserire etichette
Creare azioni per rispondere a eventi
Controllare il comportamento dell’indicatore di riproduzione della Linea temporale
Visualizzare e modificare script con il pannello Codice
Aggiungere commenti al codice
Nascondere e mostrare elementi per incorporare riscontro visivo per i pulsanti
Controllare elementi animati
Personalizzare il cursore del mouse

La lezione avrà una durata indicativa di due ore. Prima di iniziare, scaricate il contenuto Lesson05.

fig05-00 — Consentite ai visitatori di esplorare la vostra composizione e diventare partecipanti attivi. Utilizzate snippet di codice incorporato di Adobe Edge Animate e pannelli intuitivi per aggiungere azioni e creare esperienze interattive, orientate all’utente, accattivanti.

Guida introduttiva

Per iniziare, visualizzate la guida (di viaggio) che creerete mentre imparate a realizzare progetti interattivi in Adobe Edge Animate.

Fate doppio clic sul file 05End.html file nella cartella Lesson05/05End per riprodurre la composizione in un browser.

Il progetto è una galleria di foto interattiva in cui vengono mostrate immagini della Birmania. I visitatori possono guardare la breve presentazione che viene riprodotta automaticamente in un ciclo continuo. Oppure, possono fare clic su qualsiasi immagine miniatura sul lato sinistro dello stage per passare direttamente a una particolare immagine. Posizionate il cursore del mouse sopra il pulsante triangolare nella parte superiore per svelare una didascalia.

In questa lezione, imparerete a creare pulsanti interattivi con evidenziatori di rollover e a incorporare il codice appropriato per indicare a Edge Animate dove spostare l’indicatore di riproduzione sulla Linea temporale per visualizzare una particolare animazione o immagine.
Chiudete il file 05End.html e uscite dal browser.
Fate doppio clic sul file 05Start Edge Animate nella cartella Lesson05/05Start per aprire il file di progetto iniziale in Edge Animate.

Il file include tutte le risorse già collocate sullo stage e le transizioni tra ogni immagine sulla Linea temporale. Le dimensioni dello stage sono già state correttamente adeguate. In questa lezione, verrà illustrato come creare questa interazione animazione lineare.
Scegliete File > Salva con nome. Assegnate un nome al file 05_workingcopy e salvatelo nella cartella 05Start. Salvando una copia di lavoro, il file di partenza originario sarà sempre disponibile nel caso sia necessario cominciare da capo.

Informazioni sulle composizioni interattive

Le composizioni interattive cambiano in base alle azioni del visitatore. Ad esempio, se il visitatore fa clic su un pulsante, è possibile che venga visualizzata una grafica differente con ulteriori informazioni. L’interattività può essere semplice, ad esempio il clic di un pulsante, o più complessa, quando sono coinvolti diversi tipi di interazioni con lo stesso elemento. Ad esempio, spostare il cursore del mouse su un pulsante, fare clic sul pulsante e allontanare il cursore del mouse dal pulsante sono tre eventi univoci ciascuno dei quali può comportare diverse alterazioni dell’aspetto visivo sullo stage.

Per ottenere l’interattività in Edge Animate si utilizza JavaScript. JavaScript è uno script standard molto diffuso per i browser Web. JavaScript viene eseguito su browser per desktop, nonché su dispositivi quali tablet e telefoni cellulari.

Se non conoscete JavaScript o non sapete scrivere codice, non fatevi prendere dal panico. Adobe Edge Animate offre un’interfaccia semplice per aggiungere JavaScript alle composizioni e integrare funzioni interattive comuni. Quando conoscerete meglio la sintassi dello script, potrete approfondire maggiormente e personalizzare l’interattività.

In questa lezione imparerete a creare navigazione non lineare, intendendo che l’animazione non deve essere riprodotta dall’inizio alla fine e terminare. Aggiungerete codice che viene attivato quando l’indicatore di riproduzione raggiunge un determinato istante di tempo.

Inoltre, aggiungerete il codice che consente di spostare l’indicatore di riproduzione in parti diverse della Linea temporale per visualizzare elementi particolari. Imparerete anche a creare elementi sullo stage che rispondono a diverse interazioni con il cursore del mouse.

Nozioni di base su JavaScript

JavaScript è il linguaggio di scripting che consente di aggiungere funzionalità a una pagina Web. Molti degli elementi di interfaccia comuni presenti su siti Web, ad esempio menu a discesa, caselle di controllo o caselle di ricerca, vengono creati con JavaScript. Edge Animate utilizza inoltre JavaScript per migliorare l’interattività, oltre alle animazioni e ad altri effetti.

Ubicazione di JavaScript

Anche senza aggiungere interattività a una composizione, il progetto dipende da JavaScript. Il codice JavaScript è contenuto in diversi documenti di testo separati con estensione file “.js”. Prendete in esame i file associati alla composizione Edge Animate, 05_workingcopy. La cartella denominata edge_includes contiene quattro file JavaScript:

edge.0.1.6.min.js
jquery-1.7.1.min.js
jquery.easing.1.3.js
json2_min.js

Questi file contengono il codice di base richiesto per qualsiasi composizione Edge Animate. Esistono anche file JavaScript aggiuntivi che sono univoci per il progetto. Questi file si trovano all’esterno della cartella edge_includes e vengono denominati automaticamente con il nome file Edge Animate. I file vengono denominati come segue:

05_workingcopy_edge.js
05_workingcopy_edgeActions.js
05_workingcopy_edgePreload.js

Il codice JavaScript viene caricato la prima volta che sia avvia il progetto Edge dal browser Web, in modo che tutte le funzionalità siano disponibili quando il progetto viene riprodotto. Tutto il codice è organizzato come funzioni, che raggruppano insieme comandi. Poiché ad ogni funzione corrisponde un nome univoco, potete attivare i comandi facendo riferimento semplicemente al nome della funzione. Nel linguaggio dei programmatori, si dice che una funzione viene “chiamata” o che il browser “chiama” una funzione.

jQuery e l’API di Edge Animate

Lo scopo del codice JavaScript è quello di controllare tutti i dettagli di una pagina Web; nonostante questo sia utile e offra un controllo assoluto, spesso risulta scomodo e complicato. In questi casi tornano utili jQuery e l’API di Edge Animate. jQuery è una libreria JavaScript open source che offre un modo semplice per selezionare, controllare e animare elementi in un browser. jQuery non è un altro linguaggio, ma semplicemente un insieme di funzioni JavaScript ben scritte. Se esaminate nuovamente i file JavaScript nella cartella edge_includes, vedrete che due di essi sono di fatto file per jQuery.

Insieme a jQuery, Edge Animate fornisce funzioni aggiuntive create per l’utente. La libreria di funzioni JavaScript creata da Edge Animate per l’utente costituisce l’API di Edge Animate.

Potete pensare a JavaScript, jQuery e all’API di Edge Animate come livelli di controllo diversi. L’API di Edge Animate è il livello di controllo più superficiale, jQuery è quello intermedio e il puro JavaScript è il livello più profondo. Un’analogia utile è il controllo di un’automobile. L’API di Edge Animate rappresenta i controlli disponibili dal posto di guida: lo sterzo, il freno a mano o il pedale dell’acceleratore. Questi consentono di guidare la macchina senza conoscerne a fondo il funzionamento. Sono creati da una combinazione di leve, quadranti e aste per facilitare il controllo del veicolo. Leve, quadranti e aste rappresentano il livello di controllo jQuery. Al livello più dettagliato c’è JavaScript, rappresentato dai singoli dadi, bulloni e ingranaggi.

Così come è molto più facile guidare una macchina utilizzando il volante e il pedale dell’acceleratore, lo è altrettanto controllare la composizione Edge Animate con l’API di Edge Animate. In entrambi i casi, tuttavia, non c’è motivo per non armeggiare con i controlli del livello più profondo per un’esperienza più personalizzata. Potete iniziare a scrivere codice in jQuery e JavaScript per creare la vostra interattività. Dovete solo assicurarvi di essere un meccanico esperto o conoscere bene JavaScript.

In questa lezione, imparerete innanzitutto ad aggiungere interattività con l’API di Edge Animate. In seguito, quando avrete acquisito maggiore fiducia e sicurezza, potrete approfondire ulteriormente e inserire codice jQuery per effetti più sofisticati.

Attivatori, eventi e azioni

Edge Animate utilizza azioni, attivatori ed eventi per incorporare JavaScript nella composizione.

Le azioni rappresentano ciò che Edge Animate è in grado di fare, cioè molto, considerato il linguaggio JavaScript completo a disposizione. Le azioni vanno dal caricamento di un collegamento ipertestuale alla modifica di una particolare proprietà visiva di un elemento sullo stage, alla memorizzazione di un’informazione in una variabile per poterla recuperare in seguito.

Gli attivatori sono azioni collocate lungo la Linea temporale. Quando l’indicatore di riproduzione raggiunge l’attivatore, le azioni vengono eseguite. Utilizzare gli attivatori per sincronizzare il codice in base all’animazione e non al controllo utente.

Gli eventi rappresentano ciò che accade in una composizione e a cui Edge Animate può rispondere con un’azione. In genere, gli eventi sono generati dall’utente, ad esempio il clic di un pulsante del mouse, la pressione di un tasto o l’inclinazione di un dispositivo mobile. Tuttavia, gli eventi si possono anche verificare automaticamente. Ad esempio, l’istante in cui la composizione è pronta (quando tutte le risorse e le librerie di codice sono state scaricate) è un evento. Gli eventi sono sempre associati ad azioni. Quando si verifica un evento, viene eseguita un’azione o una serie di azioni.

Attivatori della Linea temporale

Gli attivatori sono il modo più semplice per aggiungere codice alla composizione Edge Animate. Gli attivatori vengono eseguiti automaticamente quando l’indicatore di riproduzione li raggiunge sulla Linea temporale. Lungo la Linea temporale possono essere presenti più attivatori. L’intervallo di tempo minimo tra gli attivatori è 1/1000 di secondo, ma in pratica, non sarà mai necessario né richiesto eseguire azioni così ravvicinate.

Creazione di un ciclo continuo

Ai fini di questa presentazione della Birmania, alla fine della Linea temporale verrà inserito un attivatore per riportate automaticamente l’indicatore di riproduzione all’inizio, creando un ciclo continuo.

Fate clic sul pulsante Zoom linea temporale per adattare nella parte inferiore della Linea temporale.

L’intera animazione della presentazione viene visualizzata nello spazio disponibile del pannello Linea temporale.
Spostate l’indicatore di riproduzione alla fine della presentazione, a 0:10 secondi.
Nel pannello Linea temporale, fate clic sul pulsante Inserisci attivatore nella prima riga Azioni. Potete anche selezionare Linea temporale > Inserisci attivatore o premere Ctrl+T (Windows) o Comando+T (Mac OS).

Sulla Linea temporale, a 0:10 secondi, viene visualizzata un’icona il cui aspetto è simile a quello di un diamante racchiuso tra parentesi graffe. L’icona rappresenta un attivatore.

Viene visualizzato un pannello con un grande campo di immissione testo bianco e una colonna di opzioni snippet di codice sulla destra. Il titolo del pannello è Trigger@10000ms, in quanto fa riferimento alla posizione dell’attivatore a 10.000 millisecondi o 10 secondi.
Selezionate il contenuto dello script corrente.

Lo script corrente, //inserite codice qui, è noto come commento. I commenti iniziano sempre con due caratteri barra rovesciata e sono descrizioni del codice. I commenti sono di natura non funzionale e non incrementano in maniera significativa le dimensioni file della composizione.
Dal menu degli snippet di codice sul lato destro del pannello, selezionate l’opzione Riproduci da.

Nel pannello viene visualizzato nuovo codice che sostituisce il commento esistente. Il nuovo codice è dotato dei suoi commenti che ne descrivono la funzione. Il codice, sym.play(1000);, consente di spostare l’indicatore di riproduzione in un particolare istante di tempo sulla Linea temporale e iniziare la riproduzione.
Sostituite il valore 1000 all’interno delle parentesi nel codice con 0.

Il numero tra le parentesi del comando play() rappresenta l’istante di tempo in cui verrà spostato l’indicatore di riproduzione. Poiché desiderate spostare l’indicatore di riproduzione all’inizio della Linea temporale, a 0:00 secondi, inserite 0 tra le parentesi del comando play().
Chiudete il pannello e visualizzate l’anteprima del progetto in un browser premendo Ctrl+Invio (Windows) o Comando+Invio (Mac OS).

La presentazione viene riprodotta per intero e ripetuta quando raggiunge la fine a 10 secondi.

Nota:

il numero tra le parentesi del comando play() è chiamato l’argomento e fornisce informazioni aggiuntive al comando per renderlo più specifico. In questo caso, indica al comando in quale istante di tempo (millisecondo) iniziare la riproduzione. I comandi possono avere più argomenti separati da virgole. Per ogni nuovo comando verranno descritti anche gli argomenti richiesti.

Modifica degli attivatori

La modifica dello script per gli attivatori è un’operazione semplice. Il pannello che viene visualizzato quando si aggiunge l’attivatore è sempre disponibile per le modifiche, le aggiunte o le cancellazioni.

Per modificare un attivatore, fate doppio clic sull’icona dell’attivatore sulla Linea temporale.
Viene aperto il pannello dello script per visualizzare l’attivatore. Potete quindi modificare l’argomento, eliminare il codice o aggiungere nuovo codice dalle opzioni di snippet sul lato destro del pannello.
Per spostare un attivatore, fate clic e trascinate l’icona dell’attivatore sulla Linea temporale in una nuova posizione.
L’attivatore si sposta in una posizione diversa, pertanto le azioni vengono eseguite quando l’indicatore di riproduzione raggiunge un nuovo istante di tempo.
Per eliminare un attivatore, selezionatelo sulla Linea temporale e premete il tasto Canc.

L’attivatore viene rimosso dalla Linea temporale.

Nota:

opzioni di visualizzazione del pannello di script. Il pannello di script che viene visualizzato quando aggiungete un attivatore dispone di diverse opzioni che consentono di semplificare la visualizzazione del codice. Il menu di opzioni in alto a destra contiene tre scelte che controllano il contenuto visualizzato.

Mostra numeri di riga visualizza numeri in sequenza accanto a ogni riga di codice per consentire all’utente e ad altri sviluppatori che condividono lo script di individuare il codice.
Dimensione font controlla le dimensioni di visualizzazione (Piccola, Media o Grande) del testo nello script. L’opzione predefinita è Piccola.
Includi commenti snippet consente di aggiungere automaticamente commenti al codice che viene aggiunto dalle opzioni di snippet sul lato destro del pannello.

Oltre a queste opzioni di visualizzazione, potete fare clic sul bordo verticale che divide l’area di script bianca dal menu degli snippet di codice per comprimere il menu e liberare spazio per il codice. Fate nuovamente clic sul divisore per espandere il menu.

Attenzione alla sintassi

Esaminiamo più attentamente il codice che è stato aggiunto nell’attivatore per ulteriori informazioni sulla sintassi JavaScript o sull’interazione tra parole e punteggiatura. La sintassi è la grammatica di un linguaggio di programmazione.

Se non si conosce il codice di programmazione o di scripting, potrebbe essere difficile decifrare il codice JavaScript inserito da Edge Animate. Tuttavia, una volta compresa la sintassi di base, seguire uno script sarà più semplice.

L’aspetto del codice che si trova nell’attivatore posizionato a 10000 millisecondi è il seguente:

sym.play(0);

La prima parola nell’istruzione è sym. Quando l’istruzione si trova sulla Linea temporale principale, la parola sym rappresenta l’intera composizione Edge Animate. Edge Animate è organizzato intorno al concetto di “simboli” e la radice, o simbolo del livello base, è lo stage Edge Animate. Questo simbolo radice contiene tutti gli elementi e le animazioni nella composizione Edge Animate: tutto il contenuto dello stage o della Linea temporale. In JavaScript, quando desiderate eseguire un’operazione, dovete innanzitutto identificare l’oggetto che desiderate controllare. In questo caso, poiché volete influenzare la Linea temporale della composizione Edge Animate, la prima cosa che viene scritta nello script è sym.
L’operatore punto (.) offre un modo per accedere a comandi diversi per l’oggetto che avete identificato (in questo caso, sym). Gli oggetti possono essere animazioni, testo o concetti astratti, come la data o dati particolari. Gli oggetti dispongono di proprietà, che li descrivono e metodi, ovvero le azioni che possono eseguire. Nell’attivatore, il metodo per l’oggetto sym è play(). Il punto separa l’oggetto e il suo metodo.
Analogamente alla lingua italiana, anche in JavaScript ad ogni parentesi aperta deve corrispondere una parentesi chiusa. Se aprite qualcosa, dovete chiuderla. Tutti i metodi dispongono di parentesi. Il metodo play() dispone di parentesi aperta e chiusa.
Ogni metodo può contenere tra le parentesi diversi argomenti che forniscono informazioni aggiuntive. Il metodo play() richiede un singolo argomento che indica a Edge Animate in quale istante di tempo (in millisecondi) iniziare la riproduzione. I metodi possono avere più argomenti separati da virgole.
Alcuni argomenti richiedono un numero, altri possono richiedere un nome e altri ancora possono richiedere le parole true o false. A prescindere che si inserisca il nome di un file o un URL, utilizzare virgolette singole o doppie. Le virgolette consentono di distinguere un valore Stringa, che rappresenta una sequenza di caratteri, da altri tipi di valori.
Potete aggiungere commenti per ricordare a voi stessi o agli altri il compito delle diversi parti dello script. Per aggiungere un commento per una riga singola, iniziatela con due barre rovesciate (//). Per inserire un commento su più righe, iniziate con /* e terminate con */. I commenti vengono ignorati da JavaScript e non influenzano in alcun modo il codice.
Il punto e virgola alla fine della riga indica a JavaScript che è stata raggiunta la fine di un’istruzione completa e la fine di una riga di codice. Un punto e virgola è come un punto in una frase.

Una singola riga di codice contiene numerose informazioni. Acquisire sicurezza con la sintassi è il primo passo per scendere dalla macchina e guardare cosa c’è sotto il cofano.

Eventi e azioni

Finora avete visto in che modo Edge Animate utilizza gli attivatori per eseguire automaticamente JavaScript quando l’indicatore di riproduzione raggiunge un determinato punto sulla Linea temporale. Avete aggiunto un attivatore alla fine dell’animazione per creare un ciclo continuo. Edge Animate dispone di altri due modi per aggiungere JavaScript: eventi e azioni.

Gli eventi sono avvenimenti che accadono nella composizione e che Edge Animate è in grado di rilevare e a cui può rispondere. Quando viene rilevato un evento, occorre fornire azioni in risposta.

È utile pensare alle interazioni in termini di eventi e azioni. Quando fate clic su un pulsante di menu (evento), è possibile che vengano visualizzate altre opzioni (azioni). Quando passate il cursore del mouse sopra un pulsante (evento), è possibile che venga visualizza un’icona di riproduzione triangolare (azioni). Nella sezione successiva verranno aggiunte immagini miniatura allo stage. Quando l’utente fa clic su ogni miniatura (evento), l’indicatore di riproduzione si sposta in una nuova posizione sulla Linea temporale (azioni) per visualizzare una particolare immagine della presentazione del viaggio.

Creazione di pulsanti

Un pulsante è un indicatore visivo di base dell’interazione utente. L’utente in genere fa clic su un pulsante, ma sono possibili molti altri tipi di interazioni. Ad esempio, rollover, doppi clic e rollout. Edge Animate fornisce anche eventi univoci per dispositivi mobili, ad esempio i tocchi.

Inizierete con l’evento più semplice e comune, ovvero il clic singolo.

Aggiunta di miniature

Nella cartella immagini vengono fornite piccole versioni ritagliate delle immagini della Birmania più grandi.

Nel pannello Libreria, espandete la cartella delle immagini all’interno della cartella Assets.
Trascinate il file denominato button1_gray.jpg dal pannello Libreria nello stage.

Una miniatura in scala di grigi dell’immagine del pescatore viene visualizzata sullo stage, sulla Linea temporale e nel pannello Elementi.
Posizionate la miniatura in modo che il suo l’angolo superiore sinistro corrisponda a quello dello stage. Le coordinate devono essere X=0, Y=0.
Trascinate il file denominato buttonbutton2_gray.jpg dal pannello Libreria nello stage e posizionatelo appena sotto la prima miniatura. Potete utilizzare le guide sensibili per bloccare automaticamente le immagini in posizione. Le coordinate devono essere X=0, Y=80.

Due miniature in scala di grigi si trovano sul lato sinistro dello stage, una sopra all’altra
Trascinate le tre miniature in scala di grigi rimanenti dal pannello Libreria sullo stage, posizionando ogni immagine successiva sotto quella precedente.

Un totale di cinque immagini miniatura devono essere impilate verticalmente sul lato sinistro dello stage.

Aggiunta di eventi

Ogni elemento sullo stage può disporre di propri eventi e azioni. Inserite codice per singoli elementi dalla colonna più a sinistra della Linea temporale o del pannello Elementi. Il pulsante Apri azioni viene indicato da un insieme di parentesi graffe.

Nella Linea temporale o nel pannello Elementi, fate clic sul pulsante Apri azioni per il primo elemento miniatura, button1_gray.

Viene visualizzato il pannello di script per button1_gray.

Viene visualizzato automaticamente un menu di opzioni contenente gli eventi possibili per l’elemento button1_gray.
Selezionate la prima opzione: clic.

Edge Animate aggiunge una scheda clic nella parte superiore del pannello con un riquadro di script vuoto e gli snippet disponibili sulla destra.

Nota:

quando aggiungete altri eventi allo stesso elemento, schede aggiuntive vengono visualizzate nella parte superiore del pannello di script.

Nota:

per eliminare un evento (e l’eventuale codice associato), selezionate la particolare scheda per l’evento e fate clic sul pulsante Meno nell’angolo in alto a sinistra del pannello di script.

Aggiunta di azioni

A ogni evento è associata un’azione o una risposta.

Posizionate il cursore sulla seconda riga del riquadro di script (dopo la prima riga di commenti) e scegliete l’opzione Interrompi a.

Edge Animate aggiunge il codice per interrompere l’indicatore di riproduzione in una particolare posizione sulla Linea temporale.
Sostituite il numero 1000 tra le parentesi del metodo stop() con 0.

Il metodo stop() richiede un numero, in millisecondi, che rappresenta il punto sulla Linea temporale in cui l’indicatore di riproduzione si deve spostare e fermare. Poiché questa prima miniatura in scala di grigi è del pescatore, l’indicatore di riproduzione si deve fermare a 0:00 secondi, il punto in cui viene visualizzata l’immagine completa del pescatore sullo stage.

Nota:

di fatto, potete utilizzare qualsiasi numero compreso tra 0 e 1500 per il metodo stop() di button1_gray, poiché l’immagine del pescatore rimane sulla Linea temporale fino a 1,5 secondi, ma è più semplice essere coerenti e scegliere l’istante di tempo in cui l’immagine appare per la prima volta.
Chiudete il pannello di script.

L’icona Apri azioni per l’elemento button1_gray diventa piena, per indicare che esiste attualmente uno script allegato all’elemento.
Visualizzate l’anteprima della composizione Edge Animate in un browser selezionando File > Anteprima nel browser o premendo Ctrl+Invio (Windows)/Comando+Invio (Mac OS).
In qualsiasi punto durante la presentazione, fate clic sulla prima miniatura in scala di grigi.

La presentazione si interrompe e mostra l’immagine del pescatore.

Completamento dell’interattività

Ora che avete completato l’interattività per il primo pulsante, aggiungete la stessa funzionalità alla parte restante.

Nella Linea temporale o nel pannello Elementi, fate clic sul pulsante Apri azioni per il secondo elemento miniatura, button2_gray.

Viene visualizzato il pannello di script per button2_gray.
Fate clic sul pulsante Più nell’angolo in alto a sinistra.

Viene visualizzato un menu di opzioni contenente gli eventi possibili per l’elemento button2_gray.
Selezionate la prima opzione: clic.

Edge Animate aggiunge una scheda clic nella parte superiore del pannello con un riquadro di script vuoto e gli snippet disponibili sulla destra.
Posizionate il cursore sulla seconda riga del riquadro di script (dopo la prima riga di commenti) e scegliete l’opzione Interrompi a.

Edge Animate aggiunge il codice JavaScript per interrompere l’indicatore di riproduzione in una particolare posizione sulla Linea temporale.
Sostituite il numero 1000 tra le parentesi del metodo stop() con 2000.

Il metodo stop() richiede un numero, in millisecondi, che rappresenta il punto sulla Linea temporale in cui l’indicatore di riproduzione si deve spostare e fermare. Poiché questa seconda miniatura in scala di grigi è quella della statua, l’indicatore di riproduzione si deve fermare a 0:02 secondi, il punto in cui viene visualizzata l’immagine completa della statua sullo stage.
Aggiungete eventi clic simili a tutte le altre immagini anteprima in scala di grigi con l’opzione Interrompi a. Accertatevi di modificare gli argomenti per ogni metodo stop() come segue, in modo che l’indicatore di riproduzione si interrompa in istanti di tempo diversi per visualizzare un’immagine più grande univoca sullo stage:
- Il metodo stop() per button1_gray deve andare a 0 millisecondi.
- Il metodo stop() per button2_gray deve andare a 2000 millisecondi.
- Il metodo stop() per button3_gray deve andare a 4000 millisecondi.
- Il metodo stop() per button4_gray deve andare a 6000 millisecondi.
- Il metodo stop() per button5_gray deve andare a 8000 millisecondi.

Navigazione del pannello Codice

La presentazione del viaggio è ora interattiva e gli utenti possono fare clic per visualizzare una qualsiasi delle immagini. Il codice appare tuttavia frammentato tra molti elementi diversi. In che modo è possibile raggruppare insieme tutto il codice della composizione Edge Animate? La risposta è il pannello Codice, che può essere aperto selezionando Finestra > Codice o premendo Ctrl+E (Windows) o Comando+E (Mac OS).

Visualizzazione del codice

Il pannello Codice visualizza tutto il codice nella composizione Edge Animate: quello che viene generato automaticamente per ogni progetto e quello che può essere inserito dall’utente stesso.

Scegliete Finestra > Codice o premete Ctrl+E (Windows)/Comando+E (Mac OS).

Viene visualizzato il pannello Codice. Il pannello Codice è simile agli altri pannelli di script per attivatori, eventi e azioni.
Fate clic sul pulsante Codice completo all’estremità destra del pannello per passare dalla modalità Codice completo alla modalità non Codice completo e viceversa.

Nella modalità Codice completo, Edge Animate visualizza il codice completo per il file JavaScript per la composizione Edge Animate. Scorrete verso il basso per visualizzare lo script per tutti gli elementi miniatura nonché l’attivatore. Il codice rappresentato è contenuto nel file 05_workingcopy_edgeActions.js.

In modalità diversa da Codice completo, potete selezionare il codice per i singoli elementi o attivatori sullo stage nel lato sinistro del pannello. Inoltre, è possibile visualizzare il codice per il Precaricatore, che è attualmente disabilitato perché non è stato ancora aggiunto. Nelle lezioni successive, imparerete ad aggiungere un Precaricatore.
Nella modalità non Codice completo, fate clic sul pulsante Più agganciato all’elemento stage.

Viene visualizzato un menu gerarchico che consente di aggiungere un evento allo stage stesso, a qualsiasi elemento sullo stage o alla Linea temporale.
Se desiderate eliminare un evento o attivatore dal pannello Codice, fate clic con il pulsante destro del mouse sull’evento o sull’attivatore nell’elenco e selezionate Elimina azione.
Nella modalità Codice completo o non Codice completo, quando si apportano aggiunte e modifiche allo script, queste vengono salvate nella composizione.

Nota:

gestione degli errori di codice

L’uso degli snippet di codice forniti semplifica l’aggiunta di codice perché lo script è già correttamente formattato. Dovete semplicemente sostituire i valori chiave. Tuttavia, è inevitabile che vengano introdotti bug ed errori. Occuparsi degli errori di codice è un impegno comune per qualsiasi sviluppatore, a prescindere dalla sua esperienza.

Edge Animate segnala immediatamente gli errori di codice, semplificandone l’individuazione e la correzione. Nel caso esista un errore di sintassi in qualsiasi parte del codice, Edge Animate visualizza un messaggio di errore nell’angolo in basso a sinistra del pannello Codice. Ad esempio, se avete inavvertitamente eliminato la parentesi di chiusura del metodo stop(), il messaggio di errore indica la posizione in cui l’errore si è verificato. Inoltre, accanto alla riga di codice in questione viene visualizzato un punto rosso.

La notifica di errore viene anche visualizzata nell’angolo in basso a destra dello stage.

Nota:

fate clic sull’icona freccia dopo la descrizione dell’errore per passare direttamente all’origine dell’errore nel pannello Codice in modo da poterlo correggere. Le opzioni Tutto o Codice nel messaggio di errore determinano se vengono visualizzati tutti gli errori (inclusi avvisi di incompatibilità della funzione con diversi dispositivi, ad esempio ombreggiatura del testo in IE9) o solo gli errori di codice.

Creazione di etichette

Quando l’utente fa clic su ciascuna miniatura, Edge Animate sposta l’indicatore di riproduzione in un nuovo istante di tempo sulla Linea temporale, in base all’argomento nel metodo stop(). Supponete, tuttavia, che il cliente che vi ha incaricato di sviluppare questa presentazione desideri che l’intera sequenza venga eseguita più lentamente. Si tratta di un compito facile perché potete selezionare tutti gli elementi sulla Linea temporale e spostare tutti i fotogrammi chiave e le animazioni in avanti per allungare il periodo di tempo totale. Questo può però causare la modifica degli istanti di tempo in cui ogni immagine viene visualizzata sullo stage, che comporterebbe la modifica di tutti i valori millisecondi nei metodi stop().

Esiste un approccio alternativo che consente di risparmiare tempo ed energia. Anziché utilizzare nei metodi stop() instanti di tempo espressi in millisecondi fissi, potete utilizzare etichette che fanno riferimento a punti sulla Linea temporale. Le etichette possono spostarsi con l’animazione, pertanto incrementando o decrementando la lunghezza dell’animazione le etichette vengono spostate in maniera proporzionale.

Aggiunta di etichette

Le etichette vengono visualizzate nel pannello Linea temporale, sotto gli indicatori di tempo e subito sopra il livello Azioni.

Spostate l’indicatore di riproduzione a 0:00 secondi.

L’immagine del pescatore viene visualizzata a 0:00 secondi.
Fate clic sul pulsante Inserisci etichetta o premete Ctrl+L (Windows)/Comando+L (Mac OS).

Sulla Linea temporale viene visualizzata un’etichetta denominata Label 1.
Rinominate l’etichetta pescatore e premete Invio per uscire dalla modalità di modifica del testo dell’etichetta.

L’etichetta denominata pescatore è ora associata a 0:00 secondi.
Aggiunte altre quattro etichette alla Linea temporale, ciascuna delle quali contrassegna il punto iniziale in cui un’immagine viene visualizzata sullo stage.
- Inserite l’etichetta statua a 0:02 secondi.
- Inserite l’etichetta abitazioni a 0:04 secondi.
- Inserite l’etichetta frate a 0:06 secondi.
- Inserite l’etichetta donne a 0:08 secondi.

Modifica di etichette

Esistono diversi modi per modificare le etichette dopo che sono state inserite e denominate:

Per rinominare un’etichetta, fate doppio clic sul nome dell’etichetta sulla Linea temporale.
Per spostare un’etichetta, selezionate e trascinate l’etichetta sulla Linea temporale in una nuova posizione.
Per eliminare un’etichetta, selezionate l’etichetta sulla Linea temporale per evidenziarla e premete il tasto Canc.
Per tagliare, copiare o incollare un’etichetta, fate clic con il pulsante destro del mouse su un’etichetta e scegliete l’opzione desiderata, oppure utilizzate i comandi da tastiera standard per tagliare (Ctrl/Comando+X), copiare (Ctrl/Comando+C) e incollare (Ctrl/Comando+V).

Modifica dei riferimenti alla Linea temporale

Ora che la Linea temporale contiene etichette, potete modificare i riferimenti nel codice JavaScript.

Scegliete Finestra > Codice o premete Ctrl+E (Windows)/Comando+E (Mac OS).

Viene visualizzato il pannello Codice.
Se non è già stato selezionato, fate clic sul pulsante Codice completo per visualizzare il pannello nella modalità Codice completo.

Tutto il codice per gli eventi e le azioni della miniatura viene visualizzato nel singolo riquadro di script.
Sostituite tutti i tempi in millisecondi nei metodi stop() con le etichette. Occorre modificare le seguenti righe di codice:
- Modificare sym.stop(0); in sym.stop("fishermen");
- Modificare sym.stop(1500); in sym.stop("statues");
- Modificare sym.stop(3500); in sym.stop("houses");
- Modificare sym.stop(5500); in sym.stop("monk");
- Modificare sym.stop(7500); in sym.stop("women");
Nota:

accertatevi di utilizzare virgolette semplici intorno ai nomi etichetta. Le virgolette sono essenziali per consentire a JavaScript di identificare i nomi come una stringa (e non una variabile). Virgolette semplici e virgolette tipografiche sono caratteri diversi in HTML e JavaScript e non sono intercambiabili.
Visualizzate l’anteprima della composizione Edge Animate in un browser selezionando File > Anteprima nel browser o premendo Ctrl+Invio (Windows)/Comando+Invio (Mac OS).
In qualsiasi punto durante la presentazione, fate clic sulle immagini miniatura.

La presentazione si interrompe e mostra l’immagine selezionata.
Tornate in Edge Animate e selezionate tutti gli elementi sulla Linea temporale scegliendo Seleziona > Tutto o premendo Ctrl+A (Windows)/Comando+A (Mac OS). Accertatevi che nessuno degli elementi sia bloccato.
Fate clic e trascinate l’ultimo fotogramma chiave dell’ultimo elemento animato sulla Linea temporale. Trascinate il fotogramma chiave verso sinistra per ridurre la durata totale della presentazione.

Riducendo la durata di tutti gli elementi animati, le etichette si spostano in maniera proporzionale mantenendo l’identificazione di ciò che è visualizzato sullo stage. Riportate la durata totale della composizione a 0:10 secondi.

Aggiunta di riscontro visivo

La maggior parte degli elementi interattivi sul Web sono caratterizzati da un riscontro visivo. Questo è importante per indicare al lettore che il particolare elemento è interattivo. Ad esempio, un semplice collegamento ipertestuale su una pagina Web cambia spesso colore quando si sposta il cursore del mouse su di esso. Un pulsante viene evidenziato quando spostate il cursore del mouse su di esso e può apparire premuto quando fate clic.

Potete creare queste interazioni con una combinazione di eventi e azioni in Edge Animate. Aggiungerete questi eventi e azioni alle miniature per il riscontro visivo in seguito.

Aggiunta di miniature mouseover

La prima domanda che dovete porvi è: qual è l’effetto visivo che desidero ottenere quando un utente sposta il cursore del mouse sulle immagini anteprima? Per questo progetto, le miniature in scala di grigi diventeranno colorate e i bordi verranno evidenziati. Il primo passo è portare versioni colorate delle miniature sullo stage.

Nella cartella immagini della cartella Assets del pannello Libreria, troverete versioni a colori di ciascuna delle cinque immagini miniatura, indicate dal termine color aggiunto al nome file.
Trascinate button1_color.jpg dalla Libreria sullo stage.
Utilizzate le Guide sensibili per posizionare l’elemento button1_color nell’angolo in alto a sinistra, esattamente sopra la sua versione in scala di grigi. La sua posizione deve essere X=0, Y=0.
Trascinate tutte le altre quattro versioni colorate delle miniature nello stage, posizionandole esattamente sopra i loro partner in scala di grigi. Tutte le miniature colorate devono trovarsi in cima alla pila di pannelli Elemento.

Le versioni in scala di grigi e colorate delle miniature hanno le stesse dimensioni.

Nascondere le miniature mouseover

Poiché volete mostrare le versioni colorate solo quando il cursore del mouse si sposta sopra la miniatura, dovete innanzitutto nascondere le miniature colorate. Potete nascondere gli elementi modificando la loro proprietà Visualizza in Disatt..

Spostate l’indicatore di riproduzione a 0:00 secondi.
Tenete premuto il tasto Maiusc e selezionate tutti gli elementi miniatura colorati.
Nel pannello Proprietà, modificate la proprietà Visualizza da Att. a Disatt..

Edge Animate inserisce un nuovo fotogramma chiave sulla Linea temporale per tutti gli elementi selezionati a 0:00 secondi e gli elementi selezionati vengono rimossi dallo stage.

Inserimento dell’evento mouseover

Ogni miniatura in scala di grigi contiene un evento clic. Per incorporare un evento mouseover dovrete modificare ciascuno di questi elementi. Un evento mouseover si verifica quando l’utente sposta il cursore del mouse sopra l’elemento selezionato. Quando l’evento mouseover si verifica, verranno mostrate le miniature colorate.

Nella Linea temporale o nel pannello Elementi, fate clic sul pulsante Apri azioni per il primo elemento miniatura, button1_gray.

Viene aperto il pannello di script per button1_gray e visualizzati l’evento clic corrente e le azioni.
Fate clic sul pulsante Più nell’angolo in alto a sinistra e scegliete mouseover.

Edge Animate aggiunge una scheda mouseover.
Posizionate il cursore sulla seconda riga del riquadro di script (dopo la prima riga di commenti) e scegliete l’opzione Mostra elemento.

Edge Animate aggiunge il codice JavaScript per visualizzare un elemento. La porzione del codice evidenziata è il nome dell’elemento da visualizzare.
Sostituite il codice evidenziato con button1_color. Accertatevi che il nome elemento sia racchiuso tra virgolette semplici doppie.

L’aspetto dell’istruzione completa è il seguente:

sym.$("button1_color").show();

Il simbolo di dollaro e le parentesi sono sintassi jQuery e indicano al browser quale elemento selezionare. In questa istruzione, viene selezionato l’elemento denominato button1_color nella composizione Edge Animate corrente ed eseguito il metodo denominato show().
Visualizzate l’anteprima della composizione Edge Animate in un browser selezionando File > Anteprima nel browser o premendo Ctrl+Invio (Windows)/Comando+Invio (Mac OS). Spostate il cursore del mouse sopra la prima immagine miniatura in scala di grigi.

Non appena il cursore del mouse si sposta sopra l’immagine miniatura in scala di grigi, viene visualizzata la versione colorata. Poiché la versione colorata è sopra la versione in scala di grigi, viene visualizzata solo l’immagine colorata.
Tornate in Edge Animate e inserite l’evento mouseover con l’azione Mostra elemento nei quattro pulsanti miniatura in scala di grigi rimanenti. Accertatevi di sostituire la parte di codice evidenziata con la versione colorata corretta della miniatura.

Inserimento dell’evento mouseout

Quando visualizzate l’anteprima del progetto Edge Animate, noterete che le miniature diventano colorate quando spostate il mouse su di esse e rimangono tali anche dopo che il mouse viene allontanato. Per ripristinare le versioni in scala di grigi delle miniature, è necessario aggiungere un altro evento: mouseout.

L’evento mouseout si verifica quando il cursore si allontana da un elemento. L’evento mouseout verrà aggiunto alle miniature colorate (non le miniature in scala di grigi) e associato a un comando che nasconde le versioni colorate. Il risultato: le versioni colorate vengono rimosse lasciando nuovamente visibili la versioni in scala di grigi.

Nella Linea temporale o nel pannello Elementi, fate clic sul pulsante Apri azioni per il primo elemento miniatura, button1_color. L’elemento è attualmente nascosto sullo stage, ma è ancora possibile aggiungere script.

Viene visualizzato il pannello di script per button1_color.
Nel menu a comparsa visualizzato, scegliete mouseout per l’evento.

Edge Animate aggiunge una scheda mouseout.
Posizionate il cursore del mouse sulla seconda riga del riquadro di script (dopo la prima riga di commenti) e scegliete l’opzione Nascondi elemento.

Edge Animate aggiunge il codice JavaScript per visualizzare un elemento. La porzione del codice evidenziata è il nome dell’elemento da visualizzare.
Sostituite il codice evidenziato con button1_color. Accertatevi che il nome elemento sia racchiuso tra virgolette semplici doppie.

L’aspetto dell’istruzione completa è il seguente:

sym.$("button1_color").hide();

Osservate le similitudini tra le azioni per l’evento mouseout e lo script precedente per l’evento mouseover.
Visualizzate l’anteprima della composizione Edge Animate in un browser selezionando File > Anteprima nel browser o premendo Ctrl+Invio (Windows)/Comando+Invio (Mac OS). Spostate il cursore del mouse sopra la prima immagine miniatura in scala di grigi.

Non appena si sposta il cursore del mouse sopra l’immagine miniatura in scala di grigi, questa diventa colorata. Quando si allontana il cursore del mouse dall’immagine, viene ripristinato l’aspetto in scala di grigi del pulsante.
Tornate in Edge Animate e inserite l’evento mouseout con l’azione Nascondi elemento nei quattro pulsanti miniatura colorati rimanenti. Accertatevi di sostituire la parte di codice evidenziata con la versione colorata corretta della miniatura.

Modifica dell’evento clic

Prima di poter utilizzare tutti gli eventi e le azioni insieme è necessaria una correzione finale. Come potete notare, il clic sui pulsanti non sposta l’indicatore di riproduzione come previsto. Il motivo è che le miniature colorate si sovrappongono alle controparti in scala di grigi bloccando gli eventi clic. Il passaggio finale consiste nel rimuovere gli eventi clic dalle miniature in scala di grigi e aggiungerli invece alle miniature colorate.

Nella Linea temporale o nel pannello Elementi, fate clic sul pulsante Apri azioni per ciascuno degli elementi miniature in scala di grigi.
Scegliete la scheda evento clic nel pannello di script e fate clic sul pulsante Meno.

Edge Animate elimina l’evento clic e tutte le azioni correlate.
Nella Linea temporale o nel pannello Elementi, fate clic sul pulsante Apri azioni per ciascuno degli elementi miniatura colorati.
Fate clic sul pulsante Più nell’angolo in alto a sinistra e scegliete clic per l’evento.

Edge Animate aggiunge una scheda evento clic.
Scegliete l’opzione Interrompi e, come fatto in precedenza, sostituite l’argomento millisecondi con l’etichetta corrispondente sulla Linea temporale.
Visualizzate l’anteprima della composizione Edge Animate in un browser selezionando File > Anteprima nel browser o premendo Ctrl+Invio (Windows)/Comando+Invio (Mac OS).

I pulsanti sono completi. Quando il cursore del mouse viene spostato sopra di essi, diventano colorati. Quando il cursore mouse viene allontanato, tornano in scala di grigi e quando si fa clic su di essi Edge Animate visualizza l’immagine corrispondente dalla presentazione.

Nota:

utilizzo del pannello Codice per apportare modifiche globali. Apportare modifiche globali come è stato fatto in questa attività, ad esempio eliminare tutti gli eventi clic da un set di elementi, può essere un’impresa ardua in ragione della necessità di selezionare e modificare ogni elemento. Tuttavia, l’uso del pannello Codice consente un notevole risparmio di tempo se le operazioni di selezione e modifica del codice vengono eseguite con cautela.

Aprite il pannello Codice selezionando Finestra > Codice, o premendo Ctrl+E (Windows)/Comando+E (Mac OS) e scegliete la modalità Codice completo. Esaminate il codice per tutti gli eventi clic (cui si fa riferimento come "clic") per tutti gli elementi desiderati. Eliminate tutto ciò che inizia con istruzioni che includono l’evento clic e termina con //Edge binding end.
Nota:
eventi per il mouse e per i dispositivi sensibili al tocco. Nel seguente elenco vengono descritti gli eventi disponibili che potete allegare agli elementi per l’interazione con il mouse o un dispositivo sensibile al tocco. Per la maggior parte degli utenti, l’evento clic o touchstart sarà sufficiente per tutti i progetti.

click, un evento che si verifica quando si preme e si rilascia il pulsante del mouse.

dblclick, un evento che si verifica quando il pulsante del mouse viene premuto e rilasciato due volte in rapida successione.

mouseover, un evento che si verifica quando si sposta il cursore del mouse su un elemento.

mousedown, un evento che si verifica quando si preme il pulsante del mouse.

mousemove, un evento che si verifica ogni volta che si sposta il cursore del mouse all’interno di un elemento.

mouseup, un evento che si verifica quando si rilascia il pulsante del mouse.

mouseout, un evento che si verifica quando si allontana il cursore del mouse da un elemento.

touchstart, un evento per i dispositivi sensibili al tocco quando un utente tocca un elemento.

touchmove, un evento per i dispositivi sensibili al tocco che si verifica quando l’utente tocca e trascina un dito sopra un elemento.

touchend, un evento per i dispositivi sensibili al tocco che si verifica quando l’utente smette di toccare un elemento.

Sono disponibili anche altri eventi utente, ad esempio pressioni dei tasti della tastiera, ma non per singoli elementi. Pressioni dei tasti sono associate all’elemento Stage. Questi e altri tipi di eventi verranno esaminati nella prossima lezione.

Personalizzazione del cursore del mouse

Oltre al riscontro visivo che è possibile fornire cambiando l’aspetto del pulsante durante l’interazione con l’utente, è anche possibile cambiare l’aspetto del cursore stesso. Spesso, il cursore freccia predefinito in un browser desktop o laptop cambia in una mano (noto come cursore puntatore) quando passa sopra un elemento interattivo o un collegamento ipertestuale. Potete scegliere di cambiare il cursore in un puntatore o scegliere tra dozzine di altri tipi di cursore.

Utilizzo del puntatore

Il pannello Proprietà controlla l’aspetto del cursore e consente di selezionare un’icona personalizzata per ogni elemento.

Nel pannello Linea temporale, impostate temporaneamente la proprietà Visualizza per i cinque elementi miniatura colorati su Att..

L’attivazione della proprietà Visualizza consente di selezionare gli elementi sullo stage.
Selezionate tutti i cinque elementi miniatura colorati, da button1_color a button5_color.
Nel pannello Proprietà, fate clic sull’opzione Cursore e scegliete l’icona puntatore.
Impostate di nuovo la proprietà Visualizza per i cinque elementi miniatura colorati su Disatt..

Gli elementi miniatura colorati vengono nuovamente nascosti.
Visualizzate l’anteprima della composizione Edge Animate in un browser selezionando File > Anteprima nel browser o premendo Ctrl+Invio (Windows)/Comando+Invio (Mac OS).

Il cursore puntatore viene visualizzato ogni volta che si sposta il cursore del mouse su un pulsante o si fa clic sui pulsanti.

Nota:

potete cambiare l’aspetto del cursore solo per ogni elemento e non per ciascun evento di un elemento.

Controllo degli elementi animati

Finora, avete aggiunto codice JavaScript che controlla il comportamento dell’indicatore di riproduzione e la visualizzazione di particolari elementi. Potete anche aggiungere codice per controllare la riproduzione di simboli animati.

I simboli, come avete appreso nella lezione precedente, sono oggetti indipendenti che possono avere una propria animazione interna. Con JavaScript, potete controllate le animazioni dei simboli per creare interazioni più sofisticate. Ad esempio, potete creare un pulsante che controlla lo svolgersi di un’animazione o la chiusura di una mappa. Oppure, potete creare un pulsante che controlla l’espansione o la compressione animata di una casella Ulteriori informazioni. La mappa e la casella Ulteriori informazioni sono Simboli che si comportano in maniera indipendente sulla Linea temporale principale.

Per la presentazione del viaggio interattiva, verrà aggiunto un pulsante nella parte superiore dello stage che si anima in maniera elegante quando si passa il cursore su di esso per rilevare informazioni relative alle immagini e alla Birmania.

Aggiunta del pulsante e del simbolo animato

Il pulsante e il simbolo animato sono già stati creati e si trovano nella Libreria pronti per l’utilizzo.

Nel pannello Libreria, espandete la sezione Simboli e trascinate il simbolo moreinfo nello stage posizionandolo in X=200, Y=0.

Il simbolo moreinfo viene visualizzato nei pannelli Elementi e Linea temporale. Le piccole frecce di riproduzione sulla Linea temporale mostrano la durata dell’animazione all’interno del simbolo (un secondo).
Nella Linea temporale, fate clic sulle opzioni Riproduzione per l’elemento moreinfo e scegliete Interrompi.

La riproduzione dell’animazione simbolo interna non viene eseguita sulla Linea temporale principale.
Fate doppio clic sul simbolo moreinfo sullo stage e premete la barra spaziatrice per visualizzare l’animazione all’interno del simbolo.

Il simbolo è costituito da due brevi animazioni. Il lungo rettangolo grigio orizzontale si espande e, contemporaneamente, si espande anche la casella di ritaglio per rilevare il testo informativo.
Fate clic sul pulsante Stage nella parte superiore dello stage per uscire dal simbolo.
Trascinate l’immagine triangle.png dalla cartella Library Assets nello stage. Posizionate l’elemento triangolo in X=484, Y=3 o utilizzate le Guide sensibili per centrare l’elemento sull’elemento moreinfo.

Riproduzione di un’animazione simbolo

Il simbolo viene attualmente interrotto a 0 secondi. Al pulsante triangolo verrà aggiunto un evento mouseover che indica al simbolo di iniziare la riproduzione.

Nella Linea temporale o nel pannello Elementi, fate clic sul pulsante Apri azioni per l’elemento triangolo.

Viene visualizzato il pannello di script per il triangolo.
Scegliete mouseover per l’evento.

Edge Animate aggiunge una scheda evento mouseover.
Scegliete l’opzione Richiama simbolo.

Edge Animate aggiunge il codice JavaScript per selezionare un particolare simbolo sullo stage. La porzione del codice evidenziata è il nome del simbolo che si desidera selezionare.
Sostituite il codice evidenziato con moreinfo, per la corrispondenza con l’elemento moreinfo sullo stage. Accertatevi che il nome elemento sia racchiuso tra virgolette semplici doppie.

L’aspetto dell’istruzione completa è il seguente:

var mySymbolObject = sym.getSymbol("moreinfo");

La prima parte di questa istruzione, var mySymbolObject, crea una variabile per il riferimento al simbolo, in modo da poterlo controllare.
Sulla riga successiva nel pannello di script, scegliete l’opzione Riproduci.

Edge Animate aggiunge un’istruzione che riproduce l’oggetto sym o la Linea temporale principale. Tuttavia, il simbolo deve riprodurre la sua animazione, non l’animazione sulla Linea temporale principale.
Sostituite sym con la variabile, mySymbolObject, che fa riferimento al vostro sym.

L’aspetto dell’istruzione successiva è il seguente:

mySymbolObject.play();

Nota:

potete combinare le due istruzioni in una stessa riga come segue, sym.getSymbol("moreinfo").play();

Ripristino dell’animazione simbolo

Verrà ora aggiunto un evento mouseout per l’elemento triangolo per riportare l’indicatore di riproduzione a 0 secondi e ripristinare l’animazione.

Nella Linea temporale o nel pannello Elementi, fate clic sul pulsante Apri azioni per l’elemento triangolo.

Viene visualizzato il pannello di script per il pulsante moreinfo.
Spostate textClick sul pulsante Più nell’angolo in alto a sinistra e scegliete mouseout per l’evento.

Edge Animate aggiunge una scheda evento mouseout.
Scegliete l’opzione Richiama simbolo e sostituite il codice evidenziato con moreinfo.

L’aspetto dell’istruzione completa è il seguente:

var mySymbolObject = sym.getSymbol("moreinfo");
Sulla riga successiva nel pannello di script, scegliete l’opzione Interrompi.

Edge Animate aggiunge un’istruzione che interrompe l’oggetto sym o la Linea temporale principale. Tuttavia, il simbolo deve interrompere la sua animazione, non l’animazione sulla Linea temporale principale.
Sostituite sym con la variabile, mySymbolObject, che fa riferimento al vostro simbolo. Sostituite l’argomento 1000 millisecondi predefinito con 0.

L’aspetto dell’istruzione successiva è il seguente:

mySymbolObject.stop(0);
Visualizzate l’anteprima della composizione Edge Animate in un browser selezionando File > Anteprima nel browser o premendo Ctrl+Invio (Windows)/Comando+Invio (Mac OS).

Quando passate il cursore del mouse sul pulsante triangolare nella parte superiore dello stage, viene riprodotta l’animazione del simbolo moreinfo, che rileva la casella di testo e il testo. Quando allontanate il cursore del mouse dal pulsante, la casella di testo e il testo vengono compressi.

Utilizzo degli effetti jQuery

L’API di Edge Animate offre un buon equilibrio tra potenza, flessibilità e facilità d’uso per incorporare l’interattività nei progetti e nelle animazioni. L’inserimento di script tramite il semplice clic di un pulsante nel pannello di script è (per lo più) a prova di errore. Tuttavia, l’aggiunta di jQuery agli script può spesso semplificare il lavoro. Come descritto in precedenza in questa lezione, jQuery è una libreria JavaScript che è stata scritta specificatamente per semplificare la selezione di elementi su una pagina Web e la creazione di animazioni e transizioni. Esistono molti metodi jQuery per animare elementi, ad esempio dissolvenza in ingresso, dissolvenza in uscita o scorrimento in ingresso e scorrimento in uscita. Poiché Edge Animate è totalmente compatibile con JavaScript e jQuery, potete utilizzare queste metodi ovunque. Esaminiamo un particolare metodo jQuery, fadeToggle(). Il metodo fadeToggle() consente di aumentare o ridurre la trasparenza di un elemento, in base al suo stato corrente. Se l’elemento è trasparente, diventerà opaco. Se l’elemento è opaco, diventerà trasparente.

In una nuova composizione Edge Animate, aggiungete un piccolo rettangolo e un’immagine sullo stage. Assegnate, rispettivamente, i nomi Rettangolo e Immagine.
Nella Linea temporale o nel pannello Elementi, fate clic sul pulsante Apri azioni per l’elemento Rettangolo.
Scegliete l’evento clic.
Aggiungete la seguente istruzione per l’evento clic: sym.$("Image").fadeToggle()
Tutto qui. Visualizzate l’anteprima della composizione in un browser.

Quando fate clic sul rettangolo, Edge Animate utilizza jQuery per selezionare l’immagine ed esegue il metodo fadeToggle(). Facendo clic in maniera alternata l’immagine compare o scompare lentamente. jQuery esegue tutto il lavoro di creazione delle due animazioni invertite senza richiedere la creazione manuale di simboli, fotogrammi chiave o meccanismi per ricordare lo stato dell’immagine. jQuery è uno strumento potente e rappresenta una buona aggiunta al kit di strumenti del progettista/sviluppatore. Nella cartella 05End_JQuery è disponibile il file 05JQuery.an per vedere l’esempio completo.

Revisione

Domande di revisione

Qual è la differenza tra azioni, attivatori ed eventi e come vengono utilizzati per creare interattività in Adobe Edge Animate?
Qual è la relazione tra l’API di Edge Animate API, jQuery e JavaScript?
Come è possibile creare un pulsante?
Perché è opportuno utilizzare le etichette e dove si trovano?
Che cos’è il pannello Codice e in che modo si differenzia dai pannelli per azioni e attivatori?
Qual è il significato del codice sym nell’API di Edge Animate e come viene utilizzato?

Risposte di revisione

Azioni, attivatori ed eventi sono tutti codice JavaScript che viene utilizzato per creare interattività in Edge Animate. Le azioni sono comandi che indicano a Edge Animate di eseguire un’operazione, ad esempio nascondere o visualizzare un elemento o caricare un collegamento ipertestuale. Gli attivatori sono azioni che vengono collocate sulla Linea temporale e che pertanto vengono eseguite in un istante di tempo specifico. Gli eventi rappresentano ciò che accade in una composizione e a cui Edge Animate può rispondere con azioni.
Edge Animate utilizza JavaScript per migliorare l’animazione e l’interattività. JavaScript è il linguaggio di script standard per i browser Web. jQuery è una libreria di funzioni JavaScript ben scritte che semplificano la selezione e l’animazione di elementi su una pagina Web. L’API di Edge Animate offre funzioni aggiuntive (basate su JavaScript e jQuery) per controllare gli elementi nella composizione.
Un pulsante è un indicatore visivo dell’interazione utente. Potete creare un pulsante creando un elemento sullo stage e facendo clic sul pulsante Apri azioni nel pannello Linea temporale o Elementi per aggiungere un evento. Nella scheda evento visualizzata, inserite le azioni che desiderate attivare quando l’evento si verifica.
Le etichette si trovano nella parte superiore della Linea temporale. Le etichette identificano istanti di tempo specifici in modo da poter fare riferimento a nomi etichette, anziché a millisecondi fissi, nel codice JavaScript.
Il pannello Codice, accessibile premendo Ctrl+E (Windows)/Comando+E (Mac OS), consente di visualizzare tutto il codice JavaScript associato alla composizione Edge Animate corrente. Mostra inoltre gli eventuali errori di codice e la loro ubicazione nello script. Al contrario, i pannelli per l’aggiunta di attivatori, eventi e azioni mostrano solo il codice per l’elemento associato o il tempo.
La parola sym rappresenta l’intera composizione Edge Animate, quando l’istruzione si trova sulla Linea temporale principale. Edge Animate è organizzato intorno al concetto di “simboli” e la radice, o simbolo del livello base, è lo stage di Edge Animate. Questo simbolo radice contiene tutti gli elementi e le animazioni nella composizione Edge Animate: tutto il contenuto dello stage o della Linea temporale. In JavaScript, quando si desidera eseguire un’operazione, occorre innanzitutto identificare l’oggetto da controllare. Se si desidera influenzare la Linea temporale della composizione Edge Animate, la prima cosa che viene scritta nello script è sym.

Accedi al tuo account