Documentation
Animation
Description
The Animation addon allows users to add the animation 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
| 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.
