Shop Mobile More Submit  Join Login
Animation - Horn Magic by MisterAibo Animation - Horn Magic by MisterAibo
The gif shown is just a cropped preview - download the SVG and run in a web browser to see the real animation!

The magic effect, including tiny sparks (not very visible on the gif preview). Can be also used as a static resource as well - simply download the SVG and use at your leisure.

Fastest way to change the color is editing the file in a text editor and following the directions.

The animation is once again explained in the comments of the file - have fun!

As always, I would appreciate any input.

Time taken: 1 hour
Add a Comment:
 
:icongsaxby13:
Gsaxby13 Featured By Owner Aug 31, 2013
question, i'm looking for a way to use horn magic on a png file and create a gif how would i do that?
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Aug 31, 2013
Well, I'm afraid SVGRender is currently unavailable. And even if it is up, it doesn't work with transparent images. What I do is I include the animation in the whole (SVG) image and export that, which renders the transparency issue moot as there is none. However, you want to export it as a series of transparent PNGs, which is, at least to my knowledge, impossible at the moment. You could try to key out the background, but the gradient is a little too complex for that, and it still doesn't solve the issue of SVGRender not working at the moment.

I'm afraid I don't have a satisfying answer. When I started, I captured the images by the means of screen capturing. If you want to try that, you can. SVG can be scaled however you like, so there shouldn't be any problems stemming from that (apart from the transparency, once again). The resulting video can be made into a series of images without a problem.

Or, you know. You could save this actual GIF - the one I made for the preview - and key out the white. That sounds relatively simple.

Of course, exporting into a series of PNGs will be part of aniGen when it's out. I'm currently solving some minor issues, but I should get on that in the next few days.

Hope this helps.
Reply
:icongsaxby13:
Gsaxby13 Featured By Owner Sep 1, 2013
thanks i'll try that also don't worry about credit i don't post any of my stuff like this cause i base it all on little bits and pieces of others work and unless i have all the sources and i can feel ok with using it in public. and this i'm just gonna keep to myself and admire the experiment with others works i did. i have no benefit in taking credit so i'm glad you gave me the advice i was looking for a way to make a horn magic gif on an oc i made from an assortment of vectors and pony maker stuff so yeah thanks again!
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Sep 1, 2013
I read that with one breath. I feel exhausted. :D

Hey, experiment all you like. I get it that you don't want to post experiments composed from other people's resources, but then again, collages is what resources are for. Maybe you get an idea for a funny comic or a picture that you'll want to see out there. Don't let the fact that you use the works of other people - at least those meant exactly for that purpose - stop you.
Reply
:iconthe-muffin-master:
the-muffin-master Featured By Owner Oct 17, 2012  Hobbyist Artist
Oh, last question, I promise. My friend asked me the other day something about this, and I wasn't able to answer. He asked how to use it, per se - like, how to overlay it on a drawing. Kinda like how you do on your cinematics (I showed him your work the other day, since we were talking about animating ponies and all). Er, I'm bad at explaining. It's like this [link]
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Oct 17, 2012
Well... It's just an asset like any other. Just drag and drop it. Pull it into the drawing in inkscape. The whole code tree necessary for the object copies, which means the animations that are inside will remain the same.
Reply
:iconthe-muffin-master:
the-muffin-master Featured By Owner Oct 18, 2012  Hobbyist Artist
AH. That's...amazing. Thank you.
Reply
:iconthe-muffin-master:
the-muffin-master Featured By Owner Oct 17, 2012  Hobbyist Artist
Hm, I've got a question. How did you do the preview image? The gif, I mean. How did you convert it?

Sorry, that's a pretty stupid question and all, but I tried Googling it and I'm still clueless.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Oct 17, 2012
I used my brother's Firefox addon. It's pretty straight forward - you can use it to export an SVG opened in Firefox atany number of images and at any framerate. I use it for all cinemagraphs right now. Sure, it can't handle transparency and it doesn't do scaling, but other than that? I can even make videos out of the frames.
Reply
:iconthe-muffin-master:
the-muffin-master Featured By Owner Oct 17, 2012  Hobbyist Artist
That's pretty nifty! I managed to export one, yeah, but it sort of...disappeared? I can't seem to find it anywhere...?
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Oct 17, 2012
It saves the files in some temporary directory. I think it should make a popup with the address when it's done - usually as "can't make a movie because you're missing the program, but the pictures are here:" thing.
Reply
:iconthe-muffin-master:
the-muffin-master Featured By Owner Oct 17, 2012  Hobbyist Artist
It did pop up the address and was all ohh your movie was created, but when I try to go to the place it was saved, it says it doesn't exist. o_o
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Oct 17, 2012
Weird. It should work. Maybe try some similar folder? I'm not sure about what kind of folder names it uses in other systems, but it can be traced pretty easily in linux. Maybe try screwing up with ffmpeg so it can't make the movie?
Reply
:iconthe-muffin-master:
the-muffin-master Featured By Owner Oct 17, 2012  Hobbyist Artist
AH! YES! It worked! Thank you so much. I love you. *sobs*
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Oct 17, 2012
Love my brother - he made the addon.
Reply
(1 Reply)
:iconmarcotonio-desu:
Marcotonio-desu Featured By Owner Sep 18, 2012  Student Filmographer
Man, I didn't know SVG had so much possibilities, wow.

