Interaktív HTML5 animációk készítése Windowson egyszerűen és hatékonyan

Miután a Flash hivatalosan is jobblétre szenderült, igencsak fellendült a HTML5 tartalmak készítésére szolgáló alkalmazások kínálata. Természetesen az Adobe-nak is van HTML5 bannerek és animációk készítésére hivatott alkalmazást, sőt, maga a Google is kínál erre a célra ingyenes eszközt. Anno mutattunk egy HTML5 animációs szoftvert macOS-re is a Hype képében, s örömmel jelentjük, hogy tudunk mutatni olyat is, amellyel gyerekjáték az interaktív HTML5 animációk készítése Windowson. Ha kell, akár programozói tudás nélkül is abszolút profi eredményt érhetünk el vele!!

 

WebAnimator 3: interaktív HTML5 animációk készítése Windowson

Nemrég jelent meg a WebAnimator 3, amely rendkívül emlékeztet minket a már említett Hype-ra, csak éppen ez Windowson biztosítja nagyjából ugyanazokat a lehetőségeket. Ráadásul itt rögtön három változatban:

  • A WebAnimator go verzió amolyan belépő szintű változat, amelyben leginkább sablonokat alakíthatunk át saját elképzeléseinknek megfelelőre, így pillanatok alatt elkészülhetünk egy pofás, mozgalmas HTML5 bannerrel (vagy GIF animációval).
  • A WebAnimator now már egy fokkal több eszközt biztosít, így akár a nulláról is összerakhatunk profi HTML5 animációkat, GIF animációkat. Itt már használhatjuk az idősávot is, ami pontosabb időzítést tesz lehetővé.
  • Végül ott a WebAnimator plus amely a fentieken túl professzionális idősáv-eszközöket, animált gombokat, videó- és hangfájlok beemelését, illetve adott esetben akár saját JavaScript kódok beépítését is lehetővé teszi, vagyis akár programozhatunk is egyes részeket, így akár komplett weboldalakat is összeállíthatunk vele.

A legjobban tehát a now vagy plus változatokkal járunk, értelemszerűen minél nagyobb tudású verziót választunk, annál többe kerül, de hát a lehetőségeink is arányosan nőnek az árral. A nagyobb változatokkal komplett animált menüket, bannereket, interaktív bemutatókat, slideshow-kat, online oktatóanyagokat stb. is létrehozhatunk, meglepően könnyedén.

 

Sokoldalú, mégis egyszerűen használható

A WebAnimator 3 felülete abszolút átlátható. Bal oldalon találjuk a felhasználható objektumtípusokat tartalmazó eszköztárat, mellette a jelenetek nézőképes listáját, ezt követi a vászon, ahol összeállíthatjuk az adott jelenetet, majd a Elements panelt, amelyen mindig az éppen kijelölt elem jellemzőit látjuk.

Az egész alatt ott az idősáv amelyen a vászonra kerülő elemek minden egyes jellemzőjének változását beidőzíthetjük. Használata egyszerű: a vászonra dobjuk a kívánt elemet (szövegdoboz, kép, videó, hang, gomb, vektoros rajz), majd a kulcskockák használatával beidőzítjük azok jellemzőinek változásait. A hasonló programoknál megszokott módon, ha mondjuk egy SVG ábra méretét, elforgatását, színét, pozícióját, vagy egyéb jellemzőit egy kulcskockánál változtatjuk meg, a program képes a két kulcskocka közötti köztes jellemzőket automatikusan beállítani. Így zökkenőmentes átmeneteket kreálhatunk mindössze néhány kattintással.

Az idősáv használata abszolút logikus, ráadásul alapból nem is mutatja az összes jellemzőt, mi kapcsolhatjuk be azokat, amelyekre szükségünk van, így kisebb az esélye, hogy egy összetett felület tervezésekor belezavarodjunk a temérdek sávba. A szükséges jellemzők bekapcsolását egyébként egyszerűsíthetjük, ha a Record gombra kattintva bekapcsoljuk a változások rögzítését. Ilyenkor a program a változtatásoknak megfelelő jellemzőket automatikusan hozzáadja az idősávhoz, az éppen aktuális frame-nél.

