Uno slideshow HTML5 con Adobe Animate (seconda parte)

Seconda e ultima parte del tutorial su come realizzare un piccolo slideshow HTML5 usando Animate. Nell’articolo precedente abbiamo creato i principali elementi grafici del progetto: il clip filmato con le foto da far scorrere e i tre simboli circolari che fungono da segnaposto. Inoltre abbiamo impostato il codice createJS che muove le foto ad intervalli regolari. Per concludere il nostro lavoro, realizzeremo due pulsanti laterali per controllare lo scorrimento e renderemo cliccabili i clip circolari in modo da consentire una navigazione alternativa. Visto che questo tutorial ha anche il compito di illustrare ai meno esperti le funzionalità grafiche del programma, in questo appuntamento analizzeremo le tecniche basilari per creare i pulsanti. 

I pulsanti laterali

Ripartiamo dal sorgente che abbiamo realizzato la volta scorsa, se non lo avete sotto mano posto nuovamente il link:

Slideshow prima parte

1. Apriamo il Pannello Crea nuovo simbolo  da Inserisci > Nuovo simbolo. Diamogli come nome p_des e scegliamo nel menu a tendina Tipo la voce Pulsante.
2. Giunti nella linea temporale interna, troveremo quattro fotogrammi chiave caratterizzati dalle scritte Su, Sopra, Giù e Premuto. I primi tre consentono di definire l’aspetto grafico del pulsante nei suoi tre stati: normale, al passaggio del mouse e quando si clicca sul pulsante. L’ultimo stato serve a definire l’area geometrica che innesca il mouse o il tocco da parte dell’utente. Lasciamo selezionato il fotogramma corrispondente allo stato Su.
3. In questo primo fotogramma usiamo lo strumento Ovale per disegnare un piccolo cerchio al centro dello stage. Quindi usiamo lo strumento secchio di vernice per dargli un colore di nostro gradimento.
4. Copiamo la figura disegnata nel fotogramma successivo (stato Sopra) da Inserisci > Linea temporale > Fotogramma chiave.
5. Ripetiamo al stessa operazione con il terzo fotogramma (stato Giù).
6. Definiti i primi tre stati del pulsati non ci resta che delineare l’area interattiva. Creiamo un fotogramma vuoto nel quarto fotogramma da Inserisci > Linea temporale > Fotogramma chiave vuoto e disegniamo un piccolo quadrato nella parte centrale dello stage. Poiché quest’area definisce la zona cliccabile da parte dell’utente, può essere anche leggermente più grande della circonferenza. 
7. Aggiungiamo un nuovo livello da Inserisci > Linea temporale > Livello e clicchiamo sul primo fotogramma.
8. Selezioniamo lo strumento Polystar. Apriamo la finestra Impostazione degli strumenti premendo il pulsante Opzioni che si trova nel pannello Proprietà. Nel campo Numero di lati inseriamo il valore 3.
9. Usiamo lo strumento Polystar per disegnare un piccolo triangolo. Facciamo in modo di rivolgere uno dei tre vertici verso destra.
10. Clicchiamo sul pulsante Scena 1 per tornare sulla linea temporale principale.

Il primo dei due pulsanti nella libreria è pronto per essere usato. Personalmente ho preferito optare per una soluzione grafica essenziale che tenesse conto anche della navigazione sul mobile. Del resto, quando premiamo un pulsante tramite lo smartphone abbiamo due problemi: non è possibile settare lo stato Sopra; Creare un effetto grafico per lo stato Giù  ha senso solo se il pulsante è più grande del polpastrello.
In questo caso il pulsante è volutamente piccolo per non sottrarre spazio alle foto. Per cui ho lascito tutti gli stati uguali tra di loro. Tuttavia si potrebbe anche ragionare separatamente per le due fruizioni, aggiungendo effetti che si vedranno solo durante la navigazione tramite computer.

