*help* i want to create a book where i can turn the pages

[manos]

hello

i don't realy know a lot about 3d in flash.........
i want to create a book where either i can turn the pages or i can click in buttons and then the pages will turn.

is it possible to do that in flash or i need another program???

thank you!!

[gerbick]

not really done in 3D, could be, but I bookmarked this page-turning flash example a while ago and tutorial as well.

those are all done in flash, with some actionscripting. hope those help.

[gerbick]

to view the actions, open up the *.fla file from the first url within Flash.

if you open up your Actions palette (F9) then you will see a selection in Symbol Definitions called "Bound Pages"... highlight it, and this is the important code you were probably seeking, yet never indicated in the previous PM's:

//  P i X E L W i T . C O M
stop();
//_C O M M E N T S
// Thought to self:
// Try naming functions according to the events which preclude them
// A page flip involves 3 pieces of paper
// 2 bottom static pages (which lay flat at all times)
// and 1 active flipping page (which has 2 sides)
// Four pages total, 2 static/stationary and 2 flipping
// The flipping page can be on the left or right side
// The top image on the flipping page doesn't actually move
//_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
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... {cont'd}

this is the code that enables you to take the images that you need to enter onto the Prints layer in order to make the pages flip.

in the Prints layer you will see 8 frames that have basic content in them. this will be where your 8 pages will go. you will layout your information on this 8 frames, in that layer to get the pages to "flip".

I have yet to really dissect this example... as I stated before. This was an example I promised myself I'd return back to one day.

Now, please keep the questions in the Forum... I don't really read my PM's that often; especially while working on emergencies at the office.

Post your questions here please. I have this thread bookmarked.

[gerbick]

btw, I trimmed the code... you get the gist of what I'm saying, hopefully.

[manos]

hi and thanks for your help

where i put the code that enables you to take the images that you need to enter onto the Prints layer in order to make the pages flip ?

thank you very much!!!

[gerbick]

like I said earlier.

you place your images on the PRINTS layer. there are EIGHT frames that basically instruct you to PLACE YOUR IMAGES in those frames. Only one image, per frame, in the PRINTS layer.

There is no code. You just place your images.

[manos]

but i open the actions and i didn't found the selection in Symbol Definitions called "Bound Pages"...

the code that you put in your previous message is the code that i supposed to see or in another code?

soory but i realy trying to understand how it works!

it's not only that i have to do the book that i want but i have also explain it!


sorry again and i realy appreciate your help!

[suisse]

Dude this is advanced actionscript. If you never scripted before i think you should just download the fla and change the pics.
Then learn actionscript, once you know it better try to understand. At least where to place it.

[gerbick]

dude. follow me. open up the Actions palette.

expand.

locate Symbol Definitions... there's the "code" you want to see.

however. I don't think you need to touch the code, especially since you don't seem to be able to find it. You just need to locate the one layer that's of concern here.

the Prints layer. not actions. layer. ok?

here's a shot of what you seem to be missing.



see the portion that says Symbol Definitions? expand that.

there's the code you seem to want to play with.

however, via that same page, there's an e-mail of the author. have you tried contacting him? I don't think I'll be of any more help in this situation, especially since you're not placing your documents on the Prints Layer as I stated above, and via the comments that are even included in the file itself.

go back to the original page to find the original author's e-mail address.

good luck.

[manos]

for some reason to see the code i had to download flashMX 2004 !!!

i couldn't find the code at flash mx..........i saw the picture that you send me and then i installed the MX2004...........now i can see what i wanted!.........


thank you!!!