Archive for February, 2009

AS3 Binding without the Flex Framework

Wednesday, February 18th, 2009 | examples | Comments

This example relies on the Flight Framework (included in the source) developed by my good friends Tyler, Rob, and Jacob. You can expect to see more on flight here in the future.

You can read more details about this custom binding here: http://www.xtyler.com/code/177

View demo
Download 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
package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.events.TimerEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.utils.Timer;
 
	import flight.binding.Binding;
	import flight.events.PropertyEvent;
 
	[SWF(backgroundColor="#ffffff")]
	public class BindingTest extends Sprite
	{
		private var sourceBinding:Binding;
 
		public var sourceText:TextField = new TextField();
		public var targetText:TextField = new TextField();
 
		private var isTargetTextBound:Boolean = false;
 
		//as3 binding requires a getter/setter for the property you want to bind to
		private var _source:Number = 0;
		public function get source():Number
		{
			return _source;
		}
 
		public function set source(value:Number):void
		{
			var oldValue:Number = _source;
			_source = value;
			//you need to dispatch an event to indicate the binding source has changed
			PropertyEvent.dispatchChange(this, "source", oldValue, _source);
		}
 
		public function BindingTest()
		{
			//set up text for visual display
			var textFormat:TextFormat = new TextFormat("Arial", 20, 0x000000);
			sourceText.defaultTextFormat = textFormat;
			targetText.defaultTextFormat = textFormat;
 
			addChild(sourceText);
			targetText.y = 40;
			addChild(targetText);
 
			//setup source of binding
			sourceBinding = new Binding(this, "source");
			//bind to the first text's "text" property
			sourceBinding.bind(sourceText, "text");
 
			//update with timer			
			var timer:Timer = new Timer(100);
			timer.addEventListener(TimerEvent.TIMER, timer_timerHandler);
			timer.start();
 
			stage.addEventListener(MouseEvent.CLICK, stage_clickHandler);
		}
 
		private function timer_timerHandler(event:TimerEvent):void
		{
			//increment the source
			source++;
		}
 
		private function stage_clickHandler(event:MouseEvent):void
		{
			//bind or unbind to second textField on mouse click
			if(isTargetTextBound)
			{
				sourceBinding.unbind(targetText, "text");
			}
			else
			{
				sourceBinding.bind(targetText, "text");
			}
 
			isTargetTextBound = !isTargetTextBound;
		}
	}
}

Tags:

Ribbons

Tuesday, February 17th, 2009 | examples | Comments

Most of the credit for this post belongs to SoulWire for his Ribbon class.

