Creazione del primo progetto Edge Animate

Esistono due modi per creare un nuovo progetto Edge Animate. Il primo consiste nel fare semplicemente clic su Crea nuovo nella schermata Benvenuti. Viene immediatamente creato un nuovo progetto Edge Animate con uno stage vuoto. Il secondo metodo è mediante il menu file. Facendo semplicemente clic su File e poi su Nuovo il risultato sarà identico.

Qualunque sia il metodo scelto, in Edge Animate verrà aperto un nuovo progetto. L’aspetto del progetto è inizialmente piuttosto scarso in quanto consiste essenzialmente di un singolo simbolo di stage vuoto. Questo stage è rappresentativo del singolo elemento HTML che è possibile individuare all’interno del file HTML che viene prodotto da Edge Animate in fase di salvataggio, come mostrato nella seguente schermata:

Questa opzione salva il documento corrente se è stato in precedenza salvato nel file system o chiede all’utente di specificare un nome file per salvare il documento, nel caso si tratti di un nuovo progetto.

Salva con nome…

La funzionalità fornita è simile all’opzione Salva, ma viene sempre chiesto di specificare un nome file e un percorso tramite una finestra di dialogo di sistema. Questo è utile durante il salvataggio di versioni separate dello stesso progetto o quando si desidera semplicemente salvare il progetto in un nuovo percorso.

Nel caso di un nuovo progetto, entrambe le opzioni visualizzano una finestra di dialogo del file system. Come si può vedere dalla schermata precedente, il formato del file effettivamente salvato è .html. Questo è un aspetto importante da ricordare riguardo i progetti Edge Animate: lavorare nell’ambiente di creazione di Edge Animate equivale a lavorare in tempo reale con il contenuto che viene prodotto.

Strumenti di layout e di guida

Quando si utilizza qualsiasi elemento dello stage, è utile disporre di alcuni strumenti che assistono durante il layout e il posizionamento degli elementi in questione. Edge Animate dispone di diversi strumenti di supporto per questa attività: strumento Preferenze di layout, Righelli e Guide.

Strumento Preferenze di layout

Lo strumento Preferenze di layout consente di prendere alcune decisioni sulle proprietà predefinite di alcuni tipi di elementi quando questi vengono creati o importati. Lo strumento in sé si trova sulla barra degli strumenti, sul lato destro dei campioni di colore predefiniti. Viene visualizzato come un righello di piccole dimensioni che indica il layout:

Quando questo strumento viene attivato, viene visualizzata una piccola sovrapposizione che consente di impostare diverse preferenze di layout per il progetto corrente. La maggior parte di queste preferenze riguardano la modalità di misurazione degli elementi, tramite pixel o unità percentuali:

Nella seguente tabella vengono illustrati i dettagli delle scelte disponibili durante la determinazione delle preferenze layout per una composizione Edge Animate. Anche se la descrizione per le unità orizzontale, verticale, larghezza e altezza sembra essere identica, si tratta sono valori distinti e questo appare chiaro durante la regolazione di questi parametri sullo stage.

Righelli

Se abilitati, i righelli vengono disposti lungo l’asse del lato superiore e sinistro dello stage del progetto in maniera simile ad altre applicazioni creative Adobe. Contribuiscono alla visualizzazione delle misure tra elementi, in relazione al punto di registrazione dello stage, all’allineamento degli elementi e altro ancora.

I righelli sono anche utili per la generazione e il posizionamento di guide manuali, come descritto nella sezione successiva.

Guide

Le Guide vengono utilizzate insieme ai Righelli per disegnare e posizionare in maniera più precisa
elementi sullo stage. Possono anche essere utilizzati per esaminare aree in cui è possibile disegnare elementi
utilizzando strumenti come il Rettangolo o il Rettangolo arrotondato:

