Benvenuto Adobe Animate

0
Share:

Flash è stato ufficialmente rottamato. Da utente storico e grande fan del tool, non avrei mai immaginato di scrivere una cosa del genere proprio sul mio blog, ma questi sono i fatti. Fortunatamente abbiamo anche una buona notizia: prima passare a miglior vita, Flash ci ha lasciato un “figlio” destinato ad ereditare il suo ruolo di protagonista nel settore dello sviluppo multimediale. Certo, gli haters approfitteranno del rapporto di parentela per accusare il nuovo arrivato di essere il vecchio Flash sotto mentite spoglie, ma poco alla volta questa enorme sciocchezza sarà smentita dai fatti.
Adobe Animate non è Flash. Mi verrebbe da aggiungere “purtroppo”, ma non voglio iniziare una lunga e noiosa disquisizione sul perché Flash, se opportunamente valorizzato, avrebbe potuto costituire un valore aggiunto per tutto il settore.
Indubbiamente Adobe Animate ha ereditato dal suo genitore moltissime funzioni per disegnare e creare animazioni. La struttura che caratterizza tutto l’ambiente di lavoro deve moltissimo a Flash. Ma il nodo vero non è cosa fai, o come lo fai, ma in cosa esporti. lo scopo principale del nuovo tool consiste nella creazione di progetti multimediali per il web ed i dispositivi mobili indipendenti da plugin. Nel primo caso entrano in gioco tecnologie quali l’HTML5 e il webGL, nel secondo Adobe AIR. Tutte soluzioni che non hanno nulla a che vedere con il flash player. Lo scrivo in grassetto, ma forse dovrei renderlo lampeggiante per i duri di comprendonio.
Chi ancora volesse farlo, potrà esportare i propri lavori nel vecchio formato. Ma si tratta di una funzione che finirà per sparire del tutto. Basta dare un occhiata alla finestra di benvenuto del programma per osservare quale sia la lista della priorità.
Detto questo, da quasi due mesi mi sto divertendo a giocare con il nuovo applicativo e le mie impressioni sono ottime. Tralasciando i nuovi strumenti grafici, di cui altri siti hanno già parlato ampiamente, sono rimasto colpito favorevolmente dalle animazioni in HTML5 e webGL. Le ho trovate fluide, facilissime da realizzare e molto promettenti sul piano della programmazione ad oggetti. In particolare, ogni file esportato in HTML5 canvas, oltre ai consueti tag, prevede l’utilizzo di createJS, una raccolta di librerie JavaScript molto efficace, creata dalla compagnia canadese gskinner e sponsorizzata da Adobe, Microsoft, Mozilla e AOL. Lo strumento in questione, oltre ad essere indipendente e open source, è compatibile con le più importanti librerie in circolazione (come Three.js, AngularJS, e jQuery) ed ha due aspetti interessanti:

  • consente di inserire il codice direttamente nei fotogrammi delle animazioni,
  • ha una sintassi ecma estremamente simile ad ActionScript, con il quale condivide molti oggetti e metodi.

La suite createJS è caratterizzata da quattro librerie:

  • EaselJS  gestisce la grafica 2d e un elenco di visualizzazione ispirato a quello di Flash,
  • SoundJS  si occupa dell’audio inserito nel sito web,
  • PreloadJS prevede le istruzioni relative al precaricamento dei contenuti,
  • Tween JS è un potente motore JavaScript orientato alla creazione di interpolazioni di grande impatto.

Per chi volesse approfondire, la documentazione ufficiale è reperibile a questo indirizzo. Tuttavia, un ottimo metodo per romper il ghiaccio con createJS è quello di usare il pannello Snippet di codici accessibile in Adobe Animate da Finestra > Snippet di codici. Le istruzioni elencate nel  pannello si inseriscono nei fotogrammi della linea temporale principale, oppure in quella dei clip filmati. I vari codici possono fare riferimento alla navigazione, oppure ad una particolare istanza presente sullo stage.snippet
Facciamo un esempio al volo. Supponiamo di creare un clip filmato denominato pippo. Qualcosa di molto semplice, come ad esempio un rettangolo che ruota tramite una semplice interpolazione movimento collocata nella linea temporale interna.  Se lo selezioniamo e dal pannello Snippet di codici scegliamo l’istruzione :

HTML5> Navigazione linea temporale >Clic per andare al fotogramma specificato e avviare la riproduzione.

Nel primo fotogramma della scena principale apparirà un codice di questo tipo:

this.pippo.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame()
{
 this.pippo.stop();
}

Si tratta di una semplicissima istruzione che blocca la rotazione del rettangolo al clic del mouse. Come è possibile osservare, abbiamo una sintassi estremamente simile a quella prevista in ActionScript. In pratica manca una tipizzazione forte, l’evento del mouse è costituito dalla stringa “click” al posto di MouseEvent.CLICK e viene usato il metodo bind() durante la chiamata della funzione, ma si tratta di differenze irrilevanti.
Nel pannello ci sono molte istruzioni che ci consentono di apprendere velocemente come creare mouse personalizzati, nascondere oggetti, caricare istanze dalla libreria e via dicendo. Istruzioni che ci riportano indietro ai tempi di Flash 5, quando il vecchio ActionScript 1.0 – sempre più simile a JavaScript –  consentiva ai designer di  muovere i primi passi nel mondo della programmazione.
La sintassi di createJS consentirà a tutti i programmatori AS3 di sbizzarrirsi nella creazione di banner, animazioni, giochi 2d e persino interi siti animati in HTML5, il tutto con pochissimi sforzi. Del resto il fondatore di gskinner nasce come guru Flash, e quindi, non credo si un caso se il suo JavaScript è stato ideato per traghettare chi conosceva bene la sintassi ActionScript nel futuro del multimedia online.
Per il resto Adobe AIR, oltre ad essere costantemente aggiornato, non presenta particolari novità. Continuo a reputarlo uno strumento ottimo per la creazione di app destinate ad Android e iPhone. Purtroppo i tipi di Adobe ancora non mi hanno accontentato sulla possibilità di esportare app anche per windows phone, e quindi, per ora mi reputo solo “quasi” del tutto soddisfatto.

Share:

Leave a reply

*