The Panorama module – how I created it

Last time I demonstrated a panoramic effect in Lectora. This time I thought I would share with you how it was done.

Choose your image

You need an image longer (or taller) than your actual page dimensions. In this case I chose a picture of the sky I took over the Isle of Wight:panorama

Position your picture

Decide where you want it to display on the page initially and make a note of the X and Y positions. These are taken from the top left of the image (if you have a group of objects, it will be the top left of the top left object). I set it to be at X=0 and Y=0.

Set up the move to actions

The next thing you need to do is decide where it moves to on each action and set a move to action to that point. The simplest thing would be to have it move to a precise position. However you might want to build in some flexibility in how your learner moves the image.

For example the learner clicks a button once (or swipes across the screen) and the image moves in one direction. They could then click or swipe to move in the same direction to a second position, but they could also move it back in the opposite direction. This is especially the case if the module is exploratory, but less of an issue if learners are directed down a certain path to complete the module.

Let the users take control – use variables to set the X or Y positions

To allow this flexibility, use a variable to populate the X or Y position and have a separate action to modify that variable. I have found it is usually best to move the image in incremental steps so all you need do is add or subtract a specific value from the variable.

You will need the image to stop at its final position

At some point you will want the image to stop at its final position so the learner can’t keep clicking and have it slide off the screen. When you create your action to modify the variable you will need to include a condition to have it change only up the value of that final position.

In my example I wanted the object to move twice to the left to X values of -781 and -1562. I then wanted to be able to move it back to its initial position of 0.

So, once you have decided where your image should display initially, the positions it should move to and its final position.

How to make it happen

1. Create an action group

Create a group
Create a group

2. Add an action to modify variable

Add an action to modify a variable that you will use to define the X or Y position (depending upon whether you are moving your image horizontally or vertically – if it’s both you will need to have two actions and two variables).


3. Create a condition

Create a condition that the variable should only be modified to the final position, otherwise set the variable for that position


4. Create an action to move the object

Now create an action to move the object to relevant position. For the position defined by the variable, click on the VAR drop down and select the variable.

5. Set an action to run the group

The final step is to add an action to run this group when the user clicks the button or swipes.

Try it for yourself

If you would like to have a go, head over to the Trivantis community to preview the module and download the Lectora files.

This is my own solution. There may be more elegant ways of doing the same thing which you know about. Feel free to share in the comments below.

JustGiving - Sponsor me now!
I completed the Prudential Ride London 100 in 5 hours and 45 minutes. That’s the fastest 100 miles I have ever ridden. I was riding for the British Heart Foundation and there is still time to sponsor me. Just click on the button above.