Per creare una nuova Guida, accertatevi che i Righelli sia stati attivati e siano visibili all’interno del pannello Stage. Fate clic su un righello e trascinate una nuova Guida lungo l’asse specifico. Dopo che la Guida è stata posizionata esattamente nel punto desiderato, rilasciate il mouse per collocare la Guida in posizione.

Dopo che la Guida è stata posizionata, può rimanere una Guida basata su pixel o essere trasformata in una Guida basata su percentuale con strumenti di layout reattivi. Per convertire la Guida da unità pixel a percentuali, passate il cursore sopra la Guida e fate clic con il pulsante destro del mouse. È ora disponibile l’opzione Converti guide in percentuale. La Guida viene ora visualizzata in un colore più verde-blu rispetto al normale colore viola per distinguerla dalla Guida basata su pixel. Il ridimensionamento dello stage sposta anche la Guida, in quanto è ora posizionata in base alla percentuale e non alle unità pixel assolute.

Per rimuovere la Guida, fate semplicemente clic su di essa e trascinatela di nuovo nel righello. Le Guide possono essere bloccate dall’area Visualizza del menu dell’applicazione. Dal menu Visualizza è anche possibile controllare l’aggancio.

Guide sensibili

Quando le Guide sensibili sono abilitate, il trascinamento degli elementi sullo stage provoca la visualizzazione temporanea delle guide che facilita il posizionamento degli elementi. Queste guide appaiono allineate ad altri elementi o disposte per l’allineamento con aspetti dello stage stesso. Ad esempio, nella seguente schermata, le Guide sensibili vengono visualizzate quando un elemento viene trascinato al centro dello stage per informare l’utente l’oggetto può essere centrato se viene rilasciato in questa posizione.

Importazione di risorse esterne

Oltre alla creazione di elementi di testo e vettoriali di base all’interno di una composizione
Edge Animate, è anche possibile importare risorse esterne per l’utilizzo in un progetto.
Queste risorse possono essere state preparate in un’altra applicazione, ad esempio Adobe
Photoshop, Illustrator o Fireworks. In generale, è presumibile che queste
risorse importate vengano utilizzate più delle semplici forme generate da Edge Animate, ma questo
dipenderà dal progetto.
I tipi di file che è possibile importare in Edge Animate includono:

• SVG: Scalable Vector Graphics
• PNG: Portable Network Graphics
• JPEG: Joint Photographic Experts Group
• GIF: Graphics Interchange Format
  

Importazione di immagini bitmap

Dopo che un file di immagine è stato importato in un progetto Edge Animate, può essere manipolato, animato e convertito in script come qualsiasi altro elemento. Per importare un file di immagine bitmap in Edge Animate, eseguite le seguenti azioni:

1. Passate al menu dell’applicazione Edge Animate.
2. Selezionate File | Importa….
3. Viene visualizzata una finestra di dialogo del browser del file system.
   Passate al file .png, .gif o .jpg che desiderate importare.
4. Selezionate il file e fate clic su Apri.
5. Il file verrà ora posizionato sullo stage e aggiunto al progetto Libreria in Risorse. Da qui, potete aggiungere più istanze di questa risorsa allo stage.

Ora che la risorsa di immagine bitmap è stata importata e che un’istanza di questa risorsa risiede sullo stage, è possibile utilizzare gli strumenti Selezione e Trasforma per eseguire manipolazioni quali ridimensionamento, scala e inclinazione, analogamente agli elementi testo e rettangolo. A differenza degli elementi basati su vettore, tuttavia, si possono verificare delle distorsioni con gli oggetti bitmap.

Animazione in Edge Animate

Esistono numerose applicazioni che consentono all’utente di comporre sequenze animate. Gli utenti di Adobe Edge Animate possono essere esperti di altri programmi come Director, Flash Professional, After Effects o Photoshop. Tutte queste applicazioni gestiscono l’animazione in modi leggermente diversi, ma tutte condividono alcuni aspetti delle tecniche e degli strumenti di animazione.

