Masking one movie clip from another

[Art]

Hi,

I am having a problem acheiving the effect of "masking" involving two movie clips.

I have a movie clip I will refer to here as MC_parent. MC_parent contains buttons that are activated with rollovers.

I have another movie clip I will refer to here as MC_child. MC_child is contained in the upper layers of MC_parent and it has buttons that when clicked a menu pops up in the center of the screen over the contents of MC_parent.

MC_child's buttons are always present, the mask only needs to occur when the button is clicked and the pop up is present. MC_parent's contents need to remain visible under the pop up.

I have multiple different screens that will be fall into the MC_parent category. MC_child is the same for each, which is why I am using movie clips.

This is working fine except the rollovers in MC_parent are still active and acessible when MC_child's popup is on screen wreaking havoc.

I have tried inserting a graphic layer at the appropriate frames in the bottom of MC_child hoping to set the Alpha to 0, but even with Alpha at 100% visibly blocking MC_parent, the rollovers of MC_parent can be activated. I also tried inserting a transparent.gif ... no difference.

I tried reversing the hierarchy putting MC_child in a timeline above MC_parent... no difference.

Any suggestions on how to ' mask ' MC_parent when MC_child's pop up menus are on screen?


Thanks in advance for taking the time to read this and any suggestions.

Art

[poab]

Hi,

You don't want to mask your buttons to stop them working, because they don't need to be visible to work. (Invisible buttons etc. )You need to deactivate them.

Put the buttons inside a movieclip (you'll have to remember to alter the paths for their actions, (see the tutorial on this site)). Give the MC 2 keyframes. Put a stop action on both. Label frame one 'active', and frame 2 'inactive'.

Make a new layer with 2 keyframes. Frame 1 has your buttons. Frame 2 has the upstates of the buttons so that both frames look identical, but only frame one has active buttons.

Outside the MC, label it 'buttons' in the instance panel.

On the button that opens the pop-up, the code is:

on(press){
buttons.gotoAndStop("inactive");
//The rest of the code for opening the pop-up goes here.
}

On the button that closes the pop-up, the code is:

on(press){
buttons.gotoAndStop("active");
//The rest of the code for closing the pop-up goes here.
}


cheers.

[Art]

poab,

Thanks for the reply... that is a good suggestion. If I understand you correctly, I have tried that, and it still does not resolve the issue.

In my scenario, the text and buttons that exist in my MC_parent change. That means I have to build an 'inactive' frame for every possible state and combination.

Also I would need a variable or some way to point the button in MC_child, that opens the pop-up, to the proper inactive frame in MC_parent.

[poab]

Hi,

Slightly more complicated version of the same solution:

I'm going to assume, that the parentMC is an MC on the main timeline, as is the childMC. If this is not the case then you can easily alter the paths to make up for the difference. (So to launch the childMC from a button inside the parentMC the path would be _parent.childMC etc.)

1) Your parentMC buttons are not buttons, you have an MC which contains all of the possible variations for that individual button. This is the only button you're going to need. On the layer underneath that you have another MC. Make the first frame of this one active and the second frame inactive, as in the previous post. On keyframe 1 you have a button. This button should have no upstate, overstate or downstate. It should consist entirely of the hitstate. Therefore it's invisible (Flash will colour it light blue for you when it's in .fla format, but it will be completely invisible in .swf format). Keyframe 2 has nothing in it whatsoever. As above frames 1 and 2 both have stop(); (That bit's important) and the label 'active' , 'inactive' respectively.

2) In the instances panel parentMC is named 'parentMC' (all of these names should be without the inverted coma's). The buttonMC's are all named 'button1', 'button2', 'button3' etc. inside the buttonMC's every state the button needs to have has it's own keyframe, with a stop() action on each. The layer that contains the MC with the invisible button on it runs the entire length of the MC, (Not as keyframes, as one keyframe followed by frames.) this MC is called 'onOff' in the instances panel.

3) On the invisible button place the following code:

on(press){
_parent.gotoAndStop("pressState");
}
on(release){
_parent.gotoAndStop("releaseState");
}
on(releaseOutside){
_parent.gotoAndStop("releaseOutsideState");
}
on(rollOver){
_parent.gotoAndStop("rollOverState");
}
on(rollOut){
_parent.gotoAndStop("rollOutState");
}
on(dragOut){
_parent.gotoAndStop("dragOutState");
}
on(dragOver){
_parent.gotoAndStop("dragOverState");
}

