reklama

Vizuální editace a animace formátu SVG, 2. díl

Dnes se podíváme na další editor vektorové grafiky formátu SVG-XML. Mobile Designer 2 zvládá téměř celé spektrum schopností tohoto standardu.

Už jsem nejednou zmiňoval, že novou dynamiku do rozvoje v oblasti SVG vneslo šíření tohoto formátu do rostoucího a komerčně perspektivního sektoru mobilních zařízení.

V současnosti je tato technogie už z výroby zabudována do mnoha telefonů střední a vyšší třídy a využívána ve službách některých mobilních operátorů jako např. Vodafone nebo KDDI.

Nejtypičtějším produktem tohoto vývoje je další recenzovaný program. Slovíčko "mobilní" se dokonce objevilo i v jeho názvu. MD přináší pravděpodobně nejširší podporu standardu SVG.

Jako první umožnil práci s profily (SVGT, SVGB, ...), které umožnují charakterizovat grafické zařízení a nedovolí tak například designérům vkládat do obsahu prvky, které nejsou v konkrétním hardwaru implementovány.

Mobile Designer 2

Pokud o tomto programu budu psát s trochou nadsázky jako o SVG "Flashi", tak to bude pravda hned dvojím způsobem... Za prvé tento animátor nabízí obdobné možnosti. Za druhé se jeho tvůrci nechali inspirovat i uživatelským prostředím svého vzoru. Pokud jste si již někdy na Flash alespoň zlehka sáhli, budete se cítit jako doma.

Klepněte pro větší obrázek

Pracovní prostředí Mobile Designeru - kreslicího a animačního nástroje pro formát SVG

V podstatě shodný je i hierarchický systém editace. Například při poklepání na animovaný objekt vstoupíte jakoby do jeho "vnitřku", okolní objekty jsou potlačeny, aktivuje se lokální časová stopa daného objektu a nadále je možná editace prvků pouze uvnitř této skupiny.

Struktura výsledné prezentace

Byla převzata konvence a strukturní systém flashových animací, tedy: Movie (kořenový prvek) -> Scene (scéna) -> Symbol. Flash rozeznává dva druhy symbolů: "Movie clip" + "Button". MD tyto prvky nazývá "Animation" a "Button". Což je o něco logičtější, jelikož animace se v praxi vytvářejí vždy jako symboly.

Stejně jako ve Flashi je nad levým horním rohem kreslicí plochy zobrazována "cesta" od kořenového prvku až k právě editované úrovni. (S jedinou odlišností - nelze se dostat na vyšší úroveň klepnutím na některý z těchto zobrazených prvků.)

Každá z animací (klipů) rovněž má svou vlastní lokální časovou osu a v neposlední řadě se při jejich vkládání do scény vytváří jen tzv. instance (odkazy na zdrojový prvek - symbol - který tak v paměti zabírá místo pouze jednou). Mimochodem, tato schopnost zatím bohužel v konkurenčních produktech chybí.

Vytváření animací

Když jsem v recenzi Ikivo Animatoru chválil jeho způsob vytváření pohybových (motion) animací, tak to nebylo pouhé plácání do větru... Ani jinak špičkový MD jej v tomto směru nedokázal překonat.

Je to, mimo jiné, daň za snahu co nejvíce se podobat Flashi. Na jednu stranu taková podobnost možná může být přínosná z komerčního hlediska, na druhou stranu se zde projevuje prehistoričnost některých technik Flashe.

Přístup Designeru k pohybovým animacím je odlišný než v Animatoru - při "nahrávání" animací a ukládání klíčových bodů se vytvoří vždy přímočará stopa. Matematicky řečeno - trajektorie pohybu vznikne lineární interpolací rozdílu mezi souřadnicemi krajních polohových bodů.

K tomu, abychom dosáhli přirozeného a hladkého pohybu, využijeme nastavení pomocí funkce nazývané autory MD "Tweening wizard". (K dosažení téhož v Animatoru sloužilo přímé ovládání bézierových křivek.) Tento přístup při většině praktických úloh vyhovuje, ale onu eleganci konkurenta postrádá.

Klepněte pro větší obrázek

Detailní nastavení křivky a zrychlení pohybu

Omezení, aneb SVG kontra Flash

Inspirace Flashem má bohužel i některé stinné stránky.

