Deviation Actions

MisterAibo's avatar

Vector - Phonograph

Published:
By
21 Comments
12K Views
Phonograph from MLP's S01E25 (Party of One), 2:59
Snap: [link] (left)

An animated version (SVG): [link]
Comments21
Join the community to add your comment. Already a deviant? Log In
witchpixe's avatar
Dear Princess Celestia, I am writting to you from the most delightful party. I'm not only having a great time with my friends but also was given the opportunity to learn a valuable lesson about friendship. Always expect the best from your friends and never assume the worst. Rest assured that a good friend always has your best interests at heart.
BG93-Sketches's avatar
used [link]
thank you very much excellent work, genius
Pony-Berserker's avatar
SpyroCool's avatar
I do believe, this is not a Phonograph, but a Ponygraph.



What? It had to be said!
tamalesyatole's avatar
Hi! I used it in a comic here. Credit and a link back here are in the description.
MisterAibo's avatar
Hilarious. How do you create your animations?
tamalesyatole's avatar
Frame by frame. For that one specifically, the image is a 16-frame GIF. The animated phonograph is made of 4 frames (say, WXYZ) so the loop can be repeated 4 times:

WXYZWXYZWXYZWXYZ Frame Cycle
█▄▄▄█▄▄▄█▄▄▄█▄▄▄
1234567890123456 Total Frame Count

Where:
█ is the first frame, and
▄ is each subsequent frame.

The dancing Gummy is made of 5 different "poses" (say, ABCDE) arranged this way:

ABCDEDCBABCDEDCB Gummy Frame Cycle
▄▄▄▄▀▀▀▀▀▀▀▀▄▄▄▄ Gummy Facing Left/Right/Left

█▄▄▄█▄▄▄█▄▄▄█▄▄▄ Phonograph Frame Cycle
1234567890123456 Total Frame Count


Where
▀ Means "Gummy is Looking to the left"
▄ Means "Gummy is Looking to the right"

...so Gummy's animation "bounces"(?) and flips, spending half the time frames facing left, the other half facing right, all while the phonograph loops four times.

And for the composition of the comic itself, I export the frames at the final size from Inkscape: 1 completely still, 4 for each "only-the-phonograph-moves" panel (I duplicated the other 12 on Windows Explorer) and 16 for Gummy dancing.

Then in GIMP, I place all the frames of the first panel in the same place, then all the frames of the second panel ~505 pixels under the first panel, and repeat for Panels 03-09.

Then (for this comic) I set the layer visibility ON on the Layers/Panels that correspond to the "Frame01" of the animation, then I did the Right Click on the Layers tab ->"Merge Visible Layers" so I end with a single layer for the Frame01 made of all the corresponding Panels. Repeat for Frames 02-16.

Then Filters -> Animation -> Optimize (Difference) so the file is not so Big, and export as an animated GIF with 60 ms between frames...

...and that's how Equestria was made.
MisterAibo's avatar
I also use this kind of period multiples in my animations - it's the only way to make it seamless if you're aiming for a shorter loop.

However, I'd strongly recommend a less... tiresome... way to animate. Consider SVG animation. You could achieve the same results with any frame rate you desired and full fluidity of the time-based animation in the original. Not to mention that reusing assets is the question of ctrl+c - ctrl+v, not painstaking integration into the layers. You can always export the result as a sequence of PNGs and make those into an optimized GIF in the matter of minutes.

Of course, there is a bit of coding here and there, but I don't think you would mind that much. After all, you can come up with things like this.
tamalesyatole's avatar
I keep saying this to myself, but I'll try it some day. It's just that when I have an Idea, I automatically think how to make it that way (the tiresome way), because it is something I already know how to do it. Unfortunately for me, the last two ideas required a lot of frames :XD:
MisterAibo's avatar
Yeah, I know what you mean. But I went through the trouble of learning the basis of SVG animation and started working on it, so with every new work, I learn something new. You must be in a part of the learning curve that is pretty steep right now. Doing frame-by-frame animation by hand... it's like you're 1930s Disney. :D

I could explain a few things about SVG animations if you wanted me to...
tamalesyatole's avatar
Thanks for the offer. I want to try for myself first, so I'll study the NMM animation you did, but when I begin to flip tables, I'll be glad to have your help :)
MisterAibo's avatar
Just FYI, I made an animated version of this: [link]
MisterAibo's avatar
I'd actually recommend starting with my flag and horn magic to get some general idea. Keep the documentation at hand and you should have no problems.
Out of Reach includes a generous helping of translation and rotation animations (animateTransform) while Memory Lane Pictures have a nice simple animateMotion (animation on path), as well as some nice path interpolation for the Professor's hoof. However, these two are not that well documented.
Out of Reach also utilizes splines, even though The Great Mystery was the first one to do that.
I'd recommend getting back to the flag and magic (and NMM) animations later to learn about the wavy motion basics.
OBLadin's avatar
Studio B forgot the tone arm in the original...
MisterAibo's avatar
Possibly. I noticed it too.
RecklessKaiser's avatar
I think I've already seen this before and I like how it looks in that picture. :giggle:
Pilot231's avatar
Nicely done. =D
Join the community to add your comment. Already a deviant? Log In