11. Advanced Interactivity 2


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 :)

View as Plain Text (Copyable)
Actionscript:
  1. package  {
  2.     import flash.display.Bitmap;
  3.     import flash.display.MovieClip;
  4.     import flash.events.MouseEvent;
  5.     import flash.filters.GlowFilter;
  6.     import org.papervision3d.materials.MovieMaterial;
  7.     import org.papervision3d.materials.utils.MaterialsList;
  8.     import org.papervision3d.objects.primitives.Cube;
  9.     import org.papervision3d.events.InteractiveScene3DEvent;
  10.     
  11.     public class Main extends PaperBase {
  12.       
  13.        // This is the movieclip that we'll use as the texture.
  14.        private var movie:MovieClip = new MovieClip();
  15.       
  16.        // This movieclip will be completley transparent and will hold the
  17.        // texture movieclip, then move it to the correct loaction under the mouse.
  18.        private var movieParent:MovieClip = new MovieClip();
  19.       
  20.        // These are buttons that I'm going to add to the texture movieclip
  21.        private var button:MovieClip = new MovieClip();
  22.        private var showbutton:MovieClip = new MovieClip();
  23.       
  24.        // A "MovieMaterial" will use a movieclip as a texture.
  25.        private var mat:MovieMaterial;
  26.       
  27.        // The cube that we're going to texture..
  28.        private var cube:Cube;
  29.       
  30.        // This will import the file "E:/Papervision/images/showtex.jpg" to the project, and
  31.        // store the data in "ButtonIm". (This is the "Show Movieclip" Button)..
  32.        [Embed(source = "E:/Papervision/images/showtex.jpg")] private var ButtonIm:Class;
  33.       
  34.        public function Main() {
  35.          // Initiate, 400px wide, 400px tall..
  36.          init(400, 400);
  37.        }
  38.       
  39.        override protected function init3d():void {
  40.          // - See the prepareMovieclip function. This just builds the movieclip called "movie".
  41.          // You can use ANY movie clip for this..
  42.          prepareMovieclip();
  43.          
  44.          // Prepare out moviematerial. Make it animated and interactive.
  45.          mat = new MovieMaterial(movie, false, true);
  46.          mat.interactive = true;
  47.          
  48.          // Zoom in a bit..
  49.          default_camera.zoom = 5;
  50.          
  51.          // Prepare the cube.
  52.          cube = new Cube(new MaterialsList( { all: mat } ), 500, 500, 500, 4, 4, 4);
  53.          // Listen for when the mouse is moved over the cube.
  54.          // Trigger the mMove function when this happens.
  55.          cube.addEventListener( InteractiveScene3DEvent.OBJECT_MOVE, mMove);
  56.          
  57.          // Add the cube to the scene.
  58.          default_scene.addChild(cube);
  59.          
  60.          // The movieParent movieclip will hold the movieclip which is being used
  61.          // as the texture. It will then move depending on the mouse posirion.
  62.          movieParent.addChild(movie);
  63.          // Make it invisible.
  64.          movieParent.alpha = 0;
  65.          
  66.          // Add the movieParent movieclip to the stage.
  67.          addChild(movieParent);
  68.          
  69.        }
  70.       
  71.       
  72.        private function prepareMovieclip():void {
  73.          
  74.          // - This code will set up our movieclip which is going to be used
  75.          // as the texture for the cube.
  76.          // Draw Outline:
  77.          movie.graphics.beginFill(0xFFFFFF);
  78.          movie.graphics.drawRect(0, 0, 500, 500);
  79.          movie.graphics.endFill();
  80.          movie.graphics.beginFill(0x000000);
  81.          movie.graphics.drawRect(0, 0, 10, 500);
  82.          movie.graphics.drawRect(490, 0, 10, 500);
  83.          movie.graphics.drawRect(0, 0, 500, 10);
  84.          movie.graphics.drawRect(0, 490, 500, 10);
  85.          movie.graphics.endFill();
  86.          
  87.          // Draw Circular Button:
  88.          button.graphics.beginFill(0xBB0000);
  89.          button.graphics.drawCircle(0, 0, 50);
  90.          button.graphics.endFill();
  91.          button.x = 250;
  92.          button.y = 250;
  93.          button.buttonMode = true;
  94.          
  95.          // Load bitmap button texture:
  96.          var Bim:Bitmap = new ButtonIm();
  97.          // Draw "Show Movieclip" Texture:
  98.          showbutton.graphics.beginBitmapFill(Bim.bitmapData);
  99.          showbutton.graphics.drawRect(0,0,100,30);
  100.          showbutton.graphics.endFill();
  101.          showbutton.buttonMode = true;
  102.          showbutton.x = 380;
  103.          showbutton.y = 450;
  104.          
  105.          // Add the buttons to the movieclip
  106.          movie.addChild(showbutton);
  107.          movie.addChild(button);
  108.          
  109.          // -- Listen for the buttons to be clicked --
  110.          button.addEventListener(MouseEvent.CLICK, mClickButton);
  111.          showbutton.addEventListener(MouseEvent.CLICK, showHide);
  112.          // --
  113.        }
  114.       
  115.        private function showHide( e:MouseEvent ):void {
  116.          // The "Show Movieclip" button has been clicked
  117.          if (movieParent.alpha == 0) { // If it's invisible,
  118.               movieParent.alpha = 0.2; // Make it slightly visible.
  119.          }else {
  120.               movieParent.alpha = 0; // Or make it invisible again
  121.          }
  122.        }
  123.       
  124.        private function mClickButton(e:MouseEvent):void {
  125.          // The cental round button has been clicked.
  126.          if(button.name == "on"){
  127.               button.filters = null;
  128.               button.name = "off"
  129.          }else {
  130.               button.filters = [new GlowFilter(0x000000, 1, 15, 15, 10, 1)];
  131.               button.name = "on";
  132.          }
  133.        }
  134.       
  135.        private function mMove( e:InteractiveScene3DEvent ):void {
  136.          // This code is run when the mouse is moved on the cube.
  137.          // This will move the movieclip to the right place beneath
  138.          // the mouse.
  139.          movieParent.x = root.mouseX -e.x;
  140.          movieParent.y = root.mouseY -e.y;
  141.        }
  142.       
  143.        override protected function processFrame():void {
  144.          // Spin our cube a bit.
  145.          cube.yaw(0.25);
  146.          cube.pitch(0.25);
  147.        }
  148.       
  149.       
  150.     }
  151. }

