Adobe Edge Preview: animace a interaktivní obsah pro web - Grafika.cz - vše o počítačové grafice

3. srpna 2011, 00.00 | Webové animace s interaktivním obsahem umí vytvářet technologické preview Adobe Edge. Jedná se o animační editor obsahu pro webové stránky a internetové prezentace, který interně využívá aktuálně používané či zatím připravované koncepce standardů CSS3 a HTML5 v kombinaci s JavaScriptem, s jehož pomocí lze například využívat animované přechody, definovat vztahy mezi objekty a ovládat jejich chování.

Společnost Adobe Systems uvolnila první veřejné preview nového editoru pro tvorbu interaktivního animovaného obsahu pro web, který si můžete u Adobe Labs zdarma stáhnout ve verzích pro Windows a Mac OS X.

Editor pojmenovaný Edge je koncipovaný jako animační nástroj se snadným a (pokud mohu z aktuálního verze preview soudit) poměrně intuitivním ovládáním, který stojí někde na pomezí Adobe Flashe, Flash Builderu a částečně i Adobe Dreamweaveru, jejichž některé editační technologie v sobě kombinuje.

Úkolem Adobe Edge je zpřístupnit designérům a grafikům technologie a připravované koncepce kaskádových stylů CSS3 v kombinaci s JavaScriptem a vlastnostmi HTML5, které Edge využívá pro zobrazování animovaného (a v budoucnu pravděpodobně i multimediálního) obsahu v prostředí webového prohlížeče s podporou HTML5. Výstupem z Adobe Edge tedy není Flash, nýbrž kód kombinující uvedené standardy a technologie HTML5, CSS3 a JavaScript frameworkem, s jejichž pomocí lze projekty „rozhýbat“ a pracovat s jejich různými vlastnostmi.

Největší předností Adobe Edge je přitom čistě vizuální (WYSIWYG) způsob práce, kdy vás vůbec nezajímá psaní HTML kódů, skriptů či prvků kaskádových stylů, neboť vše si generuje editor interně sám a uživatel (v aktuálním preview Edge) pracuje výhradně v grafickém prostředí časové osy a náhledového systému editoru.

Adobe Edge Preview - prostředí editoru s náhledem animace, časovou osou s jednotlivými objekty a vlastnostmi scény

Prostředí editoru a časová osa

Stávající preview Adobe Edge zatím obsahuje pouze některé z plánovaných animačních a zejména editačních funkcí, nicméně už nyní nabízí celkem jasnou podobu finální verze editoru respektive jeho pracovního prostředí a časové osy.

Časová osa je naprosto stěžejním prvkem Edge. Do osy a náhledu animace umísťujete/importujete jednotlivé grafické objekty, které lze v náhledu animace umístit s přesností na obrazový bod. Objekty si Edge sám obaluje příslušnými HTML tagy, konkrétně prvky DIV, které editor v podstatě používá podobě jako třeba vrstvy grafického dokumentu v Adobe Photoshopu.

Textové objekty lze v Edge přímo vytvářet a editovat, bitmapové a vektorové grafické objekty ve formátech SVG, PNG, JPEG a GIF zatím přímo v Edge editovat nelze. Každý objekt v časové ose může v průběhu animace/času měnit svou pozici a další vlastnosti. Můžete například nastavit natočení a další typy transformací objektů a určit jejich chování s celkem 25 předdefinovanými animačními efekty, obsaženými v JavaScript frameworku jQuery, jehož (starší verzi) Adobe Edge standardně využívá.

Kreslicí funkce zastupují v Adobe Edge zatím pouze nástroje na tvorbu pravoúhlých objektů a objektů se zaoblenými rohy, které lze interaktivně definovat přímo v náhledu projektu.

Animovaný obsah ukládá Adobe Edge jako datové struktury JSON (JavaScript Object Notation), které lze zobrazovat nejen v běžných moderních webových prohlížečích typu IE9, Chrome, Firefox či Safari, ale také například na mobilních platformách Android či iOS a obecně vzato ve všech dalších webových prohlížečích a aplikacích na bázi aktuálních verzí WebKitu.

Adobe Edge Preview - výběr z nabídky chování objektů

Adobe Edge Preview - ve vlastnostech objektů lze v průběhu objekty transformovat a měnit jejich pozici

Adobe Edge Preview - interaktivní tvorba pravoúhlých objektů se zaoblenými rohy

Adobe Edge Preview - textový objekt a výběr barvy

Adobe Edge Preview - importovatelné grafické formáty

Adobe Edge Preview - ukázka části výstupního HTML kódu projektů, generovaného editorem

Adobe Edge Preview - volby editoru v menu časové osy

Budoucnost editoru

Adobe Edge je navržený pro tvorbu animovaného obsahu prakticky pro libovolné jednodušší animované webové projekty pro desktopy i mobilní zařízení, jedinou (ovšem zásadní) podmínkou je vhodný webový prohlížeč na cílovém zařízení. Jako ukázka toho, že to Adobe myslí s HTML5 a CSS3 opravdu vážně, poslouží The Expressive web.

Adobe Edge by měl v budoucnu doplnit mezeru mezi editory Flash animací v čele s Adobe Flash a relativně pomalu se vyvíjejícími aplikacemi pro přípravu a editaci animovaného či multimediálního obsahu v rámci možností HTML5, CSS3 a JavaScriptu, přičemž Edge v podstatě zastupuje i některé speciální funkce editorů webových stránek – v Edge totiž bude možné otevírat běžné webové stránky včetně dokumentů s „CSS“ animacemi vyrobenými v Adobe Dreamweaveru a doplnit do nich animované objekty.