Analogamente a molti altri programmi di animazione digitale, Edge Animate adotta il concetto di "tweening" tra i fotogrammi chiave. Nella tradizionale animazione basata su celle, un animatore principale disegna alcuni fotogrammi chiave per una sequenza di animazione mentre i fotogrammi tra questi fotogrammi chiave vengono creati da principianti o membri di livello più basso del team di animazione. L’obiettivo è creare sempre una transizione uniforme tra ogni fotogramma chiave creato dall’animatore principale, che comporterebbe una
sequenza di animazione completa.

Questo processo viene eseguito in maniera programmatica all’interno di Edge Animate. Poiché i fotogrammi chiave sono collocati lungo la Linea temporale, Edge Animate registrerà le modifiche ai valori di proprietà come transizioni alla posizione dell’indicatore di riproduzione (istante di tempo). Gli autori dispongono della capacità aggiuntiva di fornire il motore di tweening con set di istruzioni basate su una vasta gamma di equazioni di andamento. Questo consente un flusso più naturale tra i fotogrammi chiave che può anche essere utilizzato per ottenere determinati effetti, come un movimento elastico o di rimbalzo.

Linea temporale di Edge Animate

La Linea temporale è il luogo in cui viene concertato tutto il movimento in una composizione Edge Animate. La Linea temporale stessa condivide concetti e costrutti di altre applicazioni Adobe, in particolare Flash Professional e After Effects.

Comandi di riproduzione

I comandi di riproduzione in Edge Animate sono tutti raggruppati nell’angolo in alto a sinistra o nel pannello Linea temporale. Questi comandi consentono di accedere rapidamente a molte delle opzioni di riproduzione disponibili tramite la Linea temporale.

Tempo

Il tempo in Edge Animate viene misurato nel formato time-code decimale standard (mm:ss.ddd) e questo è il modo in cui viene visualizzato sulla Linea temporale. Quando l’indicatore di riproduzione si muove lungo la Linea temporale, le informazioni in questa visualizzazione vengono aggiornate di conseguenza. Un utente può trascinare il comando verso sinistra o verso destra per regolare il tempo corrente o semplicemente fare clic su di esso per renderlo modificabile.

Osservate che i comandi temporali in Edge Animate sono di fatto raggruppati lungo lo stage e sono accessibili direttamente sotto il pannello. I comandi sono suddivisi per consentire la modifica separata del tempo dell’indicatore di riproduzione (giallo) e del tempo del blocco (blu), se abilitati.

Opzioni Linea temporale

Queste opzioni possono essere attivate/disattivate in base alle esigenze correnti in quanto eseguono una vasta gamma di funzioni correlate alla Linea temporale.

Le opzioni includono le seguenti:

• Modalità fotogramma chiave automatico (K): selezionando questa opzione Edge Animate sarà in grado di generare automaticamente fotogrammi chiave per diverse proprietà mentre queste vengono regolate lungo la Linea temporale. Se non è selezionata, gli eventuali fotogrammi chiave devono essere inseriti manualmente.
• Modalità transizione automatica (X): se abilitata, segnala a Edge Animate di utilizzare transizioni immediate tra regolazioni delle proprietà dell’elemento mentre vengono animate nel tempo.
• Alterna blocco (P): attiva/disattiva il blocco. Il blocco verrà discusso più dettagliatamente in seguito.
  

Esistono anche diverse opzioni presenti nella parte inferiore della Linea temporale:

• Mostra solo elementi animati: quando si seleziona questa opzione, solo gli elementi le cui proprietà sono animate verranno visualizzati all’interno della Linea temporale. Gli elementi statici (ad esempio, un’immagine di sfondo) saranno nascosti.
• Aggancio linea temporale: attiva/disattiva l’aggancio linea temporale.
• Mostra griglia: attiva/disattiva la griglia linea temporale e consente di impostare le unità di spaziatura griglia.
  

