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.

Nota:

in alternativa, potete utilizzare la scelta rapida da tastiera: Ctrl+N (per Windows) o Comando+N (per Mac).

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:

Salva

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.

Nota:

la scelta rapida da tastiera per questa opzione è Ctrl+S (per Windows) o Comando+S (per Mac).

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.

Nota:

la scelta rapida da tastiera per questa opzione è Ctrl+Maiusc+S (per Windows) o Comando+Maiusc+S (per Mac).

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:

Nota:

queste scelte influiscono solo sui nuovi elementi creati o importati nella composizione. Gli elementi attualmente stabiliti mantengono le loro impostazioni.

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.

Preferenza Descrizione
Allineamento angolo Consente di selezionare l'angolo rispetto al quale eseguire l'allineamento per impostazione predefinita.
Unità posizione orizzontale Consente di alternare tra pixel e percentuale per nuovi
elementi.
Unità posizione verticale Consente di alternare tra pixel e percentuale per nuovi
elementi.
Unità di larghezza Consente di alternare tra pixel e percentuale per nuovi
elementi.
Unità di altezza Consente di alternare tra pixel e percentuale per nuovi
elementi.
Utilizzare il tag 'img' per le immagini Durante l'importazione delle immagini, utilizzate il tipo di tag img.
'auto' per larghezza immagine Durante l'importazione delle immagini, impostare la larghezza su auto.
'auto' per altezza immagine Durante l'importazione delle immagini, impostare l'altezza su auto.

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.

Nota:

per attivare/disattivare i righelli, scegliete l'opzione Righelli dal menu Visualizza nell'applicazione o utilizzate le scelte rapide da tastiera: Ctrl+R (per Windows) e Comando+R (per Mac).

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.

Nota:

le Guide sensibili possono essere disabilitate dal menu dell'applicazione in Visualizza | Guide sensibili. Scelta rapida da tastiera: Ctrl+U (per Windows) o Comando+U (per Mac).

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.

Nota:

osservate che, analogamente ai file SVG, l'istanza del file bitmap posizionato sullo stage utilizzerà le dimensioni esatte del file importato e pertanto si può verificare una sovrapposizione con i contorni dello stage. È possibile ovviare a tale situazione tramite manipolazione degli elementi utilizzando il pannello Proprietà.

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.

Nota:

è anche possibile trascinare semplicemente un file .jpg, .png o .gif dalla finestra Esplora risorse del sistema operativo sullo stage. Questa azione avrà lo stesso effetto descritto in precedenza quando si utilizza il comando Importa dell'applicazione, ma sarà possibile collocare con precisione l'immagine importata sullo stage quando si utilizza il trascinamento della selezione.

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.

Nota:

a differenza della Linea temporale basata su fotogrammi di Flash Professional, la Linea temporale di Edge Animate è puramente basata sul tempo.

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.

Nota:

in genere, l'indicatore di riproduzione e il blocco sono entrambi sincronizzati. In caso contrario, possono essere nuovamente sincronizzati tramite il menu dell'applicazione: Linea temporale | Alterna blocco.

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.

Nota:

per sincronizzare o interrompere la sincronizzazione del blocco dall'indicatore di riproduzione, è possibile fare doppio clic sull'indicatore di riproduzione per passare da uno stato all'altro. È anche possibile utilizzare la scelta rapida da tastiera (P) per svolgere la stessa attività o persino utilizzare il comando nella Linea temporale che esegue questa azione.

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.

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.

Comando Scelta rapida
Vai al fotogramma chiave precedente Ctrl+freccia sinistra (Windows), Comando+freccia sinistra (Mac)
Vai al fotogramma chiave successivo Ctrl+freccia destra (Windows), Comando+freccia destra
(Mac)

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.

Nota:

osservate che la maggior parte degli elementi non verranno visualizzati all'interno della Linea temporale finché le loro proprietà non vengono di fatto modificate nel tempo. Il motivo è che se non esiste alcuna animazione, non c'è ragione di ingombrare la
Linea temporale.

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.

