Uno slideshow HTML5 con Adobe Animate (prima parte)

Dopo aver affrontato i principali eventi e la classe tween, è arrivato il momento di usare createJS per sviluppare qualcosa di più interessante. Nel corso di questo articolo, vedremo come realizzare un tipico slideshow a scorrimento orizzontale. Trovate l’esempio completo a questo indirizzo.
Come è possibile notare osservando la pagina web: abbiamo tre foto che scivolano da sinistra verso destra ogni 4 secondi. Inoltre è possibile controllare la navigazione tramite i classici pulsanti di regolazione (laterali e centrali) per scorrere le immagini. Ci potremmo legittimamente chiedere se, considerando numerose risorse che offrono soluzioni già pronte, vale la pena impiegare tempo e fatica per progettare da zero un meccanismo del genere. La risposta richiede un ragionamento più ampio (segue pistolotto).
Fino a qualche tempo fa, ogni volta che un casa cinematografica, un artista musicale o un’azienda interessata a promuoversi puntava ad una comunicazione online incisiva, la scelta obbligata era Flash. Dopo le vicende che hanno visto accantonare tutte la pagine animate tramite plugin a favore dell’HTML5, i “siti spot” sono diventati meno diffusi. Questo è accaduto per due motivi: la tecnologia destinata sostituire Flash non era ancora supportata da tutti i browser e gli sviluppatori non erano ancora sufficientemente esperti per sfruttarla al meglio. Questo fino a qualche tempo fa.
Oggi tutti i browser di ultima generazione sono in grado di interpretare correttamente i nuovi standard. Inoltre, i professionisti del web, ormai perfettamente a loro agio con le nuove tecniche, hanno a disposizione un’infinità di librerie, tool e framework per realizzare animazioni molto accattivanti senza ricorrere ai plugin. Ultima considerazione – ma non meno importante, Adobe Animate che eredita dal suo illustre genitore interfaccia e logica progettuale, consente di fare quasi tutto quello che si poteva fare precedentemente in HTML5 e createJS.
Attualmente abbiamo un mercato che sempre più spesso cerca specialisti in grado di creare campagne promozionali dal grande impatto visivo. Per tornare alla domanda iniziale, se vogliamo essere in grado di realizzare pagine dinamiche capaci di pubblicizzare in modo efficace un prodotto o un servizio, dobbiamo rimboccarci le maniche e usare i nostri ferri del mestiere (poco importa se si tratti di JQuery, createJS o altro) per controllare ogni singolo aspetto del nostro sito animato. E dopo questo lungo pistolotto, torniamo al nostro tutorial.

Prepariamo l’ambiente di lavoro

Lo slideshow dell’esempio sfrutta un layout di 830×360 pixel, ma si può scegliere anche una dimensione diversa. L’importante è attribuire allo stage le stesse dimensioni delle foto. Per l’occasione useremo le impostazioni di Adobe Animate per inserire un precaricamento e settare l’animazione come responsive. In questo articolo e nel prossimo illustrerò le varie operazioni visuali senza dare (quasi) nulla per scontato, in modo da consentire a chi non conosce bene l’interfaccia di seguire i vari passi. Se siete poco pratici con Adobe Animate, studiate bene le procedure, perché nei futuri articoli sarò più sintetico. Ci sono un sacco di argomenti che mi piacerebbe affrontare, ma se tutte le volte impiego troppo tempo per spiegare i passaggi visivi, rischio di rallentare la tabella di marcia. Detto questo, cominciamo a creare il clip che conterrà le foto.

