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.