Come ormai è risaputo il tag <canvas> è stata una delle più grandi rivoluzioni di HTML 5…detto anche Flash Killer…ma questa è un'altra storia…

Grazie a <canvas> è possibile avere una tela sulla quale disegnare, animare, giocare e tanto altro…ma uno dei problemi maggiori (o meglio per la maggior parte dei web designer) è la semplicità d'utilizzo del tag stesso. Per interagire con <canvas> è infatti necessario conoscere Javascript (ovvero il linguaggio di scripting per il web per eccellenza) e magari poter velocizzare il lavoro con uno dei vari framework ormai disponibili come EaselJS, Processing, etc…

Quindi spesso ci si trova con un divario di conoscenze tra il designer (che magari desidera creare un banner come avrebbe fatto con Adobe Flash) ed il programmatore (che dovrebbe implementare il codice)…

questo problema può essere facilmente risolto con un click grazie ad Ai⇒Canvas, un ottimo plugin per Adobe Illustrator (a partire dalla CS3) creato dalla comunità di MIX Online, sia per Windows che per OSX.

Adobe Illustrator è ormai da tempo uno degli strumenti preferiti da web designer di svariata caratura, ed è quindi un'ottima strada da seguire per migrare il contenuto dei propri files .AI direttamente dentro una pagina HTML 5!

Il plugin (installabile come un comunissimo plugin per Adobe Illustrator) consente difatti  l'esportazione di:

Illustrazioni:
Quasi tutte le illustrazioni possono essere esportate su <canvas> mantenendo la distinzione dei livelli! Nei casi in cui l'esportazione non fosse corretta (o fosse necessario) è possibile comunicare al plugin che si desidera rasterizzare il contenuto di uno o più livelli prima dell'esportazione.

Animazioni:
E' possibile aggiungere facilmente animazioni alle vostre illustrazioni di Adobe Illustrator. Ai⇒Canvas difatti consente di gestire la rotazione, lo scaling, l'opacità ed il movimento lungo un percorso. Per gli utenti più avanzati, è possibile gestire dei trigger tra le animazioni in modo da creare animazioni complesse.

Codice:
Una volta esportato il contenuto del vostro file .AI per mezzo di Ai⇒Canvas è possibile editare il contenuto del file html prodotto, in modo da implementarlo nelle proprie web application.

 

Per molti questo plugin potrebbe essere la manna dal cielo, dato tra l'altro il funzionamento davvero semplice ma efficare…e quindi eccovi i links utili:

Il Sito Ufficiale del Plugin
http://visitmix.com/labs/ai2canvas/

Documentazione del Plugin
http://visitmix.com/labs/ai2canvas/documentation.html

Documentazione Estesa del Plugin
http://visitmix.com/labs/ai2canvas/common/tutorials/ai2canvas_extended_documentation.pdf

 

Speriamo di essere stati utili…

Francesco Sciuti

The following two tabs change content below.

Francesco Sciuti

Freelance a Vroom Agency
Amante dello sviluppo web, della grafica 3d e della buona musica (che non guasta mai!), 'web developpa' tutto il giorno...e prova a trovare sempre il bandolo della matassa in questo allegro ma sconfinato mondo.

//life motto
if(sad() === true) {
    sad().stop();
    beAwesome();
}