1. Apriamo un nuovo documento HTML5 Canvas da File Nuovo > HTML5 Canvas.
2. Regoliamo le dimensioni dello stage nel pannello Proprietà. Specifichiamo una larghezza di 830 e un’altezza pari a 360 pixel.
3. Importiamo tre foto della stessa dimensione da File > Importa > Importa nella libreria. Le foto possono essere indistintamente png o jpg. Bisogna solo fare attenzione a regolare correttamente i parametri di compressione durante la pubblicazione.
4. Apriamo la libreria da Finestra > Libreria, selezioniamo la prima foto e trasciniamola sullo stage.
5.  Posizioniamo la foto al centro. Quindi apriamo il pannello Allinea che si apre da Finestra > Allinea. Selezioniamo l’opzione Allineamento allo stage e clicchiamo i pulsanti Allineamento orizzontale rispetto al centro e Allineamento verticale rispetto al centro. 
6. Selezioniamo la  foto e trasformiamola in un clip filmato. Apriamo quindi il pannello Converti in simbolo da Elabora > Converti in simbolo. Indichiamo come nome foto. Scegliamo dal meni a tendina Clip filmato e diamogli come punto di registrazione il quadratino centrale. 
7. Diamogli come nome istanza foto nel pannello Proprietà.
8. Facciamo doppio clic sul clip filmato in modo da accedere alla sua linea temporale interna. A questo punto dobbiamo collocare le altre due foto alla sua destra, in modo da creare una sequenza. Lo possiamo fare manualmente oppure regolando le coordinate del pannello proprietà. Personalmente ho seguito questo secondo approccio.
9. Preleviamo dalla libreria la seconda immagine.  Diamogli una coordinata x pari a 415 e come y -180. Poiché la prima foto ha come coordinate -415 e -180, dando alla seconda foto 415, la collocheremo alla sua destra.
10. Collochiamo sullo stage della linea temporale interna la terza foto e diamogli come coordinata 1245 (830+415). In questo modo posizioneremo le tre foto una accanto all’altra in sequenza. 
11. Clicchiamo su pulsante Scena 1 per tornare alla linea temporale principale e rinominiamo il primo livello come slider.

E con questo abbiamo creato il clip filmato che muoveremo tramite createJS. Adesso passiamo agli elementi grafici che useremo come indicatori. Si tratta dei tipici cerchietti che suggeriscono all’utente la foto della sequenza. Volendo, si possono anche usare come pulsanti di navigazione (lo vedremo nel prossimo articolo).

1. Creiamo un nuovo clip filmato con il pannello Crea nuovo simbolo che si apre da Inserisci > Nuovo simbolo. Scegliamo tra le opzioni Clip filmato e diamogli come nome c.
2. Selezioniamo lo strumento di disegno Ovale. Clicchiamo sul pulsante colore tratto (il quadrato che si trova accanto alla matita nel pannello Proprietà) e scegliamo un colore arancione. Poi clicchiamo sul pulsante riempimento che si trova accanto e clicchiamo sul pulsantino per deselezionare il colore. 
3. Dopo aver regolato tratto e riempimento dello strumento Ovale, disegniamo una piccola circonferenza arancione per poi centrarla sullo stage.
4.  Creiamo un nuovo fotogramma chiave da Inserisci > Linea temporale > Fotogramma chiave. In questo modo avremo un nuovo fotogramma che contiene una copia del nostro disegno. Usiamo lo strumento Secchio di vernice per dargli un riempimento bianco.
5. Creiamo un livello da Inserisci > Linea temporale > Livello. Selezioniamo il primo fotogramma del nuovo livello, apriamo il pannello Azioni da  Finestra > Azioni e scriviamo questo codice: this.stop();
6. Aggiungiamo un nuovo fotogramma chiave da Inserisci > Linea temporale > Fotogramma chiave.
7.  Apriamo il pannello Azioni da  Finestra > Azioni e scriviamo lo stesso usato in precedenza: this.stop();
8. Clicchiamo su pulsante Scena 1 per tornare alla linea temporale principale.
9. Creiamo un nuovo livello e chiamiamolo Indicatori.
10. Apriamo la libreria da Finestra > Libreria e trasciniamo tre istanze del clip filmato appena creato. Collochiamole nella zona centrale in basso una accanto all’altra e diamogli come nomi di istanza c1,c2 e c3.

