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.
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
.