Wanna click that button on that 3D object? Now you can. Oh, and it’s so easy, a caveman could do it.
So, lately, on the Papervision3D list, we’ve been getting alot of requests for the ability to have mouse events on elements in a MovieClip/Sprite used as a material on a 3D object. Tons in fact.
Well, with a bit of research and help from guys like De’Angelo Richardson and Jim Kremens, we were able to finally crack this nut and make it work out of the box! It’s so easy a caveman could do it 🙂
The magic is really supplied by Pierre Lepers with his 3D>2D point conversion methods and drawing demo (see blackpawn explanation).
Inspiration, was really provided by Patrick Matte over at Blitz Agency with his original cube demo and interaction – really an ingenious implementation and idea! This was actually where the bar was set in my mind – if we couldn’t provide this level of interactivity with our way of implementing it, then it wasn’t going to be good enough. Well, thankfully, it DOES work 😉
The new ISM sports Face level interactivity now. This opens up a whole new world of accessibility with your 3D scene and the 2D screen. ISM now makes it easier than ever to give you interactivity with your movieclip materials.
Here are the steps:
- create MovieClip
- add objects that you want to be clickable (IE: UI components, or other movieclips/sprite objects)
- use this MovieClip with an InteractiveMovieMaterial
- apply InteractiveMovieMaterial to 3D object
- done.
With the addition of the new VirtualMouse by Trevor McCauley, we were able to modify is slightly to work with multiple objects that might not necessarily exist on a stage 🙂 With VirtualMouse, you’re able to receive the pure events from those objects in your MovieClip/Sprite container.
The code you end up writing looks like any other day at the office:
[as]public function createPlane():void
{
var movie:MovieClip = formUIContainer.formUI;
material = new InteractiveMovieMaterial( movie );
material.animated = true;
material.smooth = true;
// establish your MouseEvent listeners as normal
movie.btn.addEventListener(MouseEvent.CLICK, handleBTNClick);
movie.btn.addEventListener(MouseEvent.MOUSE_OVER, handleBTNOver);
movie.btn.addEventListener(MouseEvent.MOUSE_OUT, handleBTNOut);
var plane:Plane = new Plane(material, 250,250,8,8);
scene.addChild(plane);
}
[/as]
There are 5 demos for you to sample and learn from in the FaceLevelInteractivity branch of the google repository:
- boxDemo
- drawingTest – draw on a sphere
- helloMouse3D – Thanks to De’Angelo for creating Mouse3D and this demo to show it’s use! Awesome work
- formUITest – using a movieclip with UI components on a plane object
- TestInteractiveSceneSimple – thanks to Jim for making this very simple how-to sample
updated docs here:http://www.rockonflash.com/demos/pv3d/docs/index.html
Now, there’s alot that went into getting the ISM to this level and there’s alot of features that have been added to give developer the best possible scenario in getting the most FPS possible. You can use object level mode, like we’ve been doing, and now face level mode.
InteractiveSceneManager.faceLevelMode = false; // object level interaction
InteractiveSceneManager.faceLevelMode = true; // fade level interaction
We’ve also added a new static boolean property to DisplayObject3D (DO3D for short) – faceLevelMode. When set to true, all DO3D’s will create sprite containers for their faces. This is a bit heavier on the cpu, and should only be done when necessary.
The cool thing about the ISM is that, it only draws the faces you specifiy. By using an Interactive material, you designate which object will have it’s faces drawn in the ISM. Now, you can be utlra picky about WHICH objects are getting face level interactivity!
We went even a step further with mouseInteractionMode property. This basically tells the ISM “don’t draw anything unless they’re mouse interaction”. Now we have a completely new level of determining WHEN something needs interaction and not.
Also, a note about the ISM: it only receives drawing instructions if the face of a DO3D is actually drawn. So with the new culling features, we’re only drawing whats absolutely necessary to save on CPU.
Anyway, theres’ just the tip of the iceberg, but with the docs and samples, you should be well on your way to using the ISM features!
I’ll be covering the ISM in detail at the RMI classes in Toronto, so don’t miss that!
UI components notes
Now that we have this level of interactivity, we need help from the community to figure out the remaining details of *how* to use UI components with this setup. You’ll see in the formUITest that I’ve put the movieclip container inside of a parent container and set a blendMode to that parent. This allows the components to be on stage and hide the content from screen.
The UI Components will not work without a stage property being set. Also, there are issues with some of the components and their registered sizes, which if you put a component too far down on a material, it’ll change the size of the movieclip, and the mapping will be wrong if you’re using a model you textured in a 3D app like 3D Studio Max.
So, any and all help would be greatly appreciated as we figure out how to deal with the UI components and streamline the process as much as possible – thanks!
John Grden 
Just when you thought the envelope was pushed as far as it could go…
Fantastic work guys.
e k z
THX ! Crazy work !
Thanks for bringing the dream to reality!. stunning work.
This rocks excellent job.
Wow! Awesome work! This really kicks open some doors.
maybe im worse than a caveman
i cant get interactive mouse in 3d
and the examples look ugly to me
i dont get it ?????????
[@snail] Can you give us a little more detail on what you’re doing?
what version of Flash Player are you testing on?
Not bad, to wipe my butt with!
LOVE YOU JOHN!!!
🙂
[@keith] [ shakes fist in air ]… you’ll get yours 😉
I wanna grab the scrollbar tab…
Done! I just have to wait until they update the fire wall so I can upload the changes for the sample on this page.
I added the press/release calls for VirtualMouse and that makes it work 😉
no the examples work great
but i cant understand the mouse things
i created a MovieClip with UI components
applied InteractiveMovieMaterial on a cube
now how the mouse will interact with this cube texture
// establish your MouseEvent listeners as normal
and then what?
those virtualmouse classes is not work for me
give bunch of errors
maybe if you can do it easier than this
for snail brains like me lol
[@snail] are you using Flash CS3 or Flex2 to compile to an AS3/Flash9 swf?
what errors do you get?
can I use InteractiveMovieMaterial in Flex 2?
I try to establish an movieclip by using
var myMC:MovieClip=new MovieClip();
myMC.addChild(new Button());
and throw it into the InteractiveMovieMaterial
the Error generate in BitmapData Invalid parameter(the movie clip width and height is zero.)
how can I use an Flex UI Component in InteractiveMovieScene.
I can figure out an way to to it.
by the way. the trunk won’t compile with flex2.
I have to merge some branch and to get rid of some errors to get it work. and each branch have different version of file.
maybe a central control of co-use files is good for latter merge.
[@Steven] – I would first, call drawNow() on the button before adding it in the constructor for the new material. That might be the issue there.
As for the Flex2 compile errors, they should be gone now that the trunks’ been updated last night with those fixes. What revision # are you at?
I update it to revision 203
1. fl/LivePreviewParent.as
wrong package name or wrong file path
“package fl.livepreview”
2.BitmapAssetMaterial.as line 106
“correctBitmap( bitmap, true );”
function parameter doesn’t match with BitmapMaterial.as
I copy seem newer version from branch ascollada but it file doesn’t have resetMapping(), so I copy them together.
[@Steven] – yeah, you need to sync with the trunk or just update the entire repository. I’ve since removed the FaceLevelInteractivity branch and the trunk has these fixes already applied.
nice now there is drag and drop in 3d…
about the new Cube class with 6 faces
it gives me error on mergeVertices();
i deleted it and my cube compiled
what about a glass cube
the alpha in material doesn’t work
MovieScene3D.as didn’t clear resources when removing children.
“containerList”
“spriteList”
and children can’t be garbage collected
you might apply this to MovieScene3D
public override function removeChild( child:DisplayObject3D ):DisplayObject3D{
var removed:DisplayObject3D=super.removeChild(child);
for(var i:int=0;i
newest version BitmapMaterial.as
didn’t init “uvMatrices”
and cause an runtime error.
Fixed in Rev 207 [@Moo and Alex]
hi,
it’s possible download .fla?
i have many problems, with this property…
if you sync with the PV3D repository, you see IncteractiveBoxDemo – the files are there
PreciseBitmapFileMaterial exception
drawFace3D()–>
if the file not loaded yet,
mapping will be null and
renderRec throws null exception when trying to access null members
fix:
add BitmapFileMaterial-> drawFace3D
checking block
Thanks very much Steven for finding and posting!
That’s cool as hell.
nice work.
could you please post the source?
if you sync up with the SVN repository, it’s in the AS3 examples folder along with a ton of other Papervision3D examples
http://code.google.com/p/papervision3d/source
I’m in the same dilema as Steve Lin, creating a new MovieClip() and adding a button. I was up to date as of yesterday (213). I’m not sure that I understand the drawOn() reommendation.
Would someone be willing to publish a simple example of a single control which doesn’t rely on a *.fla file?
This is awesome work. Thanks for blogging.
This stuff is fantastic. Unfortunately all this code is gibberish to me. I am a 3d artist wanting to put some of my artwork online. I hope one day this stuff will be retard friendly.
That cube is amazing.
I’m a newbie to flash, but I’ve been trying to figure out how to map photographs onto a 3D sphere which you can both rotate, and have each photo area on the sphere as a link to the normal photo file; any ideas?
Andries Ondendaal has done some done it with shockwave here
http://www.interact10ways.com/usa/sumona.asp
Do you think it’s possible in flash?
Yes, you can map images to a sphere and click them for a bigger representation 😉
I’d suggest getting signed up with the papervision3d email list and checking out the wiki:
wiki.papervision3d.org
That’ll get you started!
thx for this amazing step ahead!!
i am trying to update this source by using a InteractiveMovieAssetMaterial instead of InteractiveMovieMaterial.
material = new InteractiveMovieAssetMaterial(“canvas”);
it compiles but the form is not rendered properly and not clickable.
any idea?
thx a lot
Yeah it’s because the UIComponents need to be on stage to work properly unfortunately. They rely on being added to stage to “come alive” 😉
thx a lot john for this fast update! 🙂
i am changing my source right now
john.. sorry to bother you! but i am blocked and can not find why.
here are the steps i follow as per your sample:
– created MovieClip
– added one sprite to be clickable
– used this MovieClip with an InteractiveMovieMaterial
– applied InteractiveMovieMaterial to a plane
now my sprite is not clickable by default.
but it is only when i am zooming the animation (right click > zoom)!!
are you using InteractiveScene3D for your scene?
yep
i find a turnaround for this issue.
i moved my flat component (taken from the library) on the upper part of the canvas (it was outside the canvas initially).
it works now. strange!
thx
Yeah I should have mentioned, you need to have the movie that’s used as a material at 0,0 on stage for that to work correctly.
If you don’t have to use UIComponents, it SHOULD work from the library just fine.
I’m just noticing that if you change the x, or y property of the plane, the interactive movie materials x and y must need to update as well, or else the events won’t fire.
correction, I’m not sure how to handle this yet.
if you’ve moved the formUIContainer movieclip that’s on stage from the 0/0 location, the the x/y coordinates will be off. This is because we assume 0,0 to make our calculations.
When a sprite or moviecllip is created, their x/y values are automatically 0,0 (top,left) – regardless of being added to a display list or not. When added to a display list, they’ll still be 0,0 until you move them elsewhere.
And so why do we have that movieclip on stage in the first place then? because the Form UI compnents have to be added to a display list that’s been added to the stage or they won’t initialize fully.
I’m not familiar with the formUIContainer. I’m just using an InteractiveMovieMaterial. I’m not using any components.
I thought that the registration point might be the issue, and am tracking back through code to see where I might’ve modified it.
It was the registration point = ]
I’m loving this Interactive 3D! Do you know of any solid papervision3D performance reading resources? Anytime a papervision3D object is added to the display list and rendering, all other ENTER_FRAME anims slow down ALOT
Hey guys, awesome stuff! I have 2 questions:
1. Is it possible to make the faces on the Cube separate SWF’s all w/ their own animation? right now I’m trying to get an imported SWF’s animation to work on the face of my cube and it just doesn’t run the animation?
2. This Papervision stuff is all new to me…can you point in the right direction for the most complete documentation…tutorials would be nice to!
Thx!
Hi, this is exactly what I’ve been looking for. I have been playing around with papervision3d and its great. I must be sub caveman because I’m not sure how to set this up. Is there any FLA files available for this?
John this is great. I was wondering if any one has tried to do this with a primative cube. I am working with cubeDemo. It uses materials from the library and places it onto the primative. How do I add these to the ISM?
When will this be committed to GreatWhite?
There IS a 2.0 component that’s not been released. We have effects, DAE and GW to combine still and with over 350,000 downloads of the 1.5 component, I don’t want to just throw stuff up there 😉
Hello john,
i’m very interested in such a component for 2.0. It will be very cool to have full interaction with 3D object over Flex written components.
Do you have a release date in mind for it ?
@Gerald: I actually have been releasing it to class members only – the 2.0 version that is. Since 2.0 isn’t final release yet, and we have over 350,000 downloads of the component, I don’t want to release until we have a final 2.0 version of PV3D. So, if you come to one of the last 2 classes, you’ll get the 2.0 component way before anyone else does 😉
Could someone post up an FLA that has the InteractiveMovieMaterial within?