Each page is a single file, that can be an image, or even a Flash Movie. Can have animations, sounds, embedded video, or any interactive content.

Only a fixed number of pages are pre-loaded.

Unused pages can be unloaded.

One level transparency for the top page.

Pages can flipped by a simple Mouse gesture, by clicking on their corner or by dragging them at their outer side.

Embedded control bar for navigation (back/forward, zoom, print, thumbnail mode, auto flip).

Pages can be Tear off (if enabled for that page).

Frame by frame or scripted animation, and any interaction is allowed.

Display a closer view of the page.

PageFlip can print the selected page if it have an associated zoom file.

Two different type of thumbnail can be used.

Content is scaled as the Stage is scaled.

Can load different sized content to the pages, and resizes them to fit on the page.

Usage of a sound object on a page is demonstrated with a sample file (demo_sound.fla). It fades the sound on and off depending on the pages visibility.
An additional sample file (demo_sound2.fla) is using a special sound effect (made by http://www.webmusic.hu).

Page flipping and scaled bitmap pages looks better with bitmap smoothing.

"Slideshow", flip through the book automatically, with optional looping.

Support for arabic (or any right to left written language) content.

If you want more than static pages, you will need some scripting, to let pageflip control your content.

This sample page demonstrates with a short script, how you can build a Table of Contents page using Data stored in the XML configuration file.
It also give example how to display it on the page, making every item clickable and adding them a link to the referred page.

Example how to use sound on a page. It controls the sound so it plays only if the container page is visible.

The same kind of page, but it controls a streamed flv playback, using VideoPlayer Flash component.

It is the most complicated type of content. A Spread in a single file. This spread is loaded twice by PageFlip, one for the left, and one for the right side. The script in the spread file have to determine, that the loaded instance from itself is on which side, and which instance is loaded first (the second will be the master). Every change on the pages must be repeated on the other side.

As the loaded file can be an swf file, it can have any type of flash animation, or scripted interactive content.

Event handlers are for adding special script to control content management, or to add visual/audio effects. The following event are watched: - start flipping - end flipping - tear off a page - swap into zoom mode and back - swap into thumbnail view mode and back

PageFlip is composed of page files. They could be jpg, gif (non animated), png or swf files. Image files are for static content, the best performance of the flip animation speed is achieved by using image files. (You can make transparent page not only by swf, but by using png format, and still keep the advantage of using an image file)

Swf files are treated specially, because they are special. They are scalable, they can be animated and scripted.

It is recommended to add the following script to each page's root:

function reset(onTop, active) {
//custom script here
}

Custom scripts have to control

• enable/disable buttons (needed when using transparent pages)
• enable/disable any interaction on the page which is not needed when the page is not visible
• sound/video playback

The variable onTop is true only when the page is on the top of all other. Buttons have to be enabled only in this case.

active is true, when the page is visible, but not on top (when the top page is transparent, or in thumbnail mode). It have to control animation on the page.

If you want to use the same swf file for the normal page view, and for the zoom view too, or you would like to use AutoSize feature, then you have to define some variables on the same level as the previous script:

// used for autosize;
pageWidth = 330;
pageHeight = 380;
// if used as zoom file, use these size parameters
zoomWidth = 660;
zoomHeight = 760;
zoomScale = 200;

The values for AutoSize tells the script how big is the loaded page's original size. Values for zoom tells the PageFlip how many it have to enlarge the content.

Zoom files are used for a detailed page view, and printing source for a page.

If LiveThumbnails is set to "true" in the XML file, you don't need to make thumbnail files, as they are scaled down from the page file. Any other case, the thumbnail files have to be the scaled down copy of the original page content.

Enable Transparency in the XML file (Transparency="true"), to be able to use transparent content. This enables a one level page transparency, that means you can view through the page, you can view the page overlaid, but not the next. Only 1 layer is rendered in addition. This is for best performance, too much page content rendering can slow down the flow of the flip control.

If you don't want to use transparent pages, set this attribute to false (Transparency="false"). Rendering will be smoother this way.

Pages can be rendered like "hard" book covers. 3 attributes controls this option:

Hardcover (Settings' attribute)
• set to "false" to use "soft" cover (default value).
• set to "true" to render "hard" book cover.

Hardpage (Settings' attribute)
• set to "false" to use "soft" pages (default value).
• set to "true" to render inside pages as "hard" page.

HardPage (PageOrder/PageData's attribute)
• set to "true" to render that page as "hard" page (default false).

If you don't specify an attribute, its default value will be used!

As all hard-covered book's cover larger than the inside pages, PageFlip let you the option to use Larger cover pages. This feature works correctly only if you enabled Hardcover.

The following attributes are for setting up PageFlip's "Large"cover:

LargeCover (Settings' attribute)
• Enable LargeCover to use bigger cover pages than inside pages (LargeCover="true", default false).

LargeCoverTopOversize (Settings' attribute)
• Difference in pixel at top, and bottom.

LargeCoverSideOversize (Settings' attribute)
• Difference in pixel at the outer (not center) side of the cover page.

Pages can be scaled up/down as the stage is resized. The zoom-page viewer area and the Thumbnails area are also scaled if this option is enabled (PageScale="true", default false).

The scaling is done by the following way:

PageFlip is rendered at 100% (with the page size set in the XML) only when it is displayed with same Stage size (at embed level in html, or in Flash Player) as it is defined in pageflip_loader.fla's BaseStageWidth and BaseStageHeight variables. When the stage is resized, PageFlip fits itself inside the space left. Space left means, the Stage.height - DefaultControlHeight. DefaultControlHeight is set in pageflip_loader.fla, and it is the Height of the bottom control-bar in pixels.

Thumbnails are displayed only if ThumbnailsEnabled (Settings' attribute) is set to true (ThumbnailsEnabled="true")

LiveThumbnails means, that the thumbnail images of the pages are the pages itself, just resized. All pages are shown exactly as they appears in the book. With ThumbnailsActivePages enabled (ThumbnailsActivePages="true", default false) animation are rendered too. LiveThumbnails are rendered on stage so they fit the book's area, like they are sit on a spread. If PageScale is enabled, the thumbnails will be scaled too.

Disable LiveThumbnails (LiveThumbnails="false", default true) to allow pageflip to load pre-saved thumbnail pages. They will be displayed with predefined fixed size, and they won't be never scaled. If ThumbnailScale is enabled (ThumbnailScale="true" default false) the thumbnail area will be scaled, and the images will be rearranged to fit inside.

The size of the loaded thumbnail images must be set (only if LiveThumbnails is enabled) in ThumbnailWidth/ThumbnailHeight (Settings' attribute).

ThumbnailPadding (Settings' attribute)
• space between thumbnail spreads in pixel.

ThumbnailBorderWidth (Settings' attribute)
• width of the border outside of the spreads.

ThumbnailBorderColor (Settings' attribute)
• the colour of that border (example "0x333333", Hexadecimal RGB value).

ThumbnailBorderHoverColor (Settings' attribute)
• the colour of that border when hovered by the pointer.

The size of your page depends on the usage of the book:

• Fixed size - the book have a fixed size, all pages need to be created with the same (predefined) dimension. There is still an exception: if you set AutoSize to "true" in the XML file, the page will be resized to the predefined size.
• Scalable - if you want your book to be scalable, you have to set the base dimension depending on the type of the pages. If you use bitmap content, the base dimension of the page have to be the largest supposed page size. But if you use mostly swf (vector) page content, there is no need to use big pages, they will be able to scaled up without quality losses.

It is important, that if you already know the page size, you have to set the BaseStageWidth and BaseStageHeight values in pageflip_loader.fla so the pages will have enough space to fit on the Stage. You have also set the Stage size too (or in the html embed script).

BaseStageWidth/BaseStageHeight is used to calculate the scaling factor of the book. These variables and the Stage size must be large enough to display the book and the controls on the Stage without cropping.

Example:
If you want to use 400x600 sized pages, your book will be 800x600, add then the controlbar height -> 800x660, and add some space at the top and bottom of the book -> 800x800
Set your Stage size to 800x800 pixels (if you enabled page scaling in XML, this step can be skipped)
Set these variables:
var BaseStageWidth = 800;
var BaseStageHeight = 800;

Now your pages will be displayed as espected.

Page files must be made using the dimensions set in XML (PageWidth/PageHeight Settings' attribute), except if you enable AutoSize option in XML (AutoSize Settings' attribute, default true).

Buttons on the page
Making buttons needs a bit more attention than non-clickable objects. If transparency is enabled/used, a page can still visible even if it isn't on top. if there are buttons on the page, they will be clickable through the transperent page, and trigger the page below. In addition, if ZoomOnPageClick feature is enabled (ZoomOnPageClick="true", default false), zooming must be disabled if a button is hovered. To fix these issues, a short script must be added to the page's root to control buttons:

function reset(onTop,active) {
button1.enabled = onTop;
button2.enabled = onTop;
//etc.
}

//for each buttons:
//needed only if ZoomOnPageClick feature is enabled
button1.onRollOver = function () {
pfroot.overbutton = true;
}
button1.onRollOut = button1.onDragOut = function () {
pfroot.overbutton = false;
}
button1.onRelease = function () {
pfroot.overbutton = false;
}
//etc.


Please note, that if you have already defined a reset function, just add the script enclosed by the braces to the existing reset function.

Animation on the page
Animations are also controlled by the reset function. If a page is not visible, the animation on it must be stopped.

Each page can have an associated zoom file, that will loaded when the zoom button is pressed. if ZoomOnPageClick is enabled, it is enough to click on the page. The zoom page scrolling can be done by dragging it (DragZoom="true", default false) or by mouse movement over the page. The size of the area where zoom pages are loaded can be changed also (if PageScale is enablet it will be scaled like the book), that is important if you change the Stage size.

If LiveThumbnails option is disabled, each page must have an associated thumbnail file, they will be loaded when the thumbnail button is pressed first. They are fixed sized. If PageScale is enabled, the thumbnail won't re-scaled, but they will be rearranged to fit the available space on the stage.

Set the page size in pixel. AutoSize is an option if you don't want to resize page files to the same size as it is defined with PageWidth/PageHeight. If you set it "true" it will resize the page file, if "false" it leave as it is.

Sets the starting page number. At the start the book will be opened at this page. This value is overwritten by directlink if it is defined at html's embed level.

PageFlip can handle two type of pages, "hard" and "soft", If you set Hardcover to "true" the covers will be hard, if "false" they will be soft. Hardpage do the same with the inside pages.

Enables or disables the shine/shadow effect at the center of the book.

With this option set to "true" you can use larger cover pages as the inside pages. Oversize values tells the script how many the cover pages are larger than inside pages.

BackContent option let you load a MovieClip or image file in the background of the PageFlip. This content will be center aligned with the book. With this option set to "true", a file will be loaded from the URL set in BackFile. BackAlwaysVisible have to be set to false, if the BackContent is covered completely with the opened book. Otherwise it must still visible even if the book is opened.

Please modify these variables carefully, they affect page flipping animation control. HcoverAngle set the angle of the opened hard pages.
ClickArea is the shape width at the outer side of each page, where you can drag to begin flip that page.
AutoFlipArea is the box size at the page corners where you can flip a page by simply clicking on it, and it also used for curl the page corner at mouse-over.
Speed values controls animation speed at different events. 1 is the fastest, and as you increment this value the animation is slower.
TearDistance defines how far you need to drag a page to tear it off.

Simply enables/disables the ability to flip pages.

As the book is loaded, it starts flipping automatically through the whole book. The default values for the interval and looping will be used for autoflipping.

Display book so its browsing direction is reversed. This option also affects page number display, thumbnail display (only if LiveThumbnails option is disabled), gotoPage function.

Enable/disable page scaling when the stage is resized.

Defines the number of pages (back and forward) to be pre-loaded from the actual page.

If enabled, unused pages are unloaded, so they will free up some memory.

Defines the colours used on the empty page that is only visible before the page file was loaded or in case of that file is not accessible. It uses Hexadecimal RGB values.

Enables/disables the 1 level transparency in the book. If you don't use transparent pages, set both value to "false" to use less CPU. Set TransparencyActivePage to "true" if you want active animations on the page covered by the transparent page.

Links the defined file to the Book button on the control bar.

If "true" it shows a little help message when a button is hovered.

Controls the zoom environment's window size, mouse follow speed. If ZoomActivePage is "true", animations on the zoomed page will be active.

ZoomOnPageClick means that a simple click on the page switch to zoom view

If DragZoom is "true" the zoomed page can moved by dragging it.

Set up of the Thumbnail view layout.

Enables/disables mouse control of the book.

Enables/Disables the flipping sounds in PageFlip. It is default false.

Set the flipping sounds volume from 0 to 100. Default 25.

Sound files played at the specified events. Start for start flipping, End for end flipping (when mouse button is released while dragging the page), and TearOff for tear off page sound.

Defines the path and the file to be loaded for that page. PageFlip supports JPGs, non-animated GIFs, PNGs and SWF file formats.

Optional. Defines the zoomed page file, it is loaded when you click on the magnifier button, or when you print that page. If you don't define this attribute the zoom/print buttons will be inactive.

If ThumbnailsEnabled is true and LiveThumbnails is disabled, ThumbnailFile must be defined for each page.

Optional. It is used by the table of contents. You can refer to that page in the table of content.

Optional. Default it is false. If you set it to true, you will be able to tear out that page.

The name of that TOC item, as it will appear on the page.

TOC item target page is identified by the label set in pageorder.

TOC item target page is identified by its number. If you set it to 9999, the link will open the thumbnail view.

Optional. Default is "false". If you set it to true, you will go directly to the target page without flipping through the book.

You can make language translations by redefining each language attributes. Texts that contains a # sign defines the place of a number to be displayed dynamically. For example at page 23 the Pager is displaying "Page 22-23" with the setting PagerText="Page #", but if set to "#. oldal" then it will display "22-23. oldal"