Flip Book project

Thank you for purchasing our file.

If you have upgraded to version 1.2.6 from a previous version, please take a look at the XML file. The structure is a little different.

massive pro creation

Table of Contents:





massive pro creation

Included:

massive pro creation

Main Features:


massive pro creation

Detailed Features Overview:

Each feature can be disabled in the XML. For example, if the print option is not needed, you can easily disable it in the XML file.

massive pro creation

How to use and modify this file:

To modify the basic settings of this product, open the setup.xml file. There you can customize all of the application features. Remember to save the file after making changes; otherwise, you will not see any changes.

The XML file is a setting file for the application, so any changes you make to the file will be reflected in the application. Upon opening, Flip Book reads the data inside the XML file and builds the application the way it is described in the XML file.

Start-up Settings 


<start book="none"/>
In start tag you can specify the book to open first. If you choose none, the application will start from a "choose book" screen. If you have less than two books, the application will automatically start from displaying the only book.



Background Settings 


<background src="background.jpg" type="image" resize="false"/>
Background settings has 3 attributes:


Top Navigation

Controls Panel The Control Panel section contains 11 different button settings. In the main buttons tag there is an attribute called toolTips. This is a boolean attribute which specifies if the tool tip should be shown after the user rolls over the button. Each of the buttons (books, page, printer, etc.) contains common attributes like:


Button differences and attributes' descriptions: 

<buttons toolTips="enabled">
    <books toolTip="Show books" description="Choose a book" icon="icons/books.png"/>
    <pages toolTip="Show all pages" description="Select page you wish to see" 
        cancelText="Go back" state="enabled" icon="icons/pages.png"/>
    <printer toolTip="Print pages"  description="Print your selection" 
        cancelText="Go back" state="enabled" icon="icons/printer.png"/>
    <zoom toolTip="Zoom in" state="enabled" icon="icons/zoom.png"/>
    <pdf toolTip="Download pdf version" description="Generate PDF" 
        cancelText="Go back" state="enabled" icon="icons/pdf.png"/>
    <tableOfContent toolTip="View table of content" state="enabled" 
        icon="icons/toc.png"/>
    <contact toolTip="Contact me" state="enabled" icon="icons/contact.png"/>
    <slideshow toolTip="Start/Stop slideshow" state="enabled" 
        icon="icons/slideshow.png"/>
    <music toolTip="Play/Stop music" state="enabled" icon="icons/sound.png"/>
    <full toolTip="Toggle full screen" state="enabled" icon="icons/full.png"/>
    <other bgColor="0xCCCCCC" bgAlpha="0.3"/>
</buttons>

NOTE: The XML file must have a data tag at the beginning and /data at the end of the file. In other words all of the informations in the XML file must be wrapped in the data tags!


Alert Messages

Alert message

When you want an alert message, you need to look for the alert tag in the XML file. Each alert message can be edited from the XML as you can see in the following XML example. Each alert has two parameters: 

<printer>
    <alert delay="2000">
        <started src="Printing started"/>
        <canceled src="Printing canceled"/>
    </alert>
</printer>
        
    <zoom>
        <alert delay="2000">
            <zoomIn src="Click the screen to zoom out"/>
        </alert>    
    </zoom>

Contact Form

Contact form

The contact section has many settings. At first it may look complicated, but it's really easy. The main contact tag contains two attributes:

Next is the icons section. This section lets you specify the social icons you want to display below the contact form. Included are Twitter, Facebook, and your own website (blog or portfolio). Each of these social icons has 4 attributes: The Text section defines all the text/descriptions in the contact form: The last section of contact node contains 5 possible alert settings. Also, as explained earlier, there is a delay parameter. If you need more explanation, please see the "Alert messages" section. 

