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

Dojde-li ve vektorové grafice na složitější kresby nebo animace, bez kvalitních vizuálních editorů se neobejdeme. Nehledě na fakt, že vizuální nástroje mohou zpřístupnit tvorbu SVG grafiky daleko širšímu okruhu neprogramátorů - stejně jako kdysi Flash zpřístupnil tuto oblast celé grafické komunitě.

Přehled aplikací

Takže, jaké nástroje máme na skladě? Výdejka by mohla vypadat zhruba takto:

Statická grafika

Programy z této skupiny exportují SVG ve vysoké kvalitě:

• Adobe Illustrator 10+: http://www.adobe.com/products/illustrator/
• Corel Draw 11+: http://www.corel.com/
• Microsoft Visio: http://office.microsoft.com/visio/

Nativní editory:

• Inkscape 0.43: http://www.inkscape.org/
• Sketsa 3.3: http://www.kiyut.com/products/sketsa/

Animace

• Beatware Mobile Designer 2: http://www.beatware.com/products/md.html
• XStream RapidSVG 2: http://www.xstreamsoftware.com/rapidsvgprof_description.htm
• Ikivo Animator 1.1: http://www.ikivo.com/animator/

Dodávám, že uvedený výčet si neklade nárok na úplnost. Obsahuje jen projekty, které za poslední rok prodělaly nějaký vývoj.

Podpora standardu SVG 1.1

V tuto chvíli už se nemusíte děsit, že bych vás zahrnoval technickými detaily. Dále budeme pokračovat spíše v oddechovém tempu a podíváme se na ty nejzajímavější aplikace z uživatelského hlediska.

Ikivo Animator 1.1

V podstatě velmi jednoduchý a minimalistický software stoprocentně naplňuje pořekadlo "klame tělem". Jeho schopnosti totiž v některých ohledech přesahují všechny konkurenty.

Pracovní plocha programu Animator

Mimochodem, Ikivo je především velký dodavatel SVG přehrávačů pro výrobce mobilních telefonů. Animator tak pravděpodobně vznikl hlavně z nutnosti nabídnout zákazníkům i vhodný nástroj pro tvorbu grafického obsahu.

V počátcích "mobilní" implementace SVG neexistoval žádný animační nástroj schopný reálného produkčního nasazení. Byly pouze velké programy typu Illustrator či Corel, které nejenže postrádaly dynamiku, navíc ještě generovaly komplexní kód v plném rozsahu SVG Full. A ten byl pro mobilní telefonii (MMS...) samozřejmě nepoužitelný.

Práce s programem

Tento produkt je netypický mimo jiné tím, že vůbec neobsahuje kreslicí nástroje. Vytváření grafiky ponechává plně v kompetenci externího vektorového editoru.

Na první pohled se tento fakt projevuje absencí palet s příslušnými nástroji - náhradou za ně je paletka obsahující připravené vektorové prvky. Na této paletě můžete vložit objekty do animované scény, vytvářet nové SVG objekty či hotové objekty předávat do externího SVG editoru k úpravám.

Paleta pro vkládání a úpravy objektů

Programáři si využitím externího grafického programu dokonale uvolnili ruce k tomu podstatnému - animačnímu procesu. A je nutno říci, že na výsledku je to znát. Animační nástroje a postupy v některých ohledech svou příjemností a přirozeností překonávají i dobře známý Flash.

Ve firmě Ikivo stvořili praktický, z hlediska uživatele velice snadno pochopitelný a zvládnutelný nástroj. Ten umožňuje pracovat stejně jednoduše a intuitivně jak ve standardní dvourozměrné kreslicí ploše, tak i se "čtvrtým" rozměrem - časem.

Externí grafický editor

Ačkoliv Ikivo v současnosti hodně spolupracuje s Adobe a doporučuje samozřejmě Illustrator, stejně dobře, možná lépe, nám mohou posloužit i další editory SVG typu Inkscape či Sketsa.

Tyto editory mají oproti AI výhodu v tom, že SVG je jejich přirozeným formátem. Illustrator je sice špičkový a spolehlivý software, nicméně jisté specifické vlastnosti SVG standardu neumí.

Každopádně je třeba ukládat grafiku formátovanou pokud možno pomocí prezentačních atributů - bez využití CSS.

Nastavení exportu SVG v Illustratoru

