New Animated Title Window Component

I have put together an animated TitleWindow component-  you can view the sample application and view source to see how it is used.  I created the component to be used just like a TitleWindow is in a Flex application, but it animates your Flex pop ups.  You create instances of the AnimatedTitleWindow instead of TitleWindows and use the PopUpManager to add it to the application.  The difference is that you can specify an open effect and a close effect or both, or none.  There is a default animation behavior, and since it extends from TitleWindow you have all of the TitleWindow functionality available for your Flex pop ups.

There are many occasions for using TitleWindows as PopUps in Flex applications, and most of the time the code goes something like this:

  • Create an instance of a TitleWindow
  • Set its properties (showCloseButton = true);
  • Add an eventLister for the close event
  • Instruct add any children to the TitleWindow (forms, custom components, etc.)
  • Use the PopUpManager.addPopUp() or PopUpManager.createPopUp(); methods to show the Pop Up to the user
private function buildPopUp():void
{
//instantiate an instance of a TitleWindow
var tw:TitleWindow = new TitleWindow();
tw.showCloseButton = true;
tw.addEventListener(CloseEvent.CLOSE,onTWClose);
//instantiate some ui component that will be contained by the pop up
var someComp:SomeComp = new SomeComp();
//set its properties, etc.
someComp.foo = "foo";
//add the component to the TitleWindow instance
tw.addChild(someComp);
//use the PopUpManager class to add the pop up to the application
PopUpManager.addPopUp(tw,Application.appliction as UIComponent);
//center the Pop Up
PopUpMananger.centerPopUp(tw);
}

You end up with something like this:

A Sample Title Window

Using the AnimatedTitleWindow component is almost exactly the same; however, there is an added benefit of specifying an open effect, close effect, open animation duration, and close animation duration.  All of these properties have default settings as well, so you can literally use it out-of-the-box, just like the TitleWindow component, and it will perform an Iris effect on the open, and a resize effect on the close.

If you want to make the AnimatedTitleWindow behave in a more custom manner, you can create instances of effects, set their properties, and pass them to the AnimatedTitleWindow’s constructor, and it will play them accordingly.

For example, if you wanted to have the AnimatedTitleWindow open with a Dissolve effect and close with a Zoom effect, you could create an instance of each, pass them to the constructor of the AnimatedTitleWindow instance, and then when the PopUpManager adds or creates the Pop  Up it will play the animations on open and close of the component.

private function addAnimatedPopUp():void
{
//create an instance of a Dissolve effect and set its properties
var dis:Dissovle = new Dissolve();
dis.alphaFrom = 1.0;
dis.alphaTo = 0.1;
dis.color = "someColor";
//create an instance of a Zoom
var zoom:Zoom = new Zoom();
zoom.originX="Calculated";
zoom.originY="Calculated";
zoom.zoomWidthFrom=0.1;
zoom.zoomWidthTo=1.0;

//now create the instance of the animated pop up and add it to the application just like you would a TitleWindow with the PopUpManager
var anTW:AnimatedTitleWindow = new AnimatedTitleWindow(dis,zoom);
//add any children
PopUpManager.addPopUp(anTW,Application.application as DisplayObject);
PopUpManager.centerPopUp(anTW);
//that’s it the Pop Up is anmiated just the way you wanted it to be
}

If you choose to use the default animations for the open and close (Iris,Resize) then all you have to do is instantiate an instance of the AnimatedTitleWindow and pass no properties to the constructor

private function addDefaultAnimatedTitleWindow():void
{
//create an instance of the AnimatedTitleWindow
var anTW:AnimatedTitleWindow = new AnimatedTitleWindow();
//add any children
PopUpManager.addPopUp(anTW,Application.application as DisplayObject);
PopUpManager.centerPopUp(anTW);
}

About this entry

You’re currently reading “New Animated Title Window Component,” an entry on Binary Giant

Published:
12.27.08 / 5pm
Category:
Flex, Rich Internet Applications