Ulteriori informazioni sul controllo Mostra griglia

È anche possibile impostare la spaziatura griglia facendo clic sulla piccola freccia subito a destra dell’icona per accedere a un piccolo elenco di opzioni. È possibile scegliere di visualizzare le linee della griglia su una selezione di misure nella Linea temporale.

Comandi della Linea temporale

Fondamentalmente, esistono solo quattro comandi all’interno della Linea temporale che necessitano di informazioni al riguardo: l’indicatore di riproduzione, il blocco, lo zoom e un set di comandi griglia. Le funzionalità tra i comandi variano enormemente, poiché alcuni sono utilizzati per la riproduzione, alcuni per l’animazione e altri semplicemente servono a migliorare il flusso di lavoro complessivo. Tutti sono, tuttavia, molto utili.

Indicatore di riproduzione

L’indicatore di riproduzione è il più grande dei due elementi sulla Linea temporale ed è rappresentato da una linea rossa continua che indica il tempo corrente. È possibile fare clic sull’indicatore di riproduzione e scorrerlo avanti e indietro per modificare il tempo corrente. Quando un’animazione viene riprodotta tramite Edge Animate, l’indicatore di riproduzione si sposterà insieme al tempo corrente.

Blocco

Il Blocco è un comando univoco di Edge Animate. È un modo per bloccare lo stato corrente delle proprietà dell’elemento in un instante di tempo specifico, utilizzando l’indicatore di riproduzione per determinare quando l’animazione deve terminare. Il blocco può essere posizionato prima o dopo l’instante di tempo indicato dall’indicatore di riproduzione, ma indica sempre un punto di inizio dell’animazione, con l’indicatore di riproduzione che indica la fine. Se si modificano le proprietà dell’elemento mentre il blocco non è sincronizzato, l’animazione delle proprietà inizierà in corrispondenza del blocco e terminerà in corrispondenza della posizione dell’indicatore di riproduzione. In questo modo, è possibile creare rapidamente e liberamente animazioni che sono strettamente controllate sulla Linea temporale.

Quando il blocco è stato attivato, la direzione dell’animazione viene indicata tramite una striscia colorata di chevron sulla Linea temporale. Il colore sarà giallo o blu, in base alla direzione del movimento; blu indica movimento verso la sinistra del blocco, mentre giallo indica movimento verso la destra del blocco.

Comandi di zoom

Esistono due comandi di zoom in Edge Animate che consentono di espandere e comprimere la Linea temporale. Uno è il pulsante Zoom linea temporale per adattare che viene visualizzato come frecce doppie nell’angolo in basso a destra della Linea temporale. Consente di espandere o comprimere l’intero arco della Linea temporale visibile fino alla larghezza corrente del pannello Linea temporale. Può fornire un’ottima panoramica dell’intera animazione.

Il secondo comando è un cursore che viene visualizzato direttamente a destra e consente all’utente di controllare il livello zoom della Linea temporale per adattare ciò che si sta cercando di realizzare in un particolare istante di tempo.

Fotogrammi chiave

Analogamente alla loro rappresentazione in After Effects, i fotogrammi chiave in Edge Animate vengono visualizzati lungo la Linea temporale come piccoli diamanti. A differenza dei fotogrammi chiave in Flash Professional, i fotogrammi chiave di Edge Animate sono vincolati direttamente alla proprietà che viene modificata e non all’elemento stesso. Questo consente regolazioni dettagliate della proprietà sulla Linea temporale per qualsiasi particolare elemento. Si tratta di un modo estremamente flessibile e potente di animare le proprietà dell’elemento selezionato.

Navigazione dei fotogrammi chiave

In Edge Animate sono disponibili diverse scelte rapide da tastiera che forniscono assistenza durante la navigazione della Linea temporale, in particolare quando si passa da un fotogramma chiave all’altro.

Creazione di movimento

