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 on a 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 which serves as a cover (thumbnail) for the animation.
This property allows online resources. Find out more » |
| Animation | An image which serves as a fundamental for the animation. It should contain at least one frame.
This property allows online resources. Find out more » |
| Frames count | Number of frames specifies to how many pieces an image will be spitted. In our example it is 6. Remember to set only positive integer numbers here! |
| Frame duration | Time (in miliseconds) between each frame change. |
| Frame size | A list of possible frame size adjustments to the addon's size. The choice is between: Original (no changes), 'Keep aspect ratio' and 'Stretched' |
| Loop | With this option selected, animation doesn't stop after last frame - it starts from the beginning |
| Labels | A collection of text labels shown at the beginning of the animation (when the Preview image is displayed). Each label is composed of a text string and its position (counted from slide upper-left corner) in pixels |
| Show watermark | With this option selected, a watermark will be displayed after the addon's start. It's purpose is to inform a user that it is necesary to click the addon to start the presentation |
| 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, default 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, a user can interact with the addon only via commands (mouse actions are disabled) |
Animation image example
The above image contains 6 frames, each with equal width and heigh.
Supported commands
| Command name | Params | Description |
|---|---|---|
| stop | --- | Stops the animation and displays a Preview image |
| play | --- | Starts the animation |
| pause | --- | Pauses the animation |
| show | --- | Shows the module |
| hide | --- | Hides the module |
Advanced Connector integration
Each command supported by the Animation addon can be used in Advanced Connector addon's scripts. Below example shows how to show and play the animation when a user selects the correct answer in a TrueFalse 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 which serves as a fundamental for the animation. It should contain at least one frame! Do not change background properties for this element! |
| animation-image-preview | An image which serves as preview for the animation. Do not change background properties for this element! |
| animation-label | Labels are span elements which are shown when the animation isn't playing. Do not change/set position attributes for these elements! |
| animation-loading-image | Loading image shown while loading resources. The image is placed in slides center. Default width and height are 50px. Do not change/set position attributes for these elements! |
| animation-watermark | DIV surrounding watermark canvas element |
The Addon accepts all CSS selectors and modificators, e.g. if a user would like to specify 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 over the addon's preview image on mouse hover.
Demo presentation
Demo presentation contain examples of how to use and configure the addon.