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
- 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
- MorphController – Mighty Morphing Papervision3D
- End dump
- Test if a plane is within the view of the camera (aka testing if culled)
- Materials Reference
Recent Comments
- BAM5 on haXe Tutorial
- AlexG on Finding 2D Coordinates of a DisplayObject3D
- Josh on ActionScript 3 – Model View Controller (MVC)
- martin everett on requests
- martin everett on requests
- lillacska on Dragging Spheres
- Guy Ritchie on MXML without the Flex framework
- Pedro on ActionScript 3 – Namespaces
- daveevolve on AS3DMod Perlin Noise
- sebomoto on haXe Tutorial
Categories
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| « Jan | ||||||
| 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




