PageFlip4 User’s Manual This document is the user’s manual of the Industrial Graphics PageFlip version 4. IMPORTANT! Unlike earlier versions, PageFlip4 includes a basic level copy protection feature preventing unauthorized use of the book on homepages, or publications. This protection does not limit the License owner in any way; the use of the created Book is limited by the License holder. For more information on the configuration of copy protection, refer to the Appendix. Table of Contents - 1. Introduction - 1.1 New features (for users of the 3.6 version) - 1.2 Concepts - 2. Overview - 2.1 The Screen - 2.2 The Book - 2.3 Preview - 2.4 ControlBar - 2.5 Copyright Message - 2.6 Zoom View - 2.7 Thumbnail View - 2.8 Print - 2.9 Sounds - 2.10 Background music - 2.11 Files - 3. Configuration of PageFlip4 - 3.1 Creating test environment - 3.2 Modification of the XML file - 3.3 Use of the XML Validator - 3.4 Sizes - 3.5 Customizing the Screen and its structure - 3.5.1 Default font - 3.5.2 Popup and Tooltip settings - 3.6 Customizing the ControlBar - 3.7 Customizing the Book (Hardcover, hardpage, largecover etc.) - 3.8 PageOrder - 3.9 Preparing the graphical content - 3.10 Pages & Spreads - 3.11 Use of HotSpot - 3.12 Table of Contents & Info Floating window content - 3.13 Configuring the Menu language(s) - 3.14 Publication of the created PageFlip - Appendix - Copy Protection settings - Interactivity - Customizing ControlBar Skinning - Font Embedding - XML reference - Hotspot XML reference - PageFlip4 Error messages - Tips for Optimization - PageFlip4 Embedding - Use of LightBox - Color Codes - mostFAQ -------------------------------------------------------------------------------- 1. Introduction The main function of PageFlip4 is to display a document like a book with pages that can be flipped, while all other features are subordinated to that. With the help of PageFlip4, User can create a book from simple images or interactive flash movie files, and flip its pages on the screen, or publish it on the Internet, or on any kind of media.

PageFlip4 can load any flash compatible content, so display and interactivity is not limited to printed publications or pdf. Since PageFlip4 can be widely customized, it can even serve as basis for homepages, where the content is displayed on the pages.

PageFlip4 is recommended to everyone eager to share one or more of their documents in a stylish, book-like form, and who has basic knowledge of image manipulation (scaling) and XML file editing (text file modification).
 From simple to advanced While PageFlip4 has the simplest possible configuration, it is also extremely customizable to meet all the various needs. The solution is to have most of the settings as default, so the configuration file only needs to include the modified settings from the more than 200 possibilities. By default, our book starts on the first page, the pages can be flipped, there are navigation buttons, small view screens, zooming, printing, and all we have to do is prepare the contents to be loaded to the pages, and adjust the size at the settings.

