SVG animatie maken + illustrator CS5 vraagje

[ottovds]

Mijn vraag gaat over het volgende ontwerp in progress:


link: http://www.ottovelo.com/web/PreviewVoorontwerp.svg
(button-layout is nog lang niet af, maar daar gaat het nu niet om... Gelieve men idee en dus copyright te respecteren.)


vraag 1: Momenteel is het kaartbeeld opgebouwd uit een heleboel horizontale lijnen, die dan onder een masker zijn geplaatst via "compound path". Hoe kan ik dit beeld vereenvoudigen zodat de lijnen zowaar worden uitgesneden, en er geen masker meer nodig is?


vraag 2: Als ik dan alle lijnen heb was mijn plan van de kaart zowaar te laten samenvouwen tot een soort van hoogte-profiel via een zeer korte semi-3D animatie. (om flash te vermijden via preloaded SVG, javascript en andere technieken die er hier nu niet toe doen)

Om deze animatie mogelijk te maken dacht ik:
- layer per layer in Adobe After Effects te steken (welk applicatie ik goed ken)
- de eenvoudige animatie daar maken
- screenshots maken
- beeld per beeld opnieuw opbouwen in illustrator, om ze dan is SVG op te slaan.
- de SVG beelden na elkaar afspelen in de browser via javascript.
- zelf een flash alternatief maken voor unsuported browers

Andere en betere mogelijkheid: (wat ik zelf technisch nog niet aankan, welk applicatie gebruik ik hier het best voor?)
- een svg animatie maken
- zorgen voor support in oudere browsers via http://code.google.com/p/svgweb/

Maar bestaat er geen eenvoudigere manier? Hoe zouden jullie het doen? Maak ik een denkfout?


PS: Vroeger studeerde ik voor multimediaal grafisch ontwerper, maar ik ben enige tijd geleden richting de fotografie gegaan. Mijn kennis heeft duidelijk wat opfrissing nodig nu ik aan een nieuwe website begin. Vooral door het fijt dat ik er de laatste keer ten tijde van CS3 mee werkte, en ik nu al CS5 heb.

PPS: Na zo lang niet ontworpen te hebben, wat vinden jullie van het basis-concept?

[mcDavid]

Je kunt in een SVG gewoon Javascript gebruiken, dus ook elementen dynamisch opbouwen of laten bewegen.

[ottovds]

mcDavid schreef op zondag 28 november 2010 @ 21:06:
Je kunt in een SVG gewoon Javascript gebruiken, dus ook elementen dynamisch opbouwen of laten bewegen.

Ja, dat wist ik al, en als je mijn 2de mogelijkheid had gelezen, had je dat ook geweten

Maar heb je al eens 300+ elementen moeten her-positioneren met javascript? Ik denk dat ik dan best toch wel iets van WYWYG editor wil hebben die met key-frames kan werken.

Why oh why heeft adobe de animatie opties van Photoshop ook niet in Illustrator gestoken?
(om zijn eigen flash niet de grond in te boren natuurlijk, maar goed)

Kent iemand zo'n editor?

[_Thanatos_]

SMIL toch gewoon? Kijk daar eens naar. Dat zijn event-based animaties die animeren tussen een soort (niet expliciete) keyframes.

Alleen SMIL zal niet in IE9 komen

[Splash]

Even globaal gesproken: het is bewonderenswaardig dat je flash wilt vermijden, maar het animeren van svg's is voorzover ik weet nog een tamelijk experimentele techniek. Je zult er dus op moeten rekenen dat het veel moeite zal kosten, en de tools nog niet beschikbaar, of erg primitief zijn.

Het enige lichtpuntje in de duisternis is misschien dat adobe in de volgende versie van flash ook export naar wat zij "html5" noemen wil gaan ondersteunen, dit zou wat jij wilt wel gemakkelijk mogelijk maken.

[_Thanatos_]

Die export naar "HTML5", wat uiteraard ook in XHTML en HTML4 past, is hoogstwaarschijnlijk canvas, en dat is een pixel-oriented tekenvlak, terwijl svg werkelijk vector-oriented is. Dat laatste rijmt natuurlijk beter met Illustrator, dus ik vind het op z'n zachtst gezegd raar dat Illustrator naar canvas zou exporteren.

Desalniettemin kun je zonder SMIL ook een statische SVG animeren, zolang je de SVG maar in de pagina insluit (met de <svg> tag). Je kunt dan met bijv jQuery animaties op de elementen in de svg loslaten, en er zijn zelfs jQuery-plugins die je daarbij helpen. Maar het is geen triviale klus.

[HawVer]

ottovds schreef op zondag 28 november 2010 @ 21:29:
[...]

Ja, dat wist ik al, en als je mijn 2de mogelijkheid had gelezen, had je dat ook geweten

Maar heb je al eens 300+ elementen moeten her-positioneren met javascript? Ik denk dat ik dan best toch wel iets van WYWYG editor wil hebben die met key-frames kan werken.

Why oh why heeft adobe de animatie opties van Photoshop ook niet in Illustrator gestoken?
(om zijn eigen flash niet de grond in te boren natuurlijk, maar goed)

Kent iemand zo'n editor?

Ik weet het niet, ik heb heel wat mogelijkheden van SVG onderzocht, maar er is geen enkel bedrijf die een fatsoenlijk, let op: en complete, implementatie heeft kunnen leveren van een SVG viewer, laat staan een editor er voor. Ik zou voor serieuze zaken (heb geen beeld van je afbeelding omdat ik hier geen SVG viewer heb) niet kiezen voor SVG omdat de viewers die animatie ondersteunen zeer teleurstellend (= slecht performen) zijn. Dat is mijn advies, je kan natuurlijk andere ervaringen hebben. Adobe is het dichts bij gekomen, alleen die hebben de support gedropt omdat ze Flash hebben overgekocht.