L’animazione delle proprietà dell’elemento all’interno di Edge Animate è piuttosto semplice. In questa sezione, verranno descritti diversi metodi base per animare elementi lungo la Linea temporale di Edge Animate. Utilizzando una volta solo l’indicatore di riproduzione e utilizzando di nuovo l’indicatore di riproduzione con il blocco. Eseguendo la stessa animazione in ciascuna direzione, è possibile farsi un’idea dei diversi stili flusso di lavoro che Edge Animate rende disponibili per gli utenti durante l’animazione delle proprietà dell’elemento nel tempo.

Inserimento di fotogrammi chiave

Sono disponibili diversi meccanismi che consentono di inserire fotogrammi chiave nella composizione; utilizzando il pannello Proprietà, il menu dell’applicazione, i pulsanti Fotogramma chiave della Linea temporale o tramite il menu di scelta rapida. Prima di procedere, è opportuno esaminare ciascuno di questi metodi.

Aggiunta di fotogrammi chiave mediante il pannello Proprietà

Con qualsiasi elemento selezionato, è possibile posizionare l’indicatore di riproduzione sulla Linea temporale e utilizzare il pannello Proprietà per inserire i fotogrammi chiave. Accanto alla maggior parte dei valori proprietà è disponibile un piccolo diamante. Facendo clic su questo comando del fotogramma chiave viene manualmente inserito un fotogramma chiave per tale proprietà nella posizione dell’indicatore di riproduzione corrente per l’elemento selezionato.

Aggiunta di fotogrammi chiave mediante il menu dell’applicazione

Con qualsiasi elemento selezionato, è possibile posizionare l’indicatore di riproduzione sulla Linea temporale e utilizzare il menu dell’applicazione per inserire i fotogrammi chiave. Passate semplicemente al menu e scegliete Linea temporale | Aggiungi fotogramma chiave, quindi selezionate il tipo di fotogramma chiave da aggiungere, in base alla proprietà per la quale si desidera impostare un fotogramma chiave.

Utilizzo dei pulsanti fotogramma chiave della Linea temporale

Con qualsiasi elemento selezionato, è possibile posizionare l’indicatore di riproduzione sulla Linea temporale e utilizzare l’area a sinistra della Linea temporale per inserire i fotogrammi chiave. Qualsiasi proprietà a cui è attualmente assegnato un fotogramma chiave viene visualizzata raggruppata sotto un elemento nella Linea temporale. Queste proprietà esistenti includono una piccola icona posizionata a destra del nome proprietà attraverso la quale è possibile aggiungere nuovi fotogrammi chiave per la proprietà specifica.

Per aggiungere nuovi fotogrammi chiave alle proprietà che non vengono visualizzate sotto un elemento, è possibile fare semplicemente clic con il pulsante destro del mouse sull’elemento e scegliere Aggiungi fotogramma chiave per inserirli.

Utilizzo del menu di scelta rapida per l’inserimento di fotogrammi chiave

Con qualsiasi elemento selezionato, è possibile posizionare l’indicatore di riproduzione sulla Linea temporale e utilizzare lo stage per inserire i fotogrammi chiave. Fate semplicemente clic con il pulsante destro del mouse su qualsiasi elemento presente sullo stage in quel punto nella Linea temporale e scegliete Aggiungi fotogramma chiave per inserire una delle proprietà disponibili per tale elemento.

Animazione con l’indicatore di riproduzione

Eseguiremo ora una semplice animazione di un elemento che si sposta da un lato all’altro dello stage, mentre ruota e cambia il colore, utilizzando l’indicatore di riproduzione insieme al pannello Proprietà.

Animazione con il blocco

Verrà ora eseguita l’esercitazione precedente utilizzando questa volta il blocco per illustrare un metodo di creazione movimento alternativo in Edge Animate.

Modifica delle transizioni

