SiteSpinner Pro Tutorials banner
< Tutorials Home
The Key Frame Editor

A key frame is a frame in an animated sequence of frames -- like a very basic movie.  In this tutorial, we cover these topics:

Creating a new key frame action
What's in the key frame editor?
Setting the first key frame
Setting subsequent key frames
Inserting key frames
Editing key frames
Editing key paths
Assigning a key path to more than one object
Making the key path visible
Pixilated images
Another example -- Welcome to My Website

The object or objects in a key frame should change smoothly from one frame to the next. You can have a sequence with as few as two frames like the one one below: a very small starting image, and a bigger final image.

In preview, click your browser refresh button to see the animation. The two key frames are the beginning and end points of the sequence.

SiteSpinner Pro logo
Image for keyframe example
The Key Frame Editor can orchestrate a series of such animations. It can control whether one animation starts at the same time as another, starts after another has finished, or overlaps another animation. The Editor will show a list of all the animations on a page and will allow you to easily edit any of them.

Here is a similar animation, except compared to the first, there is no linear movement. There is still a path associated with the animation, (a line to move along) but it is a very small one, Also,we set this animation to start one second after the first animation is finished. Click your browser refresh button to see it.

For a step-by-step guide to producing effects such as these see Key Frame: move and resize images.
Lake image for keyframe example
Creating a new key frame action

Whenever you have assigned a key frame action, and whenever you select the object, the Key Frame Editor will appear. Sometimes it may be a little reluctant to start. If so, click on some other object, or a blank part of the page, then back on the object of interest.
Create new keyframe action
Key Path time-line editor
What's in the key frame editor?

The editor has features to edit the frames at each point along the object's path, and can also edit the path itself. The main feature is the timeline along the top of the editor -- this shows the total time for all animations on the page. Set your required total time from the spin edit controls or the Total Time edit box to the left of the time line. 

To see the state of the animated objects on your page at any point, drag the slider along the timeline bar to the point of interest. We suggest you drag by the top part of the slider, otherwise you run the risk of accidentally moving a timeline point.

You could also use the Total Time slider immediately under the timeline with the same end results. But notice that the range of the slider is that of the total time. This need not be the case with the timeline slider -- there the visible range may only a part of the total.

On the slider bar you may see a blue section. This indicates the section of the path  currently active for editing. If you look in your workpage, you will see the object in the position where it will be at the time indicated by the timeline slider.

The red line, (really part of a little red arrow under the start of the active section) marks the currently active point.

The number of this point shows as "p 0" in the current time line point box (picture). The arrows allow you to step to the previous or next points.

The little dark arrows indicate other currently inactive timeline points.

Drag any timeline point to a new position on the timeline bar, and that will then, if not already, become the currently active point. Similarly, simply clicking on a black arrow will make it active instead. In both cases, the active timeline point shows as red -- that is the one you can edit.

The third slider is the Key Time slider -- use it to move the current timeline point -- the one showing in red. This has the same effect as dragging a timeline point.

You cannot move a timeline point past another. If you try, you will gather up the other point or points and move them together with the active point. This may result in one or more timeline points hidden behind each other.

Use the play buttons to preview the whole animation in the workpage. Hover your mouse over each button to see exactly what each does -- a tool tip should appear for each -- they work much the same as music player controls.

To see tooltip details about the individual controls, in your workpage, open the Key Frame Editor and hover your mouse over the control.

Timeline slider
Total time slider
Active time point
Time point and forward/back buttons
Inactive time point
Player preview control buttons
Path object follows
Object to follow path
Setting the first key frame

Having created a fresh key frame action, select the object using the action -- if not already selected. The Key Frame Editor should open.

Move the Key Time slider to the time point where the animation is to start. Zero time is when the page is first opened or refreshed. To delay the animation after page open, move the Key Time slider to the right, off the zero time position. This is the point where the first frame starts.

Setting subsequent key frames

