The difference between ROLL_OVER / ROLL_OUT and MOUSE_OVER / MOUSE_OUT

Away3D supports the Mouse3DEvent.ROLL_OVER / Mouse3DEvent.ROLL_OUT and Mouse3DEvent.MOUSE_OVER / Mouse3DEvent.MOUSE_OUT pair of events. While both pairs of events are triggered when the mouse is moved over an object and then back off, there is a subtle difference between when they are dispatched.

Take the following application. It creates two overlapping spheres, with each added to a container, and uses the trace() function to notify us when the Mouse3DEvent.ROLL_OVER, Mouse3DEvent.ROLL_OUT, Mouse3DEvent.MOUSE_OVER and Mouse3DEvent.MOUSE_OUT events are dispatched by the container.

package
{
  import away3d.containers.ObjectContainer3D;
  import away3d.events.MouseEvent3D;
  import away3d.materials.WireColorMaterial;
  import away3d.materials.WireframeMaterial;
  import away3d.primitives.Sphere;

  public class MouseRollMoveEventDemo extends Away3DTemplate
  {
    public function MouseRollMoveEventDemo()
    {
      super();
    }

In the initScene() function we create two spheres that are separated by 100 units along the X-axis. Since these spheres have a default radius of 100 units they will overlap.

    protected override function initScene():void
    {
      super.initScene();
      var sphere1:Sphere = new Sphere (
        {
          x: 50,
          y: 0,
          z: 500
        }
      );

      var sphere2:Sphere = new Sphere (
        {
          x: -50,
          y: 0,
          z: 500
        }
      );

The two sphere 3D objects are added as children of a ObjectContainer3D object, which in turn is added as a child of the scene.

      var container:ObjectContainer3D = 
new ObjectContainer3D(sphere1, sphere2);
      scene.addChild(container);

We setup event listeners for three events: MouseEvent3D.MOUSE_OVER, MouseEvent3D.MOUSE_OUT, and MouseEvent3D.ROLL_OVER. Three anonymous functions will be called in response to these events, each using the trace() function to display a line of text.

      container.addEventListener(
        MouseEvent3D.MOUSE_OVER, 
        function(event:MouseEvent3D):void
        {
          trace("Container Mouse Over");
        }
      );
      container.addEventListener(
        MouseEvent3D.MOUSE_OUT, 
        function(event:MouseEvent3D):void
        {
          trace("Container Mouse Out");
        }
      );
      container.addEventListener(
        MouseEvent3D.ROLL_OVER, 
        function(event:MouseEvent3D):void
        {
          trace("Container Roll Over");
        }
      );
      container.addEventListener(
        MouseEvent3D.ROLL_OUT, 
        function(event:MouseEvent3D):void
        {
          trace("Container Roll Out");
        }
      );
    }
  }
}

With the application running, the mouse is moved from the empty space surrounding the two spheres onto the one on the left, like in the following image:

The difference between ROLL_OVER / ROLL_OUT and MOUSE_OVER / MOUSE_OUT

This produces the following output:

  • Container Mouse Over
  • Container Roll Over

Since both the Mouse3DEvent.ROLL_OVER and Mouse3DEvent.MOUSE_OVER events are triggered when the cursor is moved over a 3D object, you would expect to see this output.

Now the mouse cursor is moved from the left sphere to the right sphere.

The difference between ROLL_OVER / ROLL_OUT and MOUSE_OVER / MOUSE_OUT

This second movement produces the following output:

  • Container Mouse Out
  • Container Mouse Over

When the mouse is moved off the left sphere the Mouse3DEvent.MOUSE_OUT event was dispatched. This event then bubbled up to the parent container. Because the two spheres are overlapping, when the mouse cursor moved out of the left sphere, it immediately moved over onto the right sphere. This dispatched the Mouse3DEvent.MOUSE_OVER event, which again bubbled up to the parent container.

During this movement the cursor may have moved from one of the containers' child 3D object to the next, but it never passed over empty space in between. In other words, the mouse never moved out of the container. Herein lies the big difference between the two pairs of events. While the Mouse3DEvent.MOUSE_OVER and Mouse3DEvent.MOUSE_OUT events have bubbled up from the children of the container as the mouse moves over them individually, the Mouse3DEvent.ROLL_OVER and Mouse3DEvent.ROLL_OUT even ver and out of all of the children.

Finally, the mouse moves off the right sphere and back over empty space.

The difference between ROLL_OVER / ROLL_OUT and MOUSE_OVER / MOUSE_OUT

This final movement produces the following output:

Container Mouse Out

Container Roll Out

The Mouse3DEvent.MOUSE_OUT event is triggered because the mouse has moved out of the right sphere. The Mouse3DEvent.ROLL_OUT event is also triggered because the mouse has moved out of all the children contained in the container.

So the Mouse3DEvent.ROLL_OVER event will be dispatched when the mouse moves over any of a container's children, and then the Mouse3DEvent.ROLL_OUT event will be dispatched when the mouse moves off all of the children. On the other hand, the Mouse3DEvent.MOUSE_OVER and Mouse3DEvent.MOUSE_OUT events will be triggered when the mouse moves over and out of each of the individual children.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.170.14