Introduzione a createJS per Adobe Animate
Da quando sono alle prese con il nuovo giocattolo rilasciato da Adobe ho un sacco di idee e progetti in lavorazione. Come ho già scritto, da informatico non sempre riesco ad occuparmi di quello che mi diverte, tuttavia ho la sensazione che Adobe Animate potrebbe cambiare le carte in tavola (non solo per me). In ogni caso, per non sprecare il ritrovato entusiasmo, ho deciso di scrivere una guida su CreateJS in ambiente Animate. Per cui mettiamo da parte le chiacchiere e cominciamo con un articolo introduttivo.
Come ho accennato la volta scorsa, CreateJS è una potente raccolta di librerie utilizzata da Adobe Animate CC per creare siti interattivi in HTML5. Introdotta qualche anno fa come plug-in d Flash CS6, la creazione di Grant Skinner sta gradualmente prendendo piede anche grazie all’evoluzione dei browser web, sempre più capaci di interpretare scorrevolmente gli oggetti canvas.
Il meccanismo alla base di createJS, prevede la creazione di un file HTML5, un’istruzione che carica la libreria da un URL e un codice JavaScript scritto nel dialetto di createJS da scrivere nell’apposito tag <script>. A questo riguardo, teoricamente, è possibile sviluppare degli ottimi progetti multimediali senza ricorrere ad Adobe Animate, ma limitandosi a scrivere il codice manualmente tramite tool come Notepad ++. Strada percorribile in teoria ma che reputo scomoda per chi (come me) ama creare la propria grafica manualmente.
Del resto, grazie all’accordo tra l’azienda che ha creato createJS ed Adobe, usando il tool si possono usufruire di numerosi vantaggi e scorciatoie. In appena una mezz’oretta di lavoro mi sono divertito a creare una paginetta web che descriverò più avanti nel corso di questo articolo: si tratta di una piccola consolle che manipola un clip filmato, il cui esempio è reperibile a questo indirizzo. Ma prima di affrontare l’esempio, vediamo come è strutturato un progetto web basato sulle librerie create da Grant Skinner.
Un pizzico di teoria
Come specificato nei tutorial sul sito ufficiale, la struttura di una pagina HTML5 di un sito realizzato con createJS ha una sintassi simile a questa:
<!DOCTYPE html>
<html>
<head>
<title>Esempio</title>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script>
function init() {
//codice da inserire
}
</script>
</head>
<body onload="init();">
<canvas id="mioCanvas" width="620" height="400"></canvas>
</body>
</html>
Per chi fosse completamente a digiuno di HTML5, il tag canvas è l’elemento che consente il rendering dinamico delle immagini. Attraverso questo elemento possiamo definire un’area multimediale nella quale mettere in scena animazioni e interazioni.
Se osserviamo il codice in alto, nel corpo dell funzione init() – lanciata al caricamento della pagina al verificarsi dell’evento onload – vanno inserite le istruzioni createJS per attivare manipolare l’area canavs. Nel nostro esempio, come specificato grazie agli attributi width ed height, si tratta di una sezione di 620 pixel per 400.
A questo punto, se volessimo andare avanti, creando un piccolo esempio senza tirare in ballo Adobe Animate, ci basterebbe modificare il codice come segue:
<!DOCTYPE html>
<html>
<head>
<title>Esempio</title>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("mioCanvas");
var rettangolo = new createjs.Shape(new createjs.Graphics().beginFill("#228899").drawRect(50,50,150,100));
stage.addChild(rettangolo);
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="mioCanvas" width="620" height="400"></canvas>
</body>
</html>
Il codice si limita a creare un banalissimo rettangolo verde. Nella prima istruzione viene creata un’istanza della classe Stage, un oggetto nel quale collocheremo i vari elementi che vogliamo manovrare. Successivamente viene creata una forma geometrica: un’istanza della classe shape denominata rettangolo. Utilizzando una sintassi molto simile a quella di AS3, vengono definite le caratteristiche del rettangolo. Per cui, avremo un colore di riempimento verde chiaro, il vertice in alto a sinistra con le coordinate (50,50) e il vertice in basso a destra (100,150).
Ma vediamo come funziona il discorso con Animate. Lo stesso rettangolo disegnato tramite codice si può ottenere usando le istruzioni “già pronte” presenti nel pannello Snippet di codice presente in Adobe Animate.
I passi da seguire sono semplicissimi:
- In Animate creiamo un nuovo documento HTML5 canvas da File > Nuovo documento.
- Accediamo all’elenco della api tramite il percorso Finestra > Snippet di codice > Html5 canvas.
- Scorriamo l’elenco e clicchiamo su drawRect.
Il programma genererà automaticamente questo codice nel primo fotogramma:
/*Codice per disegnare un rettangolo sullo stage*/
var shape = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawRect(5,5,100,100));
this.addChild(shape);
In pratica abbiamo un codice di partenza da modificare in base alle esigenze. Quindi ci basta cambiare le coordinate e il colore per ottenere un rettangolo identico a quello dell’esempio precedente. Una volta pubblicato il file avremo un html leggermente più sporco rispetto a quello fatto completamente a mano. Ovviamente, essendo un codice automatizzato, non potremo pretendere la stessa precisione. Ecco come si presenta il nostro HTML dopo la pubblicazione:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rettangolo</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="rettangolo.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
// --- write your JS code here ---
canvas = document.getElementById("canvas");
exportRoot = new lib.rettangolo();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
<canvas id="canvas" width="620" height="400" style="background-color:#FFFFFF"></canvas>
</body>
</html>
Come si può notare osservando l’esempio, abbiamo dei commenti che ci suggeriscono come modificare il file, alcune istruzioni aggiuntive che servono a sincronizzare il lavoro svolto dal punto di vista visuale con il file HTML5 e soprattutto il riferimento ad un file esterno denominato rettangolo.js. Ed è proprio in quel file che troveremo infatti il codice che abbiamo scritto nei fotogrammi di Adobe Animate. Diamo uno sguardo al file js.
(function (lib, img, cjs, ss) {
var p; // shortcut to reference prototypes
lib.webFontTxtFilters = {};
// library properties:
lib.properties = {
width: 620,
height: 400,
fps: 24,
color: "#FFFFFF",
webfonts: {},
manifest: []
};
lib.webfontAvailable = function(family) {
lib.properties.webfonts[family] = true;
var txtFilters = lib.webFontTxtFilters && lib.webFontTxtFilters[family] || [];
for(var f = 0; f < txtFilters.length; ++f) {
txtFilters[f].updateCache();
}
};
// symbols:
// stage content:
(lib.rettangolo = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// timeline functions:
this.frame_0 = function() {
/*Codice per disegnare un rettangolo sullo stage
*/
var shape = new createjs.Shape(new createjs.Graphics().beginFill("#228899").drawRect(50,50,150,100));
this.addChild(shape);
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = null;
})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;
Qui il codice diventa ancora più complicato. Abbiamo infatti una serie di istruzioni predefinite che servono per regolare lo stage ed accogliere eventuali funzioni da aggiungere successivamente nell’ambiente di sviluppo visuale. Il programma deve quindi approssimare nella creazione delle istruzioni necessarie e lo fa per eccesso.
Lo stesso codice (davvero molto simile) lo otterremmo se decidessimo di disegnare il rettangolo tramite gli strumenti di disegno presenti in Adobe Animate.
Alla luce di queste considerazioni, meglio l’approccio offerto dal tool, o l’approccio completamente manuale? Come sempre dipende dai gusti e attitudini. Nel mio caso, siccome mi piace giocare con la grafica, preferisco avere gli strumenti di disegno offerti da Animate sempre sotto mano.
Passiamo alla pratica
Come anticipato all’inizio del post, mi sono divertito a creare una piccola interfaccia per manipolare un movieclip chiamato mioclip (lo so, non mi sono sprecato in termini di fantasia, ma fa caldo e l’alternativa erano chiamarlo pippo o pluto). Prima di tutto, una volta aperto il programma è necessario scegliere l’ambiente di lavoro opportuno tramite File > Nuovo > HTML5 canvas.
Successivamente bisogna disegnare (o importare) i vari elementi vettoriali a partire dal clip. Nel mio caso mi sono procurato il logo dell’HTML5 in versione eps da una risorsa freeware, poi l’ho aperto con Corel, convertito in SWF, ed infine importato in Animate. Ma per realizzare questo esempio basta disegnare una figura qualsiasi (va bene anche un cerchio o un triangolo).
Quello che conta è avere sullo stage un clip filmato chiamato mioclip da poter manipolare.
Per cui, una volta importato o disegnato il protagonista dell’esempio, bisogna convertirlo in clip filmato. Piccolo ripasso per chi non conosce bene l’interfaccia di Animate: si seleziona l’oggetto, si accede al pannello Converti in simbolo da Elabora > Converti in simbolo. Infine bisogna scegliere clip filmato e nel pannello Proprietà dargli come nome di istanza mioclip.
Analogo discorso per i pulsanti di controllo: si disegnano, si convertono in simbolo e si associa loro il nome apposito nel pannello Proprietà. Solo che in quel caso bisogna scegliere come tipo dal menu a tendina Pulsante. Così facendo potremo all’occorrenza impostare un piccolo effetto rollover nell’ambiente di modifica simbolo.
Per potere controllare i vari aspetti del clip, sono stati necessari una decina di piccoli pulsanti suddivisi un due gruppi: i primi 5 regolano coordinate e rotazione del clip, gli altri 5 controllano invece larghezza, altezza e trasparenza. Infine è stato creato un ulteriore pulsante il cui scopo è quello di ripristinare i valori di partenza. I pulsanti si chiamano: p_destra, p_sinistra, p_alto, p_basso, p_ruota, p_aumenta_L, p_riduciL, p_aumentaA, p_riduciA, p_alfa e p_ripristina.
Come si può notare osservando la disposizione dei livelli in figura, ho collocato mioclip sotto i pulsanti e la cornice decorativa che li avvolge.
In questo modo, quando andremo a spostarlo tramite clic del mouse, non rischieremo di coprire la nostra piccola consolle di controllo. E proposito del clip, poiché si tratta a tutti gli effetti di un disegno realizzato in Animate, non avremo delle immagini bitmap esportate in fase di pubblicazione, bensì (analogamente al rettangolo visto in precedenza) un oggetto disegnato dinamicamente tramite canvas.
Una volta posizionati tutti gli elementi è possibile scrivere il codice nel fotogramma tramite il pannello Azioni che si apre da Finestra > Azioni:
this.p_destra.addEventListener("click", destra.bind(this));
function destra()
{
this.mioclip.x+=5;
}
this.p_sinistra.addEventListener("click", sinistra.bind(this));
function sinistra()
{
this.mioclip.x-=5;
}
this.p_alto.addEventListener("click", alto.bind(this));
function alto()
{
this.mioclip.y-=5;
}
this.p_basso.addEventListener("click", basso.bind(this));
function basso()
{
this.mioclip.y+=5;
}
this.p_ruota.addEventListener("click", ruota.bind(this));
function ruota()
{
this.mioclip.rotation+=5;
}
this.p_aumentaL.addEventListener("click", aumentaL.bind(this));
function aumentaL()
{
this.mioclip.scaleX+=0.1;
}
this.p_riduciL.addEventListener("click", riduciL.bind(this));
function riduciL()
{
this.mioclip.scaleX-=0.1;
}
this.p_riduciA.addEventListener("click", riduciA.bind(this));
function riduciA()
{
this.mioclip.scaleY-=0.1;
}
this.p_aumentaA.addEventListener("click", aumentaA.bind(this));
function aumentaA()
{
this.mioclip.scaleY+=0.1;
}
this.p_alfa.addEventListener("click", alfa.bind(this));
function alfa()
{
this.mioclip.alpha-=0.1;
}
this.p_ripristina.addEventListener("click", ripristina.bind(this));
function ripristina()
{
this.mioclip.alpha=this.mioclip.scaleY=this.mioclip.scaleX=1;
this.mioclip.x=310;
this.mioclip.y=200;
this.mioclip.rotation=0;
}
Si tratta di una cinquantina di righe di codice (semplicissime) nelle quali vengono cambiate le proprietà di mioclip in base al clic del mouse. La sintassi generale è del tipo:
this.nomepulsante.addEventListener(“click”, nomefunzione.bind(this));
function nomefunzione()
{
this.mioclip.nomeprorietà=valore;
}
Basta individuare quale è la proprietà che si vuole cambiare e come si scrive in createJS. La maggior parte delle proprietà le ho ricavate sbirciando i suggerimenti presenti nel pannello Snippet di codice, qualcun altra invece grazie alla documentazione ufficiale presente su sito ufficiale. Una volta ultimata la scrittura del codice possiamo aprire il pannello Impostazioni di pubblicazione da File > Impostazioni di pubblicazione. Lasciamo i valori di base e premiamo pubblica.
In questo modo verranno generati i due file necessari al browser: movieclip.html e movieclip.js.
Per concludere
Questo esempio, per quanto semplicissimo, ci consente di prendere confidenza con i canvas creati tramite Adobe Animate. Inoltre abbiamo compiuto il primo passo per capire come progettare siti dinamici dal forte impatto visivo senza fare ricorso ad alcun plug-in: una possibilità che fino a qualche tempo fa reputavo impossibile.
Torniamo al nostro esempio, se invece di cliccare ripetutamente sui pulsanti, volessimo ottenere un effetto più fluido, simile agli effetti visivi di quel famoso programma il cui nome cominciava con F, con il clip che viene modificato tenendo premuto il pulsante, ci basterebbe modificare leggermente gli eventi nel pannello Azioni.
Tornerò sull’argomento nei prossimi giorni, nel frattempo ecco il link per scaricare file sorgente:
