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