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í, Smile, Designer, Wizard, Button, Hidden, Adobe Flash, 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

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

** Herní hardware se od toho běžného často liší jen vzhledem ** Při výběru stále nezapomínejte na základní parametry ** Poradíme jak vybrat herní hardware i periferie

20.  2.  2017 | Stanislav Janů | 36

10 nejhorších produktů v historii Microsoftu

10 nejhorších produktů v historii Microsoftu

20.  2.  2017 | Karel Javůrek | 141

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

** AMD uvedlo první tři procesory Ryzen 7 ** Všechny budou pracovat s osmi jádry a šestnácti vlákny ** Na pulty obchodů se dostanou už za týden

22.  2.  2017 | Stanislav Janů | 134

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

** Evropští úředníci chtějí, aby byly Desítky transparentnější ** Microsoft od jara skutečně chystá změny ** Ochráncům soukromí to ale nestačí

21.  2.  2017 | Jakub Čížek | 219

Remix Singularity: Microsoft si na tom vylámal zuby. Jak dopadne Android?

Remix Singularity: Microsoft si na tom vylámal zuby. Jak dopadne Android?

** Microsoft do svých telefonů integroval desktopové prostředí ** Moc to ale nevyšlo, chyběl pořádný výkon ** Teď to zkoušejí ex-googleři s Remix Singularity

23.  2.  2017 | Jakub Čížek | 74


Aktuální číslo časopisu Computer

Supertéma o počítačové bezpečnosti

AMD Ryzen přichází

Velké testy kinoprojektorů a levných špuntových sluchátek

Příslušenství do USB-C

reklama
reklama