Animációk HTML5-ben

Egy régi-régi ismerősöm vetette fel, hogy animált tartalmat szeretne a legkülönfélébb mai eszközökön megjelentetni. Ilyenkor ugyebár az embernek rögtön a HTML5 jut eszébe és keresni kezd. Ezen keresgélés eredményéről legjobb a Szoftver aktualitások-ban beszámolni, hiszen sok helyen felmerülhet ilyen igény a különféle eszközök gyors megjelenése következtében, és egyáltalán nem triviális választ találni (még a weben sem) erre a tulajdonképpen triviális kérdésre.

A Google keresés azt mutatja, hogy pont márciusban nagyon megnőtt az érdeklődés ebben az ügyben (826 ezer találat a <HTML5 animation>-re) .

Ebből a legelején kibukott, hogy az Adobe Labs március 8-án Technical Preview formában megjelentette a Wallaby-t, mellyel Flash animációkat (Flash Professional – FLA – fájlokat) lehet HTML5-re konvertálni. Erről a magyar weben is lehet olvasni. A termék wikijében lévő Features and Support mutatja, hogy mit is támogat. A Wallaby wiki bevezetőjéből kiemelném még, hogy (kiemelés tőlem):

• The focus for this initial version of Wallaby is to do the best job possible of converting typical banner ads to HTML5. Wallaby does a good job of converting graphical content along with complex, timeline-based animation to HTML5.
  
• At this time, the Wallaby HTML5 output uses Webkit specific CSS3 tags and therefore is not compatible with Firefox, IE9, or other HTML5 browsers. Supported Webkit browsers include Chrome and Safari on OSX, Windows, and iOS (iPad, iPhone, iPod).
  
• Wallaby’s design goal was not to produce final form HTML ready for deployment to web pages. Instead it focuses on converting the rich animated graphical content into a form that can easily be imported into other web pages in development with web page design tools like Dreamweaver.

Az alábbi videó ebben a megcélzott kontextusban (Flash banner-ek konvertálása) mutatja a terméket és annak gyakorlati lehetőségeit:

White Horse Flash Engineer Lars Jacobson walks through the process of converting a Flash banner to HTML5 using Adobe Labs’ new tool, Wallaby. Jamie Beckland, Emerging Media Manager, narrates how Wallaby can save time, but still need expertise to clean up post-conversion errors. Digital marketers who are looking for a quick win for the iPad, iPhone, and other iOs devices should consider using Wallaby on simple Flash content.

A magyar weben megjelent cikkek az okokat emelik ki. A Hungarian Adobe User Group (HAUG) hírében ezt találjuk (kiemelés tőlem):

A Wallaby kódnévre keresztelt kísérleti technológia funkciója az volna, hogy az Adobe® Flash® Professional (FLA) file-t átalakítsa HTML (HTML5) file-okká. Ez lehetővé tenné, hogy a grafikai és animációs tartalmakat olyan helyen is meg lehessen jeleníteni, ahol nem támogatott a Flash futtatási lehetőség, mint például iPhone-on, iPaden vagy iPod Touch-on. HTML konvertálás után szerkeszthetővé válik a file, akár az Adobe Dreamweaver® szoftver segítségével, akár manuálisan is.

Az Adobe tehát eszköz oldalról is meg fogja oldani a HTML5 animáció problémáját, noha maga a HTML5 technológia koránt sem annyira erős ebben a tekintetben, mint az övé. Mindez azonban még a jövő zenéje, hiszen a konverziós szoftver még csak kezdeti fejlesztési stádiumban van, no és a HTML5-nek és különösen a böngészőkben való implementációknak van még hova fejlődni ebben a tekintetben.

Mire képes ma leginkább a HTML5 animáció? Ezt legegyszerűbben a HTML5 hivatalos logo JavaScript-es animációja mutatja: ld. http://www.kevs3d.co.uk/dev/html5logo/. Még ennél is egyszerűbb, további példák a Web Animations and Transitions in HTML 5 oldalon találhatók.

