Customizing a PopUp Effect in Flex

There was a post on Adding animations and effects to Tooltips in flex at blog.flexexamples.com I thought this was a great simple example… I wanted to show how to customize a PopUp with a similar effect. ApplicationSource You can also right click to view the source.

1. Create a component for the PopUp, I tend to base my PopUp’s off of either a Panel, or a TitleWindow, usually a TitleWindow because by default you can add a close button to it, with a couple letters of code… (showCloseButton=”true”), but I have also extended the Panel to add many different things in the header of the panel… you can do this by extending it, and adding children to the “rawChildren” but we’ll save that for another post.

2. import mx.managers.PopUpManager;

3. create the code for Popping up the PopUp

[Bindable]

private var win:MyTitleWindow;

private function createPopup():void{

win=MyTitleWindow(PopUpManager.createPopUp(this,MyTitleWindow,true));

win.title = ‘This is my title window’;

win.x = -500;

win.y = 0;

customMove.end();

customMove.play();

}

4. Create your custom animation

<mx:Parallel id=“customMove” target=“{win}”>

<mx:Move duration=“2000”

xTo=“{(stage.width – win.width) / 2}”

yTo=“{(stage.height – win.height) / 2}” />

<mx:WipeRight duration=“2000” />

</mx:Parallel>

5. Call createPopup()

NOTE: these links at the bottom, are the same as at the top, they are just here in case the blog post gets long. ApplicationSource You can also right click to view the source.

7 comments on this post.
  1. hsTed:

    Is it me, or are the links not working?

  2. admin:

    their not… axel.cfwebtools.com, is hosted at cfwebtools… where i used to be employed…

    they thought my blog was no longer being used, and that i had moved everything over… it was a miscommunication between the boss and me, he thought i was going to just move stuff over as time went on, and i thought it was okay that my stuff was on there… and so they deleted my stuff, and i have to wait till monday to get it back… i just found out yesterday…

    i’m really sorry…

  3. Alex:

    Thanks!
    Looking at your code I finally figured out where I was missing the details.

  4. lakshmikanthreddy:

    thank you , thanks a lot , u r popup effect has helped me out .

  5. Lolo:

    I have been looking everywhere to see if there is an option where what if you click outside the popup window so the popup window gets closed. can this be possible?

    click on popupcreate();
    //popup window is created
    if user clicks outside of popup window
    then popupwindow will be closed.

    is that available in flex?

  6. Sabari:

    Hey Dude !

    It is the nice tutorial..

    If u add effect while removing the PopUp its too good.. Can u please do that?

    Regards,
    Sabari

  7. acebomoza:

    Oh!!! it’s pretty tutorial

    and help me very much
    … very useful although 2 years ago ^^

    Thank you …

    ahh.. sorry my English not well T.T

Leave a comment