How to create an Image Sequence Step (Basic Details)

Here is a quick guide to create an easy image sequence step. For more advanced tips, check out our other Image Sequence support pages.

Try out a Demo Image Sequence Step here

Creating an Image Sequence (Benny's Tech Tips)

Creating an Image Sequence (Step by Step)

1. Once you have added a new Image Sequence step from the "Add Step" menu, give your Image Sequence Step a name so that you can can distinguish the step in editor mode. This step name is not displayed to the learner - only for your reference. You must have a step name before you can add the step.


2.Upload your images to your Image Sequence Step. For our example (images already uploaded), we have about 50 images of a tap being slowly turned from right to left, with each image being incrementally different to the other. Ensure your images are named sequentially in the order you wish them to appear in. We recommend anywhere between 20-100 images per sequence. The more images you use, the smoother the sequence, but also the longer it will take to load for the learner.


3. Once your images are uploaded, you will be able to navigate between them, deleting any frame you wish. You can also add images in the middle of the sequence uploading them into the previous area where we uploaded our initial images. If you would like to remove all images and start again, you can hit the "Replace" button.


4. Change the instructions the learner will see, how long they will see those instructions before they auto hide, and the position of the instructions box on the screen.

You'll want to ensure these instructions give the learner a clear explanation on what they must do to complete this step. This is because when the learner loads into this step, they will see an image with no context (unless context is supplied in the image), so the learner will only have what you give them in these instructions. This is especially relevant for image sequences as learners may not know to click and drag.


5. The direction for moving through images defines the direction you must click and drag to scroll through the sequence of images. For our tap example, I am dragging the tap from right to left, so we should set the drop down to that. If I was doing a vertical movement, I would change this dropdown to bottom to top, or vice versa, depending which direction I am moving the object.


6. You can now add the step. This will load the images in, and take you to an image sequence editing screen. From here we need to click to add a range.


7. Drag the blue section bars so that they are within your "correct range". This means the area where the user must drag the image for it to be correct. For this example, lets say we were testing the learner to make the tap produce cold water. This means the tap should be turned to the right. Images 1-18 are roughly the images where the tap is on the right side, so that would be correct. The start bar defines what part of the sequence the learner loads the step into. Again for this example, we have them load when the tap is in a neutral (warm) position - roughly the middle of the sequence.


Next Page: The Image Sequence Step (Advanced Settings)