Adobe Edge – HTML5 animace pro animátory

Pokud se v současnosti srovnává Flash a HTML5 jako platformy pro animaci na webu, hodně debat se točí okolo výkonu a konečného výsledku. Méně už se probírá fakt, že vytvořit v HTML5 animaci obsahově srovnatelnou s tou flashovou je hrdinství i pro zručného kodéra/programátora. Adobe přichází s pomocí: Edge!

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“.

Krátké představení Adobe Edge

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.

Podrobnější ukázka práce a ukázka úpravy hotové HTML stránky

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/.

Webdesigner
na volné noze, externě spolupracuje s Adobe.

Komentáře: 10

Přehled komentářů

Marek Knápek Editor v HTML5
pas Re: Editor v HTML5
port Re: Editor v HTML5
Stepan Re: Editor v HTML5
Zenový mistr krevního oběhu Re: Adobe Edge - HTML5 animace pro animátory
janpoboril Délka trvání licence
Čelo Re: Délka trvání licence
asdasd Re: Adobe Edge - HTML5 animace pro animátory
Belda opensource verze?
Petr Pecháček Edge miniseminář
Zdroj: https://www.zdrojak.cz/?p=3535