Getting the cogs whirring!

The latest versions of Lectora come with a range of animation effects, including fade and float in which makes for a smoother look and feel. However there doesn’t appear to be a rotate or spin animation effect. So this set the little wheels in my brain whirring and thanks to Math Notermann’s posting on the Trivantis Community I came up with a simple (ish) solution to make a spinning effect.

It is done completely with Lectora’s own capabilities

This was created using a series of timers and the change contents action; no JavaScript or CSS was used. There may be more elegant ways of doing this using some hard coding (feel free to share them in the comments below, if you would like to) but this is a relatively straightforward process which anyone with a knowledge of Lectora should be able to accomplish.

Step 1:
Choose your image

cog_b60

The first action is to create the object you want to spin. I chose a cog.

The next step is, in an image editing software; create multiple versions of your image at slightly different rotations. I rotated my image at 10 degree steps. Depending upon the complexity of your image you will not need to create images for every step. In my case the image rotated to 90 degrees looked the same as the original so, with 10 degree steps, I only had to create eight images.

Make sure you name all the images so they are easily identifiable.

Step 2:
Add your images to the Lectora title

And then delete all but the first one. This makes sure all the images are available when you apply the change contents action.

Alternatively, copy the images to the images subfolder for your Lectora title.

Step 3:
Set up timers and action groups

Screenshot of timer

Add a number of timers to the page;

turn off the auto start and set them as initially hidden – you don’t need to be able to see them in run mode. Set them to count down and the timer to one second.

Screenshot of action group

Create a number of action groups containing two actions:

  1. Change contents of the image on your page to the next rotated image file
  2. Play the next timer in line

Back in the timer set the done playing action to run each action group so timer one should run action group one, and so on.

Set an action to start the first timer – and the animation effect! Or you could set the first timer to start automatically.

Bonus:
How to get your rotation to stop and start in the same place

So you have set up a series of timers which, on finishing, sets off an action group to change the contents of the image to create the illusion of it rotating. Each action group then sets off the next timer to keep the spinning going. You might also have created a button that starts the first timer off.

What if you want to stop the spinning and start again from where you left off?

Hitting the start button again will jump back to the start image which does not allow for a very smooth rotation.

Screenshot of actions

In each action group set an action to modify a variable that increments by one each time until you get to the last action group where you should reset it to its first value.Screenshot of actions properties

Now on your start button modify your action to play timer one only if the variable is at its first value. Then create a series of actions for all the other timers to start if the variable is at the relevant value. The stop button just needs to stop all of them.

You can now start and stop your cogs from whirring!

You can view the example and download the files from the Trivantis Community. If you have any comments, please add them below.