This week our quick tip will teach you how to make a series of animated images and pages. In this post you will learn about the ‘Animation’ button and ‘Timers’.
This technique is helpful:
- If you have a lot of text that you would like to break up onto several pages.
- If you want your project to work better on mobile, where there isn’t always space for long passages of text.
- If you’d like to build up scenarios.
How I built this example
To begin with, I built my first page which I will use as the template for my other pages.
I chose to make this a ‘Text and Image/Multiple boxes’ page, as in the default themes this page type has animation controls on the text and image boxes.
Firstly I added my image and text:
Next I thought about how I’d like my text and image to animate in. I chose to have the man appear first and then the text appear after.
I double clicked the image so that all the edit buttons would display:
Then I chose the ‘Animation’ button:
I changed ‘Animate in’ to ‘Fade In’ so that my image will fade in when the page is opened, I didn’t need to change any of the other settings.
I then double clicked the text and opened it’s animation properties:
I added ‘Fade in’ again, but then I made one other small alteration, I changed delay to ‘1’ so that it would display a second after the man has appeared.
Once my template page had been made, I duplicated it twice (this saves me having to change these settings on the new pages).
I added a different image and text to each of the new pages. Once I had all my pages set up, my next step was to control how to animate between the pages.
Animating between pages
To animate between the 3 pages I used the timers feature, I started by opening page 1.
I then opened the ‘Page settings’ menu and selected the ‘Time limits’ tab:
Then where it says ‘Redirect to this page after the following time’ I added the length of time that I wanted to view the page for before moving to the next page.
In this case 5 seconds or 00:05.
Then I chose a page to redirect to once I have viewed my first page for 5 seconds, I chose page 2 in this case:
I pressed ‘Save page settings’ to save the changes for this page then I repeated the same steps on my second page but I changed the page to redirect to my third page:
…and there we go, a series of automatically advancing pages with animations. Give it a shot yourself, if you are feeling really fancy why not add a countdown to the page using the ‘Amount of time remaining on page’ ‘Clip’ (for more info about ‘Clips’ see here).
Next week we’re going to take a look at how to create a timed questionnaire, see you then!
Latest posts by Joe Burns (see all)
- Introducing the new WYSIWYG Layout Designer in Elucidat - April 16, 2018
- The 6 Most Misunderstood Myths About Mobile Learning - July 2, 2016
- How to overcome the top 5 HTML5 elearning challenges - June 30, 2016