# Flash book effect
**URL:** https://forum.kirupa.com/t/flash-book-effect/38199
**Category:** Uncategorized
**Created:** [December 19, 2003, 11:38am UTC](https://forum.kirupa.com/t/flash-book-effect/38199 "2003-12-19T11:38:59Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@kashif](https://forum.kirupa.com/u/kashif)
#### Post date: [December 19, 2003, 11:38am UTC](https://forum.kirupa.com/t/flash-book-effect/38199/1 "2003-12-19T11:38:59Z")
Hi i just stumbled upon this website and am really curious how this effect is done so realistically with the images on the back page as it is turned.
www.[http://www.pageplay.com/](http://www.pageplay.com/)
can someone give me an insight into this technique cos its impressive.
kash (the beginner)
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 27, 2003, 8:20pm UTC](https://forum.kirupa.com/t/flash-book-effect/38199/2 "2003-12-27T20:20:55Z")
Also;
take a look at [http://www.oakley.com/holiday\_catalog/](http://www.oakley.com/holiday_catalog/)
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 27, 2003, 10:21pm UTC](https://forum.kirupa.com/t/flash-book-effect/38199/3 "2003-12-27T22:21:12Z")
It might be a mask but I doubt it. I think it’s definetly a frame-by-frame animation made from either flash w/illustrator or with a 3D program.
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 27, 2003, 11:18pm UTC](https://forum.kirupa.com/t/flash-book-effect/38199/4 "2003-12-27T23:18:26Z")
Bonjour,
I know there are many post about the flip book but i’m still looking to make a better one.
I think the best flip book on the net is still:
[http://www.show-me-dq.com](http://www.show-me-dq.com)
But… I don’t even understand the animated corners…
Can someone please explain the basic structure of this book. It would appreciate it very much.
------------------------------------------------Flip book :: Non-tested code
// Action script…
// [onClipEvent of sprite 3 in frame 5]
onClipEvent (load)
{
if (\_parent.getBytesTotal() {
fileSize = Math.floor(\_parent.getBytesTotal()) + “bytes”;
}
else if (\_parent.getBytesTotal() {
fileSize = math.floor(\_parent.getBytesTotal() / 1000000) + “mb”;
}
else
{
fileSize = math.floor(\_parent.getBytesTotal() / 1000) + “k”;
} // end if
message = “”;
}
onClipEvent (enterFrame)
{
percent = Math.floor(\_parent.getBytesLoaded() / \_parent.getBytesTotal() \* 100);
output = percent + “% of " + filesize + " loaded”;
Bar.\_xscale = percent;
if (percent == 100)
{
this.\_visible = 0;
} // end if
}
// [Action in Frame 2]
requiredVersion = 6;
version = /:$version;
flash\_ver = version.split(" ");
if (flash\_ver[1].charAt(0) - 0 \>= requiredVersion)
{
gotoAndPlay(4);
} // end if
// [Action in Frame 3]
stop();
// [Action in Frame 16]
stop();
// Action script…
// [Action in Frame 1]
function oooooo(targ, pppppp)
{
with (targ)
{
beginFill(eeeeee, 100);
moveto(0, -aaaaaa);
lineto(0, -cccccc);
lineTo(pppppp \* aaaaaa, -cccccc);
lineTo(pppppp \* aaaaaa, -aaaaaa);
endFill();
} // End of the function
} // End of with
function qqqqqq(targ, pppppp)
{
with (targ)
{
var colors = [0, 0, 0, 0, 0, 0, 0];
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:aaaaaa, w:pppppp \* aaaaaa, h:bbbbbb, r:0};
beginGradientFill(“linear”, colors, alphas, ratios, matrix);
moveto(0, -aaaaaa);
lineto(0, -cccccc);
lineTo(pppppp \* aaaaaa, -cccccc);
lineTo(pppppp \* aaaaaa, -aaaaaa);
endFill();
} // End of the function
} // End of with
function rrrrrr(targ, pppppp)
{
with (targ)
{
var colors = [0, 0, 0, 0, 0, 0, 0];
var alphas = [40, 25, 15, 5, 0, 1, 6];
var ratios = [0, 1, 17, 51, 89, 132, 255];
var maxlength = math.sqrt(aaaaaa \* aaaaaa + cccccc \* cccccc);
var matrix = {matrixtype:“box”, x:0, y:-maxlength, w:pppppp \* aaaaaa, h:maxlength - aaaaaa, r:0};
beginGradientFill(“linear”, colors, alphas, ratios, matrix);
moveto(0, -aaaaaa);
lineto(0, -maxLength);
lineto(pppppp \* aaaaaa, -maxlength);
lineTo(pppppp \* aaaaaa, -aaaaaa);
endFill();
} // End of the function
} // End of with
function ssssss()
{
createEmptyMovieClip(“tttttt”, 1);
if (gggggg != 1.500000)
{
oooooo(tttttt, -1);
tttttt.attachMovie(“print” + (gggggg - 1.500000), “print”, 1);
with (tttttt.print)
{
\_x = -aaaaaa / 2;
\_y = -dddddd;
} // End of with
} // end if
createEmptyMovieClip(“uuuuuu”, 2);
if (gggggg != iiiiii - 0.500000)
{
oooooo(uuuuuu, 1);
uuuuuu.attachMovie(“print” + (gggggg + 1.500000), “print”, 1);
with (uuuuuu.print)
{
\_x = aaaaaa / 2;
\_y = -dddddd;
} // End of with
} // end if
var targ = ffffff targ.createEmptyMovieClip(“Shade”, 2);
qqqqqq(targ.shade, -ffffff);
} // End of the function
function ddd111()
{
var targ;
createEmptyMovieClip(“bbb111”, 3);
oooooo(bbb111, ffffff);
with (bbb111)
{
attachMovie(“print” + (gggggg - ffffff \* 0.500000), “print”, 1);
with (Print)
{
\_x = ffffff \* aaaaaa / 2;
\_y = -dddddd;
} // End of with
bbb111.createEmptyMovieClip(“Shade”, 2);
qqqqqq(bbb111.shade, ffffff);
createEmptyMovieClip(“ccc111”, 4);
oooooo(ccc111, -ffffff);
ccc111.attachMovie(“print” + (gggggg + ffffff \* 0.500000), “print”, 1);
with (ccc111.print)
{
\_x = -ffffff \* aaaaaa / 2;
\_y = -dddddd;
} // End of with
ccc111.\_rotation = ffffff \* 90;
} // End of the function
function eee111()
{
var targ;
this.createEmptyMovieClip(“zzzzzz”, 5);
rrrrrr(zzzzzz, -ffffff);
zzzzzz.\_rotation = ffffff \* 45;
this.createEmptyMovieClip(“aaa111”, 6);
rrrrrr(aaa111, ffffff);
aaa111.\_rotation = ffffff \* 45;
} // End of the function
function fff111()
{
this.createEmptyMovieClip(“xxxxxx”, 7);
with (xxxxxx)
{
beginFill(21760, 100);
lineto(cccccc, -cccccc);
curveto(0, -2 \* cccccc, -cccccc, -cccccc);
endFill();
} // End of with
xxxxxx.duplicateMovieClip(“yyyyyy”, 8);
this.createEmptyMovieClip(“vvvvvv”, 9);
oooooo(vvvvvv, -ffffff);
vvvvvv.\_rotation = ffffff \* 90;
this.createEmptyMovieClip(“wwwwww”, 10);
oooooo(wwwwww, ffffff);
ccc111.setMask(xxxxxx);
bbb111.setMask(yyyyyy);
zzzzzz.setMask(vvvvvv);
aaa111.setMask(wwwwww);
} // End of the function
function limitBook()
{
if (gggggg == 1.500000)
{
tttttt.\_visible = 0;
mmmmmm.\_visible = 0;
aaa111.\_visible = 0;
if (ffffff == 1)
{
bbb111.shade.\_alpha = 67;
aaa111.\_visible = 1;
}
else
{
zzzzzz.\_alpha = 67;
} // end if
}
else if (gggggg == iiiiii - 0.500000)
{
uuuuuu.\_visible = 0;
llllll.\_visible = 0;
aaa111.\_visible = 0;
if (ffffff == -1)
{
bbb111.shade.\_alpha = 67;
aaa111.\_visible = 1;
}
else
{
zzzzzz.\_alpha = 67;
} // End of the function
} // end if
} // end if
function nnnnnn(cp, d)
{
gggggg = cp;
ffffff = d;
ssssss();
ddd111();
eee111();
fff111();
limitBook();
} // End of the function
function flip(curVal)
{
var rot = ffffff \* 45 \* curval;
yyyyyy.\_rotation = -rot;
xxxxxx.\_rotation = -rot;
vvvvvv.\_rotation = ffffff \* 90 - rot \* 2;
ccc111.\_rotation = ffffff \* 90 - rot \* 2;
aaa111.\_rotation = ffffff \* 45 - rot;
zzzzzz.\_rotation = ffffff \* 45 - rot;
} // End of the function
function getPageRatio()
{
if (kkkkkk)
{
pageRatio = -ffffff \* (\_soundbuftime - startx - ffffff \* 20) / (2 \* aaaaaa);
}
else
{
pageratio } // end if
if (pageRatio \>= 0)
{
pageRatio = 0;
if (kkkkkk)
{
flipDone();
} // end if
}
else if (pageRatio \>= 1)
{
pageRatio = 1;
if (kkkkkk)
{
flipDone();
} // end if
} // end if
return(pageRatio);
} // End of the function
function startFlip(ffffff)
{
nnnnnn(hhhhhh + ffffff, ffffff);
startX = ffffff \* aaaaaa;
kkkkkk = true;
llllll.\_alpha = 0;
mmmmmm.\_alpha = 0;
this.onEnterFrame = function ()
{
flip(getPageRatio());
} // End of the function
} // End of the function
function flipRelease()
{
kkkkkk = false;
if (pageRatio {
hhhhhh = hhhhhh + 2 \* ffffff;
} // End of the function
} // end if
function flipDone()
{
this.onEnterFrame = NULL;
llllll.\_alpha = 100;
mmmmmm.\_alpha = 100;
if (hhhhhh != 0.500000)
{
mmmmmm.\_visible = 1;
} // end if
if (hhhhhh != iiiiii + 0.500000)
{
llllll.\_visible = 1;
} // end if
if (pageRatio == 0)
{
zzzzzz.removeMovieClip();
vvvvvv.removeMovieClip();
aaa111.removeMovieClip();
wwwwww.removeMovieClip();
ccc111.removeMovieClip();
xxxxxx.removeMovieClip();
if (ffffff == 1)
{
uuuuuu.removeMovieClip();
}
else
{
tttttt.removeMovieClip();
} // end if
}
else
{
bbb111.removeMovieClip();
if (ffffff == -1)
{
uuuuuu.removeMovieClip();
}
else
{
tttttt.removeMovieClip();
} // end if
} // end if
yyyyyy.removeMovieClip();
} // End of the function
stop();
\_level0.pagesAbs = this;
var aaaaaa = 250;
var bbbbbb = 350;
var cccccc = aaaaaa + bbbbbb;
var dddddd = bbbbbb / 2 + aaaaaa;
var eeeeee = 16777215;
var ffffff = 1;
var gggggg = 1.500000;
var hhhhhh = 0.500000;
var iiiiii = 10;
var jjjjjj = 0.050000;
var kkkkkk = false;
this.attachMovie(“cornerButton”, “llllll”, 11);
with (llllll)
{
\_x = aaaaaa;
\_y = -aaaaaa;
} // End of with
this.attachMovie(“cornerbutton”, “mmmmmm”, 12);
with (mmmmmm)
{
\_x = -aaaaaa;
\_y = -aaaaaa;
\_xscale = -100;
} // End of with
nnnnnn(gggggg, ffffff);
\_y = \_y + dddddd
mmmmmm.onPress = function ()
{
startFlip(-1);
} // End of the function
mmmmmm.onReleaseOutside = function ()
{
flipRelease();
} // End of the function
mmmmmm.onRelease = function ()
{
flipRelease();
} // End of the function
llllll.onPress = function ()
{
startFlip(1);
} // End of the function
llllll.onReleaseOutside = function ()
{
flipRelease();
} // End of the function
llllll.onRelease = function ()
{
flipRelease();
} // End of the function
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 28, 2003, 12:09am UTC](https://forum.kirupa.com/t/flash-book-effect/38199/5 "2003-12-28T00:09:07Z")
See the attached file, it’s as far as I got doing a tutorial which I have now handily lost/forgotten where it was from. Maybe someone can make sense of it and write a tute that explains the logic/entire process in understandable language. I would still love to understand the workings.
enjoy
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 28, 2003, 2:07am UTC](https://forum.kirupa.com/t/flash-book-effect/38199/6 "2003-12-28T02:07:30Z")
Search Flashkit tuts/movies. I coulda sworn they had one :).
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 28, 2003, 9:35pm UTC](https://forum.kirupa.com/t/flash-book-effect/38199/7 "2003-12-28T21:35:21Z")
Afer seing this for the first time I just looked for a flip book tuturial
and found one 🙂 intrested are you well take a look at this one 🙂
[http://www.flashkit.com/movies/Effects/Eye\_Candy/Book\_Fli-Jerry\_M-5973/index.php](http://www.flashkit.com/movies/Effects/Eye_Candy/Book_Fli-Jerry_M-5973/index.php)
Regards Barrie
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 28, 2003, 10:14pm UTC](https://forum.kirupa.com/t/flash-book-effect/38199/8 "2003-12-28T22:14:06Z")
Thanks guys. Still working on it…The corners are made of isometric scaling (0%-100%) of the torn part of the page | with a rewinding action. It works!
(i’m talking about the show-me-dq book)
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 28, 2003, 11:42pm UTC](https://forum.kirupa.com/t/flash-book-effect/38199/9 "2003-12-28T23:42:33Z")
Also found this you can add to your html code.
[http://www.dynamicdrive.com/dynamicindex14/bookflip.htm](http://www.dynamicdrive.com/dynamicindex14/bookflip.htm)
Regards Barrie