Cómo crear un menú dinámico 3D con Actionscript 3

Continuando con el tip anterior, hago muestra de esta sencilla clase, que es capaz de llamar un grupo de Clips de película a través de un Array, mientras estos estén contenidos en la biblioteca y así agregarlos al escenario para formar un menú dinámico en tercera dimensión similar al siguiente:

Como podrás ver, se explota la técnica para detectar que cara se mantiene visible hacia la pantalla, completamente explicada aqui, solo que aplicada a múltiples objetos, todo simultáneamente.

Esta es la clase:

Código :

package  
{
   import flash.events.Event;
   import flash.events.MouseEvent;
   import flash.display.MovieClip;
   import flash.display.Sprite;
   import flash.geom.Matrix3D;
   import flash.geom.Point;
   //
   import fl.transitions.*;
   import fl.transitions.easing.*;
   //
   public class Ease3DMenu extends Sprite  
   {
      private var Elements:Array;
      private var FocusClip:MovieClip;
      private var P1:Point, P2:Point, P3:Point;
      private var magnitud:Number = new Number();
      private var container:Sprite = new Sprite();
      private var elementArr:Array = new Array();
      //
      public function Ease3DMenu (array:Array = null):void  
      {
         container.x = 250;
         container.y = 150;
         addChild(container);
         container.buttonMode = true;
         if(array != null){Elements = array;}
         for (var i:int = 0; i < Elements.length; i++)
         {
            var element:MovieClip = Elements[i];
            //
            element.x = element.width / 2 - ((element.width + 10) * Elements.length) / 2 + i * (element.width + 10);
            element.addEventListener(MouseEvent.CLICK, eventHandler);
            elementArr.push({elm:element, z:100});
            container.addChild(element);
            element.stop();
         }
         addEventListener(Event.ENTER_FRAME, eventHandler);
      }
      //
      private function eventHandler(event:Event):void
      {
         switch(event.type)
         {
            case Event.ENTER_FRAME:
            container.rotationX =  container.mouseY /10;
            container.rotationY =  container.mouseX /10;
            //
            for (var i:int = 0; i < elementArr.length; i++)
            {
               P1 = elementArr[i].elm.localToGlobal(new Point(0,0));
               P2 = elementArr[i].elm.localToGlobal(new Point(100,0));
               P3 = elementArr[i].elm.localToGlobal(new Point(0,100));
               elementArr[i].elm.gotoAndStop(((P2.x-P1.x)*(P3.y-P1.y) - (P2.y-P1.y)*(P3.x-P1.x)) > 0 ? 1 : 2);
            }
            break;
            //
            case MouseEvent.CLICK:
               if (FocusClip)
               {
                  FocusClip.focus = true;
                  var a:Tween = new Tween(FocusClip, "z", Strong.easeIn, FocusClip.z, 100, .5, true);
                  var b:Tween = new Tween(FocusClip, "rotationY", Strong.easeIn, FocusClip.rotationY, 0, .5, true);
               }
               //
               FocusClip = MovieClip(event.currentTarget);
               container.addChild(FocusClip);
               var c:Tween = new Tween(FocusClip, "z", Strong.easeOut, FocusClip.z, -100, .5, true);
               var d:Tween = new Tween(FocusClip, "rotationY", Strong.easeOut, FocusClip.rotationY, 180, .5, true);
            break;
         }
      }
   }
}

Y su uso (también muy sencillo) es el siguiente, donde "Elemento1" y "Elemento2" son Clips de película de la Biblioteca:

Código :

import Ease3DMenu;
var elementos:Array = new Array (new Elemento1(), new Elemento2());
var menu:Ease3DMenu = new Ease3DMenu(elementos);
addChild(menu);

Nótese que en esta clase he empleado la clase Tween nativa de Flash y no otro tipo de librería externa, que aunque prefiero utilizarlas me parecía menos apropiado ya que obligaría a quien la use tener que conseguirla para hacer funcionar el ejemplo.

 

Tweet