examples

Moving a Texture inside of a Plane

Saturday, May 23rd, 2009 | examples | Comments

This examples shows how to update the uvs on a plane which results in an image scrolling vertically on the plane. As you can see from the code, we’re only updating the v’s. If you want the image to move hortizontally, try swapping the v’s with u’s :)


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

package
{
	import flash.display.Bitmap;
	import flash.events.Event;
 
	import org.papervision3d.core.geom.renderables.Triangle3D;
	import org.papervision3d.core.proto.MaterialObject3D;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#000000", frameRate="31")]
	public class MovingATexture extends BasicView
	{
		[Embed(source="assets/image.jpg")]
		private var bannerAsset:Class;
 
		private static const IMAGE_WIDTH:Number = 900;
		private static const IMAGE_HEIGHT:Number = 480;
 
		private var plane:Plane;
 
		public function MovingATexture()
		{
			super(900, 480);
			opaqueBackground = 0x000000;
 
			var bitmap:Bitmap = new bannerAsset() as Bitmap;
			var bitmapMaterial:MaterialObject3D = new BitmapMaterial(bitmap.bitmapData, true);
			bitmapMaterial.doubleSided = true;
			bitmapMaterial.tiled = true;
			plane = new Plane(bitmapMaterial);
 
			scene.addChild(plane);
 
			startRendering();
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
			plane.yaw(1);
 
			for each(var triangle3D:Triangle3D in plane.geometry.faces)
			{
				triangle3D.uv0.v += .01;
				triangle3D.uv1.v += .01;
				triangle3D.uv2.v += .01;
			}
 
			BitmapMaterial(plane.material).resetUVS();
 
			super.onRenderTick(event);
		}
	}
}

Tags: ,

The Spotlight Effect (Dimming the unselected)

Saturday, May 16th, 2009 | ActionScript 3, examples | Comments

Sorry for the long bout of blogging silence. I’m still trying to get used to my new traveling schedule.


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
89
90
91
92
93
94
95
96
97
98
99
100
101

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.utils.Dictionary;
 
	import gs.TweenMax;
	import gs.plugins.ColorMatrixFilterPlugin;
	import gs.plugins.RemoveTintPlugin;
	import gs.plugins.TintPlugin;
	import gs.plugins.TweenPlugin;
 
	[SWF(width="400", height="400", backgroundColor="0x000000", frameRate="30")]
	public class Spotlight extends Sprite
	{
		private static const CIRCLE_RADIUS:Number = 10;
 
		private static const COLUMN_MAX:uint = 10;
		private static const ROW_MAX:uint = 10;
 
		private static const COLUMN_SPACING:Number = 20;
		private static const ROW_SPACING:Number = 20;
 
		private static const PADDING_X:Number = 110;
		private static const PADDING_Y:Number = 110;
 
		private var spotlightDict:Dictionary = new Dictionary();
		private var sprites:Array = [];
 
		private var isSpotlit:Boolean = false;
 
		public function Spotlight()
		{
			//@see http://blog.greensock.com/v11Beta/
			TweenPlugin.activate([ColorMatrixFilterPlugin]);
 
			var total:uint = COLUMN_MAX * ROW_MAX;
			for(var i:int = 0; i < total; i++)
			{
				var sprite:Sprite = new Sprite();
				with(sprite.graphics)
				{
					beginFill(0xcc0000);
					drawCircle(0, 0, CIRCLE_RADIUS);
					endFill();
				}
 
				sprite.x = COLUMN_SPACING * (i % COLUMN_MAX) + PADDING_X;
				sprite.y = ROW_SPACING * Math.floor(i / ROW_MAX) + PADDING_Y;
 
				addChild(sprite);
 
				sprites.push(sprite);
 
				sprite.addEventListener(MouseEvent.MOUSE_OVER, sprite_mouseOverHandler);
			}
 
			stage.addEventListener(MouseEvent.CLICK, stage_clickHandler);
		}
 
		protected function sprite_mouseOverHandler(event:MouseEvent):void
		{
			var sprite:Sprite = event.target as Sprite;
			var highlight:TweenMax = new TweenMax(sprite, 0, {colorMatrixFilter:{colorize:0xffffff, brightness: 5}});
			spotlightDict[sprite] = true;
		}
 
		protected function stage_clickHandler(event:MouseEvent):void
		{
			if(isSpotlit)
			{
				clear();
			}
			else
			{
				dimUnselected();
			}
 
			isSpotlit = !isSpotlit;
		}
 
		protected function clear():void
		{
			for each(var sprite:Sprite in sprites)
			{
				TweenMax.to(sprite, 0, {colorMatrixFilter:{colorize:0x000000, amount:0}});
				delete spotlightDict[sprite];
			}
		}
 
		protected function dimUnselected():void
		{
			for each(var sprite:Sprite in sprites)
			{
				if(!spotlightDict[sprite])
				{
					TweenMax.to(sprite, .5, {colorMatrixFilter:{colorize:0x000000, amount:0.7}});
				}
			}
		}
	}
}

