Controllers control how a story plays. They usually provide mechanisms for users to interact with your story. They may also provide visual feedback about the state of the animation.
Each story may optionally have a
controllers entry with a list of configured controllers to use for that story. If an empty array is given, the story won’t use any controllers. If no
controllers entry is given then the story will use the default controllers.
The default set of controllers is listed in an array at
The auto controller configures the automatic behavior of the player. Use it to make the player start and advance automatically, without user interaction.
If true, the story will start immediately. If a number is provided, the story will start after that many seconds.
If true, the story will start playing the next step immediately upon reaching the end of a step. If a number is provided, the story will start the next step after that many seconds.
The delay can optionally be overridden on the step object using an
If true, the story will restart immediately upon reaching the end of the timeline. If a number is provided, the story will restart after that many seconds.
The debug controller displays status information in the upper-left corner of the canvas. It shows the elaspsed time, completion percentage, and the zero-based indexes of the current flow, page and step.
If provided, the
div that holds the debug information will have a
class attribute with this value.
The keyboard controller maps user interaction to playback activity. The user presses keys on a keyboard or related device, such as a presentation clicker, to start, pause, restart, advance, or rewind the player.
There are seven actions that can be triggered. Each has a default set of key codes that trigger the action, but they can be overridden with the
|play|| Starts playback at the current position if it is currently paused. |
|pause|| Stops playback at the current position if it is currently playing. |
|toggle|| Toggles between play and pause. |
|back|| The playhead rewinds to the start of the current step. If the playhead is already at the start of the step, it rewinds to the start of the previous step. |
|next|| If the playhead is at the beginning of a step, it starts playing. Otherwise, it fast forwards to the next step and then starts playing. |
|start|| Positions the playhead at the beginning of the story. |
|end|| Positions the playhead at the end of the story. |
The keymap can be changed by associating Keycodes with the actions. If an action is included, all of it’s default keys will be replaced. It’s possible to only override some of the actions, by omitting the others.
A keycode can only trigger one action. If it is associated with multiple, the keycode will trigger the first one found, in this order: next, toggle, play, pause, back, start, end.
The mousemove controller maps mouse movement over a story to a position on its timeline. It then instantly seeks the timeline to that position. When the mouse is moved off of the story, the player starts from the current position and plays until the end of the story, unless otherwise configured with the auto controller.
The hot spot normally ranges from the left edge of the frame to the right edge. If the mouse is positioned 25% of the way across the frame, the timeline will be positioned to 25% complete. The starting and ending points of the hotspot can be configured.
The mousemove controller can be experienced by positioning your mouse over the Controllers heading at the top of this page.
This option defines the horizontal location on the frame of the starting point. This is the point that will map to the beginning of the animation. The value is a percentage of the frame’s width.
This option defines the horizontal location on the frame of the ending point. This is the point that will map to the end of the animation. The value is a percentage of the frame’s width.
The mousewheel controller pauses and then seeks the timeline relative to its current position. The wheel’s direction defines whether the timeline is advanced or retreated. To experience it, position your mouse over almost any of the animations on this website, including the front page’s splash and all the examples in the gallery. Spin the wheel with or without the CTRL and ALT keys pressed.
Each wheel click moves the timeline 0.01 seconds. The CTRL and ALT keys can be pressed to alter the amount of change.
The resize controller monitors for resizing of the browser window. If the story’s canvas size changes, the resize controller rebuilds the story animation to match the new size.
As a browser window is resized, it fires a stream of events notifying each interim size. Rendering a ProStyle story is a relatively hefty task. Regenerating the story for every one of the events would require a lot of system resources. We use a throttle to avoid this. With throttling, the resize happens only after a period of time has elaspsed after the last resize event.
The value is a number in seconds. A value of 0 results in real-time resizing as the window edge is dragged.
The tap controller segments the canvas into four areas that can be tapped or clicked to control playback. There are two rows. The first row contains tap areas that correspond to the back, toggle, and next actions. The second row is a non-visible trackbar. The timeline will seek the story to the position relative to where on the tap area was hit. The relative sizes of the rows and the relative sizes of the tap areas on the first row are configurable.
The tap controller is used on the front page’s splash animation.
The relative sizes of the click areas is defined as three numbers in an array, corresponding to the width of the back tap area, the toggle tap area, and the next tap area. Areas can be omitted by setting the width to 0. For example, to only have back and next, use [50,0,50].
The relative sizes of the rows is defined as two numbers in an array, corresponding to the height of the play buttons row and the height of the seek row. A row can be omitted by setting the height to 0. For example, to only have the play buttons row, use [100,0].
If true, the tap areas will use custom mouse cursors.
The track controller renders a trackbar at the bottom of the story. The user can seek the timeline to any position by clicking on the bar. It also provides control buttons to play and pause, rewind, and play next.
The track controller can be seen in the gallery. All gallery examples use it.
The foreground color of the bar and buttons.
The foreground color of the bar and buttons when the mouse is hovered on them.
The color of the track background.
Each step on the trackbar displays as a gradient between two colors. This is the left, starting color.
Each step on the trackbar displays as a gradient between two colors. This is the right, ending color.