Hogy ismerősöm konkrét igényének kielégítésére mennyire képes a mai HTML5 technológia azt viszont ilyen egyszerűen nem lehet eldönteni. Hiába keresünk ugyanis HTML5 alapú animációs eszközöket, amelyeket ajánlhatnék neki, hogy azok segítségével maga győződhessen meg a lehetőségekről, ilyenek egyszerűen még nincsenek. Legalábbis én nem találtam ilyeneket.

Egyelőre látni lehet a Microsoft IE9 kapcsán néhány bemutató lehetőséget, például:

Ezt egyébként a http://beautyofthewebhu.cloudapp.net/#/productguide (A web szépsége) oldal termékbemutató aloldalán magyar kisérő hanggal is megnézheti mindenki (+ magyar mellékelt szöveggel), ahogyan ugyanonnan további magyar videók is megnézhetők a lehetőségek kitapasztalására.

vagy

This video is made to promote the latest campaign for Internet Explorer 9: FrameRate Fest. With this video, we invite all creative developers to go wild with HTML5! You can upload your interactive HTML5 art on frameratefest.com and win an Xbox 360 + Kinect. Are you up for this challenge? Create a stunning masterpiece and share your frame!

A http://www.frameratefest.com/-on pedig már elég teljes választékát lehet látni a pályaműveknek, hiszen március 25. a határidő (ld. meghirdetés). Az oldalon a Hall of Fame-en lehet látni a legtöbb szavazatot kapott frame-eket.

Google oldalról pedig a Sports Illustrated Magazin kisérleti példányát bemutató videót ajánlanám a lehetőségek bemutatására (bár animációs szempont csak felhasználói felület célokra használnak ebben animációt, és meglehetősen egyszerűeket):

A collaboration between TWF, Google, and SI for the Google I/O 2010 Keynote Presentation. Narrated by SI Editor, Terry McDonell. Developed in HTML5 using: CSS Animation, Embedded Fonts, Drag & Drop, HTML5 Video, Geolocation, Web Workers, App Cache, Web DB, Feeds, Google Maps API, Google Buzz API, Rails, Lazy Loading Pages, (And no Flash).

Alternatív lehetőség a jelenlegi határok érzékelésére a zseniális magyar Prezi szoftver Flash-ről HTML5-re való átírásának az esete, amelyről Hardi János és Bódi Ádám tartottak tavaly szeptemberben előadást a stockholmi Disruptive Code konferencián. Az Experiences of migrating a Flash based Prezi to HTML5 – Adam Bodi & Janos Hardi (2011. szeptember 30.) bejegyzésben beágyazott videófelvétel megtekinthető. Az animációra vonatkozó lényeg [9:50]-től kezdődik azzal, hogy miért nem a JavaScript alapú utat választották, majd [15:40]-től a CSS3 transzformációkkal való megvalósítást mutatják be.

A [25:40]-től kezdődő kérdés-felelet részből kiderül, hogy akkor még csak kísérleti projektként hajtották ezt végre, az editorhoz hozzás sem nyúlva, így kb. 2 hónapnyi idő alatt állítottak elő egy a Flash-es Prezivel egyenértékű változatot. A legnehezebb feladatnak a fontok támogatása bizonyult (Prezi sajátosságok miatt nyilván). Elmondták azt is, hogy az ideális megoldásban, nevezetesen a minden platformon HTML5 alapú Preziben még nem tudnak gondolkodni. Többek között azért, mert a számukra szükséges CSS3 szintet még nem minden böngésző támogatja. Az iPad alapú Prezi termék elkészítését (ami persze a Flash Apple általi kitiltása miatt csak Safari HTML5-ös lehet) ugyanakkor ezek után tisztán üzleti döntéstől függőnek mondták.

És valóban most januárban meg is jelent az iPad változatú Prezi. Lásd: Show prezis anywhere on the iPad (2011. januárt 10.). Ajánlanám még az Academy: Inserting Animations in Prezi [Balázs Turai, 30 March 2010] Prezi prezentációt, amiből látni lehet többek között, hogy micsoda animációk lehetnek a Preziben.