Documentation
Animation
Description
The Animation module allows users to add animations made from a single image to a presentation. To start the animation, simply click its preview image, then click again to pause it. If you want to stop it, use the stop() command (described below).
Properties
The list starts with the common properties. Learn more about them by visiting the Modules description section. The other available properties are described below.
| Property name | Description |
|---|---|
| Preview image | An image that serves as a cover (thumbnail) for the animation.
This property allows online resources. Find out more » |
| Animation | An image that serves as a base for the animation. It should contain at least one frame.
This property allows online resources. Find out more » |
| Frames count | Number of frames specifies how many pieces an image will be split into. In our example, it is 6. Remember to set here only positive integer numbers! |
| Frame duration | Time (in milliseconds) between each frame change. |
| Frame size | A list of possible frame size adjustments to the module's size. The choice is between: "Original" (no changes), "Keep aspect ratio", and "Stretch". |
| Loop | With this option selected, animation does not stop after the last frame - it starts from the beginning. |
| Labels | A collection of text labels shown during the animation. Each label is composed of a text string, its position (counted from the animation's upper-left corner) in pixels, and frames (counted from 1 to n, where n is the last available frame). |
| Show watermark | With this option selected, a watermark will be displayed to inform the user that it is necessary to click the module to start the animation. |
| Watermark color | Watermark color in #RRGGBB format (default is #000000 - black). |
| Watermark opacity | Watermark opacity (value must be between 1 - fully visible and 0 - fully transparent, the default setting is 1). |
| Watermark size | Watermark size counted in pixels. |
| Don't reset on end | With this option selected, a preview image will not be displayed after the animation ends. |
| Is click disabled | With this option selected, the user can interact with the module only via commands (mouse actions are disabled). |
| Speech texts | Sets the values of speech texts - predefined phrases providing additional context while using the module in the Text To Speech mode. Speech texts are always read using the content's default language. |
| Alternative text | This text will be added to the module's HTML tag. It will be read by the Text To Speech module (if used) after the user performs a certain action. |
| Preview alternative text | This text will be read by the Text To Speech module in the preview. |
| Lang attribute | This property allows defining the language for this module (different than the language of the lesson). |
| Base width | 'Base width' and 'Base height' properties are used for positioning labels. Suppose the current dimensions of the module differ from those provided in the 'Base width'/ 'Base height' property (because the module has a different size depending on the selected layout). In that case, the position of the labels will be scaled appropriately. If the properties are left empty, the position of the labels will be the same regardless of the size of the module. |
| Base height | This property is used for positioning labels. See 'Base width' property for more details. |
Animation image example
The above image contains 6 frames, each with equal width and height.
Supported commands
| Command name | Params | Description |
|---|---|---|
| stop | --- | Stops the animation and displays the 'Preview image'. |
| play | --- | Starts the animation. |
| pause | --- | Pauses the animation. |
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
Advanced Connector integration
Each command supported by the Animation module can be used in the Advanced Connector module's scripts. The example below presents how to show and play the animation when the user selects the correct answer in a True False activity and how to stop it and hide it when the answer is incorrect.
EVENTSTART
Source:TrueFalse1
Score:1
SCRIPTSTART
var animation = presenter.playerController.getModule('Animation1');
animation.show();
animation.play();
SCRIPTEND
EVENTEND
EVENTSTART
Source:TrueFalse1
Score:0
SCRIPTSTART
var animation = presenter.playerController.getModule('Animation1');
animation.stop();
animation.hide();
SCRIPTEND
EVENTEND
CSS classes
| Class name | Description |
|---|---|
| animation-image-animation | An image that serves as a base for the animation. It should contain at least one frame! Do not change the background properties for this element! |
| animation-image-preview | An image that serves as a preview for the animation. Do not change the background properties for this element! |
| animation-label | Labels are span elements that are shown when the animation is not playing. Do not change/set the position attributes for these elements! |
| animation-loading-image | Loading image shown while loading resources. The image is placed in the animation's center. The default width and height are 50px. Do not change/set the position attributes for these elements! |
| animation-watermark | DIV surrounding the watermark canvas element. |
The module accepts all CSS selectors and modifiers, e.g., if the user would like to specify a separate appearance for a preview image on mouse hover, a CSS declaration could look like this:
.Animation_custom {}
.Animation_custom .animation-image-preview {
border: 2px solid black;
}
.Animation_custom .animation-image-preview:hover {
border: 2px solid red;
}
This declaration will result in a red border for the module's preview image on mouse hover.
Demo presentation
Demo presentation contains examples of how to use the Animation module.