Nota:

non tutte le proprietà dispongono di scelte rapide da tastiera assegnate per impostazione predefinita, sebbene sia possibile assegnarle facilmente per le proprietà utilizzate più di frequente, se necessario. A questo scopo, utilizzate il menu dell'applicazione: Modifica | Scelte rapide da tastiera...

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à.

  1. Create un nuovo progetto Edge Animate e salvatelo nel disco locale.

  2. Regolate lo stage come segue utilizzando il pannello Proprietà:

    • Stage W: 600 px
    • Stage H: 350 px
    • Colore di sfondo: #000000
    • Riversam: nascosto
  3. Utilizzando lo strumento Rettangolo, disegnate un elemento sopra lo stage. Le proprietà verranno modificate nel passaggio successivo, pertanto non preoccupatevi delle dimensioni o della forma.

  4. Per ogni proprietà elencata, effettuate le seguenti regolazioni all'interno del pannello Proprietà:

    • Posizione X: 20 px
    • Posizione Y: 230 px
    • Dimensione W: 100 px
    • Dimensione H: 100 px
    • Colore di sfondo: #c0c0c0
  5. Utilizzando ancora il pannello Proprietà, fate clic sul diamante del fotogramma chiave accanto alle proprietà per Posizione, Colore di sfondo e Rotazione. In questo modo viene impostato un fotogramma chiave per ogni proprietà all'interno della Linea temporale.

  6. Verificate che lo stato delle proprietà Fotogramma chiave automatico sia quello selezionato nella Linea temporale. Poiché ciascuna di queste proprietà è già stata contrassegnata con i fotogrammi chiave iniziali, le eventuali regolazioni eseguite nel tempo saranno in modalità fotogramma chiave automatico.

  7. L'aspetto del progetto deve essere quello mostrato nella seguente schermata. È ora possibile proseguire con la parte restante di questa esercitazione.

  8. Trascinate l'indicatore di riproduzione sopra il righello contrassegnato 0:04 e rilasciate.

  9. Selezionate l'elemento con lo strumento Selezione e modificate le seguenti proprietà nel pannello corrispondente:

    • Posizione X: 480 px
    • Colore di sfondo: #900000
    • Rotazione: 480 deg
  10. Osservate che sulla Linea temporale vengono visualizzate ora delle barre di transizione con un altro insieme di fotogrammi chiave alla fine della sequenza di animazione.

  11. È ora possibile scorrere lungo la Linea temporale trascinando l'indicatore di riproduzione avanti e indietro o toccare il pulsante Riproduci per visualizzare la sequenza completa. Quando viene riprodotto, l'elemento deve rotolare lungo lo stage da sinistra verso destra, cambiando da grigio a rosso. Lo stato finale risultante viene visualizzato nella seguente schermata:

    Nota:

    osservate che le proprietà di un elemento possono essere con fotogramma chiave, pertanto modificate nel corso del tempo come è stato fatto qui.

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.

  1. Create un nuovo progetto Edge Animate e salvatelo nel disco locale.

  2. Regolate lo stage come segue utilizzando il pannello Proprietà:

    • Stage W: 600 px
    • Stage H: 350 px
    • Colore di sfondo: #000000
    • Riversam: nascosto
  3. Utilizzando lo strumento Rettangolo, disegnate un elemento sopra lo stage. Le proprietà verranno modificate nel passaggio successivo, pertanto non preoccupatevi delle dimensioni o della forma.

  4. Per ciascuna proprietà elencata, effettuate le seguenti regolazioni all'interno del pannello Proprietà:

    • Posizione X: 20 px
    • Posizione Y: 230 px
    • Dimensione W: 100 px
    • Dimensione H: 100 px
    • Colore di sfondo: #c0c0c0
  5. Trascinate l'indicatore di riproduzione in 0:04 nella Linea temporale.

  6. Passate ora al menu dell'applicazione e selezionate Linea temporale | Alterna blocco. Questa operazione interrompe la sincronizzazione del blocco dall'indicatore di riproduzione. Anche in questo caso, il blocco è il piccolo comando che si trova immediatamente sotto l'indicatore di riproduzione quando la sincronizzazione viene interrotta.

  7. Afferrate il blocco e trascinatelo su 0:00 nella Linea temporale. Le proprietà correnti degli elementi verranno bloccate su 0:00 senza dover inserire manualmente fotogrammi chiave. Mantenete l'indicatore di riproduzione stesso su 0:04.

  8. Selezionate l'elemento con lo strumento Selezione e modificate le seguenti proprietà nel pannello corrispondente:

    • Posizione X: 480 px
    • Colore di sfondo: #900000
    • Rotazione: 480 deg

    Osservate che sulla Linea temporale vengono ora visualizzate delle barre di transizione senza alcuna necessità di impostare fotogrammi chiave.

  9. Passate al menu dell'applicazione e selezionate Linea temporale | Alterna blocco per sincronizzare il blocco. È anche possibile attivare/disattivare il blocco mediante una scelta rapida da tastiera come descritto in precedenza in questo capitolo.

  10. È ora possibile scorrere lungo la Linea temporale trascinando l'indicatore di riproduzione avanti e indietro o toccare il pulsante Riproduci per visualizzare la sequenza completa. Quando viene riprodotto, l'elemento deve rotolare lungo lo stage da sinistra verso destra, cambiando da grigio a rosso.

    Nota:

    anche se in questo caso il blocco è stato collocato in anticipo rispetto all'indicatore di riproduzione nella Linea temporale, questa operazione non è necessaria. Anche se il blocco viene collocato dopo l'indicatore di riproduzione viene comunque esibito lo stesso comportamento: le proprietà correnti vengono bloccate nella posizione del blocco mentre le proprietà regolate si allineano alla posizione dell'indicatore di riproduzione.

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.