<contact email="gajkuba@gmail.com" toolTips="enabled">
    <icons>
        <twitter url="http://flashden.net/user/mpc" 
        target="_blank" toolTip="Follow me on Twitter" state="enabled"/>
        <facebook url="http://flashden.net/user/mpc" 
        target="_blank" toolTip="Follow me on Facebook" state="enabled"/>
        <website url="http://flashden.net/user/mpc" 
        target="_blank" toolTip="Visit my blog" state="enabled"/>
    </icons>
    <text>
        <title src="Contact massiveProCreation"/>
        <content>
            <![CDATA[
                        email: xyz@xyz.xyz,
                        phone: 111-222-333]]>
        </content>    
        <name src="Name"/>
        <email src="Email"/>
        <message src="Message"/>
        <send src="Send"/>
        <clear src="Clear"/>
    </text>
    <alert delay="2000">
        <name src="Please input your name"/>
        <email src="Please input your email"/>
        <emailError src="Your email address is wrong!"/>
        <message src="You haven't wrote any message"/>
        <send src="This option doesn't work in..."/>
    </alert>        
</contact>

Tell a Friend

Tell a friend form
Tell a friend is a useful feature that allows the user to send a page link to a friend. For example, if the user likes a whole page or only a single video in the book, it can be e-mailed to a friend. Also, the link will be automatically added to the message. Tell a friend settings are similar to those from the contact form. The main tellAFriend tag contains one attribute: The last section of the tellAFriend node contains alert settings. There are 5 alert messages that can be specified. Also, as explained earlier, there is a delay parameter. If you need more explanation, please see the "Alert messages" section. 
<tellAFriend toolTips="enabled">
    <text>
        <title src="Send link to a friend"/>
        <yourEmail src="Your Email"/>
        <email src="Friends Email"/>
        <message src="Message"/>
        <send src="Send"/>
        <clear src="Clear"/>
    </text>
            
    <alert delay="2000">
        <yourEmail src="Please input your email"/>
        <email src="Please input friends email"/>
        <emailError src="Your email address is wrong!"/>
        <message src="You haven't wrote any message"/>
        <send src="Your email was sent"/>
    </alert>        
</tellAFriend>

Slide Show

If you want to setup a slide show to auto play, find the slideshow tag that contains the autoplay attributes. This attribute is a true / false parameter that specifies if the slides should auto play. 

<slideshow autoPlay="false">
    <alert delay="2000">
        <on src="Slideshow started"/>
        <off src="Slideshow stoped"/>
    </alert>    
</slideshow>

Music

In the setup part of XML the music tag is for setting up the alert messages for music events. 
<music>
    <alert delay="2000">    
        <on src="Loading please wait, music will start playing in a second."/>
        <off src="Music stoped"/>
    </alert>    
</music>
If you want to know how to edit those settings, please see the Alert messages section. The most important settings are placed inside each flip book. Flipbook tags have a child tag called music. Each of those music tags contains 3 attributes: 

<music src="sound.mp3" autoPlay="false" loop="true"/>
The music settings are placed inside flipbook tags because then you are able to specify separate songs for each of the books.

Copyright Footer

Copyright footer

Copyright tag contains three attributes:

    url - specifies what URL will be called after clicking on the footer
    target - Choose between two targets: _self - an URL will be opened in the same window or _blank - the URL will be opened in new window. (There is also a third one called _frame.) 


<copyrights src="Copyright (C) 2010, massiveProCreation" 
url="http://activeden.net/user/mpc?ref=mpc" target="_blank"/>

Arrows

Arrows

The last node in the setup tag is called other. There you will find an arrows tag that allows you to enable or disable the arrows that are shown on either sides of the flip book. Simply change the state attribute.

<other>
    <arrows state="enabled"/>    
</other>

Pre Loading

Preloading

You may want to change the information that is displayed under the pre loader while the application is loading. There are five messages that can be displayed. Four of them are set through XML in the preloading node and the fifth (for loading XML) is set in the index.html file in the flashvars section. The code is so clear it doesn't need any further explanation.

<preloading>
    <background src="LOADING BACKGROUND"/>
    <covers src="LOADING COVERS"/>
    <book src="LOADING BOOK"/>
    <photo src="LOADING BIGGER PHOTO"/>
</preloading>

var flashvars = {
    xmlPath:          'setup.xml',
    preloaderMessage: 'LOADING XML',
    title:            'XML Flip Book / AS3 v 1.2' 
};

