A Web Designer's Introduzione a Adobe Animate CC

Cosa c'è di meglio dell'essere statici? Essere in movimento, miei buoni amici. Il movimento è in aumento per il web, dalle semplici interazioni dell'interfaccia, agli scenari più complessi e alla prototipazione. In questo articolo ci presenteremo ad Adobe Animate, cos'è, cosa non è e come può essere d'aiuto nel tuo lavoro di web designer.

Cos'è Adobe Animate?

Adobe Animate è descritto come un'evoluzione di Flash Professional; un prodotto la cui natura riservata era destinata ai libri di storia nel momento in cui Steve Jobs metteva nero su bianco. 

"Per rappresentare in modo più accurato la sua posizione come principale strumento di animazione per il web e oltre, Flash Professional verrà ribattezzato Adobe Animate CC" - Rich Lee, nel 2015

Così i tempi cambiano, e Adobe ha cambiato il loro approccio al web come risultato. 

Timeline delle caratteristiche di Adobe Animate

Che tu sia un principiante del movimento o che ti consideri un veterano alla ricerca di un'alternativa alla prototipazione, Adobe Animate CC potrebbe essere adatto a te. Come per tutti gli strumenti, il suo scopo è specifico per la persona che lo usa. Questo non è uno strumento che tutti devono usare, ma è nel tuo interesse essere consapevole della sua presenza. 

Con le creazioni di Adobe Animate come cartoni animati, annunci pubblicitari, giochi e altri contenuti interattivi possono essere pubblicati su piattaforme familiari come HTML5 Canvas, Flash Player e Air, WebGL e persino Snap SVG. 

Le caratteristiche

Per aiutare a comprendere le capacità di Adobe Animate ho pensato che sarebbe stato meglio elencare alcune caratteristiche chiave che personalmente trovo interessanti. La cosa migliore di Adobe Animate è sicuramente l'adozione degli standard web. Un secondo vicino è la fantastica gamma di opzioni di esportazione / pubblicazione, quindi i pennelli vettoriali, il supporto HiDPI, l'integrazione JavaScript di terze parti e molto altro.

Timeline e frame

Tutte le animazioni si verificano in sequenza su ciò che è comunemente noto come una timeline. Gli sviluppatori Flash capiranno molto bene questi concetti. Questa interfaccia utente consente a te, lo sviluppatore, di gestire le tue animazioni in una timeline acquisendo una prospettiva visiva di come l'intera sequenza combaci. Ecco una breve introduzione di Adobe che illustra le basi della timeline. 

Le linee temporali possono includere animazioni a grana fine in un contesto basato su frame. Ciò significa che gli artisti possono creare animazioni isolate e integrare questi movimenti isolati in una timeline principale più ampia.

Esportazione e pubblicazione

Con gli standard web aperti che vengono finalmente adottati da Animate CC, gli sviluppatori devono comunque essere consapevoli dei limiti tecnici del formato in cui vengono esportati. Gli sviluppatori hanno la possibilità di esportare su Flash Player, file SWF, se necessario. È anche possibile esportare a più risoluzioni rendendolo inestimabile per il lavoro bitmap. È anche possibile generare un foglio sprite basato su fotogrammi chiave e animare attraverso di essi utilizzando CSS! 

Non c'è dubbio che le opzioni di esportazione e pubblicazione rendono molto più efficiente la modernizzazione dei progetti. Spedisci versioni diverse dello stesso progetto senza ricreare i tuoi file sorgente originali da zero abilitando l'opzione "scala contenuto". Genera un documento HTML per i progetti ActionsScript utilizzando il corretto oggetto e incorporare tag tramite la finestra di dialogo delle impostazioni di pubblicazione. 

La ciliegina sulla torta è anche la possibilità di esportare in SVG.

Pennelli vettoriali

Animate CC introduce nuovi strumenti di disegno vettoriale, compresi i pennelli vettoriali che non devono essere convertiti in forme per essere modificati. Tutto ciò che hai familiarità con Illustrator per i pennelli e il disegno è disponibile anche in Animate CC. Ti consente di definire un pennello personalizzato definendo i parametri del pennello come forma e angolo uniforme. Super slick se ti interessa la qualità e l'artwork nitido.

Bone Tool

Gli sviluppatori Flash saranno a loro agio con lo strumento osseo per animare oggetti usando "ossa" incatenate linearmente o ramificate nelle relazioni genitore-figlio; pensa a movimenti come un braccio che si piega, un serpente che striscia o una gamba che calcia. Questi tipi di movimento potrebbero richiedere molto tempo per prototipare il codice, ma con Animate CC può accadere molto rapidamente, rendendo le idee cattive costate meno e alimentando le buone idee più velocemente. 

Le sequenze di movimento basate sull'armatura possono anche essere incluse in simboli o in "istanze", che possono essere riutilizzate per tutto il progetto. 

Lo strumento osseo viene fornito con altri trucchi nella sua manica. Ottieni movimento fisico realistico integrando la fisica dinamica nelle ossa, come la primavera, rendendo il movimento molto più realistico per il mondo fisico.

Supporto per JavaScript di terze parti

Ad esempio, hai realizzato una grande opera d'arte da animare, ma vuoi usare un aiutante di terze parti come GreenSock, ad esempio? Buone notizie! Puoi fare proprio questo. Ora dagli sviluppatori di Animate UI gli sviluppatori possono avere la flessibilità che desiderano senza sentirsi residenti in un giardino recintato senza l'aiuto del mondo esterno. Utilizza le ultime librerie JavaScript disponibili e ottieni la flessibilità necessaria per i fotogrammi dell'animazione.

Posizioni della fotocamera e controlli dello stage

Gli animatori hanno il controllo completo su come è posizionato il palco (cioè la tela). Le opzioni sono disponibili per ruotare il palco in qualsiasi modo, da qualsiasi punto tu scegli, come centralmente allo stage o anche dall'angolo. L'animazione può contenere anche più dinamiche, ad esempio l'aggiunta di effetti fotocamera come panoramica, zoom o rotazione che conferiscono al tuo progetto ancora più realismo; fai attenzione a James Cameron.

La videocamera virtuale di Animate

Conclusione

Gli strumenti sono fantastici, ma non governano il mondo. Scegli con saggezza, ma scegli ciò che funziona per te. Gli strumenti sono lì per essere di aiuto a non dettare il tuo flusso di lavoro. Se stai utilizzando Animate in un progetto, lascia un commento e un link sotto di esempi se ne hai uno: raccontaci la tua esperienza con questa applicazione. Felice animazione!

Ulteriori letture e collegamenti utili

  • Tutorial gratuiti di Adobe Animate
  • Cronologia delle versioni
  • Aiuto per argomento
  • Tutorial di apprendimento
  • WebGL