Adobe Edge - HTML5 animace pro animátory

Otevřený textový editor a přepisování hodnot a souřadnic není vhodným prostředím pro rychlé nastřelení základní animace ani pro ladění načasování.

Společnost Adobe se proto rozhodla využít zkušeností z tvorby nástrojů pro práci s Flashem a pro editaci videa a pracuje na Adobe Edge. Tímto názvem je označen animační nástroj určený přímo pro grafiky a animátory, který by mohl být obdobou aplikace Flash Professional s výstupem do HTML5 - pro animaci využívá CSS a JavaScript (ne tedy třeba canvas). Verze Edge Preview 1 se základními funkcemi je k dispozici pro veřejné testování.

Tvorba animace v Adobe Edge

Edge je zatím velmi jednoduchý. Umožňuje vytvoření objektu na scéně, kterým může být buď obdélník (tj. div), text, nebo načtený bitmapový obrázek či SVG grafika. Objektu můžeme nastavovat vlastnosti a transformace. Ty vám budou hned povědomé z CSS - pozice na scéně, velikost, průhlednost, barva pozadí, rámeček, škálování, sklápění, rotace a nastavení kulatých rohů.

Vlastnosti objektů na scéně se definují ve vztahu s klíčovými snímky na časové ose. Mezi klíčovými snímky jsou pak vlastnosti animovány a to buď lineárně, nebo je jejich průběh řízen zvolenou funkcí. Časová osa Edge je klíčovým místem aplikace. Je na ní možné upravovat délku průběhu animace, posouvat jednotlivé fáze a podobně - připomíná časovou osu z After Effects (jako ostatně celé GUI), čímž možná Adobe zdůrazňuje kam s Edge míří. Ovládací prvky se tak trochu liší od těch, které možná znáte z nejznámějších aplikací Adobe jako je Photoshop nebo Flash Professional. Nejen z práce s osou ale z celého ovládání je vidět snaha, aby vše bylo intuitivní a "při myši".

Kdo je zvyklý na práci s Flashem, bude zatím určitě mnoho funkcí postrádat. Vše probíhá na jediné časové ose, takže není možné vytvářet vnořené animace. Chybí také možnost skriptování jakékoliv interaktivity, nebo možnost vytvoření smyčky. Jedná se ale opravdu jen o preview verzi, a proto můžeme očekávat, že do finální aplikace ještě autoři mnoho funkcí přidají. Podobně stabilita chodu aplikace odpovídá rané fázi vývoje.

Je možná nepodstatné psát v tomto článku o kódu (pro jistotu: žádný editor kódu uvnitř nenajdete), ale otevřený kód je jednou z výhod HTML platformy, takže jak přesně vypadá výstup z Edge? Vygenerovaná HTML stránka je triviální a obsahuje pouze kontejner pro scénu. V hlavičce má pak připojený jednak javascriptový soubor obsahující poměrně přehledný datový objekt, který popisuje všechny součásti animace a časovou osu, a pak také dvě knihovny, které fungují jako interpret datového objektu a animaci realizují. Navíc je ještě přibalena knihovna jQuery a plugin jQuery Easing.

HTML a JavaScript je i pracovním formátem Edge. Nečekejte žádnou obdobu .fla anebo .edge. Výstup popsaný v předchozím odstavci není výsledkem žádného exportu, ale jednoduchého uložení a můžete ho pak samozřejmě i otevřít a dále na něm pracovat. Zajímavou vlastností Edge je možnost načíst hotovou HTML stránku a animovat objekty, které jsou na stránce umístěné. Původní HTML kód pak zůstane nedotčený a pouze se do hlavičky připojí potřebné soubory. Otevírá se zde tak možnost jednoduchého napojení na stávající pracovní postupy.

Pokud si Adobe Edge Preview 1 chcete vyzkoušet, stáhněte si ho z Adobe Labs. V současnosti jsou podporovány pouze operační systémy Windows Vista, Windows 7 a MacOS 10.6/10.7. Spoustu informací získáte i z diskuzního fóra na http://forums.adobe.com/community/labs/edge/ a začít můžete třeba s ukázkovými animacemi, které naleznete na stránce http://labs.adobe.com/technologies/edge/resources/.