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