Mac style popups – with the source

Filed under: AIR, Adobe, Flash, Flex — Wrote by Campbell on Saturday, September 1st, 2007 @ 12:33 pm

A few weeks back I posted an example of a mac style popup done in flex. I was soon told that the effect was called Cocoa Sheets. I is learned now ;)

Since then I have had numerous people gently reminding me that I was going to publish the source (you know who you are), so here it is.

First off I want to describe the way I tweened the placement of the component as a lot of people didn't seem to know about it. I used the built in AnimateProperty class built into flex. This allows you to animate pretty much any property of a component.

<mx:AnimateProperty easingFunction="{Sine.easeOut}" id="dropIn" property="y" duration="500" fromValue="{this.y}" toValue="{(isApplication)? 0 : 103}" target="{this}"/> 

You then just have to call dropIn.play();

Easy peasy! and you can use this in actionscript aswell like I did in the CocoaPopUpManager class. Its very handy.

 

Now onto the manager. I started by building my own PopUpManagerImpl class to replace the system singleton, but as expected hit a lot of road blocks  once I stepped into the mx_internal namespace. So I just made the Cocoa version a sort of proxy to the PopUpManager. Works for now but you may find limitations. Please feel free to contact me with any improvements you might make.

The new example with view source enabled is HERE and SOURCE IS HERE

If you use it and make it look cool please leave a comment here so I can see your works of art :)  

10 Comments   -
  • Comment by Pat | September 2, 2007 @ 7:33 am

    [blush] yes I was one of them bugging you.

    Hey just a quick point about a small bug in Flex that affects your code. Click on a button that creates a modal popup (like the top left button). Once it appears, press the spacebar. Even though you have disabled the screen, pressing the spacebar will click on the modal button again. The “workaround” I’ve used is that once I show my dialog, I set focus to it using a doLater. Once it has focus, you can’t click on anything else or use the spacebar.

    Thanks for sharing with us!!!
    -Pat

  • Comment by Tony | September 26, 2007 @ 3:22 am

    I think you should put this in one of the libraries. It could really benefit from exposure in flexlib. You should Doug take a look at it and see if it would be a candidate.

    Great work on this one! Really improves the look and feel of my flex application.

  • Comment by Campbell | October 5, 2007 @ 10:01 am

    Cheers Tony, I will ping Doug now hes back from MAX :)

  • Comment by Campbell | October 5, 2007 @ 10:03 am

    Cheers for the tip Pat :) Will update and add to the example

  • Comment by mreay | March 10, 2008 @ 4:51 am

    I can’t download it.

  • Comment by mreay | March 10, 2008 @ 1:19 pm

    The link is valid.Thanks!

  • Comment by Campbell | March 10, 2008 @ 2:04 pm

    No worries mate. Sorry my blog got H4×0r’d and I have to rebuild it, and missed a couple of folders :(

  • Comment by Marty Pitt | June 19, 2008 @ 9:32 pm

    Hi Campbell

    For some reason the component breaks when the parent object has a layout other than absolute.

    Eg., Changing your demo app to <application layout=”vertical”…

    breaks it.

    Likewise, keeping layout = “absolute”, but placing the parent inside a vbox / hbox also breaks it.

    I’ve taken a look through the source, but can’t work out what’s causing the problem. Any hints?

    Cheers

    Marty

  • Comment by loading | March 16, 2011 @ 3:46 pm

    I can read the source code

  • Comment by can i have it | December 23, 2011 @ 3:11 pm

    I want have the code,I think it’s cool ,can you gave me one to my Mail

Leave your comment

© Flex developer, Campbell Anderson, from New Zealand – xsive blog -