Nota:

osservate che le transizioni possono essere regolate per oggetto o per proprietà, consentendo una notevole libertà durante la definizione del comportamento di movimento.

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.

Nota:

osservate che quando si modifica il comportamento andamento di una transizione, è possibile selezionare il blocco di transizione dell'intero elemento o scegliere singole transizioni proprietà per applicare una vasta gamma di tipi di transizioni allo stesso elemento. È piuttosto flessibile.

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.

Nota:

gli algoritmi di andamento transizione disponibili in Edge Animate sono simili agli altri trovati in numerose librerie ActionScript per l'animazione di contenuto Flash Professional. A differenza di Flash Professional, Edge Animate non dispone ancora della capacità di personalizzare questi predefiniti.

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.

Nota:

quasi tutti i tipi di andamento hanno tre varianti: agevola in entrata, agevola in uscita ed entrambi insieme.

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.

Nota:

quando viene fatto passare su una transizione che è possibile espandere in questo modo, l'aspetto del cursore cambia in due linee con frecce rivolte a sinistra o a destra.

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.

Nota:

se è possibile selezionare un fotogramma chiave, l'aspetto del cursore cambia in un piccola mano con indice puntato. Naturalmente, non è possibile interagire in alcun modo con fotogrammi chiave dell'elemento bloccato.

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.

Nota:

