Tutorial: Exporting a Flash Flipbook from inDesign CS5

Note: This book scaler is a semi-finalist entry in the 2011 Adobe Design Achievement Awards Education Category.

Flipbooks and page turning effects have been around for years; a variety of flash plug-ins, conversion services and source files have made them accessible to everyone. Though print designers have been able to export flipbooks directly from Adobe inDesign since version CS4, the tutorials and sample files here will help you get the most from the effect.

Along with a set of video instructions on how to fine-tune the InDesign export process to produce more attractive results, I’ve developed a “book scaler” in flash that allows adjustment of a book’s size relative to the screen. An “autoscale” feature fits the flipbook to a viewer’s screen when it first opens. “Page jump” buttons have been added for the front and back covers, table of contents, next and previous pages or any page number you care to type in. An invisible “drag area” in the book’s gutter/spine allows it to be manually positioned on-screen. Optional settings allow ranges of pages to be hidden from the viewer. The full source code is available to customize, but is set up so people with no coding skills can easily modify it to suit their purposes.

By popular request, full-screen capability is now available.

Who is this for?

  • Designers more comfortable working with print than interactive media can produce interactive portfolios that show their work in an engaging way.
  • Publication designers can produce digital proofs or include multi-page projects in their portfolio sites.
  • Authors can release printed works without the loss of formatting or typographical design associated with export to ePub and similar eBook formats.
  • Authors wishing to serialize their work can do so without having to export a partial flipbook file each time they introduce a new chapter.
  • Anyone wishing to release an eBook can do so in a single, freely available format that runs in any browser on any desktop.

Who is this not for?

  • If you want your book to be viewable on most eReader platforms, you’ll need to export to Adobe PDF, ePub or the proprietary format associated with a particular eReader. Though the tutorial does not currently cover Adobe AIR export, it is possible to use Adobe AIR to create apps for Android and iPhone/iPad platforms. However, if you need your content to be viewable on all mobile browsers, you should consider using HTML/CSS and related technologies as an alternative to the flipbook format.
  • Good print design does not always translate directly to good interactive design. If your content does not lend itself to good “book presentation,” consider a different design approach. The flipbook effect is fantastic when used appropriately, but there’s a reason most websites aren’t realized in flipbook form. There are many, powerful and effective aesthetic directions and technologies; choose the right tool for the job.
  • Indesign ‘Export to SWF’ flipbooks do not include searchable text or text that’s available to sight-impaired people. Though there is an ‘Export to Flash’ function that allows embedded text, the flipbook effect is primarily of value as a visual effect.

Download the flipbook scaler files

Download the files here.

Included is an Adobe InDesign file set up as a small photographer’s portfolio site with interactive thumbnails, a bookScalerAutoSize.fla file that loads the exported inDesign file and adds the scaling and navigation features, and the necessary HTML and swfObject.js file that load the book into a browser at “full-screen size.


  • A portfolio site mockup with interactive thumbnails exported from Adobe inDesign
  • A serialized novel that preserves the original book layout and typography. Though the entire book is online, the page-restriction features allow only author-specified pages at the beginning and end of the book to be viewed.

Recent Updates (Version 7)

  • By popular request, full-screen mode is now implemented. A new “enableFullScreen” parameter is added to the XML file. When set to “true,” a full-screen toggle button appears in the upper right-hand corner next to the “help” icon. NOTE: input text is not available in Flash when full-screen mode is active. The page jump box is hidden and associated controls are hidden or revealed as the screen mode is switched.
  • The swfObject.js javascript that loads bookscaler.swf into the browser has been updated to the most recent version along with index.html. This also includes an expressInstall.swf file that will offer to install flash in cases when the plug-in is not available.
  • If viewed on a tiny screen (like on a mobile device), the help screen will scale to fit the monitor. It no longer shows up as a tiny rectangle that can’t be read.
  • Color setting controls for a preloader progress bar are now available in the XML. These were installed in verson 6 which I never released because it wasn’t a significant enough upgrade to bother with. Hence, version 7 follows version 5.
  • A bug was fixed where flipbooks containing video did not center properly while being resized.The fix assumes there is no video on the cover (first) spread.

Planned Updates

    I’m continually expanding on the capabilities of the book scaler and am currently on version 7. Future versions will include the following features:
  • Add bookmarks and store them in a shared object (the flash equivalent of a browser cookie).
  • “E-Reader mode” for small screens – this will center the current page on screen, shuffling the spread left and right as “next page” and “previous page” buttons are clicked so that only a single page is in view at a time. Help windows and navigation bars will scale to fit the screen.

What does it offer?

Greatly extends the functionality of flash flipbooks exported from Adobe InDesign CS4 or higher.

Scale a book between 50% and 200% of its original exported size without blurring the text with a simple slider control.

Choose to load the flipbook at a preset scale or have it automatically scale to fit the browser window its loaded into.

Adds navigation buttons for front cover, back cover, table of contents, next page, previous page and table of contents.

Adds a “page jump” window where the viewer can type in a page number and jump to it instantly or at the click of a button.

Easily configurable without opening flash by editing a simple XML text file. A clearly written manual is available online and video tutorials are provided

Allow viewers to see the entire flipbook or a range of pages at the front and/or back. This is useful for offering a new chapter at regular intervals (for example) without having to export a new version of the book from InDesign each time.

Jump to any page by passing a query through the URL. In English, this means you can add “?p=25” to the flipbook’s web address and it will open to that page when it loads.

Smart navigation hints and help screens that remind the viewer to use navigation features they’ve missed after a specified amount of time passes. If the features are used, the hinting is disabled.

Full source files for both Flash and InDesign available to download, study and customize.

Actionscript 3 source code is fully commented

Learn how to set it up

It’s easy to configure the flipbook scaler without editing in Flash by modifying a simple file in any text editor. Detailed instructions for configuring the XML file are available in (of course) flipbook form here.

Video Tutorials