Kupříkladu rozkouskování časové osy na jednotlivé snímky (frame), nutnost nastavování celkového počtu snímků v každém novém klipu atp. pociťuji - v kontrastu oproti možnostem SVG - za omezující, svazující a otravné...

Klepněte pro větší obrázek

Počet snímků v animací lze nastavit buď v políčku zcela vpravo nahoře nad časovou osou, nebo pomocí tzv. "Animation wizard"

V této souvislosti připomínám, že každý (!) jednotlivý animační prvek může mít podle standardu SVG libovolnou délku animačního cyklu (nezávislou na jakémkoli jiném prvku), libovolný (na ničem závislý) počet opakování, libovolný druh spouštění... To vše je realizovatelné, aniž by byl designér nucen vytvářet stále další a další animační klipy.

Naopak při pohledu z druhé strany představuje výborná výkonová optimalizace Flashového přehrávače silnou zbraň, která dle mého odhadu souvisí mimo jiné právě s  časováním založeným na snímcích (frame) a samozřejmě především s vnitřní reprezentací vektorových dat uvnitř souboru SWF. Tento přístup má ale i svůj rub a nepřináší při vytváření flashových prezentací jen výhody...

SVG oproti tomu používá (přirozený) čas. Troufám si prohlásit, že právě tohle je jeden z bodů, kde má navrch SVG-SMIL model. (Obzvláště při editaci komplikovanějších prezentací, kde se vyskytuje mnoho prvků, které na sebe např. mohou být všelijak časově navázané.)

SVG je založeno na robustním grafickém modelu, který zvládne všechny moderní grafické techniky. Daní za takové schopnosti je vyšší výkonová a paměťová náročnost - problém znásobený tím, že hodně prohlížečů je stále ve fázi vývoje a uprostřed snah o implementaci celého standardu - na nějakou optimalizaci zatím vývojové kapacity nejspíše nezbyly.

Trochu jsem odbočil, ale tohle všechno vysvětluji, abych ukázal, že snaha o připodobnění k Flashi sice má pravděpodobně komerční přínosy pro výrobce a zpřístupní lépe MD určité části uživatelů. Na druhou stranu ovšem tento přístup brání plnému využití výhod novější technologie.

Postup při vytváření animace

Poněkud detailněji si nyní probereme vytváření animace v MD - celý postup totiž není vůbec tak přímočarý a průhledný jako v Ikivo Animatoru. Obsahuje několik - pro nováčky - silně nelogických kroků, které právě souvisí se zmiňovanou snahou podobat se Flashi.

V prvním kroku otevřeme formulář "Animation wizard", ve kterém je nutno nastavit počet snímků v daném klipu. To je akce z hlediska SVG přebytečná, avšak nutná pro kompatibilitu s Flashem.

Dále vytváříme obvyklým způsobem jednotlivé klíčové body. Přitom platí, že MD nás - stejně jako Ikivo - nenutí otrocky vytvářet každý "keypoint" klikáním na ikonu klíče a poté na časovou osu. Prostě se posuneme na správné místo v čase a pak provedeme zamýšlené změny atributů - klíčové body se vytvoří plně automaticky.

V případě potřeby použijeme "Tween wizard" pro detailní nastavení pohybové křivky a průběhu zrychlení mezi klíčovými body. (Tento formulář se vyvolá klepnutím na název se symbolem zcela vlevo od zobrazení animace na časové ose.)

Můžete si prohlédnout výsledný kód našeho příkladu. XML výstup je kvalitní a dobře optimalizovaný:

<!-- Animation -->
<g id="Animation_red" opacity="0.7686">
 <path fill="url(#red_copy_fillgrad)"
  d="...">
  <animate attributeName="visibility"
   id="Animation_red_Segment"
   values="visible;hidden;visible;hidden;visible;visible"
   keyTimes="0;0.3;0.33;0.8;0.83;1"
   dur="1.5s" fill="freeze" repeatCount="indefinite"/>
  <animateTransform attributeName="transform" type="translate"
   begin="Animation_red_Segment.begin"
   values="..."
   keyTimes="..."
   dur="1.5s" fill="freeze" repeatCount="indefinite"/>
 </path>
</g>

Přidání interaktivity

