Questo articolo potrebbe contenere informazioni interessanti ma non più correntemente aggiornate.
Quando ho deciso di creare delle animazioni per aiutarmi nel mostrare in modo pratico, efficace e carino la consistenza dell’offerta nel sito, cercavo un software che mi consentisse di realizzarle velocemente e senza troppi sforzi. Ho così iniziato a scandagliare il web alla ricerca di un programma che facesse al caso mio, mi ricordavo dell’esistenza della beta di Adobe Edge, dismesso poi in favore dell’attuale Adobe Animate (successore di Adobe/Macromedia Flash).
Essendo Animate troppo costoso per le mie tasche e considerando che l’installazione della trial mi avrebbe obbligato a scaricare e contiguamente ad installare almeno 2 GB di roba mi sono diretto su Alternativeto.net. Ho pensato dapprima di adoperare Synfig Studio, free software, un programmino simile per interfaccia a Gimp ma fin troppo avanzato per ciò che intendevo creare.
La soluzione: Google Web Designer
Poi l’illuminazione, non ricordavo dell’esistenza di Google Web Designer, fantastico software realizzato con l’ausilio di CEF (Chromium Embedded Framework) e utilizzato solitamente per creare banner pubblicitari in HTML5/CSS3. Scaricato, installato, impostato il primo progetto e ho iniziato a smacchinarci.
La curva di apprendimento verge al basso per chi ha dimestichezza con software incentrati su sequenze temporali (timeline), fotogrammi chiave (keyframe) e funzioni di interpolazione (interpolation function). Una volta realizzati in grafica gli sprites necessari ho iniziato subito a animare. Avendo bene in mente il risultato che avrei voluto ottenere, il tutto si è svolto molto rapidamente.
Le caratteristiche del software
Ci sono due modalità di sviluppo: modalità rapida con lo storyboard e modalità avanzata con timeline e keyframe.
Oltre a contenere tutte le funzionalità degne di un software di disegno e quindi: controlli di trasformazione, alterazione, posizionamento degli oggetti, il software possiede numerosi strumenti: posizionamento 3D, disegno, testo, riempimento con colore solido e gradiente.
C’è anche la gestione delle azioni che consente di associare eventi (touch e quindi gestures, mouse, ecc…) ai componenti e di rendere interattive le animazioni, spostarsi all’interno delle sequenze, modificare gli stili e inserire collegamenti ipertestuali.
Infine ci sono una serie di componenti pronti all’utilizzo, suddivisi in gruppi:
- gallerie (galleria a 360°, galleria a scorrimento, galleria con vista a sequenza, navigazione galleria);
- interazione (aggiungi al calendario, area tocco, gesto, pulsante immagine, tocca per chiamare/inviare SMS);
- mappa (mappa, Street View);
- media (audio, video, YouTube);
- vari (sprite sheet, iframe).
Le problematiche incontrate
Veniamo alle problematiche incontrate, innanzitutto i posizionamenti, utilizzando le ascisse o il posizionamento manuale (muovendo gli oggetti con il cursore) che corrispondono nel css al position: absolute. In anteprima browser e in esportazione il risultato non era accurato, differente dall’anteprima del software, presentando difformità tra i diversi browser. Anche il ridimensionamento, sempre tramite ascisse e in manuale, corrispondente a width e height nel css, non era accurato presentando dei tremolii.
Queste limitazioni erano in parte aggirabili per quanto riguarda i posizionamenti utilizzando le percentuali e per il ridimensionamento con lo strumento “traslazione, rotazione e scala” ma sarebbe venuta meno la possibilità di spostare gli elementi con il posizionamento manuale. Infine dovevo mettere in conto anche il fatto che le animazioni sarebbero state interrotte da estensioni per bloccare le pubblicità come AdBlock e similari.
Mi era impossibile uniformare le animazioni tra i browser e renderle scalabili perciò ho dovuto optare per un’alternativa sostenibile. Ho pensato di utilizzare una GIF animata ma era impossibile condensare 15 secondi di animazione in una GIF e poi troppe limitazioni con colori e compressione che avrebbero reso il risultato imperfetto, senza considerare la necessità di adottare un’alternativa per il caricamento su mobile.
La soluzione più rapida è stata: risolvere le imperfezioni della resa finale a schermo e “grabbare” le animazioni trasformandole in dei video.
Nonostante sia un software in beta è molto stabile ed efficiente, un altro punto di forza è l’intuitività che la fa da padrone in tutte le funzionalità in esso incluse, c’è un’ottima modalità introduttiva ed esistono dei modelli pronti all’uso e non solo da utilizzare strettamente per creare pubblicità. È veramente un buon software da tenere nella cassetta degli attrezzi.
Puoi commentare questo post sulla pagina Facebook @loltgt e condividerlo.