Over Shadow your content

[Flep]

Often I have received requests in which they asked some tips on how to overshadow all the contents of the SWF by clicking a button and then bring up a popup ( always inside Flash) or anything like that.
So I decided to create a couple of examples.
The first is whether all content is composed of different objects and therefore without a container.
The second is whether you have all the contents of the SWF in a MovieClip, which serves as a container (always better choice).
In the second case we can also apply a slight BlurFilter to all content while in the first case apply only a sort of semi-transparent film.

Example 1:

var film_mc:MovieClip;
var pop:PopUp;

pop_btn.addEventListener(MouseEvent.MOUSE_DOWN,openPopUp);

function openPopUp(evt:MouseEvent):void
{
	createFilm();
	attachPopUp();
}

function createFilm():void
{
	film_mc=new MovieClip();
	film_mc.graphics.beginFill(0xFFFFFF,1);
	film_mc.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
	film_mc.alpha=0.5;
	addChild(film_mc);
}

function attachPopUp():void
{
	pop=new PopUp();
	pop.x=stage.stageWidth/2-pop.width/2;
	pop.y=stage.stageHeight/2-pop.height/2;
	addChild(pop);
	
	pop.close_mc.mouseChildren=false;
	pop.close_mc.buttonMode=true;
	pop.close_mc.addEventListener(MouseEvent.MOUSE_DOWN,closePopUp);
}

function closePopUp(evt:MouseEvent):void
{
	removeChild(pop);
	pop=null;
	removeChild(film_mc);
	film_mc=null;
}

Let's see the code.

We have 4 functions:

1. openPopUp: this function is called when the POPUP button has been clicked and also will call 2 more functions ( createFilm and attachPopUp ).


2. createFilm: this function creates a MovieClip, draws a rectangle ( stage dimensions, 0.5 alpha and white color ).


3. attachPopUp: this is the past attachMovie method of the previous version of Actionscript. I just have a MovieClip in library (mc_pop) that is my window. So this MovieClip is associated to a class I called PopUp.
   
   Then I add a listener of MOUSE_DOWN event to the close_mc MovieClip. At the click will close the window calling the function closePopUp.


4. closePopUp: this function removes the MovieClip that has been created within the createFilm function and also removes the window ( PopUp ).

Example 2:

var film_mc:MovieClip;
var pop:PopUp;

container_mc.pop_btn.addEventListener(MouseEvent.MOUSE_DOWN,openPopUp);

function openPopUp(evt:MouseEvent):void
{
	applyBlur();
	createFilm();
	attachPopUp();
}

function createFilm():void
{
	film_mc=new MovieClip();
	film_mc.graphics.beginFill(0xFFFFFF,1);
	film_mc.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
	film_mc.alpha=0.3;
	addChild(film_mc);
}

function applyBlur():void
{
	var blurX:Number=3;
	var blurY:Number=3;
	var filter_array:Array=new Array();
	var blur:BlurFilter=new BlurFilter(blurX,blurY,BitmapFilterQuality.HIGH);
	filter_array.push(blur);
	container_mc.filters=filter_array;
}

function attachPopUp():void
{
	pop=new PopUp();
	pop.x=stage.stageWidth/2-pop.width/2;
	pop.y=stage.stageHeight/2-pop.height/2;
	addChild(pop);
	
	pop.close_mc.mouseChildren=false;
	pop.close_mc.buttonMode=true;
	pop.close_mc.addEventListener(MouseEvent.MOUSE_DOWN,closePopUp);
}

function closePopUp(evt:MouseEvent):void
{
	removeChild(pop);
	pop=null;
	removeChild(film_mc);
	film_mc=null;
	container_mc.filters=[];
}

Same logics of the first example, but we have a function more: applyBlur that apply a BlurFilter to the MovieClip container.

Source files:

[Maldor]

thx for this flep....got my problem finally solved from before but this always comes in handy.........

[rafusea]

I haven't worked with Flash in a long time, so it is taking me a bit to get back into the swing of things. Also, I didn't really get the chance to get deep into ActionScript at all when I worked with Flash before.

This idea is EXACTLY what my friend had in mind for the website she is doing, and I am trying to help her get it done. But, I am not really sure how to manipulate the code so it will work for us, because i don't really know action script. This is PERFECT, now I just need to make it work for us!!!!

Can you give me some pointers?

Thanks! :)

[nilayvakil]

Great Tool Flep.

You are the best. Can we apply this to Elastic Gallery to open pop up for bigger picture?

Thanks in advance

[Arcane001100]

I am able to add another button and associate it with the function "opnPopUp"-- which then loads the same mc_pop (instance pop_btn). how can I change the association of the second button to a different movie clip "mc_pop2" (instance pop2_btn)?

Should I just create a separate class for each button instance? would this be the most efficient approach?

[Arcane001100]

More specific: where can I find the association of the button instance to the movie clip?

[Flep]

Hi,
you can create a second PopUp in the library. Associate it to a new class: PopUp2.
So:
var pop_up:PopUp;
var pop_up_2:PopUp2

...

[elus]

hi
plz i need help for this script , i am AS2.0 user and i wana get the script in the as2.0 version if these is possible plz send to me at eluss@hotmail.com
thank's a lot

[Kroco]

It's really useful.
But, If I don't want the do it with a button on the stage, but buttons create by a xml file (for a photo gallery)?
Every "button" will have a different name, but create by the program, not by hand.