Apart from keypress that's all the button events there are. Remove any from the code you don't need and put a label on each keyframe in the buttonMC so that flash knows which keyframe actually is 'dragOverstate' etc. If you test now you'll find you have fully functioning buttons.

3) If each buttons look the same when you start skip this bit. If not:

In the first frame if the buttonMC you need the following code:

if(button1==getProperty(this, _name){
gotoAndStop("button1Start");
}
if(button2==getProperty(this, _name){
gotoAndStop("button2Start");
}
//etc.............

Carry on with that 'til you've got all your buttons accounted for......Again you'll need to ensure that you have labels in the appropriate places. One label per frame so if button2's upstate is button1's over state then it's fine to use that label as the start point.

You can do the same thing with the over states on the button, if you like. If they all share the same characteristics as each other except that the over states are different then the code on the invisible button would be like this:

on(rollOver){
if(button1==getProperty(this, _name){
_parent.gotoAndStop("button1Over")
}
if(button2==getProperty(this, _name){
_parent.gotoAndStop("button2Over")
}
}

//etc.

Again carry on until your buttons are all accounted for. (This is, incidently a superb way of reducing file size because anything that has similar if not identical frames can be created as a single object controlled by checking for an individual instances name.)

4) O.K. back to the main point. You need to attatch code to the invisible button's release state (Or whatever state it is that controls things) So if assuming button one launches the childMC by moving it's timeline to "launch", and 2 moves the main timeline to "whatever" and 3 launches the child like 1 does and moves the main timeline like 2 does the code on the invisible button would be:

on(release){
if(button1==getProperty(this, _name){
_parent.gotoAndStop("releaseState");
_root.childMC.gotoAndStop("launch");
gotoAndStop("inactive");
_root.button2.onOff.gotoAndStop("inactive");
_root.button3.onOff.gotoAndStop("inactive");
}
if(button2==getProperty(this, _name){
_parent.gotoAndStop("releaseState");
_root.gotoAndStop("whatever");
_root.button1.onOff.gotoAndStop("inactive");
gotoAndStop("inactive");
_root.button3.onOff.gotoAndStop("inactive");
}
if(button3==getProperty(this, _name){
_parent.gotoAndStop("releaseState");
_root.childMC.gotoAndStop("launch");
_root.gotoAndStop("whatever");
_root.button1.onOff.gotoAndStop("inactive");
_root.button2.onOff.gotoAndStop("inactive");
gotoAndStop("inactive");
}
}


What you now have is a button that when released checks which instance of the button it is and acts appropriately.

5) Last thing:

What ever closes the childMC needs to have added the script to reactivate the buttons:

_root.button1.onOff.gotoAndStop("active");
_root.button2.onOff.gotoAndStop("active");
_root.button3.onOff.gotoandStop("active");

//etc......


What you should have if I explained it properly is abutton, the 'intelligently' decides what you've asked it to do. You can have as many states as you like for this button, and change them as much as possible, because the buttonMC isn't actually the button, it's the invisible button inside buttonMc that is, and that's always got it's hitstate active, whatever the state of the clip it's in. The only time this isn't the case is when you purposefully make it inactive.

Hope this helps. If it doesn't work email me, the .fla so I can see exactly what you mean. You can change anything you like in this way (Including your text) as long as you make it, or put it inside an MC so that yuou can refer to it in code.

cheers

[Art]

poab,

Thanks much for the reply... a friend gave me a suggestion which I tried and appears to be working.

I created a Boolean variable in the first frame of the _root
buttonsActive = true

I then precede each MC_parent button's actionscript with
if _root.buttonsActive == true {
on (event){
go do what you do;
}

Every time I run MC_child I set _root.buttonsActive = false
When exiting the pop up created by MC_child I set _root.buttonsActive = true

This does not completely 'freeze' MC_parent - the rollover visuals on the buttons are still active, but no actionscript occurs, keeping the pop up displayed as desired.

[poab]

hi,

Thanks for posting your solution, tried it myself.

Only problem I have is that the rollovers still appear to be active. Which breaks the consistency of the navigation and becomes confusing (especially if you don't use the web a lot). Equally if your childMC is very transparent, your content is hard to read because you're not able to set the button to a faded state.

Does function well though. :o)

cheers.