A rudimentary SVG animation of Twilight's teleportation. This one is actually frame-based instead of time based. It's because the thing is a bit too complicated to reasonably interpolate through. I could probably get back to it later if I have the time - this seems like heresy.I looked into the whole APNG business to save my animations better, but I'm afraid dA doesn't support it.The SVG has the same speed, 20 frames per second.

Use at your leisure. The file was validated, so if your browser doesn't play it properly (that is once), there is probably something wrong on your side.

Actually, if you made it as an animated SVG, you could make it time-based. That way, you could make changes as you see fit (like if some gradients make the color scheme iffy), as well as export it in any frame rate you want. I do my stuff that way - SVG animation isn't that hard to comprehend and you can use Adasek's Firefox addon to render the images without much of a problem.

I have read the article you pointed me, and hun, I don't know how you achieve this. SVG was concieved for the most simple things. I bet that you could achieve wonders with regular Flash and a simple Wacom. I almost fainted when I saw all the scripting that SVG animation requires.

SVG might have been made for different things, but its powerful and versatile. And to a person that can't draw but isn't afraid of coding, better, I think. Because flash has the worst syntax ever. Not to mention that flash is slowly going out of commission.The animation in SVG is just the question of few lines of code anyway - I can't say that much for flash.Plus the options you get with SVG are enormous - starting with seamless integration into websites and ending with full-on interactivity. And it's all open and sweet.

Thanks. I still want to know how you did it. Because once I actually found out how, making it was a thing of minutes. And I don't blame you for for thinking it'd be too complicated - after all, I swamped you with things like using algebra to solve the issue. But I guess I can never fear something that's so damn interesting...

Yeah, it's just like normal frame-based animation, really. I'll probably make an "honest" version that's not this lazy, but I just wanted to mirror the effect for the time and needed some stills anyway.And I still with flash wasn't ineffective, closed and silly. And I wish the code was actually readable to some degree. Good thing it's dying out. Slowly.

I like flash as an animation tool, also if it has a lot of faults (currently fighting with the bone tool). As a format with a player plugin however it has become really unnecessary, as svg can do the same things. But as long as there is no good animation tool for svg I don't think flash will die out.

And the frame version works really well. Of course an "honest" version would be at the very least 20% cooler, but I guess it will be really complicated.

Actually, it's pretty neat to be making the animation by code for me. I've been working with XML-based technologies for a while and once you get the hang of some basic tricks, it's as fast as drawing a base, changing some curves and add a few lines.Rudimentary animation that only involves transformation (rotation, translation, skewing and scaling) is not only easy to do but looks surprisingly fluid. Plus you can manage timing with javascript which can make the whole thing interactive as well.The only downside I see is that you can't encrypt the code in any way, so if you go with interactivity, you have to give the user your SVG as well.I don't think an honest version would be that much of a problem - it's just the question of finding a functional and creative solution that's relatively simple.Flash still reaps from the fact that it was first and that the company backing it up is loaded. But more and more modern pieces of technology cease to support it. With HTML5's video tag, the flash plugin for videos could become obsolete. As soon as the browser developers can settle on a single codec to use. But flash has no future any more.

You're right, I just realized that SVG can do path morphing, that could make making the honest version much simpler.

However I think we will still see a lot of flash things in the web for a few years. Surely the video tag will get us youtube&co. without flash, and the many other HTML5 features like the file API (or in general all these shiny new APIs for just about everything) will remove the need for most other current flash uses.However despite the fact that I haven't seen any flash game lately that couldn't have been done in SVG with Javascript, I haven't seen any game using SVG in the last time. There are simply so many flash developers and way to few javascript developers skilled in that area.Sure, it almost seems like Adobe has give up on the mobile market, but at the same time they are introducing awesome things for the desktop market (like 3d capability, as rudimentary as it may be right now, or inverse kinematics, which are simply awesome for animation if you get around their limitations, or the capability to make peer-to-peer video telephony in flash, or encrypted video transfer). And even if they would loose the whole browser market, which I wouldn't predict for this decade, they would still have the whole animation industry (I mean, MLP isn't the only show made in Flash)

Actually, SVG has had 3d since its inception. It's just that inkscape can't edit it. So in the end, you suffer from the same problem like with the animation - there isn't any good editor to do it in. The tech is there, the tools are not.If there actually was a company that would rise up to the challenge, this would definitely be a great investment.

Yes, we definitely need some company to create some flash equivalent SVG editor. Let's just hope that doesn't stay a dream.Or maybe Adobe sees reason and implements an export to SVG with full features into a future version of Flash.

Well this was not the method I was anticipating, ill give you that much. Interesting tutorial, I'll keep my eyes open for the inkscape animation one. That one might peak my interest enough to try it out. Thanks for the heads up though

SVG vectors are the code. If you open an SVG file, you'll see an HTML-like structure with tags and whatnot. It's just the question of changing the appropriate object's names through the inkscape's code editor so you can find them quicker. Of course making the paths by hand is unreasonable.