Přejít k navigační liště

Zdroják » Různé » Adobe Edge – HTML5 animace pro animátory

Adobe Edge – HTML5 animace pro animátory

Články Různé

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

Komentáře

Subscribe
Upozornit na
guest
10 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Marek Knápek

Kdo jako první přepíše tendlecten editor do HTML5+CSS+JS (žádný canvas), dostane ode mě pomyslnou zlatou medaili.

pas

A do 1 KB. :)

port

A s rošádou :)

Stepan

Tak jsem to prepsal :). Respektive jsem to neznal a chtel jsem si udelat vlatni sikovny editor na javascriptove animace, co mi ulehci praci :), a animace pobezi vsude. Dal jsem to zdarma na web a hlavni sprajtovou knihovnu jako open source. Komu by se to hodilo tak se muze mrknout na http://www.mixeek.com

Zenový mistr krevního oběhu

Skvělé!

Jan Pobořil

Jak dlouho můžeme tento preview využívat? Je to omezeno podobně, jak bývají omezené betaverze?

Čelo

Do konce roku.

asdasd

To vypadá dobře, díky za tip.

Belda

Neni nekde neco podobneho jako opensource??

Petr Pecháček

Ve středu 7.9. od 10.00 krátce představíme Edge v rámci pravidelných on-line miniseminářů. Podrobné info zde: http://www.adobe.com/cz/akce/miniseminare/

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.