Oscillating animation

To create this frame-base animation, download the zip files or hqx files. The various frames of the animation were individually created 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 above the last frame in the Layers Palette, the direction of the animation will be "forward."
  3. Since we want a 200 millisecond delay between animation frames, the delay will be "20." The delay can only be set in 10 millisecond intervals.
  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); oscillate('forward', 'begin', 'end', '20') and press <Enter>.
  9. Using the default settings, export the file as SVG and name it oscillating.svg.
  10. Create an HTML file and name it oscillating.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="oscillating.svg" TYPE="image/svg-xml" PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/" HEIGHT="164" WIDTH="113">

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