Animazioni con Adobe Edge Animate

Gli utenti sul web si aspettano di trovare design spettacolari e apprezzano le animazioni che contribuiscono a questi design, purché non perdano tempo o influenzino negativamente la navigazione della pagina.
Le animazioni ben fatte focalizzano l'attenzione su dettagli importanti, possono mostrare come funziona un'applicazione e aiutare la navigazione se soddisfano il requisito precedente, in cui molte di queste animazioni sono state realizzate con Veloce e se avevano la qualità necessaria, venivano ben accolti dall'utente.
Ma i tempi sono cambiati e proprio come le tecnologie hanno evoluto anche il modo di realizzare animazioni, è qui che entra in gioco Adobe Edge Animate, uno strumento che ci permette di creare animazioni con HTML5, CSS3 e JavaScript senza bisogno di conoscenze di programmazione.
Quanto sopra può sembrare un po' complicato, come è possibile avere uno strumento che mi aiuti a creare animazioni con quelle tecnologie, senza conoscenze di programmazione? Non è così complicato come sembra, ma prima dobbiamo conoscere lo strumento e che dobbiamo lavorarci, per questo lo eseguiremo e saremo ricevuti dalla schermata principale che dovrebbe assomigliare a questa:

INGRANDIRE

Sul lato destro possiamo vedere alcuni collegamenti per imparare a realizzare alcune animazioni con lo strumento e sul lato destro collegamenti per aprire un file o crearlo. Clicchiamo sul link Creare nuovo e verremo portati nell'area di lavoro dello strumento, per ora non ci preoccuperemo di questo ma salveremo il nostro progetto per poter esaminare la struttura creata dallo strumento, vediamo come appare la nostra struttura:

INGRANDIRE

Se abbiamo dimestichezza con lo sviluppo di applicazioni web possiamo vedere alcuni file con estensioni note, vediamo la funzione di ognuno di questi all'interno di un progetto di Edge Animate:
.Un fileQuesto file viene utilizzato dallo strumento per tenere traccia del nostro progetto.
.File HTMLQuesto file descrive una pagina web che usa il codice HTML, così come il resto delle pagine su Internet.
.Js fileQuesti file contengono codice JavaScript per il nostro progetto, che definisce una fase vuota per la nostra animazione e svolge altri compiti necessari nei progetti di Edge Animate.
Oltre a questi file, nella cartella edge_includes abbiamo due file JavaScript aggiuntive, che sono librerie per il nostro progetto e sono referenziate all'interno del nostro HTML e la sua funzione è di compiere l'azione del movimento in quanto tale.
Una volta che abbiamo visto come è strutturato il nostro progetto, è il momento di conoscere le aree del nostro spazio di lavoro, prima vediamo come si presenta:

INGRANDIRE

Ogni pannello è identificato da un nome, dove il Elementi, Proprietà (modifica) e il Sequenza temporale Hanno strumenti e widget per creare animazioni. Il pannello più grande è conosciuto come il palco o Fase e lì costruiamo l'animazione, diamo un'occhiata più da vicino a ciascuno degli elementi nel nostro spazio di lavoro:
FaseÈ qui che vengono visualizzati e animati la grafica e il testo del progetto, ha dei limiti nella sua disposizione e ci consente di nascondere elementi o posizionarli al suo interno. Inoltre, quando salviamo il nostro progetto Animare si occupa di salvare il testo e la grafica come pagina HTML.
ElementiGli elementi sono oggetti che aggiungiamo al nostro palcoscenico e di conseguenza appaiono sulla nostra pagina web finale, dove questi elementi possono essere illustrazioni, fotografie o persino testo.
Proprietà (modifica)Gli elementi hanno proprietà che possono influenzare la loro posizione e persino l'aspetto sul palco e possiamo gestirli utilizzando il pannello di Proprietà (modifica).
Sequenza temporaleCi permette di tenere traccia degli elementi e delle loro proprietà nel corso del nostro progetto.
BibliotecaQui possiamo tenere traccia delle risorse che importiamo nel progetto e fornire un facile accesso ai simboli in cui crediamo Animare.
StrumentiAppaiono nella parte superiore dell'area di lavoro. Li usiamo per creare, selezionare e modificare elementi sul palco, non ce ne sono molti ma saremmo sorpresi di sapere quanto possiamo fare con loro.
Poiché sappiamo come viene distribuito il nostro strumento e abbiamo familiarità con i concetti in esso contenuti, possiamo azzardare a creare la nostra prima animazione.
Per creare la nostra prima animazione sperimenteremo un po' le transizioni in una data immagine, vediamo i passaggi da seguire:
1- Creeremo un nuovo progetto con l'opzione nuovo file nel caso in cui abbiamo chiuso in cui stiamo lavorando per capire la struttura e gli elementi all'interno dello strumento. Quando iniziamo un progetto, il nostro stage è vuoto, possiamo cambiarlo nelle proprietà di fase sul lato sinistro dello schermo, per questo premiamo la casella bianca e scegliamo un colore di nostra preferenza o nel caso in cui abbiamo un colore in notazione esadecimale possiamo includerlo come vediamo nell'immagine seguente:

