Lenyűgöző reszponzív és interaktív HTML5 animációk készítése Windowson és Macen

Az Adobe Flash idei, hivatalos jobblétre szenderülésével nem csak a Flash játékok szerelmesei lesznek rákényszerítve a váltásra, hanem azok is, akik anno Flash animációk készítésében utaztak. A legkézenfekvőbb utód a HTML5 és Javascript kettős, amelyekkel gyakorlatilag bármilyen platformra megoldható a reszponzív és interaktív HTML5 animációk készítése Windowson és Macen egyaránt. A kérdés csak az, hogy milyen eszközök állnak a rendelkezésünkre, hogy elkészítsük ezeket az online, vagy mobilos anyagokat. Az alábbi program szerintünk az egyik legjobb megoldás, ha gyorsan akarunk látványos eredményt elérni a HTML5 animációk készítése terén, ráadásul az interakciók lehetősége sem merül ki abban, hogy videókat indítsunk el, vagy elugorjunk az animáció egy adott részére. Ennél sokkal többre képes a program!

Saola Animate: reszponzív és interaktív HTML5 animációk készítése Windowson és Macen

Nem most kerül nálunk terítékre az Atomi Systems által fejlesztett alkalmazás. Korábban már bemutattuk az ActivePresenter névre keresztelt e-learning fejlesztő rendszerüket. Azzal komplett HTML5 alapú oktatóanyagokat lehet létrehozni, játszi könnyedséggel, akár tudásfelmérésre alkalmas kvízekkel, SCORM és xAPI támogatással.

A ma bemutatásra kerülő Saola Animate tulajdonképpen az ActivePresenter kistesójának tekinthető. E-learning fejlesztéshez kevésbé praktikus, viszont sokkal jobban teljesít, ha animációk, vagy éppen interaktív animációk készítése a feladat. A végeredmény pedig HTML5 alapú, vagyis gyakorlatilag bármilyen eszközön hasznosíthatjuk. Beépíthető weboldalba, okostelefonos appba, vagy fut akár egy pendrájvról is. Ráadásul dolgozni is több platformon tudunk, hiszen a program elérhető Windowsra és macOS-re egyaránt.

Gyors és könnyen használható

Két fontos tulajdonsága van a Saola Animate-nek, amelyek miatt percekkel az első indítás után a felhasználó szívébe lopja magát: villámgyors és nagyon könnyen elsajátítható a használata.

Felépítésében követi kategóriája többi szereplőjét, akár az Adobe animációs megoldásáról, akár a Tumult Hype-ról legyen szó. De a hasonlóság ellenére valahogy mégis sokkal átláthatóbbra sikerült, mint konkurensei. Mindenesetre itt is bal oldalon látjuk a jelenetek (Scenes) diáit, illetve ugyanitt állíthatjuk be a teljes anyag jellemzőit is: felbontás, mérethez igazítás módja, automatikus lejátszás, CSS és HTML kódok, előtöltő animáció jellemzői stb.

Mellette ott a munkaasztal, ahol összerakhatjuk animációnkat, felül az ehhez használható objektumok (szöveg, kép, videó, hang, HTML Widget, szimbólum, alakzatok, rajz) jobb oldalon pedig a munkaterületen kijelöl objektumok jellemzőit jeleníthetjük meg, kategóriákra osztva. Vagyis külön lapon láthatók az általános jellemzők, a méret és pozíció adatok, a kitöltési és keret stílusok, és a grafikai effektek (árnyék, színelési jellemzők stb.). Ugyancsak a jobb oldali panelen, annak az alján kaptak helyet az Elements (tulajdonképpen a rétegkezelő), a Resources (itt egyben látjuk az anyagban felhasznált fájlokat), a Functions (itt a szrkiptjeinket gyűjthetjük), és a Breakpoints panelek.

Végül a felület alsó részén látható az idősáv (Timeline), amelyen animációnk minden egyes mozzanatát megtervezhetjük. Ennek felbontását, felosztását egyaránt testreszabhatjuk, hogy tökéletesen tudjuk pozicionálni a kulcskockákat.

Főbb funkciók

Ha már az idősávval fejeztük be az előző bekezdést, maradjunk is még egy kicsit ott, hiszen elég fontos eleme az animációk készítésének. A Saola Animate-ben a kulcskockákat kétféleképpen adhatjuk meg. A manuális megoldás esetében minden egyes lépést nekünk kell megtervezni. Ehhez a jobb oldali panelen határozhatjuk meg a kulcspontot az éppen kijelölt objektumok jellemzőinél. Így lépésről lépésre haladhatunk az animációs fázisokkal, miközben minden jellemzőt végig kézben tartunk.

