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

Creiamo un nuovo documento di dimensione 750 x 250 px.

Adobe Edge Animate Tutorial: Animazione di Simboli #1

Creazione dei simboli

Realizziamo lo sfondo creando un rettangolo di dimensione 750 x 250 px, 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 Animate Tutorial: Animazione di Simboli #2

Realizziamo il Sole con un rettangolo arrotondato di dimensione 150 x 150 px e arrotondamento sui quattro angoli di 150 px, 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.

Adobe Edge Animate Tutorial: Animazione di Simboli #3

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 Animate Tutorial: Animazione di Simboli #4

A 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”.

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

Adobe Edge Animate Tutorial: Animazione di Simboli #5

A 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 Animate Tutorial: Animazione di Simboli #6

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 la rotazione a 180 deg, la posizione a X 300px, Y 250px, la scala a 100% / 100% e riclicchiamo Toggle Pin (P).

Adobe Edge Animate Tutorial: Animazione di Simboli #7

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 *