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:
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
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.