Edge Animate Tutorial: Animazione di Simboli

Edge Animate Tutorial: Animazione di Simboli

In questo tutorial vedremo come ottenere grazie ad Adobe Edge Animate il movimento di un simbolo: in questo caso riprodurremmo un movimento semplificato ispirato all’andamento del Sole.

In questo tutorial tratteremo i seguenti argomenti:

  • Creazione di Simboli
  • Animazione di Simboli
  • Variazione di attributi (dimensione, rotazione, colore)

Creazione dell’ambiente

Adobe Edge Tutorial #1Creiamo un nuovo documento di dimensione 750 x 250 pixels.

Creazione dei simboli

Adobe Edge Tutorial #2Realizziamo lo sfondo creando un rettangolo di dimensione 750 x 250 pixels, quindi lo trasformiamo in Simbolo con click destro > “Convert to Symbol”.
Come nome scegliamo “Background”.

Posizioniamo l’oggetto così creato sullo stage a posizione
X 0 px ed Y 0 px


Adobe Edge Tutorial #3Realizziamo il Sole con un rettangolo arrotondato di dimensione 150 x 150 pixels e arrotondamento sui quattro angoli di 150 pixels, quindi lo trasformiamo in Simbolo.
Come nome scegliamo “Sun”.

Posizioniamo l’oggetto così creato sullo stage a posizione
X 0 px ed Y 0 px.

Animazione dello sfondo

Entriamo all’interno del Simbolo “Background” che abbiamo creato.

L’animazione dello sfondo durerà 10 secondi ed interesserà il colore del nostro rettangolo.

Nella timeline selezionamo il secondo 0:00,
quindi selezionando il nostro rettangolo cambiamo il colore di sfondo in #000033.

A questo punto clicchiamo sul pulsante Toggle Pin (P) e muoviamo il selettore al secondo 5:00, quindi cambiamo il colore di sfondo del nostro rettangolo a #0099CC, dopo questo riclicchiamo Toggle Pin (P).

La prima metà dell’animazione è stata fatta,
per concludere la transizione clicchiamo Toggle Pin (P), muoviamo il cursore della timeline a 10:00, quindi cambiamo il colore di sfondo del rettangolo in #000033 e riclicchiamo Toggle Pin (P).

Adobe Edge Tutorial #4A questo punto l’animazione del nostro sfondo è completata. Per testare che tutto sia andato a buon fine cliccate sul pulsante Play (spazio) e dovreste ottenere un rettangolo che passa dal blu all’azzurro per poi ritornare al blu.

Animazione del sole

L’animazione del sole durerà 10 secondi ed interesserà la dimensione, il posizionamento e la rotazione del nostro Simbolo.

Entriamo all’interno del Simbolo “Sun” che abbiamo creato e cambiamo il colore del nostro cerchio in #FF9900, quindi variamo la sua posizione settando X a -375 px.

Usciamo dal Simbolo “Sun” selezionando Stage in alto a sinistra nel pannello centrale,
quindi selezionamo il nostro Simbolo “Sun”.

Adobe Edge Tutorial #5Nella timeline selezionamo il secondo 0:00, quindi selezionando il Simbolo “Sun” settiamo come posizione
X 300px ed Y 250px.


Adobe Edge Tutorial #6A questo punto clicchiamo sul pulsante Toggle Pin (P) e muoviamo il selettore al secondo 5:00,
quindi cambiamo la rotazione a 90 deg,
la posizione a X 338px, Y 212px,
la scala a 50% / 50%,
dopo queste modifiche riclicchiamo Toggle Pin (P).


Adobe Edge Tutorial #7La prima metà dell’animazione è stata fatta,
per concludere la transizione clicchiamo Toggle Pin (P), muoviamo il cursore della timeline a 10:00,
quindi cambiamo la rotazione a 180 deg,
la posizione a X 300px, Y 250px,
la scala a 100% / 100%
e riclicchiamo Toggle Pin (P).


A questo punto la nostra animazione è conclusa.
Per testare che tutto sia andato a buon fine cliccate sul pulsante Play (spazio),
dovreste ottenere il risultato che potete trovate qui sotto

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *