Adobe Animate – skrypty na osi czasu – Timeline

Tekst powstał w ramach niewspieranej już inicjatywy internetteam.pl

Damian Piwecki

---

Każdy rozpoczynający przygodę z Adobe Animate bądź migrujący z dawnego Flasha stanie przed wyzwaniem jakim jest nawigowanie na osi czasu – timeline. Zakładam, że wiemy co to jest oś czasu, czym są klatki kluczowe oraz klipy filmowe. Poniżej zaprezentuję najbardziej przydatne skrypty przy tworzeniu banerów internetowych, wszystkie przykłady przeznaczone są dla dokumentu typu “HTML5 canvas”.

Zatrzymanie animacji “tu i teraz”

Tylko nadmienię, że skrypty wstawiamy w odpowiedniej klatce kluczowej w panelu Actions. Czyli jeżeli chcemy zatrzymać animacje na klatce 240, robimy to jak na poniższym rysunku.

this.stop();
Pamiętajmy, że animacja zatrzyma się na tym konkretnym poziomie, jeżeli mamy klip filmowy umieszczony na osi czasowej dalej będzie się animował.
Dzieje się tak dlatego ponieważ każdy klip filmowy ma swoją oś czasu. Możemy zatrzymać go w następujący sposób:

this.nazwa_klipu.stop();

Oczywiście możemy zatrzymać jednocześnie wiele klipów na wielu poziomach:

this.nazwa_klipu1.stop();
this.nazwa_klipu2.stop();
this.nazwa_klipu1.nazwa_klipu3.stop();

Zatrzymanie animacji w określonym miejscu np. klatce 10

Niezastąpiona funkcja w przypadku gdy chcemy zatrzymać ruchomą strzałkę w przycisku cta w określonym miejscu.

this.gotoAndStop("10");

Rozpoczęcie animacji w określonym miejscu np. klatce z etykietą Internetteam

this.gotoAndPlay("Internetteam");

Etykietę możemy dodać w oknie Properties>Label>Name mając zaznaczoną odpowiednią klatkę kluczową.

 

Animacje HTML5 w reklamach graficznych AdWords

if (!this.looped) this.looped = 1;
if (this.looped++ == 3) {
this.stop();
};

Akcję wstawiamy w klatce gdzie ma zostać zatrzymana animacja lub zamieniamy na akcję this.gotoAndStop(100); jeżeli chcemy aby zatrzymała się w klatce np. 100.

 

Code snippets czyli wycinki kodu wielokrotnego użycia

Niezwykle przydatną opcją w Adobe Animate jest okno Code snippets (Window>Code snippets)

Pozwala natychmiastowo dodawać często używane skrypty do klatek kluczowych oraz definiować własne jeżeli jest taka potrzeba.

 

W kolejnym wpisie zagaje o buttonach i clicktagach, wszystko okraszone oczywiscie HTML5 i javascript 🙂