Labelled interactive image: Las Meninas

meninas2A couple of years ago, when visiting Museo del Prado in Madrid, I was amazed by one of the masterpieces of the Spanish painter Diego Velázquez. Back at home, I created a labelled image with a free software called Images Actives.

Unfortunately, this freeware hasn’t been updated since 2011, and this week when I tried to revamp the first version of the file, I got some bugs especially when zooming the image details.

For this new version of the labelled image, I used Storyline. I set up one scene linked to a Spanish and English description, using the information of Wikipedia in both languages. And I added a simple drag-n-drop interaction activity.                                                                                                      Click on the image to launch demo

Today museums  are exploring digital technologies to enhance the visitor experience. Labelled images have a great potential to make it more interactive and immersive; offering a visual description of the works of art that can be seen in museums and galleries.


Create free animations online with Animatron

Animatron is a simple and powerful online tool that allows you to create free HTML5 animations and interactive content. Creating your first animation is a very easy process:

  • In the Design Editor, upload your own assets like images, characters and backgrounds or create them using the site’s vector drawing tools and libraries
  • In the Animation Editor, add cue points in the timeline to add motion paths and change the size and shape of your figures. Or, you can create multiple scenes with different images.
  • Finally, publish your project in html or download it as video or GIF image.

If you’re using the free subscription, you can only create 20 projects of a maximum of 10 seconds each one, and they’ll have public visibility.

Highly recommended online tool!. Below, a simple animation I created to illustrate the glacial abrasion process:



Educational animations: Classification of River Deltas

“Educational animations are an effective way to create focal points, illustrate complex procedures, and help learners visualize change. Combined with controls like interactive sliders, learners can pause, replay, and control playback speed and direction to assist learning and comprehension.”

So begins ELHChallenge nº76, describing and including in one phrase, the benefits of animations used for educational purposes.

This time, and continuing with themes of Geography, I decided to transform the Diagram which classifies the types of river Deltas, into something more interactive, creating animations to show the evolution of these landforms.After searching the web, I found diagrams of the evolution of Mississippi and Ebro deltas. I used Illustrator to vectorize the images and uploaded them to to create a video. In the case of tide-dominated delta, I didn’t find a concrete example, so I drew the images and followed the same process.


Finally, on a world map, I placed markers for the most representative deltas of each category, and linked them to Google Maps.

Download my animations from Wikkimedia Commons:

How U-shaped Valleys are formed?: Show a process with animation and images

Glacial_valley_formationIt’s been a while since I’ve decided to start making my own images and animations. Animations and sequences of images are perfect to show processes; to illustrate changes in time and over space.

I had some notes from the time I taught Geography, and after searching some information on the web, I decided to illustrate the formation of a U-shaped Valley.

Using Artweaver, I drew a valley diagram, and combining layers, I got the different stages of the advance and retreat of a glacier and the resulting U-shaped valley. After exporting all the images; I used them to make a GIF file with GifMaker. There were two specific erosional processes at the base of the glacier, which I considered it was better to represent them separately, so I sketched two simple animations using Animatron.

On NASA’s website, I found amazing photographic files of the retreat of (still) existing glaciers.

Finally, I put all together: information, images and animation, using Storyline.

Download my animation from Wikkimedia Commons

View this project in Spanish: Formación de un Valle Glaciar

Information contained in this demo is based on scientific and educational resources. Below, some of the references I used:

Wikki Books: Glacial erosion and deposition

The Geography Site: Valley Glaciers.

USGS: A glacier carves a U-shaped Valley

Physical Glacial erosion 

Articulate challenge #1: Show meaningful comparisons

Over the last few months I’ve been learning the features of this excellent tool:  Articulate Storyline. Watching the tutorials and the examples shared in the community E-Learning Heroes, helped me to create my first slides. A member of the staff, David Anderson, posts a challenge every week aiming users to build engaging e-learning content.  I decided to participate in some of the challenges, and the first one is about creating interactive graphic to compare relative sizes. I tried to replicate the suggested example Planet size comparison by V. Cusomato. 


All images and data were downloaded from Nasa’s website. I used tabs for the planets selection and built a layer for each pair of planets. This example had an additional pitfall, which is the change of scale for every pair-comparison. Twenty-eight layers in total, most of them duplicated and changed the details, but still so, it took me a couple of hours to finish it. I should have picked an easier example for my first participation. 😉

Hope you like it.


Dynamic quizzes with Kubbu

Kubbu is an e-learning tool to create online activities and track student’s progress. Similar to Educaplay, this platform offers creating and sharing exercises like: Crosswords, Quizzes, and Matching elements. Every type of activity has it owns print-out module for offline homework.

An useful feature is the option of adding feedback to the quizzes answers, so if students choose the wrong choice, a prompt box reveals the correct answer and explanation (image below).


Quizzes (Slider and Composer) are the only activities where  pictures and sound files can be embedded.

In the shared activities section, you can find samples built by teachers and grouped in categories. Check them by clicking on the image.


Interactive images with “Images Actives”

Images Actives is a free software released under the GNU / GPL licence developed by the «CRDP de l’académie de Versailles ».

This downloadable software allows you to enrich your images by adding information on specific areas of the image.

It is a very handy application, and includes two types of layout:

  • Discovery mode to create an image map commentary.
  • Quiz mode to create an image where just questions appear first and where answers appear in one click.

Pros and cons I discovered:

  • Free and very easy to use. Quick download
  • This type of interaction is specially indicated for pictures with large figures
  • Final layout is customizable, changing background color, frames, legend, etc.
  • Undo is not available. When making a mistake, you need to delete the entire layer and start a new one.
  • By default the export format is swf. Html format is only available for the “Tablette numerique” mode and features are not customizable.
  •  Exporting the file step and error messages are in French.