Comunidad de diseño web y desarrollo en internet online

HELP!!!! MENU ELASTICO problemas con la posición

Citar            
MensajeEscrito el 15 Nov 2009 12:07 am
Hola a todos,
Estoy un poco desesperado porque que como muchos saben, AS3 nos lo a puesto dificil a aquellos que no sabemos nada de OOP y venimos de AS2.
El caso es que estoy desarrollando un menú elástico con AS3 y tengo muchos problemas NECESITO AYUDAAAAA! Tenía que descargar.
Explico el proyecto.
Tengo una clase llamada "menu" que crea un menú vertical con n elementos usando un MovieClip de la biblioteca. El clip está perféctamente vinculado como "base_primaria" y tiene como clase base la de MovieClip.
Cada elemento del menú están en "button mode" y cuando clicas, llama a un método (crearsub) que crea un submenú dentro del elemento clicado.
Tengo otra clase llamada "submenu" que crea el submenú con n elementos usando un MovieClip de la biblioteca. El clip está perféctamente vinculado como "base_secundaria" y tiene como clase base la de MovieClip.
Todos los elementos del menú tienen que estar colocados dependiendo de la posición "y" y altura del resto de los elementos del menú. Para eso estoy usando un método dentro de la clase "menu" llamado "posicionar". Para animar los elementos estoy usando TweenLite.

El primer problema es que quiero recolocar todos los elementos del menú con TweenLite o el Tween de flash(que ya lo he probado) y no funciona. Probablemente la función "posicionar" sea incorrecta o no sea este el método a seguir.
El segundo problema esque quiero que al clicar en un elemento del menú principal cree su propio submenú. Si ya hubiera un submenú creado en otro elemento, éste desaparecería.
Todos los elementos deben recolocarse en cada click.

Aquí el código de la clase menu:

Código ActionScript :

package clases.menu{
  import flash.display.DisplayObject;
 import flash.display.DisplayObjectContainer;
 import flash.display.MovieClip;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.display.Sprite;
 import clases.menu.submenu;
 import com.greensock.*;
 import com.greensock.easing.*;
 import com.greensock.plugins.*;
 public class menu extends MovieClip {
 
  private var numelement:int;
  private var itemArray = [];
  private var tamArray:int;
  private var i:int;
  private var n:int;
  private var j:int;
  private var newdestino:int;
 
  public function menu() {
    for (n=0; n<4; n++) {
    var item:base_primaria= new base_primaria();
    addChild(item);
    item.x = 0;
    item.y = (item.height+2) * n ;
    item.buttonMode = true;
    item.name="elementomenu"+n;
 
    item.addEventListener(MouseEvent.MOUSE_DOWN,crearsub);
    item.addEventListener(MouseEvent.MOUSE_UP,eliminarsub);
    itemArray.push(item);
    tamArray=itemArray.length;
 
   }
  }
  private function posicionar():void {
   for (i=0; i<tamArray-1; i++) {
    var elemento=itemArray[i+1];
    newdestino = (itemArray[i].y+itemArray[i].height+2);
    // the TweenLite doesn't work properly because one of another element doesn't answers
    //I don't know if this is the best way to do it.
 
    TweenLite.to(elemento, 1, {x:elemento.x, y:newdestino, ease:Elastic.easeOut});
   }
  }
  private function crearsub(e:MouseEvent):void {
   var objeto=e.target;
   var subcontenedor:Sprite= new Sprite();
   var misubmenu:submenu = new submenu();
   subcontenedor.addChild(misubmenu);
   objeto.addChild(subcontenedor);
   misubmenu.alpha=0;
   misubmenu.y=26;
   misubmenu.x=20;
   misubmenu.name="submenu";
   TweenLite.to(misubmenu,0.5,{alpha:1});
   posicionar();
     }
  private function eliminarsub(e:MouseEvent):void {
   //Here I want to remove the submenu and relocate the elements again with "posicionar()"
   posicionar();
  }
 }
}


Aquí el código de la clase submenú:

Código ActionScript :

