GIF Animation of SVG Paper Glider

The purpose of the demonstration:

1. Have some fun playing with one of Richard Querin's tutorials -- how to make a paper glider that appears near the end of episode 80 on heathenx.
2. Demonstrate one method of using object-to-path and an object's rotation markers to map out frames for an animation.
3. Test whether drop-shadows distract the eye into ignoring a very sloppy set of animated frames.
4. Wake-up Imagemagick on my Linux box (I just had not used it lately).

Tools used to create the animated GIF demo:

• Inkscape 0.46
• Imagemagick v6 (I used v7)

Note: All of these open-source tools are available for download and installation on all major operating systems.

The intended audience and required skills:

Intermediate Inkscape users: familiarity with drawing brazier paths, placing objects on paths, changing the center of rotation for an object, exporting selections to PNG.

How to make this image using Inkscape 0.46 and Imagemagick 6.

1. Set the size of the frame using the page properties. You need to have something in each frame that does not vary from frame to frame in order for each exported PNG to be properly oriented.


2. Draw a bezier path that the glider will follow in the animation (I reset the stroke of my path so that it was a dotted-line.) The path will serve as the guide for advancing the glider along its trajectory between frames, so it need not be visible -- that is, once you complete step number three, below, you could make the path the same color as the background or 100% transparent if you do not wish it to be visible.


3. Follow Richard's instructions for constructing a paper glider near the 26 minute mark in his video re: a light switch -- this is, episode 80 on heathenx.


4. Put the glider and its shadow on the path that you drew in step number two above.


5. If you plan to show the path in the animations as your aircraft advances, draw a shape, with no stroke and filled with the page's background color, that you can move around and cover the parts of the path that the glider has not yet passed while revealing those parts of the path that represent the path the glider has followed.


6. Select your glider and click to select rotation and move the rotation axis cross-hair to the nose of the glider. Do the same with the drop shadow.


7. Orient your glider and its shadow for the first frame and export the page to PNG.


8. Move the glider and its shadow to the next position, reorient both (this is the main trick -- the eye will see not just forward, linear motion, but perspective as in the glider is further away from the ground during a loop).


9. Repeat steps seven and eight until you have lost your patience and want to see whether your frames work as an animation. Use the convert command which comes with Imagemagick and that is listed below under "Tips" to generate an animated GIF and run the product within your favorite browser to see whether you have adjustments to make to the frames and to either the glider or the drop-shadow's orientation in each frame.

TIPS

When I exported the individual PNGs that would be used as frames in the animation, I named them in sequential order. This made it easy to identify their role in the animation later and allowed me to use a wild card in the Command Line Interface script that put them together as an animated GIF.

I converted the individual PNG frames into an animation using Imagemagick v7 on Linux with the following command, where the wild card glider*.png returned glider01.png through glider08.png as source files and where the animated-glider.gif file is the product:

convert -delay 10 -loop 0 ./glider*.png animated-glider.gif

The setting " -delay 10" sets the frame rate of the animation and " -loop 0" plays the animation once rather than repeating it over and over.

Helpful Resources

• Richard Querin demonstrates how to make a paper glider near the end of episode 80 on heathenx dot org.
• Animated GIFs using Imagemagick