E-Learning Heroes Challenge #152 – Combining Text and Images in E-Learning. The brief: This week, your challenge is to share an example to demonstrate how text and images can be used in e-learning.

For this challenge I shared four simple ideas that were all created within Storyline. Click the image below to see what I shared for the challenge:

Slide 1: Text coming out of the image

For the title page, I wanted the text to look like it was coming out of the skyline and to create this effect, there’s actually two of the same images placed exactly on top of each other. However, the image at the front has been cropped:

In the timeline, the complete image is at the bottom and the cropped at the top:

Placing the text box in the middle creates the effect that it’s coming out from behind the buildings but really it’s just coming out from behind the cropped image. There’s a ‘Fly In’ animation on the text with the duration set to 3.5 seconds and coming in from the bottom (set in Effect Options).

Slide 2: Text overlay 1

This slide full screen image with a rectangle shape containing some text) placed to the right. The shape has a ‘Fly In’ animation (1 sec duration and coming in from the right). I also made the shape slightly transparent by right-clicking on it, selecting ‘Format Shape’ and adjusting the transparency to 25%.

Slide 3: Text overlay 2

On this slide, I coloured the background pale grey, and positioned my image at the top of the slide. Then I added a rectangle that slightly covered the image and didn’t completely fill the space at the bottom. The text itself sits in a text box on top of the shape and I applied a fade animation (1 sec duration). From the ‘Effect Options’ dropdown I chose ‘By Paragraph’ which makes each paragraph of text appear separately.

Slide 4: Question

This slide wasn’t built using a quiz slide (but it could be) which meant I needed to create everything from scratch. I started with my background image and added two new states – a correct and incorrect:

For each of the new states, I went to the ‘Format’ tab and increased the brightness by 10% and recoloured the images:

Then I added four rectangles, one for the question and one for each answer. For the demo, Option C is the correct answer, so I also created a state for each option:

Lastly, I added a layer that contains a button to replay the demo (the trigger is to jump to the first slide when the button is clicked) and also prevents another answer being selected (go to ‘Layer Properties’ and tick the box next to ‘Prevent the user from clicking on the base layer’).

Then I needed to add triggers to each answer option to make it all work:

So that’s how I created each of my slides for this challenge. There were lots of other creative ideas shared by community members in this challenge and you if have ideas, please share them in the comments area below.

All images used in this demo came from Death to the Stock Photo.