By default, when you export a flipbook with in5, a shadow appears in the gutter between the pages of the spread. To customize the appearance of the shadow, try one of the following techniques--one that changes the code and one that doesn't require changing the code.


Manually modify the code

You can manually modify the code that sets attributes such as the width, the color, and the transparency of the shadow in the gutter of the flipbook.


Output of flipbook with default gutter shadowOutput of flipbook with gutter shadow set to a width of 40, RGB values of 150, 100, 25, and an alpha of .5


Here's how to modify the gutter shadow code:

  1. Open assets/js/turn.min.js in a text editor such as TextEdit (macOS) or Notepad (Windows) or in an IDE such as Dreamweaver which is available if you have the full Adobe Creative Cloud subscription.
  2. Search for turn-page-gutter and locate the 2nd instance of it. In the snippet below, the parts highlighted in yellow can be changed to adjust the width, the darkness of the gradient, and the color:
    • To change the width, adjust the width value to however many pixels you'd like the width of the gradient on one page (not the combined spread) to be.
    • To change how dark (technically, not transparent) the gradient is, change the 0.1 value after rgba. Above, it's set to a tenth of how dark (not transparent) it could be. The most it can be is 1.
    • To change the color, set the first 3 values in each rgba parameter for the red, green, and blue values of the desired color.
  3. Save the changes

Because the modified code is a manual change, I would recommend saving a copy of the changes you make to the code elsewhere because you would need to reapply them after each time you re-export.


Create the appearance within InDesign without modifying any code

If you'd like to make the modified appearance without having to manually modify code and without having to modify the code each time you export, then you can make the change within InDesign.


InDesign layout with 60px-wide rectangle filled with a brown gradient (105, 75, 25), blend mode set to Multiply, opacity at 50%, and a 2px-wide vertical lineOutput of the layout from the left  in addition to the generated default gutter shadow.


For example, you could add a 60 px wide rectangle that is the height of the pages, filled with a gradient that is centered over the gutter. Make the gradient go from white to whatever color you choose and back to white. You can adjust the darkness of the middle color and add a multiply effect to the object if desired. 


You can also add another rectangle or line down the center to create a solid dark line separating the pages. The rectangle and line could be placed on a Parent page that would be applied to the spreads. 


When you use this approach and export with in5, make sure that Allow Page Items to Span Across Pages within Spreads is selected in the Advanced section of the Export HTML5 with in5 dialog (in5 > Export HTML5 with in5...). 


Note: If you use this approach, you may want to apply code to the Resources section to prevent the flipbook from being viewed in Single Page Mode where it shows one page at a time and the gradient would remain along the edge of each page and to remove the default flipbook shadow.


Vary the appearance of the gutter within a document


Both the code changes above and applying the rectangle (and optionally, the line) to a Parent page would be a universal change to how the flipbook gutter would appear throughout the document.


If you'd like to vary the appearance of the gutter within a single document, such as changing the color of the shadow on different spreads, then you could make the changes on different Parent pages that would be applied to select spreads.


For more information about creating flipbooks with in5, see How to Make an HTML5 Flipbook with Interactivity from InDesign.