SiteSpinner Pro Tutorials: Action Editor

Action Editor

Use the Action Editor to create an animation (a motion or a transformation) that you will apply to one or more objects.

For example, you might create an action to have an object follow the mouse cursor. You might create a breathing action where an object expands and contracts as if breathing.

In this tutorial, we cover the following topics:

Assigning actions
Selection tab
Paths tab
Follow Object Path
Hierarchical motion
Follow Mouse Movement
Follow Linear Path
Transforms tab
Transforms common features
Rotation transform (SVG only)
Scaling transform (HTML and SVG)
Shading transform (SVG only)
Timing tab
Components tab
Change Image

Assigning actions
After you have created an action, assign the same action to as many additional objects as you like, one at a time via the Object Editor > Components tab.

If the current object does not have an action already assigned, and you open the Action Editor, you will see this dialog:

[Image of no action assigned dialog]

If the current object already has an action, the Action Editor will select that action for editing. The Breathe, Move and Follow objects, already have actions assigned. If you are viewing this page in your workpage, select one of those objects and then click the Action Editor button on the tools (left-hand) toolbar. This will allow you to view and edit the existing action.

Selection tab

Use the Selection tab to choose the action to edit. The initial action will be for the current object -- maybe a new action -- or failing that, an existing action.

Current
Displays the name of the current action being edited. Use the drop-down box to choose another action to edit.

By default, names are assigned as: act1, act2, act3 etc -- if you like, change them to better describe the action. Change the name of the current action by typing a new name into the edit box. Action names must contain nine or fewer characters, include only alphanumeric characters and must not contain any special or blank characters.

Create
Creates a new action.

Delete
Deletes the current action. SiteSpinner Pro will check all objects and behaviors and remove any references to this action.

Assigned Objects
A list of all objects that use this action. You can't edit this list -- rather amend it indirectly via the Object Editor > Components tab.

Paths tab

The Paths tab selects the path an animated object can take. Four types of paths are available:

Key Frame Path. A key frame is a frame in an animated sequence of frames
Object Paths follow the outline of another object, or a path
Follow Mouse Movement paths (guess what?!) follow the movement of the mouse
Linear Paths are straight-line paths in one of eight directions

Key Frame Path
From the Action Editor you have only one option. Checking the Enable Motion Path checkbox will activate the Key Frame Editor which activates whenever you select the object that has the key frame path.

Follow Object Path
Selects an object's geometry to provide a motion path. The path will follow the outline of the object. You will see both the object's name and a small image to help identify it. The path can be either visible or invisible. For a visible path, use a regular object. For an invisible path, use one of these methods:

Create the path with the "Draw a Path" Tool on the tools (left) toolbar. See Paths and curves.
If you create a group specifically to provide geometry for this function, make the group invisible with the "Merge a Group into a Path Object" button on the bottom toolbar. Or use the Arrange > Merge function from the main menu.
Set a border thickness of 0 -- for example with the Quick Editor > Outline tab.

Hierarchical motion
Create hierarchical motion by having one object follow the outline of another, and in turn have that object follow another, and so on. The result is a motion path which also moves. You can create very complex motion this way, since the hierarchy can go several levels deep.

Avoid a recursive hierarchy where two or more objects try to trace each other. Examples of recursion are obj1 > obj2 > obj1. Or obj1 > obj2 > obj3 > obj1. The outcome of such motions are unpredictable and likely to be Bad.

Follow Mouse Movement
Selects the mouse on either or both the X and Y axes to guide the object. When you select both axes, the object will be closely fixed to the movement of the mouse. When you select only one axis, the object will move with the mouse on that axis only, and stay fixed to its current location on the other. The "Follow" title in the left margin follows the Y (vertical) axis only.

Follow Linear Path
Selects one of eight directions to move an object. The direction is identified by the arrow on each button. The red stop button will disable motion, to allow what is called a "stationary transform". The Start, Center and End buttons at the bottom of this group identify the start and end position of the path. When selected, a button will be shaded differently and may be a little darker. Careful inspection should show the differences on your system. The image above shows them in an obvious darker grey.

Start: the object will start its motion from its current position.
Center: the object will pass through its current position half way along the path.
End: the object will end at its current position.