queste risorse sono incluse come parte dei file per questo capitolo e si trovano nella cartella denominata banner_assets.

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".

  1. Create un nuovo progetto Edge Animate e salvatelo sul disco locale.

  2. Regolate lo stage come segue utilizzando il pannello Proprietà:

    • Stage W: 940 px
    • Stage H: 198 px
    • Colore di sfondo: #000000
    • Riversam: nascosto
  3. Passate al menu dell'applicazione e selezionate File | Importa... per visualizzare un browser di file.

  4. Selezionate tutti i file .png situati all'interno della cartella delle risorse fornita e fate clic su Apri. I file selezionati verranno collocati sullo stage e aggiunti al progetto Libreria.

  5. La dimensione dell'immagine di sfondo è identica a quella dello stage e deve riempire l'intera area.

  6. La grafica album può essere disposta in maniera uniforme lungo la parte inferiore dello stage come mostrato nella seguente schermata. Per disporre le immagini è possibile utilizzare il mouse o il pannello Proprietà. Si consiglia di distanziarle uniformemente tra di loro.

  7. Infine, è necessario aggiungere un titolo all'animazione dell'intestazione. Lo strumento Testo verrà utilizzato per formare il nome del progetto lungo la parte superiore dell'intestazione. Scegliete Strumento Testo (T).

  8. Aggiungete un nuovo elemento di testo allo stage e digitate il termine An Early Morning Letter, Displaced nel campo.

  9. Con questo elemento di testo selezionato, aprite il pannello Proprietà ed effettuate le
    seguenti regolazioni:

    • ID: titolo
    • Posizione X: 16 px
    • Posizione Y: 11 px
    • Nome del carattere: Arial Black, Gadget, sans-serif
    • Dimensioni carattere: 40 px
    • Colore carattere: #bbbbbb
  10. È ora disponibile una composizione il cui aspetto è simile a quello mostrato nella seguente schermata:

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.

  1. Con lo strumento Selezione, fate clic sull'elemento bg per visualizzare le relative proprietà.

  2. Nella Linea temporale, spostate il blocco in 00:07.000 e l'indicatore di riproduzione in 00:00.000.

  3. Utilizzando il pannello Proprietà, effettuate le seguenti regolazioni:

    • Scala (collegata): 115 %
    • Opacità: 25 %
  4. Nella Linea temporale, fate clic sulla transizione appena creata per selezionarla.

  5. Nella Linea temporale, modificate la selezione Andamento in Agevola in uscita | Seno per determinare come la transizione si deve svolgere durante la riproduzione. Lasciate le transizioni scala come Lineare.

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.

  1. Con lo strumento Selezione, fate clic sull'elemento fvm001 per visualizzare le relative proprietà.

  2. Nella Linea temporale, spostate il blocco in 00:02.090 e l'indicatore di riproduzione in 00:00.000.

  3. Utilizzando il pannello Proprietà, effettuate la seguente regolazione:

    • Posizione X: 986 px
  4. Nella Linea temporale, fate clic sulla transizione opacità appena creata per selezionarla.

  5. Nella Linea temporale, modificate la selezione Andamento in Agevola in uscita | Rimbalzo per determinare come la transizione si deve verificare durante la riproduzione.

  6. Ripetete i passaggi precedenti per ciascuna delle altre immagini grafiche dell'album.

    Nota:

    Edge Animate include anche la possibilità di incollare diversi elementi di una transizione da un oggetto a un altro. Per transizioni ripetibili, come questa, potrebbe essere necessario esaminare i comandi
    Incolla speciale nel menu Modifica dell'applicazione.

Animazione del testo del titolo

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

  1. Con lo strumento Selezione, fate clic sull'elemento Titolo per visualizzare le relative proprietà.

  2. Nella Linea temporale, spostate il blocco in 00:06.000 e l'indicatore di riproduzione in 00:05.000.

  3. Utilizzando il pannello Proprietà, effettuate la seguente regolazione:

    • Opacità: 0 %
  4. Nella Linea temporale, fate clic sulla transizione appena creata per selezionarla.

  5. Nella Linea temporale, modificate la selezione Andamento in Agevola in entrata | Cubico per determinare come la transizione si deve svolgere durante la riproduzione.

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:

Nota:

in Edge Animate è ancora più semplice vedere cosa accade esattamente in una composizione mediante indicatori di transizione ancora più dettagliati, che corrispondono alle proprietà di singoli elementi.

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.

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.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online