Docela dobře lze použít OSS Inkscape. Je nejen volně dostupným nativním editorem vektorové grafiky, ale navíc je i poměrně uživatelsky příjemným nástrojem s relativním dostatkem funkcí.

Práce v editoru Inkscape

Standardně program přidává do SVG-XML kódu své vlastní pomocné prvky, proto je dobré ukládat grafiku pro web následujícím způsobem:

SVG je nutno uložit jako typ "Plain"

Import SVG

Animatoru neznámé konstrukce budou při importu grafiky bohužel většinou ztraceny.

Když jsem poprvé zkoušel něco vytvářet v Animatoru, měl jsem pocit, že si budu muset postupně vytvořit každý grafický objekt, všechna grafická primitiva. Není tomu tak. Je dokonce možné vytvořit celou animační scénu - včetně pohyblivých prvků - najednou v externím editoru a následně ji přímo otevřít klasickou cestou pomocí nabídky "File/Open".

Animator nám dovolí jít dovnitř struktury importovaných SVG dat a měnit jednotlivé elementární prvky podle potřeby.
K tomu účelu je vhodné si grafické objekty seskupit a důležité objekty názorně pojmenovat.

Pojmenování prvků v Inkscape provedeme přímou editací atributů "id" v XML editoru

Testovací příklad

Vymyslel jsem si jednoduchou animační úlohu, kterou jsem následně v recenzovaných programech zkusil realizovat.

Výsledný pohyblivý obraz bude obsahovat tři kroužící barevná světla. Pro simulaci světelných efektů využiji barvové přechody, jejichž možnosti jsou podle standardu SVG poněkud větší, než je v současných grafických programech běžným zvykem.

Pro oživení podle možností ještě zkusím dodat změnu jejich velikosti (simulace problikávání).

Kódování, nebo?

Nedávno jsem četl kdesi na síti úvahu na věčně zelené téma: Čistě kódovaný versus designově krásný web s kódem plným zbytečného balastu. Autor používal krásné anglické termíny "coders" versus "clickers"...

No, a právě ti "klikeři" se mohou dokonale s Animatorem vyřádit. Budu se opakovat, ale stejně - pohodlnost a přirozenost práce ve všech třech rozměrech překonává zcela jistě i populární Flash. Jsem si jist, že i vynaložené úsilí potřebné ke zvládnutí základních animačních technik je nižší.

Píši to při plném vědomí, přestože je mi jasné, že se teď budu muset dlouho schovávat před vyznavači zmíněného kultu.
Pointa toho všeho ale je, že ve výsledku z Animatoru vypadne standardní SVG-SMIL kód, který není nijak významně zatížen zbytečnými kódovými konstrukcemi. A samozřejmě - žádné skripty, pouze SMIL.

Zde vidíte příklad kódu jedné animační fáze:

<animateMotion begin="2" dur="1" fill="freeze"
 path="M-4.14705e-05 67 C-29.97 67 -55.5 50.2459 -55.5 33.5 "/>

Díky spolupráci firem Adobe a Ikivo byla vylepšena integrace Animatoru a vizuálního webového editoru GoLive. Posledně jmenovaný editor je minimálně srovnatelný s u nás lépe známým editorem DreamWeawer a je schopen generovat docela kvalitní a čistý XML kód. (Prostě pastva pro "klikery".)

Změny oproti verzi 1.0 a problémy

Krom toho, že Animator je konečně dostupný i pro platformu MAC OS X, dochází k přechodu na standard SVG Tiny 1.2.

Při testování pokročilejších vlastností Animatoru jsem ve volně dostupné demoverzi programu (verze 1.1.0.24a) narazil na poměrně zásadní problém, spočívající v nesprávné kontrole vstupního SVG dokumentu.

Animator totiž při otvírání a vkládání SVG grafiky provádí kontrolu, zda všechny grafické elementy odpovídají vhodnému profilu SVG normy. Ty pokročilejší z podmnožin SVG Basic či dokonce SVG Full jsou odstraněny.

Vše je samozřejmě naprosto v pořádku, háček je však v tom, že verze Animatoru 1.0 byla naprogramována pro práci s SVG Tiny 1.1. Zatímco verze 1.1 je už evidentně připravena pro normu SVG Tiny 1.2. Důkazem může být především schopnost animace barvových přechodů - ty totiž nepatří do subsetu SVG Tiny 1.1, zatímco v SVG Tiny 1.2 jsou již obsaženy.