Passiamo alla creazione del secondo pulsante. Per risparmiare tempo invece di crearlo da zero lo ricaveremo da p_des.

1. Apriamo la libreria da Finestra > Libreria e clicchiamo con il destro del mouse sul pulsante appena creato. Dal menu contestuale che appare, selezioniamo la voce Duplica. In questo modo ci apparirà la finestra Duplica simbolo. Diamogli come nome p_sin e premiamo Ok.
2. Nel pannello Libreria facciamo doppio clic sul nuovo pulsante in modo da accedere alla  sua linea temporale interna.
3. Selezioniamo il triangolo che si trova nel primo fotogramma e invertiamo il suo verso tramite Elabora > Trasforma > Rifletti in orizzontale. Clicchiamo su Scena 1 per tornare alla Linea temporale principale.

Così facendo abbiamo creato il secondo pulsante in pochi passaggi. A questo punto non ci resta che posizionare i due simboli sullo stage.

1. Sulla Linea temporale principale selezioniamo il livello indicatori e aggiungiamo un nuovo livello da Inserisci > Linea temporale > Livello. Rinominiamo il nuovo livello come laterali.
2. Apriamo la libreria e collochiamo i due pulsanti sullo stage: p_des a destra e p_sin a sinistra. Volendo possiamo usare il pannello Allinea o le coordinate del pannello Proprietà per aiutarci a posizionarli in modo simmetrico.
3. Selezioniamo il primo pulsante e scriviamo il suo nome (p_des) nel campo Nome istanza che si trova nella parte alta del pannello Proprietà.
4. Ripetiamo la stessa procedura con il secondo pulsante.

Abbiamo realizzato i pulsanti laterali. I passaggi da seguire potrebbero sembrare numerosi ai meno esperti, ma con il giusto allenamento ci vogliono meno di cinque minuti. Prima di passare al codice resta un altro aspetto grafico da regolare. I tre clip filmati che fungono da segnaposto (che abbiamo disegnato la volta scorsa) dovranno essere associali a delle funzioni listener per consentire una navigazione alternativa. Tuttavia, essendo piuttosto piccoli, potrebbero risultare difficili da cliccare. Per risolvere il problema useremo un vecchio trucco ereditato dal progenitore di Animate.

Creiamo tre pulsanti invisibili

Un pulsante invisibile si può realizzare in vari modi. Un metodo veloce basato sulle funzionalità grafiche di Animate, consiste nella creazione di un elemento i cui primi stati sono vuoti. In pratica, dei quattro fotogrammi chiave che caratterizzano la linea temporale interna, dobbiamo disegnare un’area geometrica solo nel quarto.

1. Apriamo la libreria del programma da Finestra > Libreria e facciamo doppio clic sul clip filmato c. Poiché i clip sono ricavati dallo stesso oggetto, modificando la sua linea temporale modificheremo le tre istanze in una sola volta.
2. Aggiungiamo un nuovo livello da Inserisci > Linea temporale > Livello e  chiamiamolo invisibile.
3. Selezioniamo il primo fotogramma e disegniamo un rettangolo che copre l’elemento circolare.
4. Clicchiamo sul rettangolo appena creato e trasformiamolo in un pulsante aprendo la finestra Converti in simbolo da Elabora > Converti in simbolo. In questo caso non è importante scegliere un nome specifico o dargli un nome di istanza.
5. Giunti nella linea temporale interna cancelliamo i rettangoli presenti nei primi tre fotogrammi. In questo modo l’area che abbiamo disegnato sarà  presente solo nel quarto fotogramma. 
6. Clicchiamo sul pulsante Scena 1. Tornando sulla scena principale noteremo dei rettangoli azzurrini semi trasparenti che coprono i tre simboli c1, c2 e c3. Si tratta di un modo attraverso il quale il programma segnala la presenza del pulsante invisibile nell’ambiente di lavoro. Quando andremo a pubblicare la pagina HTML5, avremo dei simboli la cui area interattiva sarà leggermente più grande. 