Video tutorials cover the entire process from setting up the inDesign file to configuring the book scaler to setting up the HTML file to display your book. The tutorials can be viewed in the YouTube play list below. All are recorded at 1080p high definition, so use the full-screen viewing to see the fine details.

 Why Am I Doing This?

I’m a University graphic and interactive design professor, a novelist and the author of a nonfiction book about self-publishing. By developing new and better tools for pushing my own creative work farther into the stream, I empower designers and writers to share their work in engaging formats that don’t require royalty-sharing or adaptation to proprietary standards that aren’t friendly to design and typography. For more information about my books and writing, see www.EssentialAbsurdities.com.

If you do find the bookscaler useful, consider purchasing one of my novels  or the One Hour Guide to Self Publishing from your favorite online book retailer.

Flipbook FAQ & Technical Notes

Q: Where can I download the files?
A: Download the files here.

Q: I can’t get the “Front Cover” button to take me to the front cover.
A. Usually, Adobe InDesign exports a flipbook swf file that has en empty first frame. Once in a while, it doesn’t and the first page is on frame 1. If that happens, open bookscaler.fla and change the following code in the actionscript on frame 1 of the man timeline:

Line 454: Usually sends the timeline to frame 2. We want frame 1 for your book

function showFrontCover(evt:Event) {//used on mouse-out to restore scale text
    scaleControl.outputBox.text = "SCALE " + Math.round(flipbook.scaleX * 100) + "%";
    flipbook.bookLoader.content.gotoAndStop(1); //CHANGE THIS VALUE TO 1

Line 550: Usually checks if the timeline <= frame 2. We want frame 1 for your book

if(flipbook.bookLoader.content.currentFrame <= 1) { //CHANGE THIS VALUE TO 1
    scaleControl.frontCoverBtn.alpha =.5;
    scaleControl.prevpage.alpha =.5;


Tutorial: Exporting a Flash Flipbook from inDesign CS5 — 121 Comments

  1. Hello Dave!
    Your tutorial is great and helped me a lot! Thank you so much!
    I have a question about the “jump to page” feature – the one that uses the url to pass a query.
    I couldn’t get it to work so I was checking how it’s working on your example files to get some hints.
    I noticed that the feature is active here http://essentialabsurdities.com/dance/?p=4 and not here http://essentialabsurdities.com/flipbook/?p=4.
    It’s a mix of settings that I should use or maybe a different version of the files?
    What should I do to activate it?
    In my files the url passes the page number to the navigation bar – the number it’s visible in the input field for the jump to page feature – but it isn’t actually going to the specified page, the book stays on the cover page.
    Any help will be greatly appreciated!
    Thank you,

    • As browsers have changed, I’ve seen this feature work less consistently. Flash should read the change in the url and parse the link; it certainly used to, but I confess I haven’t looked at the code for this for a very long time. I haven’t had a call for flash work for well over a year. It’s probably an issue that some clever hacker could solve fairly quickly. I’m gratified that people are still able to make use of my script (and I am deeply troubled over the apparent ease with which Adobe abandoned Flash), but I have resigned myself to the reality that it will be a number of years before the web catches back up to where it was when Flash made anything possible. I realize this is not a solution to your problem, and I apologize. For what it’s worth, the as3 code is heavily commented so you may be able to update the script on your own. I am deep into finishing a very exciting HTML5 eBook technology and given the approaching launch date, I simply won’t be able to hack into the flipbook code at this time. Thanks for writing. I hate to disappoint.

      • Thank you for your answer! Yes… you are so right about flash and everything else! Your tutorial is still the best option to work around for indesign swf. Thank you for sharing!

  2. Hi,Dave.
    first of all,thank you for your tutorial. :)

    However, I tried to embed the flipbook that I created in wordpress page. it did not work out for me. I think it can not find the xml file. thank you for your help inadvance

  3. hi
    Dave I want to export my files but not in flash, I want to put it in my linked in, but the only format is swf,can you please help me .

    • Sorry. Unfortunately, InDesign only exports flip books to Flash. Take a look at http://http://www.turnjs.com/ and see if it’s of any use to you. I know of an excellent non-flipping web-based eBook alternative that’s being launched this Spring but am bound by non-disclosure agreements not to provide details. Join my mailing list; I’ll be making noise about it as soon as I’m able to.

  4. Hi Dave,

    Thank you very much for sharing this wonderful application and for taking the time to create the excellent tutorials. I’ve used it and it works perfectly.

    I just like to ask if a work around exists for hyperlinks within the swf that fall behind the drag area. These don’t work because the area sensitive to the cursor for dragging the spread prevents the hyperlinks for being clicked.

    I can make the drag area very small but that makes it less intiitive for the user.

    Many thanks,


    • Unfortunately not. Without access to the actual flash source, you pretty much have to live with what InDesign gives you. In this case, I was able to use actionscript to draw a dragbar rectangle but it is, by nature, on top of the content.

  5. Hi Dave, Thank you so much for the easy to understand tutorial. However, I am stuck! I modified the bookScaler.fla file to be custom for my book, but I can’t get my version to appear in my swf file. It’s still showing your original design. What am I doing wrong? Am I supposed to load it up somewhere? Thank sin advance!

    • make sure your version of bookScaler.swf replaces the original. If you want, toss out the one that comes with the archive and then make sure your new, exported one lands in the right place.

  6. Hi Dave,
    fantastic tutorial and code! I’m using it in an iframe and was wondering if it’s possible to center and re-size the book when it changes to and from full screen? i’ve tried adjusting the xml, but i’m not an expert!
    if this isn’t possible then thanks for brilliant code anyway!


    • It should be centered if you don’t use the iFrame. I think the problem has more to do with loading the flipBook as full frame inside the iFrame. Maybe you can have full screen mocde jump to a new window sans iFrame? otherwise, I’m just not sure.

  7. Hi Dave, love your work! I posted in an ebook thread, but wanted to repost here. We have incorporated your flipbook code and it is working well. But, it has been request by our admissions department that we add/create a keyword/text search feature. Is this possible through either actionscript or another means that is open source?

    –Corey Wright
    Niagara County Community College

  8. Hi Dave

    Thanks for this awesome scaler, great work and very very useful!

    I do however have a slight problem with the nav bar while the main swf is loading, it´s off center to the left, and I´ve stared myself blind in trying to find out how to center it on load, like it is when the main swf is loaded.

    Am I making any sense?

    Check it out here: http://www.caffenol-cookbook.com/hi-res/hires.php

    Like I tried to explain above, it only happens while preloading.


    • I see what’s happening. Probably, the best fix will be to hide the navbar altogether until the loading is complete (considering that until the book loads, there’s nothing to navigate through).

      • Thanks for your reply, I appreciate it!
        I´ve been looking just about everywhere but can´t seem to find the related code to change for hiding the navbar during load.. Any pointers?


        • On line 256 it says: scaleControl.visible = false;

          I have to go through and see why that’s being set to true prematurely. Probably, it’s a matter of moving scaleControl.visible = true; to a different function but it’s been quite a while since I looked through this code. I may need a little time.

  9. Hi Dave,
    Great flipbook material!

    I have uploaded the five required files to this directory: http://www.jakedouville.com/huckleberry-bay/ – but nothing loads. The xml file has the correct source and everything. When I view it locally on my computer everything works fine, it just doesn’t work once uploaded to my server. What am I missing?

  10. Hi Dave,
    Thank you for the great flip-page control.
    I have one issue and after reviewing some other posts I see others have the same problem which I do not believe has been resolved. My issue is with the bookscaler toolbar disappearing after an initial load of index/webpage file. If I reload the webpage the bookscaler toolbar appears along the bottom as it should. I would like the toolbar to be always visible. Is there any workaround to this issue. I am using version 7 and am completely aware that this is a work with continual improvements. Thanks again and I look forward to any suggestions.

    • I’ve heard of this but I haven’t been able to reproduce the problem. I’ll poke through the code again and see if there’s some sort of workaround or “safety switch” I can add to double-check the position of the navbar.

  11. Hi Dave,

    I’m very grateful for this tutorial it’s superb – thanks!

    Is there any way, when the flip book is launched, that it goes straight to the first two page spread
    (i.e goes straight to page 2/3)

    (page one would be blank and unused)

    Kind regards,


    • The best way to do this would be to design page 1 as part of the “cover spread.” In other words, skip the book cover and then put your initial pages up as the first spread.

      • Yes that’s it – many thanks,
        just one more thing
        – is there a way I can NOT show the bottom navigation bar (as I’ve got my own navigation)

        • you’ll have to modify the actionscript in the bookscaler.fla file. Set the visible property to false where the positioning of the navbar gets set up. All the code is commented.

  12. Dear Dave,
    Congratulations on the tutorial.
    I want to know how can I send the flipbook by email and which file. The scalebar works properly on my computer but I want that everybody could recieve the magazine in the way I am seeing it.
    thanks in advance

  13. Hi!
    I’ve been looking around for a flip book tutorial for a long time, and came across this. I’ve had a look at a couple of the videos and your advice looks really helpful. I’ve never attempted something like this before, so it’ll be a bit of a challenge for me.

    I just wondered whether it was possible to change the orientation of the flip? The catalogue that i’m trying to create into a flip book has the spine at the top and the pages flick up. As I said, this is completely new to me, and I wanted to check with people who actually know what they’re doing!

    Thanks so much for your help, and also for the brilliant tutorials!


    • I haven’t tried this, but if you open up my bookscaler.fla file, you’ll find a MovieClip inside containing a UILoader Component. If you don’t know Flash, that sounds like technobabble, so the English version is, “download the free 30-day evaluation copy of Flash from Adobe, open the file, and look for the small gray rectangle. Rotate that 90 degrees and the book should open like a chart book. However, you’ll be displaying a tall book on a wide monitor and you’ll have to design your pages in InDesign sideways, anticipating that the book will be rotated before it’s displayed. So…what you want to do is theoretically possible and probably even easy, but you’ll have to design around a few aesthetic hurdles.

  14. Thanks you SO much for sharing this it’s taught me a lot!
    I have a question though:
    I would like my book to look like it’s sitting on a table so I’ve changed the background in InDesign and Flash to look like a table. Flash is putting a drop shadow to the bottom of every spread which looks good when the book is open, but when it is shut I have a shadow to the left of the front cover (and right of the back cover) that I don’t want there. Is there any way of keeping this shadow, but apply it only to each page rather than spreads so it isn’t there when the book is shut?
    For now I will remove it altogether, but any help in this would be greatly appreciated. Thanks again.

    • The bookscaler has a dropshadow filter applied to the UILoader component that loads the flipbook SWF. You could theoretically write an asctionScript that applied the dropShadow or not depending on the frame number of the flipbook SWF. I don’t think it would be all that difficult, but you’d obviously have to have some actionscripting skills to make it happen

      • Ah, sounds good but I have no action scripting skills since I gave them up at AS1! If anyone reading this feels inspired to write the script it would make an awesome addition. I’ve just removed it for now though.

        Thanks for your quick reply, and again for all your hard work on this, it has been so helpful.

  15. Dave,
    Thank you so much for sharing this. It is just what I needed to enhance the online presentation of my company’s annual report. I’ll share the link once it is posted.

  16. Hi Dave,
    this is a great tutorial. But I have a problem from the start! My flipbook – portfolio has an enormous size, 28 mb – it contains a lots of raster images like photos. I’ve tried to get a smaller size of those images, but then the quality gets really low. And due to that, my flipbook loads really long on my www. If you have any advice, I will be grateful!

    • Usually, a printed portfolio is built with files like TIFF and EPS. InDesign doesn’t give you many compression options. To some extent, we’re locked into using what Adobe provides in their export options, but we can hopefully shave a bit of file size by using smaller files in the first place. Try using Fireworks or Photoshop to convert the folder full of images included in your flipbook to 75% JPEG files and then relink them into the document with the Links panel. Also, think about what size your flipbook is relative to the size of a screen. If you designed at say, 8 x10 inches, a spread will fill a big monitor at roughly 100% scale. You may want to choose “72 dpi” for the export instead of 150; that will save a lot of file size. Of course, scaling bitmaps is always hit and miss. Sometimes, scaling the big ones down looks just as “not quite right” as scaling the small ones up.

  17. Hi Dave!
    I’ve been looking for a solution like this for a loooong time – this is great!
    I’ve got one small problem – how can I change/translate the text without using Flash? (my boss wont buy me the program …)

  18. I have a question about the swf it loads. Is it right that if there is a sound in it, it isn’t possible to play it in there? i tried it, but can’t get it worked.

    For the rest, a nice flipbook!

    • Not sure why embedded sounds aren’t working for you. At least as far as the bookscaler is concerned, everything is pure flash/as3. I haven’t used audio directly but did experiment with putting video into a flipbook. The audio there worked fine.

  19. Hello Dave,
    Thanks for all that you have done and setup! Great stuff!
    I have a question about the controls it shows for a moment when the page is loading but after loading it panel it does not show up until I clicked the maximize screen button…or pull the window open. Is there a line of code in the flash doc I could change for this?
    I do have the XML file set to “autoHideBottomNav”>false”

    • I thought I had that bug fixed! It shows up extremely intermittently. I’ll take a look this week and see if I can find the problem. I have some workarounds in mind that involve setting a timer to check intermittently what the position of the control bar is relative to the screen.

  20. Thanks for kindly posting all of this great information! You’re a life saver. Your tutorials are refreshingly clear and your supporting files worked perfectly.
    I’ll will go straight to Amazon now and gratefully purchase your book!
    All the best.

  21. Hi Dave,

    Thanks so much for the tutorial. I really appreciate the trouble you’ve gone to to share your in depth knowledge. I hate to add to the ‘problem’ comments but I have gotten right to the end of the tutorial and when I test the index.html file I get the ‘To view The Pageflip, please upgrade your free Adobe Flash Player’ page instead of the flipbook. I watched the steps again and am still getting the same result. I really hate to trouble you, but I feel like i’m so close to getting this to work and perhaps it’s something tiny yet obvious to someone with your amazingly accomplished skills. Flattery out of the way :-), I have uploaded my files for you to have a look at, should you find the time to do so. I feel it would be such a waste not to solve this.

    Thank you very much

    • You are probably missing the swfObject.js file. Without the javascript, the page won’t detect the flash. I’d be happy to look at your files but I’m not sure where you uploaded them to. Try re-downloading the whole collection of files and then drop in your own flipbook.swf Otherwise, we’ll get it sorted out. It sounds like something simple.

  22. Hmm… I have a small problem with “bookscaler.fla” file…

    I have changed a navigation design and try to re-complie file ( create new .swf).
    And flash show message as follow:

    TypeError: Error #1009: Cannot access a property or method of a null object reference
    at Function/bookScaler_fla:MainTimeline/loadBook/bookScaler_fla:showAppropriateButtons()[bookScaler_fla.MainTimeline::frame1:590]
    at Function/bookScaler_fla:MainTimeline/loadBook/bookScaler_fla:setUpLoadedBook()[bookScaler_fla.MainTimeline::frame1:371]

    I use Flash CS5.5… Could you explain whats happen ???

    • Sounds like you deleted some of the nav buttons. Now the script tries to attach actions to them and finds “null object references.” Instead of deleting elements, try dragging them down under the navigation bar. Or, find their instance names in the script and add

      buttonInstanceName.visible = false;

      to hide any you want to eliminate.

  23. Hi,
    First of all, great tutorial!
    I am new in indesign, and i have a problem when trying to export the swf file. I started with a pdf of 1158 pages. When I try to export a page or 10 it all works fine, but when I try to export the entire file it loads till the last page and then says “failed to export file”. Is there anything I can do about this?

    • You have a number of things working against you here. First, you’re starting with a PDF instead of a pure InDesign file. There’s no telling what elements of that might not be translating properly. Second, your file contains a huge number of pages. It might just be a memory problem, but it could be something else; it’s hard to say. If you have Acrobat (not just the reader, but the Acrobat application), try splitting your PDF into smaller pieces and see if you get any better results. Otherwise, check indesignsecrets.com or one of the Adobe forums. The missing piece here is the original document (Quark? Indesign?) used to generate the PDF. If you can get the original text set up in Indesign, you will at least have eliminated a pile of frustrating variables.

  24. Hi Dave,
    I downloaded the 7th version of the flipbook scaler and I am trying to use it with url linked video from InDesign. When I zoom in it jumps to the right side of the page (not from the center) I’ve edited my xml and my action script to be “var centerLoadedFile:Boolean = false;” from reading previous posts and this didn’t seem to work. Help! how can I fix this, my project is due Thursday.
    Thanks a bunch

    • Tracy, I haven’t tried the bookscaler with video embedded in InDesign. It may be that adding video changes the dimensions of the flipbook swf in invisible ways. ON lines 805-814 in the actionscript on Frame 1 of the main timeline you’ll find the following code:
      function positionBookOnStage() {
         flipbook.x = stage.stageWidth/2 - (flipbook.width)/2;
         if(centerLoadedFile) {
             flipbook.y = stage.stageHeight/2 - (flipbook.height)/2;
         if(preloaderClip != null) {
             preloaderClip.x - stage.stageWidth/2;
             preloaderClip.y = stage.stageHeight/2;

      flipbook.x = stage.stageWidth/2 - (flipbook.width)/2; controls the horizontal position of the book. Try subtracting some pixels to the right positioning until your book is centered. For example, if your book is jumping 700 pixels to the right, subtract 700 pixels by adding another x adjustment on the next line like this:

      flipbook.x = (stage.stageWidth/2 - (flipbook.width)/2);
      flipbook.x -= 700

      The minus-equals notation means take the existing value of the x position and subtract 700 (Or whatever number works) from it. It’s programming shorthand for flipbook.x = flipbook.x - 700 (which will also work fine). Play with the numbers until the centering is adjusted. If it doesn’t work, holler and we’ll get it sorted out. I’m curious to see what adding video is doing to your InDesign SWF File.

      The second line

      • Hello Mr. Bricker,

        First of all, thanks for creating an awesome tool, for sharing it, and updating/supporting it!

        I have been tasked with creating interactive, content rich catalogues for an indsutrial equipment distributor. I have used all sorts of content in the document, including videos. I found out that your bookscaler has no problem with video per se, but that it shifts as described above in pages that contain videos that use the indesign media controls.

        Here is a link to the document, so that you can see the problem if you so wish. The package is quite large, due to all its linked pdfs and videos, but the document itself is only 10Mb. It is in spanish, but I think there shouldn’t be any problem navigating it. Oh and it is an exe file, so I don’t know if it would work on a Mac. Phew! Those are quite the caveats!


        Problematic videos with media controls can be found at pages 3 and 34, while other videos without media controls can be found at pages 20, 35, 36, and 40. Page 20 also contains another video in the “Tecnología Magnética” tab, with its own custom controls, and they don’t present a problem to the scaler.

        Again, thanks for the time you dedicate to this tool Mr. Bricker! You are helping a lot of us big time!

        Eduardo Barillas

        • You are the second person to notice problems with video. I can’t view your document on a mac, but I have an idea for a fix. As long as there’s no video on the front spread, I can use it as a measurement instead of centering the currently open spread (which I suspect has invisible content off to the side somewhere when video is displayed). I’ll see if I can work out an update by the end of the weekend. If you’re able to email me your InDesign swf for testing, I’d appreciate it.

  25. Hi Dave,

    I’m using your flipbook scaler files on a magazine and it works great! I noticed you are planning a fullscreen option soon. This would be perfect for our application, any idea when you would have that option ready? Not to pressure you or anything, but I’ll throw in a nice dinner or…

    Thanks for your excellent work!


  26. Hi Dave,
    I just bought your One Hr. Self Publishing book so now I feel like I can reasonably ask you a question!

    I want to change the text in the help box in the .fla file (I want to remove the page corner reference as I’ve disabled the interactive page curl option in InDesign). I’m able to open the file and change the text, but not being a Flash expert (by a long stretch) I don’t know what settings to use to save the file. When I “export movie” to .swf and then go back to open the index.html file, I get only the three flash elements overlapping one another, no book.

    I looked through the flipbook tutorial as well as watched the video tutorials and I didn’t find that particular information. Can you tell by this description what I’m doing wrong, and, I’m hoping, give me a quick and easy answer? I’m guessing it’s my lack of Flash knowledge that is my obstacle.


    PS – love this thing!! I hate the subscription-based and software options available for flipbooks and this little scaler is the only thing I need! Truth be told, I would have paid more than $4.99 (cost of your book).

    • Thanks for picking up the book. I hope you find it useful. As long as your exported bookscaler.swf replaces mine, you should be able to modify the help panel. Make sure all your layers are visible or “export hidden layers” is checked. If it doesn’t work out, email me your file and I’ll get you going.

  27. Hi Dave, sorry to keep bothering, first thank you for the link, got every thing to work except for the “F” button, still when you click it, it only goes to the second spread, but this time the “previous button” don’t even get me back to the cover page (1st spread).

    I thought, may be the way I set up the inDesign file, cause the the cover, I set up as a starting page A, B, C and so on… for the auto folio and the 2nd spread right hand is folio page1, then I change using cover page as page 1 and still doesn’t work, please help. It think that my second spread is the first spread, but the initial opening is on the cover (first spread).

    The XML file edits works great, but can you change stage color and drop shadow of the booklet? or you have to use Flash file for that and if you use Flash file for edits, I’m assuming, you won’t need the XML file, is this correct?

    Again thank you,

    • In Indesign, you have to set up every page as a spread, even the first one. So your cover is a right hand page with a left hand page next to it. Same for the back cover. It’s not how you would normally set up a book for publication. If you look at the sample files and videos, you’ll see how they’re set up.
      As for changing the stage color, that’s done in the index.html file that loads the flash. The drop shadow has to be adjusted within the Flash (.fla) file.

      On one hand, it would be nice to make everything configurable via the XML file, but though that’s easier than actionscript for most people, it’s still kind of techie and intimidating for many. I’m hesitant to make things more flexible at the expense of making the controls too scary.

      And it’s not a bother. I’m happy people are using the bookscaler. It brings a lot of people to the blog and hopefully, they’ll find that useful, too.



  28. Hi Dave,
    I’ve been looking to get help on this for the past few years and give up on it, just found you a week ago and downloaded your “brickPhotos” zip file. I’m a traditional print designer and have an ok knowledge how some of the technology works, was never hands on always have a developer working with me, your samples is great, I’ve learn a lot.

    I got every thing to work, except the “F” button, everytime I’ve click it, it goes to the second spread of the brochure (inside front and page1), I’m not sure what happen, need some help, not sure what to adjust on your Flash sample file or do I need to set up or adjust my inDesign file differently (I’m only on CS4 at the moment). Here is my link “http://www.josephpaternodesign.com/test1/testbrochure.swf”

    Also the sample that I’ve download “brickPhotos”, doesn’t have the .xml file only .html and .js files, could you set up, so we can download, the .xml file, it seems to be easier to work with based on your instruction manual (I’m assuming you don’t even need to go to the flash file?) Love to be able to use the navigation on the bottom.

    many, many thanks,

  29. Hi Dave,

    I’ve tried it on 2 macs with safari and firefox and also on pc running ie. I’m getting the same thing happening on all. The scaler shows up where it is supposed to(at the bottom) while the file is loading. Once the file is loaded the scaler disappears. On a mac I can jiggle the bottom right corner to resize the window and the scaler will pop into view. On a pc I can’t get it to show up at all.

    I emailed you a link.

    Thanks so much!!

  30. Hi Dave,

    Thank you so much for sharing all this great information! I have been searching for a way to create good looking flip books easily and your site and instruction is incredible.

    I do have an issue I was wondering if you might shed some light on. I have been able to upload my flipbook and it is working fine with one exception. My scaler does not always show up once the book is loaded.

    My flipbook is large at 9mb, but it is all images and I can’t loose detail by sizing it down. I have the scaler set to always show on the bottom of the page. The page with the scaler shows up first with a timer in the middle. Once the book loads the scaler disappears. On a mac I can drag the bottom right corner a bit and it will reappear, but on a PC I can’t get it to appear at all. Can you think of any way to fix this?

    Thanks so much!

    • Nothing I’m able to repeat. Have you tried it on machines and browsers? It sounds like the actionscript is somehow failing to detect your screen size. Email me a link to your files if you can’t find the problem and it shows up on other machines.

    • Hi,
      I am having the same problem and it has been driving me crazy. The only thing that I have notice on a PC is that if you refresh the NavBar appears. On a MAC you just do not get a NavBar. I would love to find a solution.
      Melissa Miller

      • There’s apparently a bug I’ll be fixing in an upcoming release. If you set the “autoHideNav” parameter to true, the navbar will appear correctly. Right now, it’s staying below the screen. At least I know where to fix it now.

  31. Hi Dave,

    Firstly thanks for kindly sharing your knowledge on this subject as this has been a great help to me however I’ve got a couple of questions as I’ve come across a few problems when trying to add the bookscaler to my flipbooks. I’ve already designed and setup all the page controls in InDesign before exporting as a .swf file and everything works fine, all my links to pages, next page and previous page interactive buttons and the page curling etc. My clients have then asked me if I can place a zoom control on the books and when I’ve tried using the bookscaler it loads in fine and is on the bottom and works fine apart from the fact that all the interactive links that I’ve put in place previously (from InDesign file) now fail to work, even the page curling doesn’t work. Are you able to give me a solution to this please? Also I’ve tried editing the flash file to make the bookscaler look different to yours and this has proved difficult as i would like to delete off everything apart from the zoom control as I don’t need the other actions but when I do this the bookscaler simply doesn’t work. Sorry to come back with so many problems but is there anyway you can help please? Oh, the other thing is when I open up the index.html file the flipbook opens up zoomed in rather than set to the window size even though autosizeatstart is set to true. Hope you can help. Thanks.

    • I’m not sure why the bookscaler would break the internal interactivity of your inDesign file. The “go to page” functions don’t display the page curl effect because they jump from one page/frame to another. I tried to hack the inDesign actionscript but got nowhere with making that work.

      As for deleting the various buttons, you’ll break the script if you do it. Instead, I suggest using the bottom (rather than the floating) interface and then dragging the unwanted controls down below the screen. That way, the script will still “see” them, but they won’t be visible. A final way to do it is to edit the script and set the visible property of each button to false.

      Try setting autoSizeAtStart to false. That will load the book at the size you exported it (100%) rather than scaling it to fit the window.

      Watch for an update soon. I’ll make the controls deletable without breaking the script and I’ll add a full-screen option. Holler at me via email if you get stuck.

  32. I am still consuming this page and have yet to download and act upon the information and also enjoying browsing the rest of your site.

    Sorry if I have just missed this but are print controls within your flipbook or can they be added?

    • I didn’t add print controls as they are already built into the browser. There’s currently no way to print the actual book, though I could add an option to link to a PDF file for that purpose. So far, nobody has asked for it but I’ve seen it in third party flipbook components. Enjoy.

      • Hi Dave
        I have multiple flipbooks on my site but it seems I can only get the bookscaler working with only one. Is there a code I can use on my xml to give the other flip books access? I use flash catalyst.

        • The XML specifically references the name of your flipbook swf file. It could be that the XML is getting cached in your browser. You may also need to pass in the file name of the flipbook swf as a variable passed by a button or link and then reload the book and the xml. I suppose another route would be to make multiple copies of bookscaler.swf (it’s not very big) that call the multiple XML files and therefore load multiple books.

          • Hi Dave

            what do you mean by: You may also need to pass in the file name of the flipbook swf as a variable passed by a button or link and then reload the book and the xml.


          • I mean you could write some actionscript where instead of having the name of the flipbook.swf read directly out of the XML, it would be part of a list of variables attached to the buttons. When you click a menu button for (example) “book1,” it could load the bookscaler.swf and pass in the variable “flipbookbook1.swf.” It can be done in a number of different ways but you’ll have to be proficient with actionscript to pull it off. For what it’s worth, the code in bookscaler.fla is commented so you can see what parts of the code accomplish what.

  33. You are a man of vision.
    You did beautiful things where other were to narrow minded.
    wish you well in any of your many talents did.

  34. Thanks Dave
    your work in remarkable!
    I wonder if there could be a full screen toggle (on-off) button in the swf file?
    I need to export single or few interactive pages from indesign to web pages
    but the only thing missing is the fullscreen button.
    How frustrating!
    is it possible?

    • Shouldn’t be too hard. I haven’t built in any updates for a while so it will be in the next version. Full-screen just requires a call to a javascript. The only problem is that (at least in actionscript version 2) input text is disabled in full-screen mode. This means that the auto-page entry wouldn’t work unless the book was being browsed in regular form.

        • Yes, but if they want to enter a page number in the search box, they won’t be able to. Everything else will work, but ideally, the best implementation will hide the search box when the display is in full-screen mode. Not difficult, but it’s worth doing things right.

          • Thats Great!
            I believe readers doesn’t have to use the search wile in full screen.
            It’s great if they could search, find the page and put it on full screen to look in deeply, the toggle back to normal view and go on reading.
            Anyhow it certainly fantastic for those how publish publications with only few pages.
            Looking enthusiastically for your update.

          • Thanks, Udi. Another update I want to make happen is small screen detection. If the screen is small enough in size, we can assume the book is being viewed on a mobile device. If that’s the case, the controls can automatically scale to fill the width of the screen and instead of showing the book as spreads, a single page can be viewed with pinch-to-zoom. Android users could view the flash natively and Apple users could read the book as an exported App. The real fantasy, beyond my programming skills unfortunately, is to develop a generic flipbook that could read and (beautifully) display ePub files. That would add a nice spin to the millions of eBook offerings on Google and other sources.

  35. Hi! Thanks for that :-) Very Helpful :)
    As my regards I give You small tip 😉
    Instand of:
    flipbook.bookLoader.content.gotoAndStop(flipbook.bookLoader.content.currentFrame + 1);

    “goToNextFrame()” is metode of inDesign swf. If You use it, curl animation will use to flip page :-)


  36. I came across your tutorial and files. This is a great thing you’ve done to make this available. I really appreciate your sharing this. I have been playing with the dangerous voodoo portion of your action script to modify the book, but I’m just barely a novice and struggling along. I noticed that when you scale the book it automatically centers. Where can I affect this in the code? I’d like to prevent it from centering. Thanks.

      • To clarify:

        I turned off the centering in the XML as you suggested. This seems to prevent the flipbook from centering vertically. However, the book still centers horizontally on the spine when I use the zoom feature, even with the centering turned off. Is there a way to prevent that?

        • In flash, inside bookscaler.fla, try putting “//” in front of line 263 where it says
          fllipbook.x = stage.stageWidth/2 - (flipbook.width)/2;
          (Your line number may vary if you’re using an earlier version of bookscaler.)
          The “//” turns the line into a comment that won’t be read as code. Scaling should now by relative to the upper left corner of the gray box on the stage.
          Shoot me an email if that doesn’t do it.

  37. Congrats! this seems to be one of the neatest solutions for flipbooks in general and one of very few to be able to extend the Indesign-exported SWF.
    I am researching whether and how it would be possible to make the Indesign-exported SWF communicate with its environement via Javascript (execute functions on click on elements inside the SWF document), Indesign does not seem to accept links in the format ‘javascrpt:dosomething();’. I saw that you manage to load the swf on a specific page, you mentioned also that you have decompiled the Indesign SWF to find the names of the buttons… I am not a Flash person, so if you wouldn’t mind giving me a hint how I can attach a javascript function to those buttons, I would be very gratefull.

    • I would love to decompile the buttons and the whole actionscript API for the indesign SWF, but so far, I’ve had no useful results. For example, it would be nice to have the page flip animation optionally play when you use next/prev buttons in the bookscaler. On the “flip” side (sorry), at least you could embed javascript calls in the bookscaler or embed swf elements in inDesign (instead of, for example, jpeg buttons) that had the javascript calls already embedded.

      • Thanks a lot for your answer. I see its quite complicated, If I find something usefull, i’ll let you know although it does not look very promising…

  38. Love the tutorial, so far so good but one question is how do I change the stage color? I’ve gone into the .fla file and changed the stage color to the green I want but it still shows as grey in the final .html file.

    I’m sure it’s something I’m just missing…hopefully.

    • You have to adjust the stage color inside index.html. Open it with any text editor and you’ll see where colors are specified as hex codes. Holler if you get stuck and tell me what color you want. I’ll set it up for you.

  39. Hello again. Couple of things:

    a) Is there a way of setting the control bar to be locked to the bottom of the page rather than it hiding away. I know there’s the floating control bar option, but I’d like it stuck at the bottom in the position it sits when it’s un-hidden.

    b) Is there a way of quickly zooming in/out. Obviously the book scaler scales the entire book fine. But say you want to quickly zoom in on a certain part of a page if an unclear image is there or something similar, and then once you’ve looked quickly zoom out, would that be possible? Say with a double click to zoom, and again to zoom out.

    • a) Yes. That setting is included in the latest version of the bookscaler. You can use the bottom navigation bar and turn autoHiding off. Customize the appearance of the navigation bar in the flash source files if you care to.

      b) I don’t have a zoom feature in the bookscaler, but I believe there’s one built into the internal linking system within InDesign because there’s an optional zoom setting available when you make links.

      • When I set autoHideBottomNav to ‘false’ and useFloatingNav to ‘true’, no controls pop up at all. What am I doing wrong?

        • autoHideBottomNav shouldn’t affect the floating navigation at all. Make sure you don’t have any layers in the flash set to invisible. If you’re just editing the xml, shoot me a copy of your settings in an email to dave@davebricker.com so I can try to duplicate the error and fix any glitches that turn up.

  40. Hi,
    Great tutorial. Almost perfect for what I’m after. There’s a few issues though, although they may just be me being stupid. Please enlighten me!

    Firstly, the swf always aligns to the left of the page, cutting off the left hand side of the spread. This means I have to drag the book into the middle every time.

    Secondly, the swf is 20mb in size. How can include a preloader like you have on your novel example?

    Thirdly, the front and back covers show the entire spread rather than just the covers. How do I remove the blank pages?

    • 20MB is too heavy for an ebook/website. People with slower connections will never wait. Consider exporting the images at a lower resolution and/or compression setting. The next version will have the preloader included. I’m working out some other bugs in the same version so need a few more weeks. As for the swf aligning left, make sure you’re using my index.html page to load the content. So far, I haven’t seen any alignment problems that I can repeat. It may be that the alignment is happening before the file loads completely. There’s a delay built in where the script repeatedly centers the file, but in your case, I suspect it’s not long enough. See if making a smaller book helps (you have to do that anyway to make this useful. Otherwise, I can email you where to change the code to make the automatic centering script repeat more times.

    • There’s a video series on this page with some good info about making the book in InDesign. I watched them and found out that if you select all the pages, and uncheck “Allow document pages to shuffle” and “Allow selected spread to shuffle”, then add a single page at the front and drag it to attach to the first page, and do the same at the end, you will have all full spreads, not a single cover and end page. THEN what you do is, for the first and last pages, is put in a box that’s the color that you’re going to have your web-book stage. For example, black. Then, the pages will be there, but it won’t seem like it.
      InDesign only exports full spreads, there’s no way to actually remove those extra pages, so you just have to hide them. :)

  41. This is alllmost exactly what I need!
    I have two feature requests, for your next build. I appreciate everything you’ve done thus far!

    The first, I have no idea if it’s even possible – but the links in the exported swf don’t give the pointy hand or any other indication when you mouse over them. I am holding onto a slight hope that your swf wrapper can pick those out and change the mouse to the pointy hand when moused over? I realize this is probably not do-able.

    The second request is to allow the developer to make a list of bookmarks in the xml file that will display off to the side, at all times. That would be superb!

    Thanks again for sharing this.

    • Somewhere, buried in the inDesign swf file is some sort of nextPage() function that will play the pageflip transition. If I can detect the names of the buttons on the pages, I can display the hand cursor and so on. I’m playing with flash decompilers to try to break into the code and make some of that work. As for bookmarks, I’m thinking of storing them in a sharedObject file – the flash equivalent of a cookie. They’d only work on the machine they were saved on, but I’ve thought about this feature for a while. In the meantime, I’ve already implemented the ability to jump to a particular page by adding it to the url (e.g. http://www.mybook.com?p=25). It should be easy enough to add bookmarks to the browser itself, and that’ something I’ll work on. Glad you like the bookscaler. A few small updates are coming soon.

      • Very cool! I didn’t know if it was even remotely possible.
        What I’m considering doing is making frames (ew) with one on the left to hold my own coded bookmarks and the one on the right to hold the book.
        But! The ?p=10 page linky thing isn’t doing anything for me. It reloads the document, and puts the target page number into the “GOTO PAGE” box, but it doesn’t actually GO there. I am using it on a live web server, not locally, so it’s not that, like I initially hoped. Any thoughts as to why this would be happening?

        • I’ve seen a few instances where the link doesn’t work the first time, but then loads correctly when you refresh. Your frames-based solution should work fine once the book has loaded. I’ll be playing with a solution for the next version such that if there’s a “?” in the web address, it will load the requested page repeatedly until it can verify the correct page has been reached.

  42. Hi Dave, thanks for your reply to previous comment. I’ve opened the zip files into the same folder as my inDesign flip book folder and see a folder called -MACOSX and one called -brickPhotos. The items listed in your scaler tutorial book page 3 don’t seem to be there. I’m new to Flash Pro so, if there’s some real obvious stuff to miss, I’ll no doubt miss it. Should I have these folders in Flash? When I boot up Flash Pro it sees the bookScaler.fla folder and opens with it there ready to go. Do I then edit the script in Flash as per your tutorial, and it finds my inDesign flip book? If so, I can’t seem to find the folders mentioned on p.3 and presumably link them into the same folder as inDesign flipbook. Thanks for patience.

    • The MACOSX file has something to do with me making the files on a mac. It’s normally hidden, so I suspect you’re on a PC (which isn’t a problem, but the PC operating system doesn’t know what to do with the MACOSX file). The brickPhotos stuff relates to the inDesign demo files. The Flash file for the book scaler is in the root directory. I’ve gone through several revisions of the bookscaler and you may have an older version where the files are organized differently. Try re-downloading from http://tinyurl.com/4hco7gc You won’t have to change anything about your own flipbook file to use the upgraded version.

      Also, in the latest version, you don’t need to edit anything in Flash (though you still have that option). Just modify the bookScaler.XML file in any text editor and the rest will be automagic. The manual at http://theworldsgreatestbook.com/flipmanual/ explains exactly how to do that as does the last video in the tutorial series.

  43. I have been playing with your page flip file. Works great except when I combine it with SWF’s produced from InDesign. When I place buttons on the page (next/previous/end/first), only the end/first work. The next/previous/goto buttons don’t. Well sometimes they seem to, but not consistently. Sample file at http://www.universitymarketing.ilstu.edu/flipbook2/

    I am trying to retain the ability to have the page turns when the page flips. Thoughts?

    • I’m surprised you got the first and last page buttons working with the page flip animation. If you’re willing, shoot me your FLA file and I’ll try to fix the problem. If I can figure it out, I’ll build an XML-option into the next version to display the page flip or not. Sometimes, I wish it was possible to embed actionscript right into inDesign.

  44. Hi Dave, many thanks for posting the flipbook material. I’m trying to get an illustrated children’s one together with an illustrator partner. The images are all different millimeter sized jpegs, 72 ppi, and I’m wondering how to best decide what dimensions to set my document. Any tips on what the main considerations are digi-design wise? If I set the doc size to the same as the jpeg, the image is rather fuzzy. Many thanks anyway.

    • The bookscaler (in its current iteration) scales up as high as 200% so I use high-res images (as if I was preparing a real book for print) and then export at 144dpi. If you’re importing 72dpi images, the resolution is only going to get worse as you increase the magnification. Remember, you can’t scale an image up to a higher resolution. Use higher quality source files and the problem will resolve itself.

  45. Your tutorial is great! Thanks a lot! I’m really fascinated because it seem’s the only one that tries to achieve asthetic standards!
    There’s only a little “thing”. I can’t download the files although I’m a member of filden.
    (“Fatal error: Call to a member function set() on a non-object in /sites/live.fileden.com/templates/newtemp/tpl_dashboard.php on line 21”)
    Would you be so kind to tell me an alternative for downloading?
    However – thank you very much for this help!
    (sorry for my terrible english)

Leave a Reply