11. Advanced Interactivity 2

Published
by
Charlie
on February 21, 2008
in Tutorials
. 56 Comments Tags: , , , , .

**UPDATE
This tutorial has been updated
view-update

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

PLAIN TEXT
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.

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

56 Responses to “11. Advanced Interactivity 2”

Feed for this Entry Trackback Address
  • 1 fayssal tahtoub
    February 12, 2009 at 10:41 am

    i make the same with an other exemple but mybutton can’t listing to click,thnks

  • 2 Chris
    March 27, 2009 at 8:27 am

    Like danielauer I wonder how to make this work when you have different movieclips on the different sides of the cube? I see 2 ways 1)you bundle the movieclips together in one large container movieclip, next to each other 2) In some way determine which face the mouse is over and change the container movieclip accordingly. Any ideas/suggestions on which approach to take?

    Otherwise it works smoothly (and using textfields pose no problems once you embed the fonts).

  • 3 aytek
    May 6, 2009 at 1:32 pm

    good way but I found a bug. rollover a button and wait its passing, after passing, the rollover state will continue. thereafter click your mouse but not move it. u ll see that all buttons will be clicked

  • 4 FlashSpec
    May 23, 2009 at 5:55 pm

    aytek – good point. I guess the solution would be a timer that checks is the mouse is still on the button. Maybe that would “wake up” the mouse :)

    Check out some of my stuff: http://bit.ly/CtVgv

  • 5 Mywoda
    August 19, 2009 at 4:54 pm

    Great example! But this won’t work if you have multiple objects in the viewport.

    Kudos!

  • 6 El Salta
    August 26, 2009 at 11:59 am

    Hello!! first: Great tutorials collection, congratulations!! Im follow one by one!!! thanks!!
    I have a cuestion.. what happens if the function for my button (my MC button) is in the same button (movieclip), in his own timeline? How i can call a function inside of my button? Is strictly necesary that the function is in my Papervision AS? Sorry about my english.. understand you my question?
    I already have my button programmed before
    Thanks very much!!

« Older Comments

Leave a Reply


Follow papervision2 on Twitter

RSS Feed