Shop Mobile More Submit  Join Login
×




Details

Submitted on
April 13, 2012
File Size
51.0 KB
Link
Thumb
Embed

Stats

Views
7,084
Favourites
184 (who?)
Comments
42
Downloads
460

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Share Alike 3.0 License.
×
Animation - Twilight's Teleportation by MisterAibo Animation - Twilight's Teleportation by MisterAibo
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.

Time taken: 1 hour
Add a Comment:
 
:iconlight3010:
light3010 Featured By Owner Feb 18, 2013
Hi! I used this animation for my video. [link]

Thanks so much! I couldn't done without this.
Reply
:iconwisheslotus:
WishesLotus Featured By Owner Feb 15, 2013  Student Digital Artist
How may I download this?
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Feb 15, 2013
You can download the GIF preview by right-clicking it and selecting "save image as" (or something similar) or you can do "save link as" on the "download file" button to save the original SVG.
Reply
:icontamalesyatole:
tamalesyatole Featured By Owner Jul 9, 2012  Hobbyist General Artist
I used your vector for a comic here [link] . Credit was given in the description.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Jul 10, 2012
It's pretty hilarious. You could probably get better results with the gif if you used flat colors instead of gradients. The palette would take that better.
Reply
:icontamalesyatole:
tamalesyatole Featured By Owner Jul 10, 2012  Hobbyist General Artist
Thanks for the suggestion. I'll try to do a frame-based animation (like that one ▲) the next time I want to do an animated comic. Or with flat colors in case I don't need blurry scenes.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Jul 10, 2012
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.
Reply
:iconchevrolet-evilimpala:
Chevrolet-Evilimpala Featured By Owner Jun 11, 2012  Student Digital Artist
twilight hits 88 mph?
Reply
:iconmasterofzoroark:
MasterOfZoroark Featured By Owner Apr 14, 2012  Student Digital Artist
This might come in handy for some vids I might do. Can I use this sometime?
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 14, 2012
Sure - it's a resource, after all.
Reply
:iconanima-dos:
Anima-dos Featured By Owner Apr 14, 2012  Professional Digital Artist
Oh-my.Gawd!

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.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 14, 2012
Just to let you know, I ripped of your thingy to see if I can make it too. Turns out I can.

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.
Reply
:iconanima-dos:
Anima-dos Featured By Owner Apr 14, 2012  Professional Digital Artist
I take off my hat for you here. For I am quite impressed at your result.

I assumed it was overly complicated because I mostly fear code (I am the woman who once programmed a super Mario who went to get his tobacco and never came back)

But it turns out that you were able to do a very similar result. Bravo!
:D
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 14, 2012
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. :D
But I guess I can never fear something that's so damn interesting...
Reply
:iconquasdar:
Quasdar Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
Good news! DA does support APNGs. [link] [link] If you're using Chrome it can play them as well, but you need an addon for it: [link]

And if you still want the GIF version it's a really good idea to put more formats in the description :)
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 13, 2012
Wonderful. I'll use it for later works. Thanks!
Reply
:iconlion-ger:
lion-ger Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
You'll just have to deal with all those IE users telling you they can't see any animation... Not a reason for not using APNG in my opinion though.
Reply
:iconquasdar:
Quasdar Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
Posting a GIF version for IE and Safari users covers it. Plus actual SVG animation can be used.
Reply
:iconquasdar:
Quasdar Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
:iconpinkiepieclapplz: Sure thing.
Reply
:iconlion-ger:
lion-ger Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
So you basically made multiple frames as seperate groups/layers and fade them in and out to get the animation? That is an interesting idea.

I still wish Flash could simply export to svg.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 13, 2012
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.
Reply
:iconlion-ger:
lion-ger Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
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.

Either way, I am very happy to see svg's animation features in use.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 13, 2012
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.
Reply
:iconlion-ger:
lion-ger Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
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)
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 14, 2012
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.
Reply
:iconlion-ger:
lion-ger Featured By Owner Apr 14, 2012  Hobbyist Digital Artist
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.
Reply
:iconmtherulerman:
MTHERULERMAN Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
THIS IS FUFUFIN MAEZIN
OH MY KHORNE
HOLEE SHISH
I MITE HAEV TO USE DIS FOR A GAEM
IF DATS OKAI
FAVAVAVAVVEVEVED
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 13, 2012
Yes... quite.
Even though I'm not really sure what you just said.
Reply
:iconmtherulerman:
MTHERULERMAN Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
DATS OKAI
MOSS PEEPOL DONT
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 13, 2012
I don't know what power-up you're on, but I gotta get some.
Reply
:iconmtherulerman:
MTHERULERMAN Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
IM ON DA BERZERKER PAK
CAUZ IM A MAN AND A HALF
BERZERKER PAKIN MAN AND A HALF
Reply
:iconmahaugher:
Mahaugher Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
I had no clue you could animate a svg file. This... is intriguing. Anyway, nice job :D
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 13, 2012
I'll let you know I have a tutorial on the subject. At least the basics.
Reply
:iconmahaugher:
Mahaugher Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
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 :D
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 13, 2012
Well, inkscape has some sort of plugin, but it's pretty much useless. Making the code is actually faster and simpler.
Reply
:iconmahaugher:
Mahaugher Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
How do you integrate your vectors into the code, rather then making the shapes hard code style? by editing the actual premade svg source file?
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 14, 2012
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.
Reply
:iconmahaugher:
Mahaugher Featured By Owner Apr 14, 2012  Hobbyist Digital Artist
haha yeah that's what I figured
Reply
:icondarrtaa:
Darrtaa Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
:icontakemymoneyplz:
Reply
:iconcloudshadezer0:
CloudshadeZer0 Featured By Owner Apr 13, 2012  Hobbyist Digital Artist
that's really something different because THIS IS BUCKING MAGIC.
Reply
:iconall-d-rilley:
All-D-Rilley Featured By Owner Apr 13, 2012  Student Traditional Artist
awesome
Reply
:iconthe-muffin-master:
the-muffin-master Featured By Owner Apr 13, 2012  Hobbyist Artist
Oh, God. This is perfect.
Reply
Add a Comment: