reklama

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

V minulých dílech jsem vám předvedl nejnovější pokroky v zobrazování vektorové grafiky ve formátu SVG-XML. A když už bylo řečeno A, dopovězme si nyní i B - podívejme se na novinky na poli vizuálních grafických editorů a animátorů.

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ě:

Nativní editory:

Animace

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

SVG Full 1.1
(všechny vlastnosti)
SVG Basic 1.1 SVG Tiny 1.1 Firefox 1.5, Camino 1 ASV3, Opera 9 Ikivo Animator 1.1 Mobile Designer 2 XStream Studio 2
vektorové objekty + +
+ + + + +
průhlednost "fill-opacity", "stroke-opacity" + -
+ + - + +
průhlednost "opacity" + +
+ + + + +
barvové přechody + - + + + + +
textury (pattern) + - - + - + +
"symbol" + -
+ + - + -
"use" + +
+ + - + -
ořezávání částečně
-
+ + - + +
maskování + - - + - + -
značky (marker) - -
- + - -
-
text umístěný na křivce, `tspan`, `tref` + -
- + - + +
filtry částečně
-
- + - + -
odkazy + + omezeně + + + + +
animace SVG-SMIL + + - + + + +
interaktivita SMIL + + - + - + +
CSS + -
+ + - -
+
skriptování volitelně
-
+ + - + +

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.

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

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.

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

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.

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

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

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

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:

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

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.

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

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.

Klepněte pro větší 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.

Témata článku: Software, Programování, Inkscape, Designer, Adobe Illustrator, Corel Draw, Marker

3 komentáře

Nejnovější komentáře

  • Petr Tomeš - ptomes@gmail.com 11. 5. 2006 19:55:53
    Jde mi o to, aby se porovnávalo srovnatelůné - aktuální vývojové verze...
  • marek 11. 5. 2006 11:46:35
    No, to sice presne nevim, ale mozna ze Opera je jiz v end-user pouzitelne...
  • Petr Tomeš - ptomes@gmail.com 11. 5. 2006 9:26:47
    Jaký racionální důvod vedl autora článku k srovnávání Firefoxi 1.5 a...
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 | 100

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

6.  12.  2016 | Jakub Čížek | 34

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ý | 145

11 tipů na dobrý stolní počítač: od základu po herní mašiny

11 tipů na dobrý stolní počítač: od základu po herní mašiny

** Postavte si stolní počítač! Máme pro vás 11 vzorových sestav s rozpisem komponent ** Většina tipů cílí na hráče, věnujeme se ale i základnímu PC a počítačům na střih videa ** Nadělte si nový počítač třeba pod stromeček

5.  12.  2016 | Adam Kahánek | 73


reklama