Tumult Hype 4: animált, interaktív HTML5 tartalmak készítése egyszerűen

Évekkel ezelőtt még az Adobe Flash uralta a weboldalak jó részét. Ha más nem, animált bannerként, de sok esetben nyitóképként, menüként, vagy akár teljes weboldalként is belebotlott az ember Flash-alapú felületekbe. Aztán az okostelefonok terjedésével párhuzamosan egyre inkább teret nyert a HTML5, hiszen a Flash egy erőforrás-zabáló megoldás volt, ami pillanatok alatt ledarálta az akkori készülékek akkuját, emellett lassan töltődött le, túlméretes volt, s az esetek többségében nem is illeszkedett a mobil képernyők méreteihez a legtöbb így felépített weboldal. A HTML5 térnyerésével aztán a Flash előbb vesztett népszerűségéből, míg végül az Adobe is úgy döntött, mennie kell. Így mára szinte teljesen eltűntek a Flash alapú oldalak és bannerek, s a modern böngészők sem támogatják már alapból. Helyette itt van nekünk a HTML5, amely gyakorlatilag ugyanolyan látványos bannerek, weboldalak, felületek készítésére alkalmas, csak kevésbé erőforrás-igényes, reszponzív felületek létrehozására is jó választás, s mára minden rendszeren és böngészőben támogatott. Arra, hogy HTML5 alapú oldalakat, animációkat, bannereket hozzunk létre, rengeteg eszköz áll a rendelkezésünkre. Mi is mutattunk már jónéhányat. Ma viszont – macOS alatt – az egyik legjobbra hívjuk fel a figyelmet, amellyel rendkívül egyszerűen megoldható az interaktív, animált HTML5 tartalmak készítése: ez a Tumult Hype 4, amelynek néhány napja jelent meg, benne számtalan hasznos és praktikus újdonsággal.

Tumult Hype 4: interaktív, animált HTML5 tartalmak készítése egyszerűen

A Tumult Hype nem most szerepel nálunk először. Az előző változatot is bemutattuk anno, s már akkor is ódákat zengünk a felületéről, egyszerű használatáról. A Tumult Hype 4 ezen csak javított, a felületet ugyanis kicsit tovább csiszolták, hogy még kényelmesebb legyen használni, s jobban illeszkedjen a macOS Mojave felületéhez is. Szerencsére akkora átalakítások nem történtek, hogy nulláról kelljen újrakezdeni a program használatát annak, aki az előző változattal is dolgozott már.

Gyakorlatilag ugyanazt a felépítés kapjuk, mint eddig: bal oldalon a diák, vagy “színpadok” (Scenes), illetve ha többféle elrendezésben készültek, akkor azok változatai, középen a munkafelület, alatta az idősávval, jobb oldalon pedig az éppen kijelölt objektumok, vagy a teljes projekt jellemzői, illetve az alkalmazható funkciók, opciók kaptak helyet. Minden tökéletesen áttekinthető akár kisebb felbontású képernyőn is, így akár egy régebbi MacBookon dolgozva sem lesznek gondjaink. Ráadásul minden elemet átrendezhetünk, ha úgy jobban megfelel. A Hype nem olyan zömök óriás, mint mondjuk az Adobe alkalmazások (lásd Captivate), így a rendszerigénye is dicséretesen visszafogott. Gyorsan megy vele a munka.

S hogy mire is való? Nos, tulajdonképpen komplett, interaktív weboldalakat, animált bannereket, vektoros animációkat hozhatunk benne létre, szinte játszi könnyedséggel. Ha pedig ehhez még van egy kis Javascript ismeretünk is és benevezünk a Hype Pro verziójába, akkor gyakorlatilag bármilyen interaktív-animált HTML5 tartalmat elkészíthetünk benne. Ennek ellenére az alap interakciókat tartalmazó (váltás a diák között, elugrás egy oldalra, új e-mail megnyitása, hang lejátszása, ugrás az idősáv adott pontjára stb.) tartalmak előállításához nulla programozó tudás szükséges vele. S persze mindezt megfejelhetjük azzal, hogy az idősáv segítségével az ég világon mindent animálhatunk, pontos időzítéssel. Ezeket persze tudta eddig is a program. Lássuk, mit kapunk az új változattól!

Tumult Hype 4 újdonságok

A legfőbb újítást a rajzeszközök terén tapasztalhatjuk. Komplex vektoros alakzatokkal dolgozhatunk, s rajzolhatunk is ilyeneket nulláról indulva az új Pencil Tool eszköz segítségével. Rendkívül kényelmes vektoros eszköztárat kapunk, így minden alakzat alakítható utólag is. Ráadásul ezek az alakítások az idősáv segítségével animálhatók is. Akár rajzunk elkészítésének minden pillanatát “megörökíthetjük” vele (Line Draw Animations). 

Importálhatunk is objektumokat, amelyeket aztán szintén szabadon manipulálhatunk a programban. Az új Shape Morphing funkcióval minden animáció automatizálható, a Hype döbbenetes profizmussal számít ki minden egyes fázist a tökéletes végeredmény kedvéért. Emellett a vektoros alakzatokhoz fizikát és interakciókat is rendelhetünk. Előbbiekkel összetett fizikai szimulációkat is kreálhatunk. Sőt, a Physics API segítségével finomíthatunk is ezeken Javascript kódokkal a Pro változatban.

