Looping Animation

To create this frame-base animation, download the zip files or hqx files. The various frames of the animation were created by drawing a single instance of the plane and using a blend along a circular path to create all of the different instances of the plane. The blend was then released to layers, and the following steps were taken to make the animation:

  1. Name the first frame of the animation begin and the last frame end.
  2. Since the first animation frame appears below the last frame in the Layers Palette, the direction of the animation will be "reverse".
  3. Since we want a 50 millisecond delay between animation frames, the delay will be "5". The delay can only be set in 10 millisecond intervals. Note: Depending on the speed of your system, you may have to change this setting to get smooth animation.
  4. Hide all of the animation frames except the first frame.
  5. Make sure no elements are selected.
  6. Using the "Windows" menu, show the SVG Interactivity Palette.
  7. Using the SVG Interactivity Palette, link in the anim.js file.
    1. Click on the folder icon.
    2. Click on the "Add" button to source in a JavaScript file.
    3. In the "URL" text field, type anim.js. Note: if the anim.js file will not be located in the same directory as the SVG file, add the relative path of the anim.js file.
    4. Click the "OK" button and then click the "Done" button.
  8. Using the SVG Interactivity Palette, add the animation trigger.
    1. Since we want the animation to start when the SVG loads, select "onload" from the "Event" drop-down menu.
    2. In the "JavaScript" text field, type init(evt); loop('reverse', 'begin', 'end', '5') and press <Enter>.
  9. Using the default settings, export the file as SVG and name it looping.svg.
  10. Create an HTML file and name it looping.html.
  11. Copy a version of Samples/SVG_Interactivity_Palette/animation/anim.js into the same directory as the SVG file or to the relative location you specified earlier.
  12. In the <HEAD> tag, insert the following: <script src="anim.js" language="JavaScript"></script> This presumes you have copied the anim.js script into the same directory as the HTML.
  13. Embed SVG within an HTML document by adding the following to the <BODY> of your HTML:
    <EMBED SRC="looping.svg" TYPE="image/svg-xml" PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/" HEIGHT="426" WIDTH="404">

    This presumes the SVG file is in the same directory as the HTML and that the height and width correspond with those of the SVG file.