[Papervision3D] PV3D 2.0 interactive TextInput
Thorsten Michelfelder
Thorsten at Michelfelder.net
Fri Dec 14 13:08:13 PST 2007
Hi
Moving off the stage works perfectly at least the
part, where the 2D movieclip disappears. But at
the same time it takes the possibility away, to enter data into the 3D field.
I changed from Plane to Cube, but this should not
be a problem, as it works as long as the 2D clip can be seen on the stage.
Any ideas?
Thanks again!
Cheers
Thorsten
At 01:27 2007-12-14, you wrote:
>A quick answer to #2 is to move it off the stage
>as in make the x = -9999 or something.
>drawNow() is to make sure it draws currectly.
>
>
>-De'Angelo
>
>
>----- Original Message ----
>From: Thorsten Michelfelder <Thorsten at Michelfelder.net>
>To: papervision3d at osflash.org
>Sent: Thursday, December 13, 2007 3:40:41 PM
>Subject: Re: [Papervision3D] PV3D 2.0 interactive TextInput
>
>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
> (<http://e.displayobject3d.material.id/>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
> (<http://e.displayobject3d.material.id/>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
> (<http://e.displayobject3d.material.id/>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
>> (<http://e.displayobject3d.material.id/>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
>> (<http://e.displayobject3d.material.id/>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
>> (<http://e.displayobject3d.material.id/>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>http://osflash.org/mailman/listinfo/papervision3d_osflash.org
>>
>>
>> >------------------------------------------------------=->
>> > my homepage at
>> <http://thorsten.michelfelder.net/>http://Thorsten.Michelfelder.net
>>___________________________________________________
>>_______________________________________________
>>Papervision3D mailing list
>>Papervision3D at osflash.org
>><http://osflash.org/mailman/listinfo/papervision3d_osflash.org>http://osflash.org/mailman/listinfo/papervision3d_osflash.org
>>
>
> >------------------------------------------------------=->
> > my homepage at
> <http://thorsten.michelfelder.net/>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
___________________________________________________
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://osflash.org/pipermail/papervision3d_osflash.org/attachments/20071214/b9c135c0/attachment-0001.html
More information about the Papervision3D
mailing list