Dopo che è stata stabilita, una transizione può essere regolata mediante interazione del mouse tramite la Linea temporale. Per regolare il ritardo, la durata e la fine della transizione, fate semplicemente clic e trascinate gli indicatori di transizione visivi all’interno della Linea temporale stessa.

Ritardo transizione

Determina l’inizio della transizione, misurata dall’inizio della Linea temporale complessiva. La modifica di questo valore viene ottenuta spostando l’intera transizione o trascinando il bordo più a destra.

Durata della transizione

Rappresenta il tempo richiesto dall’intera transizione. Le transizioni possono essere estese o abbreviate in modo semplice trascinando il bordo più a destra.

Fine della transizione

Indica l’istante di tempo in cui la transizione termina all’interno della Linea temporale.

Modifica delle proprietà dell’elemento in base alla transizione

Per selezionare una transizione per modificare le proprietà dell’elemento all’interno del pannello Proprietà, utilizzate il mouse per selezionare un blocco transizione all’interno della Linea temporale. Il cursore deve diventare una piccola mano che afferra. Quando si fa clic sulla transizione, questa, insieme agli eventuali fotogrammi chiave, deve essere evidenziata.

Sappiamo ora che l’elemento è selezionato e il pannello Proprietà viene modificato per riflettere le proprietà di tale elemento nella posizione dell’indicatore di riproduzione. Per regolare le proprietà nel tempo, spostate semplicemente l’indicatore di riproduzione. Il pannello Proprietà viene adattato in base alle modifiche.

Comandi andamento transizione

Come avrete notato, i movimenti ottenuti tramite gli esempi presentati finora sono stati transizioni standard, lineari da un valore a un altro. Per fornire un maggior senso di realismo e una natura più piena, dinamica a singole transizioni, è anche possibile assegnare una serie di equazioni andamento alle transizioni.

All’interno di Adobe Edge Animate sono disponibili numerose scelte andamento. L’impostazione predefinita è Lineare, che consente di esprimere semplicemente una transizione da A a B in modo completamente lineare. Spesso, è richiesto un algoritmo andamento di natura più dinamica per esprimere maggiore realismo nel movimento o ottenere un effetto speciale. Edge Animate dispone di almeno 32 scelte andamento per offrire all’utente una serie di opzioni durante la determinazione dell’andamento della transizione.

Tipi di andamento transizione

Sebbene Edge Animate fornisca molti di tipi di andamento, il loro scopo potrebbe non essere immediatamente evidente per molti utenti. Configurare un progetto Edge Animate che consente di regolare e visualizzare ogni tipo di andamento è piuttosto semplice se applicato a una semplice transizione.

Spostamento delle transizioni

Edge Animate semplifica lo spostamento delle transizioni avanti e indietro sulla Linea temporale. Utilizzate semplicemente il cursore del mouse per afferrare una transizione (fate clic e tenete), quindi spostatela avanti e indietro lungo la Linea temporale finché la transizione non viene visualizzata nella posizione desiderata. Rilasciate il mouse per completare lo spostamento.

Modifica della durata della transizione

Per regolare la durata di qualsiasi transizione, passate il cursore del mouse sopra l’inizio o la fine di qualsiasi blocco transizione finché il cursore non cambia per indicare che le regolazioni sono possibili. Quindi, fate clic e trascinate lungo la Linea temporale per regolare la lunghezza di una particolare transizione. È anche possibile selezionare più transizioni nello stesso modo utilizzando il tasto Maiusc mentre si eseguono selezioni aggiuntive lungo la Linea temporale.

Selezione dei fotogrammi chiave della transizione

Per selezionare singoli fotogrammi chiave, fate semplicemente clic sul fotogramma chiave desiderato ed eseguite la modifica desiderata. Alcune opzioni possibili includono la pressione del tasto Canc sulla tastiera per rimuovere i fotogrammi chiave selezionati o la modifica della transizione tramite il menu di scelta rapida.

Selezione di più transizioni

