Archive for February, 2009
AS3 Binding without the Flex Framework
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
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; } } } |
Ribbons
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.
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); } } } |
Carousel with Forward Facing Planes
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.
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)
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
Search
Recommended Books
Speaking at FITC Toronto
Recent Posts
- Moving to johnlindquist.com
- AsyncCommand with Robotlegs, Signals, Flight, MinimalComps
- Search Widget – Robotlegs, Signals, Flight, Minimal Comps, Yahoo Astra
- FDT Super Awesome March Deal
- haXe Tutorial
- AS3 Signals Tutorial
- Preferred Video Tutorial Resolution?
- TweenMax – Tweening a timeline (Advanced Tweening)
- Robotlegs + Flight + Union Platform
- Back in the saddle
- Eclipse Theme Designer Preview
- RobotLegs Hello World Video Tutorial
- 10 Things Every Senior Flash Developer Should Know
- Efflex – 3D Effects for Flex
- MorphController – Mighty Morphing Papervision3D
Recent Comments
- Domain register on Preferred Video Tutorial Resolution?
- Webdesign on FDT Super Awesome March Deal
- Mortgage loans on Preferred Video Tutorial Resolution?
- Mortgage loans on Looking around the inside of a Sphere
- Mortgage loans on Materials Reference
- Mortgage loans on MorphController – Mighty Morphing Papervision3D
- Domain registration on MorphController – Mighty Morphing Papervision3D
- Sarah on Augmented Reality – Recursive Webcam
- Biep458 on MorphController – Mighty Morphing Papervision3D
- muhammad khusaini on End dump
Categories
Archives
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


