ScrollPane in Papervision3D

Question

I am having major issues with a ScrollPane component in Papervision3D. This issue has been brought up at a couple of different forums, but not solved:

• http://osflash.org/pipermail/papervision3d%5Fosflash.org/2009-March/029503.html
• http://www.nabble.com/ScrollPane-doesn%27t-size-or-display-properly-td22302394.html

I have tried dynamically creating a ScrollPane, as well as dragging one onto the stage and it always appears at its default size (100, 100) when added to a MovieClip in a PaperVision3D environment. I can't even get a Tween to work on it's size.

Answer 1

Ok, here goes.

I've tried to get it working with a MovieAssetMaterial, no luck. If I trace the stage inside a MovieAssetMaterial, the stage is null, and I'm guessing that's why the scrollpane wouldn't behave properly. It's a container, therefore it needs the stage to set itself up properly.

I have managed to get a scroll pane 200x200 on a papervision plane and interactive with a bit of workarounds. Here's my code:

package{

    import org.papervision3d.*;
    import org.papervision3d.view.*;
    import org.papervision3d.cameras.*;
    import org.papervision3d.materials.*;
    import org.papervision3d.objects.*;
    import org.papervision3d.objects.primitives.*;
    import org.papervision3d.scenes.*;
    import org.papervision3d.render.*;

    import flash.display.*;
    import flash.events.*;

    import fl.controls.*;
    import fl.containers.*;

    public class PV3DScrollPane extends MovieClip{

     private var viewport:Viewport3D;
     private var camera:Camera3D;
     private var scene:Scene3D;
     private var renderer:BasicRenderEngine;
     private var plane:Plane;

     public function PV3DScrollPane(){
      init3D();
     }

     private function init3D():void
        {    
      //setup 3d
            viewport = new Viewport3D(1024, 768, false, true);
            addChild(viewport);
            camera = new Camera3D();
            camera.z = -500;
            camera.zoom = 1;
            camera.focus = 500;
            camera.target = DisplayObject3D.ZERO;
      scene = new Scene3D();
            renderer = new BasicRenderEngine();
      //setup plane
      plane = makePlane();
      stage.addEventListener(Event.ENTER_FRAME, loop);
        }

        public function makePlane():Plane
        {
      //setup scroll pane
      var sp:ScrollPane = new ScrollPane();
      addChild(sp);
      sp.x = 1000;//hide it off stage, visible doesn't help much
      sp.source = 'http://www.helpexamples.com/flash/images/image1.jpg';
      sp.setSize(200, 200);
      //setup material & plane
            var mat:MovieMaterial = new MovieMaterial(sp, false, true, false);
      mat.interactive = true;
      var plane:Plane = new Plane(mat, 0, 0, 10, 10);
            scene.addChild(plane);
      return plane;
        }

        private function loop(evt:Event):void
        {
       //plane.rotationY++;
                renderer.renderScene(scene, camera, viewport);
        }
    }
}

And the explanations: I've tried using BasicView, but I couldn't get the same results so I used the oldschool way of creating the scene,camera, rendered and viewport. Since ScrollPane needs the stage, I've added it to the stage then set its size. The I've created a MovieMaterial using the ScrollPane, and set its interactivity to true. I've 'hidden' the component by placing off stage. Setting visible to false got me back to the 100x100 issue.

I've google a bit because I remembered UI Components used to work with papervision. And that is true, they used to work. Here is the post I remembered. Blitz Agency has a similar post a while back as well. You can find InteractiveMovieMaterial.as if you google for it, but it doesn't work with the current papervision version, as there is no drawFace3D method anymore, things have changed a bit. After I made the fix I found a newer (2008) blog post on John Grden's website about this issue. There is a similarity in the approach, but I didn't go through all that trouble yet.

Hope this helps!