Closing and Open on Click

[FrozenGecko]

I want to make a website and for the navigation when you click a button, I want the window that is open to fade out and than have the window open that you just clicked on fade in.

how would I do this?

(using flash cs4)

[jasondefra]

The most efficient way of doing this would be with Actionscript. First you want to download GreenSock's TweenLite class and get that set up in your AS folder: http://blog.greensock.com/tweenliteas3/

After you've gotten that, it's just a matter of keeping track of which 'window' is currently open (so you can 'close' it) and which one you want to open, and then trigger the alpha-out and alpha-in events when a nav option is clicked.

How familiar are you with Actionscript 3? I can help you along the way if you're not very adept.

[FrozenGecko]

How familiar are you with Actionscript 3? I can help you along the way if you're not very adept.

I'm not very experienced with Action scripts. I am a quick learner and I make websites so I understand some code.

If you could can me out I would GREATLY appreciate it!!!

[jasondefra]

Okay, well let's start simpler then and work our way up. We won't worry about any sort of tweening effects right now, instead you should just get your interface set up so windows disappear/appear.

Assuming your buttons instance names are btn01, btn02, and btn03; and your window instance names are window01, window02, and window03, the code below will add functionality to it all:

addEventListener(MouseEvent.CLICK,onClick,false,0,true);

function onClick(e:MouseEvent):void{
  switch (e.target){
    case btn01:
      closeWindows();
      window01.visible=true;
      break;
    case btn02:
      closeWindows();
      window02.visible=true;
      break;
    case btn03:
      closeWindows();
      window03.visible=true;
      break;
    default:
      //do nothing
      return;
  }
}
function closeWindows():void{
  window01.visible=window02.visible=window03.visible=false;
} 

Apply this concept to your project, swapping instance names as needed. Post back once you've given this a try.

[FrozenGecko]

Will do!

[FrozenGecko]

EDIT: nevermind, I got it working, it just doesn't work if it gets a error xD... how shall i proceed

Uhh.. I can't get it working, could you give me abit of a step-by-step guide?

[FrozenGecko]

I got it working like i said, what do i do next jasondefra?

[jasondefra]