Szóval mostantól ki sem kell lépnünk a Hype-ból, ha teljesen új dolgokat rajzolnánk, majd animálnánk. Mindent megkapunk, amire ehhez szükségünk van, s használhatunk külső rajzpadokat is, ha úgy tartja kedvünk. 

Minden objektumnál használhatunk új árnyékolási effekteket (Drop Shadow és Inset Shadow), bár a Drop Shadow effekt megjelenítése ugyebár böngészőtől is függ, amit érdemes figyelembe venni a későbbi kompatibilitás szempontjából. Az ilyenekre egyébként azonnal figyelmeztet a program, pontosan megjelölve, hogy egy adott funkció használata mely böngésző, mely verziójával ütközhet esetleg akadályokba. A Hype így gondoskodik róla, hogy már a projekt összeállítása közben mindent jól átgondolhassunk a későbbi publikálással kapcsolatban.

De nem csak a rajzeszközök teszik könnyebbé az életünket. Legalább ilyen praktikus újdonság a Sprite Sheet funkció is, amellyel önálló képként mentett animációs fázisokat éppúgy importáéhatunk, mint kész sprite sheet összeállításokat. Importáláskor lehetőségünk van a fázisok jellemzőinek pontos beállítására, így ha esetleg valami elcsúszott volna a tervezéskor, még itt is igazíthatunk rajta, hogy aztán egyetlen objektumként tudjuk felhasználni az előre elkészített animációt. Emellett lehetőség van akár anim GIF animációk importálására is, hasonló módon. Mellesleg ha nem akarunk saját sprite-animációkkal vacakolni, kereshetünk szabadon felhasználható darabokat a korábban bemutatott OpenGameArt oldalon is, a képernyőképen látható ábrát mi is onnan töltöttük le.

Mivel a Hype segítségével akár okostelefonos tartalmakat is gyárthatunk (pl. animációkat egy okostelefonos app “belsejéhez”), így praktikus újdonság, hogy van az ujjmozdulatokhoz rendelhető új Page Turn átmenet is. Így a diák közötti váltás sokkal kifinomultabb hatást kap az ujjgesztusok használatakor. Mellesleg az új verzióba bekerültek az újabb mobileszközök felbontásai is, illetve és külön figyelmet kapott az iPhone X és társai Notch “félszigetének” menedzselése is.

Ha valaki inkább az online hirdetések világában használná e programot, s HTML5 alapú bannereket, hirdetéseket készítene, örömmel fogja venni, hogy immár van Poster/Fallback Image létrehozásra is lehetőség. Egyetlen kattintással készíthetünk felvételt az animációnk adott pontjából, hogy ha valakinél esetleg le lennének tiltva a szkriptek, az jelenhessen meg az eredeti anyag helyén. Ha már itt tartunk, extra érdekesség, hogy a Pro verzió dedikált CDN funkcióval is rendelkezik, amivel adott esetben gyorsítható a runtime modulok betöltése.

Bár a Hype alapvetően egyszerű interakciókkal megspékelt animációk készítésére hivatott, a Pro változat ennél jóval tovább megy. Itt ugyanis Javascript segítségével szinte bármilyen irányba elindulhatunk. A programozáshoz immár használhatunk külső szerkesztőket is, ha nem tűnik elég kényelmesnek az integrált felület. Emellett izgalmas újdonság, hogy Javascriptes matematikai képleteket is használhatunk immár az úsztatások ritmusának meghatározásakor (nem kell megijedni, ez nem kötelező, megvannak az eddigi sablon-úsztatási effektek is). S hogy még egy lépést tegyenek a programozhatóság felé, immár szerkeszthető a HTML attribútumok is.

Összegzésül

Mindent egybevetve a Tumult Hype 4 újabb szintet lépett. Egy all-in-one eszközt kapunk az interaktív HTML5 animációk készítéséhez. Készíthetünk vele komplett multimédia projekteket, weboldalakat, bannereket, animált infografikákat, vagy csak egyszerű vektoros animációkat. Mindhez megkapunk minden szükséges eszközt. Ha pedig hajlandóak vagyunk Javascriptet is használni, a lehetőségeink szinte végtelenek. Nagy előnye, hogy reszponzív felületeket és készíthetünk vele, így projektjeinket könnyedén hozzáigazíthatjuk a különféle eszközök eltérő felbontásához. A HTML5 anyagokat ma már szinte minden rendszer/böngésző gond nélkül megeszi, de Hype-ban készült anyagok exportálhatók videóként, anim GIF-ként, animációs szekvenciaként (PNG képekbe), sőt, OAM Widget vagy iBooks Widget is kreálható belőlük. Az okostelefonokon és tableten való működést pedig továbbra is tesztelhetjük az iOS-re ingyen letölthető Hype Reflectsegítségével.

Néhány példa a Hype felhasználási lehetőségeire a készítők Galériájában is megtalálható. Ezekhez letölthetők az eredeti Hype források is, szóval a segítségükkel aprólékosan megismerhetjük a program lehetőségeit. További segítséget jelenthetnek az ingyenes tutorial videók 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ó