package clases.menu{
 
 import flash.display.Sprite;

 public class submenu extends Sprite {
  private var numelement:int;
  private var subitemArray = [];
  private var tamArray:int;
  private var n:int;
  private var j:int;
  private var objeto:Object;
  public function submenu() {
    for (n=0; n<4; n++) {
    var subitem:base_secundaria= new base_secundaria();
    addChild(subitem);
    subitem.x = 0;
    subitem.y = (subitem.height+2) * n ;
    subitem.buttonMode = true;
    subitemArray.push(subitem);
    tamArray=subitemArray.length;
   }
   }
 }
}


Si alguien me pudiera ayudar, realmente lo agradecería porque estoy totalmente estancado :cry: .

Gracias por adelantado
RO

Por creacionro

10 de clabLevel



 

msie7
Citar            
MensajeEscrito el 15 Nov 2009 02:51 am
yo creo que deberias de cambiar la logica, yo crearia los botones superiores con un for i y dentro de ese un for j y creo los sub botones, esto al iniciar la clase "constructor" , ya que no me parece optimo que cada click en el boton superior crees objetos, despues crearia un mascara para los sub botones y controlaria su height mediante el click de los botones superior, intentalo asi y postea errores que tengas. Suerte!!.

Jonathan

Por maneuver

243 de clabLevel



Genero:Masculino  

Mexico City

firefox
Citar            
MensajeEscrito el 15 Nov 2009 03:09 am
Muchas gracias jn_Flash
Hacerlo con máscaras no es mi intención ya que lo que intento es que se cree un sprite dentro de cada elemento para poder animarlo independientemente con un fade in y fade out. Por ahora tengo el código bastante avanzado hasta la parte de la reposición de los elementos.

Código ActionScript :

package clases.menu{
   import flash.display.DisplayObject;
   import flash.display.DisplayObjectContainer;
   import flash.display.MovieClip;
   import flash.events.Event;
   import flash.events.MouseEvent;
   import flash.display.Sprite;
   import fl.transitions.Tween;
   import fl.transitions.easing.*;
   import clases.menu.submenu;
   import com.greensock.*;
   import com.greensock.easing.*;
   import com.greensock.plugins.*;

   public class menu extends MovieClip {


      private var numelement:int;
      private var itemArray = [];
      private var tamArray:int;
      private var i:int;
      private var n:int;
      private var j:int;
      private var newdestino:int;
      var newtarget:MovieClip;
      var oldtarget:MovieClip;

      public function menu() {
         for (n=0; n<4; n++) {
            var item:base_primaria= new base_primaria();
            addChild(item);
            item.x = 0;
            item.y = (item.height+2) * n ;
            item.buttonMode = true;
            item.name="elementomenu"+n;

            item.addEventListener(MouseEvent.ROLL_OVER,crearsub);
            item.addEventListener(MouseEvent.ROLL_OUT,eliminarsub);
            itemArray.push(item);
            tamArray=itemArray.length;

         }
      }
      private function posicionar():void {
         
         for (i=0; i<tamArray-1; i++) {
            var elemento=itemArray[i+1];
            newdestino = (itemArray[i].y+itemArray[i].height+2);
            TweenLite.to(elemento, 1, {x:elemento.x, y:newdestino, ease:Elastic.easeOut});
         }
         
      }
      private function crearsub(e:MouseEvent):void {
         var objeto=e.currentTarget;
         var subcontenedor:Sprite= new Sprite();
         var misubmenu:submenu = new submenu();
         subcontenedor.addChild(misubmenu);
         objeto.addChild(subcontenedor);
         misubmenu.alpha=0;
         misubmenu.scaleY=0.99;
         misubmenu.scaleX=0.99;
         misubmenu.y=26;
         misubmenu.x=20;
         TweenLite.to(misubmenu,0.2,{scaleX: 1,scaleY:1,alpha:1});
         posicionar();
         oldtarget=objeto;
      }
      private function eliminarsub(e:Event):void {
         e.currentTarget.removeChildAt(1);
         posicionar();
      }
   }
}


donde tengo problemas es en la parte de la reposición de los elementos.


[flash width=600 height=600]http://www.oconteudo.org/pruebas/index.swf[/flash]


