Publish PageFlip for Newer SWF Versions
If you try publishing the Flash PageFlip transition effect to SWF Player version 7.0 or higher the effect will break down due to masking errors. These errors are a result of faulty camel-case capitalization on my part. All SWF Players after version 7 are case-sensitive therefore improper references such as “lineto” will need to be changed to the proper “lineTo”. Here are 3 ways to go about fixing the problem.
1) If you haven’t modified the file at all you can download an updated version which corrects all the capitalization errors for you.
2) If you have already made some changes to the content of the file (added pages etc.) but you haven’t modified the code, you can copy the following ActionScript and use it to replace the code on the first frame of the “Bound Pages” movieclip.
//
// By: P i X E L W i T . C O M
//
//
//
stop();
//
//
//_________________________V A R I A B L E S
//
// Store a constant reference to this clip on the main timeline so
// clip can be referenced from any other timeline as _level0.pagesAbs
_level0.pagesAbs = this;
// Set page dimensions
var pageWi = 200;
var pageHi = 300;
var pageWiHi = pageWi+pageHi;
var pivotY = pageHi/2+pageWi;
var pageColor = 0xFFFFE5;
// "dir" equals either 1 or -1 and determines if you
// are flipping forward or backward through the book
var dir = 1;
// "flipPage" is the # "between" the two flipping page #'s
var flipPage = 1.5;
// "curPage" is the # between the two currently viewed page #'s
var curPage = .5;
// "maxPages" should be an even number
var maxPages = 8;
// "autoStep" percentage of page width determining step size when auto-closing
var autoStep = .05;
// "dragging" is true if you are dragging the page
var dragging = false
//
//
//
//
//
//________________________________R U N O N C E
//
// Place Left and Right page flip Buttons
this.attachMovie ("cornerButton", "RButton", 11);
with (RButton) {
_x = pageWi;
_y = -pageWi;
}
this.attachMovie ("cornerButton", "LButton", 12);
with (LButton) {
_x = -pageWi;
_y = -pageWi;
_xscale = -100;
}
//
//
// Build pages for first time
pageInit (flipPage, dir);
// Drop down to appear centered
_y+=pivotY;
//
//
//
//
//
// _____________________B U I L D F U N C T I O N S
//
// Create a left-aligned page-sized solid fill raised one pagewidth
// If quadrant = 1 page is on the right, if -1 page is on the left
// targ is the clip which hold the page drawing
function makePage (targ, xQuadrant) {
with (targ) {
beginFill(pageColor, 100);
moveTo(0, -pageWi);
lineTo(0, -pageWiHi);
lineTo(xQuadrant*pageWi, -pageWiHi);
lineTo(xQuadrant*pageWi, -pageWi);
endFill();
}
}
//
//
// Create a left-aligned page-sized shadow gradient raised one pagewidth
// Shade is used to add depth to stationary pages
function makeShade (targ, xQuadrant) {
with (targ) {
// Defines gradient used as shadow overlay
var colors = [0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000];
var alphas = [ 40, 25, 15, 5, 0, 1, 6];
var ratios = [ 0, 1, 17, 51, 89, 132, 255];
var matrix = { matrixType:"box", x:0, y:pageWi, w:xQuadrant*pageWi, h:pageHi, r:0};
beginGradientFill( "linear", colors, alphas, ratios, matrix );
moveTo(0, -pageWi);
lineTo(0, -pageWiHi);
lineTo(xQuadrant*pageWi, -pageWiHi);
lineTo(xQuadrant*pageWi, -pageWi);
endFill();
}
}
//
//
// create a bottom-left aligned shadow gradient
// for animated shadows
function makeShadow (targ, xQuadrant) {
with (targ) {
// Defines gradient used as shadow overlay
var colors = [0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000];
var alphas = [ 40, 25, 15, 5, 0, 1, 6];
var ratios = [ 0, 1, 17, 51, 89, 132, 255];
var maxLength = Math.sqrt((pageWi*pageWi)+(pageWiHi*pageWiHi));
var matrix = { matrixType:"box", x:0, y:-maxLength, w:xQuadrant*pageWi, h:maxLength-pageWi, r:0};
beginGradientFill( "linear", colors, alphas, ratios, matrix );
moveTo(0, -pageWi);
lineTo(0, -maxLength);
lineTo(xQuadrant*pageWi, -maxLength);
lineTo(xQuadrant*pageWi, -pageWi);
endFill();
}
}
//
//
// Place Stationary Pages
function setStationary() {
// Place the "S"tationary "L"eft "P"age
createEmptyMovieClip("SLPage", 1);
if (flipPage!=1.5) {
makePage (SLPage, -1)
SLPage.attachMovie("print"+(flipPage-1.5), "Print", 1);
with (SLPage.Print) {
_x = -pageWi/2;
_y = -pivotY;
}
}
// Place the "S"tationary "R"ight "P"age
createEmptyMovieClip("SRPage", 2);
if (flipPage!=maxPages-.5){
makePage (SRPage, 1)
SRPage.attachMovie("print"+(flipPage+1.5), "Print", 1);
with (SRPage.Print) {
_x = pageWi/2;
_y = -pivotY;
}
}
// Place shade on page not being revealed
var targ = dir>0 ? SLPage : SRPage;
targ.createEmptyMovieClip("Shade", 2);
makeShade(targ.Shade, -dir);
}
//
//
// Place the Flipping Pages
function setFlipping() {
var targ;
// Place the "F"lipping "T"op "P"age
createEmptyMovieClip("FTPage", 3);
makePage (FTPage, dir)
with (FTPage) {
attachMovie("print"+(flipPage-dir*.5), "Print", 1);
with (Print) {
_x = dir*pageWi/2;
_y = -pivotY;
}
}
FTPage.createEmptyMovieClip("Shade", 2);
makeShade(FTPage.Shade, dir);
// Place the "F"lipping "B"ottom "P"age
createEmptyMovieClip("FBPage", 4);
makePage (FBPage, -dir)
FBPage.attachMovie("print"+(flipPage+dir*.5), "Print", 1);
with (FBPage.Print) {
_x = -dir*pageWi/2;
_y = -pivotY;
}
FBPage._rotation = dir*90;
}
//
//
// Creates Shadows which follow edge of transition
function setShadows() {
var targ;
// Place shadow on the "F"lipping page
this.createEmptyMovieClip("FShadow", 5);
makeShadow(FShadow, -dir);
FShadow._rotation = dir*45;
// Place shadow on the "S"tationary page
this.createEmptyMovieClip("SShadow", 6);
makeShadow(SShadow, dir);
SShadow._rotation = dir*45;
}
//
//
// Create Masks to hide everything
function makeMasks() {
// Create mask for Flipping Bottom Page Mask
this.createEmptyMovieClip("FBPageMask", 7);
with (FBPageMask) {
beginFill(0x005500, 100);
lineTo(pageWiHi, -pageWiHi);
curveTo(0, -2*pageWiHi, -pageWiHi, -pageWiHi);
endFill();
}
// Create mask for Flipping Top Page
FBPageMask.duplicateMovieClip("FTPageMask", 8);
// Create mask for Shadow on the Flipping Page
this.createEmptyMovieClip("FShadowMask", 9);
makePage (FShadowMask, -dir);
FShadowMask._rotation = dir*90;
// Create mask for Shadow on Stationary Page
this.createEmptyMovieClip("SShadowMask", 10);
makePage(SShadowMask, dir);
FBPage.setMask(FBPageMask);
FTPage.setMask(FTPageMask);
FShadow.setMask(FShadowMask);
SShadow.setMask(SShadowMask);
}
//
//
// Hide pages before page1 and after Last Page
function limitBook () {
if (flipPage==1.5) {
SLPage._visible = 0;
LButton._visible = 0;
SShadow._visible = 0;
if (dir==1) {
FTPage.Shade._alpha = 67;
SShadow._visible = 1;
}else {
FShadow._alpha = 67;
}
} else if (flipPage==maxPages-.5) {
SRPage._visible = 0;
RButton._visible = 0;
SShadow._visible = 0;
if (dir==-1) {
FTPage.Shade._alpha = 67;
SShadow._visible = 1;
} else {
FShadow._alpha = 67;
}
}
}
//
//
// How to position all pages needed for a page flip
// calls all functions listed above
function pageInit (cp, d) {
flipPage = cp;
dir = d;
//trace ("flip page = "+flipPage+" dir = "+dir);
setStationary();
setFlipping();
setShadows();
makeMasks();
limitBook ();
}
//
//
//
//
//
//__________________F L I P P I N G F U N C T I O N S
//
// How to adjust position of flipping page
// based on a value between 0 and 1
function flip(curVal) {
var rot = dir*45*curVal;
FBPageMask._rotation = FTPageMask._rotation = -rot;
FBPage._rotation = FShadowMask._rotation = (dir*90)-rot*2;
FShadow._rotation = SShadow._rotation=(dir*45)-rot;
}
//
//
// how to determine position of flipping page
// returns a value between 0 and 1
// zero being no-flip and one being full-flip
function getPageRatio () {
if (dragging) {
// if dragging page position is determined by mouse position
// the 20 helps advance the turning page when the button is pressed
pageRatio = -dir*(_xmouse-startX-dir*20)/(2*pageWi);
} else {
// if not dragging; auto increment page towards final position
pageRatio>2/3 ? pageRatio += autoStep : pageRatio -= autoStep;
}
// if out of bounds
if (pageRatio<=0) {
pageRatio = 0;
if (!dragging) {
flipDone();
}
} else if (pageRatio>=1) {
pageRatio = 1;
if (!dragging) {
flipDone();
}
}
return (pageRatio);
}
//
//
//
//
//
//_____________C O N T R O L I N G F U N C T I O N S
//
// What to do when you press a page flipping button
function startFlip (dir) {
pageInit (curPage+dir, dir);
startX = dir*pageWi;
dragging = true;
RButton._alpha=0;
Lbutton._alpha=0;
this.onEnterFrame = function () {
flip(getPageRatio());
}
}
//
//
// what to do when page is released
function flipRelease () {
dragging = false;
if (pageRatio>2/3) {
curPage+=2*dir;
}
}
//
//
// What to do when pages are done flipping
function flipDone () {
this.onEnterFrame = null;
RButton._alpha = 100;
LButton._alpha = 100;
if (curPage!=.5){
LButton._visible = 1;
}
if (curPage!=maxPages+.5){
RButton._visible = 1;
}
// Delete hidden pages to save resources
if (pageRatio==0) {
FShadow.removeMovieClip();
FShadowMask.removeMovieClip();
SShadow.removeMovieClip();
SShadowMask.removeMovieClip();
FBPage.removeMovieClip();
FBPageMask.removeMovieClip();
if (dir==1) {
SRPage.removeMovieClip();
} else {
SLPage.removeMovieClip();
}
} else {
FTPage.removeMovieClip();
if (dir==-1) {
SRPage.removeMovieClip();
} else {
SLPage.removeMovieClip();
}
}
FTPageMask.removeMovieClip();
}
//
//
// assign functions to button events
LButton.onPress = function() {
startFlip (-1);
}
LButton.onReleaseOutside = function () {
flipRelease();
}
LButton.onRelease = function () {
flipRelease();
}
RButton.onPress = function() {
startFlip (1);
}
RButton.onReleaseOutside = function () {
flipRelease();
}
RButton.onRelease = function () {
flipRelease();
}
//
//
//
//
//
3) If you have already made changes to the code but you don’t want to overwrite all of your hard work, you can open the main code block and use the ActionScript Editor’s “Find and Replace” and “Match Case” features to:
- Replace “PageHi” with “pageHi”.
- Replace “moveto” with “moveTo”.
- Replace “lineto” with “lineTo”.
- Replace “curveto” with “curveTo”.
- Replace “pageWIHi” with “pageWiHi”.
Either one of the above solutions should solve any problems you might encounter when publishing the Flash Page Flip file to a newer version of the Flash SWF Player. Leave a comment if you have any trouble.
Thanks for your code. (I’ve wanted to turn my picture books into e-books on my website for years.)
Working with your code is a great way to start to learn & understand Flash! (rank beginner here)
I posted my first book at http://stefansaal.com/editions8test.html
Very much fun…but I seem to be having the click problem (also mentioned by Neal, on Jul 2, 2010) with the page corners in Firefox (Safari and IE seem fine). Also, in Firefox the flipping page doesn’t animate as it flips, and I can’t seem to flip to see the back cover (last page).
I think I used the “correctTypos” file so I’m not sure what I am doing wrong. (I did have to add a lot of pages and change the page size, but those things are ok.)
Any suggestions?
Hello Stefan,
I checked the web page you provided and everything seemed to work as expected in FireFox 7.0.1
Hi…ok, there must be something nutty going on…my Firefox says it is version 3.6.23…another friend confirmed that it is working on his Firefox as well…I’m on a Mac, so maybe my Firefox is squirrelly…it must be something at my end; I will try to figure it out…in any event, I think your program is great, a real tool for learning. Thanks!
Hello PW
Thank for the cool script. Just purchased the fancy version. I am having in issue only in firefox where you occasionally have to click on a corner first before you can drag. I don’t know if this is related to a pop up blocker in firefox. Works fine in IE and Safari. Any clues? Work around would be great, but I would be satisfied with just knowing why.
Thanks a bunch!
Hello, Tried to modift the as by replacing the right bits (method 3). Then published it to the latest player version (9). The result was that i was seeing pages transparent while they should not.
I larged the cornerbutton hitzone (the 4th buttonoption)so that it fits the whole page. This because i liked the idea of moving the page by dragging the page instead of only a corner.
Is that the reason for my unwanted result while updating to flash9 player? If yes: how can i prevent this, if no: what else can i do?
By the way: Thanks a lot for sharing this thing with all of us!!!
Hello, I have used your book presentation. It has also worked everything excellently, size and contents change. The preview, also in the browser functions perfectly. On integrating into “Dreanweaver” nothing appears. (no matter whether as flv, or as swf or as html)
Where could the mistake lie? Now I already deal many hours with the problem without getting closer to a solution.
Yours sincerely
Adolf Fries
@William Anagaran, thanks for the compliment. Adding one-click flipping is a bit tricky which is why there isn’t a tutorial for that particular feature. If you have a little cash to spare, one-click flipping is among the new features in the Improved PageFlip file.