Website Title

If you want to change the website title that is displayed in the upper browser bar, you need to open index.html, go to the flashvars section, and change the value of the title attribute.

var flashvars = {
    xmlPath:          'setup.xml',
    preloaderMessage: 'LOADING XML',
    title:            'XML Flip Book / AS3 v 1.2' 
};

XML Path

If you want to change the path to the XML file (or name of the XML file), you need to open index.html, go to the flashvars section, and change the value of the xmlPath attribute. (The default name of XML file is setup.xml. It is placed in the main folder so we can just write "setup.xml")

var flashvars = {
    xmlPath:          'setup.xml',
    preloaderMessage: 'LOADING XML',
    title:            'XML Flip Book / AS3 v 1.2' 
};

PDF Generator

You can either link the "Download pdf" button to the PDF file previously generated by you or give the user the ability to generate a PDF. that way the user can only include the pages that are interesting for them. Inside the PDF tag you will find setup and alert tags. The setup tag has 3 attributes:


If you don't know how to setup the alert tag, please see the "Alert messages" section. 

<pdf>
    <setup method="link" type="A5"/>
    <alert delay="2000">
        <generate src="Please wait while pdf is generating, you will be prompted with a 'save us' window."/>
    </alert>
</pdf>

NOTICE: Remember to compile your FLA file after applying changes inside the FLA file. You don't have to re-compile after making changes to the XML file! To re-compile your file, go to Control>Test Movie.


massive pro creation

Flip Book settings:

If you haven't read the How to use and modify this file, section please do.

Basic Setup

Flip Book

Setting up your Flip Books is the most important part because here you will setup the content of your book/books. Remember that each flipbook tag placed in in the XML will represent one book. For example, if you want to have only one book on your website, you need to remove the other two from XML. Each Flip Book has 15 basic parameters that need to be setup: 

<flipbook 
    width="700" 
    height="500" 
    proportion="0" 
    boarder="5" 
    middleBoarder="0.5" 
    boarderColor="0x000000" 
    boarderAlpha="1" 
    pdf="http://www.google.com/pdf_version.pdf" 
    title="Features Book" 
    bitmapSmoothing="true" 
    doubleClick="true" 
    resizeSwf="true" 
    resizeContent="false"
    resizeTableOfContent="false"
    zoom="false">

<!-- Here goes the content of a book -->

</flipbook>

Alerts

Next in the flipboook tag there are Alerts settings. If you want to setup the alert messages displayed by the Flip Book, go to the alert node; and there you will find six different messages. If you need more information about setting up the Alerts, read this section.

<alert>
    <loadingNext src="Please wait while the new page loads."/>
    <loading src="Please wait while the page loads."/>
    <pageNumber src="There are only 18 pages"/>
    <video>
        <enlarge src="Double Click to enlarge the video"/>
        <close src="Double Click to close the video"/>
        <preloading src="LOADING VIDEO"/>
    </video>
</alert>

Shadows

Flip Book shadows

There are 4 shadows in the flip book. Each has its alpha value (0 - 1) represented by the src attribute in each node. If you don't know which shadow is which, you can look them up on the above image. If you want to disable some of the shadows, set the chosen shadow's value to 0.

<shadows>
    <inner src="1"/>
    <curveGlow src="1"/>
    <pageShadow src="1"/>
    <innerPageShadow src="1"/>
</shadows>

Music

Each flip book has its own sound settings. The music tag contains 3 attributes: 



<music src="sound.mp3" autoPlay="false" loop="true"/>

Table of Contents

TableOfContent node has only one attribute called number. This attribute specifies the page to display as the table of contents. Clicking the table of contents button in the upper UI will redirect the user to this page. 



<tableOfContent number="2"/>

Thumbnails

The thumbnails node specifies the border parameters of the displayed small page previews. (for example, in the "show all pages" panel) The Border node contains two attributes: 

<thumbnails>
    <boarder thickness="5" color="0x111111"/>
</thumbnails>

Adding and Removing Pages

