2 events with small button above a large button

[blob]

a small button is sitting above a large button

large button uses onRollOver and onRollOut event
small button uses onRelease or onPress event

roll over large button starts video play, but when roll to small button i do not want the video to stop, i want to be able to click small button with video playing.

you can see here on cbs.marketwatch.com

in the left column see the 125x125 box (road to prosperity) if you roll over video will play, and you can click sound button.

when i try it my movie stops as i am over the small button

// this is the big button

bg.onRollOver=function(){
  mediaDisplay.play()
} 
 
bg.onRollOut=function(){
  mediaDisplay.seek(0);
  mediaDisplay.pause();
}


// here is the small button first try

var scale = "hide";

bg.moreBtn._visible=true;
bg.hideBtn._visible=false;

moreBtn.onRelease=function(){
  trace("more")
  moreBtn._visible=false
  hideBtn._visible=true
  mediaDisplay._xscale = 50;
  mediaDisplay._yscale = 50;
  mediaDisplay._x = 141;
  mediaDisplay._y = 0;
  scale = "more";
}

hideBtn.onRelease=function(){
  trace("hide")
  moreBtn._visible=true
  hideBtn._visible=false
  mediaDisplay._xscale = 100;
  mediaDisplay._yscale = 100;
  mediaDisplay._x = 0;
  mediaDisplay._y = 0;
  scale = "hide";
}

and this way it works in a way but not really
as i actually clicking on a big button and small button is just there switching

// small button second try

bg.onRelease=function(){
  if (scale == "hide") {
     trace("more")
     bg.moreBtn._visible=false
     bg.hideBtn._visible=true
     mediaDisplay._xscale = 50;
     mediaDisplay._yscale = 50;
     mediaDisplay._x = 141;
     mediaDisplay._y = 0;
     scale = "more";
  } else {
     trace("hide")
     bg.moreBtn._visible=true
     bg.hideBtn._visible=false
     mediaDisplay._xscale = 100;
     mediaDisplay._yscale = 100;
     mediaDisplay._x = 0;
     mediaDisplay._y = 0;
     scale = "hide";
  }
}

[Jozzle]

Hi,

Im not sure if this is what you mean, but here is my interpretation of your question....

Going from one button to the next is interpreted bij flash as a rollOut of the first button. Your script makes the movie pause here:

PHP Code:

bg.onRollOut=function(){
  mediaDisplay.seek(0);
  mediaDisplay.pause();
} 


Apperently you want the movie to pause, but not when over the second button. A (non-clean) sollution, combined with your first, could be something like this:

PHP Code:

var isOverMoreBtn = false;

bg.onRollOut=function(){
   if(!isOverMoreBtn){   //check if mouse exit movie or just over second button
      mediaDisplay.seek(0);
      mediaDisplay.pause();
   }
} 

moreBtn.onRollOver=function(){
   isOverMoreBtn = true;   // mouse is over second button
}
moreBtn.onRollOver=function(){
   isOverMoreBtn = false;  // mouse isn't over second button anymore
} 


Where the pausing is only triggerred when the mouse has left bgButton and is not on the second button...

Hope this helps,

Good luck!

[blob]

Thank you very much Jozzle! i think this is exactly what i needed, i will go and try now, just one small clarification, maybe you can tell me what do you mean by "non-clean" solution, i don't see anything wrong with your suggested code?

[blob]

this doesn't seem to work

PHP Code:

var isOverMoreBtn = false; 

bg.onRollOut=function(){  
//   here i am over big button, 
//   so i am not over small button
//   which means isOverMoreBtn would already be false
//    and so "if" statement below will always be true. 
   if(!isOverMoreBtn){ //check if mouse exit movie or just over second button 
      mediaDisplay.seek(0); 
      mediaDisplay.pause(); 
   } 
} 

moreBtn.onRollOver=function(){ 
   isOverMoreBtn = true;   // mouse is over second button 
} 
moreBtn.onRollOut=function(){ 
   isOverMoreBtn = false;  // mouse isn't over second button anymore 
} 


thanks, i fixed this, but it's still not working, it seems that bg.onRollOut function is trigered before moreBtn.onRollOver

[Jozzle]

Hi,

I think its a copy paste typo, but the first line of code you pasted says "ar...." where it needs to be "var...".

But I guess flash would prompt that too so it must be something else...

I haven't got the opportunity to test the script, if you understand the approach of checking a variable before pausing the video, maybe you could find another way to implement it, if not, how did you combine the script with the rest of your first attempt from post one?

Greets

[blob]

i attached the fla file, maybe it would be easier to understand what i am trying to do, thanks

[Jozzle]

ok,

My mistake. Logically, flash triggers the rollOut of the big button before the rollOver of the small button. This regretfully asked for a different approach, because besides of the mouse position or adding additional hitspots, i couldn't think of another (already available) trigger to use as i wanted in the first suggestion... Instead, try this for the bigbutton rollOver:

PHP Code:

bigBtn.onRollOut=function(){  
   if((bigBtn._xmouse <= 0) || (bigBtn._xmouse >= bigBtn._width-1) || (bigBtn._ymouse <= 0) || (bigBtn._ymouse >= bigBtn._height-1)){ //check if mouse exit movie or just over second button
      trace("left the movie")
    } else {
      trace("did not leave the movie")
      bigBtn._alpha=100;
      ns.pause();
    }
} 


Replace the old rollOver function with this one and it should work. This uses the mouse poistion relative to the button, so you can still move and scale your big button. I hope this will meet your requirements

Greets!

[blob]

oh this is exactly what i need, well it's little bit backwards and i will need to add the same logic for rollOver function as to prevent it from getting catching over when stepping from small button, but this idea will definitely work, Thank you Jozzle!!!!

[blob]

i thought the least i can do is attach working example
Thank you Jozzle!