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.