I made a minor update to the class so the shaded material works after reaching its maximum length. I included the class in the source download.


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
package
{
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.GlowFilter;
 
	import org.papervision3d.core.geom.renderables.Vertex3D;
	import org.papervision3d.core.math.Number3D;
	import org.papervision3d.core.math.Plane3D;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.PhongMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.view.BasicView;
 
	import soulwire.papervision3d.Ribbon3D;
 
	[SWF(width="900", height="480", backgroundColor="#ffffff", frameRate="60")]
	public class Ribbons extends BasicView
	{
		private var light:PointLight3D;
		private var ribbon:Ribbon3D;
		private var planeToDragOn:Plane3D;
		private var n:Number = 0;
		private var sphere:Sphere;
 
		private var cameraPitch:Number = 90;
		private var cameraYaw:Number = 270;
		private var cameraTarget:DisplayObject3D = DisplayObject3D.ZERO;
		private var isOrbiting:Boolean = false;
 
		public function Ribbons()
		{
			viewport.filters = [new GlowFilter(0x000000, 1, 4, 4, 10)];
			camera.z = -500;
			camera.fov = 110;
			planeToDragOn = new Plane3D(new Number3D(0, 0, 1), new Number3D(0,0,0));
 
			light = new PointLight3D();
			light.x = -500;
			light.y = -500;
			light.z = -500;
			var flatshadeMaterial:PhongMaterial = new PhongMaterial(light, 0x000000, 0xcc0000, 10);
			flatshadeMaterial.doubleSided = true;
			ribbon = new Ribbon3D(flatshadeMaterial, 20, 200);
 
			sphere = new Sphere(flatshadeMaterial, 200, 12, 9);
			scene.addChild(sphere);
 
 
			scene.addChild(ribbon);
 
			startRendering();
 
			stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
 
		}
 
		private function mouseDownHandler(event:MouseEvent):void
		{
			isOrbiting = true;
		}
 
		private function mouseUpHandler(event:MouseEvent):void
		{
			isOrbiting = false;
		}
 
 
		override protected function onRenderTick(event:Event=null):void
		{
			var ray:Number3D = camera.unproject(viewport.containerSprite.mouseX, viewport.containerSprite.mouseY);
			ray = Number3D.add(ray, camera.position);
 
			var cameraVertex3D:Vertex3D = new Vertex3D(camera.x, camera.y, camera.z);
			var rayVertex3D:Vertex3D = new Vertex3D(ray.x, ray.y, ray.z);
 
			var intersectPoint:Vertex3D = planeToDragOn.getIntersectionLine(cameraVertex3D, rayVertex3D);
 
			if(isOrbiting)
 			{
				cameraYaw += 1;
				cameraYaw %= 360;
 
				camera.orbit(cameraPitch, cameraYaw, true, camera.target);
				var normal:Number3D = new Number3D(-camera.transform.n13, -camera.transform.n23, -camera.transform.n33);
				planeToDragOn.setNormalAndPoint(normal, new Number3D(0, 0, 0));
 			}
 
			ribbon.x += (intersectPoint.x - ribbon.x) * .2;
			ribbon.y += (intersectPoint.y - ribbon.y) * .2;
			ribbon.z += (intersectPoint.z - ribbon.z) * .2;
 
			ribbon.draw();
			super.onRenderTick(event);
		}
	}
}

Tags:

Carousel with Forward Facing Planes

Monday, February 16th, 2009 | examples, snippets | Comments

Yes, it’s another Carousel post, but people just seem to keep on asking for them.

Instead of going through all the trig, I just used the handy Casa Lib for the circle management. There are some other great utility classes with Casa, so make sure to check it out.


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
package {
	import flash.events.Event;
	import flash.geom.Point;
 
	import org.casalib.math.geom.Ellipse;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#ffffff", frameRate="60")]
	public class CarouselWithForwardPlanes extends BasicView
	{
		private static const NUM_PLANES:int = 10;
		private static const RADIUS:Number = 600;
		private var diameter:Number = RADIUS * 2;
		//defines the carousel (thanks to CASA)
		private var circle:Ellipse = new Ellipse(-RADIUS, -RADIUS, diameter, diameter); 
		private var planes:Array = [];
 
		public function CarouselWithForwardPlanes()
		{
			for(var i:int = 0; i < NUM_PLANES; i++)
			{
				var color:Number = Math.random() * 0xffffff;
				var colorMaterial:ColorMaterial = new ColorMaterial(color);
				var plane:Plane = new Plane(colorMaterial, 150, 150);
				//get the x and y (or z) point based on the current index
				var point:Point = circle.getPointOfDegree(360 / NUM_PLANES * i); 
 
				plane.x = point.x;
				plane.z = point.y;
				planes.push(plane);
 
				scene.addChild(plane);
			}
 
			startRendering();
		}
 
		override protected function onRenderTick(event:Event = null):void
		{
			var n:int = 0;	
			for each(var plane:Plane in planes)
			{
				var degrees:Number = 360 / NUM_PLANES * n;
				var mouseDegrees:Number = viewport.containerSprite.mouseX / 2;
				var totalDegrees:Number = degrees + mouseDegrees;
 
				var point:Point = circle.getPointOfDegree(totalDegrees);
				plane.x = point.x;
				plane.z = point.y;
 
				n++; 
			}			
 
			super.onRenderTick(event);			
		}
	}
}

ActionScript 3 – Model View Controller (MVC)

Wednesday, February 11th, 2009 | ActionScript 3, tutorials, videos | Comments

Click to view the video in a pop-up. Right-click and “save as” to download the video to your hard drive.

Watch Video Tutorial on Model View Controller

Tags:

Search

Recommended Books

Speaking at FITC Toronto

 

February 2009
M T W T F S S
« Jan   Mar »
 1
2345678
9101112131415
16171819202122
232425262728  

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