A flip-book preview of My Teacher is a Dinosaur

Originally I created this to go on my web site, on this page. A little flip-book is a really great way to let people browse inside your book, and you can choose which pages to include. Click on the right corner below to see it in action. [Update: if you’re reading this in Google Reader or similar RSS reader and don’t see a little book with flippable pages, please click on the post title and visit the blog to see how the flip-book works.)

So, how did I do this, you’re wondering? The book is laid out in InDesign CS4 and here are the steps:

To add the page curl to all pages, in the menu bar choose Window> Interactive> Page Transitions, and a little palette will open up.

From the drop down menu, choose Page Turn.

Click on the little symbol on the lower right to apply the effect to all pages.

In CS4 you can’t preview it (might be different in CS5.)

Now it’s time to export it. Choose File> Export, type in a name for the flip-book, select the SWF format and a destination for the Flash file and hit Save. Next the Export dialog box comes up:

I chose a 50% scale to reduce the size of the book, but other sizes will work so experiment. I wanted only a few pages, not the whole book, so Range is checked with the page numbers filled in. These were also checked: Spreads; Rasterize Pages; Generate HTML File; View SWF after Exporting (I’m not sure whether these all need be checked, really.) Be sure to check Include Page Transistions and Interactive Page Curl, obviously! The JPEG quality seems okay at Medium. If View SWF is checked, at least on my system it automatically opened in my web browser, Firefox. There you can play with the page turns and make sure the flip-book is working right.

One little wrinkle is that this book has some white pages, and on top of a white web page, it’s impossible to tell where the page corner is (to activate the page flip.) So, before exporting it from InDesign, I added a light gray rectangular border to the pages 12-19 (visible in screenshot) so the corner would be visible against white. You may wonder why I didn’t export starting with page 12? If you do that, it exports the entire previous 2 pages, also.

If you don’t typeset your own books (not many illustrators, do) it should be easy for the publisher to provide a SWF file, assuming they use InDesign.

Then, how to get it on a web page? Naturally, that varies with the software used. In Dreamweaver, the SWF file is copied into the root file of the site. Then on the web page, draw an AP DIV box, and under file menu choose Insert> Media> SWF. Then, because the page flip extends outside of the dimensions of the book, I added about 60 pixels to the height of the bounding box. The flip-book will still work if you don’t do that, the animated pages will just be a little cut off.


How did I get it onto this blog? Blogger won’t accept Flash directly, so the file has to be somewhere else (in my case, it’s on my web site.) In Blogger, I pasted this HTML code into the Edit HTML tab:
<embed height="420" pluginspage=" http://www.macromedia.com/go/getflashplayer" src="http://www.loreenleedy.com/Dino.swf" type="application/x-shockwave-flash" width="576"></embed>

You would have to replace my web URL and SWF file name with your own. Your Height and Width values probably will be different, too. This flip-book might be a little too big for my Blogger layout, but it’s perfect for my web site, so I left it as is. Hope the page turns work here on the blog, I’ll find out after this post is published!