Comunidad de diseño web y desarrollo en internet online

Menu estilo Dock mac AS3

Citar            
MensajeEscrito el 06 Nov 2009 12:13 pm
Hola a todos!
Partiendo de este tip estoy intentando pasarlo a AS 3, pero me funciona muy raro... Le he dado algunas vueltas pero no consigo que funcione bien.
Alguna idea?

Código ActionScript :

//align = bottom;
//esto hara que el punto de centro sea la mitad por si tenemos que reposicionarlo , el punto 1,1
//sera sera siemrpe el punto de en medio de este menú, se la asigno a variables para ser flexible 
//por si necesitamos hacer algo con ello
var centerx = 0;
var centery = 0;

//Establecemos el menú de items para saber cuanto tenemos que recorrer para hacer los cálculos
var menucount = 6;

// establecemos de que ancho son los items, para hacerlo dinámico, tomo el ultimo y asigno el ancho
// los items para ser optimos deberian tener la misma anchura
var miwidth = 40;

// establecesmos que espacio entre cada item deseamos
var miborder = 3;

// establecemos la variable inicial en el valor cero, que lelvara el control del ancho del menu
var AnchMen = 0;

//esto hara que cada ves que el menú haga un enterframe se ejecute y tengamos un monitoreo constante
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame (e:Event) : void
{
   var AnchMen = 0;
   
   //esta es la parte del tip anterior, con la única diferencia que este acumula en la variable  
   //AnchMen el ancho del menú
   for (var i = 0; i < menucount; i++) {
      var xxm = this["btn0" + i].mouseX;
      var yym = this["btn0" + i].mouseY;
      var xm = Math.sqrt(xxm * xxm + yym * yym);
      if (xm < 40) {
         this["btn0" + i].scaleX = this["btn0" + i].scaleY += ((2 - xm) - this["btn0" + i].scaleY) / 3;
      } else {
         this["btn0" + i].scaleX = this["btn0" + i].scaleY += (1 - this["btn0" + i].scaleY) / 3;
      }
      
      //esta parte va acumulando el ancho de los elementos
      AnchMen += this["btn0" + i].width;
   }
   
   //hacemos el calculo total de incremento de los espacios entre elementos del menu mas el espacio de los elementos
   AnchMen += (menucount - 1) * miborder;
   
   // Inicializamos las posiciones 
   // toma el ancho lo divide entre dos  y se lo resta al centro garantizando que el menu quede centrado
   var xpos = Math.round((centerx - AnchMen) / 2);
   
   // como el primer item no tiene un elemento anterior de donde partir en la funcion  se establece el punto de parida 
   // se hace el calculo del espacio del elemento uno se incrementa y se parte del elemento 2
   xpos += Math.round((this["btn0" + 0].width + miborder) / 2);
   for (var n = 1; n < menucount; n++) {
      x = n - 1;
      xpos += (this["btn0" + x].width / 2) + miborder + (this["btn0" + n].width / 2);
      this["btn0" + n].x = xpos;
      this["btn0" + n].y = centery;
   }
   
   //como el elemento uno no ha sido establecido se le resta su ancho menos al elemento 2 para lograr su posición 
   this["btn0" + 0].x = (this["btn0" + 1].x - this["btn0" + 0].width - miborder);
   this["btn0" + 0].y = centery;
}

Por Fusel

Claber

339 de clabLevel



Genero:Masculino  

Madrid (España)

firefox
Citar            
MensajeEscrito el 06 Nov 2009 03:58 pm
y que es lo que no funciona??

Por Angel Roberto

Claber

248 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Nov 2009 02:26 am
Asi se verá mas claro...



Gracias!!

Por Fusel

Claber

339 de clabLevel



Genero:Masculino  

Madrid (España)

firefox
Citar            
MensajeEscrito el 07 Nov 2009 05:49 pm
Mas claro ni el agua.

Probe el codigo y me pasa lo mismo que a ti, probe el codigo de AS2 del tip y me fuinciona muy bien creo que no es solo cuestion de traducir las instrucciones a AS3 si no tmb la logica del programa, lamento no se r de mucha mas ayuda en este momento pero no tengo tanta chance de meterme ahorita con ese codigo.

Por Angel Roberto

Claber

248 de clabLevel



 

firefox
Citar            
MensajeEscrito el 08 Nov 2009 01:44 am
yo lo pase hace tiempo atras este código a AS3... el problema que tiene es que esta usando scaleX y tiene que ser width.

Chaus ^^

Por lucasmoyano

Claber

1960 de clabLevel

22 tutoriales

Genero:Masculino  

Developer

firefox
Citar            
MensajeEscrito el 09 Nov 2009 08:45 pm
yo hace tiempo hice un menu asi , solo que yo me base en el tutorial del sargento y este fue el code en AS3.

Código ActionScript :

package 
{
   import flash.display.Sprite;
   import flash.events.Event;
   import flash.events.MouseEvent;
   
   public class MenuOSX extends Sprite
   {
      private var _holder:Sprite;
      private var _item:Sprite
      private var _items:Array;
      
      private var _count:int = 6;
      private var _spacing:int = 10;
      
      public function MenuOSX()
      {
         stage.frameRate = 30;
         init();
      }
      
      private function init():void
      {
         _holder = new Sprite();
         _holder.x = 80;
         _holder.y = 80;
         
         addChild(_holder);
         _items = new Array();
         
         for(var i:uint=0; i<_count; i++)
         {
            _item = makeItem(0xCCCCCC,50,50);
            _items.push(_item);
         }
         
         addEventListener(Event.ENTER_FRAME,loop);
      }
      
      private function makeItem(color:uint, w:Number,h:Number):Sprite
      {
         var item:Sprite = new Sprite();
         item.graphics.beginFill(color);
         item.graphics.drawRect(-w/2, -h/2, w, h);
         item.graphics.endFill();
         _holder.addChild(item);
         return item;
      }
      
      private function loop(evtObj:Event):void
      {
         var minDist:Number = 100;
         var maxScale:Number = 0.5;
         var px:Number =_holder.mouseX;
         var py:Number =_holder.mouseY;
         var scale:Number;
         var dx:Number;
         var dy:Number;
         var dist:Number;
         
         for(var i:uint=0; i<_items.length; i++)
         {
            
            dx = _items[i].x - px;
            dy = _items[i].y - py;
            dist = Math.sqrt(dx*dx + dy*dy);
            scale = ((minDist - dist)/minDist)* maxScale;
            _items[i].scaleX = Math.max(1,1 + scale);
            _items[i].scaleY = _items[i].scaleX;
            if(!i)
            {
               _items[i].x = i;
            }else
            {
               _items[i].x = _items[i-1].x + (_items[i-1].width/2) + _spacing +(_items[i].width/2);
            }
            
         }
         
      }
   }
}


y el resultado.



Jonathan.

Por maneuver

243 de clabLevel



Genero:Masculino  

Mexico City

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.