This video shows how to make animated image captions to display hidden objectives or additional contents to introduce e-learning modules.
It shows a way to make rollover and rollout animations to show/hide captions. It is html5 compatible and for desktop projects.
The objective from a basic illustration is to apply one or several animations to a Rollover state which will reveal a caption with its content then to apply a reversed animation to a Visited state (used as rollout) to hide this caption again.
A few examples are shown, then one of them made from scratch.
For a better display set the quality of this video to “HD”.
Thanks Jean!
I found the tutorial very easy to follow, and I like how you showed how thinking outside the box can foster creativity. It took me a minute to get used to the text to speech voice, but I can see how using the feature can be effective. I plan on using the text to speech feature more in my projects to eliminate the ums and ahs.
Thank you Rollin for your feedback and your remark on how the way of thinking outside the box can be advantageous sometimes. About the text to speech voice I was wondering how this digital voice was really perceived and if it was understandable everywhere (in all countries). So your feedback is very useful to me. By listening it, I had also perceived that a little time could be necessary to get used to it. Thank you.
Hey Jean,
This is awesome! I really like your creative use of staggered effects to achieve an almost “compositional level” interactions. Very smart. Your overall design is really unified and nice. Overall tutorial was very easy to follow and understand and super creative. Did you create artwork or source it?
Thanks for contributing this to the community.
Cheers,
Steve
Hi Stephen, thanks for your appreciation and feed-back.
About the graphic design, I usually design and create the whole ergonomics on my own, but for the pictures used as example I often use the ones of a Library. The pictures that move inside the 4 effects are from a library for instance.
Actually it depends on the video and the free time I have. For the “loop animation…” video I made last year I had created the main landscape.
But for private projects and customers I do all according to the project and context. To me the graphic design and the ergonomics have always been important points for e-learning projects like the way we deliver information and knowledge.
Cheers,
You must be logged in to post a comment.
