Shop Mobile More Submit  Join Login
×
20 Purchase Purchased Download Purchase Soon
699 KB ZIP File. Includes SVG
View Attachments
Tutorial Clouds 4 Interactive.svg
3.8 MB
Add Your Rating! Thanks for Rating! Change Your Rating
Download SVG download, 3.8 MB




Details

Submitted on
September 24, 2012
File Size
3.8 MB
Submitted with
Sta.sh
Link
Thumb
Embed

Stats

Views
5,626
Favourites
104 (who?)
Comments
35
Downloads
1,858
×
Tumblr Tutorial 5: Clouds (Interactive) by MisterAibo Tumblr Tutorial 5: Clouds (Interactive) by MisterAibo
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

:bulletred: 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".
:bulletblue: Solution: using javascript instead, but ecmascript is much less complicated when it comes to the things I usually need.

:bulletred: 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.
:bulletblue: 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.

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

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

:bulletred: The interface could use some cleanup. It looks like it was made in 1990s.
:bulletblue: 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
Add a Comment:
 
:iconsistemx:
sistemx Featured By Owner Apr 24, 2013
shape = document.getElementsByTagName("svg")[0];
shape.setAttribute("viewBox", "-7000 -7000 9500 8050");shape.setAttribute("width","9000px");shape.setAttribute("height","9000px");

!!!
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 24, 2013
Well, yes. How did you think it worked? It's a bloody large image. :)
Reply
:iconshynelight:
ShyneLight Featured By Owner Feb 22, 2013  Student General Artist
Click download file to receive Joy!

HarHarHar!
Reply
:iconmeldoymoon:
meldoymoon Featured By Owner Jan 10, 2013  Hobbyist Digital Artist
I wish I could bye this
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Jan 10, 2013
Technically, you don't need to. The premium SVG is just a way for me to make a few points on the side - the file is identical to the regular download.
Reply
:icondarkdragon774:
DarkDragon774 Featured By Owner Dec 27, 2012  Hobbyist General Artist
:o My word, this makes so much more sense and things so much easier!
Thank you for this amazing tutorial!
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Dec 27, 2012
No problem. I always enjoy sharing knowledge.
Reply
:iconsoren-the-owl:
Soren-the-Owl Featured By Owner Dec 15, 2012  Hobbyist Digital Artist
for some reason, i cant find the shape option called "from clipboard"
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Dec 15, 2012
Can you see the other shape styles? Triangle in, triangle out? Do you actually have some shape in the clipboard? Can you send me a snapshot?
Reply
:iconsoren-the-owl:
Soren-the-Owl Featured By Owner Dec 15, 2012  Hobbyist Digital Artist
i dont see a shape option on inkscape

[link]
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Dec 15, 2012
You have to use one of the tools - like the curve tool. Then, the shape option will be located in their context menu like so: [link]
Reply
:iconsoren-the-owl:
Soren-the-Owl Featured By Owner Dec 15, 2012  Hobbyist Digital Artist
Do'h

/)_-) silly me.... thanks a lot haha
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Dec 15, 2012
No problem - have fun with inkscape. It's always nice knowing something new, isn't it? :)
Reply
:iconsoren-the-owl:
Soren-the-Owl Featured By Owner Dec 15, 2012  Hobbyist Digital Artist
hahah indeed! i just need 1 more vector to actually be a member of the club haha. i have gotten 3 accepted into their folders ^_^
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Dec 15, 2012
That's nice. Back when I started, they didn't have these rules. It was just a small group that had a few members. Sometimes, I miss those days. :)
Reply
(1 Reply)
:iconpoison--hearts:
Poison--Hearts Featured By Owner Oct 1, 2012  Professional Filmographer
Hey I remember you :D I still appreciate that little fix you did with me.. still have never had that happen again. Also nice tutorial. Its weird, Adobe AI is a lot different Than Inkscape. I Enjoyed looking through all of it though. ^^
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Oct 2, 2012
Sure there are different, but they both have their merits. It's just a question of which one you prefer.
Reply
:iconwarhammeristka:
Warhammeristka Featured By Owner Sep 25, 2012  Student General Artist
Thank
Reply
:iconwarhammeristka:
Warhammeristka Featured By Owner Sep 25, 2012  Student General Artist
Спасибо,а урок по рисованию облаков очень понравился. Жаль у меня нет этой программы:#1:
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Sep 25, 2012
I'm glad you liked it. You can actually download inkscape for free, so there's no reason not to try making a few vectors like that yourself. It might even be available in your language.

I actually find drawing clouds really relaxing. :)
Reply
:iconwarhammeristka:
Warhammeristka Featured By Owner Sep 25, 2012  Student General Artist
Я из России,и плохо говорю на вашем языке
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Sep 25, 2012
Well, English isn't my first language either, so I understand. :)
Reply
:iconwarhammeristka:
Warhammeristka Featured By Owner Sep 25, 2012  Student General Artist
Thank
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Sep 25, 2012
Welcome
Reply
:icontamalesyatole:
tamalesyatole Featured By Owner Sep 24, 2012  Hobbyist General Artist
That was really informative! I would repeat what ZuTheSkunk just said but that would be redundant. The only disadvantage I can think of, is that I would need to draw and copy a different Shape every time I need a different stroke thickness. Never mind. This is incredibly far more useful to do the streaks on wood.

