Custom Flash Pageflip book needed

Hi,

We need a Flash pageflipping book for a website with a few custom controls and JavaScript communication. Pages must be loaded from a dynamic file. When a page is marked as deletable, a delete button should be shown on te page. Pressing that button should call a JavaScript function.

With JavaScript we need to call a few methods in the Flash movie. The Flash movie should have a transparant background.

Design:
http://www.swis.nl/flashbook/preview-boek.jpg


Specifications:

Pages
The book’s pages will be squared.

The images used for a page will be 215x215 pixels. The left and right page of the book should be 215x215 pixels. The image should fill the whole page.
The flash file should have the following dimensions: Width 449 px, height 395px.

Page transitions should be animated. You need to be able to navigate dragging the page edge or corner.

There should be a default animation for a page transition. This to facilitate automated flipping to a certain page. There should also be a special animation for flipping over multiple pages!

Available features:

Config
The flash will be embedded using the following code:

Code:

---

<script type="text/javascript">
  var so = new SWFObject("bookpreview.swf", "book_preview", "449", "395", "8", "#336699");
  so.addParam("wmode", "transparent");
  so.addVariable("datafile", "http://example.com/path/to/datafile.php");
  so.addVariable("btn_next_page", "http://example.com/path/to/image.gif");
  so.addVariable("btn_prev_page", "http://example.com/path/to/image.gif");
  so.write("flash_container");
</script>

---

Important to note:
datafile variable sets the path to the data script.
btn_prev_page variable is the image for the back button
btn_next_page variable is the image for the forward button

Data
The data should be read from an XML file. The data file holds the following data:
Id: Reference to the given page
Deletable: Can this page be deleted?
Image: Image url for display

Example file:

Code:

---

<?xml version="1.0" encoding="UTF-8"?>
<pages>
        <!-- Undeletable page. -->
        <page id=”index” deletable=”false”>
                <image>image url</image>
        </page>
        <page id=”frontpage_cat1” deletable=”false”>
                <image>image url</image>
        </page>

        <!-- Deletable page. -->
        <page id=”18” deletable=”true”>
                <image>image url</image>
        </page>
        <page id=”1” deletable=”true”>
                <image>image url</image>
        </page>

        <!-- Undeletable page. -->
        <page id=”frontpage_cat2” deletable=”false”>
                <image>image url</image>
        </page>

        <!-- Deletable page. -->
        <page id=”12” deletable=”true”>
                <image>image url</image>
        </page>
        <page id=”36” deletable=”true”>
                <image>image url</image>
        </page>
</pages>

---

JavaScript controls
We need the following controls for the book:
animateToPage( pageId ); Function to automatically flip to the page with pageId a id. This function should wait for requests (loading, or reloading) and execute after.
jumpToPage( pageId ); Function to instantly open the book at the given page. This function should wait for requests (loading, or reloading) and execute after.
reload(); Reload book data from XML data file.

Page Deletion
Delete button: Call the global javascript object method: oBoek.delete(pageId);
Delete buttons should only be shown on pages marked deletable.

Questions?
If you have any questions, please don't hesitate to ask! (mail / pm / reply in thread). vkleijnendorst [AT] swis.nl

Files:
Download Photoshop PSD with design

Time frame & price range:
We would like this done ASAP. :)
Price range: $1000

you need something like this?

http://www.lordofduct.com/assets/fla.../PageFlip.html

It supports any size pages, you can use images, swf's, and even video clips.

The loaded images in there are kinda meh, but like I said they can be swapped out with any visual design. The actual application only handles the "page flipping" and glare. It's all handled via a XML file loaded in.

example of xml:

Code:

---

<?xml version="1.0" encoding="utf-8"?>

<PageFlip>

        <pages>

                <page>

                        <img/>

                        <style/>

                        <text/>

                </page>

                <page>

                        <img>../content/images/img1.gif</img>

                        <style>

                                a:link { color:#0000CC; }

                                a:hover { color:#0000FF; }

                        </style>

                        <text><![CDATA[Website: <a href="http://www.google.com">This is Google.com</a>]]></text>

                </page>

                <page>

                        <img>../content/images/img2.gif</img>

                        <style>

                                a:link { color:#0000CC; }

                                a:hover { color:#0000FF; }

                        </style>

                        <text><![CDATA[However we know <a href="http://www.google.com">that the link can change</a>.]]></text>

                </page>

                <page>

                        <img>../content/images/img3.gif</img>

                        <style>

                                a:link { color:#0000CC; }

                                a:hover { color:#0000FF; }

                        </style>

                        <text><![CDATA[Then again <a href="http://www.google.com">it doesn't have to</a>.]]></text>

                </page>

                <page>

                        <img>../content/images/img4.gif</img>

                        <style>

                                a:link { color:#0000CC; }

                                a:hover { color:#0000FF; }

                        </style>

                        <text><![CDATA[It could just <a href="http://www.google.com">stay the same</a>.]]></text>

                </page>

                <page>

                        <img>../content/images/img5.gif</img>

                        <style>

                                a:link { color:#0000CC; }

                                a:hover { color:#0000FF; }

                        </style>

                        <text><![CDATA[Website: <a href="http://www.google.com">This is Google.com</a>]]></text>

                </page>

                <page>

                        <img>../content/images/img6.gif</img>

                        <style>

                                a:link { color:#0000CC; }

                                a:hover { color:#0000FF; }

                        </style>

                        <text><![CDATA[However <a href="http://www.google.com">that is boring</a>.]]></text>

                </page>

                <page>

                        <img>../content/images/img7.gif</img>

                        <style>

                                a:link { color:#0000CC; }

                                a:hover { color:#0000FF; }

                        </style>

                        <text><![CDATA[So I decided <a href="http://www.google.com">to change again</a>.]]></text>

                </page>

                <page>

                        <img>../content/images/img8.gif</img>

                        <style>

                                a:link { color:#0000CC; }

                                a:hover { color:#0000FF; }

                        </style>

                        <text><![CDATA[Website: <a href="http://www.google.com">This is Google.com</a>]]></text>

                </page>

                <page>

                        <img/>

                        <style/>

                        <text/>

                </page>

        </pages>

</PageFlip>

---

Keep in mind, this page flip animation is real time... it doesn't use predefined "animations". This way the user can actually "flip the pages" by clicking any corner and dragging it around. Releasing will finish the transition if the page is turned far enough. Will some extra code I can easily facilitate this exact real time animation to be done in succession for a "multi page" transition.


Let me know, I can customize this to your tastes if you'd like. Contact me through my website:

http://www.lordofduct.com

contact email is in "about me"