Por ahora, es ese mi mayor problema ya que no se si debería hacer un loop para reposicionarlos, aunque funciona, pero las posiciones nunca son las correctas. En fin, estoy bloqueado con eso y quiero pasar a poder controlar todo esto con un solo click, ahí es cuando vendrá lo gordo. Que un submenú aparezca y el otro desaparezaca...

alguna idea?

gracias RO

Por creacionro

10 de clabLevel



 

msie7
Citar            
MensajeEscrito el 15 Nov 2009 03:10 am
ver swf :
http://www.oconteudo.org/pruebas/index.swf

Por creacionro

10 de clabLevel



 

msie7
Citar            
MensajeEscrito el 15 Nov 2009 03:24 am
si pongo en posicionar() en vez del tween esto:

elemento.y=newdestino;

funciona a las mil maravillas pero con Tween no... misterio.

Que podrá ser?.

Y después lograr que cuando se cliquee en uno, el otro se desactive, se encoja la máscara o desaparezca el submenú. ¿Cómo puedo determinar que elemento se activa y cual se desactiva?

Por creacionro

10 de clabLevel



 

msie7
Citar            
MensajeEscrito el 15 Nov 2009 04:26 am
GRANDES AVANCES , no se en qué dirección pero algo mejor está:

código ahora:

Código ActionScript :

package clases.menu{
   import flash.display.DisplayObject;
   import flash.display.DisplayObjectContainer;
   import flash.display.MovieClip;
   import flash.events.Event;
   import flash.events.MouseEvent;
   import flash.display.Sprite;
   import fl.transitions.Tween;
   import fl.transitions.easing.*;
   import clases.menu.submenu;
   import com.greensock.*;
   import com.greensock.easing.*;
   import com.greensock.plugins.*;

   public class menu extends MovieClip {


      private var numelement:int;
      private var itemArray = [];
      private var tamArray:int;
      private var i:int;
      private var n:int;
      private var j:int;
      private var newdestino:int;
      var newtarget:MovieClip;
      var oldtarget:MovieClip;
      var objetivo:MovieClip;
      

      public function menu() {
         for (n=0; n<4; n++) {
            var item:base_primaria= new base_primaria();
            addChild(item);
            item.x = 0;
            item.y = (item.height+2) * n ;
            item.buttonMode = true;
            item.name="elementomenu"+n;

            item.addEventListener(MouseEvent.CLICK,crearsub);
            //item.addEventListener(MouseEvent.ROLL_OUT,eliminarsub);
            itemArray.push(item);
            tamArray=itemArray.length;

         }
               }
      private function posicionar():void {
         
         for (i=0; i<tamArray-1; i++) {
            var elemento=itemArray[i+1];
            newdestino = (itemArray[i].y+itemArray[i].height+2);
            elemento.y=newdestino;
            //TweenLite.to(elemento, 1, {x:elemento.x, y:newdestino, ease:Elastic.easeOut});
         }
         
      }
      private function crearsub(e:MouseEvent):void {
         eliminarsub(oldtarget);
         var objeto=e.currentTarget;
         if(objeto!=oldtarget){
         var subcontenedor:Sprite= new Sprite();
         var misubmenu:submenu = new submenu();
         subcontenedor.addChild(misubmenu);
         objeto.addChild(subcontenedor);
         misubmenu.alpha=0.5;
         misubmenu.y=26;
         misubmenu.x=20;
         TweenLite.to(misubmenu,0.8,{alpha:1});
         oldtarget=objeto;
         }
         posicionar();
      }
      private function eliminarsub(objetivo:MovieClip):void {
         if(objetivo!=null){
            objetivo.removeChildAt(1);
                  }
         trace(objetivo);
         oldtarget=newtarget;
         posicionar();
      }
   }
}



ver swf




el caso es que tengo que depuerar el código mucho todavía porque al cliquear sobre un elemento, si este está activado, osea con un submenú, borrar el submenú y lo vuelve a crear, cuando no tendría que hacer nada. ¿Alguna idea?
¿Alguna idea de por qué no funciona la reposición con TweenLite?

Por creacionro

10 de clabLevel



 

msie7

 

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