Per selezionare più fotogrammi chiave, tenete premuto il tasto Maiusc durante la selezione dei fotogrammi. In alternativa, è possibile disegnare un rettangolo di selezione su più fotogrammi chiave. Questa operazione non è tuttavia precisa perché è più che probabile che vengano selezionate transizioni complete.

Copiare e incollare fotogrammi chiave

Quando sono selezionati, è possibile copiare e incollare facilmente i fotogrammi chiave da un punto della Linea temporale a un altro spostando l’indicatore di riproduzione in un’altra posizione prima di incollare. Si tratta di un ottimo meccanismo per copiare le proprietà esatte desiderate e replicarle sulla Linea temporale.

Generazione di transizioni mediante fotogrammi chiave

Con più fotogrammi chiave selezionati, è possibile fare clic con il pulsante destro del mouse su di essi per rimuovere o creare le transizioni tra gli stessi. Questa operazione è utile quando si utilizza la modalità transizione automatica ma poi si decide di mantenere i fotogrammi chiave rimuovendo però la transizione uniforme tra di essi, o procedere all’inverso.

Animazione dell’intestazione di un sito Web

Uno dei casi di utilizzo di base di Adobe Edge Animate è la creazione di una semplice intestazione sito Web animata. Illustreremo la creazione di tale composizione per un progetto di registrazione studio denominato An Early Morning Letter, Displaced, in cui le immagini di ciascuna delle versioni devono essere animate sull’intestazione stessa. Fortunatamente, sono state fornite tutte le risorse necessarie per la costruzione di questa intestazione animata.

Configurazione progetto, importazione risorse e layout generale

Il primo passaggio in questa composizione consiste nel configurare il progetto Edge Animate, importare tutte le risorse e disporle sullo stage. Inizieremo organizzando le risorse nel modulo finale, in quanto devono essere visualizzate alla fine dell’animazione dopo che la riproduzione è terminata. Il Blocco semplifica notevolmente l’animazione "all’indietro".

Esecuzione dell’animazione di elementi

Eseguiremo ora l’animazione di tutti gli elementi sullo stage mediante l’utilizzo dei pannelli Indicatore di riproduzione, Contrassegno e Proprietà.

Animazione dello sfondo

Verrà creata una transizione che dura 00:07.000 e che sfuma nell’elemento di sfondo regolando leggermente la scala.

Animazione del grafico copertina (per ogni immagine grafica copertina)

Per ogni immagine, verrà creata una transizione che dura 00:02.000 e che causa lo scorrimento dell’immagine da fuori a dentro lo schermo, con conseguente effetto di rimbalzo prima dell’arresto. Le transizioni di ogni immagine successiva verranno sfalsate nel tempo in modo da iniziare a metà della transizione precedente, creando un movimento frenetico all’interno della composizione.

Animazione del testo del titolo

Verrà creata una transizione che dura 00:05.500 e che sfuma nell’elemento testo del titolo.

Completamento

Dopo che tutti gli elementi sono stati aggiunti allo stage, posizionati e animati, l’aspetto della Linea temporale di Edge Animate sarà simile a quello mostrato nella seguente schermata:

Il risultato del banner animato viene visualizzato in un browser Web, come mostrato nella seguente schermata. Per pubblicare una composizione Edge Animate nel browser, è possibile scegliere File | Anteprima nel browser dal menu dell’applicazione.

Riepilogo

In questo capitolo, è stato descritto come creare movimento in Adobe Edge Animate utilizzando la Linea temporale, l’Indicatore di riproduzione, il Blocco e il pannello Proprietà. Per gli utenti esperti di Flash Professional o After Effects molti di questi concetti dovrebbero essere familiari, sebbene siano diventati più rifiniti ed evoluti nell’implementazione dell’interfaccia applicazione di Edge Animate. Creare e modificare animazioni all’interno di una composizione Edge Animate è piuttosto semplice.