Matthew Bibby
Matthew Bibby

Adding a Flip Book to Your Storyline Course

In this tutorial we will look at how to create flip books that can be added to your eLearning courses.

Matthew BibbyMatthew Bibby

Have you ever wanted to add a flip book to a Storyline course?

No, I'm not talking about those flip books we used to make when we were kids. You know, the ones where you draw a little picture in the corner of the page, and then flick the pages to see the drawing move...

Image borrowed from Uncle John's Crazy Town.

I'm talking about the kind that make your content look like a real book or magazine, complete with page turning animations.

You know the ones.

While skeuomorphism isn't as 'cool' as it was a few years ago, these flip books are a great way to present lengthy reference documents within a course. Also, knowing how to put these books together will come in handy the next time a client asks you to build them a bookcase.

And we all know that request is going to happen again!

Designing The Flip Book

Before we dig into all the technical details of how to set this up, it is important to get clear on the design of the flip book. Of particular importance, we need to decide on the dimensions of our eLearning course so that we can build a flip book that fits within the space that is available.

For this demonstration, let's set up a Storyline file with a Story Size of 1024px by 768px. You can adjust this setting by going to Design > Story Size:

Adjusting story size

Why this size? Why not! The point is that we need to decide what dimensions we are going to use, so that we can develop a flip book that is sized appropriately for our course.

While the pages of these books can be built using HTML and CSS, that's beyond the scope of this tutorial. Instead, we are going to use a series of images for this book, with each single page being a separate image.

Note: While it may be quicker to build these flip books using images, it is important to consider the impact that this has on the accessibility of your course. If you are developing accessible courses (and you should be, because accessibility is important) then you'll need to keep this in mind.

HTML, CSS, JavaScript... What's the difference?

HTML is the content. CSS is what makes it look pretty. Javascript is what makes it do stuff.

Figuring out the Dimensions of Our Flip Book

So we know that our Storyline course will be set to 1024px by 768px.

Now we need to decide on the dimensions of our flip book to make sure that it fits comfortably on the stage.

The width isn't a major concern as the pages don't extend past the left and right edges of the flip book. But we need to be careful of the height, as when turning pages they extend above and below the top and bottom of the book as shown below.

For this tutorial, let's go with the dimensions of 820px by 500px for our flip book. This will give us a nice margin around the book and will allow space for the page to be displayed as it turns. If you look closely at the below image you'll notice that the corner of the page does get cut off when it is dragged to the extreme. While we could avoid this by reducing the height of the book, that would make it harder for us to fit our content in the book as we'd have smaller pages to work with.

wide

So yeah, compromise, balance and all that jazz.

Adding Content

As you can see above, books aren't very interesting when they are empty, so unless we're going to chat about unrealised potential or something like that, we really should add some content to these pages!

For this tutorial, I'll be using text from Kahlil Gibran's The Madman and a few images from Unsplash.

We'll need to create a front cover for our book, the pages that go inside the book, and a back cover. I know right, who would've guessed!

Our book dimensions are 820px by 500px, which means that each individual page should be created at 410px by 500px. You can use your preferred image editor to create these pages. I use Sketch, because it's awesome, but if you don't have a Mac, then this won't be an option!