The most important part of customizing your book is adding and removing pages. Each page is represented by a page node. Each page node has a number of attributes. (Remember that the number of pages has to be even and that you need to have at least 4 pages - covers + two pages in the middle.) You can use different file formats as pages: graphic formats (JPG, PNG, ECT) and SWF files. 

<page src="pages/cover.jpg" />
<page src="pages/table1.jpg"/>
<page src="pages/table2.jpg" type="table" bgColor="0xCCCCCC" bgAlpha="0.3" textColor="0x000000">
    <list src="Table of Content"/>
    <list src="Cover" number="1"/>
    <list src="Content page" number="4"/>
    <list src="Video support" number="6"/>
    <list src="Amaizing Features" number="8"/>
    <list src="Page Printing" number="10"/>
    <list src="Great Design" number="12"/>
    <list src="Swf support" number="14"/>
    <list src="XML Driven" number="16"/>
    <list src="Back Cover" number="18"/>
</page>    

<page src="pages/content1.jpg"/>
<page src="pages/content2.jpg" type="content" width="300" height="400">
<![CDATA[<img src="logo.png" align="left" />
                        
<p>Welcome this is page with XML Driven content.

<b>With deeplinking every page has it's own unique url so 
you can easily 
<a href="http://mpcreation.pl/flipbook/update1.2/#/Book%201/12">
link to any spread you want!</a> <font color="#00FF00">
(new feature)</font></b>    

To format the text you can use bacis html tags like:

<li><font size="13">Font size,</font></li>
<li><font color="#00FF00">Font color,</font></li>
<li><b>Bold,</b></li>
<li><i>Italic,</i></li>
<li><u>Underline,</u></li>
<li>Image,</li>
<li>Link: view my 
<a href="http://activeden.net/user/mpc?ref=mpc">
ActiveDen profile.</a></li>
</li></p>]]>
</page>    

<page src="pages/video1.jpg"/>
<page src="pages/video2.jpg" type="video" videoSrc="videos/zanimotion.flv"/>
<page src="pages/2_3.jpg" type="double" />
<page src="pages/4_5.jpg" type="double"/>
<page src="pages/6_7.jpg" type="double"/>                                
<page src="pages/8.jpg"/>
<page src="pages/9.swf"/>
<page src="pages/10_11.jpg" type="double"/>
<page src="pages/bcover.jpg" /> 

</flipbook>

massive pro creation

Good to know

XML Structure

The XML file requires a data tag at the beginning and a /data tag at the end file's end. In other words all the information in the XML file has to be wrapped in the data tags.

Recompiling a File

Remember to compile your FLA file after you apply any changes inside that file. You don't have to recompile after you have done any changes to the XML file! To compile your file go to Control>Test Movie.

Using SWFs as Pages

If you have trouble with the position of your SWF files, make sure that they have a background. It can be transparent. For example, if your SWF has 300x200 pixels and it doesn't position right on the page, open the source of your SWF, create a movie clip with 300x200 color fill, set its alpha to 0, and place it at 0,0 point so the movie clip covers the whole stage. Make sure your movie clip is on the lowest layer so it doesn't cover any of your active objects. Also make sure that your SWF is ActionScript 3.0 and publish with Flash Player 9.0+. Additionally, it is better when nothing goes off stage in your SWF.

Embedding Special Characters

First, open the preview.fla file with Flash IDE. Then open the library panel (Window>Library) form. There you have to choose the movie clip in which you want to display the special characters. For example, if you want to do this for the Content Page module, you have to find the contentPage movie clip and double click it. Inside, you will find a Text Field. Select the Text Field and then choose "characters embedding..." from the properties panel. The embedding panel will pop up. Specify the characters to embed, and then click OK. When you finish embedding your characters, re-compile the file by clicking ctrl/cmd+enter. If you need more information, please watch this video tutorial.

Content Page

Make sure that your page content is between < ![CDATA[ tag and ]] >. If you want the text to be displayed properly, make sure your text is also inside the < p > and < / p > tag. See the example (remove the spaces from the tags).

Purchase | See preview | Portfolio