Per ultimare la parte grafica del progetto manca ancora un elemento. Per come è strutturato lo slideshow, abbiamo tre foto che scivolano da destra verso sinistra (tra poco vedremo come usare createJS per far scattare in automatico il movimento ad intervalli regolari). Tuttavia, quando mostriamo la terza foto dobbiamo decidere come riavviare l’animazione. Potremmo limitarci a riposizionare il clip foto nella posizione iniziale, ma rischieremmo di ottenere un salto visivo troppo brusco. Un parassi molto diffusa è quella di far ripartire l’animazione dall’inizio attraverso una sorta di dissolvenza. Nel nostro caso creeremo un clip filmato caratterizzato da un rettangolo bianco denominato schermo. Questo clip, collocato sopra le foto, diventerà progressivamente trasparente creando una sorta di alfa in ingresso. In altri termini la prima foto apparirà gradualmente. Vediamo come creare il clip filmato schermo.

1. Creiamo un nuovo livello e chiamiamolo schermo.
2. Selezioniamo lo strumento Rettangolo e disegniamo un rettangolo qualsiasi senza cornice.
3. Apriamo il pannello colore da Finestra > Colore e diamogli un colore bianco.
4. Selezioniamo il rettangolo e tramite il pannello Proprietà diamogli le stesse dimensioni delle foto (830×360) infine centriamolo sullo stage con il pannello Allinea.
5. Convertiamo il rettangolo in un clip filmato e diamogli come nome di istanza schermo.
6.  Facciamo doppio clic su di esso in modo da accedere alla linea temporale interna.
7. Selezioniamo il fotogramma 24 e creiamo un nuovo fotogramma chiave da Inserisci > Linea temporale > Fotogramma chiave.
8. Clicchiamo su un fotogramma qualsiasi compreso tra il primo e l’ultimo. Quindi creiamo un’interpolazione da Inserisci > Interpolazione classica.
9. Selezioniamo l’ultimo fotogramma e nel pannello Proprietà apriamo il menu a tendina Stile, scegliamo alfa e inseriamo come valore 0. 
10. Infine, selezioniamo un fotogramma qualsiasi dell’interpolazione e nel pannello proprietà inseriamo come valore dell’andamento 100.
11. Clicchiamo sul pulsante Scena 1 per tornare alla linea temporale principale.

Inseriamo il codice createJS

Ultimata la grafica possiamo passare al codice. Creiamo un nuovo livello e chiamiamolo azioni. Infine selezioniamo il primo fotogramma apriamo il pannello Azioni da Finestra > Azioni e scriviamo il seguente codice:

var mov = setInterval(auto.bind(this), 4000);
var target = this.foto;
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);
}
}
function colore(n1,n2,n3){
exportRoot.c1.gotoAndStop(n1);
exportRoot.c2.gotoAndStop(n2); 
exportRoot.c3.gotoAndStop(n3);
}
this.azzera=function(){
exportRoot.c1.gotoAndStop(1);
exportRoot.c2.gotoAndStop(0); 
exportRoot.c3.gotoAndStop(0);
}