Move the object to its next position on the page. Using the Quick Editor, set the size, orientation and color to what you want. You can change the object's position, scale and rotation, the geometry's outline color and width, the shading fill colors, and transparency. You can also change the shading style (solid, linear, cylinder or radial) to be used for the entire path, but you cannot change it for individual key-points.

These are the steps you would have taken with the object before creating a Key Frame action. They are the same steps for second and subsequent points.

Click the Append button. This is your next frame. Notice the little red arrow that indicates this is now the active point. Also, you should see the path line appear in your workpage.

SiteSpinner Pro makes an assumption about the initial position of the point, based on the distance you moved the object -- it tries to keep the object at constant speed. If the time point position is wrong, adjust it by dragging the little red arrow or by sliding the Key Time slider.

Continue with the previous three steps for as many time points as you need. Each set of steps creates another time point.

Advance or return to the next point in the sequence by selecting the time line point  forward/back step buttons < >.  Or, use the player preview buttons.

Inserting key frames

Inserting a key frame is similar to appending just above, except you use the Insert button instead of the Append.

The insertion point will be the one just before the current active point showing red, so choose the current active point before you start.

Editing key frames

Select the point to be edited. Click on it, or use the foward/back buttons or the play buttons to navigate to it. It should show red.

Using the Quick or other Editor, make the changes to the object's positioning, shape or whatever.

Click the Update button. You may need to then adjust the position of the sill active time line point.

Editing key paths

A key path is a special case of a polygon. Therefore you can use the normal polygon editing procedures. The Vertex Editor on the left toolbar allows you to move points, but normally not add or delete. This is an easy way to adjust paths to be exactly horizontal or vertical, or exactly the same length.

If you want add and delete operations, invoke the secret part of the Vertex Editor via the main menu Object > Show Vertex Editor.

The normal object alignment and sizing tools will work with key paths too.

You can also edit the key path as part of a key frame edit, covered above.
Quick Editor button
Append button
Active time point
Time point and forward/back buttons
Player preview control buttons
Insert button
Active time point
Quick Editor button
Update button
Assigning a key path to more than one object

Assign a key path to multiple objects by assigning the related action to additional objects  -- Object Editor > Components tab. With the same action assigned, multiple objects will animate in exactly the same way and at the same time.

It is possible to delay an object tracing a key path, change the direction or change the number of times it will trace the path by assigning a different action but one that uses the same key path:

Making the key path visible

The key path is just another object. It can be shaded, scaled, rotated and animated including tracing a key path of its own.  Changing the key path will change the animation of objects that trace it. This is a valuable way to create complex hierarchical animation. Don't use recursive animation paths (e.g. Act1 using act2 and that reusing act1.) The results will be unpredictable.

Pixilated images
You may set up an image as we did earlier to zoom in, but end with a very pixilated image like this one below -- in preview,  click for the action.

Lake example again -- pixellated
This is an effect you may want occasionally, in which case, do this deliberately:

When you ask SiteSpinner Pro to render (make an image file for a picture, it does so from the image as it is in your workpage. For the action here,  we have the image starting very small -- and that how we displayed it in the work-window.

SiteSpinner Pro makes an image file for this very small image, and the DHTML scales it up when the animation runs. The effect you see is what you get when you scale up any small image to make a large one.

There are two solutions to this problem:

If you have a full-size image that you want to display, but have it smaller at some parts of its journey, set Anti-Alias and Re-Render off in the Quick Editor > Action tab. This forces the DHTML to use the large image and scale down from that -- this does not cause a loss of resolution.

Use the Key Frame Editor to position the object in your workpage in the actual size you want the image file. For an animation like this one, set the workpage to show the image at full size. Where SiteSpinner Pro creates the images, like titles, you cannot turn re-render off -- therefore you need to pay attention to the workpage size.

Some rules of thumb:

Another example -- Welcome to my Website

You might want some kind of animated title -- here is one way of doing it with key frames. In preview,
click for the action.

to my
See also: Key Frame: move and resize images step-by-step
Tutorials banner