Forums: Flash:

I'm wondering how you guys might (or have) approached this sort of situation:

You're creating an interface of many parts and buttons, scrollbars, input boxes, etc, etc. There can be any number of buttons on the screen at any one time.

Then you have a dialog type window popup (I mean, it's a movieclip in Flash, it looks like a window) - a modal movieclip - that the user has to click YES or NO on to continue.

This dialog window is smaller than the screen size and you can still see the other buttons behind it.

You don't want the user to be able to click on (or otherwise interact with) anything else until they've hit either OK or Cancel.

One quick way I've used in the past is to slap a large alpha 0 button above the whole interface, but behind the popup - that way you can't click on the other stuff cos of that invisible button.

But I need to make sure you can't tab to anything either - so merely obscuring things won't work.


I'm trying to loop thru everything and renaming the onRelease, etc, events I find - but that is slow...

I think I may just have to create an array containing references to everything that would need to be greyed out, but that sounds like an arse too.

Should work for AS1 and AS2, not ideal. Other approaches might be disabling tabbing, I will let you research that.

// place on the first frame 
_global.buttonUsable = function( val: Boolean, exceptions:Array ){
var all:String;
MovieClip.prototype.enabled=true;
Button.prototype.enabled=true;
for(all in exceptions){
exceptions[all].enabled=true;
}
};

//place wherever you want to disable buttons
buttonUseable( false,[yes_btn, no,btn );

Class ButtonDivert extends MovieClip
{
Static var ENABLE:Boolean;
function onRelease(){
if(enable){
 this.super.onRelease();
}
}
public function set enabled(val:Boolean){
  ENABLE=val   
}
public function get enabled():Boolean
{ 
//need some sort of logic to make sure it has a value if not set? Or maybe don't bother!
return ENABLE|false;
}
}

oh another idea you have all the contents of the movie in one clip and another in the modal, then take a bitmapData of the screen behind the modal and then just set the _visible for the whole lot to false, any button should then be disabled, then show the bitmapData copy of the screen. This might actually work best and in AS3? Please post an example if the concept works.

Originally posted by: JLM
oh another idea you have all the contents of the movie in one clip and another in the modal, then take a bitmapData of the screen behind the modal and then just set the _visible for the whole lot to false, any button should then be disabled, then show the bitmapData copy of the screen. This might actually work best and in AS3? Please post an example if the concept works.

I don't know but I would not bother with them(not that I tried them), if you use components I would suggest them to save work and try to use flex ones?, but seems overkill for a popup, components complexify you depth management. I would have a different opinion if they were like the XAML WPF components which seem to be better at staying out of your way

yeah I've not got much experience with components, I'll have to skin the Window component to get it matching the design I've been given.

But the way that it gives you a modal popup right off the bat is very nice.




.. although saying that tests I'm running show that there is a little bug with just how modal Flash makes the popup.

http://www.danwashere.com/flash_files/modal_popup_test.html

http://www.danwashere.com/flash_files/modal_popup_test.fla



In the test movie there are four buttons you click on to make stars appear - and a fifth button to make a popup open.

If you just use your mouse, then all's fine and works as you'd expect, but try this:

Click on the movie to give it focus.
Tab around a bit, but don't click on the Open button yet.
Use your mouse to click on the Open button - the popup should appear.
Now hit tab and you'll see that you can continue to tab through the buttons in the background which should really be disabled - you can even click on them and make the stars appear.



This is my code in case anyone can spot a mistake I might have made?

import mx.managers.PopUpManager;
import mx.containers.Window;

var hideStars:Function = function():Void {
	for(var n:Number = 1; n <= 4; n++){
		this["star_"+n]._visible = false;
	}
}


hideStars();

var n:Number;
var thisBtn:MovieClip;

for(n = 1; n <= 4; n++){
	thisBtn = this["btn_"+n];
	thisBtn.myStar = this["star_"+n];
	thisBtn.onRelease = function(){
		hideStars();
		this.myStar._visible = true;		
	}
	thisBtn.tabEnabled = true;
	thisBtn.tabIndex = n;
}

var winPopup:MovieClip;

btnOpenPopup.onRelease = function(){

	winPopup = PopUpManager.createPopUp(_root, Window, true, {contentPath:"objPopupWindow"});
	
	// Create a listener for the onLoad event, to set up the window features
	var objOnLoad:Object = Object();
	objOnLoad.complete = function(e) {
		winPopup.setSize(175, 215);
		winPopup.move(180, 80);
		
		winPopup.content.btnOK.onRelease = function(){
			winPopup.deletePopUp();
		}
		//winPopup.content.btnOK.tabEnabled = true;
	}
	
	winPopup.addEventListener("complete", objOnLoad);
}
btnOpenPopup.tabEnabled = true;
btnOpenPopup.tabIndex = 5;

oooooooh skinning stuff is a bitch. Does anyone actually go thru this for work???

Probably, with srcoll bar I tend to create a layout movieclip and drag all the scroll bar component movieclips into it and arrange them roughly to look like a scroll bar then edit the symbols to achieve the look, it helps a little. Sorry not had a look so far they only gave me illustrator and vs2005 and still struggling to get the licences sorted, and was too tired to open flash by the time got home. Am i the only one that runs when the words flash and component get mentioned in the same sentence!

Originally posted by: JLM
Am i the only one that runs when the words flash and component get mentioned in the same sentence!

If your going to do some skinning of components its probably worth getting a book either one specific about components or the 'esential upgrade' ones are generally are quite good.

Originally posted by: JLM
....its probably worth getting a book ....

	winPopup = PopUpManager.createPopUp(_root, Window, true, {title:"Testing", contentPath:"objWindowContents", closeButton:true});

	// Hide the window until it's fully loaded.
	winPopup._visible = false;
	// Create a listener for the onLoad event, to set up the window features
	var objOnLoad:Object = Object();
	objOnLoad.complete = function(e) {
		winPopup._visible = true;
		winPopup.setSize(175, 215);
		
		// .... snip .... just stuff to set up the window contents here

		// Put the focus unto the window to workaround the broken tabbing.
		focusManager.setFocus(winPopup);
	}

i found what i was searching for, thank you so much!