How To Make Background Images Clickable in Articulate Storyline (Video Storyboard)
Review Instructions: When reviewing this storyboard, please provide
feedback on the following:
●Accuracy, clarity, and completeness of the content (including
audio)
●Organization of topics and flow of the course
●Timing (are there any portions where the timing is too long or
too short)
●Engagement level for learners (do you think this layout will
keep the audience’s attention throughout)
Notes:
●Focus particularly on interactions/animations, visual display,
and learning objectives (LOs)
●Ensure frame dimensions for the video is 1280:720
●“F” stands for “frame”; “F” with a number (i.e. F1.1, F2.1,
etc.) indicates the frame on which certain texts or actions
occur
●Keep track changes on and show all markups
●Insert comments to leave feedback, comments and questions
●Make corrections via inline text edits
●Review cycle is due for completion on 6/25
Target Audience: Instructional design students at Franklin
Instructional Design College
Learning Objectives: Upon completion of this training, the learner
will be able to:
●Explain the steps for making a standard background image
clickable in Articulate Storyline
●Create interactive background images in Articulate Storyline
Learning Level: Knowledge and Apply
Seat Time: 3-5 minutes
Audio: Will be recorded once script has been approved
Color Palette:
Font: Trebuchet MS (bold and regular)
Outline:
●Introduction
●Select and Set a Background Image
●Decide Which Image Elements To Make Clickable
●Use Transparent Shapes to Make Images Clickable
●Trigger Transparent Shapes for Action and Verify They Work
●Summary/Conclusion
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)
Scene 1: Welcome/Introduction
Script/Audio (SA):
1. Script: Hello and welcome to this exciting training video. In this video, we will explore how to make background images clickable- a
fun and creative technique that can enhance the effectiveness of your Articulate Storyline courses by creating a more immersive and
dynamic learning experience that increases learner engagement. Gone are the days of “dead space” in your courses. By the end of
this video, you will have a solid understanding of the steps needed to make your background images clickable and be able to apply this
knowledge to turn ordinary background images into interactive tools that unlock hidden content, launch videos, trigger animations,
and more. So, let's dive in and discover how to make your background images truly come to life in Storyline!
2. Audio: Upbeat background music plays in the background at a low volume
Visuals:
F1.1
F1.2
F1.3
F1.4
F1.5
F1.6
On Screen Text (OST):
●OST 1: How to Make Background Images Clickable (centered
near the top of the screen above the storefront)
Animations/Flow of Video:
●F1.1: None
●F1.2: Finger and OST 1 fly in at .25s; Finger then
appears to click the door of the store twice
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)
●F1.3: Finger appears to click the left window twice
●F1.4: Finger appears to click the right window twice
●F1.5: Finger appears to click the cloud in the upper-left
corner twice
●F1.6: Finger appears to click the sun in the upper-right
corner twice
●Video will loop back to F1.1 when F1.6 completes and
continue repeating the frames until after the audio says
“...life in Storyline”
●Video will complete a “Pixelated” transition after audio
says “...life in Storyline”
Scene 2: Select and Set Your Slide Background Image
Script/Audio:
1. Script: To begin, you need to choose an appropriate background image and set it as the background for your slide. There are
two ways to do this; first, you can select an image from the preloaded options in Storyline, available under the 'Insert' tab.
You can then adjust the size to fit your slide dimensions. Alternatively, if you have your own royalty-free image saved on your
computer, you can use that. To set the image as the slide background, right-click on the slide and select "Format background".
Next, choose “Picture or Texture Fill”, then click “Insert from”, followed by “File” and choose your selected image and
"Close". With your background image now set, you can move on to the next step.
2. Audio: Same upbeat background music continues playing in the background at a low volume
Visuals:
F2.1
F2.3
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)
F2.4
F2.6
F7
On Screen Text (OST)
●OST 1: 1. Select and set the slide background image
●OST 2: Use preloaded images in Storyline
●OST 3: Use your own royalty-free image
●OST 4: Right-click the slide
●OST 5: Select ‘Format Background’
●OST 6: Choose ‘Picture or texture fill’
●OST 7: Click ‘Insert from’
●OST 8: Choose ‘File’, select your image, and click ‘Close’
Animations/Flow of Video:
●F2.1: Spotlight dims background image
●F2.2: OST 1 text box fades in timed with the audio
reference and fades out after audio says “...for your
slide.”
●F2.3: OST 2 text oval and extending arrows enter the
screen with a “Scale” behavior; when audio says “insert
tab”, a yellow oval enters with a “Pulsating” behavior
around the word ‘Insert’. OST 2 text oval, arrows, and
yellow oval exit with a “Shrink” behavior when audio
says, “...to fit your slide dimensions”
●F2.4: OST 3 text oval enters the screen with a “Scale”
behavior timed with the audio and exits with a “Shrink”
behavior after audio says, “...as the slide background.”
●F2.5: OST 4 and 5 text oval and extending arrow enter
the screen with a “Scale” behavior timed with their audio
references and remain until they exit with a “Shrink”
behavior after audio says, “...select format background.”
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)
●F2.6: OST 6, 7, and 8 text ovals and their extending
arrows enter the screen with a “Scale” behavior timed
with their audio references and exit with a “Shrink”
behavior after audio says, “...and close”
●Video will complete a “Pixelated” transition after audio
says “..and close” to show F7
●F2.7: Video will complete a “Pixelated” transition after
audio says “..on to the next step”
Scene 3: Decide Which Image Elements To Make Clickable
Script/Audio:
1. Script: After adding the background image to your slide, the next step is to identify the image elements that should be clickable. It's
important to ensure that your choices add value to the learning experience, rather than simply serving as a means of interaction. For
instance, in my example, I have selected the doors in the image as clickable links, taking learners to new rooms that offer
opportunities for further learning and hands-on practice. This approach not only keeps learners engaged and physically active in the
lesson, but also appeals to their emotional and mental curiosity as they anticipate discovering the learning experience behind each
door.
2. Audio: Same upbeat background music continues playing in the background at a low volume
Visuals:
F3.1
F3.3
F3.4
F3.6
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)
On Screen Text (OST)
●OST 1: 1. Identify the image elements you want to make
clickable
●OST 2: Choose your clickable elements
●OST 3: Helps keep learners engaged and curious!
Animations/Flow of Video:
●F3.1: Spotlight dims background image and remains until
F3.2 ends
●F3.2: OST 1 text box fades in timed with the audio
reference and fades out after audio says “...should be
clickable.”
●F3.3: Spotlight ends when frame begins revealing normal
image
●F3.4: The yellow rectangle outlines for the two doors,
OST 2 text oval and its extending arrows enter the screen
with a “Scale” behavior and remain until they exit with a
“Shrink” behavior when the audio says, “...hands-on
practice”
●F3.5: OST 3 text box fades into the screen when the
audio says “...but also appeals..” and fades out when
audio says, “...learning experience behind each door.”
●F3.6: Video will complete a “Pixelated” transition after
audio says “..behind each door.”
Scene 4: Use Transparent Shapes to Make Image Elements Clickable
Script/Audio:
1. Script: Once you have determined which elements to make clickable, it's time to make them interactive using transparent shapes. To
begin, head over to the "Insert" tab at the top of your screen and select "Shapes". Choose a shape that closely matches the element you
want to make clickable, or one that can cover it entirely. In my example, the doors are a rectangular shape, so I will select the regular
rectangle option and drag it over the door until it covers it completely. At this time, you want to immediately go down to the timeline
and rename this element to avoid confusion later. In my case, I will rename this rectangle "Door 1 Rectangle". To make the rectangles
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)
transparent, make sure the shape is selected, then go to the top panel and select the "Format Shape" tab. From there, click “Shape
Fill” and then “No Fill”from the pop-up box. You also want to make sure to remove any outlines on the transparent shape. So, go back
to the top panel and click “Shape Outline” and Select “No Outline” from the pop-up box. The rectangle is now completely
transparent, revealing the image behind it. Repeat this process for any other background image elements you want to make
interactive, ensuring they are completely covered by the shape. Once all your desired elements have been covered with a transparent
shape, move on to the final step.
2. Audio: Same upbeat background music continues playing in the background at a low volume
Visuals:
F4.1
F4.3
F4.4
F4.6
F4.7
F4.9
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)
F4.10
F4.12
F4.13
F4.15
F4.16
On Screen Text (OST)
●OST 1: 3. Make background images clickable using transparent
shapes
●OST 2: Go to ‘Insert’ tab
●OST 3: Select ‘Shape’
●OST 4: Choose a shape that will fully cover your image element
●OST 5: Drag shape over element until it is fully covered
●OST 6: Go to the timeline and rename the element
●OST 7: Make sure the shape is selected
Animations/Flow of Video:
●F4.1: Spotlight dims background image and remains until
F4.2 ends
●F4.2: OST 1 text box fades in timed with the audio
reference and fades out after audio says “...interactive
using transparent shapes.”; frame exits on a “Pixelated”
transition after audio says “...interactive using
transparent shapes.”
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)
●OST 8: Click ‘Format’
●OST 9: Click ‘Shape Fill’
●OST 10: Select 'No Fill'
●OST 11: Click ‘Shape Outline’
●OST 12: Select ‘No Outline’
●OST 13: Repeat this process to make other image elements
clickable
●F4.3: Frame begins with a zoom animation towards the
‘Insert’ tab. OST 2 text oval and extending arrow enter
the screen with a “Scale” behavior and a yellow oval
enters with a “Pulsating” behavior around the word
‘Insert’ after audio says “...to begin.” OST 2 text oval,
arrows, and yellow oval exit with a “Shrink” behavior
when audio says, “...top of your screen”
●F4.4: OST 3 text oval and its extending arrows enter the
screen with a “Scale” behavior timed with audio
reference and remain until they exit with a “Shrink”
behavior when the audio says, “Select Shape”
●F4.5: OST 4 text oval, its dotted line, and yellow bracket
enter the screen with a “Scale” behavior timed with audio
reference and remain until they exit with a “Shrink”
behavior after the audio says, “...regular rectangular
option”. A yellow highlight box enters over the regular
rectangle option timed with the audio reference and
remains until after audio says “...regular rectangular
option.”
●F4.6: OST 5 text oval and its extending arrows enter the
screen with a “Scale” behavior timed with audio
reference and remain until they exit with a “Shrink”
behavior after the audio says, “...covers it completely.”
●F4.7: OST 6 text oval and its extending arrows enter the
screen with a “Scale” behavior timed with audio
reference and remain until they exit with a “Shrink”
behavior after the audio says, “...door 1 rectangle”
●F4.8: OST 7 text oval and its extending arrows enter the
screen with a “Scale” behavior timed with audio
reference and remain until they exit with a “Shrink”
behavior after the audio says, “...shape is selected”
●F4.9: OST 8 text oval and its extending arrows enter the
screen with a “Scale” behavior timed with audio
reference and remain until they exit with a “Shrink”
behavior after the audio says, “...select the Format tab”
●F4.10: OST 9 text oval and its extending arrows enter the
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)
screen with a “Scale” behavior timed with audio
reference and remain until they exit with a “Shrink”
behavior after the audio says, “Click shape fill”
●F4.11: OST 10 text oval and its extending arrows enter
the screen with a “Scale” behavior timed with audio
reference and remain until they exit with a “Shrink”
behavior after the audio says, “...then no fill”
●F4.12: None
●F4.13: OST 11 text oval and its extending arrows enter
the screen with a “Scale” behavior timed with audio
reference and remain until they exit with a “Shrink”
behavior after the audio says, “...shape outline”
●F4.14: OST 12 text oval and its extending arrows enter
the screen with a “Scale” behavior timed with audio
reference and remain until they exit with a “Shrink”
behavior after the audio says, “...no outline.”
●F4.15: OST 13 text oval and its extending arrows enter
the screen with a “Scale” behavior timed with audio
reference and remain until they exit with a “Shrink”
behavior after the audio says, “...covered with a
transparent shape.”
●F4.16: Video will complete a “Pixelated” transition after
audio says “...final step”
Scene 5: Trigger Transparent Shapes for Action and Verify They Work
Script/Audio:
1. In the final step, you will trigger your transparent shapes to perform specific functions upon clicking. As an example, I have created
layers for Step 1 and Step 2. The Step 1 layer has a green triangle and the Step 2 layer has an orange circle. I will set triggers for
each layer to appear when their designated door is clicked. Once all triggers have been successfully set, it is now time to test if the
clickable background images are functioning correctly. Upon clicking the Step 1 door, the green triangle appears. When I click the
Step 2 door, the orange circle appears. This confirms my triggers are working correctly and I am ready to add content for learners to
these two layers.
2. Audio: Same upbeat background music continues playing in the background at a low volume
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)
Visuals:
F5.1
F5.2
F5.3
F5.4
F5.5
F5.6
F5.7
On Screen Text (OST)
●OST 1: Set triggers for each transparent shapes
●OST 2: Step 1
Animations/Flow of Video:
●F5.1: Yellow highlight box enters the screen with a
“Scale” when the audio says “as an example…”and
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)
●OST 3: Step 2
remains until it exits with a “Shrink” behavior after the
audio says, “...created layers for step 1 and step 2.
●F5.2: The Step 1 and 2 arrows enter the screen with a
“Scale” behavior timed with their shape reference (i.e.
grenn triangle or orange circle) is referenced in the audio
and remain until they exit with a “Shrink” behavior after
the audio says, “...orange circle”
●F5.3: OST 1 text oval and its extending arrows enter the
screen with a “Scale” behavior timed with audio
reference and remain until they exit with a “Shrink”
behavior after the audio says, “...have been successfully
set…”
●F5.4: Yellow arrow fades in and appears to click the Step
1 door and fades out after audio says “...clicking step 1
door…”
●F5.5: OST 2 green text triangle enters screen after audio
says “...clicking step 1 door…” and remains until after
audio says “...green triangle appears.”
●F5.6: Yellow arrow fades in and appears to click the Step
2 door and fades out after audio says “...clicking step 2
door…”
●F5.5: OST 3 orange text circle enters screen after audio
says “...clicking step 2 door…” and remains until after
audio says “...to these two layerss.”
●F5.7: Video will complete a “pixalated” transition after
audio says “...to these two layers”
Scene 6: Summary/Conclusion
Script/Audio:
1. Script: In conclusion, incorporating clickable background images in Articulate Storyline is an effective way to enhance the
interactivity and engagement of e-Learning courses. So, give these steps a try when creating your next course.
2. Audio: Same upbeat background music continues playing in the background at a low volume
Visuals:
●Same as Scene 1
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)
On Screen Text (OST)
●OST 1: Same as Scene 1
Animations/Flow of Video:
●Same as Scene 1 but no “Pixelated” transition at the end
How to Make Background Images Clickable in Articulate Storyline (Video Storyboard)