Now you want to go and download TweenLite here: http://tr.im/qGV2
Add it to your Actionscript library (if you don't know how to do that, you can view a tut about it here: http://bit.ly/dtlYP).

Once you have your class set up, you want to add this line to the top of your script:

import com.gs.TweenLite; 

Now, since you want to fade in/fade out the windows, we're going to ditch the visible property on the windows and just deal with alpha. Let's change the code a bit:

//first we're making sure none of your content windows are 
//being displayed when the movie launches
window01.alpha=window02.alpha=window03.alpha=window04.alpha=0;

//this doesn't change: just listening for mouse clicks
addEventListener(MouseEvent.CLICK,onClick,false,0,true);

//this changes a bit. Rather than dealing with the visible 
//property of the windows, we'll be tweening alpha properties
function onClick(e:MouseEvent):void{
 switch(e.target){
  case btn01:
   closeWindows();
   TweenLite.to(window01,1,{alpha:1,overwrite:false});//this is a call to 
    //the TweenLite class you set up earlier: The first parameter is the 
    //display object you're targeting (window0x), the second param is 
    //length of time the tween will take to complete in whole seconds 
    //(1 second), then all properties for the display object are listed in 
    //the third param within {}, in this case we're changing the alpha 
    //from 0 to 1 and we don't want this tween call to interrupt/overwrite 
    //any previous tween calls
   break;
  case btn02:
   closeWindows();
   TweenLite.to(window02,1,{alpha:1,overwrite:false});
   break;
  case btn03:
   closeWindows();
   TweenLite.to(window03,1,{alpha:1,overwrite:false});
   break;
  case btn04:
   closeWindows();
   TweenLite.to(window04,1,{alpha:1,overwrite:false});
   break;
  default:
   return;
 }
}

function closeWindows():void{
 //for each of these ifs we're looking for the object that is currently 
 //being displayed (we know this because it's alpha will be equal to 1) 
 //and then tweening its alpha property down to 0 over 1 second
 if(window01.alpha==1) TweenLite.to(window01,1,{alpha:0});
 else if(window02.alpha==1) TweenLite.to(window02,1,{alpha:0});
 else if(window03.alpha==1) TweenLite.to(window03,1,{alpha:0});
 else if(window04.alpha==1) TweenLite.to(window04,1,{alpha:0});
} 

This should give you a good start. I tested this code and it worked, though it'll certainly need some addition conditions in the case that your user click-spams the buttons.

Start with this, get the fading in and fading out working, then we can work out the kinks together.

And one more thing, this is all pretty sloppy code; once you get more experience with Actionscript, you will find there are much more efficient ways of handling multiple movieclips and their events, but for now I'm trying to keep this simple. Cheers!

~Jason

EDIT: My comments are way too lengthy

[FrozenGecko]

Thank you very much!!

The buttons that open these windows I would like to have a mouse over animation and a mouse out animation, (alpha from 75% to 100%) could you give me a hand with that code?

[jasondefra]

Well, to do this, you're first going to want the alpha of your buttons set to 75% similar to how we did the windows, but instead of "=0" you're going to do "=.75".

btn01.alpha=.75; 

After that, you need to add a MOUSE_OVER and MOUSE_OUT Event Listener to each of the buttons. Then you just have each respective function Tween the alpha to and from 75% much like how we did the windows.

btn01.addEventListener(MouseEvent.MOUSE_OVER,onBtnOver,false,0,true);
btn01.addEventListener(MouseEvent.MOUSE_OUT,onBtnOut,false,0,true);

function onBtnOver(e:MouseEvent):void{
 //put the TweenLite code here to go to alpha:1—
 //read the comments in my previous post for an 
 //explanation of the different parameters
}
funciton onBtnOut(e:MouseEvent):void{
 //put the TweenLite code here to go to alpha:.75
} 

And that should just about cover it. Like I said, there are definitely better ways to do this, but the way mentioned above is probably the most straight-forward for AS3 novices.

~Jason

[FrozenGecko]

I tried to get the button mouseover/mouseout to work and I got this...

1071: Syntax error: expected a definition keyword (such as function) after attribute funciton, not onBtnOut.

nevermind... funciton onBtnOut(e:MouseEvent):void{

function was mis-spelled.

[FrozenGecko]

Okay, i'm just trying to get it work with two MCs at the moment.

Here's my code

import gs.TweenLite; 

btn01.alpha=.50; 
btn02.alpha=.50; 

btn01.addEventListener(MouseEvent.MOUSE_OVER,onBtnOver,false,0,true);
btn01.addEventListener(MouseEvent.MOUSE_OUT,onBtnOut,false,0,true);

function onBtnOver(e:MouseEvent):void{
TweenLite.to(btn01, 0.9, {alpha:1});
}
function onBtnOut(e:MouseEvent):void{
TweenLite.to(btn01, 0.9, {alpha:0.5});
} 

btn02.addEventListener(MouseEvent.MOUSE_OVER,onBtnOver,false,0,true);
btn02.addEventListener(MouseEvent.MOUSE_OUT,onBtnOut,false,0,true);

function onBtnOver(e:MouseEvent):void{
TweenLite.to(btn02, 0.9, {alpha:1});
}
function onBtnOut(e:MouseEvent):void{
TweenLite.to(btn02, 0.9, {alpha:0.5});
}

I get this error.

1021: Duplicate function definition.


How do I go about fixing this?

[jasondefra]

That error is coming up because you have multiple function with the same name. You only need one "onBtnOver" and "onBtnOut" and just change the first parameter of the TweenLite call:

function onBtnOver(e:MouseEvent):void{
TweenLite.to(e.target, 0.9, {alpha:1});
}
function onBtnOut(e:MouseEvent):void{
TweenLite.to(e.target, 0.9, {alpha:0.5});
} 

If "e.target" doesn't work, try using "e.currentTarget" I can never remember which of the two to use.

[FrozenGecko]

e.target works!

I gotta say THANK YOU!!! I really appreciate all of your help -bows-

I'll be putting it all together tonight so hopefully I don't screw something up xD

[FrozenGecko]

The only current bug is that when you click on another button while one is still going, they both stay open. I then was curious and clicked the one of the buttons that was open and it closed the window.

Is there any sort of delay we can put it for when someone click a button or something, I dunno =p (I only have the home and products & services working cause I just wanted to start with the 2 and progress to the others)

http://frozen-gecko.net/quicky.htm

[jasondefra]

You can use a Boolean to control when an event is called. You will toggle the variable on and off depending on whether a window is tweening or not, then you just have to make sure that the call for window tweening is only called when the Boolean is toggled to a certain value. So, something like:

var isWindowTweening:Boolean=false;

onClick(e:MouseEvent):void{
  if(!isWindowTweening){//check if isWindowTweening is false
    isWindowTweening=true;//first, we want to set the boolean to true so we can't spam-click
    switch(e.target){
      //all the cases are here
    }
  }
} 

That will toggle the isWindowTweening to true (and will thus prevent the SWITCH statement from getting spammed), so the last thing we want to do is toggle the Boolean back to its normal state after the Tweening is done. So change the TweenLite call in your CASE statements to include an extra parameter to call a function on tween completion.

TweenLite.to(window02,1,{alpha:1,overwrite:false,onComplete:resetBool}); 

function resetBool():void{
  isWindowTweening=false;
} 

The last part should re-enable the clickability of your buttons.

[FrozenGecko]

I tried to apply the code but i'm getting lots of 1084 errors. Heres my original code:

import gs.TweenLite; 

//first we're making sure none of your content windows are
//being displayed when the movie launches
window02.alpha=window03.alpha=window04.alpha=window05.alpha=0;

//this doesn't change: just listening for mouse clicks
addEventListener(MouseEvent.CLICK,onClick,false,0,true);

//this changes a bit. Rather than dealing with the visible
//property of the windows, we'll be tweening alpha properties
function onClick(e:MouseEvent):void{
switch(e.target){
  case btn02:
   closeWindows();
   TweenLite.to(window02,1,{alpha:1,overwrite:false});//this is a call to
    //the TweenLite class you set up earlier: The first parameter is the
    //display object you're targeting (window0x), the second param is
    //length of time the tween will take to complete in whole seconds
    //(1 second), then all properties for the display object are listed in
    //the third param within {}, in this case we're changing the alpha
    //from 0 to 1 and we don't want this tween call to interrupt/overwrite
    //any previous tween calls
   break;
  case btn03:
   closeWindows();
   TweenLite.to(window03,1,{alpha:1,overwrite:false});
   break;
   case btn04:
   closeWindows();
   TweenLite.to(window04,1,{alpha:1,overwrite:false});
   break;  
   case btn05:
   closeWindows();
   TweenLite.to(window05,1,{alpha:1,overwrite:false});
   break;  
   
   
  default:
   return;
}
}

function closeWindows():void{
//for each of these ifs we're looking for the object that is currently
//being displayed (we know this because it's alpha will be equal to 1)
//and then tweening its alpha property down to 0 over 1 second
if(window02.alpha==1) TweenLite.to(window02,1,{alpha:0});
else if(window03.alpha==1) TweenLite.to(window03,1,{alpha:0});
else if(window04.alpha==1) TweenLite.to(window04,1,{alpha:0});
else if(window05.alpha==1) TweenLite.to(window05,1,{alpha:0});
} 



//BTN STUFF!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

btn01.alpha=.60; 
btn02.alpha=.60; 
btn03.alpha=.60; 
btn04.alpha=.60; 
btn05.alpha=.60; 
btn06.alpha=.60; 

btn01.addEventListener(MouseEvent.MOUSE_OVER,onBtnOver,false,0,true);
btn01.addEventListener(MouseEvent.MOUSE_OUT,onBtnOut,false,0,true);

btn02.addEventListener(MouseEvent.MOUSE_OVER,onBtnOver,false,0,true);
btn02.addEventListener(MouseEvent.MOUSE_OUT,onBtnOut,false,0,true);

btn03.addEventListener(MouseEvent.MOUSE_OVER,onBtnOver,false,0,true);
btn03.addEventListener(MouseEvent.MOUSE_OUT,onBtnOut,false,0,true);

btn04.addEventListener(MouseEvent.MOUSE_OVER,onBtnOver,false,0,true);
btn04.addEventListener(MouseEvent.MOUSE_OUT,onBtnOut,false,0,true);


btn05.addEventListener(MouseEvent.MOUSE_OVER,onBtnOver,false,0,true);
btn05.addEventListener(MouseEvent.MOUSE_OUT,onBtnOut,false,0,true);

btn06.addEventListener(MouseEvent.MOUSE_OVER,onBtnOver,false,0,true);
btn06.addEventListener(MouseEvent.MOUSE_OUT,onBtnOut,false,0,true);

function onBtnOver(e:MouseEvent):void{
TweenLite.to(e.target, 0.8, {alpha:1});
}
function onBtnOut(e:MouseEvent):void{
TweenLite.to(e.target, 0.8, {alpha:0.6});
}

Could you add the boolean? I tried for a really long time, but could not get it to work.

[FrozenGecko]

BUMP.

Help? I would really like to get this project done ^^

[jasondefra]

var isTweening:Boolean=false;
function resetBool():void {
    isTweening=false;
}
function onClick(e:MouseEvent):void {
    if (!isTweening) {
        isTweening=true;
        switch (e.target) {
            case btn02 :
                closeWindows();
                TweenLite.to(window02,1,{alpha:1,overwrite:false,onComplete:resetBool});//this is a call to
                //the TweenLite class you set up earlier: The first parameter is the
                //display object you're targeting (window0x), the second param is
                //length of time the tween will take to complete in whole seconds
                //(1 second), then all properties for the display object are listed in
                //the third param within {}, in this case we're changing the alpha
                //from 0 to 1 and we don't want this tween call to interrupt/overwrite
                //any previous tween calls
                break;
            case btn03 :
                closeWindows();
                TweenLite.to(window03,1,{alpha:1,overwrite:false,onComplete:resetBool});
                break;
            case btn04 :
                closeWindows();
                TweenLite.to(window04,1,{alpha:1,overwrite:false,onComplete:resetBool});
                break;
            case btn05 :
                closeWindows();
                TweenLite.to(window05,1,{alpha:1,overwrite:false,onComplete:resetBool});
                break;


            default :
                return;
        }
    }
} 

[FrozenGecko]

I have another question, got would I make a close button for whichever window is open.

I also want to make a small flash gallery, I want to change the code from opacity to scale with a close button, what changes would I make?