Check Out the screencast – Made with the awesome Jing!
How I built it…
Just finished the first draft of a site for photographer Trent Bailey… I essentially got free reign on this for the page transitions – just the basic layout was to be kept the same… so I sat down and tried to figure out something I wanted to try out for a while… a 3d page transition.
For this I had a few things to figure out before I started the project – One of them being what method to use for the transition; A) use f10′s new 3D api, B) use papervision and it’s interactive material method, or C), use flash’s Bitmap data to snap each page then add it to a 3d engine to make the flip then remove from the stage. In the end I choose the last method, because using f10′s 3d api would mean using f10 which I wasdn’t too keen on as it’ll be a while before everyone is using it. And I didn’t use papervision because even adding your displayObject to a plane as an interactiveMoveMaterial doesn’t have complete functionality (for example, you can’t use input text in them). So I went with the snapshot method… Now I needed a 3D engine.
After building a working example in Papervision on which I’d had experience in the past, I decided to look at five3D which was a much lighter engine – after all using papervision just to snap a page, flip it and remove it would be akin to driving a car down your driveway to pick up the papers.
Anyway… I have so much good to say about five3D – it made things an absolute breeze to build the pageFlipper – it’s developer Mathieu Badimon has made a great job of it…
Right, on to how I made it! Now baring in mind I built this as a proof of concept to myself – so it’s not all tidied and put into a class – I built this on… the timeline! sshh, I know….
CODE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| //FLIP PAGES
function flipPages(originalMC:MovieClip, destinationMC:MovieClip, axis:String = "X"):void{
if(_pageInTransition == false){
//Note: Make sure you import the five3D classes needed.
_pageInTransition = true;
//init
destinationMC.visible = false;
//Snapshot mc's
//Create bitmapData for both the mc's
var imageOriginalBMD:BitmapData = new BitmapData(720,470, false, 0xFFFFFFFF);
var imageDestinationBMD:BitmapData = new BitmapData(720,470, false, 0xFFFFFFFF);
//Draw mc into BitMaps
imageOriginalBMD.draw(originalMC);
imageDestinationBMD.draw(destinationMC);
//The Flip
// We create a new Scene3D named "scene", center it and add it to the display list.
var scene:Scene3D = new Scene3D();
scene.x = 720 / 2;
scene.y = 470 / 2;
main.pages.addChild(scene);
//Create a Sprite3D holder - to hold our bitmaps
var bitmapHolder:Sprite3D = new Sprite3D();
bitmapHolder.childrenSorted = true;
scene.addChild(bitmapHolder);
//Add out Bitmaps to it
var originalBitmap3D:Bitmap3D = new Bitmap3D(imageOriginalBMD);
originalBitmap3D.x = - 720 / 2;
originalBitmap3D.y = - 470 / 2;
originalBitmap3D.z = 0;
bitmapHolder.addChild(originalBitmap3D);
var destinationBitmap3D:Bitmap3D = new Bitmap3D(imageDestinationBMD);
//bitmapHolder.addChild(destinationBitmap3D);
//Remove Original MC's
originalMC.visible = false;
if(axis == "Y"){
TweenLite.to(bitmapHolder, 0.3, {rotationY:90, alpha:0, onComplete:addDestination});
destinationBitmap3D.rotationY = 180;
destinationBitmap3D.x = 720 / 2;
destinationBitmap3D.y = - 470 / 2;
destinationBitmap3D.z = 0;
} else {
TweenLite.to(bitmapHolder, 0.3, {rotationX:90, alpha:0, onComplete:addDestination});
destinationBitmap3D.rotationX = 180;
destinationBitmap3D.x = - 720 / 2;
destinationBitmap3D.y = 470 / 2;
destinationBitmap3D.z = 0;
}
function addDestination(){
bitmapHolder.removeChild(originalBitmap3D)
bitmapHolder.addChild(destinationBitmap3D);
if(axis == "Y"){
TweenLite.to(bitmapHolder, 0.3, {rotationY:180, alpha:1, onComplete:finishFlip});
} else {
TweenLite.to(bitmapHolder, 0.3, {rotationX:180, alpha:1, onComplete:finishFlip});
}
}
function finishFlip(){
bitmapHolder.removeChild(destinationBitmap3D);
destinationMC.visible = true;
_pageInTransition = false;
}
} else {
trace("Already in transition!");
}
/*//Add to Stage
addChild(imageOriginalBM);
addChild(imageDestinationBM);*/
} |
Now you might notice a bit of trickery here… what I had originally programmed was that the two snapshots of the pages would be put back to back, then all you’d need to do would be rotate the Sprite3D in which they both were held… well, I’m not too sure if this is a bug with five3d, or something went wrong with my code (probably the latter)… but everytime you rotated, the backMc, or Destination mc would disappear. So I ended up having the front mc rotate 90, then remove it, and adding the back mc and rotate that from -90 to 0… if anyone has any luck figuring it out, gimme a comment!
Anyway, hope this helps anyone, but I had fun doing it!
Read more
– I’ve there’s enough demand I might clean the code up a bit and release it on here…
