Full Screen Cube

Wednesday, April 8th, 2009 | examples

Click and drag the cube to spin (this simple example is based off of that sweet Compiz rotate cube effect):


source

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
package
{
	import flash.display.Bitmap;
	import flash.events.MouseEvent;
 
	import gs.TweenMax;
	import gs.easing.Quad;
 
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="0xffffff", frameRate="31")]
	public class FullScreenCube extends BasicView
	{
		[Embed(source="/assets/car.jpg")]
		private var carAsset:Class;
 
		[Embed(source="/assets/back.jpg")]
		private var backAsset:Class;
 
		[Embed(source="/assets/brabus.jpg")]
		private var brabusAsset:Class;
 
		[Embed(source="/assets/ferrari.jpg")]
		private var ferrariAsset:Class;
 
		private var cube:Cube;		
		private var mouseDownX:Number = 0;
		private var targetRotation:Number = 0;
 
		public function FullScreenCube()
		{
			super(900, 480);
 
			opaqueBackground = 0x000000;
			camera.focus = 100;
			camera.zoom = 10;
 
			var materialsList:MaterialsList = new MaterialsList();
			materialsList.addMaterial(createBitmapMaterialFromAsset(carAsset), "front");
			materialsList.addMaterial(createBitmapMaterialFromAsset(backAsset), "back");
			materialsList.addMaterial(createBitmapMaterialFromAsset(brabusAsset), "left");
			materialsList.addMaterial(createBitmapMaterialFromAsset(ferrariAsset), "right");
			materialsList.addMaterial(new ColorMaterial(0xffffff), "top");
			materialsList.addMaterial(new ColorMaterial(0xffffff), "bottom");
 
			cube = new Cube(materialsList, 900, 900, 480);
			cube.z = 450;
			scene.addChild(cube);
 
			startRendering();
 
			addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		}
 
		private function createBitmapMaterialFromAsset(asset:Class):BitmapMaterial
		{
			var bitmap:Bitmap = new asset() as Bitmap;
			var material:BitmapMaterial = new BitmapMaterial(bitmap.bitmapData, true);
 
			return material;
		}
 
		private function mouseDownHandler(event:MouseEvent):void
		{
			mouseDownX = event.localX;
		}
 
		private function mouseUpHandler(event:MouseEvent):void
		{
			var currentMouseX:Number = event.localX;
			if(currentMouseX < mouseDownX)
			{
				targetRotation += 90;
 
			}
			else
			{
				targetRotation -= 90;
			}
			TweenMax.to(cube, .5, {rotationY:targetRotation, z:450, bezierThrough:[{z:700}], ease:Quad.easeInOut});
		}
	}
}

Tags: , ,

  • Arindam Mojumder
    how can I add a sprite or MovieClip to this class. If I extends the BAsicView class and trying to add a Sprite
    like below method:

    ...... starting ......... public function FullScreenCube

    var sp:Sprite = new Sprite();
    scene.addChild(sp);

    I know it will work Properly if I use DisplayObject3d, but just want to know is there any way to
    add a Sprite or MovieClip dynamically to scene???

    I love pv3d but some time it hurt me a lot due to some unexpected code error. I just can't freely writing the code as like normal as3.0. I think in pv3d there are so many boundation.

    Please guide me. Actually I want to make an application like this links.

    http://www.citroen.co.uk/home/#/home/

    see the above links
    how can I create this kind of slider? If there is different sizes images? I have tried carousel method but facing problem to x,yrotation and z axis problem.

    Here is my demo link :http://www.demo.talash.net/~demo/design/ria-demo/downloadCenter/pv3d/
    Here is my source code:http://www.demo.talash.net/~demo/design/ria-demo/downloadCenter/pv3d/pv3d.zip

    Arindam [ arindam.mojumder@gmail.com ]
  • roberttimes
    Hi, I got the source and it's working fine except the cube/images don't resize to fullscreen as I resize the stage. How would that be accomplished?

    I tried to put a stage RESIZE function in there but the cube stays at the same size of 900x480.
    Does anybody know how can I make this truly fullscreen? How can the cube resize to stage dimensions after the SWF is resized?
  • Kingler
    Great effect! I was looking for something like this. I'm new to AS3. How I would I invoke this effect with the link bar component in flex 3?
  • Hey man, thanks a bunch for this post, it was exactly what I needed to make a rotating AS3 banner for my store. You can check it out here: http://peauproductions.com/swf/banner_cube_rota...
  • Hadrian
    hi , i has download the source file and code, but when i export the code to flash , it mark this error help please!!!!!
  • hi,

    very nice work! I search for transition where the complete screen
    switch like in this example. And on stage Resize it updates his width and height.

    Can anybody help??
  • oh.... love PV3D.. enbrace john!
  • felix
    sweet transition! i like the Z bounce out/in.
blog comments powered by Disqus

Search

Recommended Books

Speaking at FITC Toronto

Recent Comments

 

April 2009
M T W T F S S
« Mar   May »
 12345
6789101112
13141516171819
20212223242526
27282930  

Preferred Video Tutorial Resolution

  • 1024x768 (53%, 85 Votes)
  • 1280x1024 (15%, 24 Votes)
  • 1920x1080 (15%, 24 Votes)
  • 800x600 (13%, 20 Votes)
  • 480x320 (4%, 6 Votes)
  • 640x480 (0%, 2 Votes)

Total Voters: 160

Loading ... Loading ...