Friday, September 11, 2009

Flex Popups with Effects

Whew, making popups have transition effects in Flex was harder than I thought it'd be.
Still, got it working.
Here's how you do it:
===
main.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:application mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.containers.TitleWindow;

public var swipe1:TitleWindow = new TitleWindow();
public var swipe2:TitleWindow = new TitleWindow();
public function popupClick():void{
var dialogClass:Class = Swipe2;
swipe2 = PopUpManager.createPopUp(this, dialogClass) as TitleWindow;
dialogClass = Swipe1;
swipe1 = PopUpManager.createPopUp(this, dialogClass) as TitleWindow;

}
]]>
</mx:Script>
<mx:button label="popup" click="popupClick()">
</mx:Application>

===
Swipe1.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
showCloseButton="true" close="handleClose(event)"
backgroundColor="green"
move="adjustForMove()">

<mx:script>
<![CDATA[
import mx.events.EffectEvent;
import mx.effects.WipeRight;
import mx.core.Application;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;

private function adjustForMove():void{
this.x=Application.application.swipe2.x;
this.y=Application.application.swipe2.y;
}
private function transitionClick():void{
var wipeOut:WipeRight = new WipeRight();
wipeOut.showTarget = false;
wipeOut.target = this;//Application.application.swipe1;
wipeOut.addEventListener(EffectEvent.EFFECT_END,wipeEndHandler);
Application.application.swipe2.visible = true;
wipeOut.stop();
wipeOut.play()

}
private function wipeEndHandler(e:EffectEvent):void{
this.visible = false;
}
private function handleClose(event:CloseEvent):void{
Application.application.swipe2.handleClose(null);
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:button label="transition to 2" click="transitionClick()">
</mx:TitleWindow>

===
Swipe2.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
showCloseButton="true" close="handleClose(event)"
backgroundColor="red"
move="adjustForMove()">

<mx:script>
<![CDATA[
import mx.events.EffectEvent;
import mx.effects.WipeLeft;
import mx.core.Application;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;

private function adjustForMove():void{
this.x=Application.application.swipe1.x;
this.y=Application.application.swipe1.y;

}
private function transitionClick():void{
var wipeOut:WipeLeft = new WipeLeft();
wipeOut.showTarget = false;
wipeOut.target = this;
wipeOut.addEventListener(EffectEvent.EFFECT_END,wipeEndHandler);
Application.application.swipe1.visible = true;
wipeOut.stop();
wipeOut.play()

}
private function wipeEndHandler(e:EffectEvent):void{
this.visible = false;
}
public function handleClose(event:CloseEvent):void{
PopUpManager.removePopUp(this);
}

]]>
</mx:Script>
<mx:button label="transition to 1" click="transitionClick()">
</mx:TitleWindow>

===

Let me know if you have any questions.

No comments:

Post a Comment