A másik módszer egyszerűbb és gyorsabb: bekapcsolhatjuk az Auto-Keyframe Mode funkciót. Így a munkaasztalon elvégzett minden módosítást automatikusan rögzít a program az adott pillanathoz (ahol éppen állunk az idősávon). Ilyenkor a kulcskockák közötti animációs fázisokat a program automatikusan kiszámolja és beállítja, így ezzel sem kell foglalkoznunk. Ezzel a módszerrel szintén minden jellemző változtatható menet közben (szín, forma, 3D elforgatás stb.). Igen, ha már szóba került: itt akár 3D-ben is elforgathatunk objektumokat, ami nagyot dobhat az animációkon. Emellett az animáció ritmusa is könnyedén változtatható az Easing jellemző módosításával. Sőt, van Motion Path funkció is, így a mozgások útvonalát teljes kényelemben rajzolhatjuk meg.

Természetesen létrehozhatunk több idősávot is, s ha kell, ezeket akár interaktív módon is elindíthatjuk a bemutató során. Merthogy itt az interaktivitás komoly szerepet kaphat az animációban. Ehhez kapunk néhány előre definiált elemet az Actions gyűjteményben: ugrálhatunk a diák között, elindíthatunk, szüneteltethetünk, vagy leállíthatunk egy adott idősávot, videót, hangfájlt, animációt (van Sprite Sheet funkció is, így egyetlen képfájlba sűríthetjük mondjuk egy karakter teljes mozgás-szekvenciáját), elrejthetünk és megjeleníthetünk objektumokat, megnyithatunk URL címeket, megváltoztathatjuk egy objektum feliratát.

Sőt, akár saját Javascript kódokat is használhatunk. Utóbbihoz szintaxis jelöléssel működő kódszerkesztőt is integráltak a programba, így egészen kényelmesen szerkeszthetjük alkalmazáson belül a saját kódrészleteket.

Akciókat és Javascript funkciókat egyébként az objektumokhoz kötődő különféle eseményeken (kattintás, ujj elhúzása, egérkurzor helyzete stb.) kívül hozzárendelhetünk idősávokhoz, diákhoz, vagy akár a komplett dokumentumhoz is.

Olyan extra eseményeket is figyelhetünk, mint az ablak méretének vagy az eszköz orientációjának megváltozása, vagy a fókusz módosulása. A szkriptek használatán túl praktikus még a Symbols funkció is, amellyel megoszthatunk objektumokat, idősávokat, animációkat a jelenetek között. Vagyis a teljes dokumentumon átívelő elemekkel is dolgozhatunk.

Megosztás

Ha mindennel elkészültünk, a programból HTML5 formátumba exportálhatjuk a teljes anyagot. Mivel a Saola Animate támogatja a reszponzív dizájnt (a programban lehetőségünk van rá, hogy a kényesebb részeket manuálisan hozzáidomítsuk a különféle képernyőfelbontásokhoz), így a kész animáció éppoly tökéletesen használható egy asztali számítógépen, mint egy tableten vagy okostelefonon. Ráadásul kompatibilitási problémákba sem nagyon ütközhetünk, hiszen a HTML5 és a Javascript támogatott minden modern böngészőben az összes platformon. A teljesség kedvéért lehetőségünk van a Google betűtípusainak használatára is, ami szintén hasznos, hiszen ezek is automatikusan elérhetők az összes rendszer esetén egy weboldal vagy online animáció megjelenítésekor.

A kész anyagot hasznosíthatjuk önmagában is, de ha kell, beépíthető a weboldalunkba is. Így kiváló lehetőség, hogy animációkkal, látványos interaktív elemekkel bővítsünk az honlapunkat.

Összegzésül

Mindent egybevetve a Saola Animate egyike a legjobb HTML5 animációs programoknak, amelyekkel eddig találkoztunk. A repszponzív felépítés támogatása, a saját szkriptek írásának lehetősége szinte végtelen felhasználási lehetőségekkel kecsegtet. Akár egyszerűbb online játékokat is kreálhatunk vele.

De ha nem akarunk programozni, akkor szimplán az animációs eszközök is könnyen használhatók, hogy látványos HTML5 animációt, vagy éppen online bannereket készítsünk. Sőt, ha nem vagyunk programozók, de azért némi interaktivitásra is vágyunk, ez esetben is tökéletes választás. Ami pedig további pozitívum: használhatjuk Windowson és macOS-en egyaránt.

Használatát villámgyorsan elsajátíthatjuk, de ha szükségünk van némi segítségre hozzá, rengeteg letölthető oktatóanyag és videó, illetve komplett online kézikönyv és persze fórum áll rendelkezésünkre a tanuláshoz.

Tudásához mérten ráadásul kifejezetten kedvező áron vehetjük meg a készítők weboldalán. Vásárlás előtt egyébként bárki kipróbálhatja, hogy minden szempontból megfelel-e számára az alkalmazás, merthogy van belőle ingyen letölthető próbaverzió is.

Ne maradjon le erről sem!

Mint a legtöbb weboldal, mi is használunk sütiket az oldalon. Elfogadom Adatkezelési tájékoztató