But still, this looks like too much coding and little actually drawing/putting your hands on visually understandable stuff. I know a bit of programing and can grasp the abstraction of it, but the majority of artists will just look at this and see no point on doing it "the hard way". Even flash is hard to understand for a beginner.
Are there interfaces to deal with SVG animation other than code lines? Vertex selection, time line, importing media/vector, etc.?
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Sep 19, 2012
None that I know of. That's the main problem with it - artists are ironically the people who lack the necessary imagination to be able to model things like this. They probably don't think about shapes like a mathematician or a physicist does. They don't appreciate the inner beauty of a Bézier curve. At least most artists.
You can always use some crutches - I draw most of the raw shapes in inkscape and then just work with the curves in a text editor, which works just fine for me. There is hardly ever an occasion when I have to re-work the whole curve by hand (script-wise, I mean). Adjusting the file in inkscape and seeing how it changes in the text editor is usually a pretty quick way to make reasonable adjustments. It takes a bit of getting used to, I know.
As for time line, well, timing the animation is just about changing a couple of attributes so you just need some basic idea to make things the way you want them. Sure, it's not that user friendly, but it's very precise. You always make the animation as optimal as you are able to, not as optimal as some interpretation script allows you to.
And importing is as easy as dragging and dropping. Just try it - make a new SVG in inkscape, import one of my animated vectors, save it (as inkscape SVG, plain tends to delete the animations) and view it in a browser.
What I'm trying to say is there is a way to do anything. You don't have to be a complete geek. You actually can do reasonable SVG animations with very little knowledge of the inner workings of an SVG. You need some, but the way I see it, you should always know about the thing you're working with. After all, you can't be a musician without knowing about acoustics, you can't be a painter without knowing a bit of chemistry and you can't be a film maker without knowing about encoding.
And if you are, this is why you're not as good as you could be.
Reply
:iconmarcotonio-desu:
Marcotonio-desu Featured By Owner Sep 19, 2012  Student Filmographer
Totally agree, but in the same time disagree. Look at Blender; it's got a huge and complex interface which takes a big time to learn. Normal, as 3D programs are kinda overflowing with resources. Parallel to it there is the possibility of programming the settings of what you're doing, in python. The whole process can be made either by clicking/dragging or by code lines.
Back in the day there was only coding for a lot of features, and Blender Foundation had to hire some crowd-funded programmers to enhance the user-friendship. As much as it'd be ideal for artists to know their tools deeply, it won't ever be a reality for most, and Blender grew outstandingly after the interface boost, being nowadays comparable to its paid rivals.
Since SVG is an open format, it would be really nice if some initiatives aiming for making it friendly were taken. As you said, few take shapes and animation as graphs and numerical points, so there must be a conversation between artists and programmers to see what are the needs for such an interface. This way I guess SVG could spread as much as SWF, else it'll stay overshadowed, no matter how much potential it holds.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Sep 19, 2012
Yeah, the problem is that inkscape is pretty much dead at the moment. At least animation-wise. They do not plan on making any kind of "official" animation extension. I think one of the main problems is this: the programmers don't care about the animation because artists don't use it and the artist don't use it because they don't know about it BECAUSE they didn't read the specification.
Reply
:iconx-pinkamenapie-x:
x-PinkamenaPie-x Featured By Owner Aug 2, 2012  Student General Artist
Is there a way to do the animation all in Inkscape? Or do you need another program?
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Aug 2, 2012
The way I do it, the only thing you need is inkscape and any text editor. I do all my animations by editing the SVG's code itself. It can sound scary (and look scary) but it's really quite easy when you try it a few times.

There was a plugin for inkscape that had some animation capabilities, but I'm afraid it was very buggy and unfinished.
Reply
:iconsircxyrtyx:
SirCxyrtyx Featured By Owner Apr 27, 2012
After spending too much time being staring at this thing, I've come to the conclusion that the top looks awkward. Right as it thins out, It does something strange.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 28, 2012
The tip should probably move down a bit so it doesn't thin that much.
Reply
:iconkama-itaetexiii:
Kama-ItaeteXIII Featured By Owner Apr 27, 2012  Hobbyist General Artist
Ah. this is really pretty. The animation is really, really smooth, though the sparkles aren't really that... animated? I don't know, maybe I just like sparkles too much and want ALL of the sparkles. It's an amazing animation. c:

