Animáció Timeline-ok segítségével

A Timeline-okkal létrehozott animáción tulajdonképpen rétegek helyzetének, méretének, láthatóságának, Z-indexének adott idoközönkénti dinamikus megváltoztatását értjük. Ezt a DreamWeaver egy Javascript létrehozásával éri el.

Alkalmazásának elonye: Semmiféle Plugint, Active-X vezérloelemet nem igényelnek, hiszen csak rétegeket és JavaScriptet alkalmazunk.

FONTOS:
A Timeline-ok rétegekkal kapcsolatos funkciói csak a 4.0+ böngészokben muködnek. Alkalmazásuk során vigyáznunk kell, hogy ne töröljünk az oldalról olyan elemeket, amelyekre a Timeline használata során hivatkozunk.


A Timeline paletta

Kép

Az Autoplay bekapcsolásával az animáció automatikusan le fog játszódni, ha az oldal letöltodött.

Ha Loop-ot bekapcsoljuk, végtelenített módban játszódik le az animáció.

Fps: Másodpercenként megjelenítendo képkockák száma. Ne állítsuk 15 fölé, mert a legtöbb böngészo ugysem tudja ennél gyorsabban lejátszani.


Animáció létrehozása

  1. Mozgassuk az animálni kívánt rétegünket a kiindulási helyzetbe.
  2. Válasszuk a Modify / Timeline / Add Object to Timeline pontot.
  3. Klikkeljünk a Timeline palettán az utolsó képkockára (egy üres kör található itt, jelezve, hogy ez egy kulcskocka).
  4. Mozgassuk a réteget a kívánt befejezo helyzetbe.

Lehetoségünk nyílik további kulcskockák meghatározására is, ehhez a megfelelo csatorna kívánt képkockájában klikkeljünk az egér jobb gombjával (Mac: CTRL+Klikk), majd válasszuk az Add KeyFrame pontot. (Ugyanezt a hatást érjük el, ha a CTRL (Mac: Command) gomb lenyomása mellett az adott képkockára kattintunk).

Minden kulcskockában meghatározhatjuk az animációban résztvevo réteg helyét, méretét (Netscape Navigator böngészonél ez nem használható), Z-indexét, láthatóságát.

Természetesen az animáció minden egyes képkockáját kulcskockává alakíthatjuk.

Megjegyzés:
Timeline-ba kép is felveheto, de ennek csak az src (forrás) tulajdonságát tudjuk dinamikusan változtatni, és ennek a hátásnak az eléréséhez is sokkal jobb megoldás (ld. késobb).


Rétegek mozgatása meghatározott út alapján

  1. Válasszuk ki az animálni kívánt réteget.
  2. Mozgassuk abba a pontba, ahol az animáció kezdetekor lesz.
  3. Válasszuk a Modify / Timeline / Recorf Path of Layer pontot.
  4. Ragadjuk meg a réteget, és húzzuk végig azon az úton, amit meg akarjuk, hogy tegyen az animáció során.
  5. A végpont elérésekor engedjük el az egér gombját.

Timeline-ok módosítása

- Animáció idejének
növelése:
Ragadjuk meg, és húzzuk el jobbra az utolsó képkockát. Ilyenkor a többi kulcskocka elosztása arányosan történik. Ha azt akarjuk, hogy csak az utolsó képkocka helyzete módosuljon, húzás közben tartsuk lenyomva a CTRL billentyut.
- Kulcskockák mozgatása:
Egyszeruen húzzuk a kulcskockát a kívánt pozícióba.
- Egész animáció térben
való eltolása:
Klikkeljünk a kívánt csatornán egy nem-kulcskocka mezore (Ha lenyomva tartjuk a SHIFT gombot, akkor ezt több csatornán is megtehetjük), majd a szerkesztoablakban húzzuk az animációban résztvevo réteget (és az animációt) a kívánt pozícióra.


Több Timeline használata

Lehetoségünk van arra, hogy több Timeline-t alkalmazzunk egy dokumentumon belül, így könnyebben létrehozhatunk bonyolultabb animációkat, összetettebb viselkedéssel (ld. Viselkedés), amelyek bizonyos események hatására reagálnak.

Új Timeline hozzáadása a dokumentumhoz:
Válasszuk a Modify / Timeline / Add Timeline pontot.

Timeline-ok törlése:
Modify / Timeline / Remove Timeline.

A Timeline-ok elemeire is használhatjuk az Edit menü Cut, copy, paste parancsait. Értelem szeruen egy adott objektum egy meghatározott pillanatban egyszerre csak egy helyen fordulhat elo, ezért bizonyos helyekre nem tudunk beilleszteni objektumokat.


Megjegyzések

  • Nagy képeket tartalmazó rétegeket ne mozgassunk, inkább szabdaljuk fel a képet, helyezzük el több rétegre, és ezeket a kisebbeket mozgassuk.
  • Ahelyett, hogy egy kép src tulajdonságát próbálnánk meg dinamikusan módosítani, helyezzük el a másik képet egy rejtett rétegen, és a megfelelo helyen és idoben jelenítsük meg a rejtett réteget, és tüntessük el az eredeti képet tartalmazót. Ezzel a megoldással elkerülhetjük, hogy várakozni kelljen az új kép letöltésére, hiszen az oldal megnyitásakor a kép már letöltodik a réteggel együtt, csupán nem látszik.
  • Simább animációkat hozhatunk létre, ha több képkockát használunk, és nagyobb fps értéket adunk meg. Az optimális hatás elérése érdekében érdemes több lehetoséget megpróbálni, majd megtekinteni különbözo böngészokben.

 

>>Vissza a tartalomhoz


Untitled Document