A különböző jelenetek közötti kapcsolat természetesen interaktív módon is vezérelhető, így a gombokhoz vagy bármely más elemhez is hozzárendelhetünk egérfunkciókat (gomb lenyomása, elengedése, kattintás, egérkurzor áthaladása stb.), ezekhez pedig utasításokat (ugrás az adott jelenetre, adott idősáv betöltése, URL megnyitása, esetleg saját funkciók végrehajtása. Utóbbi a plus verzió sajátja, hiszen csak az alkalmas saját kódok végrehajtására.

Az animációk készítése tehát eleve egyszerűnek mondható a programban, de ha még ennyit sem akarunk vele vesződni, akkor az Animations panel megnyitásával seregnyi előre definiált animációt (pattogás, előtűnés, pörgés, ragyogás stb.) rendelhetünk hozzá az éppen kijelölt objektumhoz.

Hasonlóan egyszerűsítheti az életünket az Effects panel is, néhány lenyűgöző látványeffekttel.

Ha már ezen a területen kattogunk, ugyancsak itt találjuk a Project modult, amelyben a teljes anyagra vonatkozó jellemzőket állíthatjuk be. Itt testreszabható az előtöltő képernyő megjelenése, beállítható az anyag kívánt mérete, illetve az is, ha reszponzív végeredményre van szükségünk. Így a böngésző méretéhez is alkalmazkodhat a kész produktum.

Az aktuális verzió egyébként hozott néhány praktikus újdonságot. Amellett, hogy jelentősen megújult a felülete, immár a videofájlok mellett akár Youtube videókat is beemelhetünk előadásainkba, használhatunk Google fontokat, készíthetünk reszponzív dokumentumokat, van integrált Pixabay gyűjtemény, ahonnan jogdíjmentes fotókat és vektoros ábrákat illeszthetünk be egyetlen kattintással stb.

A program egyébként varázslókkal is segíti a munkát: a Templates / Choose template menüben egyetlen kattintással választhatunk a slideshow, prezentáció stb. sablonok között. Ezekből utána pár kattintással összerakható a végleges kompozíció, az általunk kiválasztott méretben.

Ha mindennel végeztünk, már csak az exportálás van hátra. Itt választhatunk, hogy HTML5 vagy inkább animált GIF változatra van-e szükségünk. Utóbbi esetében értelemszerűen le kell mondanunk az interaktív elemekről. Ha viszont HTML5 formátumban exportálunk, akkor működnek a gombok, interakciók is.

 

Összegzésül

Mindent egybevetve a WebAnimator 3 now/plus egy kifejezetten sokoldalú HTML5 animációs szoftver. A felületével könnyű megbarátkozni, s ha egyszer megszoktuk, elég hatékonyan lehet vele dolgozni. Egyetlen problémánk az volt, hogy egyszerűen nem találtunk benne zoom funkciót, amivel a vászon előnézete a kisebb kijelzőkön csökkenthető annyira, hogy az egész látszódjon és ne takarják ki a felület paneljai. Nagyfelbontású kijelzőnél, vagy egy átlagos méretű banner készítésekor ez nem gond, de ha komplett interaktív weboldalakat akarunk benne létrehozni, az egy kisfelbontású kijelző esetében macerás lesz. De hát semmi sem tökéletes. Ettől eltekintve minden más funkció remekül sikerült, az idővonal például kifejezetten átlátható és jól használható. A now kiadás ár/érték arányban jó választás lehet, de egyáltalán nem kell zsákbamacskát venni, hiszen mindegyik változatból letölthető ingyenes próbaverzió is. Szerintünk annyi esélyt mindenképpen érdemes adni a programnak, hogy ezt letöltjük és kipróbáljuk, mert könnyen megszerethető kis alkalmazásról van szó.

97%
Jól használható

WebAnimator 3 Plus

HTML5 bannerek, vagy akár interaktív HTML5 prezentációk, weboldalak készítéshez is jól használható program.

  • Használhatóság
  • Funkciók
  • Felület

Rendszer: Windows

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ó