The linear path length is set to be a little more than the current browser dimensions. Resizing the browser window restarts the animation.

Transforms tab

On the transforms tab, there are three sections: Rotation, Scaling and Shading.
DHTML has a more restricted set of actions than SVG -- you can Rotate and Shade only with SVG.

Transforms common features

Each section has six common elements and you can change all of them:
Slider: move this with your mouse to set whatever value you want, to the limits displayed above the slider.
High checkbox: check this to increase the range of the slider. The range of values displayed above the slider will change to indicate the higher range.
Edit box: enter the quantity directly here, or see the exact value set by the slider.
Per path radio button: active only if a path is set from the Paths tab. The slider will show the number of cycles of rotation, scaling or shading each time the object traverses the specified path. If this button is grayed out (inactive), you don't have a path set in the Paths tab.
Per second radio button: check this to control the number of cycles to be made each second.
Reverse each cycle checkbox: when you check this box, the direction of rotation, scaling or shading change will reverse each cycle, be it path or time setting.

Rotation transform (SVG only)

Rotates an object about its origin. The direction of rotation can be positive (clockwise) or negative (anti-clockwise). The number of rotations per second, or per path is displayed on the slider and in the edit box.

Rotation is available only in SVG mode. If you try it in HTML mode, the object will not rotate.

Scaling transform (HTML and SVG)

Scales an object -- makes it bigger or smaller. A positive value makes the object bigger. A negative value makes the the object smaller. Higher positive or negative values make the object grow or shrink more quickly.

What happens when the object shrinks to zero? For HTML it will grow again. For SVG, it will invert and grow again.

Shading transform (SVG only)

Changes the color of an object. A bigger value causes the color to change more slowly. For a very slow change, enter a number bigger than 10 in the edit box.

Use the two drop-boxes to select the Shade-From and Shade-To components. The top drop-box contains the object's current shading component (Shade-From) if there is one. Use the bottom drop box to select the Shade-To component. Use the two shading component buttons beside the drop-boxes to create or edit either shade. For more on this, see Rendering and Shading.

When the Shade-From component uses linear or radial shading, the shading transformation will also use linear or radial shading. If either Shading component includes a transparency setting, the shading transformation will also include transparency.

Shading is available only in SVG mode. In HTML mode, the color will remain set at the Shade-From value.

Timing tab

The Timing tab sets various aspects relating to the timing of an action. This tab selects the speed and direction of an object's movement or transformation and the number of times to trace a path. You can set the timing by seconds or by the distance an object moves.

Speed

For moving objects, the speed slider will set the object's speed per path when you have selected the per Path radio button in the Transforms tab. Otherwise, the speed slider will work as you would expect -- a certain number of movements or transforms per second.
Use positive values to go forward and negative values to go back.

The speed slider has no effect on these settings in the Paths tab:

Key frame paths
Interactive paths (follow mouse movement)
Stationary transforms (the red-dot stop button is selected)

Duration
The duration slider sets the total time to move along a path or to complete a stationary transform operation. A duration of zero means no limit on duration.
The duration slider has no effect on paths that are timed by distance.

Delay
Sets the delay after page opening or refresh for the action to start.
In seconds, it means that the action will start that many seconds after page opening.

Offset
Sets the starting point along a path. The distance is set as a percentage of the entire path, assuming one traverse of the path. Selecting 25% will start an object a quarter of the distance along the path. 50% will start halfway along the path. If the object is making more than one traverse of the path, the offset has no effect on subsequent traverses.

For motion timed by seconds, the distance rule above still applies.

Repeat
Sets the number of times the object will trace the path set by the other sliders. Use the slider to set a path count up to 100. Type larger values directly into the Edit Value box. The “Continuous” check box at the top of the group will cause the action to play indefinitely.

The object will stop when the specified end condition occurs. (e.g., time complete). For "Timed by Distance", each time the object passes the start location is one count. The object will stop its motion at the start position when it completes the count set on this slider.

Components tab

The Components tab provides the ability to dynamically change an object's image as it changes direction. For example, a moving insect object might change its image to always keep the head pointed in the direction it is moving.