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.

22 Responses to “Publish PageFlip for Newer SWF Versions”

  1. Hi,
    I came across your PageFlip application and it works great. The codes are well-explained…

    Just wanted to know if there’s a way where I could add 2 more buttons which will just automatically flip the pages without dragging them.

    Thanks.

  2. brasilian says:

    hi kelly glik

    i dont know if its what are you looking for but i found this post
    http://www.pixelwit.com/blog/2008/10/pageflip-version-detection-fix/
    take a look

  3. kelly glik says:

    Before when you clicked a button the book flipped.
    Now it wont, though the flash movie works, it was working for over a year with no problem.
    Im confounded? Please help.
    It works on my computer if I play the TEST MOVIE. But not once uploaded.

  4. brasilian says:

    hi! first of all, sorry for my poor english.
    i’m having some troubles with this version…

    i dont know if its cause the flash 10 or whatever, but my “wannabe’s” using your script just dont show up…
    localy its ok, but when i publish online, it seems to get lost and only the bg appear with the message to download flash…

    i already done the modifications in AS but still doesnt work…

    can some one help on this?

    thanks everyone and again, sorry for my poor english.

  5. Ben Ward says:

    http://www.pixelwit.com/blog/page-flip/add-pages-to-pageflip/

    The solution was here all along just could’nt find it cant believe is was such a simple error I made though it was’nt an obvious one export to actionscript make sure its on 😛

  6. Ben Ward says:

    I have been using and finding it great, though I am having an issue when I increased the pages to 14, The pages increase and appear though the content on the pages does not, only the first 8 pages show there content.

    I get the following output error
    Error: A ‘with’ action failed because the specified object did not exist.

    If you or anyone else can help me It would be much thanked.

  7. Greg says:

    🙂 Ok, thanks for the information. I think I will make 2 separate swf, one with AS2 and one with AS3, it should resolve my problem.

    Thanks again !

  8. Pixelwit says:

    This version of the Page Flip only works with AS1 and AS2, maybe I’ll write an AS3 version in the future but it will have to be a complete overhaul.

  9. Greg says:

    Hello 🙂 Your code is great, but it seems it doesn’t like ActionScript3. It works fine with AS2, but as I’m trying to do something with AS3, it would be great to get it working.

    So, if you have an idea how to make it functionnal with AS3 it would be greatly appreciated 🙂

    Thanks a lot

  10. Ingeborg says:

    Hi!
    Thank you very much for your great share! I just found the updated code, with the adjusted camelcase-thing and it works great; I had almost given up! I will use your book for a virtual exhibition; te tell a story about the main character. Hopefully I’ll manage to fill the different pages, but I can find a lot of information over here.
    Thanks so much!!!
    – I.

  11. Daniel Sobral says:

    Hi !
    I’m try to use your book, but when I try to change size of book, in Code (434×600 – page size) and Properties to (868×600 – book size), It don’t “find” the center.
    Can you help me?!

    Thanks!

  12. Beastriker says:

    thanx so much, you helped my laziness survive and me to go through shortage of time

  13. dombie says:

    This is one hell of a beautiful share!!

  14. agratefulperson says:

    Thank you for being so generous and give follow up to the questions asked by beginner web designer like me. I have seen other page flip programs but it is only yours (as of now) that has tutorial on how to evolve the program you made.

  15. freddy says:

    thanks man. really kind of you to share this

Leave a Reply

PixelWit.com's Comment Guidelines


Warning: Undefined variable $user_ID in /home2/pixelwit/public_html/blog/wp-content/themes/fvariant2/comments.php on line 57

You must be logged in to post a comment.

© Sean O'Shell 2007-2024