Basix rapido lampeggiante animato casuale

Anche quando ti stai animando sulla timeline, un tocco di ActionScript può migliorare ciò che stai facendo. In questo suggerimento rapido useremo una singola riga di AS3 per aggiungere realismo animato in un batter d'occhio!


Step 1: Apri i tuoi occhi

Prendi i file sorgente e apri "basis.fla". Sul palco troverai il filmato "a testa", che comprende due strati contenenti i "ferri" e "faccia" del filmato.

Certo, se vuoi iniziare da zero, usando la tua grafica, sei il benvenuto?


Passo 2: Gli occhi ce l'hanno

Faremo lampeggiare periodicamente gli occhi, quindi inizia facendo doppio clic sul Movie Clip "occhi" per entrare nella sua timeline.


Step 3: Vista Blinkered

Allunga la sequenza temporale aggiungendo un fotogramma chiave al fotogramma 80 sul livello "occhi". Questo è dove metteremo gli occhi nel loro stato "lampeggiante".

Elimina gli occhi aperti dal palco e rivolgi la tua attenzione alla biblioteca. Lì troverai "eyesClosed" che puoi posizionare sul palco in cui il filmato "eyesOpen" precedentemente era.

Con gli occhi chiusi selezionati, premi F5 per aggiungere altri fotogrammi. Aggiungi tutti quelli che vuoi; così facendo aumenterai il tempo in cui gli occhi del tuo personaggio passeranno chiusi durante ogni battito di ciglia. 3 fotogrammi vanno bene nel nostro caso.

Metti alla prova il tuo filmato (Comando / Ctrl + Invio) per avere un'idea dell'effetto lampeggiante che hai creato.

L'indicatore di riproduzione si muove lungo la linea temporale provocando il lampeggiamento periodico. Perfezionare! Destra? Beh, non esattamente. L'uniforme lampeggiante suggerirebbe che il nostro personaggio è o un robot o manca il suo lobo frontale.


Passaggio 4: Randomeyes

Miglioriamo l'effetto randomizzando il lampeggio.

Aggiungi un secondo livello al Movie Clip "occhi", etichettalo "azioni" e bloccalo. Seleziona il primo fotogramma e inserisci il seguente snippet nel pannello azioni (Finestra> Azioni):

 gotoAndPlay (uint (Math.random () * totalFrames) +1);

Passaggio 5: esame degli occhi

Cosa fa effettivamente questo frammento? Bene, il gotoAndPlay (); l'azione invia l'indicatore di riproduzione lungo la linea temporale corrente, a qualsiasi numero di fotogramma definito all'interno delle parentesi. I contenuti all'interno delle nostre parentesi ci daranno il nostro numero di telaio.

Il Math.random () il metodo restituirà un numero compreso tra 0 e (sebbene non incluso) 1. Questo viene moltiplicato per totalFrames, una proprietà del nostro Movie Clip - la quantità di frame al suo interno (nel nostro caso 83). uint () migliora il risultato del nostro numero casuale * totalFrames, arrotondando e dandoci un numero intero.

Il numero più basso possiamo aspettarci è 0, poiché uint (0 * 83) è 0.

Il più alto numero intero possiamo sperare di avere 82, dal momento che uint (0.9999999999 * 83) è 82.

Pertanto, noi +1 per finire, dacci una cornice di destinazione tra 1 e 83.

Quando la testina raggiunge la fine della nostra timeline, ritorna al fotogramma 1 e viene nuovamente inviata a una cornice casuale.

Controlla di nuovo il film!

Il nostro personaggio sta ancora battendo le palpebre, ma ora a intervalli irregolari, che sembrano molto meno lobotomizzati.

L'effetto diventa ancora più chiaro con due istanze del nostro personaggio sul palco. Nell'esempio seguente, abbiamo due caratteri diversi, ma entrambi utilizzano esattamente lo stesso filmato "occhi":

Non sto dicendo che questi due sembrano averli messi insieme, ma tu hai l'idea?


Vista migliorata

Questo è un risultato finale davvero semplice, perché non vedere se è possibile migliorarlo?

  • Gioca con i tempi; alterare il framerate e il numero di fotogrammi all'interno del film lampeggiante.
  • Perché non provare a modificare lo snippet per impedire il salto della testina entro l'azione lampeggiante stessa?
  • Forse potresti addirittura impedire che l'animazione lampeggi troppo rapidamente in successione?

Conclusione

Hai finito! Questa è una tecnica semplice e comunemente usata, ma spostare la testina su fotogrammi casuali può essere applicata in migliaia di situazioni. Spero che tu lo trovi utile :)