How I created a pop-up coloring book

Several months ago, I saw an image of a pop-up book at Freepik.com where I like to get images for eLearning projects. At the time, I just downloaded a few of the images for use later. When the E-Learning Heroes Challenge 190 to create a coloring book came out, I decided to combine that challenge with the idea I had of creating a pop-up book.

I had no idea how I was going to accomplish that, I just started gathering more images so I would have a selection for the project. I also started looking at the examples of the coloring books to see how that could work.

I also wanted to include a page flipping action but did not know how to do that either.

I have to admit, I used to wonder why people are doing these challenges as many times they would not be something you would do in eLearning to help someone learn. Many of the examples in the past are very creative and inventive, but I could not see them being used in a course.

What I have learned from entering these challenges is they test, stretch, and add to your skills and knowledge with Articulate Storyline and other tools such as Microsoft PowerPoint, screen captures, photo editors and many more. This challenge is an example of how I started with an idea and learned to do things I did not know how to do. I also cannot thank enough all of the people in this community who have helped me by their advice and help through the years by posting their ideas, examples, and advice.

Skills Involved

PowerPoint

• Insert images into a presentation
• Remove Background
• Format color
• Format Picture Effects 3D
• Format Color Set Transparent Color
• Format Painter

PowerPoint 2016

• Making a page turn in PowerPoint 2016
• To find this, I did a browser search for page turn animation

Storyline

• Layers
• Triggers
• Variables
• Buttons
• Insert Pictures
• Format Painter
• Format Change Color
• Insert Video and Edit Video

Resources Used

Images Freepick.com

• Artist Janoon028 use this code to search for these images.
• I originally searched for silhouettes

Snippy tool for captures.

Steps to Build

Step #1:

Gather all relevant images from freepik.com

Follow artist Janoon028 for all images.

Use screen capture tool to break out shapes from larger image.

Use Format Remove Background in PowerPoint to clean up each shape.

Step #2:

Insert background image of an open book on a table with background in Storyline.

Insert one shape on the book image to jump to the next slide.

Uncheck Prev and Next buttons and use a minimum player.

Step #3:

Experiment with building a pop-up action first.

Determined need for using PowerPoint to make the shape look flat.

Select image, click Format, Picture Effects, 3-D Rotation, Parallel and select Off Axis 1: Top.

Flat image is Normal in Storyline.

Step #4:

Select the Flat image, create a new state titled popup and paste the original shape here.

May need to make the popup image a new color for contrast.

Create the triggers to make the pop-up effect.

Create a button called popup and set the trigger to change the boy state to popup.

Test this effect.

Apply this effect to two other shapes on the book.

Step #5:

Create a page turn effect.

Open PowerPoint 2016.

Paste the image of an open book on two slides.

Click Transitions then Page Curl (Need to search all transitions to find this).

https://www.free-power-point-templates.com/articles/how-to-apply-page-turn-effect-in-powerpoint-presentations/

File, Export, Create a Video, set each slide to 1 second, and named the video Page Turn.Mp4.

Step #6:

Insert the video into Storyline on the second slide.

Edit the video so it only shows one page turning.

Change the length of the slide to .5 seconds so it turns quickly.

Duplicate this slide at each point where you want to see the page turn.

Step #7:

Create the color scheme needed for this to be part of the color book challenge.

Created only 4 colors; red, blue, black, and green for simplicity.

Start with the one shape and create 4 variables one for each color.

Copy the upright image and paste it as the states boyred, boygreen, boyblue, and boyblack.

Used More Variations and selected red, blue, green, and black from the Standard colors and Theme Colors.

Create True/False triggers that are true for each color but then false for the other colors. See image for example.

Apply triggers to change the shapes to a selected color if it is true then change the shape to that color when it is clicked.

To see a blow by blow set of instructions, click How I Created a Pop-up Coloring Book.

A Copy of the Story file is attached. Have fun!