INGRANDIRE

2- Nel caso di questo tutorial abbiamo scelto un colore scuro in modo che l'immagine che includeremo nel fase evidenziare. Ora per includere un'immagine andiamo a Archivio e selezioniamo importare, verrà visualizzato il file explorer e selezioniamo l'immagine da includere:

INGRANDIRE

È importante che nelle proprietà del nostro scenario abbiamo l'overflow u straripamento in nascosto dal nostro fase presenta una piccola porzione di tutto il nostro HTML, quindi se non vogliamo vedere elementi al di fuori dello stage è importante avere questo valore per quella proprietà. Possiamo anche cambiare il nome dei nostri elementi nella sezione di Proprietà (modifica), in questo modo possiamo identificarli meglio nel nostro progetto.
3- Ora andiamo al nostro Sequenza temporale e verifichiamo che il contatore di riproduzione sia a 0:00 per iniziare con la nostra animazione. È qui che entra in gioco la parte interessante ed è qui che dobbiamo prestare la massima attenzione, per prima cosa dobbiamo verificare che il modalità fotogramma chiave sta premendo così come il modalità di transizione automatica, che possiamo vedere nell'immagine seguente:

Per realizzare le nostre animazioni dobbiamo utilizzare la funzionalità di Attiva/disattiva pin che si attiva nel pulsante accanto al modalità di transizione automaticaQuando attiviamo questo pulsante attiviamo i frame o la transizione e deve essere accompagnato dal contatore giallo, poiché in questo modo possiamo effettuare una transizione di tanti secondi fino a quando non spostiamo il nostro Pin allo stesso livello del secondo contatore.
4- Per eseguire il nostro prima transizione premiamo il pulsante Attiva/disattiva pin e prenderemo il secondo contatore e lo sposteremo 200 secondi, dopodiché spostiamo la nostra immagine nella parte inferiore dello schermo, vediamo come appare:

INGRANDIRE

Come possiamo vedere la parte evidenziata in blu nel Sequenza temporale rappresenta la transizione che possiamo vedere in anteprima se premiamo il tasto spazio. Vediamo quindi che è abbastanza facile fare una transizione, ma cosa succede se volessimo fare una seconda transizione o più di queste? Per questo dobbiamo spostare il nostro Spillo verso il secondo bancone, in questo modo indichiamo a Animare che stiamo chiudendo il processo della prima transizione e possiamo iniziarne uno nuovo.
5- Faremo un seconda transizione dove questa volta andremo a diminuire l'opacità della nostra immagine, per questo selezioniamo la nostra immagine diminuendo la sua opacità al 46% e come abbiamo detto spostiamo il Spillo sul secondo contatore e ripetiamo i passaggi del punto 4, vediamo:

INGRANDIRE

6- Finalmente faremo un terza transizione per completare la nostra animazione. Come già sappiamo, spostiamo di qualche secondo il nostro secondo contatore, trasciniamo la nostra immagine in diagonale verso sinistra e chiudiamo la transizione spostando il Spillo sul secondo contatore:

INGRANDIRE

7- Salviamo il nostro lavoro e premiamo la barra spaziatrice per visualizzare la nostra animazione, se non siamo ancora soddisfatti possiamo muoverci attraverso le transizioni che sono rappresentate dal colore blu nel nostro Sequenza temporale e modifichiamo i valori o se lo desideriamo il tipo di transizione.
Siccome siamo soddisfatti del nostro lavoro, è arrivato il momento di compiere il passaggio finale, ovvero visualizzarlo per la visualizzazione in un browser, che è l'obiettivo per cui stiamo lavorando.
Esistono due modi per visualizzare il nostro lavoro, il primo e il più semplice possono essere eseguiti dallo strumento, per questo andiamo alla scheda Archivio e selezioniamo Anteprima nel browser, che aprirà immediatamente l'animazione nel nostro browser Web predefinito:

Il secondo è un po' più complicato se non abbiamo esperienza nello sviluppo web, ovvero prendere i file e fare un'integrazione con la nostra applicazione web. È importante fare molta attenzione quando si esegue questa operazione e includere tutti i file generati da Animare altrimenti l'animazione non funzionerà.
Con questo abbiamo finito questo tutorial, dove potremmo sapere come funziona Adobe Edge Animate, vedendo le sue caratteristiche più importanti e realizzando la nostra prima animazione in pochi minuti senza bisogno di una sola riga di codice, generandola con HTML5 sì JavaScript per l'implementazione in qualsiasi applicazione web.