Masking and Drawing Shape.

private function add_Shape(type:String=""):void
{
removeOrMaskUI();
var bxShared:Sprite = new Sprite()
bxShared.graphics.beginFill(0xffffff, 100);
if(type=="circle")
bxShared.graphics.drawEllipse(0,0,xSize,ySize);
else if(type=="square")
bxShared.graphics.drawRect(0,0,xSize,ySize);
var ui:UIComponent = new UIComponent();
ui.name="currentui";
ui.addChild(bxShared);
ui.setStyle("right",xSize);
ui.setStyle("top",0);
container_object.addChild(ui);
}
public function removeOrMaskUI(isMasking:Boolean=false):void
{
var curUI:UIComponent=container_object.getChildByName("currentui") as UIComponent;
if(curUI)
{
if(isMasking)
container_object.mask=curUI;
else
container_object.removeChild(curUI);
}
}

Give Parallel Effect:

Some time we need to give more than one effect parallaly to component.
for that we can combine multiple effect in parallel tag.

For example.

"<" mx:Parallel id="eff_p" duration="1500" ">"
"<" mx:Fade alphaFrom="0" alphaTo="1" easingFunction="{Elastic.easeInOut}" /">"
"<" mx:Zoom zoomHeightFrom="0.7" zoomHeightTo="1" zoomWidthFrom="0.7" zoomWidthTo="1" easingFunction="{Elastic.easeInOut}" / ">"
"<" /mx:Parallel ">"
"<" mx:Parallel id="eff_remove" duration="800" ">"
"<" mx:Fade alphaFrom="1" alphaTo="0" easingFunction="{Elastic.easeInOut}" / ">"
"<" mx:Zoom zoomHeightFrom="1" zoomHeightTo="0.7" zoomWidthFrom="1" zoomWidthTo="0.7" easingFunction="{Elastic.easeInOut}" / ">"
"<" /mx:Parallel ">"

This will implemnt in component or item render when we need to give it.
On init function in that comonent we can play this effect.

eff_p.play([this]);

We can also give listner when we need to remove it.
for example we need to play remove effect first before closing popup
private function closePopup():void
{
eff_remove.play([this]);
eff_remove.addEventListener(EffectEvent.EFFECT_END, removeItemFromStage);
}

private function removeItemFromStage(event:EffectEvent):void
{
eff_remove.removeEventListener(EffectEvent.EFFECT_END, removeItemFromStage);
PopUpManager.removePopUp(this);
}