PageFlip 3.6 documentation

Event handlers are for adding special script to control content management, or to add visual/audio effects.

The following events are watched:
• start flipping
• end flipping
• tear off a page
• switch into zoom mode and back
• switch 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, on the root of the page file:

// 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.

The PageFlip package contains a page template source file (Source/pages/template_page.fla) which contains all these functions and variables predefined. You just need to set values for the variables that match you setup.

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).

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 XML in BaseStageWidth and BaseStageHeight attributes. 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 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.

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.

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.

HotSpots are used to make special buttons on the page. They are purely defined in XML. HotSpots are invisible Shapes on the page, which displays a popup message (also set in XML) on mouse over, and can be set up to open a webpage in the browser, or to go to any page in the book.

Each page can have its own HotSpot XML file, defined in HotspotData (an optional attribute of PageOrder/PageData). Assign it the file which contains the HotSpot definitions for that page (HotspotData="pages/page1hotspot.xml").

HotSpots are defined in an XML file. Each page with HotSpots on it, have its own HotSpot data file. The root node is HotSpotData, it contains the HotSpot definitions, each within a HotSpot childnode, which have these attributes to set up a HotSpot:

Shape (HotSpot's attribute)
• Describes a free shape, point by point, using a coordinate system with origin in top-left corner of the page. The last point is connected to the first automatically. The syntax is: Shape="x1,y1/x2,y2/x3,y3/xn,yn"

PopupTitle (HotSpot's attribute)
• Popup window title, which appears on mouseover. Syntax: PopupTitle="Your Title"

PopupText (HotSpot's attribute)
• Popup window message, which appears on mouseover. Syntax: PopupText="Your message"

TargetLabel (HotSpot's attribute)
• You can go to any page with a Label (See PageOrder, PageData). Syntax: TargetLabel="YourLabel"

Skip (HotSpot's attribute)
• If true, it goes directly to the target page, if false, it goes there by flipping page by page. Syntax: Skip="true"

Link (HotSpot's attribute)
• Opens an URL in your browser. Syntax: Link="http://pageflip.hu"

Use the original HotSpot XML file as template.

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="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 XML so the pages will have enough space to fit on the Stage. You have you have to be care about to embed pageflip_loader.swf with the same size to view pages at 100%. Otherwise, if PageScale is enabled, and the embedded Movie's size is not the same as BaseStageWidth/BaseStageHeight, the PageFlip will be scaled.

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 (this step can be skipped if you embed PageFlip into html)
Set these attributes in XML:
BaseStageWidth="800"
BaseStageHeight="800"
Set your Movie size in the embed scripts in html (this step can be skipped if run PageFlip in StandAlone Flash Player)

Now your pages will be displayed as espected.

Page files must be made using the dimensions set in XML (PageWidth/PageHeight Settings' attributes), except if you enable AutoSize option in XML (AutoSize Settings' attribute, default true), but better is the quality with matching size.

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 button:
//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/Sound/Video on the page
Animations, Sound and Video playback are also controlled by the reset function. If a page is not visible, the animation or playback on it must be paused, and resumed when it become visible again. To control it, add this script inside the existing reset function:
if(onTop|active) {
//play script
} else {
//pause script
}

Embedded pages
Page files can be embedded in pageflip_v36.fla. Make your own page MovieClip, then export it using the library's linkage setting (export it to the first frame). The Export Name have to be used to reference this page in the XML file: PageFile="embedded:yourPageMC"
Use prefix: "embedded:" in any PageFile and LargeFile to tell the script that the content is embedded. (Thumbnails can't be embedded, use LiveThumbnails)

ZoomOnPageClick means that a simple click on the page switch to zoom view.
LightBoxZoom set to "true" enables zoom images view with LightBox (no swf support).
If ZoomActivePage is "true", animations on the zoomed page will be active.
If DragZoom is "true" the zoomed page can moved by dragging it.
ZoomToTop show the top of the page when entering zoom view.
ZoomHotspot enables HotSpots used on the original page in zoom view.