Custom Component with Degrafa Skinning

By | July 15, 2008

This demo shows my initial attempt at using Degrafa skinning. I wanted to customize the tiles in the list so that they would look unique and also provide a nifty way of displaying a list of options for the selected tile. You can see the result by clicking on the lower right corner of each tile to reveal the hidden options. This is similar to a pop-up button, but it is skinned and masked to slide out to the side. I’ve added sound effects and included some filtering animations that I pinched and tweaked from other demos I’ve come across. As always, the source is included. Enjoy. 🙂

View Source

[SWF]/wordpress/wp-content/demos/TileOptionsDemo/TileOptionsDemo.swf, 560, 575[/SWF]

9 thoughts on “Custom Component with Degrafa Skinning

  1. PatB

    Very nice – thanks for sharing! This gives me a few ideas for something I was working on.

  2. J

    Bill hey fellow Austin FLexer here. Hey I have recently taken over a project with several custom components. I can’t seem to find a way to center these custom components on stage (flex app). What does the custom component need in order for me to center them on stage?

    Thanks, EJ

  3. Bill Post author

    @EJ: Kind of a hard one to answer without seeing the code, but my first thought is this:
    The parent container of these custom components will position them based on its own settings as well as the size/dimensions that each component reports back when each custom component measures itself. So the answer would be that you should look to see what the settings are for the parent container the components reside in and also make sure the components are correctly determining their space requirements. Try using a VBox as the parent container with the properties of horizontalAlign=center verticalAlign=middle and then add these custom components to that VBox. If the components are written correctly (ie, they are correctly determining their size requirements) then they should appear dead center assuming the VBox itself is centered.

  4. RG Chowdary

    Bill, its nice,

    when I am trying to run this project on my pc, but SmoothBox.swc is not found in the zip.


  5. Bill Post author

    @RG Chowdary
    The VSmoothBox class is referenced in the ListFilterView2.mxml component, which is not used by this demo. I accidentally left that file in the ZIP archive, so I think you can just delete it and not worry about the missing VSmoothBox class that it contains.


  6. Komal

    When I try to load this project I get error “unable to load TweenMax.swc”. However, I have TweenMax.swc placed in the lib folder of the project, and is also mentioned in library path in Project Properties dialog box. Can you please guide me through the solution?

    1. Bill Post author

      Not sure why you are getting this. If you go to and download the source code, you should be able to just put the gs folder in the root of your source path and it should run without the SWC file (since you will now have the required TweenMax source code in your path).

  7. bin

    3.0: Deprecated sequence() and multiSequence() in favor of the much more powerful and flexible TweenGroup class

  8. Pingback: Tile Options Demo using Flex 4 | Bill White's Blog | HTML5 / Javascript / d3 / iOS / Data Visualizations / Flex

Leave a Reply

Your email address will not be published. Required fields are marked *