flash pageflip help.

[didiwang]

Hi guys, I've recently downloaded a flash page flip from http://www.pixelwit.com/blog/page-flip/page-flip-help/.

I have been researching to find out how can I make it autoflip by modifiying the codes?


This are the ready codes. Thank you very much..


// _________________________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 = 640;
var pageHi = 420;
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 = 12;
// "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, yageWi, w:xQuadrant*pageWi, hageHi, 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();
};

 

[WaterRain]

flash is becoming history. shouldn't waste your time on this imo.

 

[didiwang]

flash is becoming history. shouldn't waste your time on this imo.

then wat would be a better alternative?

 

[WaterRain]

HTML5 bro..

Tutorial and source available @ http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

Working example @ http://www.html5rocks.com/static/demos/20things_pageflip/example/index.html

 

[didiwang]

HTML5 bro..

Tutorial and source available @ http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

Working example @ http://www.html5rocks.com/static/demos/20things_pageflip/example/index.html

thank u very much!

 

[didiwang]

The html cannot work on IE leh. Any more help?

 

[WaterRain]

For IE9 should be supported. Older versions maybe you can try http://www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html

 

[yanlilei64]

Flash are still way better and still important, Unreal and Unity3D are supporting Flash for 3D gaming for desktop and web browser. HTML5 cannot work well in all browsers, nor can work on desktop at all so HTML5 is still infancy and broken until Adobe has finalize the commercial support for HTML5 in the next 3-5 years. Right, Adobe is fixing where HTML5 consortium failed to make it work.

I did the flash pageflip for my friend wedding. This worked very well,
Google for "flex flip book component".
As this is meant for Flex Builder 3, try to get FB3 IDE instead of Flex Builder 4 as there are significant changes in the newer version, however, SDK in FB3 can work for user with a minimum of Flash player 9 which has 99% market penetration and it work without issues for Flash player 10.x and 11.x.

You can also modify the code to automate paging easily. Note that I not a professional developer and have zero knowledge in OOP previously, I pick up some of the OOP recently, seem easy to learn.

P.S. I'm surprise that the HTML5 3D animation which demonstrated in Google IO in 2010 is now having problem in the latest Chrome web browser which part of the pictures is not showing correctly. Not sure what wrong.

 

[WaterRain]

Flash are still way better and still important, Unreal and Unity3D are supporting Flash for 3D gaming for desktop and web browser. HTML5 cannot work well in all browsers, nor can work on desktop at all so HTML5 is still infancy and broken until Adobe has finalize the commercial support for HTML5 in the next 3-5 years. Right, Adobe is fixing where HTML5 consortium failed to make it work.

I did the flash pageflip for my friend wedding. This worked very well,
Google for "flex flip book component".
As this is meant for Flex Builder 3, try to get FB3 IDE instead of Flex Builder 4 as there are significant changes in the newer version, however, SDK in FB3 can work for user with a minimum of Flash player 9 which has 99% market penetration and it work without issues for Flash player 10.x and 11.x.

You can also modify the code to automate paging easily. Note that I not a professional developer and have zero knowledge in OOP previously, I pick up some of the OOP recently, seem easy to learn.

P.S. I'm surprise that the HTML5 3D animation which demonstrated in Google IO in 2010 is now having problem in the latest Chrome web browser which part of the pictures is not showing correctly. Not sure what wrong.

I'm not too sure if they will really need to take 3-5 years since they already took the first step to kill mobile flash. Having publicly launch EDGE preview, I think it is a sign of where things are moving towards. I do agree that HTML5 will still take quite a while before it becomes a final standard but many of HTML5 advance features are already being implemented.

http://labs.adobe.com/technologies/edge/

In any case, I think TS should consider yanlilei64's advice as well. You can still stick to flash till HTML5 is ready to be received by all. He may be able to help you with the problems you are facing with since he has experience with it.

Good luck

 

[yanlilei64]

Yup, probably will be ready when IE9 takeover IE7 in the next 3-5 years in most industry and education sector because IE9 can accelerate HTML5 animation as fast as Flash. By then, I think any paid HTML editor may go out of business.

 

[zmcmay]

Re: Flash Page Flip Help

I had never tried to create flash page flipping effect with programming. Usually, I use Kvisoft flip page software to create the animation.

 

[ailsa1234]

then wat would be a better alternative?

Well, there are so many useful alternative software for your reference, such as Kvisoft page flip software，XFlip, 3Dissue,etc. They all can help you convert PDF to flash page flip publications.
You can try.