**UPDATE
This tutorial has been updated
This tutorial will show you how to handle full interactivity on an objects surface, just as if it's a normal movieclip.
For my example, I've made this. The red spot in the centre is a button. You can click it to toggle it's glow on and off. The other button will reveal how it works!
There are other ways to do this, but I think this way is the easiest and most hassle-free, and it's pretty fast.
I've super-commented the source code, so from reading the comments in the code you should be able to figure out exactly what's going on.
The basic idea is, you add the movie clip which is being used as the texture to the scene, but make it invisible. You then move it so that your mouse is over the correct part of the movieclip, when your mouse touches the texture on the 3d model. I think the "Show Movieclip" button on the cube above will explain better than I can :)
Actionscript:
-
package {
-
import flash.display.Bitmap;
-
import flash.display.MovieClip;
-
import flash.events.MouseEvent;
-
import flash.filters.GlowFilter;
-
import org.papervision3d.materials.MovieMaterial;
-
import org.papervision3d.materials.utils.MaterialsList;
-
import org.papervision3d.objects.primitives.Cube;
-
import org.papervision3d.events.InteractiveScene3DEvent;
-
-
public class Main extends PaperBase {
-
-
// This is the movieclip that we'll use as the texture.
-
private var movie:MovieClip = new MovieClip();
-
-
// This movieclip will be completley transparent and will hold the
-
// texture movieclip, then move it to the correct loaction under the mouse.
-
private var movieParent:MovieClip = new MovieClip();
-
-
// These are buttons that I'm going to add to the texture movieclip
-
private var button:MovieClip = new MovieClip();
-
private var showbutton:MovieClip = new MovieClip();
-
-
// A "MovieMaterial" will use a movieclip as a texture.
-
private var mat:MovieMaterial;
-
-
// The cube that we're going to texture..
-
private var cube:Cube;
-
-
// This will import the file "E:/Papervision/images/showtex.jpg" to the project, and
-
// store the data in "ButtonIm". (This is the "Show Movieclip" Button)..
-
[Embed(source = "E:/Papervision/images/showtex.jpg")] private var ButtonIm:Class;
-
-
public function Main() {
-
// Initiate, 400px wide, 400px tall..
-
init(400, 400);
-
}
-
-
override protected function init3d():void {
-
// - See the prepareMovieclip function. This just builds the movieclip called "movie".
-
// You can use ANY movie clip for this..
-
prepareMovieclip();
-
-
// Prepare out moviematerial. Make it animated and interactive.
-
mat = new MovieMaterial(movie, false, true);
-
mat.interactive = true;
-
-
// Zoom in a bit..
-
default_camera.zoom = 5;
-
-
// Prepare the cube.
-
cube = new Cube(new MaterialsList( { all: mat } ), 500, 500, 500, 4, 4, 4);
-
// Listen for when the mouse is moved over the cube.
-
// Trigger the mMove function when this happens.
-
cube.addEventListener( InteractiveScene3DEvent.OBJECT_MOVE, mMove);
-
-
// Add the cube to the scene.
-
default_scene.addChild(cube);
-
-
// The movieParent movieclip will hold the movieclip which is being used
-
// as the texture. It will then move depending on the mouse posirion.
-
movieParent.addChild(movie);
-
// Make it invisible.
-
movieParent.alpha = 0;
-
-
// Add the movieParent movieclip to the stage.
-
addChild(movieParent);
-
-
}
-
-
-
private function prepareMovieclip():void {
-
-
// - This code will set up our movieclip which is going to be used
-
// as the texture for the cube.
-
// Draw Outline:
-
movie.graphics.beginFill(0xFFFFFF);
-
movie.graphics.drawRect(0, 0, 500, 500);
-
movie.graphics.endFill();
-
movie.graphics.beginFill(0x000000);
-
movie.graphics.drawRect(0, 0, 10, 500);
-
movie.graphics.drawRect(490, 0, 10, 500);
-
movie.graphics.drawRect(0, 0, 500, 10);
-
movie.graphics.drawRect(0, 490, 500, 10);
-
movie.graphics.endFill();
-
-
// Draw Circular Button:
-
button.graphics.beginFill(0xBB0000);
-
button.graphics.drawCircle(0, 0, 50);
-
button.graphics.endFill();
-
button.x = 250;
-
button.y = 250;
-
button.buttonMode = true;
-
-
// Load bitmap button texture:
-
var Bim:Bitmap = new ButtonIm();
-
// Draw "Show Movieclip" Texture:
-
showbutton.graphics.beginBitmapFill(Bim.bitmapData);
-
showbutton.graphics.drawRect(0,0,100,30);
-
showbutton.graphics.endFill();
-
showbutton.buttonMode = true;
-
showbutton.x = 380;
-
showbutton.y = 450;
-
-
// Add the buttons to the movieclip
-
movie.addChild(showbutton);
-
movie.addChild(button);
-
-
// -- Listen for the buttons to be clicked --
-
button.addEventListener(MouseEvent.CLICK, mClickButton);
-
showbutton.addEventListener(MouseEvent.CLICK, showHide);
-
// --
-
}
-
-
private function showHide( e:MouseEvent ):void {
-
// The "Show Movieclip" button has been clicked
-
if (movieParent.alpha == 0) { // If it's invisible,
-
movieParent.alpha = 0.2; // Make it slightly visible.
-
}else {
-
movieParent.alpha = 0; // Or make it invisible again
-
}
-
}
-
-
private function mClickButton(e:MouseEvent):void {
-
// The cental round button has been clicked.
-
if(button.name == "on"){
-
button.filters = null;
-
button.name = "off"
-
}else {
-
button.filters = [new GlowFilter(0x000000, 1, 15, 15, 10, 1)];
-
button.name = "on";
-
}
-
}
-
-
private function mMove( e:InteractiveScene3DEvent ):void {
-
// This code is run when the mouse is moved on the cube.
-
// This will move the movieclip to the right place beneath
-
// the mouse.
-
movieParent.x = root.mouseX -e.x;
-
movieParent.y = root.mouseY -e.y;
-
}
-
-
override protected function processFrame():void {
-
// Spin our cube a bit.
-
cube.yaw(0.25);
-
cube.pitch(0.25);
-
}
-
-
-
}
-
}
The image that's embedded in the code can be found here: showtex.jpg
Have fun! More Examples coming soon.
hi~
After test your new cool source,
I found that the function “mMove” never be called.
Is it just me?
Ah,
You’ll have to change the base class a bit, read the basic interactivity tutorial and you should be all set.
-Luke
The function “mMove” is not triggered. :(
Hi Alexander,
You need to change the base class.
Read the tutorial here:
http://papervision2.com/basic-interactivity/
I’m going to set up a download section so that people can download the newest version of the base class and all of my examples.
Hope this helps.
-Luke
Nice one! ..is it possibile to have a tutorial where there’s some timeline animation inside a movieclip triggered by a button inside that movieclip? the movieclip shouls be used a moviematerial…thank u
A.
Hi Andrew,
Yes this is possible, just make the button do “movieclipname.play();” on click.
I’m planning on publishing some tutorials on how to use this in the Flash IDE soon, It’s on my long list of todo’s :)
-Luke
Hi~ I changed the base class, and it works fine now.
I do read your previous awesome tutorials,
but I forgot to update base class I have renamed.
Thanks a lot and sorry for boring you with this trivia.
Great tutorials, I’ve gone through all of the other tutorials and have been able to get them to work but for some reason I’m coming up with this error now and I can’t figure it out.
For some reason I’m getting this error:
DisplayObject3D: null
Papervision3D Public Alpha 2.0 – Great White (14.2.08)
PV3D 2.0a WARNING : DO NOT USE WITH BETA 9 PLAYERS. ONLY WITH OFFICIAL TO TEST.
CHECK YOUR VERSION!
DisplayObject3D: null
DisplayObject3D: null
TypeError: Error #1007: Instantiation attempted on a non-constructor.
at Main/::prepareMovieclip()
at Main/Main::init3d()
at PaperBase/init()
at Main$iinit()
Hey!
Brilliant tutorials and thanks to the comments for fixing the base class ;)
One question though, how exactly does the InteractiveScene3DEvent event type work to give you the correct x,y output? Does this work with any shape, button setup etc?
Again, thanks for the great examples,
Dan
Hey Luke,
thanks a lot… This is exactly what I need.
Mike
Very nice; one question that’s bugged me about using MovieMaterials – is there a way to make them look better/less aliased? It seems like papervision removes all anti-aliasing that was being done inside the movieclip; how do you smooth that look out?
Hi Paul,
Try “material.smooth = true;”. That should work, it’ll make it run a bit slower though which is why by default it’s turned off.
-Luke
Hey,
Another wicked tutorial, really helping me get to grips with papervision. I have same problem as Michelle 5 up from me. Getting this whole “Instantiation attempted on a non-consturctor”!??! Haven’t a clue what that means and would really love to get this one working. Paperbase.as all up to date if it helps.
Cheers, Kev
Hi Michelle and Kev,
Ok, I think the problem is this line:
var Bim:Bitmap = new ButtonIm();
I -think- that it’s telling you that there is no “ButtonIm”, which means that you need to check this line:
[Embed(source = "E:/Papervision/images/showtex.jpg")] private var ButtonIm:Class;
Make sure that you point that to an image on your hard drive and it should work.
Tell me if that helps!
Thanks for your comments both of you! :)
-Luke
Hi,
Great tutorials, thanks! One thing I’ve noticed is that the interaction movieclip only moves when the mouse moves. As the object turns, it is not updated, giving rise to the problem that the button can still be clicked on if it has moved away. I would’ve thought the way to do this would be to add an enterFrame handler when rolling over the material and remove it when rolling out. The only problem is that I’m not sure how to get the mc offset, without using the coords from the InteractiveScene3DEvent.OBJECT_MOVE event.
Hi Owen,
Yeah I’d noticed this too, but like you say, It’s very difficult to get the mouse position over a texture when it’s not from an InteractiveScene3DEvent.
I’ll try as always to see what I can come up with..
-Luke
Hi Luke,
It’s definitely that bit like you said cause when I remove all reference to that button it works fine.
This is the first thing I tried. Put the texture in the same folder as the project and changed the line to…
[Embed(source = "showtex.jpg")] private var ButtonIm:Class;
chucks out the same errors?!
I love this websites and tutorials. Its the only way to learn the Papervision in few steps if you dont have time to read the papervision as code and decide how it realy works. Is there any way to load collada or ase with vertex animation? I have complex Vertex animation and I need to get it in Papervision and it cannot be made up only with bones and skin :( because I know at this time only one way how to make it and its quite difficult to get vertex animation directly in papervision with vertex deformation :o/
Questions about ASE , you can load collada files with papervision, though I don’t know what ASE is.
The easiest way to pick up papervision, by far, is by going to one of the traveling workshops. I went to the one in New York and it was EXTREMELY helpful.
It really is a very, very simple coding interface to get their engine running, though at first it is daunting and difficult to understand why something isn’t working, especially if you’re going it alone and aren’t a programmer by trade.
Thanks for the tutorials, they’re really helpful.
Think I’ve got an easier solution to making this cube interactive, posted it in the forums:
http://papervision2.com/forum/viewtopic.php?f=3&t=20&sid=2f38b6eb8e16e9c67337a23d5dd62608
Cheers,
Ed
Great tutorials!
But how can I do the same if I have 6 different MovieClips?
i’m getting the error:
TypeError: Error #1007: Instantiation attempted on a non-constructor.
at main$iinit()
Any ideas?
Hi, thanks for the tutorial.
Regarding the problem Owen noticed (the movieParent position is not updated when mouse isn’t moving), I have some kind of workaround. I manullay dispatch MouseMove events.
In the processFrame() method, I simply added:
this.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_MOVE));
It seems to work fine in my animation (it uses a Cylinder instead of a cube but it should work in that example too).
how do you go about making a dae-object interactive, say you want to add a sound to the cow (in earlier tutorial) when you click on it, any ideas?
I like the approach to getting this to work, it seems like the mapped cube faces have interactive areas but they dont. One thing I spot with this is that it cant work out which face is being clicked. So I might try to add 6 movie clips ! Then it might be just checking which is highest in the stack of movieclips after having swapped it in depth depending on the cube position, and the closest face, that is the tricky part I think.
The reason for getting Error #1007 is that the [Embed] meta tag is not supported in the flash IDE. Using the embedded image showtex.jpg is not crucial for this tutorial but if you want to fudge this the way to do it is to load the image into a loader, and then access its bitmapData from there, instead of caching the bitmap is a class as per this example. The flash documentation has an example in the entry for the Bitmap class that shows how to access the bitmapData of a loader’s content.
luke, what would be the “other ways to do this” ?
Hi, thanks for the tutorial.
I reproduced it with Flex 3 and it s nice.. but the hand cursors doesn’t appears on the buttons of the cube event when i set their buttonMode and useHandCursor to true .. Any idea about that ?
Great tutorials,
I’m getting the #1007 error and have been trying to sort it. Is there anyone who has solved the problem at all?
help me plz!
i replace movieclip on file .swf and the button on file .swf doesn’t work. Any ideas?
Thanks very much for the tutorial luke.
I’m trying to use text fields in my movie clip – text fields that can be highlighted.
But unfortunately, the text field parts of the movie clip are visible even when the alpha of the movie parent is set to 0. So you see the text field duplicated, one hovering over the other, in a rather distracting fashion. I tried copying the movie clip to another movie clip, and setting the alpha of the
Has anyone managed to get interactive text fields working?
Hello… I’m trying to use text fields in a moveclip as well, just as Peter. I’ve got the same problem.
By the way, as someone who has no idea what their doing, your tutorials have been extremely helpful and I thank you very much for putting them together.
Thanks again,
J
I’m having the same issue as Peter, is there any way to have input text fields? I’m loading a bunch of swfs into a coverflow type gallery, I’d like all of them to have their own interactivity based on their own content… so it can be easier to scale.
Any suggestions?
I come across this hassle a lot.
The dynamic textfield problem is not a pv3d prob, but a common Flash prob. Just use an embedded font from the library. The same way you’d use antialiasing on a dynamic textfield. That won’t work without an embedded font either.
Great tutorials by the way. Everything works like a charm here on Flash CS3. With some adaptations as discussed here earlier: passing the stage variable to the classes.
@ Peter, Brian, Jeremy.
Have any of you managed to get your TextInput component fields working yet? I’ve tried Hans suggestion of embedding the fonts by using the setStyle method with TextFormat on a library Font and had no joy. However I can get it to appear with by using the drawNow statement. I can also get it to activate the focus with a simple mouse click function calling a draw focus. I feel like I’m so near. Any help on this from anyone would be awesome!
Hi! Thanks fpr the tutorial, but as a Flex developer I’ve found another trick to get a plane interactive: for example to make a flex Panel interactive I’am able to hide it in a 0×0 px canvas, and use the panel in the MovieMaterial of a plane. Then the plane acts like a flex panel!
Cheers
hi there,
Great tutorials by the way.
if i am using flashcs3 IDE which can not use [Embed(source = "E:/Papervision/images/showtex.jpg")]
what can I do?
Evian,
To embed in Flex is is the same as having something in the Library in Flash.
nd
hi,
thanks for the tuts.
I have same problem as Puch’s. I replaced the MovieClips with a SWF file loaded with “Loader” not SWFLoader; but it is not shown.
what can I do ?
For Users of Flash CS3 :
Comment line : “[Embed(source = "E:/Papervision/images/showtex.jpg")]”
- Add in your project (.fla) the “showtex.jpg” with File/Import/”Import to library”
- In your library, right click on “showtex.jpg” and select “Link” menu.
- Tick “export to ActionScript” and write in input text : Class => “ButtonIm”. Normally “flash.display.BitmapData” appears in the fields of below. And box “export in the first frame” is checked. Click “Ok”
In the Main.as :
1. Add “import flash.display.BitmapData;”
2. Replace
–>
var Bim:Bitmap = new ButtonIm();
var BimData:BitmapData = new ButtonIm(100,30);
var Bim:Bitmap = new Bitmap(BimData);
<–
And it works !!!
Ps: I am french and I use the French version, so I perhaps have me wrong on the name correct commands, sorry.
Hey –
No troubles here. Just wanted to say that’s a crafty solution you’ve got there. Fancy Thinking!
I would like to make a quick note here as i have been struggling for ages with this. It is critical for you to add more segments to your object as the model becomes distorted as it gets near the camera and the positions returned in the event become inaccurate!
hi there.
i tried this :
movieAssetMaterial_text1.smooth = true;
its pretty cool, but animation is with small “gli-glitches” — any opinion, how can I this problem solve?
can remove this problem when i change a fps for publish or image quality??
KTHX for answer..
hAvE a NiCe DaY!!
Manyak
PS: sorry, but my grammar is horible.. i wasn´t be focus on english lessons :-D
sorry but where i put this code and i execute it…its a actionscript file…how to execute it…
Hi there, I must say that you have done a wonderful job on your site and I thoroughly enjoyed my stay here, I thank you for sharing it with me…
I only want to tell you thanks for this package of tutorials wich are very usefull.
Thanks a lot!
Hi,
Excuse my english..
Thanks a lot for tutorials ! Really good ! But all your tutorials about interractivity will be easylier for newbies if PaperBase.as is updated like this:
viewport = new Viewport3D(vpWidth, vpHeight,false,TRUE);
I spend really 3 days trying to make a fucking interactive Object…just because viewport in Viewport3D.as, interactivity is false by default :\
Please, help me…ERROR
Papervision3D Public Alpha 3.0 – PapervisionX (18.09.08)
TypeError: Error #1007: Se intentó crear una instancia en un tipo no constructor.
at interactivo3/::prepareMovieclip()
at interactivo3/interactivo3::init3d()
at PaperBase/init()
at interactivo3$iinit()
http://clipdepelicula.com
Thanks kantowitch!!