Tags:

There’s more than one way to skin a ScrollBar

Tuesday, April 14th, 2009 | examples | Comments

This is a little off-topic from my usual Papervision3D posts, but it’s my blog and I’ll post what I want to ;)

If you’ve ever tried skinning a scrollbar in Flex, you’ve probably learned it can be quite the pain in the rear. Using Degrafa (probably my favorite open-source Flex project), I put together a little package to help make the process a little easier. This example is still pretty advanced if you’re new to skinning (especially if you’re new to Degrafa), but don’t be afraid to start playing with the code to see what happens when you make your own changes.

Get Adobe Flash player

View Source
Download Source

Tags: , ,

Sliced Cube

Thursday, April 9th, 2009 | examples | Comments

This is kind of combination of my last two examples which turned out pretty nicely.

I’m sorry the code is a big pile of crap. I’m too lazy right now to clean it up :)


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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.geom.Rectangle;
 
	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 SlicedCube 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 mouseDownX:Number = 0;
		private var targetRotation:Number = 0;
 
		private var NUM_SLICES:int = 5;
 
		private var cubes:Array = [];
 
		public function SlicedCube()
		{
			super(900, 480);
 
			opaqueBackground = 0x000000;
			camera.focus = 100;
			camera.zoom = 10;
			camera.ortho = false;
 
			for(var i:int = 0; i < NUM_SLICES; i++)
			{
				var materialsList:MaterialsList = new MaterialsList();
				var sliceWidth:Number = 900 / NUM_SLICES;
				var sliceX:Number = sliceWidth * i;
 
 
				materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(carAsset, sliceX, sliceWidth, true), "front");
				materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(backAsset, sliceX, sliceWidth), "back");
				materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(brabusAsset, sliceX, sliceWidth), "top");
				materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(ferrariAsset, sliceX, sliceWidth, true), "bottom");
				materialsList.addMaterial(new ColorMaterial(0xffffff), "right");
				materialsList.addMaterial(new ColorMaterial(0xffffff), "left");
 
				var cube:Cube = new Cube(materialsList, sliceWidth, 480, 480);
				cube.x = sliceX - 450 + sliceWidth / 2;
				cube.z = 240;
 
				scene.addChild(cube);
 
 
				cubes.push(cube);
			}
 
			startRendering();
 
			addEventListener(MouseEvent.CLICK, mouseDownHandler);
		}
 
		private function createSlicedBitmapMaterialFromAsset(asset:Class, sliceX:Number, sliceWidth:Number, isFlipped:Boolean = false):BitmapMaterial
		{
			var bitmap:Bitmap = new asset() as Bitmap;
			var bitmapData:BitmapData = new BitmapData(sliceWidth, 480, false, 0xcc0000);
			if(isFlipped)
			{
				var sliceMatrix:Matrix = new Matrix();
				sliceMatrix.translate(-180, -240);
				sliceMatrix.rotate(Math.PI);
				sliceMatrix.translate(sliceX, 240);
				bitmapData.draw(bitmap, sliceMatrix);
			}
			else
			{
				bitmapData.copyPixels(bitmap.bitmapData, new Rectangle(sliceX, 0, sliceWidth, 480), new Point());
			}
			var material:BitmapMaterial = new BitmapMaterial(bitmapData, true);
 
			return material;
		}
 
		private function mouseDownHandler(event:MouseEvent):void
		{
			targetRotation += 90 % 360;
			cubes.forEach(cubes_forEachCallback);
		}
 
		private function cubes_forEachCallback(cube:Cube, index:int, array:Array):void
		{
			index++;
			var time:Number = .3 * index;
			TweenMax.to(cube, time, {rotationX:targetRotation, ease:Quad.easeInOut});
		}
	}
}

Tags: , , ,

« Previous Entries Next Entries »

 Subscribe to the pv3d.org feed!

Follow me on Twitter

Visit the Papervision3D Forum

Search

Recommended Books

Speaking at FITC Toronto

 

May 2012
M T W T F S S
« May    
 123456
78910111213
14151617181920
21222324252627
28293031  

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 ...