The image that's embedded in the code can be found here: showtex.jpg

Have fun! More Examples coming soon.

February 21st, 2008

Categories: Tutorials | Author: Luke | Comments: |

39 Comments

  1. Comment by Mediakid on February 21, 2008 9:36 am

    hi~

    After test your new cool source,
    I found that the function "mMove" never be called.
    Is it just me?

  2. Comment by Luke on February 21, 2008 10:10 am

    Ah,

    You'll have to change the base class a bit, read the basic interactivity tutorial and you should be all set.

    -Luke

  3. Comment by Alexander on February 21, 2008 10:43 am

    The function "mMove" is not triggered. :(

  4. Comment by Luke on February 21, 2008 12:48 pm

    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

  5. Comment by andrew on February 21, 2008 2:58 pm

    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.

  6. Comment by Luke on February 21, 2008 3:12 pm

    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

  7. Comment by Mediakid on February 22, 2008 3:04 am

    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.

  8. Comment by michelle on February 22, 2008 4:25 am

    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()

  9. Comment by Daniel on February 22, 2008 2:25 pm

    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

  10. Comment by Mike on February 23, 2008 3:42 pm

    Hey Luke,

    thanks a lot... This is exactly what I need.

    Mike

  11. Comment by p auL on February 25, 2008 4:14 pm

    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?

  12. Comment by Luke on February 26, 2008 11:37 am

    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

  13. Comment by pixelvoodoo on February 26, 2008 12:51 pm

    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

  14. Comment by Luke on February 26, 2008 5:38 pm

    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

  15. Comment by Owen on February 27, 2008 3:12 pm

    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.

  16. Comment by Luke on February 27, 2008 5:43 pm

    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

  17. Comment by pixelvoodoo on February 28, 2008 11:21 am

    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?!

  18. Comment by Questions about ASE on March 9, 2008 2:45 am

    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/

  19. Comment by matthew on March 12, 2008 1:53 am

    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.

  20. Comment by Ed on March 23, 2008 3:55 pm

    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

  21. Comment by DanielAuer on March 27, 2008 10:42 am

    Great tutorials!
    But how can I do the same if I have 6 different MovieClips?

  22. Comment by Mark on March 27, 2008 4:27 pm

    i'm getting the error:

    TypeError: Error #1007: Instantiation attempted on a non-constructor.
    at main$iinit()

    Any ideas?

  23. Comment by Yann on March 27, 2008 4:59 pm

    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).

  24. Comment by Mike ness on March 31, 2008 6:52 am

    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?

  25. Comment by mojito on April 1, 2008 5:29 am

    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.

  26. Comment by spasticfantastic on April 1, 2008 11:03 am

    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.

  27. Comment by Benoit 'Raz-L' Jadinon on April 10, 2008 6:02 am

    luke, what would be the "other ways to do this" ?

  28. Comment by anwar on April 10, 2008 6:48 pm

    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 ?

  29. Comment by BeechyBoy on April 24, 2008 9:06 pm

    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?

  30. Comment by Puch on April 28, 2008 3:40 am

    help me plz!
    i replace movieclip on file .swf and the button on file .swf doesn't work. Any ideas?

  31. Comment by Peter on May 1, 2008 7:12 pm

    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?

  32. Comment by jeremy on May 2, 2008 8:23 am

    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

  33. Comment by Brian on May 8, 2008 3:45 pm

    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?

  34. Comment by Hans on May 27, 2008 12:45 pm

    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.

  35. Comment by Hans on May 27, 2008 12:57 pm

    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.

  36. Comment by Jim on June 6, 2008 2:25 pm

    @ 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!

  37. Comment by Hugo on July 1, 2008 4:19 pm

    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 0x0 px canvas, and use the panel in the MovieMaterial of a plane. Then the plane acts like a flex panel!

    Cheers

  38. Pingback by subobjective21 interactive » Working with multiple 3D objects with precise interaction. on July 4, 2008 3:44 am

    [...] folks over at blitz and at papervision2 have come up with some interesting ways to actually have real interaction with the MovieClips you [...]

  39. Comment by Evian on July 14, 2008 10:22 am

    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?

Comments RSS TrackBack Identifier URI

Leave a comment

Papervision 2 is proudly powered by WordPress and themed by Mukka-mu