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.
can someone give me an insight into this technique cos its impressive.
kash (the beginner)
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.
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:
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
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
Search Flashkit tuts/movies. I coulda sworn they had one :).
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
Regards Barrie
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)
Also found this you can add to your html code.
http://www.dynamicdrive.com/dynamicindex14/bookflip.htm
Regards Barrie