And I personally prefer the "Long Picture" format in a tutorial, so I can easily go back with a few PgUp presses
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Sep 24, 2012
I'm kinda toying with both, but this format can allow me utilise things like optional examples, branching tutorials and less confining format. I'm currently working on a way to implement keyboard controls - with arrows - which would make things much more useful. Longer tutorials would probably include a "scene list" like DVDs, or maybe thematic chapters. If I'm able to use all of the above, this should be better than the stripes.
Reply
:iconmattyhex:
mattyhex Featured By Owner Sep 24, 2012  Hobbyist Digital Artist
I'm impressed, and I must say all the animations were smooth for me (on Opera,) but then my computer is pretty powerful.

I'm not aware of any differences between ECMAScript and JS, as far as I'm aware (and tried) JS is ECMAScript - and this idea that you can't capture keyboard actions is incorrect, I've got an SVG file to do that (you can find it here, it does use a third party lib, but it captures keyboard input.) And I'd recommend using a counter to denote which 'frame' the user is on, rather then pulling that from the event ID.

Are you using some form of program to make your animations in? I do want to do more, I just hate having to deal with straight XML and guesswork to figure everything out.

I also learned about making clouds efficiently, go figure.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Sep 24, 2012
Well, I'm not really sure, but some of the syntax is a bit different. From what I can gather, ECMAScript is a bit like cut down version of JScript, but a bit more useful. For instance, the handling of events - like I use for the navigation - is simpler to do than the JS catching one would have to do. I'll think about the lib, but really, I like to do these things myself. I like to know what makes them tick.

I make the animations in the XML, so you're out of luck. But there's no guesswork included - I used a simple 600x800 rectangle as a viewbox base, grouped and moved around its group duplicates to the positions I'd like the camera to go through. That gave me the translation coordinates I then used in the animations. The active parts of the buttons are just duplicates of the circles, which weren't hard to make either. The only thing I didn't expect was that the group itself can't be clicked - you can see the remnants of the IDs in the code.

As for a frame global variable, I thought about it, but... well, this seemed more natural to me. I guess if you made it your way, you'd only have to make the interface once - one button to increase the ticker, one to decrease. And once for the last frame. Which makes more sense when I look at it... But then, you would have to include a way to work go back. You can't simply call the animation in reverse, so it would have to be something like odd numbers for back, even for forward, increase by two when forward, decrease by one, animating and decreasing by one when going back. I'll use that next time. (Self-brainstorm is the best.) Thanks for the tip.

Why don't you like XML? It's really well structured...
Reply
:iconmattyhex:
mattyhex Featured By Owner Sep 24, 2012  Hobbyist Digital Artist
The easiest way that I can think of is to write either one or two functions, a way to increment the counter and a way to decrement it. When you increment it you play the forward animation, say "0_to_1" - could be coded as:
getElementById(counter + "_to_" + ++counter);
and when you decrement it you play the reverse, "1_to_0" - similarly:
getElementById(counter + "_to_" + --counter);.
Of course you'd still have to write each animation like you have now, but the only things you have to look out for are when the counter reaches 0 and the total number of animations available. Doing such condition checking would probably lead to code along the lines of:
function getAnimId(increment) {
 if(increment) {
  return "anim_" + counter + "_to_" + ((counter + 1 > FRAMES) ? counter = 0 : ++counter);
 } else {
  return "anim_" + counter + "_to_" + ((counter - 1 < 0) ? counter = FRAMES : --counter);
 }
}

(That code works on Opera, I can't guarantee anything else though.) Where FRAMES is specified somewhere as the total available animations.

I do like XML, it's a really nice way to pass data around. It's just that when making things happen visually, a GUI would make life so much easier (I still hope one day to make this happen.)
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Sep 24, 2012
I know how to write it. It'd probably work even with this naming convention, since the animation IDs are animation_(current)_to_(+1 for forward or -1 for back).

And yeah, I have to make the animations. Sadly, there is no real way to pause an animation (unless you'd want to change its duration to a million years, in which case it would slow down so much nobody would notice). But that's not really a good solution, since you can't reverse the animation at all.

Just like I said - making it like this (incremental/decremental) would save me time with the interface.
Reply
:iconzutheskunk:
ZuTheSkunk Featured By Owner Sep 24, 2012
Oooh, I didn't know about the curve tool. This will prove useful! Thanks a lot for the tutorial, it was quite impressively done. :)

One thing though, I noticed two typos in the text, both happening when he's inside the building: "drawimg" and "cuves".
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Sep 24, 2012
Thank you - I actually found out when I was examining one of #MLP-SVG-Resources' submissions of a cloud. I'll try to fix the typos later. (It's kinda painful - opening the thing in inkscape can delete the scripting.)
Reply
Add a Comment: