[Papervision3D] PV3D 2.0 interactive TextInput
Elido Ruiz
elido.ruiz at gmail.com
Fri Sep 12 05:52:07 PDT 2008
great tip, I had the same issue for a bit.
On Thu, Sep 11, 2008 at 6:05 PM, elussich <elussich at gmail.com> wrote:
>
> Hello everyone.
> I faced the same trouble with TextField inputs, and I found a good
> workaround, so now I am be able to type in any text input inside a 3d
> object.
> First of all, you do not need a TextInput component; you can customize your
> text inputs from scratch.
> The key to the whole process is "stage.focus = tf;", where "tf" is your
> TextField.
>
> Since Papervision do not allow any direct input interactivity you will have
> to dispatch a mouse event over the textfield first, a click, mouseover, or
> sthng. Then you can start typing by setting focus to the textfield, and
> voilá...
>
> I will uplaod an example later. Hope you find this useful.
> Cheers,
>
> Esteban
>
>
>
> Thorsten Michelfelder wrote:
> >
> > Hello
> >
> > Thank you for your respons.
> > Meanwhile, I got some professional help from De'Angelo. (Thanks again!)
> >
> > A few things that I possibly made wrong from the beginning:
> > 1) I never used the drawNow() method, not sure what its used for.
> > 2) Obviously, the material needs to be added to
> > the stage. I never did this. How to make it
> > invisible, so that the 3D textinput still works,
> > thats another mystery to solve. (De'Angelo?)
> > 3) I used a native Input Text at first. What is
> > needed, is a TextInput Component.
> > 4) You named already the interactive flags. I did
> > not consider those at the very beginning, but
> > realized very soon that those are a key to the whole functionality.
> >
> > Also, you might want to use:
> > viewport.containerSprite.buttonMode = true; in
> > some way, to make the mouse pointer change.
> >
> > I never worked with Flash/PV3D before, just
> > started out two weeks ago, or so and layed my
> > hands on the alpha release. Not the smartest
> > thing to do, but Im fighting my way through.
> >
> > I though I should just paste my code, hopefully it will be usefull for
> > someone.
> >
> > Hints:
> > Make "singleDay" a simple movieclip as a blue rectangle or something.
> > Make "manipulator" a simple movieclip as a red
> > rectangle or something and place a TextInput
> > component on it. Give it an instance name called "heading".
> > You might want to download and use Tweener.
> >
> > Then, the following code should just run as it is.
> >
> > ---------
> > import flash.events.*;
> >
> > import org.papervision3d.cameras.*;
> > import org.papervision3d.scenes.*;
> > import org.papervision3d.objects.*;
> > import org.papervision3d.objects.special.*;
> > import org.papervision3d.materials.*;
> > import org.papervision3d.materials.special.*;
> > import org.papervision3d.lights.*;
> > import org.papervision3d.render.*;
> > import org.papervision3d.view.*;
> > import org.papervision3d.materials.shaders.*;
> > import org.papervision3d.objects.primitives.*;
> > import org.papervision3d.events.*
> >
> > import classes.caurina.transitions.Tweener;
> >
> >
> >
> > // -----------------------------------------------------------
> > // Global variables
> >
> > // Create a viewport
> > var viewport:Viewport3D = new Viewport3D(500, 500, true, true);
> > // Create a renderer
> > var renderer:BasicRenderEngine = new BasicRenderEngine();
> > // Create a scene
> > var scene:Scene3D = new Scene3D(true);
> > // Create a camera
> > var camera:Camera3D = new Camera3D();
> > // Create camera center
> > var pc:Plane = new Plane();
> >
> > // Variables supporting the functionality
> > var angle:Number = 0;
> > var manipElement:Plane;
> >
> > // Spiral properties
> > const num:int = 90;
> > const numOfRotations:Number = 6;
> > const anglePer:Number = ((Math.PI*2) * numOfRotations) / num;
> > const yOffset:Number = 60;
> > const spiralRadius:Number = 1000;
> > var yPos:Number = 0;
> >
> >
> > // -----------------------------------------------------------
> > // Functions
> >
> > function init()
> > {
> > // Setup of Viewport3D
> > viewport.containerSprite.buttonMode = true;
> > addChild(viewport);
> >
> > // set camera up
> > camera.zoom = 1;
> > camera.focus = spiralRadius-(spiralRadius/10);
> >
> > // set scene center up
> > pc.visible = false;
> > camera.target = pc;
> >
> > // Create the render loop
> > addEventListener(Event.ENTER_FRAME, render);
> > }
> >
> > function setManipulatorElement()
> > {
> > // Manipulator plane
> > var cman:MovieMaterial = new
> > MovieMaterial(new manipulator(), true, true);
> > cman.interactive = true; // This one is a key to make it work.
> > cman.oneSide = false;
> > cman.animated = true;
> > cman.smooth = true;
> > cman.movie['heading'].addEventListener(MouseEvent.CLICK,
> > onTextFieldClick); // This one is a key to make it work.
> > cman.movie['heading'].drawNow();
> >
> > addChild(cman.movie); // This one is a key to make it work.
> >
> > manipElement = new Plane(cman, 400, 200, 4, 4);
> > manipElement.x = 100;
> > manipElement.y = 100;
> > manipElement.z = 100;
> > scene.addChild(manipElement, "manipElement");
> > }
> >
> > function setSpiralElement()
> > {
> > // Create the planes
> > for(var i:uint=0; i<num ; i++)
> > {
> > var cm:MovieMaterial = new
> > MovieMaterial(new singleDay(), true, true, true);
> > cm.oneSide = false;
> > cm.interactive = true;
> > cm.animated = true;
> > cm.smooth = true;
> > cm.addEventListener(MouseEvent.CLICK, onMouseClick);
> > var p:Plane = new Plane(cm, 320, 120);
> > p.x = Math.cos(i * anglePer) * spiralRadius;
> > p.z = Math.sin(i * anglePer) * spiralRadius;
> > p.y = yPos += yOffset;
> > p.rotationY = (-i*anglePer) * (180/Math.PI) + 270;
> > scene.addChild(p, "day");
> >
> > p.addEventListener
> > (InteractiveScene3DEvent.OBJECT_CLICK, onMouseClick);
> > p.addEventListener
> > (InteractiveScene3DEvent.OBJECT_OVER, onMouseOver);
> > p.addEventListener
> > (InteractiveScene3DEvent.OBJECT_OUT, onMouseOut);
> > }
> > }
> >
> >
> >
> > // -----------------------------------------------------------
> > // Event handler functions
> >
> > function onTextFieldClick(e:MouseEvent):void
> > {
> > e.currentTarget.drawNow();
> > var indexT:Number =
> > e.target.getCharIndexAtPoint(e.localX,e.localY);
> > e.target.setSelection(indexT,indexT);
> > }
> >
> > function onMouseClick (e:InteractiveScene3DEvent):void
> > {
> > // Do this only if its not the manipulator
> > if (e.displayObject3D.material.id!=91)
> > {
> > var x =
> > viewport.interactiveSceneManager.currentDisplayObject3D.x;
> > var y =
> > viewport.interactiveSceneManager.currentDisplayObject3D.y;
> > var z =
> > viewport.interactiveSceneManager.currentDisplayObject3D.z;
> > var u =
> > viewport.interactiveSceneManager.currentDisplayObject3D.rotationY;
> > var t = 2;
> >
> >
> > Tweener.addTween(e.displayObject3D.material,{fillAlpha:255,
> > time:t});
> >
> >
> Tweener.addTween(manipElement,{rotationY:u,time:t,transition:"easeoutquint"});
> > Tweener.addTween(manipElement,{y:y-200,
> > time:t, transition:"easeoutquint"});
> > Tweener.addTween(manipElement,{x:x,
> > time:t, transition:"easeoutquint"});
> > Tweener.addTween(manipElement,{z:z,
> > time:t, transition:"easeoutquint"});
> > }
> > }
> >
> >
> > var rotY:Number;
> >
> > function onMouseOver (e:InteractiveScene3DEvent):void
> > {
> > fixLocation = true;
> >
> > if (e.displayObject3D.material.id!=91)
> > {
> > rotY =
> > viewport.interactiveSceneManager.currentDisplayObject3D.rotationY;
> > var t = 2;
> > var r = -(spiralRadius+1800);
> >
> >
> > Tweener.addTween(e.displayObject3D,{x:Math.sin(Math.PI/180*rotY)*r,
> > z:Math.cos(Math.PI/180*rotY)*r, time:t, transition:"easeoutquint"});
> > }
> >
> > }
> >
> > function onMouseOut (e:InteractiveScene3DEvent):void
> > {
> > fixLocation = false;
> >
> > if (e.displayObject3D.material.id!=91)
> > {
> > var t = 2;
> > var r = -(spiralRadius);
> >
> >
> > Tweener.addTween(e.displayObject3D,{x:Math.sin(Math.PI/180*rotY)*r,
> > z:Math.cos(Math.PI/180*rotY)*r, time:t, transition:"easeoutquint"});
> > }
> > }
> >
> >
> >
> > // -----------------------------------------------------------
> > // The renderer
> > var fixLocation=false;
> >
> > function render(e:Event):void
> > {
> > var upperBoarder:Number = 36;
> > var lowerBoarder:Number = 0;
> > var inc:Number = 0;
> >
> > if (fixLocation==false)
> > {
> > var mouseLoc:Number =
> > ((stage.mouseX) - stage.stageWidth * 0.5);
> >
> > // Move the carousel faster, when farther away from the
> > centre
> > inc = Math.pow(Math.abs(mouseLoc),1.3) * 0.0001;
> > if (mouseLoc<0)
> > inc*=-1;
> > }
> > else
> > {
> >
> >
> //Tweener.addTween(camera,{x:Math.sin(Math.PI/180*rotY)*(spiralRadius+2000),
> > z:Math.cos(Math.PI/180*rotY)*(spiralRadius+2000),
> > time:5, transition:"easeoutquint"});
> > }
> >
> > angle += inc;
> > camera.x = Math.cos(angle) * (spiralRadius+2000);
> > camera.z = Math.sin(angle) * (spiralRadius+2000);
> >
> > if (angle>lowerBoarder && angle<upperBoarder)
> > camera.y += inc *
> > (num/numOfRotations*yOffset)/(2*Math.PI);
> >
> > if(angle <lowerBoarder) angle = lowerBoarder;
> > if(angle> upperBoarder) angle = upperBoarder;
> >
> > pc.y = camera.y;
> >
> > // Finally, render the scene with the given setup.
> > renderer.renderScene(scene, camera, viewport);
> > }
> >
> >
> >
> >
> > // -------------------------------------------------------------------
> > // Methods to start the application
> > init();
> > setSpiralElement();
> > setManipulatorElement();
> >
> >
> >
> > At 23:10 2007-12-13, you wrote:
> >>Hi,
> >>
> >>I kinda started looking into the same thing –
> >>not much success with what I wanted to do.
> >>Anyways, maybe it would help if you stick to the
> >>code as used in the phunky-branch.
> >>Skimming through your code it looks like you
> >>just make the plane listen for events.
> >>I used the component from the phunky example and
> >>added a listener the same way it
> >>was done there. Unfortunately it does not work
> >>well yet, no responds from the drop down but
> >>maybe it will help you a bit.
> >>
> >>var materialForm:MovieMaterial = new
> >>MovieMaterial(formUIContainer["formUI"],true,true,true);
> >>materialForm.doubleSided = true;
> >>materialForm.interactive = true;
> >>materialForm.smooth = true;
> >>materialForm.animated = true;
> >>materialForm.movie["btn"].addEventListener(MouseEvent.CLICK,
> onMouseClick);
> >>
> >>don
> >>
> >>
> >>----------
> >>Von: papervision3d-bounces at osflash.org
> >>[mailto:papervision3d-bounces at osflash.org] Im Auftrag von Thorsten
> Michelfelder
> >>Gesendet: Mittwoch, 12. Dezember 2007 00:07
> >>An: papervision3d at osflash.org
> >>Betreff: Re: [Papervision3D] PV3D 2.0 interactive TextInput
> >>
> >>Papervision hates me.
> >>I know what steps to do - at least im under the
> >>impression that I do - but this text input
> >>refuses to let me type stuff into it.
> >>I can click on it, to get an event fired. Thats
> >>about it. No cursor change, to let me know that
> >>there is some place to enter something.
> >>
> >>Any ideas?
> >>
> >>Oh, here is the application code to dig in.
> >>The "manipulator" element is a MovieClip with a
> >>simple text field (Input Text - created via the
> >>Text Tool in Flash CS3) on it, where I want to type some text.
> >>You probably want to take your first look into
> >>the function "setManipulatorElement()".
> >>
> >>
> >>
> >>import org.papervision3d.cameras.*;
> >>import org.papervision3d.scenes.*;
> >>import org.papervision3d.objects.*;
> >>import org.papervision3d.objects.special.*;
> >>import org.papervision3d.materials.*;
> >>import org.papervision3d.materials.special.*;
> >>import org.papervision3d.lights.*;
> >>import org.papervision3d.render.*;
> >>import org.papervision3d.view.*;
> >>import org.papervision3d.materials.shaders.*;
> >>import org.papervision3d.objects.primitives.*;
> >>import org.papervision3d.events.*
> >>
> >>import caurina.transitions.Tweener;
> >>
> >>
> >>
> >>// -----------------------------------------------------------
> >>// Global variables
> >>
> >>// Create a viewport
> >>var viewport:Viewport3D = new Viewport3D(500, 500, true, true);
> >>// Create a renderer
> >>var renderer:BasicRenderEngine = new BasicRenderEngine();
> >>// Create a scene
> >>var scene:Scene3D = new Scene3D(true);
> >>// Create a camera
> >>var camera:Camera3D = new Camera3D();
> >>// Create camera center
> >>var pc:Plane = new Plane();
> >>
> >>// Variables supporting the functionality
> >>var angle:Number = 0;
> >>var manipElement:Plane;
> >>
> >>// Spiral properties
> >>const num:int = 90;
> >>const numOfRotations:Number = 6;
> >>const anglePer:Number = ((Math.PI*2) * numOfRotations) / num;
> >>const yOffset:Number = 60;
> >>const spiralRadius:Number = 1000;
> >>var yPos:Number = 0;
> >>
> >>
> >>// -----------------------------------------------------------
> >>// Functions
> >>
> >>function init()
> >>{
> >> // Setup of Viewport3D // Not used any
> >> more, trying to add events directly to the element they belong to.
> >>//
>
> >>viewport.interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK,
> >>onMouseClick);
> >>//
>
> >>viewport.interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_OVER,
> >>onMouseOver);
> >>//
>
> >>viewport.interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_OUT,
> >>onMouseOut);
> >> addChild(viewport);
> >>
> >> // set camera up
> >> camera.zoom = 1;
> >> camera.focus = spiralRadius-(spiralRadius/10);
> >>
> >> // set scene center up
> >> pc.visible = false;
> >> camera.target = pc;
> >>
> >> // Create the render loop
> >> addEventListener(Event.ENTER_FRAME, render);
> >>}
> >>
> >>function setManipulatorElement()
> >>{
> >> // Manipulator plane
> >> var cman:MovieAssetMaterial = new
> >> MovieAssetMaterial("manipulator", true, true, true);
> >> cman.interactive = true;
> >> cman.oneSide = false;
> >> cman.animated = true;
> >> cman.smooth = true;
> >>
> >> manipElement = new Plane(cman, 400, 200, 4, 4);
> >> manipElement.x = 100;
> >> manipElement.y = 100;
> >> manipElement.z = 100;
> >> scene.addChild(manipElement, "manipElement");
> >> manipElement.addEventListener
> >> (InteractiveScene3DEvent.OBJECT_CLICK, onTest);
> >>
> >> //var m : DisplayObject3D =
> >> scene.getChildByName( "manipElement" );
> >> //m.addEventListener( InteractiveScene3DEvent.OBJECT_CLICK,
> >> onTest );
> >>}
> >>
> >>function setSpiralElement()
> >>{
> >> // Create the planes
> >> for(var i:uint=0; i<num ; i++)
> >> { var
> >> cm:MovieAssetMaterial = new MovieAssetMaterial("day", true, true, true);
> >> cm.oneSide = false;
> >> cm.interactive = true;
> >> cm.animated = true;
> >> cm.smooth = true;
> >> var p:Plane = new Plane(cm, 320, 120);
> >> p.x = Math.cos(i * anglePer) * spiralRadius;
> >> p.z = Math.sin(i * anglePer) * spiralRadius;
> >> p.y = yPos += yOffset;
> >> p.rotationY = (-i*anglePer) * (180/Math.PI) + 270;
> >> scene.addChild(p, "day");
> >>
> >>p.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, onMouseClick);
> >> p.addEventListener
> >> (InteractiveScene3DEvent.OBJECT_OVER, onMouseOver);
> >> p.addEventListener
> >> (InteractiveScene3DEvent.OBJECT_OUT, onMouseOut);
> >> }
> >>}
> >>
> >>
> >>
> >>// -----------------------------------------------------------
> >>// Event handler functions
> >>
> >>function onTest(e:InteractiveScene3DEvent):void
> >>{
> >> trace("Test fired !");
> >>}
> >>
> >>
> >>function onMouseClick (e:InteractiveScene3DEvent):void
> >>{
> >> // Do this only if its not the manipulator
> >> if (e.displayObject3D.material.id!=91)
> >> {
> >> var x =
> >> viewport.interactiveSceneManager.currentDisplayObject3D.x;
> >> var y =
> >> viewport.interactiveSceneManager.currentDisplayObject3D.y;
> >> var z =
> >> viewport.interactiveSceneManager.currentDisplayObject3D.z;
> >> var u =
> >> viewport.interactiveSceneManager.currentDisplayObject3D.rotationY;
> >> var t = 2;
> >>
> >>Tweener.addTween(e.displayObject3D.material,{fillAlpha:255, time:t});
> >>
>
> >>Tweener.addTween(manipElement,{rotationY:u,time:t,transition:"easeoutquint"});
> >>
> >>Tweener.addTween(manipElement,{y:y-200, time:t,
> transition:"easeoutquint"});
> >>
> >>Tweener.addTween(manipElement,{x:x, time:t, transition:"easeoutquint"});
> >>
> >>Tweener.addTween(manipElement,{z:z, time:t, transition:"easeoutquint"});
> >> }
> >>}
> >>
> >>
> >>var rotY:Number;
> >>
> >>function onMouseOver (e:InteractiveScene3DEvent):void
> >>{
> >> fixLocation = true;
> >> if (e.displayObject3D.material.id!=91)
> >> {
> >> rotY =
> >> viewport.interactiveSceneManager.currentDisplayObject3D.rotationY;
> >> var t = 2;
> >> var r = -(spiralRadius+1800);
> >>
> >>
> >>Tweener.addTween(e.displayObject3D,{x:Math.sin(Math.PI/180*rotY)*r,
> >>z:Math.cos(Math.PI/180*rotY)*r, time:t, transition:"easeoutquint"});
> >> }
> >> }
> >>
> >>function onMouseOut (e:InteractiveScene3DEvent):void
> >>{
> >> fixLocation = false;
> >> if (e.displayObject3D.material.id!=91)
> >> {
> >> var t = 2;
> >> var r = -(spiralRadius);
> >>
> >>
> >>Tweener.addTween(e.displayObject3D,{x:Math.sin(Math.PI/180*rotY)*r,
> >>z:Math.cos(Math.PI/180*rotY)*r, time:t, transition:"easeoutquint"});
> >> }
> >>}
> >>
> >>
> >>
> >>// -----------------------------------------------------------
> >>// The renderer
> >>var fixLocation=false;
> >>
> >>function render(e:Event):void
> >>{
> >> var upperBoarder:Number = 36;
> >> var lowerBoarder:Number = 0;
> >> var inc:Number = 0;
> >>
> >> if (fixLocation==false)
> >> {
> >> var mouseLoc:Number =
> >> ((stage.mouseX) - stage.stageWidth * 0.5);
> >> // Move the
> >> carousel faster, when farther away from the centre
> >> inc = Math.pow(Math.abs(mouseLoc),1.3) * 0.0001;
> >> if (mouseLoc<0)
> >> inc*=-1;
> >> }
> >> else
> >> {
> >>
>
> >>//Tweener.addTween(camera,{x:Math.sin(Math.PI/180*rotY)*(spiralRadius+2000),
> >>z:Math.cos(Math.PI/180*rotY)*(spiralRadius+2000),
> >> time:5, transition:"easeoutquint"});
> >> }
> >> angle += inc;
> >> camera.x = Math.cos(angle) * (spiralRadius+2000);
> >> camera.z = Math.sin(angle) * (spiralRadius+2000);
> >>
> >> if (angle>lowerBoarder && angle<upperBoarder)
> >> camera.y += inc *
> >> (num/numOfRotations*yOffset)/(2*Math.PI);
> >>
> >> if(angle <lowerBoarder) angle = lowerBoarder;
> >> if(angle> upperBoarder) angle = upperBoarder;
> >> pc.y = camera.y;
> >> // Finally, render the scene with the given setup.
> >> renderer.renderScene(scene, camera, viewport);
> >>}
> >>
> >>
> >>
> >>
> >>// -------------------------------------------------------------------
> >>// Methods to start the application
> >>init();
> >>setSpiralElement();
> >>setManipulatorElement();
> >>
> >>
> >>Any ideas?
> >>Thanks in advance!
> >>
> >>
> >>
> >>At 15:09 2007-12-11, you wrote:
> >>Fullwebs* ''intelligent solutions for intelligent people,,
> >>
> >>Take a look at this post (If you don't have already see it):
> >>
> >><
> http://www.nabble.com/Example-interactive-form-with-GreatWhite-tp14256727p14256727.html
> >
> http://www.nabble.com/Example-interactive-form-with-GreatWhite-tp14256727p14256727.html
> >>
> >>
> >>That's not Flash CS3, but the code can be ported
> >>from Flex to Flash. Hope it could help you ;-). See ya!
> >>
> >>P.S: I'm not english speaker... Maybe there are a lot of mistakes. Sorry
> :-P
> >>
>
> >>.........................................................................................
> >>Maximiliano < ßersërker ReznoR> Fernández do Santos
> >>.............................................................Dpto
> >>Diseño/Sistemas | Fullwebs*
> >>
> >>_______________________________________________
> >>Papervision3D mailing list
> >>Papervision3D at osflash.org
> >>http://osflash.org/mailman/listinfo/papervision3d_osflash.org
> >>
> >> >------------------------------------------------------=->
> >> > my homepage at http://Thorsten.Michelfelder.net
> >>___________________________________________________
> >>_______________________________________________
> >>Papervision3D mailing list
> >>Papervision3D at osflash.org
> >>http://osflash.org/mailman/listinfo/papervision3d_osflash.org
> >
> > >------------------------------------------------------=->
> > > my homepage at http://Thorsten.Michelfelder.net
> > ___________________________________________________
> >
> > _______________________________________________
> > Papervision3D mailing list
> > Papervision3D at osflash.org
> > http://osflash.org/mailman/listinfo/papervision3d_osflash.org
> >
> >
>
> --
> View this message in context:
> http://www.nabble.com/PV3D-2.0-interactive-TextInput-tp14269878p19445744.html
> Sent from the Papervision3D mailing list archive at Nabble.com.
>
>
> _______________________________________________
> Papervision3D mailing list
> Papervision3D at osflash.org
> http://osflash.org/mailman/listinfo/papervision3d_osflash.org
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://osflash.org/pipermail/papervision3d_osflash.org/attachments/20080912/6e79f300/attachment-0001.html
More information about the Papervision3D
mailing list