Atellis Reflection Component

For the first Atellis Labs release we’re sharing our Flex Reflection Component. This component acts as a reflective surface, displaying a live visual reflection of the area above. It’s an update to the previous reflection component I released on my personal blog last year.

I’ve been keeping updates to this component in my back pocket for quite a while, and in that time it’s been through a lot of changes. From trying bitmap compare techniques to automated event attachments, I left no stone unturned in finding the best implementation for a reflection component in Flex. In the end the best option was a straightforward automatic vs. manual approach. The default mode of automatic will give you dependable live rendering right out of the box. Setting the mode to manual will let you optimize CPU usage by allowing full control of when the reflection is updated. Along those lines I’ve radically improved the performance of the draw method using the new Flex profiler and documented the component using ASDoc.

Since the first release I’ve also seen this component used in some really cool and unexpected ways, and I wanted to be sure this update would accommodate those uses. Occasionally the reflection target would be manipulated by non-standard effects or unconventional display list drawings which weren’t reflected correctly. To address that, I added a clean solution for automatically reflecting the application area above the component when a target is not specified. This means that virtually anything in the application layer will be reflected correctly by default. It also means that implementing the reflection component is as easy as the code below.

<Reflection />

Image of Reflection Component

Download: Flex Reflection Component (282 kb)

Enjoy!

17 Responses to “Atellis Reflection Component”

  1. Campbell Says:

    Looking good Ben,

    thanks for sharing, nicely documented too :)

  2. Tom Chiverton Says:

    The following doesn’t show a reflection:

    Neither does

    Nor does:

    But this does:

    Giving a target=”{anId}” doesn’t seem to help :-(
    (flex 3 beta 1)

  3. Tom Chiverton Says:

    Hay, Ben, your blog doesn’t like code in comments, drop me an email for the test cases (just Text in a VBox with the reflection inside or outside the VBox).

  4. Ben Stücki » Flex Font Embedding Says:

    […] I released the Atellis Reflection Component on Atellis Labs, and I’ve been meaning to post a few follow up topics. The first is on a […]

  5. Ben Stücki » Reflective Surface Example in Flex Says:

    […] been writing about my Reflection Component a bit this week, and I wanted to post a sample application before moving on. One of the better uses […]

  6. Actionscript Classes » Reflection Component Says:

    […] http://labs.atellis.com/2007/07/11/atellis-reflection-component/ […]

  7. Atellis Reflection Component « Flash Enabled - Get Ready With Flash… Says:

    […] reflection component made by Ben Stucki, was updated. You can download it here. This reflection component is the same as Doug used at his […]

  8. Doug McCall Says:

    Hi Ben,

    I made these changes a while back, but never got around to posting them because I haven’t really used this reflection component again until recently, so I thought I’d offer them up. I added a falloff and blur property so that you can control how much of the reflected object actually shows up below in addition to being able to blur it…this seemed to allow me to customize the reflection a little better. The changes were extremely simple, as I only modified the updateCachedAssets method for the falloff property.

    I posted the modified class here -> http://www.dougmccall.com/Reflection.as (I can take this down as soon as you tell me to)

  9. Doug McCall Says:

    Has anybody else noticed that Text/Label objects will not reflect? ‘Sup with that?

  10. Samuel Neff Says:

    Doug,

    In order to reflect text (or do any type of image manipulation on text such as rotation) you need to use embedded fonts.

    HTH,

    Sam

  11. debtfree for Says:

    states debtfree for debtfree

  12. fallen sevenfold avenged Says:

    avenged almost sevenfold avenged sevenfold listen

  13. Adobe Flex Reflection « ActionScript 3.0 - Flex Says:

    […] March, 2008 The Atellis component can be viewed and downloaded here. It only seems to work with embeded […]

  14. Actionscript 3 - Flex » Adobe Flex Reflection Says:

    […] Atellis component can be viewed and downloaded here. It only seems to work with embedded […]

  15. rugs Says:

    Thanks for sharing this.
    I share the opinion of the first poster – nicely documented. One of the most annoying (yet true) things about a lot of open source is just the bad documentation. True, since the release isn’t commercial, it’s hard getting the documentation right because most technical people can’t really write in the kind of way that a document requires. And, obviously, they don’t have the money to spend on the project to hire a professional writer. So, good job on that front.

  16. Fine art portraits Says:

    I wanted to drop you some codes for your perusal Ben. You see I’m not so techie and so I wanted to show you some codes and see which ones aren’t right. But it seems that your blog doesn’t accept code on the comment section. Is there any way that I can let you see my work?

  17. jexchen » Blog Archive » Flash、Flex资源收集之十全大补 Says:

    […] http://labs.atellis.com/2007/07/11/atellis-reflection-component/ […]

Leave a Reply