HELP! Elastic Menu / add - removeChild problems
Hi people,
I´m trying to develope a simple elastic menu in AS3 but I have several problems because is difficult undestand OOP when I come from AS2.
I have a class named "menu" to create a vertical menu with n elements using a MovieClip from the library. It is linked properly as "base_primaria" and with MovieClip class as base class.
Every element in the menu is in button mode and when is clicked calls a method (crearsub) to create a submenu.
I have another class named "submenu" that creates a submenu with n elements using a MovieClip from the library. It is linked properly as "base_secundaria" and with MovieClip class as base class.
All the elements in the main menu must be relocated depending on the .y position and their .height. For that I'm using a method inside "menu" class named "posicionar". To animate the elements I use TweenLite.
The first problem is I want to relocate all the elements through TweenLite and it is not working. Probably the "posicionar" function is wrong.
The second problem is I want to click in one element from the main menu and it creates his own submenu. If there is one element with a submenu created, it must to disapear.
All the elements must to relocate in real time in every click.
Here the "menu" class code:
Code:
package clases.menu{
/** * ... * @Roman Perona */
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();
}
}
}
Here the "submenu" class code:
Code:
package clases.menu{
/** * ... * @Roman Perona */
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
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;
/*subitem.addEventListener(MouseEvent.MOUSE_DOWN,crearsub);
subitem.addEventListener(MouseEvent.MOUSE_UP,eliminarsub);*/
subitemArray.push(subitem);
tamArray=subitemArray.length;
}
}
}
}
If someone can help me, I really apreciate it because I'm really stuck in concept and scripting.
Thanks in advance
RO
HELP!!! Elastic Menu AS3 almost done!!!
check the code now:
Code:
package clases.menu{
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 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();
}
}
}
Check the SWF
Problems:
- How to avoid repeat the method to create submenu when it is already created in the element clicked.
- How to avoid the elements from submenu fire the method create submenu.
target/currentTarget/mouseChild=false... anything else.
- Why relocate method doesn't work with TweenLite?
Thanks
--------------------------------------------------------------------------------
We can think together