E con questo abbiamo ultimato la parte grafica del tutorial. A questo punto non ci resta che ritoccare il codice che abbiamo scritto la volta scorsa.

Modifichiamo il codice createJS

Nella prima parte di questo tutorial ci siamo limitati a scrivere le righe di codice essenziali per il nostro progetto. In sintesi abbiamo tre foto che scorrono ad intervalli regolari grazie ad un setInterval che attiva delle animazioni tramite Tween. Adesso che abbiamo predisposto i pulsanti possiamo aggiungere le righe per consentire all’utente di controllare lo slideshow.
Selezioniamo il primo fotogramma del livello azioni e modifichiamo il codice che abbiamo scritto la volta scorsa in questo modo.

Le istruzioni aggiuntive sono evidenziate dal colore blu scuro.

// attivazione inziale del setInterval
var mov = setInterval(auto.bind(this), 4000);
// attivazione mano pulsanti centrali
stage.enableMouseOver();
this.c1.cursor=this.c2.cursor=this.c3.cursor="pointer";
// regolazione colore indicatori
function colore(n1,n2,n3){
exportRoot.c1.gotoAndStop(n1);
exportRoot.c2.gotoAndStop(n2); 
exportRoot.c3.gotoAndStop(n3);
}
// controllo intervallo
function riparti(){
if(mov==0){mov = setInterval(auto.bind(exportRoot), 4000)}
}
function blocca(){
clearInterval(mov);
mov=0; 
}
// tween attivato dai pulsanti centrali
var target = this.foto;
this.c1.on("click", prima.bind(this));
function prima(){
blocca();
colore(1,0,0);
var tween = createjs.Tween.get(target,{loop: false})
.to({x: 415,y: target.y,}, 1500, createjs.Ease.cubicOut)
.call(riparti.bind(this));
}
this.c2.on("click", seconda.bind(this));
function seconda(){
blocca();
colore(0,1,0);
var tween = createjs.Tween.get(target,{loop: false})
.to({x: -415,y: target.y,}, 1500, createjs.Ease.cubicOut)
.call(riparti.bind(this));
}
this.c3.on("click", terza.bind(this));
function terza(){
blocca();
colore(0,0,1);
var tween = createjs.Tween.get(target,{loop: false})
.to({x: -1245,y: target.y,}, 1500, createjs.Ease.cubicOut)
.call(riparti.bind(this));
}
// tween attivato dai pulsanti laterali
// destra
this.p_des.on("click",destra.bind(this));
function destra(){
blocca();
if(this.foto.x==415){
colore(0,1,0);
var tween = createjs.Tween.get(target,{loop: false})
.to({x: -415,y: target.y,}, 1500, createjs.Ease.cubicOut)
.call(riparti.bind(this)); 
}
else if(this.foto.x==-415){
colore(0,0,1);
var tween = createjs.Tween.get(target,{loop: false})
.to({x: -1245,y: target.y,}, 1500, createjs.Ease.cubicOut)
.call(riparti.bind(this)); 
}
else if(this.foto.x==-1245){
this.foto.x=415;
this.schermo.gotoAndPlay(0);
}
}
// sinistra
this.p_sin.on("click",sinistra.bind(this));
function sinistra(){
blocca();
if(this.foto.x==415){
riparti();
colore(1,0,0);
}
else if(this.foto.x==-415){
colore(1,0,0);
var tween = createjs.Tween.get(target,{loop: false})
.to({x: 415,y: target.y,}, 1500, createjs.Ease.cubicOut)
.call(riparti.bind(this));
}
else if(this.foto.x==-1245){
colore(0,1,0);
var tween = createjs.Tween.get(target,{loop: false})
.to({x: -415,y: target.y,}, 1500, createjs.Ease.cubicOut)
.call(riparti.bind(this));
}
}
// funzione che ripristina lo stato iniziale degli indicatori
this.azzera=function(){
this.c1.gotoAndStop(1);
this.c2.gotoAndStop(0); 
this.c3.gotoAndStop(0);
if(mov==0){mov = setInterval(auto.bind(this), 4000)}
}
// funzione eseguita da setInterval 
function auto(){
if(this.foto.x==415){
colore(0,1,0);
var tween = createjs.Tween.get(target,{loop: false})
.to({x: -415,y: target.y,}, 1500, createjs.Ease.cubicOut)
}
else if(this.foto.x==-415){
colore(0,0,1);
var tween = createjs.Tween.get(target,{loop: false})
.to({x: -1245,y: target.y,}, 1500, createjs.Ease.cubicOut)
}
else if(this.foto.x==-1245){
this.foto.x=415;
this.schermo.gotoAndPlay(0);
}
}