(So go get yourself a Mac... I'll wait.)

Of course, you can layout your pages in PowerPoint, SnagIt, or whatever works for you. You just need to make sure that when you export them that they are exported as images and follow a simple naming convention. In this case, I've just named the pages 1.jpg, 2.jpg, 3.jpg and so on.

Once you've created your pages, we'll be ready to start building our flip book. Here is a sneak peak of a few pages we'll be using in this tutorial:

Building Your Flip Book

Now that we have our pages organised, it's time to put the book together.

We are going to use a JavaScript library called turn.js to pull this book together. What's a JavaScript library? It's like a collection of code we can borrow from a very clever programmer. This will not only speed up our development time, but will also help ensure that our flip book will work as expected in a variety of environments.

You can download turn.js here, but I'll also include this link along with all of the source files at the end of this tutorial.

After you've downloaded the library and extracted the files from the .zip, you'll see that you have a bunch of files that look a little something like this:

Files included in turn.js

Let's go into the samples folder and copy the basic subfolder.

We'll use this sample to jump start the development of our flip book. For now, we can ignore the rest of the files here. So go and paste the basic subfolder on your desktop or somewhere where you can easily access it.

So now, in your basic folder, you should have the following:

Files in the basic folder

Get Yourself a Text Editor

We are going to edit a few of these files to make sure the flip book meets our needs. As we'll be messing around with some HTML, CSS and JavaScript, you'll need a text editor.

Sure, Notepad would work, but it is far from ideal. If you don't already have a preferred text editor and just want to grab something that is free, download a copy of Sublime Text.

Editing the HTML

Let's set up our content first. Right-click on the index.html file and select Open with Sublime Text:

Open index.html with Sublime Text

You'll then be greeted with this glorious sight:

Contents of index.html

The first thing that we need to change is the width on line 8.

As you can see in the image above, this is currently set to 1050. We want to change this to 820 to align it with the dimensions of our book.

So change the code on line 8 so it looks like this:

<meta name="viewport" content="width = 820, user-scalable = no" />

Then we need to specify the pages that make up our book. As we have used the same naming convention that is used in the sample, we can just build upon the pages that are already included here.

For this demo, I've created 28 sample pages, so we need to add:

<div style="background-image:url(pages/13.jpg)"></div>
<div style="background-image:url(pages/14.jpg)"></div>
<div style="background-image:url(pages/15.jpg)"></div>
<div style="background-image:url(pages/16.jpg)"></div>
<div style="background-image:url(pages/17.jpg)"></div>
<div style="background-image:url(pages/18.jpg)"></div>
<div style="background-image:url(pages/19.jpg)"></div>
<div style="background-image:url(pages/20.jpg)"></div>
<div style="background-image:url(pages/21.jpg)"></div>
<div style="background-image:url(pages/22.jpg)"></div>
<div style="background-image:url(pages/23.jpg)"></div>
<div style="background-image:url(pages/24.jpg)"></div>
<div style="background-image:url(pages/25.jpg)"></div>
<div style="background-image:url(pages/26.jpg)"></div>
<div style="background-image:url(pages/27.jpg)"></div>
<div style="background-image:url(pages/28.jpg)"></div>

Essentially, what we are doing here is specifying the images that should be shown on each page of the flip book.

If you had more pages, you'd just keep duplicating this code and adjusting the file name of the image that should be displayed.

Now, this code mentions where it will go looking for these pages. So we should move our images to that same location so they can be found!

So jump back to the basic subfolder on your desktop and open the pages subfolder. You'll notice that it is full of the images used in the sample project:

Contents of pages subfolder

Let's delete those. Goodbye lovely sample images.

Now we can move the pages we created earlier into this same location:

Yes, that's a chook you see there. Her name is Begerrk.


Okay, let's jump back to our index.html file and scroll down to line 60.

Can you guess what we need to do here?

That's correct, update the dimensions again!

We can change this section of code to:

// Width
width:820,		
// Height
height:500,

Adding Back Some Scripts

Now, while we are nearly done setting up this HTML file, there is an important change that we need to make before we can test our flip book.

At the top of the index.html file you'll notice:

<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>

This is telling the HTML file that it needs to go up two folders and then look in a directory called extras for the files mentioned above.

While that made sense with the folder structure that we downloaded originally, it doesn't make sense here... I mean, we don't even have an extras folder!

So let's fix that.

Navigate back to the files you originally download from the turn.js website and go into the extras folder. We want to copy two files from here:

  • jquery.min.1.7.js, and
  • modernizr.2.5.3.min.js

Then go back to the basic folder on your desktop and paste these two files into the js directory alongside the basic.js file that is already there:

Contents of js folder

We will also need to grab a couple of files from the lib folder. So go back to the files you downloaded again, jump into the lib folder and grab:

  • turn.js, and
  • turn.html4.min.js

You can also pop these in the basic folder on your desktop, which should now look like this:

Updated contents of js folder

Now we just need to update the location of the scripts in our index.html file. So let's change lines 9 and 10 to:

<script type="text/javascript" src="js/jquery.min.1.7.js"></script>
<script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>

And then we want to go down to lines 85 and 86, where we'll see:

yep: ['../../lib/turn.js'],
nope: ['../../lib/turn.html4.min.js'],

Let's change this to:

yep: ['js/turn.js'],
nope: ['js/turn.html4.min.js'],

Do You Like Hard Covered Books?

Now, we just need to make some minor changes to the code that controls the first and last pages of our flip book.

All that we have to do here is update lines 17 and 44 of the index.html file to include a class="hard" as shown below:

wide

This tells the flip book to treat the 1st and 28th pages as hard covers. If you want to test your flip book at this point, you can open the index.html file in a web browser.

Adjusting the CSS

While the flip book works, we still need to make a couple more tweaks before we can add it to our Storyline course.

Let's go to the css folder and open the basic.css file:

Contents of basic.css

First, we need to change the background-color on line 5 to match the background of our Storyline course.

So let's update this to the always popular white:

background-color:#ffffff;

Next we can change the Width and Height on lines 24 and 25 so that they match the dimensions of our book:

width:820px;
height:500px;

Then we need to change the position information on lines 26 and 27:

left:-410px;
top:-250px;

As you can see, these values are half of the width and height. By setting these as half the height and width, we can make sure that the flip book appears in the centre of the page.

We also need to change the width and height on lines 31 and 32, to ensure that individual pages show at the correct size:

width:410px;
height:250px;

That's it.

The CSS has now been updated.

Let's Add Our Book to Storyline

Now we just need to add the flip book to Storyline. This is the easy part!

Go to Insert > Web Object and then click on the Folder icon:

Insert web object

Then navigate to the basic folder and press Select Folder:

Select Folder

Once you've confirmed that the Display in Slide and Load web object automatically options are selected, you can press OK and the web object will be added to your Storyline course.

That's it! You now know how to create a basic flip book and add it to a Storyline course!

Here is a demo of the flip book we've just created.

As you notice in the demo, the pages can be turned by clicking and dragging on their corners. While this is okay for short books, it may become tiresome for longer documents.

If you would like to learn how to make your flip books easier to navigate, please sign up below to receive the flip book follow-up series.

Frequently Asked Questions:

Q. Will this work in an LMS?
A. Yes, it works in SCORM Cloud. If you'd like to test it in your LMS, you can use this SCORM package.

Q. Will the flip book load instantly?
A. No, not always. Sometimes it will take a few moments for the book to load. It is a good idea to add a 'Please wait, loading...' message behind the web object, so that the learner isn't faced with a blank page. Or, if you prefer, you could always add a picture of a chook.

Q. I added a close button to the top of my book, but the web object hides it. What's up with that?
A. Web objects are special. They get to sit on top of everything else, regardless of how you order things on your slide. If you want to have a look at how the close button was added in the demo, dig into the source file below.

Q. Do Articulate support this method?
A. Yes and no. Articulate support web objects, but they wouldn't be able to help you if you have issues with setting up your flip book. However, I may be able to, so reach out if you get stuck.

Q. Does this work in HTML5? (i.e. will it work on my phone and tablet?)
A. Yes it will.

Q. Will this work in Articulate Mobile Player?
A. Yes it should. I haven't tested it though. If you feel like doing so, you can use this package that has been published for the Articulate Mobile Player. Let me know if it works!

Q. My question isn't listed here, what should I do?
A. Leave a comment below. Then go for a bike ride. Bike riding is fun. I'll get back to you pretty quickly, unless I'm out riding my bike.

Files you might need:

Here is the .story file that was used in this example.

Here is a SCORM package you can use to test if this works in your LMS.

Here is a package you can use to test if this works in AMP.

You can download turn.js from here.

If you found this tutorial helpful and think that others in your network will also, please share using the share buttons below. Thanks!

Matthew Bibby
Author

Matthew Bibby

I'm Matt. I'm an eLearning Consultant. I help people like you develop memorable, engaging and profitable training programs. What do you need a hand with?

Comments