My Flipbook

My Flipbook is a simple page turning widget made in Flash.

The widget is no longer under development, but you are welcome to use it if you like. 

Please note: Because this product is being provided free, only very minimal support is available.

You can download the latest version here...

Creating a Flip-Book

Creating a flip-book is pretty straightforward.  You just create pages as images named pgNN.png (or .jpeg, or .gif) and then provide an XML file that lets the program know some details.  Here's a really simple example (which you will find in the install set)...

<book pagecount="8" pagewidth="480" pageheight="360" pagename="pg[n].png" showbuttons="true"/>

pagecount is how many pages are in the book, counting both sides of the actual page.
pagewidth and pageheight are the size of each page.  These will actually be scaled up or down anyway to fit your actual flipbook, but should basically reflect the actual dimensions of your images.
pagename is a template for the image names. So in this example the images will be called pg01.png, pg02.png, ..., pg08.png.
showbuttons lets you turn off the page turning buttons.  Setting it to false will hide them, so that you can only turn pages by clicking on the book.


When placing the SWF on your page, make the height sufficient so that a turning page and it's shadow fall within the bounds of your object.  You can then use relative CSS positioning to move the flip-book up so that the shadow etc move across the top of your other content.

You can see a demo of that here...

You can use View Source in the browser and have a look at the style applied to the div that contains the flip-book...

<!-- Flipbook is positioned relative -->
<div style="position:relative;top:-112px;margin:0 auto;width:680px;height:500px;z-index:9999">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="mfb"
    width="680" height="500">
    <param name="movie" value="/mfb/mfb.swf?base=/mfb&book=book"/>
    <param name="wmode" value="transparent"/>
    <embed name="mfb"
        width="680" height="500"
<!-- The following div is also positioned relative, to bring it up under the flipbook -->
<div style="position:relative;top:-230px">