Di seguito analizziamo il listato a partire dal primo blocco di codice: la seconda e la terza istruzione fa in modo che il cursore del mouse consideri i tre clip c1, c2 e c3 come pulsanti. Normalmente quando si visualizza una pagina HTML5 canvas tramite computer, la freccia del mouse suggerisce all’utente che un certo oggetto è cliccabile trasformandosi in una piccola mano. I tre cerchietti centrali sono però dei clip e – senza questo codice – pur essendo reattivi al clic, non mostrerebbero la caratteristica “manina” al passaggio del mouse.
La funzione riparti(), tramite un’istruzione condizionale che verifica il valore della variabile mov, riavvia il setInterval all’occorrenza. Quando clicchiamo su un pulsante (laterale o  centrale), per evitare comportamenti indesiderati, dobbiamo provvisoriamente interrompere lo scorrimento automatico della foto con un clearInterval. Quindi se da un lato la funzione riparti() riattiva lo scorrimento a tempo, dall’altro la funzione blocca() lo interrompe. In pratica, il codice blocca il tempo al clic e lo riattiva una volta concluso lo scorrimento.
Il codice successivo regola il clic sui pulsanti centrali. Questo blocco consente di posizionare il clip filmato denominato foto in tre posizioni diverse a seconda del pulsante cliccato. Si tratta del solito codice basato sulla classe Tween che abbiamo visto negli articoli precedenti.
A seguire abbiamo i codici relativi ai pulsanti laterali. Anche in questo caso si tratta di principi già illustrati negli articoli precedenti. Di diverso ci sono solo alcune istruzioni condizionali il cui compito è quello di muovere il clip foto in base alla posizione di partenza. In altre parole, anche se sappiamo dove vogliamo andare, non possiamo sapere da dove stiamo partendo e otteniamo queste informazione tramite vari if che leggono il valore della x.
Ad esempio, quando clicchiamo sul pulsante destro, se ci troviamo in corrispondenza della seconda immagine, il codice fa scorrere lo slideshow fino a mostrare la terza jpg.
Infine la funzione azzera(), introdotta al volta scorsa, prevede un piccolo ritocco: oltre a ricollocare i fotogrammi dei clip che fanno da segnaposto nello stato iniziale, prevede un’istruzione che ripristina il setInterval() eventualmente interrotto dall’ultimo clic sul pulsante p_des.

L’esempio online lo trovate QUI, mentre è possibile scaricare il sorgente a questo indirizzo:

slideshow_completo

Per concludere 

Come ho già precisato, questo tutorial è stato un pretesto per ripassare le funzioni grafiche del programma: nella prima e nella seconda parte di questo articolo, sono state illustrate le principali procedure visuali necessarie alla creazione di pagine HTML5 canvas. Per cui, se siete dei dummies del programma, potrete usare queste nozioni per stare al passo con i prossimi articoli. In futuro mi piacerebbe buttare giù una miniguida dedicata agli strumenti di disegno, ma non voglio mettere troppa carne al fuoco. Per adesso si continua con createJS ed altre cosette interessanti (non necessariamente legate ad Animate) di cui intendo parlare nei prossimi articoli.