Pochi mesi fa Google ha lanciato un nuovo ed interessante tools user-friendly per la creazione di animazioni in Html5, CSS3, XML e Javascript: sto parlando di Google WebDesigner che puoi scaricare da qui (per Mac e PC). Google Web Designer nasce principalmente per la realizzazione di annunci animati compatibili su tutti i dispositivi (desktop, tablet, smartphone), ma può essere usato anche per creare animazioni complesse sfruttando la comoda interfaccia grafica senza dover necessariamente scrivere codice.
Creazione di un annuncio con Google WebDesigner
Cominciamo subito con la creazione di un nuovo documento da File->Nuovo file. Da qui devi scegliere che tipo di documento vuoi creare:
- Annunci Google – Banner: è il classico annuncio con dimensioni specifiche per pagine web o applicazioni;
- Annunci Google – Espandibile: sono gli annunci che si espandono quando viene fatto click sopra e si richiudono tornando alle dimensioni originali;
- Annunci Google – Interstitial: sono annunci a pagina intera che si aprono in coincidenza di cambi di pagina o durante il caricamento (loading) di applicazioni o pagine web:
- File vuoto: per creare un documento vuoto nei formati html, css, javascript o xml.
Prendendo, per esempio, l’annuncio Banner, sulla destra si vengono richieste alcune informazioni:
- Ambiente: per scegliere la destinazione dell’annuncio (Doubleclick, AdMob o generico);
- Dimensioni: dall’elenco proposto, seleziona la dimensione dell’annuncio oppure clicca su Custom per personalizzarle;
- Nome: inserisci il nome del file;
- Percorso: scegli la directory in cui sarà salvato il file;
- Modalità animazione: seleziona Veloce per animare l’annuncio scena per scena e con una timeline semplificata, oppure Avanzata su vuoi animare singoli elementi con una timeline completa per l’editing delle animazioni. Attenzione: puoi passare da modalità veloce ad avanzata ma non il contrario!
Una volta creato il file, per riaprilo vai su File->Apri File.
Google Web Designer: l’interfaccia
L’interfaccia di Google Web Designer è veramente semplice. La parte centrale è dedicata allo spazio di lavoro, utilizzando gli strumenti sulla sinistra puoi aggiungere testi, immagini e forme e dal menu in alto trovi le opzioni relative allo strumento scelto. 
Per aggiungere una forma (cerchio, rettangolo), il menu è raggruppato sotto lo strumento Penna e si apre facendoci click e tenendo premuto il pulsante per un attimo. Per i testi, subito sotto lo strumento Penna, trovi 
. In alto, oltre alla barra degli strumenti di formattazione, puoi anche scegliere il tipo di tag che dovrà avere il testo che stai per inserire, e cioè se deve essere per esempio un div, p, H1-H2-H3, o span. 
Per inserire delle immagini, trascinale direttamente nello spazio di lavoro dal computer, oppure per aggiungere il tag <img> clicca sullo strumento Tag->Immagine. 
Ricordati di attivare l’opzione Comando Trasforma dal menu in alto se vuoi modificare le dimensioni dell’immagine (premi Shift per mantenere le proporzioni quando fai il resize), ed usa gli strumenti di allineamento per centrare e posizionare l’immagine in maniera precisa.
Creare animazioni con Google Web Designer
La creazione di animazioni in Google Web Designer riprende gli stessi concetti e modalità del caro Adobe Flash con timeline e i fotogrammi chiave. Come prima cosa ti consiglio di attribuire un ID a ciascun elemento della pagina (testi, forme, immagini): per farlo seleziona l’elemento, vai sul pannello a destra alla voce Proprietà e inserisci il nome nel campo ID (senza spazi). 
Spostiamoci sulla timeline (in basso), da qui prende forma la nostra animazione. Seleziona l’elemento da animare, per esempio “logowebhouse”, e crea un fotogramma chiave (F6 o click destro->Aggiungi fotogramma chiave) sulla timeline, nell’esempio ho creato un fotogramma al 3 secondo. 
Sull’ultimo fotogramma chiave, modificando le proprietà (dimensioni, colore, posizione ecc…) dell’elemento selezionato rispetto al primo fotogramma , crei un un’animazione di tipo lineare. Per modificare il tipo di interpolazione fai click destro nella parte che evidenzia i due fotogrammi, clicca su Interpolazione: lineare… e scegli il tipo di easing fra quelli presenti o vai su Personalizzata per modificare a mano le curve di Bézier. 
Questo per quanto riguarda la timeline Avanzata, in quella Veloce non puoi animare singoli elementi ma creare varie pagine (cliccando sul +) con possibilità di aggiunta di transizioni tra di esse. Google Web Designer supporta anche il 3D con gli strumenti di rotazione oggetti 3D, trasformazione oggetti 3D e rotazione stage 3D. 
Per aggiungere interattività al tuo banner, vai su Componenti per inserire slider, gallery, video, iframe, Youtube e area tocco. Area Tocco servirà per impostare un’azione quando viene fatto tap/click su una parte del banner: trascinalo sullo stage (spazio di lavoro) e per impostare l’azione clicca su Eventi->+ seguendo gli step indicati da Google Web Designer e scegliendo come origine l’area tocco appena inserita. 
Se devi apportare delle modifiche direttamente al codice sorgente, clicca su Visualizza Codice presente sotto lo spazio di lavoro di Google Web Designer. Avrai a disposizione un editor HTML/CSS con suggeritore incluso. 
Per tornare nella modalità precedente (WYSIWYG) clicca su Visualizza Struttura.
Anteprima e pubblicazione
Durante lo sviluppo dell’animazione sarà più volte necessaria la visualizzazione dell’anteprima, per questo clicca su Anteprima (accanto a Visualizza Codice) , seleziona il browser e testa il suo funzionamento. 
Puoi provare l’animazione anche direttamente in Google Web Designer, con un semplice click su Play, all’interno della timeline. Per l’esportazione, clicca semplicemente su Pubblica. Per gli annunci Doubleclick scegli l’opzione formato zip e importa l’annuncio in maniera semplice e veloce. 
Adesso tocca a te!
Per aiutarti nella progettazione delle animazioni e sull’uso di Google Web Designer, ecco i links alla guida ufficiale ed al canale YouTube dove trovi esempi e demo interessanti. Hai già provato Google Web Designerer i tuoi progetti? Libera la tua creatività con annunci invitanti e persuasivi, e fammi sapere cosa ne pensi di questo nuovo strumento di Google. Aspetto i tuoi commenti.