Testovaná demoverze tedy byla pravděpodobně trochu uspěchána a nedostatečně otestována. Při otvírání grafik s barvovými přechody se objeví varovné hlášení a příslušné prvky jsou ignorovány - viz obrázek.

Varování při otevírání souboru s nepodporovanými prvky

Animator bude muset v budoucnosti pravděpodobně nabízet uživateli, aby si vybral, s kterým profilem chce pracovat.

Jelikož barvové gradienty představují velký pokrok v kreativních možnostech - kterých jsem se v demonstračním příkladu rozhodně nechtěl vzdát - rozhodl jsem se upravit původní grafiku, odstranit z ní přechody a vytvořit je následně až v Animatoru.

Dalším problémem je bohužel i to, že Inkscape ukládá parametry grafiky většinou nikoliv pomocí prezentačních atributů, nýbrž do atributu "style". Standard SVG Tiny CSS formátování rovněž nepodporuje.

Vytváření animací

Pokud chce uživatel vytvořit animaci, tedy měnit nějakou vlastnost grafiky v čase, přidá nejdříve na časové ose k příslušnému parametru grafiky (fill, scale,...) klíčový bod (keypoint). Ostatně to není žádné překvapení, všechny animační nástroje, počínaje známým Flashem, to dělají velmi podobně.

Dále už vše probíhá velmi snadno - postačí posunout se po časové ose a změnit parametr. Klíčové body už jsou pak vytvářeny automaticky. Včetně toho, co je ve Flashi nazýváno "tweening".

Plusy

Silnou zbraní Animatoru jsou polohové změny - tedy pohyb. Při změně souřadnic se vytvářejí pohybové křivky, na které se můžeme dívat tak, že jsou vlastně jakousi pohybovou pamětí. Ovšem to nejlepší teprve přijde, když zjistíte, že s těmito křivkami můžete pracovat stejně pohodlně jako třeba s obyčejnými křivkami v Illustratoru.

Ikivo má absolutně nejlepší práci i ve třetím rozměru - se všemi klíčovými body lze velmi pohodlně pracovat, posunovat, kopírovat... Včetně možnosti označit celou skupinu "key points" a pracovat s ní jako s celkem.

Pomocí paletky "Pacing" komfortně měníte časový průběh zrychlení pohybu.

Automatické převádění pohybu na "křivkové" animace má i svou stinnou stránku. Animace typu "animateMotion" jsou sice nejbližší přirozenému chování objektů, na druhou stranu lze najít případy, kdy by postačilo použít jednodušší prvky SVG-SMIL.

Jednoduchý kruhový pohyb v našem demonstračním příkladu by se například dal převést na dvě animace atributů X a Y.

Simulace na mobilním telefonu

Ikivo nabízí také reálnou simulaci "jedna ku jedné" na mobilních telefonech. To je umožněno i tím, že firma mnoha výrobcům telefonů dodává software a náhled (Preview) je vykreslován identickým softwarem jako ve skutečném mobilu.

Nedostatky

Největším nedostatkem Animatoru v současné verzi 1.1 zůstává chybějící interaktivita. Ta je omezena na prosté hyperlinky. SMIL animace obsažené v normě SVG Tiny přitom obsahují definici automatické reakce na události typu "onmouseover" či třeba spouštění animace v návaznosti na průběh jiných animací.

Dost mi chyběla také možnost zacyklení animačních fází. Takže i zde vidím velký prostor pro vylepšování.

Je trochu škoda, že při importu "cizích" animací, obsahujících atributy Animatoru neznámé, dojde k jejich úplnému zahození. Daleko prospěšnější by zcela jistě bylo jejich naimportování s ignorací jen těch "cizích" atributů s příslušným varováním. Na chlup to samé ostatně platí pro import grafických prvků.

Výsledek příkladu

Poté, co jsem obešel problém s importem přechodů z Inkscape, byla realizace příkladu otázkou malé chvíle. Zůstal ovšem problém s nastavením počtu opakování, což lze částečně řešit kopírováním patřičné animační fáze. To jde Animatoru naopak moc dobře.

Příště…

V příštím pokračování je na řadě těžká váha. Podíváme se totiž na další dva špičkové animační nástroje: Mobile Designer 2 a RapidSVG 2.