Page Flip Enhancement

How to Install Page Flip Enhancement
By Mick

Below is a brief tutorial on how to implement the page flip java script to any web page.

You can add any 100x100 image (jpg format) with whatever text for the small pic behind the waving turnover (the one that says peel me) and then use another 500x500 jpg with text, once the page corner flips there's also a hyperlink embedded in the image too.

First download the complete zip file from here - http://www.webpicasso.de/blog/wp-content/plugins/DownloadCounter/download.php?id=14

Unpack the zip file to a temp directory, the only files you do not need from the zip file on upload are as follows:
History.txt –
copyright.txt –
index.html

The 2 jpg files, pageear_b and pageear_s, are the 2 images the flip uses.

The _s image is 100x100x16million colours and is the first image you see in the corner of the flip as the page waves about.

The _b image is 500x500x16million colours and is the image you see when moving your mouse over the corner.

When creating your own images be careful where you write any text because the page will only turn so far, so if you try and add too much text and also too far down the image and to the left of the images, the text will fail to show.

Run the index.html to give you an idea where to add your own text

Once you have created your own images, we now go on to adding the code to your web page.

First add this code to the <head> tag of the page you want the flip to run on. Use Insert > Web Object L HTML.

<SCRIPT src="AC_OETags.js" language="javascript"></script>
<SCRIPT src="pageear.js" type="text/javascript"></script>

Now we add this code to the <body> tag of the page you want the flip to run on


<SCRIPT type="text/javascript">
writeObjects();
</script>

Only one thing left to edit and that’s the hyperlink within the large image when the page flips, this code is situated in the pageear.js file and is located on line 38. Alter the following code to add your own URL linkage

var jumpTo = 'http://www.YOUR-DOMAIN-NAME-GOES-HERE/'

That just about covers the tutorial, all you need to do now is upload ALL the following files to the SAME directory on your web server

Pageear_b.jpg
Pageear_s.jpg
AC_OETags.js
Pageear.js
Zoom.mp3
Pageear_b.swf
Pageear_s.swf
And of course your own html file you have added the code to

Here endeth this tutorial

Regards and Good Luck – Mick – Working links can be found here - http://www.webpicasso.de and
http://www.mk-designandhosting.co.uk/pageflip

Serif Forum Link - Page Flip Enhancement
Page Flip ZIP file

Page Flip site link

Sample site showing PageFlip jpg dimensions and hints.

Sample WP X2 file.