Nella prima riga di codice abbiamo usato un comune setInterval per attivare una funzione ogni 4 secondi. Non bisogna dimenticare che  la raccolta  di librerie a cui fa riferimento createJS, per quanto potente e versatile, è pur sempre derivata da JavaScript.
Nella seconda istruzione, rifacendoci a quanto detto nell’articolo precedente, abbiamo creato una variabile target che ci servirà ad identificare l’oggetto animato dalla classe Tween.
La funzione auto() è il cuore del nostro codice. Le varie istruzioni che la caratterizzano non si limitano a muovere il clip filmato che contiene le immagini, ma verificano la sua posizione per stabilire dove si dovrà fermare. Abbiamo tre istruzioni condizionali che stabiliscono tre possibilità: il clip mostra la prima immagine, il clip mostra la seconda, il clip mostra la terza. L’istruzione to cambia in base alla posizione di partenza. Se ci troviamo in corrispondenza della prima foto ci sposteremo ad una coordinata che mostra la seconda. Se invece ci troviamo nella posizione corrispondente alla seconda foto, ci sposteremo sulla terza. Infine, se visualizziamo la terza foto, riportiamo il clip alle coordinate iniziali e lanciamo l’animazione di schermo.
L’andamento Ease.cubicOut ci fornisce un’animazione con un effetto visivo di decelerazione realizzato in un intervallo di 1500 millisecondi.
Le tre istruzioni condizionali presenti nella funzione auto() prevedono anche la chiamata di colore(). Questa funzione ha il compito di spostare l’indicatore di riproduzione affinché il clip che segnala la foto inquadrata abbia un riempimento bianco. La funzione colore() ha tre parametri numerici (n1, n2 e n3)  attraverso i quali stabiliamo quali cerchietti dovranno essere pieni e quali vuoti senza riscrivere tutto da zero. Ad esempio l’istruzione colore (0,0,1) specifica che il clip filmato da colorare è il terzo.
La funzione colore() ci permette di introdurre uno strumento molto comodo quando si lavora in Animate: mi riferisco alla proprietà exportRoot. Quando si prova ad identificare un oggetto sullo stage chiamandolo da una funzione o dalla linea temporale di un clip, non sempre è possibile fare riferimento alla parola chiave this. La variabile exportRoot ci permette di identificare il nostro “bersaglio” attraverso un percorso assoluto che nove volte su dieci ci toglie le castagne dal fuoco.
L’ultimo blocco del nostro listato è costituito dalla funzione azzera(), il cui scopo è quello di ripristinare gli indicatori nella loro posizione iniziale. Questa funzione viene attivata quando parte l’animazione del clip filmato schermo. A questo proposito facciamo doppio clic su schermo in modo da accedere alla sua linea temporale interna e creiamo un nuovo livello denominato azioni. Scriviamo nel primo fotogramma questo codice:

exportRoot.azzera();

Così facendo ripristiniamo gli indicatori prima di iniziare l’animazione. Come ho scritto precedentemente, l’utilizzo di exportRoot è uno sporco trucco (ma molto utile) per stabilire un dialogo tra il fotogramma chiave di un clip filmato e la linea temporale principale. Selezioniamo l’ultimo fotogramma del livello azioni e creiamo un fotogramma chiave tramite Inserisci > Linea temporale > fotogramma chiave. Infine, apriamo il pannello Azioni e scriviamo l’istruzione:

this.stop();

Che ci serve per bloccare la riproduzione al termine dell’interpolazione movimento.

Pubblichiamo la pagina HTML5

Ultimato anche il codice passiamo alla pubblicazione. Prima di procedere dobbiamo stabilire il fattore di compressione delle immagini. Per testare il precaricamento di Adobe Animate, diamo alle vari foto la qualità massima. Chiaramente, se questo non fosse un tutorial ma un progetto reale, sarebbe opportuno trovare la giusta mediazione tra leggerezza e qualità.

1. Apriamo la libreria da Finestra > Libreria, clicchiamo con il tasto destro del mouse sulla prima foto e scegliamo Proprietà. Attiviamo dal menu a discesa l’opzione Fattore di compressione: senza perdita (PNG/GIF) e selezioniamo il pulsante checkbox Consenti smussatura. Premiamo su Ok e ripetiamo la stessa operazione anche con le altre due foto.
2. Apriamo la finestra di pubblicazione da File > Impostazioni di pubblicazione. Senza stare ad analizzare troppo le opzioni disponibili (mi riservo di tornarci in seguito), lasciamo le impostazioni di default per un salvataggio standard. Dobbiamo solo ricordare di selezionare le caselle Rendi reattivo e Incorpora precaricatore. Nel primo caso renderemo il nostro slideshow responsive. Nel secondo caso useremo la gif standard messa a disposizione da Animate per indicare al visitatore che il sito è in precaricamento.
3. Successivamente clicchiamo sulla scheda Foglio sprite e selezioniamo PNG. Infine premiamo su Pubblica.

E con questo la prima parte del tutorial è ultimata. L’esempio online lo trovate a questo indirizzo. Mentre potete scaricare il file sorgente cliccano sul seguente link:

Slideshow prima parte

Nel prossimo articolo concluderemo il tutorial rendendo lo slidehow navigabile tramite gli eventi del mouse.