AI to Canvas: utilizzare subito HTML5 Canvas!

Usare da oggi il nuovo tag Canvas? MIX Online, un sito Web basato su tecnologia Microsoft, che parla di web design e sviluppo, ha da poco rilasciato una versione gratuita di un plugin per Adobe Illustrator, che permette di convertire qualsiasi file dal formato .AI nel nuovo tag HTML5 Canvas!

AI⇒Canvas è un plug-in che offre infatti le opzioni per il disegno, l’animazione e la codifica, come "eventi" JavaScript in modo da poter costruire applicazioni web interattive ben progettate basate sul tag canvas.
Lo scopo di Ai⇒Canvas è di accelerare lo sviluppo del tag HTML5 canvas: esso infatti, partendo da un file vettoriale, genera ed esporta codice HTML e JavaScript che può essere subito copiato nella propria applicazione ed eventualmente ampliato in un secondo momento.

Cominciamo a usare HTML5 Canvas

Per installare Ai⇒Canvas, scaricare la versione adatta al prorio sistema operativo (per Windows o OS X), ed estrarre il file Ai2Canvas.aip nella cartella plug-in di Adobe Illustrator. Assicurarsi di riavviare Illustrator se è già in esecuzione. Una volta fatto questo, possiamo scaricare un file illustrator di esempio, e salvare ciascun elemento vettoriale in un livello separato.

Canvas in inglese vuol dire tela, per incomincare fin da subito a "dipingere" e per testare fin da subito le potenzialità del plugin, è sufficiente cambiare il nome di ciascun livello del file .AI come se fosse una funzione JavaScript, per esempio: "nomeElemento();". Possiamo vedere fin da subito il risultato scegliendo File / Esporta, selezionare " <canvas> " come tipo di file, quindi fare clic su Salva per visualizzare il risultato nel browser.

Animazioni e Canvas: ecco un semplice esempio

Ogni livello di disegno all’interno del file .AI può essere ruotato, ridimensionato, e sbiadito, configurando le impostazioni di animazione. Le impostazioni di animazione controllano come le proprietà cambiano nel tempo, e ogni impostazione è dotata di otto possibili settaggi (si veda la documentazione estesa per ulteriori dettagli). Le impostazioni includono la direzione dell’animazione, la sua durata complessiva, invertire o no la direzione, una funzione di interpolazione, e un ritardo iniziale prima che l’animazione abbia inizio.

Illustrator-to-canvas: html5 canvas animation

Quando l’animazione riguarda una forma, è spesso utile riposizionare il punto di origine (il luogo in cui gli assi X e Y si intersecano a 0, 0). Ai⇒Canvas rende facile spostare l’origine di ogni livello in modo che le animazioni siano esportate correttamente.

Per esempio, rinominiamo il livello nomeElemento(); in nomeElemento(origine: -1.5, 0.5);. I due valori indicano uno spostamento rispettivamente sull’asse orizzontale e su quella verticale: in particolare essi posizionano il punto di origine a una volta e mezzo l’intera larghezza dell’oggetto vettoriale verso sinistra (al di fuori dei confini dell’oggetto, verso sinistra), in verticale a metà della sua altezza.
Per aggiungere una seconda proprietà, inserire un punto e virgola prima della nuova proprietà e il suo valore. Cambiare il nome del livello in nomeElemento(origin: -1.5, 0.5; rotate-direction:cw);, questa prprietà imposta una rotazione all’animazione, che imprime all’oggetto un movimento in senso orario ("CW significa ClockWise, senso orario; per imposare in senso antiorario scrivere AW, AnticlockWise ").

Come utilizzare il tag Canvas su Internet Explorer 6+?

Ecco come essere sicuri che il tag canvas, ad oggi non supportato da IE precedenti alla versione 9, sia interpretato da tutte le versioni, dalla 6 alla 8.
Ecco come procedere: per prima cosa, scarichiamo la versione compatta di explorercanvas e colleghiamola al file contenente il canvas, inserendo la chiamata alla libreria all’interno dei commenti condizionali per InternetExplorer, così:

<!--[if IE]><script type="text/javascript" src="cartellaScript/excanvas.compiled.js"></script><![endif]--> 

Purtroppo però, ExCanvas non permette a IE di vedere le animazioni costruite con canvas.