Or, there is the advanced use, where the interactive content takes the control over the book, where every visible detail is customized, where the sound material can be heard over the background music, and so on. And if we reach the limits of XML configuration, further possibilities are available with the help of the source codes in the Developer package. -------------------- 1.1 New features (for users of the 3.6 version) This version is a completely new software. It has only inherited the feature list of its predecessor (not completely identical). There are changes in the program language and structure: PageFlip4 is an Object-Oriented software written in AS3. From the outside, speed can strike users, while the inner improvements will be very useful during later developments, which will hopefully be available for Users in the form of free updates. However, there are spectacular and exciting new features. The most significant are the following: - Multiflip: flipping simultaneously more than one pages - Multi Level of Transparency: optional number of consecutive transparent pages - Real Spread: real spreads working perfectly without tricks - New perspective Hard Cover - Tilted Book view - Content Preview: preview of the pages beside the Book - Vertical layout: vertical layout with vertical navigation buttons and preview - Background image and background music - Background image and background music assigned to pages Some further modifications with less importance: - Transitions - Embedded international fonts (Latin) - 5 kinds of HotSpot shapes - Popup windows with images, headlines, texts - ToolTip - Immediate menu language switch - Copy protection -------------------- 1.2 Concepts The following concepts need to be clarified for easier understanding: PageFlip, PageFlip4 – the application itself. User, Publisher - PageFlip4 License owner, the person or company that edits, publishes, and uploads the Book to the Internet. Do not mix up with the visitors, who browse the Book with the help of PageFlip4. Screen – The display interface of PageFlip4, the area where the elements of PageFlip4 (the book itself, the buttons, the thumbnails, etc.) are displayed. Book - the main ingredient of PageFlip is the book with pages that can be flipped (magazine, newspaper, any other publication with pages that can be flipped will be referred to as Book in this manual). Content Preview – the series of thumbnails in a scrollable bar, appearing simultaneously with the Book. Thumbnails – the view of PageFlip4 when all the pages of the Book appear in small preview images Page – a page of the Book Page-file – The file specifying the content of the page -------------------------------------------------------------------------------- 2. Overview - 2.1 The Screen The following elements can appear on the screen of PageFlip4, depending on the configuration and the current view: - Preview - Book - ControlBar - CopyrightMessage - Zoom view - Thumbnail View - Floating Windows (Content, Info) (Figure 2.1*) - 2.2 The Book The Book includes all the pages of the document. The pages of the Book can be flipped with the help of the mouse, by drag'n'drop, or by clicking on the corner of the pages. User can navigate with the help of the ControlBar, or the Keyboard. Pages can be flipped horizontally, or vertically as a calendar. The pages can have soft or hard. The Cover pages can be larger than the pages inside. We can create HotSpots on the pages with the help of XML configurations. HotSpots are areas created by the User on the screen that can open Popup windows if the mouse hovers over it, and send User to another page if User clicks on them. HotSpots can also open links or LighBox images. - 2.3 Preview Optionally, User can have a series of thumbnails beside the Book, that we can hover over with the mouse (if cursor is moved to the edges, it starts and accelerates), and the Book flips to the page on which we clicked. - 2.4 ControlBar By default, below the Book we find the ControlBar that can be divided into three areas: the loader status is visible optionally on the left side, the middle section includes the flip, zoom, print buttons and the current page number where the book is open, while the right side has all the other functions, namely AutoFlip, Sound, download, information, table of contents, thumbnails, language, full screen, exit. The ControlBar can be disabled, if we want to view the Book only. Each button of the control bar has a Key assigned, so if the given button is active, it can also be activated from the keyboard. By clicking into the text box, the cursor appears and User can specify the page number or name* to jump to, and by pushing ENTER, the specified page opens if it exists. If the mouse is over a button for more than 2 seconds, the assigned ToolTip appears (that can be configured in the language section**) - 2.5 CopyrightMessage A one-line message in small print indicating the owners of the document. - 2.6 Zoom View An enlarged area of a given page. More than one zooming level can be specified, depending on the configuration. A separate file belongs to all levels of zooms, which loads only if necessary (except if User enables the immediate loading of all sizes). If User clicks on Zoom in Book view, the + sign turns to – with which the zoom view can be left, or the view can be decreased. User can further zoom in with the zoom button on the other side, if more than one zoom sizes have been prepared. Scroll with the help of the mouse if the zoom does not fit the screen. - 2.7 Thumbnail View In this view, PageFlip displays the small thumbnail images of the Book’s pages in order on one or more pages, depending on the resolution of the screen. If the cursor is moved over the pages, a ToolTip appears with the page number of the current spread, and the Book goes to the page by click. - 2.8 Print Each page of the Book – if enabled – can be printed, but only one-by-one. - 2.9 Sounds The Book has several flip sounds that User can change, or disable. - 2.10 Background music
 User can specify one main background music track for PageFlip4, and sounds/music can be assigned to each page separately, which start to play only if the given page is visible. In this case, the main background music fades out. - 2.11 Files The PageFlip4 package includes 3 libraries: obj/ - Files of the PageFlip4 and the Book contents src/ - Source files (source files of the load and page files) utils/ - location of the XML Validator obj/css/ - Styles belonging to the HTML embedding file js/ - SWFobject and LightBox Javascript codes pageflipdata/ - External files of PageFlip4 pageflipdata/backgrounds/ - Background images BGM/ - Background music pages/ - Page files pages/thumbs/ - Thumbnail views of pages zoom/ - Enlarged views of the pages PageFlip4 can be started with the index.html. By default, all files loaded by PageFlip are searched for in one given library: pageflipdata/ The configuration XML file is also available at: pageflipdata.xml. -------------------------------------------------------------------------------- 3. 3. Configuration of PageFlip4 - 3.1 Creating the test environment The downloaded PageFlip4 is ready for testing immediately after extraction. Make sure to save the libraries including the PageFlip4 files to the right directory, and to place the later created contents within the original file-structure for easier handling. - 3.2 Modification of the XML file the pageflipdata.xml (default) configuration file is in the pageflipdata/ library/directory. Both the name and the location of the file can be modified optionally in FlashVars variables: flashvars.XMLFileName = "pageflipdata.xml"; flashvars.DataFolder = "pageflipdata/"; Edit the file with a simple Text Editor if no separate XML editor (for example the Text Edit in OS X, or the Notepad in Windows) is available, but not with a text editor like MS Word. Never format fonts, colors, or sizes within the document, as they save formatting information in the file, and will break the XML structure and PageFlip will not be able to handle them. When editing, current attribute values can be modified in the quotation marks after the equal sign. Regardless of the data type, quotation marks can never be left out. Add new attributes to the XML with extra care. The simplest way is to push Enter after the existing attribute of the given category, and add the new one after that in the next line. - 3.3 The use of the XML Validator The XML Validator provides copy protection to our PageFlip4. Start the XML Validator before running PageFlip4 online or offline. For further information on the use of the XML Validator, refer to the Appendix**. - 3.4 Sizes The preparation of the Book’s pages depends on its final environment. After specifying the resolution to optimize to, User can calculate the Screen area, including the Book, so that Preview (if enabled) and the ControlBar are also visible. Consider the type of the Book (Horizontal/Vertical), if Large Cover is preferred, and the area designated for the Book, and then calculate the ideal page size. Also consider that in case of Full Screen view, the graphic elements of the pages might need larger resolution. For this reason and because the system automatically scales the Book (default setting), use the larger, rather then smaller, page size for calculation. If the content of the book allows no free scaling, choose a page size that fits full screen at the minimum resolution. The following size settings can be found in the Settings node of the XML configuration file: - PageWidth="300" - PageHeight="400" The Width and Height of the pages. If scaling of the pages (Settings/PageScale="false") is disabled, the pages of the Book appear on the screen in this size. If User loads content to a page that does not fit the specified page size, and automatic scaling (Settings/AutoSize="true") is enabled, then it will scale to this size. When flipping Spreads, if animation during flipping is enabled ****, a Bitmap copy of the page is created in this size. Coordinates of the loaded HotSpots have to match this page size, thus User should configure HotSpots when the Book is done. - MinStageWidth="" - MinStageHeight="" The minimum allowed size of the screen. At the scaling of the Flash Player or Browser window, PageFlip4 continuously adjusts its content to have everything in its right place and size on the Screen. However, if User wants the window to be smaller than the minimum possible size, it is overruled, avoiding the overlaying of various contents. If the Book cannot be scaled, then the minimum size should be enough to display the Book, the ControlBar and the Preview (if enabled). - LargeCover="true" - LargeCoverHorizontalOversize="16" - LargeCoverVerticalOversize="32" If User wants the cover to be in a larger size, LargeCover has to be enabled (Settings/LargeCover="true"). The difference in size has to be specified horizontally and vertically. If, for example, the Cover is larger around the edges by 16 pixels than the pages inside, then the cover page will be 16-pixel larger horizontally (Settings/LargeCoverHorizontalOversize="16"), while the difference vertically (margin is added on the top and the bottom) will be 32 pixels (Settings/LargeCoverVerticalOversize="32"). If User creates a vertical Book, than the horizontal size difference will be 32 pixels and the vertical will be 16 pixels. Scaling, by default, concerns 4 pages, the external and inside pages of the front and back Covers. If User sets the Book to be open all the time (Settings/AlwaysOpened="false"), or set odd page number Book, then it is modified based on the variations of the settings. - 3.5 Customizing the Screen and its structure The Screen itself is an interface on which other elements of PageFlip4 can be found. User can set a background, and specify the layout of the displayed content. User can choose from three types of backgrounds: - No background User can embed PageFlip4 over html content, so that its background is transparent. Transparent background has to be enabled in the XML: TransparentBackground="true" and we have to permit the transparency of the Flash Movie at the embedding of the html: If transparent background is disabled in the html, the default background is white, or the color set in the SWFObject parameter: params.bgcolor = "#FFFFFF"; - Background color TransparentBackground="false" BackgroundColor="0x2A2A2A" User can specify an optional background color (see Appendix: Color codes) Do not enable the transparency of the background (default setting) - Background image Regardless of the background color, PageFlip4 loads the image from the given URL and places it in the background. While the image is being loaded, the set or default background color is valid. TransparentBackground="false" BackgroundImageFile="backgrounds/demoBack2.jpg" The layout of the PageFlip4 elements The order of the Preview, the Book and the ControlBar can be set: LayoutOrder="PREVIEW-CONTENT-CONTROLBAR" By default, they appear from top to bottom in the following order: - Preview - Content - ControlBar User can freely modify the order, for example: "ControlBar-Content-Preview" The Preview has to be enabled, as it is turned off by default: ContentPreviewEnabled="true" The Content can either be the Book, the zoom or the thumbnail view. Floating Windows appear on this content interface too. When scaling the Screen, the size of the content part changes, the other features have fix sizes; for more information, see the configuration of the Preview and the ControlBar. ThumbnailsEnabled="true" Enabling the use of the thumbnail view. Set the Thumbnail view button as follows (see: 3.6 Customizing the ControlBar): ThumbnailModeStart="false" - Start of the PageFlip in Thumbnail view ThumbnailWidth="120" - Size of pages in Thumbanil view ThumbnailHeight="120" ThumbnailDropShadow="true" - Enable DropShadow ThumbnailDropShadowSize="8" - The rate of blur in pixels ThumbnailDropShadowOffset="2" - Vertical offset in pixels ThumbnailDropShadowAlpha="30" - Transparency of the shadow (0-100) The settings of the Thumbnail view also concern the Preview. The ControlBar is enabled by default; it is visible and can be used. User should disable the function if it is not wanted: ControlBar="false" User can code the Copyright message with the XML Validator (see Copyright in the Appendix), and then User can customize it: CopyrightMessage="" If it is enabled in the XML Validator, User can disable the Copyright Message: CopyrightMessageDisplay="false" Enabling full screen view: FullScreenEnabled="true" Do not forget to enable it in the flashvars-ben: params.allowfullscreen = "true"; - 3.5.1 Default font User can modify the default font. If the default Font is not set in the XML, the automatically embedded font will be used. Embedding custom font is only possible with the help of Adobe Flash CS5. For further information, refer to Font Embedding in the Appendix. From this on, if no font attribute is set in the XML, the default font will be used. But User should only specify a value in a font attribute in case of custom embedded fonts. - 3.5.2 Popup and ToolTip settings The Popup and the ToolTip floating windows are basically the same, the only difference is that the ToolTip contains only a one-line text, and its width is adjusted to the length of the text. PopupBackgroundColor="0xFFFFFF" - Background color PopupBackgroundOpacity="80" - Transparency of the background (0-100) PopupBorderThickness="0" - Width of background border PopupBorderColor="0x000000" - Color of background border PopupRounded="true" - Enable rounded border PopupRoundedRadius="8" - Rate of rounded border PopupMargin="8" - Margin PopupTitleFont="" - Font of the title PopupTextFont="" - Font of the text PopupTitleColor="0x333333" - Color of the title PopupTextColor="0x333333" - Color of the text PopupSpace="8" - Space between image/title/text PopupMouseFollowSpeed="5" - Mouse follow speed - 3.6 Customizing the ControlBar The ControlBar can be enabled/disabled. Enable it when customizing: ControlBar="true" ControlBarHeight="55" - Height of the ControlBar ControlBar position can be vertically modified: ControlBarOffset="15" - Rate of downward offset in pixels Further general settings: ControlBarScale="100" - Size of the ControlBar (%) ControlBarFullScreenScale="150" - Full screen size (%) ControlBarBackgroundColor="0x555555" - Background color ControlBarBackgroundAlpha="50" - Transparency of background (0-100) If no color is specified, the ControlBar does not have a background. Enabling the LoaderBar: ControlBarLoaderEnabled="true" Navigation buttons can be enabled/disabled based on their types: ButtonFirstLastEnabled="true" - First/Last page buttons ButtonLeftRightEnabled="true" - Previous/Next page buttons ButtonZoomEnabled="true" - Zoom buttons ButtonPrintEnabled="true" - Print buttons Extra buttons can also be enabled/disabled: ButtonAutoFlipEnabled="false" - Automatic flip button ButtonPDFLinkEnabled="false" - Download button ButtonLanguageEnabled="true" - Menu Language button ButtonThumbnailEnabled="true" - Thumbnail view button ButtonMuteEnabled="true" - Mute button ButtonInfoEnabled="true" - Info button ButtonIndexEnabled="true" - Table of Contents button ButtonFullScreenEnabled="true" - Full Screen button ButtonCloseEnabled="true" - Close button Colors of the ControlBar: EnableButtonColoring="true" - Enable Color ButtonColor="0x666666" - Default color and transparency ButtonAlpha="100" ButtonOverColor="0xF0B400" - MouseOver color and transparency ButtonOverAlpha="100" ButtonPressColor="0x666666" - Press color and transparency ButtonPressAlpha="50" ButtonDisabledColor="0x666666" - Inactive color and transparency ButtonDisabledAlpha="15" For information on customizing the graphic elements of buttons, refer to the Appendix. - 3.7 Customizing the Book The Book settings determine the layout and the handling of the Book, and the layout of the pages. Either they directly affect the Book, or they concern all pages of the Book. In order of significance: (This section includes several attributes already explained earlier) PageWidth="300" - Width of the page PageHeight="400" - Height of the page AutoSize="true" - Automatic sizing of the content loaded to the Page PageScale="true" - Automatic scaling of the Book MinScale="50" - Minimum and maximum size in percent MaxScale="200" MinStageWidth="700" - Minimum Screen size MinStageHeight="620" ViewAngle="0" - View angle (-89 - 89) StartPage="1" - Start at the specified page AlwaysOpened="false" - Book always open Book ZeroPage="false" - 0. page content ZeroPageAlwaysVisible="false" - 0. page content always visible CenterSinglePage="false" - Single page in center SingleSided="false" - Single Page Book RightToLeft="false" - Book written right to left VerticalMode="false" - Vertical flip mode OffsetX="0" - Offset of Book position OffsetY="0" HardCover="true" - Hard cover HardPage="false" - Hard pages EmbossedPages="true" - Embossing of pages with light-shadow effect (Not working with hard pages) LargeCover="true" - Larger cover LargeCoverVerticalOversize="32" - Vertical size difference LargeCoverHorizontalOversize="16" - Horizontal size difference DropShadow="true" - Enable DropShadow for Book DropShadowSize="20" - Rate of DropShadow in pixels DropShadowOffset="10" - Offest of vertical DropShadow in pixels DropShadowAlpha="30" - Transparency of the shadow (0-100) TransparencyEnabled="true" - Enable transparency TransparencyAutoLevel="true" - Automatic handling of transparency TransparencyMaxLevel="16" - Maximum transparency level of pages FlippingSpreadAnim="true" - Enable animations during flipping of Spreads PageCache="5" - Number of pages in cache per direction UnloadPages="false" - Deleting pages from the memory when invisible StartAutoFlip="false" - Starting automatic flipping after loading of PageFlip4 AutoFlipDefaultInterval="5" - Default flip interval AutoFlipLooping="true" - Flip looping at the end of the Book FPSControlEnabled="true" - Handling PageFlip image frame number ShowFPS="false" - Showing image frame number MaxFPS="60" - Maximum image frame number If the animations of the PageFlip consume too much CPI resources, decrease their quality, even to 25-30 fps. - 3.7.1 Customizing sounds User has to enable Sounds, so that flipping is accompanied by sound effects (Settings node attribute): SoundEnabled="true" User can specify that PageFlip starts mute when loaded, which can be modified with a button: StartMute="true" If sounds are enabled, PageFlip will search for the list of sound files in the Sounds node: The global volume of the sound effects can be set in the Sounds/EffectVolume attribute from 0 to 100. The various sound types are specified in separate nodes, as Sounds node child-nodes. User can specify more than one sound clips from each type of sound, so PageFlip can choose sounds randomly from the set. The following six sound types exist: HardPageClose - Closing the Hard Cover PullOpen - Start of flip, type 1 PullClose - End of flip, type 1 PushOpen - Start of flip, type 2 PushClose - End of flip, type 2 PageTear - Tear Off page There are two types of flipping (Pull, when the page is “pulled”, and Push, when the page is “pushed”), to which we can assign different sounds. - 3.7.2 Adding, customizing background music We can customize Background music in the BackgroundMusic/MusicData node: Attributes of the MusicData node: StreamURL - URL of the sound file to be played Loop - number of repeats Volume - volume of play (0-100) The StartMute option and the mute button also apply to the background music. - 3.8 Order of Pages (PageOrder) The order of Pages determines the visible content of the Book. User has to specify each page in the nodes that load the book from the first to the last page. Depending on the AlwaysOpened and the ZeroPage settings, the Book starts from page 0 or 1. The following figure shows the connection between the spreads and the possible settings. (Figure 3.8) If AlwaysOpened is enabled, the Book starts open, and User cannot flip back to page 1. The first two pages defined in the nodes will be the first two pages of the open book, laid out as spreads. On the other hand, if our Book starts closed with page 1, then the first node contains the single Cover page, and the next two will be the first spread in the Book. If ZeroPage is enabled, then a Page-file is loaded to the empty area before the Cover, which looks as if blending in the background. AlwaysOpened false AlwaysOpened true AlwaysOpened false ZeroPage false ZeroPage false ZeroPage true 1. _Cover 1________ Cover 2 ZeroPage 2. Cover 2 _Page 1______ _Cover 1________ 3. _Page 1______ Page 2 Cover 2 4. Page 2 _Page 3______ _Page 1______ //Always keep in mind spreads when defining pages. If defining a spread, it can be done only as the 1st page of the current spread; otherwise the Book cannot display it. - 3.9 Preparing the graphics content Save the files in the original structure, or to a file similar to the pageFlip.swf, or its subfolder. - 3.9.1 Page Files Prepare the content of the pages now that requirements are known. The size of the Book pages is clear, now User can create all the pages. Different file formats are available. - JPG, JPEG – The best choice if no animations, interactions more complex than HotSpots, or transparency is used. It is the optimal choice from the aspects of rendering and file size. Flash Player cannot handle Progressive JPG. (Tip: When saving JPG, do not save Preview in the file, use sRGB color profile, and at least 7/12 color quality.) - PNG – It has similar characteristics as JPG, but it also knows transparency (even up to 8 bit alpha channel), but the file size is larger. - GIF – The system can load them, except for the AnimGIF, but it is worse in file size and quality than the other formats. Its use is not recommended, only if on purpose. - SWF – Use the Flash format when it is necessary for interaction or animation, or if User wants text selection on the page. It is important that too much text on the page can result in slower rendering. Where User wants to use Spreads, the specified width has to be doubled, or the height where vertical mode is enabled (Settings/VerticalMode="true"). Create all the Page-files in the format most suitable, in the size already specified in the XML. If LargeCover is enabled, do not forget to adjust their sizes! - 3.9.2 Thumbnail Files Thumbnail view has to be created based on the sizes given in the Settings/ThumbnailWidth and Settings/ThumbnailHeight attributes (PageFlip4 scales images with other sizes to the specified size, but for optimal quality, previews should be created in the correct size). In case preview is created to a Spread, User should double the correct size. - 3.9.3 Zoom files User can zoom in two ways: - Use the SWF file loaded on the page as source, as it is evident in case of vector-based content, and other file does not have to be loaded, while the quality will be fine. - User can load JPG/PNG/GIF file or files which PageFlip will display 1:1. The rate of zooming depends on the resolution of the source images. In the second case, User enables zoom for every page, for which at least one scaled version of the page has to be created. If User wants multiple zooming on the page, the required number of versions is needed. User is recommended to refer to the % of scaling in the name of the file. The rate of the sides of the original and the enlarged pages’ has to be the same; otherwise PageFlip will transform the page. User should also pay attention to the rate of the page sides in case of Spreads. - 3.9.4 Background image The resolution of the background image should be at least the resolution of the Screen by default; otherwise the blurred pixels due to the scaling can corrupt the overall image. If the size of the Screen is smaller than that of the background image, it is displayed 1:1 (with no size reduction). If the background image is smaller than the Screen, PageFlip will scale it, so it will fill the Screen keeping the original rate of the sides. - 3.9.5 Other contents Images assigned to Popup windows, or LightBox gallery images require thorough preparation. For more information, refer to the following sections.** - 3.10 Pages & Spreads Definition of the pages is in the XML file node. All pages are described by a node attribute. A simple example: The definition of Spreads is similar to that of single pages, but an attribute indicates that it is a spread, while User should also remember that a Spread is only one definition. The following is a list of attributes with value examples: - Spread Its default value is "false"; it should only be set if defining a Spread: Spread="true" - PageFile URL of the Page-file (name of the file with its access path). It is a required attribute without which there is no content on the given page. PageFile="pages/pagefile.jpg" or PageFile="pages/pagefile.swf" - SWFPageFileAsZoom The use of SWF Page-file for the zoom view. Its default value is "false"; it should only be set if enabling the option: SWFPageFileAsZoom="true" - ZoomFiles There are two methods for the User to load images to the zoom view of the page: - In case of a single image to the page: ZoomFiles="pages/zoom/zoomfile.jpg" - More images can be loaded to the same page if User wants to use multiple zooming. The example shows three images in 200, 300 és 400 % zoom: ZoomFiles="pages/zoom/zoomfile200.jpg[200%]pages/zoom/zoomfile300.jpg[300%]pages/zoom/zoomfile400.jpg[400%]" - ThumbnailFile They can only be image files (JPG, PNG, GIF). This image represents the page in the Preview or the Thumbnail view. ThumbnailFile="pages/thumbs/thumbnailfile.jpg" - PrintFile User can enable printing of the page by specifying a print file that PageFlip loads and prints: PrintFile="pages/print/printfile.jpg" or PrintFile="pages/print/printfile.swf" Pages can be printed separately. - HotSpotFile User can assign HotSpots to all pages. For further information on HotSpots, refer to section Use of HotSpots. HotSpotFile="pages/hotspots/pagehotspotfile.xml" - PageIsTransparent If transparent page is created showing the page behind, User has to enable transparency, the default value of which is “false”: PageIsTrasnsparent="true" - HardPage This attribute can override the Book configuration with similar name, concerning the whole book. (Ezzel felül tudjuk írni, az egész könyvre vonatkozó, megegyező nevű Könyv beállítást.) HardPage="true" - BackgroundMusicFile User can assign music files to each page, which PageFlip4 starts to play when the given page is opened, and keeps it playing until User flips to another page. BackgroundMusicFile="pages/bgm/pagebgm.mp3" - BackgroundMusicLoop If User wants to loop, or repeat the music file several times, the number of repeats can be specified in the following attribute: BackgroundMusicLoop="100" - PageNumber User can customize the page numbering on any of the pages, and the numbering will continue on the next page in accordance: PageNumber="6" - PageLabel Each page can have a Label, which User can refer to later, for example in the Table of Contents, or when creating HotSpots. It provides more flexibility than the use of page numbers, as it allows the reordering of the Pages. PageLabel="PageLabel" - PageWidth, PageHeight Sometimes the automatic scaling of the Pages is not correct, or User wants to publish content on the page that cannot fit the frame. If User loads SWF file in which the content exceeds the page border (for example, invisible part of the text box, or the bleed of a graphics element), the size data of the Page within the Flash can differ from the specified data, and User can modify them in the XML. Real width, height of the page: PageWidth="300" PageHeight="400" Offset of page content horizontally, vertically: PageOffsetX="" PageOffsetY="" - BackgroundColor, ForegroundColor If the default background color does not fit the page, User can modify the color: BackgroundColor="0x000000" The default color of the loader displayed on the page can be replaced with the following attribute: ForegroundColor="0xFFFFFF" - AutoFlipInterval="5000" Set the Auto Flip Interval at page level. Default it is unset, the value defined in settings is used. - 3.11 Use of HotSpots User can create HotSpots with XML configurations. HotSpots are areas on the Page that can open Popup windows if the mouse hovers over it, and can send User to other pages, open new links, or a LightBox image. User can assign HotSpot XML files to each Page. An optional number of HotSpots can be defined in each HotSpot XML file. The HotSpot XML file structure is as follows: Each HotSpot is described by a node. Here, User can specify the content of the Popup if necessary, and what happens if clicked on. Moreover, there can be an optional number of form definitions within this HotSpot node. These forms are the areas on the Page that activate when mouse hovers over. - Attributes of the HotSpot node User has to specify at least one of the following attributes to have a Popup window if mouse hovers over a HotSpot: PopupTitle="Title" PopupText="MultilineText" PopupImageFile="page/popupimages/popupimage.jpg" - Event on clicking User can choose from the following events to happen when clicking on a HotSpot: - Jump to a Page based on a Label The use of Labels is the most preferable reference mode. User can specify Labels for each page, which can be referred to in HotSpots. Attribute Skip determines that jumping to the page is direct ("true"), or flipping page-by-page ("false"). Example: TargetLabel="PageLabel" Skip="true" - Jump to a page by Page number Page numbering – by default – starts with 1, and increases by one per page. If User modifies the page number on a page, PageFlip will reference to the modified page number. Information on the Skip attribute is given in section Jump to a Page based on a Label. TargetPage="5" Skip="true" - Opening a URL in browser URL, and target can be specified. Target can be "_self" as custom window, when the link opens in the PageFlip window, closing PageFlip, and "_blank", when the specified URL opens in a new window (Tab). Example: Link="http://pageflip.hu" Target="_blank" - Opening LightBox image The following attributes can be used for images to be displayed in LightBox when clicking on the HotSpot: LightBoxImage="pages/images/lightboximage.jpg" LightBoxCaption="Caption for LightBox Image" - Opening LightBox image group LightBox Group, with the required JavaScript configurations, can be opened with the following attributes: LightBoxGroup="group1" - HotSpot Shapes User can specify the location of the HotSpots (one or more) by defining the following shapes: - Rectangle Indicates a rectangle: x,y,w,h Where: x and y – x and y coordinates of the upper left corner of the rectangle w and h – width and height of the rectangle. The coordinates align to the specified page size. - RoundRectangle Indicates a rounded rectangle: x,y,w,h,r Where: X and y - x and y coordinates of the upper left corner of the rectangle w and h - width and height of the rectangle. r – radius of the rounding - Circle Indicates a circle: x,y,r Where: x and y - x and y coordinates of center of the circle r – radius of the circle - Star Indicates a star with optional number of arms: x,y,p,r1,r2,phase Where: x és y - x and y coordinates of center of the star p – number of tips r1,r1 – radius of the tips and pits phase – rate of rotation between 0-1, where 1 is a turn of one tip (in case of a 5-armed star 360/5 = 72 degrees) - Shape Indicates an optional shape with each point defined by User (the last point is automatically connected to the first one). Example: x1,y1/x2,y2/x3,y3/x4,y4 The shape consists of 4 points in the example. The shape of the HotSpot can be invisible, or it can have any color and transparency. User can define these with the following attributes of the node: Color="0xFFFF00" - Color of the shape Opacity="20" - Rate of transparency (0-100) HoverOpacity="50" - Rate of transparency when mouse is over the HotSpot - 3.12 Table of Contents & Info Floating window content The structure of the two Floating Windows is very similar; the only difference is that the Info window does not contain links. Structure of the Table of Contents XML: <Description /> <Link /> </TableOfContents> Structure of the Info XML: <Info> <Title /> <Description /> </Info> User can vary the number and order of the Title, Description, and Link nodes optionally (in case of Info, Link cannot be used), - Title attribute: Name="Table of Content" - Text of the Title - Description attribute: Text="Description text" - Text of the Description - Link attribute: Name="Description text" - Text of the Link Skip="true" - Direct jump to page targetLabel="PageLabel" - Jump to specified page by Label targetPage="5" - Jump to specified page number User can specify the configuration parameters of the Title, Description and Link nodes if they vary from the default: Font="FontName" - Custom embedded Font Color="0x000000" - Text color Size="12" - Size Align="right" - Align User can use the following four alignments: - left - Default value, align left - right - Align right - center - Align center - justify - Justify The content of the pages is not limited: if the content exceeds the size of the window, a scrollbar helps navigation in the window. - 3.13 Menu language settings User can specify the menu language in the <Language> node. By default, the menu language is English, so User has to define the <Language> node only to enable other languages. If User enables more languages and wants to use English too, then it has to be defined in a <Lang> node in the XML. The default values, and XML structure: <Language> <Lang Name="English" Loading="LOADING" PagerPage="Page #" PagerThumbnailPopup="Page #" PagerThumbnails="Thumbnails" PagerThumbnailPages="Thumbs #" PagerZoomPage="Zoom Page #" PrintLeftTooltip="Print left side page" PrintRightTooltip="Print right side page" ZoomLeftTooltip="Zoom on left side page" ZoomRightTooltip="Zoom on right side page" ZoomInTooltip="Zoom In" ZoomOutTooltip="Zoom Out" FirstPageTooltip="First page" PreviousPageTooltip="Previous page" NextPageTooltip="Next page" LastPageTooltip="Last page" AutoFlipTooltip="Autoflip On/Off (A)" MuteTooltip="Mute (M)" InfoTooltip="About (Shift-I)" IndexTooltip="Table Of Contents (I)" LanguageTooltip="English" ThumbnailTooltip="Thumbnail View (T)" FullscreenTooltip="Fullscreen On/Off (Shift-F)" CloseTooltip="Quit PageFlip (Shift-Q)" PDFDownloadTooltip="Download PDF version" SearchTooltip="Find" HelpTooltip="Help" BookmarksTooltip="Bookmarks" /> </Language> To be able to use more than one language, User should create new <Lang> nodes within the <Language> node, and enable the Language switch button on the ControlBar. # (hash mark) within quotation marks indicates the page numbers to be inserted later to the given text. Example: PagerPage="Page #" –> Page 10–12 PagerPage="#. oldal" –> 10–12. oldal - 3.14 Publication of the created PageFlip If the test of the created Book is successfully, User can save it to its final folder, which can be located on a web server, or offline. If User followed the recommended file structure, the following should be copied to the final folder: index.html (the html file that embeds pageFlip.swf) pageFlip.swf pagedata (library with all the external files of PageFlip) css (library, html and LightBox styling) js (library, LightBox and SWFobject JavaScript codes) -------------------------------------------------------------------------------- Appendix A - Copy Protection The PageFlip4 protection prevents unauthorized use - copying in similar format, or reconfigured as a new publication - of the Book created and published by the License owner. User can protect the publication by entering a valid code sequence, generated by the XML Validator, in the CopyrightMessage in the XML file. The true function of the CopyrightMessage is the configuration of the Copyright message displayed at the bottom of the PageFlip4 Screen, where License owner (publisher) can display personal data and contact information (the display of this line can be enabled/disabled with a valid code). Furthermore, License owner receives a LicenseKey, a code of 11-14 characters, at the purchase of the License, without which the XML Validator cannot be used. With the help of the protection, License owner can limit the domains on which PageFlip can be run, including offline running, and can specify a message that cannot be modified later by others and which appears at the bottom of the PageFlip4 Screen. With a valid code, PageFlip4 runs normally on the authorized domains, but in case the check finds an error, PageFlip4 will not start. Generating valid CopyrightMessage: (image XML validator screenshot) - start XML Validator ( /utils/XMLvalidator ) - LicenseKey: Key received at the purchase of the License. Proceed only with valid LicenseKey: - Copyright Message: specify the text message in html format (only available html tag is link), and it will be displayed at the bottom of the PageFlip4 Screen. Make sure that the text is correctly displayed, as it depends on the length of the text, or the current screen size. - Always Show Copyright Message: Switch, Enabled. – Overrides XML configuration, and Copyright Message is always visible. - URLs: specify all the domains where PageFlip4 will be used. User can authorize offline running here by specifying "offline" as domain. Domains have to be defined in the following form, without space or slash, separating them with commas: "offline,www.pageflip.hu,pageflip.hu" It is important to always use the XML Validator given to the correct PageFlip4 version when updating, and use the version received in the new package in case of license upgrade. - Press the "Make Valid Code" button, then copy the generated code and insert it in the XML between the quotation marks in CopyrightMessage="". The protection is set, so the published Book and PageFlip4 itself can only be run on the URLs (or offline) authorized by the User, and with the CopyrightMessage displayed at the bottom of the PageFlip4 Screen. The protection guarantees that other users will not be able to use them fully. The use of the XML Validator is not limited for the License owner in any way, however passing on to a third party is not allowed. - Tips: - Authorize offline mode only if still working on the publication, or if the final use will be Offline (for example a terminal, CD-ROM, or flash drive). - If the publication is only used online, remove offline mode from the domain list. - Make sure to specify the URLs in all available formats, for example with and without “www” (if the homepage is accessible both ways), otherwise it can result in an INVALID URL error message. - Make sure to specify only the domains where the created publication is to be run. If User wants to run another publication on another domain later, a new code should be created. - Make sure to specify the Copyright Message correctly, even if its display is disabled in the XML later, preventing unauthorized use of the code. - Always Show Copyright Message – disable only if message is to be removed (for example, if it does not fit the final publication). In case of offline use, unauthorized use can be prevented only with this message. B - Interactivity This function includes all the available functions and variables that the loaded SWF Page codes can access. Copy the following code part to the beginning of frame 1 of the page to make PageFlip control the SWF page of User: import flash.display.MovieClip; var Container:MovieClip = MovieClip(parent.parent.parent.parent.parent.parent.parent.parent); Container.registerPage( this ); function onAppear():void {} function onDisappear():void {} function onTop():void {} function onNotOnTop():void {} function onFlipEnd():void {} function onFlipStart():void {} function onTearStart():void {} function onTearEnd():void {} function onPrintStart():void {} function onPrintEnd():void {} function onZoomStart():void {} function onZoomEnd():void {} function onPageUnload():void {} User can access PageFlip4 services through the Container variable. The first one is the registration of the Page, by which User informs PageFlip4 that the code running on the Page is able to communicate: Container.registerPage( this ); It is enough for User to define the events to be used. This is a short description of the events, when they are executed, and what the code should do: - onAppear when a Page is displayed on the Screen (even if covered) If User wants an event (for example animation) to start on the page already when it is not completely visible (during flipping to the Page, or partial overlay of a transparent page), then it has to be authorized and launched here. - onDisappear when a Page is removed from the Screen. If User wants to keep the activity until the disappearance of the Page, then activity on the Page has to be disabled here. Ha az aktivitást fenn akarjuk tartani egészen a Oldal eltűnéséig, akkor itt kell letiltani az Oldalon lévő aktivitást. If User works with a great number of coded pages in the book, it is very important that invisible pages do not overload the CPU. - onTop when the page is completely visible, without overlay. Active only if there is no flipping. Activate the content with function only on the completely visible page after flipping is over. For example buttons, their event monitors, etc. - onNotTop when the Page loses its onTop status, that is, it is overlaid due to a flip. Disable the activities enabled by onTop. - onFlipEnd when the flip of the given Page is over. - onFlipStart when the flip of the given Page starts. - onPageUnload when PageFlip removes the page from the memory. User has to delete everything the code created during run-time (Display Objects, Events, etc.), so that Page content can be removed from the memory. The Page code can access the following elements: Container.OnLeftSide:Boolean; - true, if the Page is on the left side of the Book Container.IPN:uint; - Inner Page Number of the Page Container.PageData:PFPageData; - All data/information about the Page Container.isReady:Boolean; - Page has been registered Container.SWF:Object; - Root of the loaded Page file Container.Pair:PFPageContainer; - Container of the Page pair For communication with the Spread, make sure that it is ready. The following example invites the body() function of the spread: if(Container.Pair.isReady) { Container.Pair.SWF.test(); } PageData Object data (quick overview): isCover:Boolean; - if given Page is a Cover renderWidth:Number; - Rendered size (without scaling the Book) renderHeight:Number; The following variable values are all from the XML <PageData> node: PageName:String; PageNumber:uint; PageLabel:String; PageWidth:uint; PageHeight:uint; PageOffsetX:int; PageOffsetY:int; PageIsTrasnsparent:Boolean; HardPage:Boolean; DisableEmbossing:Boolean; BackgroundColor:uint; ForegroundColor:uint; PageFile:String; SWFPageFileAsZoom:Boolean; ZoomFiles:String; ThumbnailFile:String; PrintFile:String; HotSpotFile:String; BackgroundMusicFile:String; BackgroundMusicLoop:uint; Volume:Number; MainBGMVolume:Number; Spread:Boolean; C – Customizing the ControlBar PageFlip4 allows User to customize the buttons of the ControlBar by loading an external swf file. The buttons can be modified easily with the use of the pageFlipControls.fla given in the Package. User has to configure two attributes in the XML Settings node: CustomControlBarIcons="true" - Enabling custom buttons CustomControlBarFile="pageFlipControls.swf" - File containing custom buttons pageFlipControls.fla file modification: The Customizable UI Elements library in the library contains the elements that can be modified. The first group is the Buttons with timeline, with several layers in certain cases (the structure of which cannot be modified): controlBarButton_LeftHorizontal controlBarButton_LeftMostHorizontal controlBarButton_RightHorizontal controlBarButton_RightMostHorizontal controlBarButton_Zoom controlBarButton_Print controlBarButton_AutoFlip controlBarButton_Close controlBarButton_FullScreen controlBarButton_Index controlBarButton_Info controlBarButton_Language controlBarButton_Mute controlBarButton_PDFDownload controlBarButton_Thumbnails The other group contains the purely graphic elements that make up the visible parts of the buttons: (26 x 26 pixel buttons) Symbol_LeftHorizontal Symbol_LeftMostHorizontal Symbol_Zoom Symbol_Zoom_In Symbol_Zoom_Out Symbol_Print (22 x 26 pixel buttons) Symbol_AutoFlip_Pause Symbol_AutoFlip_Play Symbol_Close Symbol_Download Symbol_Fullscreen_Off Symbol_Index Symbol_Info Symbol_Language Symbol_Mute_AudioOff Symbol_Mute_AudioOn Symbol_Thumbnails With the reconstruction of the Symbol elements, User can create the custom buttons. User has to generate the swf file, and save it to the right folder (example: the pageflipdata/ library). D - Font Embedding User can embed fonts with Adobe Flash CS5: 1. - Open a new ActionScript3 FLA document 2. - Right click on the list of the Library window, then select New Font 3. - The Options Tab is active 4. - Add a custom name 5. - Choose the Font from the Family drop-down menu 6. - Choose a Style if possible 7. - Set the Character Range so it contains all the necessary characters 8. - Note down the name of the Font following "Font Name: ", as it should be referenced in the XML. 9. - Choose the Actionscript Tab 10. - Select Export for Actionscript option, and then press ‘OK’ 11. - Insert the following code on the first frame of the Flash timeline: Font.registerFont( FontName* ); *Where the FontName is the name specified in step 4. To embed further fonts, repeat the process from step 2. When ready, create an .swf file, and specify the URL of the .swf file in the XML Settings/FontLibraryFile attribute: FontLibraryFile="pageFlipFonts.swf" Then, User can refer to the newly embedded Fonts with their names noted down in step 8. To specify a custom font as PageFlip4 default Font, configure the Settings/DefaultFont attribute. E - XML reference All the XML configurations - sorted in categories - are listed here, with default values indicated. Settings node attributes of the XML configuration file contain the general settings: Attribute name="default value " (type) – short description: PageWidth="300" (uint) - Page width PageHeight="400" (uint) - Page height AutoSize="true" (Boolean) - Sizing loaded content ViewAngle="0" (int) - Tilting Book PageScale="true" (Boolean) - Scaling the Book MinScale="50" (uint) - Minimum scale in % MaxScale="200" (uint) - Maximum scale in % MinStageWidth="632" (uint) - Minimum width of Screen MinStageHeight="580" (uint) - Minimum height of Screen ControlBarScale="100" (Number) - ControlBar scale in % ControlBarFullScreenScale="" (Number) - Scale of ControlBar in % in Full Screen mode ControlBarPagerWidth="150" (uint) - Width of ControlBar pager FPSControlEnabled="true" (Boolean) - Enable Frame Per Second Control ShowFPS="false" (Boolean) - Show Frame Per Second on Screen MaxFPS="60" (Number) - Maximum Frame Per Second setting StartPage="1" (uint) - Start page AlwaysOpened="false" (Boolean) - Book always open ZeroPage="false" (Boolean) - Enable page 0 ZeroPageAlwaysVisible="false" (Boolean) - Enable 0 page always visible RightToLeft="false" (Boolean) - Book written from right to left VerticalMode="false" (Boolean) - Vertical flipping OffsetX="0" (uint) - Horizontal offset of the Book position, OffsetY="0" (uint) - and vertical HardCover="true" (Boolean) - Hard cover Book HardPage="false" (Boolean) - Hard pages EmbossedPages="" (Boolean) - Embossed pages (with light/shadow effect) LargeCover="true" (Boolean) - Large Cover pages LargeCoverVerticalOversize="10" (uint) - Vertical oversize in pixels LargeCoverHorizontalOversize="10" (uint) - Horizontal oversize in pixels DropShadow="true" (Boolean) - Enable DropShadow of the Book DropShadowSize="30" (uint) - Size of DropShadow blur DropShadowOffset="10" (int) - Vertical offset of DropShadow DropShadowAlpha="50" (uint) - Transparency of DropShadow (0-100) ThumbnailDropShadow="true" (Boolean) - Enable DropShadow of Thumbnail view ThumbnailDropShadowSize="8" (uint) - Size of DropShadow blur ThumbnailDropShadowOffset="3" (int) - Vertical offset of DropShadow ThumbnailDropShadowAlpha="50" (uint) - Transparency of DropShadow (0-100) DefaultTransition="1" (uint) - Default transition (-,FADE,ZOOM,BLUR) DefaultTransitionDuration="250" (uint) - Duration of Default transition FlippingSpreadActivity="false" (Boolean) - Animation of Spread during flipping TransparentBackground="false" (Boolean) - Enable Transparent Screen background BackgroundColor="0xF0F0F0" (uint) - Background color of Screen BackgroundImageFile="" (String) - URL of Screen background image ControlBarBackgroundColor="" (Number) - Background color of ControlBar ControlBarBackgroundAlpha="" (Number) - Transparency of ControlBar background (0-100) CopyrightMessageBackgroundColor="" (Number) - Copyright Message background color, and CopyrightMessageBackgroundAlpha="" (Number) - transparency of its background (0-100) ControlBar="true" (Boolean) - Enable ControlBar CustomControlBarIcons="false" (Boolean) - Enable custom ControlBar buttons CustomControlBarFile="" (String) - URL of file including custom buttons EnableButtonColoring="true" (Boolean) - Enable coloring of the ControlBar buttons ButtonColor="0x333333" (uint) - Base color of button, and ButtonAlpha="100" (uint) - transparency ButtonOverColor="0xF0B400" (uint) - Button color when mouse hovers over, and ButtonOverAlpha="100" (uint) - transparency ButtonPressColor="0x333333" (uint) - Color of button when pressed, and ButtonPressAlpha="100" (uint) - transparency ButtonDisabledColor="0xEEEEEE" (uint) - Color of button when inactive, and ButtonDisabledAlpha="100" (uint) - transparency ControlBarLoaderEnabled="true" (Boolean) - Enable Loader on ControlBar ButtonFirstLastEnabled="true" (Boolean) - Enable button flipping to First/Last pages ButtonLeftRightEnabled="true" (Boolean) - Enable button flipping Right/Left ButtonZoomEnabled="true" (Boolean) - Enable Zoom button ButtonPrintEnabled="false" (Boolean) - Enable Print button ButtonAutoFlipEnabled="false" (Boolean) - Enable Automatic flipping button ButtonPDFLinkEnabled="true" (Boolean) - Enable download button ButtonThumbnailEnabled="true" (Boolean) - Enable Thumbnail button ButtonLanguageEnabled="false" (Boolean) - Enable Language switch button ButtonMuteEnabled="true" (Boolean) - Enable Mute button ButtonInfoEnabled="false" (Boolean) - Enable Info window ButtonIndexEnabled="false" (Boolean) - Enable Table of Contents button ButtonFullScreenEnabled="true" (Boolean) - Enable Full Screen button ButtonCloseEnabled="false" (Boolean) - Enable Close button StartAutoFlip="false" (Boolean) - Enable automatic flip activation at start AutoFlipDefaultInterval="5" (uint) - Interval of automatic flip AutoFlipLooping="true" (Boolean) - Starts from beginning if reaching end (Loop) TransparencyEnabled="true" (Boolean) - Enable transparency TransparencyAutoLevel="true" (Boolean) - Automatic adjustment of transparency level TransparencyMaxLevel="1" (uint) - Maximum transparency if not automatic PDFlink="" (String) - Download button downloads this file ButtonToolTip="true" (Boolean) - Enable ToolTip if mouse hovers over button ZoomFollowSpeed="5" (uint) - Mouse follow speed in zoom ThumbnailsEnabled="falae" (Boolean) - Enable Thumbnail view ContentPreviewEnabled="false" (Boolean) - Enable Preview ThumbnailModeStart="false" (Boolean) - Enable Thumbnail view when PageFlip4 starts ThumbnailWidth="90" (uint) - Thumbnail view width, and ThumbnailHeight="120" (uint) - height DragArea="64" (uint) - Drag area width on page AutoFlipArea="56" (uint) - Width of rectangle indicating active corner MouseFollowSpeed="5" (uint) - Mouse follow speed when flipping FlippingDuration="1000" (uint) - Duration of flip in milliseconds PageLoaderBackColor="0x333333" (uint) - Background color of page loader MouseControl="true" (Boolean) - Flip with mouse DefaultFont="" (String) - Embedded font instead of default PopupBackgroundColor="0x000000" (uint) - Background color of Popup window, and PopupBackgroundOpacity="50" (uint) - transparency (0-100) PopupBorderThickness="0" (uint) - Thickness of Popup border (0 = no border) PopupBorderColor="0x000000" (uint) - Border color PopupRounded="true" (Boolean) - Enable rounded border PopupRoundedRadius="8" (uint) - Radius of Popup rounding PopupMargin="8" (uint) - Margin of Popup content PopupTitleFont="" (String) - Title font PopupTextFont="" (String) - Text font PopupTitleColor="0xFFFFFF" (uint) - Title color PopupTextColor="0xFFFFFF" (uint) - Text color PopupSpace="8" (uint) - Space between content elements in pixels PopupMouseFollowSpeed="5" (Number) - Mouse follow speed FontLibraryFile="" (String) - URL of file including embedded Fonts LayoutOrder="PREVIEW-CONTENT-CONTROLBAR" (String) - Layout of elements ControlBarHeight="55" (uint) - ControlBar height in pixels ControlBarOffset="15" (uint) - Offset of ControlBar position ContentPreviewHeight="60" (uint) - Preview height in pixels CopyrightMessageDisplay="" (Boolean) - Displaying Copyright Message CopyrightMessage="" (String) - Copyright Message (coded with XML Validator) InfoWindowWidth="300" (uint) - Width of Info window content FloatingWindowColumnWidth="200" (uint) - Width of floating window column FloatingWindowMargin="10" (uint) - Margin of floating window content FloatingWindowHorizontalSpace="16" (int) - Floating window horizontal space FloatingWindowVerticalSpace="16" (int) - Floating window vertical space FloatingWindowSeparator="true" (Boolean) - Enable floating window separators FloatingWindowSeparatorColor="0xFFFFFF" (uint) - Color of floating window separators FloatingWindowSeparatorAlpha="50" (uint) - Transparency of floating window separators FloatingWindowSeparatorHeight="1" (Number) - Height of floating window separators FloatingWindowSeparatorOffset="6" (Number) - Offset of floating window separators FloatingWindowBackgroundColor="0x000000" (uint) - Background color of floating window FloatingWindowBackgroundAlpha="50" (uint) - Background transparency of floating window FloatingWindowBorderThickness="0" (Number) - Thickness of floating window border FloatingWindowBorderColor="0xFFFFFF" (uint) - Color of floating window border FloatingWindowBorderAlpha="50" (uint) - Transparency of floating window border FloatingWindowCornerRadius="16" (uint) - Radius of floating window rounded corner FloatingWindowFont="" (String) - Default font of floating window FloatingWindowColor="0xFFFFFF" (uint) - Color of floating window content FloatingWindowSize="11" (Number) - Size of floating window text FloatingWindowAlign="LEFT" (String) - Align of floating window text TOCTitleFont="" (String) - Font of Table of Contents Title TOCTitleColor="0xFFFFFF" (uint) - Color of Table of Contents Title TOCTitleSize="19" (Number) - Size of Table of Contents Title font TOCTitleAlign="LEFT" (String) - Align of Table of Contents Title TOCLinkFont="" (String) - Font of Table of Contents Link TOCLinkColor="0xFFFFFF" (uint) - Color of Table of Contents Link TOCLinkSize="12" (Number) - Size of Table of Contents Link font TOCLinkAlign="LEFT" (String) - Align of Table of Contents Link TOCLinkPageNumberFont="" (String) - Font of Table of Contents page number TOCLinkPageNumberColor="0xFFFFFF" (uint) - Color of Table of Contents page number TOCLinkPageNumberSize="22" (Number) - Size of Table of Contents page number font TOCLinkPageNumberAlign="LEFT" (String) - Align of Table of Contents page number TOCPageNumberFirst="false" (Boolean) - Page number first TOCPageNumberWidth="32" (uint) - Width of page number in pixels TOCLinkOverColor="0xF0B400" (uint) - Color of Table of Contents Link if mouse hovers over TOCLinkPressColor="0xFFFFFF" (uint) - Color of Table of Contents Link when pressed TOCLinkBackgroundColor="0x333333" (uint) - Color of Table of Contents background TOCLinkBackgroundAlpha="0" (uint) - Transparency of Table of Contents Link background TOCLinkBackgroundOverColor="0x333333" (uint) - Color of Table of Contents Link if mouse hovers over TOCLinkBackgroundOverAlpha="50" (uint) - Transparency of Table of Contents Link background if mouse hovers over TOCDescriptionFont="" (String) - Font of Table of Contents Description TOCDescriptionColor="0xFFFFFF" (uint) - Color of Table of Contents Description TOCDescriptionSize="11" (Number) - Font Size of Table of Contents Description TOCDescriptionAlign="LEFT" (String) - Align of Table of Contents Description StartMute="false" (Boolean) - Activate mute at start SoundEnabled="false" (Boolean) - Enable sounds/effects Settings/Sounds node attribute: EffectVolume="10" (uint) - Volume of sound effects Settings/Sounds/HardPageClose node attribute: SoundFile="" (String) - Sound of Hard Cover flipping over Settings/Sounds/PullOpen node attribute: SoundFile="" (String) - Sound of PullFlip flipping start Settings/Sounds/PullClose node attribute: SoundFile="" (String) - Sound of PullFlip flipping over Settings/Sounds/PushOpen node attribute: SoundFile="" (String) - Sound of PushFlip flipping start Settings/Sounds/PushClose node attribute: SoundFile="" (String) - Sound of PushFlip flipping over Settings/Sounds/PageTear node attribute: SoundFile="" (String) - Sound of Page tear F - Hotspot XML reference Structure of the HotSpot XML files: The root-node directly contains the HotSpot nodes that describe 1-1 active links: A HotSpot node attribute: PopupImageFile="" (String) - URL of Popup window image PopupTitle="" (String) - Title of Popup window PopupText="" (String) - Text of Popup window (If no value is specified, the Popup window will not be displayed) TargetLabel="" (String) - Label of target page TargetName="" (String) - Name of the target page TargetPage="" (String) - Page number of target page Skip="false" (Boolean) - Direct jump to target page Link="" (String) - URL the User wants to open Target="_blank" (String) - Link Target Window LightBoxImage="" (String) - URL of image to be opened in LightBox, and LightBoxCaption="" (String) - image description LightBoxGroup="" (String) - ID of the Image in the LightBox Group Color="0x000000" (uint) - Color of the area Opacity="0" (uint) - Transparency (0-100) HoverOpacity="0" (uint) - Transparency (0-100) if mouse hovers over User can configure Hotspot shapes with the following nodes: <Rectangle>x,y,w,h</Rectangle> <RoundRectangle>x,y,w,h,r</RoundRectangle> <Circle>x,y,r</Circle> <Star>x,y,p,r1,r2,phase</Star> <Shape>x1,y1/x2,y2/x3,y3/x4,y4</Shape> For information on the latter, refer to section 3.11.3. G - PageFlip4 Error messages - INVALID LICENSE Wrong code has been given to the CopyrightMessage attribute. See XML Validator/Configuration of protection * - INVALID URL URL from where PageFlip has been loaded is unauthorized. See URLs/Configuration of protection - TRIAL LICENSE EXPIRED Time-limited trial License Key expired. - OFFLINE USAGE NOT ALLOWED Offline run is unauthorized. See URLs/ Configuration of protection - XML ERROR Error during the loading of the XML configuration file. It can be a wrong reference (pointing to a non-existent file), lack or loss of Internet connection, or other reasons due to which the file could not be loaded. - XML SYNTAX ERROR Specified data cannot be interpreted at the processing of the XML file due to syntactic error. H - Tips for optimization Optimization is important to maintain high fps. Follow the instructions to avoid difficulties with flipping the thoroughly prepared Book due to the accumulation of too complex contents: - Make Pages the smallest possible, the content loaded to the Pages should be images the same size as the page. In case of vector-based content, avoid too complex graphics (similarly to text content which should be an image unless enabling selection). - When transparency is used, make sure that the number of consecutive transparent pages is not too great (it increases the number of Pages PageFlip has to render simultaneously). In case it cannot be avoided, try to load simple content to the Pages (for example 32 bite png page files). - To have all Pages rounded, transparency is unnecessary as the visible page hides the one behind it. - Make sure to display videos on single Pages. - If possible, try to avoid the use of Spreads, as they require more resources, especially when more Spreads follow each other, - In case more Spreads follow each other, disable animation during flipping. **** - Create interactive pages in a way that when using the event handlers the animations/scripts running on the page should stop until the page is displayed. - If the Book consists of a great number of pages, or the page files are too big, enable Page Unloading, so that unwanted pages get removed from the memory (in case of pages running scripts, removal has to be separately disabled not to lose data) I – Embedding PageFlip4 PageFlip4 can be embedded in our homepage or any other html file in several ways. To have all its functions fully working, attach the swfobject.js file to your html file, as in the case of the original index.html: <head> <script type="text/javascript" src="js/swfobject.js"></script> </head> Make sure that the relative location of the html files, the pageflip.swf, and the pageflipdata/ libraries are correct in the library structure. The file system root for the code running under PageFlip4 is the html library embedding PageFlip4. DataFolder, which points at the pageflipdata/ sublibrary by default, is added to this, and the URLs in the XML connect to this as well. For example: http://pageflip.hu/pagefliptest/index.html (let’s assume that this is the html file embedding PageFlip4, and that DatFolder has not been modified) If User specifies the following path to a file in the XML configuration: pages/coverpage.jpg it will be the following URL actually: pageflipdata/pages/coverpage.jpg Which, in this case (due to the index.html file situation), is similar to the following absolute URL: http://pageflip.hu/pagefliptest/pageflipdata/pages/coverpage.jpg If User wants to use absolute URLs to reach files, then the DataFolder should be deleted with the help of the flashvars: flashvars.DataFolder = ""; Then, be aware that all relative URLs change, if User does not modify the location of the files, start with the path of the XML: flashvars.XMLFileName = "pageflipdata/pageflipdata.xml"; The embedding Script is also in the <head> tag: <head> <script type="text/javascript"> var flashvars = {}; flashvars.XMLFileName = "pageflipdata.xml"; flashvars.DataFolder = "pageflipdata/"; flashvars.StartPage = "1"; flashvars.StartAutoFlip = "false"; var params = {}; params.scale = "noscale"; params.salign = "TL"; params.wmode = "transparent"; params.allowscriptaccess = "always"; params.allowfullscreen = "true"; params.menu = "true"; params.bgcolor = "#FFFFFF"; var attributes = {}; swfobject.embedSWF("pageFlip.swf", "pageflip", "100%", "100%", "10.0.0", false, flashvars, params, attributes); </script> </head> The <div> tag responsible for the display of PageFlip is in the <body> tag: <body> <div id="pageflip" style="margin: 0;"></div> </body> If PageFlip does not fit the browser completely, then User should specify the width and height in pixels instead of “100%” (swfobject.embedSWF). The next section of the Appendix informs User about further preparations necessary for the support of LightBox functions. J – Use of LightBox User has to attach the following .css, .js files and a short script to the embedding html file for a functioning LightBox: <head> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script> <script src="js/lightbox++.js" type="text/javascript"></script> <script type="text/javascript"> function GroupDelegate(id) { var objLink = document.getElementById(id); Lightbox.prototype.start(objLink); } function LightboxDelegate(url,caption) { var objLink = document.createElement('a'); objLink.setAttribute('href',url); objLink.setAttribute('rel','lightbox'); objLink.setAttribute('title',caption); Lightbox.prototype.start(objLink); } </script> </head> When PageFlip displays an image with the help of LightBox, it only needs its file name (URL) and image description, and it automatically invites the LightboxDelegate() JS function with the modified URL. If User wants to use the LightBox group (image groups), then the group has to be defined in the html first, while reference has to be made to the image id at display. Definition of a group also in the embedding html: <body> <a id="pic1" href="pageflipdata/pages/a.png" rel="lightbox[group1]" title="caption1"></a> <a id="pic2" href="pageflipdata/pages/b.png" rel="lightbox[group1]" title="caption2"></a> <a id="pic3" href="pageflipdata/pages/c.png" rel="lightbox[group1]" title="caption3"></a> </body> For more information on customizing LightBox, visit the developer’s homepage: http://www.huddletogether.com/projects/lightbox2/ K – Color codes Color codes are specified in Hexadecimal RRGGBB code. For example, the color white is: RGB 255, 255, 255 – in hexadecimal format: FF, FF, FF, which the User can specify as color attribute: Color="0xFFFFFF" L - most FAQ (will be extended soon) - Can PageFlip4 display PDF documents? - No, it can only read and display formats directly supported by Flash. PDF publications have to be converted page-by-page to the adequate format first, and PageFlip can only load them afterwards. - Is there an admin or editor interface? - No, the contents of the pages have to be prepared by the User; the XML files have to be edited with text editor (TextEdit, TextWrangler, NotePad, Edit+, etc.).