Ačkoliv silný interaktivní model definovaný standardem SMIL umožňuje každému prvku typu "animate" reagovat na plné spektrum událostí, v Designeru je k tomu účelu nutno vytvořit speciální objekt nazývaný "button" (tlačítko) - jiným prvkům přiřadit reakci na události nelze.

Opět je tomu tak kvůli zachování zpětné kompatibility s Flashem.

Klepněte pro větší obrázek

V tomto dialogu definujeme akce které budou spuštěny pokud nastane konkrétní událost

Musím zmínit kvalitu výsledného kódu, který je přímo učebnicově dokonalý a využívá schopností SMIL na 100%. Například akce pro zobrazení scény č.1 se objeví ve výstupním souboru SVG takto.

<!-- Scenes Interactivity -->
<set id="Display-Scene_1" xlink:href="#Scene_1"
  attributeName="display" to="inline"
  begin="Button_1.mouseover"/>

Profily zařízení

Silnou stránkou Designeru je skvělá práce s profily grafických zařízení. Každý z těchto profilů obsahuje detailní informace o podporovaných vlastnostech. Údaje jsou následně využity při editaci a náhledech grafiky. MD disponuje navíc i komfortním editorem těchto profilů, takže nic nebrání tomu vytvořit si třeba profil Firefoxu...

Klepněte pro větší obrázek

Výborný editor grafických profilů

Když se podíváte, jaké že profily vlastně máte k dispozici, zjistíte že k nalezení je i Flash. Což nakonec není až tak překvapující, vzhledem k tomu nakolik detailně je převzata celá jeho filozofile.

Nechtěně jsem se tak nakonec stal prorokem. Kdysi dávno jsem v souvislosti s animačním nástrojem Adobe Live Motion vyjádřil své přesvědčení, že by se program mohl vydat právě touto komerčně schůdnou cestou - jedné aplikace exportující jak SWF tak i SVG. Nestalo se tak, vývoj Live Motion byl ukončen - a dnes už všichni víme proč. V Adobe ztratili trpělivost a rozhodli se, že si raději rovnou koupí celý Flash ;-)

Beatware tedy touto cestou kráčí a doufejme, že to bude ku prospěchu věci. Pojďme do budoucnosti.

Nadstandardní prvky

MD obsahuje krom jiných lahůdek superatraktivní knihovnu textových animačních efektů. Zdůrazňuji, že výsledkem je dokonale standardní a čistý kód SVG-SMIL.

Další vychytávkou je modul pro animované 3D efekty a dokonce i velice luxusně vypadající grafy.

Vstupenka do otevřeného světa XML

Na konec jsem si ponechal tu největší legraci - k dispozici je pokročilý modul pro automatizované generování grafiky z obecných XML dat. Pomocí vstupních údajů lze ovlivnit téměř všechny atributy grafiky.

Tato funkce překonává rozdílem jedné třídy např. i konkurenční produkt fy. Adobe. Společnost Beatware k tomu všemu nabízí serverové řešení.

Shrnutí

V současnosti bezkonkurenčně nejširší podpora formátu SVG Full a dalších otevřených standardů. Důležitý je i fakt, že veškerá interaktivita (například přepínání scén) je ve výsledném kódu velice čistě vygenerována jen pomocí prvků SVG-SMIL a bude tudíž fungovat i na nejméně výkonných zařízeních podle standardu SVG Tiny.

Plusem je taktéž přehledné uživatelské rozhraní a celkově inteligentní ovládání této aplikace.

Témata článku: Software, Programování, Wizard, Button, Hidden, Osu, Translate

1 komentář

Nejnovější komentáře

  • marek 18. 5. 2006 14:15:22
    Opravdu pekny clanek, ocenuju. Vice evangelismu SVG skutecne potrebuje...
reklama
Určitě si přečtěte

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

5.  12.  2016 | Jakub Čížek | 99

ASUS ZenBook 3 se začal prodávat v Česku. Je ve všem lepší než MacBook, ale bude to stačit?

ASUS ZenBook 3 se začal prodávat v Česku. Je ve všem lepší než MacBook, ale bude to stačit?

** Novinka od Asusu míří přímo proti MacBooku od Applu ** Nabídne daleko více výkonu za stejné peníze

2.  12.  2016 | David Polesný | 144

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

** Zmizí klasické vyhledávače ** Budeme programovat buňky ** Kvantové počítače překonají šifry

Včera | Jakub Čížek | 33


reklama