FORUMS: list search recent posts

Menu fading in/out causing layering problems

COW Forums : Adobe Flash

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
John Jennette
Menu fading in/out causing layering problems
on Jul 7, 2011 at 1:25:30 pm

Hi - I'm new to Flash and Creative Cow, and I hope someone can steer (ahaha... sorry) me in the right direction with this project.

I've been wrestling with this for a while, trying to figure it out on my own by cobbling together various tutorials, but I'm at a point where anything I try creates another bug to work out, and I'm wasting time.

Here's the lowdown: When a user mouses over a circular button, a menu panel fades in to the right of the button. Unsurprisingly, I want it to fade out when the user mouses out. That's where I find trouble. I finally have the menu panel doing what I want, but now I find that if the panel covers any other button when it is visible, that button loses functionality when the first menu panel fades out.

I'm hitting a problem getting the panel to disappear both visually and functionally - Flash is still "seeing" the panel even when the user cannot. I've tried controlling the panel's 'visible' parameter, but it destroys the fade out. Any help would be much appreciated!

Here's my code - hopefully my rambling above will make more sense with this. Like I said, I'm very new to both ActionScript and these forums, so if I'm missing anything, let me know! Thanks!

stop();
import fl.transitions.Tween;
import fl.transitions.easing.*;

var openTween:Tween;
var closeTween:Tween;

panel.visible = false;
panel.alpha = 0;

button.addEventListener(MouseEvent.ROLL_OVER, over, false, 0, true);
addEventListener(MouseEvent.ROLL_OUT, out, false, 0, true);


// FADE IN & FADE OUT FUNCTIONS

function over(event:MouseEvent):void
{
panel.visible = true;
openTween = new Tween(panel,
"alpha",
None.easeNone,
0,
1,
0.3,
true);
panel.learnMore1.buttonMode = true;
panel.learnMore1.addEventListener(MouseEvent.CLICK, goThere);
}

function out(event:MouseEvent):void
{
openTween = new Tween(panel,
"alpha",
None.easeNone,
panel.alpha,
0,
0.3,
true);
panel.learnMore1.removeEventListener(MouseEvent.CLICK, goThere);
panel.learnMore1.buttonMode = false;
}


// LEARN MORE LINKS SETUP

function goThere(event:MouseEvent):void {
if (event.target == panel.learnMore1) {
navigateToURL(new URLRequest("[url]"));
}
}


Return to posts index

demetri tashie
Re: Menu fading in/out causing layering problems
on Jul 7, 2011 at 2:58:22 pm

you will need to understand the difference between alpha = 0 and visibility = false.

without delving too far into your code, you can see that you are tweening to an alpha = 0.

with alpha = 0, the movieclip is not seen, but it is still 'there' on the stage. so anything it is actually sitting on top of can not be accessed by a mouse. if you think about it, in AS3 alpha is a spectrum of opacity from 1 ( full opacity) to 0 (no opacity). if you tweened it to .1 instead of 0, it would appear very weak, but it would still be there. so even though a 0 alpha makes it fade out completely, it is still 'there'

visibility = false on the other hand is like an on and off switch. it is either on ( visible = true) or off ( visible=false)

in the system you set up, you would need to do something after the alpha reaches 0. there are different choices - you could change the object depth so that it actually now sits under the other visible clips, or you could change the visibility to false( my preferred method).

i find it better and easier to use an outside tweening engine ( greensock's TweenLite is my favorite(http://www.greensock.com/tweenlite/). with it, you can easily do call backs, or do another function once the tween is complete ( onComplete)

looking at my code which follows, clip0 is equivalent to your round button, and clip2 is equivalent to the menu that fades in and out.

the ROLL_OVER starts the tween to fade the alpha to 0, then calls the next function which sets the visibility to false.

to reverse, the ROLL_OUT first tweens the visibility to true, then calls the function which tweens the alpha from 0 to 1.

hope that makes sense. read up on TweenLite on their site for specific TweenLite help.
import gs.*; // this is how I import tweenlite. your path may differ

clip0.addEventListener(MouseEvent.ROLL_OVER, clipFadeOut);
clip0.addEventListener(MouseEvent.ROLL_OUT, clipVisible);


function clipFadeOut(e:MouseEvent):void {
TweenLite.to(clip2,2,{alpha:.1, onComplete:clipNotVisible});
}

function clipNotVisible(){
clip2.visible=false;
}


function clipVisible(e:MouseEvent){
TweenLite.to(clip2,.1,{visible:true, onComplete:clipFadesIn});
}
function clipFadesIn():void {
TweenLite.to(clip2,2,{alpha:1});
}

if you do decide to use TweenLite, then you can easily adapt my code for your purposes.
hope that helps


Return to posts index

John Jennette
Re: Menu fading in/out causing layering problems
on Jul 7, 2011 at 5:08:37 pm

Thank you so much for your help! I tried using TweenLite and the problem is fixed - I was getting bogged down with visible vs alpha and getting nowhere.

However, something else has come up (surprise surprise). The tweening and visibility work fine, but the menu panel is not supposed to be visible at the start. As it is now - with the code you provided - the full menu is visible before mousing over the button. Once you mouse over, it operates as desired, but how can I get the panel to be invisible at first?

I tried setting the panel's visibility to false, but instead of tweening the FadeIn, it just jumps because, as you said, visibility is a switch not a tweenable event. Any suggestions?


Return to posts index


demetri tashie
Re: Menu fading in/out causing layering problems
on Jul 7, 2011 at 5:49:49 pm

of course you want it to fade in on rollover and fade out on mouse out, so you just need to reverse the 2 event listeners.

and then also add code to make the inital state of the menu (in my example, 'clip2') to be both alpha=0 and visible=false.

here is better/corrected code. note the lines in bold are new - the rest is just reversing the rollover and rollout functions
import gs.*;
clip1.buttonMode=true;

<b>clip2.alpha=0;
clip2.visible=false;</b>

clip0.addEventListener(MouseEvent.ROLL_OVER, clipVisible);
clip0.addEventListener(MouseEvent.ROLL_OUT, clipFadeOut);

function clipVisible(e:MouseEvent){
TweenLite.to(clip2, 0,{visible:true, onComplete:clipFadesIn});
}
function clipFadesIn():void {
TweenLite.to(clip2,2,{alpha:1});
}

function clipFadeOut(e:MouseEvent):void {
TweenLite.to(clip2, 1,{alpha:0, onComplete:clipNotVisible});
}

function clipNotVisible(){
clip2.visible=false;
}


that should take care of that.


Return to posts index

John Jennette
Re: Menu fading in/out causing layering problems
on Jul 7, 2011 at 6:06:53 pm

Of course! Thank you again -- I had the visibility turned off, but forgot about turning down the alpha as well. I guess going through so much unsuccessful code caused me to overlook the important bits!


Return to posts index

John Jennette
Re: Menu fading in/out causing layering problems
on Jul 21, 2011 at 1:33:00 pm

Thanks again, demetri, for the excellent advice! I've implemented TweenLite and everything is working splendidly.

Though I have noticed that it takes the buttons a few seconds to become "active" when the SWF is opened. I have multiple buttons using the same fade in/out effect. Some are functional right away, and others take a little longer to "read" the mouseover. Which buttons it affects and for how long seem to vary. Do you know why that is? It isn't a major problem, but it does add precious seconds to the user experience...


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 CreativeCOW.net All Rights Reserved
[TOP]