HOME | DD

Description
Download the SVG for the tutorial.
Should work on pretty much anything expect IE. I advise using Chrome.

The file is a bit larger than you would expect. Since there is no loading bar, you might have to wait a few moments, depending on your connection.

This tutorial is a part of my Ask the Professor Tumblr weblog. You should probably take a look there if this interests you.

Any thoughts on this are appreciated, as always.

--- Note
I actually have a half-finished fully interactive cloud - you click an object, it shows you outlines, gradients, nodes and all of the other useful things. I might finish it if people would like me to.

--- Idea
I really wanted to try out animated interactive SVG as a presentation platform to use in school. I was also doing some research into viewBox, which works as a "camera" of sorts. Moreover, the tumblr has some problem with wide images. I wouldn't want people to have to use the scroll bar.
One last thing was that while most of my tutorials go from top to bottom, this one turned out going the other way. Which is pretty hard to do unless you want to pull the whole "read from bottom to top!" thing. Which I don't.

--- Technical
The basic image looks like you would expect it to. Open it in inkscape to see the whole thing. The transitions are made by animations, which change the viewBox attribute through time. This allows the image's point of view to shift, even zoom in and out. Each animation is triggered by clicking the button, which calls an ecmascript (kinda like javascript, much easier to use, less options though) function that uses the even's id as a clue to which animation should be started. Since the animation uses freeze fill and other animations go from same viewBox position, you won't notice the animation's end.

--- Thoughts for next time

ecmascript is somewhat limiting, so I can't - for instance - have the tutorial work with keyboard keys for navigation. Also, I adress a frame directly by doing something like "tutorial.svg#chapter9".
Solution: using javascript instead, but ecmascript is much less complicated when it comes to the things I usually need.

The transition animation seems to be a bit jerky on Opera and Firefox. This is probably because of the splines I use instead of linear timing.
Solution: don't use splines. But I just really like the feeling it has. Not to mention that linear timing actually jerked a bit in Chrome. Peculiar.

The few (two) bitmaps that are included jerk during the transitions as well.
Solution: try not to use bitmaps. Vector the whole of inkscape interface in future.

For an "interactive" SVG, this one is not that interactive. It's basically just a presentation front-end.
Solution: stop being a lazy bastard and make something spectacular. (Will do in the animated tutorial about animation.)

The interface could use some cleanup. It looks like it was made in 1990s.
Solution: stop being a lazy bastard.

--- Premium Content
The premium content includes the same SVG as the download. By paying for the premium, however, you would support my other animation/interaction/tutorial endeavours. For which, I would be eternally grateful. It's not that much anyway.

--- Time taken
Image: 2 hours
Text: 1 hour
Interface and animation: 4 hours
Debugging: 2 hours

Description
Download the SVG for the tutorial.
Should work on pretty much anything expect IE. I advise using Chrome.

The file is a bit larger than you would expect. Since there is no loading bar, you might have to wait a few moments, depending on your connection.

This tutorial is a part of my Ask the Professor Tumblr weblog. You should probably take a look there if this interests you.

Any thoughts on this are appreciated, as always.

--- Note
I actually have a half-finished fully interactive cloud - you click an object, it shows you outlines, gradients, nodes and all of the other useful things. I might finish it if people would like me to.

--- Idea
I really wanted to try out animated interactive SVG as a presentation platform to use in school. I was also doing some research into viewBox, which works as a "camera" of sorts. Moreover, the tumblr has some problem with wide images. I wouldn't want people to have to use the scroll bar.
One last thing was that while most of my tutorials go from top to bottom, this one turned out going the other way. Which is pretty hard to do unless you want to pull the whole "read from bottom to top!" thing. Which I don't.

--- Technical
The basic image looks like you would expect it to. Open it in inkscape to see the whole thing. The transitions are made by animations, which change the viewBox attribute through time. This allows the image's point of view to shift, even zoom in and out. Each animation is triggered by clicking the button, which calls an ecmascript (kinda like javascript, much easier to use, less options though) function that uses the even's id as a clue to which animation should be started. Since the animation uses freeze fill and other animations go from same viewBox position, you won't notice the animation's end.

--- Thoughts for next time

ecmascript is somewhat limiting, so I can't - for instance - have the tutorial work with keyboard keys for navigation. Also, I adress a frame directly by doing something like "tutorial.svg#chapter9".
Solution: using javascript instead, but ecmascript is much less complicated when it comes to the things I usually need.

The transition animation seems to be a bit jerky on Opera and Firefox. This is probably because of the splines I use instead of linear timing.
Solution: don't use splines. But I just really like the feeling it has. Not to mention that linear timing actually jerked a bit in Chrome. Peculiar.

The few (two) bitmaps that are included jerk during the transitions as well.
Solution: try not to use bitmaps. Vector the whole of inkscape interface in future.

For an "interactive" SVG, this one is not that interactive. It's basically just a presentation front-end.
Solution: stop being a lazy bastard and make something spectacular. (Will do in the animated tutorial about animation.)

The interface could use some cleanup. It looks like it was made in 1990s.
Solution: stop being a lazy bastard.

--- Premium Content
The premium content includes the same SVG as the download. By paying for the premium, however, you would support my other animation/interaction/tutorial endeavours. For which, I would be eternally grateful. It's not that much anyway.

--- Time taken
Image: 2 hours
Text: 1 hour
Interface and animation: 4 hours
Debugging: 2 hours