Controlling Animation Playback
Controlling animation playback is best demonstrated using an example animation, such as the Insertion Sort embedded in this web page.
The left mouse button, mouse right button (via a context menu), mouse wheel and the Ctrl & Shift keys are used to control playback.
The arrow keys, normally on the right hand side of the keyboard, maybe used in lieu of the mouse. The left & right arrows are equivalent to rotating the mouse wheel backwards and forwards and the down arrow is equivalent to pressing the left mouse button. The up arrow is used to reset the animation.
If the mouse has buttons, XBUTTON1 is equivalent to pressing the SHIFT key, and XBUTTON2 can be used to start & stop (pause) playback.
The Vivio animation may need to be
selected (clicked with
the mouse) in order to activate the control. The
"browser" is selected by clicking outside the animation window, but within the browser
window. Notice how the mouse wheel (or arrow up &
arrow down keys) either controls animation playback or scrolls the web page
(typically) depending on whether the Vivio animation or "browser" has focus.
An active Insertion Sort Vivio animation
-
Start or stop (pause) playback by clicking the the left mouse button on the animation background.
-
Reset the animation by clicking the right mouse button and selecting the "Reset animation" in the context menu. Alternatively press the Up arrow key for longer than half-a-second.
-
Single step the animation forwards and backwards by stopping (pausing) the animation and then rotating the mouse wheel. Clicking the left mouse button while the animation is stopped (paused) will resume animation playback in the direction of the last single step.
-
Increase or decrease the animation playback speed by rotating the mouse wheel while the animation is playing or by pressing the Ctrl key and rotating the mouse wheel if playback is stopped (paused).
-
Snap to the next or previous checkpoint by stopping (pausing) the animation and then pressing the Shift key and rotating the mouse wheel. The checkpoints are added into the animation programmatically. In this example, a checkpoint is recorded at the end of each sweep of the insertion sort algorithm.
-
Play and stop (pause) at the next checkpoint by stopping (pausing) the animation and then pressing the Shift key and clicking the left mouse button. Remember that the playback direction is set by the direction of the last single step.
Context Menu
Right click on the animation window background to display the context menu.
|
Context Menu |
|
| Play forwards | Play animation forwards |
| Play backwards | Play animation backwards |
| Stop | Stop (pause) animation |
| Play to next checkpoint | Play animation forwards until next checkpoint is reached. Checkpoint are added prgramatically to animations by the developer. |
| Play to previous checkpoint | Play animation backwards until previous checkpoint is reached. |
| Snap to next checkpoint | Snap forward to next checkpoint. Can be used to quickly position animation to point of interest. |
| Snap to previous checkpoint | Snap backwards to previous checkpoint. |
| Reset animation | Resets animation |
| Copy as enhanced metafile | Used to paste a copy of the animation (as ametafile) into other applications (eg. Microsoft Word). The advantage of using a metafile is that the image will scale correctly, unlike a bitmap. Note that some applications are still unable to handle enhanced metafiles correctly. |
| Full screen in browser | Animation is displayed full screen in the browser window. To return to the original view, right click for context menu and select "Normal screen". Some browsers may not support this feature. Some browsers may not support this feature. |
| Full screen | Animation is displayed full screen. To return to the original view, right click for context menu and select "Normal screen". |
| Hide player tool tips | Hides player tool tips which are displayed when the animation is started and stopped etc. |
| Show shuttle | Displays a circular shuttle that can be used to control animation playback (consult the following link for further details). |
| Vivio animations page | Display Vivio animations page browser |
| Vivio player help page | Display Vivio player help page in browser |
| Vivio home page | Display Vivio home page in browser |
| Vivio version | Shows Vivio version and build date |
Shuttle
The shuttle is displayed by selecting "Show Shuttle" in the context menu.
Position the shuttle by holding down the left mouse button down over the shuttle and moving the mouse. The shuttle's position is remembered in absolute screen co-ordinates
The shuttle operating mode is determined by which sector the mouse cursor enters the shuttle. Entering via "tps" and rotating the mouse cursor around the shuttle centre increases or decreases the playback speed. Entering via "snap" and rotating the mouse cursor around the shuttle centre snaps the animation to the next or previous checkpoint. The checkpoints are added into the animation programmatically. In this example, a checkpoint is recorded at the end of each sweep of the insertion sort algorithm. Entering via any other sector, provided that the animation is stopped (paused), and rotating the mouse cursor around the shuttle centre single steps the animation forwards or backwards.
To start or stop (pause) playback, click the left mouse button on the shuttle.
To hide the shuttle, right click on the shuttle or animation window background and select "Hide shuttle" from the context menu.
If a web page contains more that one animation, each
animation will have its own shuttle.