interactive
Dynamic Text on a Plane
No, this text is not selectable. You can only click, set focus, and then start typing.
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 | package { import flash.events.Event; import flash.events.MouseEvent; import org.papervision3d.materials.MovieMaterial; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.view.BasicView; [SWF(width="900", height="480", backgroundColor="#000000", frameRate="31")] public class DynamicText extends BasicView { private var movieClip:square; private var plane:Plane; public function DynamicText() { camera.focus = 100; camera.zoom = 10; movieClip = new square(); var movieMaterial:MovieMaterial = new MovieMaterial(movieClip); movieMaterial.animated = true; movieMaterial.precise = true; movieMaterial.smooth = true; movieMaterial.doubleSided = true; plane = new Plane(movieMaterial); scene.addChild(plane); startRendering(); viewport.addEventListener(MouseEvent.CLICK, viewport_clickHandler); } protected function viewport_clickHandler(event:MouseEvent):void { stage.focus = movieClip.myTextField; } override protected function onRenderTick(event:Event=null):void { super.onRenderTick(event); plane.rotationY++; } } } |
How to click on stuff in Papervision3D – Viewport, ViewportLayers, InteractiveScene3DEvent, Mouse3D, and MovieMaterial Buttons
I’ve been super busy the past couple months and tomorrow I’m heading to Alaska to take a week-long vacation. I thought to myself, “this isn’t fair to my readers, I haven’t provided any quality original content on pv3d.org in a long time.” So, I took a couple hours tonight to answer pretty much every question on interacting with stuff in Papervision3D in the following five videos. That’s right, five videos explaining the ins and outs of working with interactivity events in Papervision3D. Just don’t say I never did anything nice for you
Click to view the video in a pop-up. Right-click and “save as” to download the video to your hard drive.
Watch Part 1 on the Viewport
Download part 1 source
Watch Part 2 on ViewportLayers
Download part 2 source
Watch Part 3 on InteractiveScene3DEvent
Download part 3 source
Watch Part 4 on Mouse3D
Download part 4 source
Watch Part 5 on Buttons on MovieMaterials
Download part 5 source
Grid
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 | package { import de.polygonal.ds.Array2; import de.polygonal.ds.Iterator; import flash.display.DisplayObject; import flash.display.Shape; import gs.TweenMax; import org.papervision3d.events.InteractiveScene3DEvent; import org.papervision3d.materials.MovieMaterial; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.view.BasicView; [SWF(width="900", height="480", backgroundColor="#ffffff", frameRate="60")] public class Grid extends BasicView { private static const GRID_COLS:int = 9; private static const GRID_X_SPACING:Number = 200; private static const CENTER_X_OFFSET:Number = GRID_COLS * GRID_X_SPACING / 2 - GRID_X_SPACING / 2; private static const GRID_ROWS:int = 4; private static const GRID_Y_SPACING:Number = 200; private static const CENTER_Y_OFFSET:Number = GRID_ROWS * GRID_Y_SPACING / 2 - GRID_Y_SPACING / 2; private var grid:Array2 = new Array2(GRID_ROWS, GRID_COLS); private var selectedPlane:Plane; public function Grid() { viewport.interactive = true; createGrid(); startRendering(); } private function createGrid():void { for(var i:int = 0; i < GRID_COLS; i++) { for(var j:int = 0; j < GRID_ROWS; j++) { var randomColor:Number = Math.random() * 0xffffff; var shape:Shape = new Shape(); with(shape) { graphics.beginFill(randomColor); graphics.drawRect(0, 0, 50, 50); graphics.endFill(); } var material:MovieMaterial = new MovieMaterial(shape); //animated needs to be true to tween the color material.animated = true; material.doubleSided = true; material.interactive = true; var plane:Plane = new Plane(material, 100, 100); plane.name = "plane_" + i + "_" +j; plane.x = i * GRID_X_SPACING - CENTER_X_OFFSET; plane.y = j * GRID_Y_SPACING - CENTER_Y_OFFSET; plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler); //push planes references into our collection grid.set(j, i, plane); scene.addChild(plane); } } } private function plane_objectClickHandler(event:InteractiveScene3DEvent):void { var clickedPlane:Plane = Plane(event.target); if(selectedPlane != clickedPlane) { if(selectedPlane) TweenMax.to(selectedPlane, 1, {scale:1, rotationY:0}); selectedPlane = Plane(event.target); TweenMax.to(selectedPlane, 1, {scale:2, rotationY:180}); var randomColor:Number = Math.random() * 0xffffff; //loop through our grid using the iterator of Array2 var itr:Iterator = grid.getIterator(); itr.start(); while(itr.hasNext()) { if(itr.data != null) { var plane:Plane = Plane(itr.data); //We don't tween the color of the selectedPlane if(plane != selectedPlane) { //tint the color of the movie asset in the material var movieClip:DisplayObject = MovieMaterial(plane.material).movie; TweenMax.to(movieClip, 1, {tint:randomColor}); } } itr.next(); } } } } } |
Stacked Planes
Compare this to the last post to see how similar they are.
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 de.polygonal.ds.DLinkedList; import de.polygonal.ds.DListNode; import gs.TweenMax; import org.papervision3d.events.InteractiveScene3DEvent; 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 StackedPlanes extends BasicView { private static const X_SPACING:Number = 400; private static const Z_SPACING:Number = 400; private static const NUMBER_OF_PLANES:int = 10; private static const TIME:Number = .5; private var planeList:DLinkedList = new DLinkedList(); public function StackedPlanes() { viewport.interactive = true; for(var i:int = 0; i < NUMBER_OF_PLANES; i++) { var randomColor:Number = Math.random() * 0xffffff; var colorMaterial:ColorMaterial = new ColorMaterial(randomColor); colorMaterial.interactive = true; var plane:Plane = new Plane(colorMaterial, 400, 400, 4, 4); plane.x = i * X_SPACING; plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler); planeList.append(plane); scene.addChild(plane); } flow(plane); startRendering(); } private function plane_objectClickHandler(event:InteractiveScene3DEvent):void { var plane:Plane = Plane(event.target); flow(plane); } private function flow(plane:Plane):void { var xPosition:Number = 0; var zPosition:Number = 0; TweenMax.to(plane, TIME, {x:xPosition, z:zPosition, rotationY:0}); var current:DListNode = planeList.nodeOf(plane).node; var walkLeft:DListNode = current.prev; while(walkLeft) { plane = Plane(walkLeft.data); xPosition += X_SPACING; zPosition += Z_SPACING; TweenMax.to(plane, TIME, {x:xPosition, z:zPosition}); walkLeft = walkLeft.prev; } xPosition = 0; zPosition = 0; var walkRight:DListNode = current.next; while(walkRight) { plane = Plane(walkRight.data); xPosition -= X_SPACING; zPosition -= Z_SPACING; TweenMax.to(plane, TIME, {x:xPosition, z:zPosition}); walkRight = walkRight.next; } } } } |
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
- FDT Theme Designer
- 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
Recent Comments
- شقق للبيع في الاردن on Moving to johnlindquist.com
- Annakhan006 on Augmented Reality – Recursive Webcam
- Yarout on Augmented Reality – Recursive Webcam
- Vivon on about
- Josh @ Wall Stickers on Moving to johnlindquist.com
- list of lpn courses on SpringCamera3D and Driving a Car
- rn to bsn in montgomery al on archive
- PowerPoint Recovery on Eclipse Theme Designer Preview
- cheat mw3 on Test if a plane is within the view of the camera (aka testing if culled)
- Goa Hotels on Looking around the inside of a Sphere
Categories
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| « May | ||||||
| 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 | |||
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