And the youtube guy only did the object effect blob in aftereffects, the horn glow he did in flash.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 28, 2012
The sparkles aren't animated in the same way "that youtube guy" did it. They could compose of shard which would be scaled individually, but I was a bit too lazy to do that. And I wanted to keep the actual animation count to minimum. It would make the sparkle seem more... sparkly... I guess. Anyway, changing that would be pretty simple.
Reply
:iconkama-itaetexiii:
Kama-ItaeteXIII Featured By Owner Apr 28, 2012  Hobbyist General Artist
I still think the sparkles you did are nice. If I had made this animation I'd probably over do the sparkles. They would be everywhere. I have no restraint. So I think both animations (his and yours) are neat in their own ways.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 28, 2012
You want to know something cool? You can open the SVG in inkscape and copy the sparkles, move them around, even place them in your own things.
INSTANT SPARKLES EVERYWHERE!
Reply
:iconkioterno:
Kioterno Featured By Owner Apr 27, 2012
This is very well done. Good job, this brings to mind the youtube video i saw that shows how to make the magic around objects, but he did it in after effects.
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 27, 2012
Thank you. After effects... Bah. Real men animate with nano!
No, but really. Anything flash can do SVG can do </i>for free</i>.
Reply
:iconrecklesskaiser:
RecklessKaiser Featured By Owner Apr 27, 2012
This animation looks very smooth; nice effects, dude! :nod: Keep up the good work. :thumbsup:
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 27, 2012
Thanks. I also thought about a simple way do make dynamic magic "blobs" around objects.
Reply
:iconrecklesskaiser:
RecklessKaiser Featured By Owner Apr 27, 2012
Oh if you can do that, I'll make sure to include something in my next commission where you can use it! :nod:
Reply
:iconthe-muffin-master:
the-muffin-master Featured By Owner Apr 27, 2012  Hobbyist Artist
I just can't get enough of your animations. You're amazing!
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 27, 2012
Thank you.
Reply
:iconpilot231:
Pilot231 Featured By Owner Apr 27, 2012  Student Writer
What program did you use for this?
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 27, 2012
I drafted the basic shapes of each interpolation step in inkscape and then created the animation with bluefish text editor. It's pretty simple once you know how.
Reply
:iconpilot231:
Pilot231 Featured By Owner Apr 27, 2012  Student Writer
could you use the animation thing to create MLP animation?
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 27, 2012
I haven't seen an animation I couldn't copy, so theoretically, yes. I do not, however, employ several geniuses. So it would probably take me a while to get an episode out.

I'm working on a short video, though.
Reply
:iconpilot231:
Pilot231 Featured By Owner Apr 27, 2012  Student Writer
Cool. =) (And I know it's not easy to do animation right?)
Reply
:iconspartkle:
Spartkle Featured By Owner Apr 27, 2012  Student Digital Artist
I downloaded the SVG file, and it just opened another tab with the animation. Saved it clicked it it did the same with IE. Help ;A;
I use Chrome c:
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 27, 2012
Ah, the file wasn't validated! I'm sorry - it should work now.
And by the way, SVG animation isn't supported by IE 8 unless you install a plugin.
Reply
:iconspartkle:
Spartkle Featured By Owner Apr 27, 2012  Student Digital Artist
Well, something must be up with my computer and SVGs because it's just doing the same thing :/

Maybe you could save a version of it as a GIF? Like the preview but without the white c:
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 27, 2012
Are sure you're doing it right? Just drag it in the Chrome window like a new tab?

And I would love to make a semi-transparent gif, but it'd require some serious editing of each frame. I can't straight up export the animation, you see - I have to capture it in a window as a set of png images, so it has the background. You should still be able to import it in your vectors without any problems though.
Reply
:iconspartkle:
Spartkle Featured By Owner Apr 27, 2012  Student Digital Artist
Yup, that's what I'm doing c:

That's sounds great. Thank you so much c:
Reply
:iconmisteraibo:
MisterAibo Featured By Owner Apr 27, 2012
Strange. I wish I could help you... :(
Reply
:iconspartkle:
Spartkle Featured By Owner Apr 27, 2012  Student Digital Artist
c:
Reply
:iconx-pinkamenapie-x:
x-PinkamenaPie-x Featured By Owner Jul 31, 2012  Student General Artist
Just right click and save. It'll do it as an SVG file.
Reply
:iconblazah99:
blazah99 Featured By Owner Jun 3, 2012
Try right clicking the download link and do a "Save As", if the default file formate is svg it should work whichever program you use... hopefully.
Reply
(1 Reply)
Add a Comment:
 
×




Details

Submitted on
April 27, 2012
File Size
19.0 KB
Link
Thumb
Embed

Stats

Views
7,800
Favourites
151 (who?)
Comments
58
Downloads
472
×