Menu Button Alignment Problem

  • Born
  • Born
  • User avatar
  • Posts: 2
  • Loc: My House!

Post 3+ Months Ago

Well really it's about each button's sub-menu that loads under it. My actionscript loads variables passed in through xml and then loads runs a function to add in the page buttons that are sized by the text width + 20px wide of padding (10 on each side) and then a hight of 40px. My problem arises when the drop-down occurs on rollover of the button. I want the sub-menu buttons to be right aligned to the right edge of the selected main button. Here is my action for it:

Code: [ Select ]
function pgBtnOver(e:Event):void{
    //tween bg color and text color
    //if button has sub buttons tween it down
    if ( > 1){ = 1; = true;
        var tempY:int = (pgBtnHeight + spaceBtwSubs);
        var tempX:int = (pgBtnWidth - subPgBtnWidth); = tempX;
        for (var p:int =; p > 0; p--){
            TweenLite./to(MovieClip(, .5, {y:tempY,ease:Expo.easeOut});
            tempY += (subPgBtnHeight + spaceBtwSubs);
  1. function pgBtnOver(e:Event):void{
  2.     //tween bg color and text color
  3.     TweenLite./to(,.5,{tint:pgBtnOverBgClr,overWrite:1});
  4.     TweenLite./to(,.5,{tint:pgBtnOverTxtClr});
  5.     //if button has sub buttons tween it down
  6.     if ( > 1){
  7. = 1;
  8. = true;
  9.         var tempY:int = (pgBtnHeight + spaceBtwSubs);
  10.         var tempX:int = (pgBtnWidth - subPgBtnWidth);
  11. = tempX;
  12.         for (var p:int =; p > 0; p--){
  13.             TweenLite./to(MovieClip(, .5, {y:tempY,ease:Expo.easeOut});
  14.             tempY += (subPgBtnHeight + spaceBtwSubs);
  15.         }
  16.     }
  17. }

All my variables are pretty easy to guess what they mean. Varibles such as pgBtnHeight and pgBtnWidth are made when loading each main button. The width of each main button varies due to the text width is different in each. The sub-menu buttons are all 180px wide. My problem is that the sub-menu aligns right, but to the "pgBtnWidth" of the last button loaded. So when any of the other buttons have a drop-down sub-menu, it aligns right to the target button's right edge, just with a few pixel offset because of the target button's different text than the last button loaded. I hope this makes sense so far.

Then I tried in place of:

Code: [ Select ]
var tempX:int = (pgBtnWidth - subPgBtnWidth);


Code: [ Select ]
var tempX:int = ( - subPgBtnWidth);

But doing that align's the x of the sub-menu buttons to the x of the target's button's x. Not really sure why. I then tried currentTarget instead of target and it just did the same thing. I could get the same effect making the x at 0.

Anything I missed on how to align this correctly?

  • Newbie
  • Newbie
  • User avatar
  • Posts: 9
  • Loc: Quebec

Post 3+ Months Ago

First, you must use currentTarget (it will give the display object related to the event), because target gives the display object where you did rollOver (which can be "anything" and make everything break).

Second, you could try this :

Code: [ Select ]
var tempX:int = ( + -;

But, since I'm seeing only a piece of code... I cannot assume the whole story (real value, clip, stroke, etc). But I'm sure it is only a little detail which could be easily "repaired".

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 4 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.