Flash Animáció és Webdesign

Animáció • Bannerek • Webdesign

A Flash még a laikusok számára is közismert fogalom: ezek azok a kis animációk, játékok az interneten, amelyek feldobják az oldalakat, szórakoztatnak – rosszabb esetben „elvonják a figyelmet“.

Valóban megfontolandó, hogy mikor használjunk Flash-t, de a figyelem megragadása bizony nem lebecsülendő eredmény.

Ezzel a korszerű szerzői rendszerrel igen gyorsan hatásos animációkat készíthetünk, és a konvencionális, „rácsos“ HTML-oldalaktól eltérő, egyéni, grafikus weboldalakat készítsünk. Figyelemfelkeltő külső bannerekkel pedig megsokszorozhatjuk weboldalunk forgalmát.

Azok számára, akik aggódnak, mivel a Flash-t sok mobil eszköz nem támogatja, van egy jó hírünk. A Flash CC ma már "natívan" képes HTML5-öt (canvas elemmel) és JavaScriptet exportálni. A Flash-nek nem minden funkciója támogatott, de ehhez hozzá lehet szokni. A Flash, mint animációra kihegyezett szerzői rendszer kiváló, és a maga nemében egyelőre nincs konkurrense. Az Adobe új szerzői rendszere az Edge, amely lehetőségeiben még elmarad a 20 éves Flash-től (a grafikák elkészítéséhez külső képszerkesztő alkalmazásra van utalva, hiányzik belőle a ShapeTween és az animációs funkciók nem olyan kiforrottak).

A magánórákat igényeinek megfelelően tartjuk. A tanfolyamhoz jegyzetet biztosítunk.

Időtartam: kb. 20 × 60 perc

A Flash világa

  • A szerzői rendszerekről általában
  • Formátumok: FLA, SWF, AS, HTML5 (canvas) + JavaScript
  • Az interface ismertetése

Grafika

  • Pixel- vs. vektorgrafika
  • Rajzeszközök, színek és -átmenetek, a tulajdonság-paletta
  • A rétegek, a színpad és az időegyenes
  • A blendék
  • A könyvtár
  • Az Align, Info és a Transform paletta
  • A View és a Modify menü
  • Marionett-eszköz, szórópisztoly, 3D-transzformációk

A szimbólumok

  • Group
  • Graphic
  • Interaktív gombok (Button)
  • Moziklipp (MovieClip)

Animáció

  • A kulcsfázis-technikáról általában
  • Formaanimáció (Shape Tween)
  • Mozgásanimáció (Classic Tween)
  • Animáció vezérlőszinttel (Motion Guide)
  • Mozgásanimáció újratervezve (Motion Tween)
  • Maszkolás, maszkanimáció (Mask)
  • Kockák és kulcskockák
  • Sebesség és framerate
  • Moziklippek (animációk) kombinálása
  • A szűrők: vetett árnyék, életlenítő, glória, dombormű, színátmenet
  • Import és export

Bannerek

  • Hirdetési rendszerek, méretek
  • Banner készítése vektorgrafikákkal és képekkel
  • Mitől "természetes" egy animáció: sebességgörbék, motion blur
  • Banner készítése Photoshop kompozícióból

Flash site

  • Weboldal külső állományokkal
  • Külső szöveg: loadVariablesNum
  • Külső képek és SWF-ek: loadMovie
  • Külső hangállományok: loadSound
  • Külső videók

ActionScript 3 alapok

HTML5-Snippetek használata

  • Időegyenes
    • stop
    • aktuális frame kiolvasása
    • kattintásra frame-re ugrás
    • kattintásra frame-re ugrás és lejátszás
  • Akciók
    • Weboldal felhívása
    • Egyéni egérkurzor
    • Moziklipp lejátszása
    • Moziklipp megállítása
    • Elem elrejtése
    • Elem felfedése
    • Elem pozícionálása kattintásra
    • Szövegmező megjelenítése kattintásra
  • Eseménykezelők
    • Kattintás
    • Mouse Over
    • Mouse Out
    • Duplakatt
  • Animáció
    • Vízszintes mozgás
    • Függőleges mozgás
    • Elfordítás
    • Folyamatos forgatás
    • Vízszintes animáció
    • Függőleges animáció
    • Moziklipp be- és kiúsztatása
  • Load & Unload
    • Kép töltése könyvtárból kattintásra
    • Példány hozzáadása könyvtárból
  • Create JS API-k

Audio és Video

  • Eseményhangok gombokhoz
  • Hangerő- és panorámaszabályzás
  • Loopok
  • Videovezérlés
  • Formátumok, méretoptimalizálás

Közzététel

  • Exportformátumok:
    • interaktív: HTML5, SWF, EXE
    • állókép: BMP, JPG, GIF, PNG
    • mozgókép: GIF, MOV
  • Méretoptimalizálás: a közzététel beállításai
  • Letöltés szimulálása
  • Site feltöltése FTP-vel

Érdekes linkek

Kapcsolódó modul: AfterEffects, Adobe Edge és Google Web Designer