Factum Vicesimus Quartus

Exploring web x.0, innovation and RIA techniques

Add to Google




Reflection Manager 1.0

May 29th, 2007


I have updated my Reflection Manager to version 1.0. I have implemented a blurring option like suggested in the comments on my previously posted version (0.9). I have also built in the functionality to update the reflection when its target component is dragged or resized. Furthermore I made some minor updates to improve the performance even a little more. I hope this will be of some good use to you. Let me know when you use it, what you think of it and/or if you have found a bug or have other suggestions on improving it. Thnx!

Open the Reflection Explorer (right-click for the source).
Open the source-view directly.


31 Responses to "Reflection Manager 1.0"
  1. # 1   Mrinal Wadhwa
    May 30th, 2007 at 02:32

    Hey !

    Nice job once again, I have updated the new links on flexbox.

  2. # 2   flextips
    May 30th, 2007 at 04:00

    Reflection Manager…

    AS3 class to manage reflection…

  3. # 3   Wietse Veenstra
    May 30th, 2007 at 04:57

    A big thanks Mrinal!:)

  4. June 1st, 2007 at 09:24

    […] Factum Vicesimus Quartus » Reflection Manager 1.0 Reflection Manager 1.0 (tags: Flex components component reflection) […]

  5. # 5   ken
    June 1st, 2007 at 13:52

    Great control, just a quick note, the ReflectionManager is expecting that the parent container has a distance value (targetResizeHandler). Didn’t know if that was by design, but maybe another way to do that would be to have the distance specified as a property on the manager itself.

  6. # 6   Garotos de Web - Reflection Manager efeito de espelho no Flex 2
    June 12th, 2007 at 14:55

    […] Resovi procurar algum tutorial ou classe que tivesse como fazer esse efeito. Eu achei no Google o Reflection Manager Explorer 1 que é uma classe que cria esse efeito e você pode implementar em qualquer componente de forma […]

  7. # 7   Code Sweat Blog » Blog Archive » Some Flex 2 Related Links (pt. two)
    July 5th, 2007 at 15:28

    […] Factum Vicesimus Quartus » Reflection Manager 1.0 […]

  8. # 8   Web X.Y » Blog Archive » Some of the great stuff created at CMD
    July 11th, 2007 at 10:08

    […] manager by Wietse Veenstra. A component that adds shadows to flex […]

  9. # 9   Factum Vicesimus Quartus » ReflectionManager v0.9
    August 6th, 2007 at 20:12

    […] I have updated the Reflection Manager. The new version can be found overhere […]

  10. # 10   Matthias
    August 22nd, 2007 at 09:16

    Great Work!!!
    But does it only work with Panels? I wanted to use a Box or Canvas, but it seems not to work.

  11. # 11   Stephen
    August 25th, 2007 at 14:53

    Thanks Wietse. Very cleanly coded and just what I was looking for.

    At the moment though if the target is not scaled at 100% the reflected bitmap is not a true reflection. I guess this is because you’ve hardcoded the matrix scale parameters to 1 and -1. Rather they should be target.scaleX and target.scaleY*-1.

    Secondly a suggestion (for version 1.1 perhaps): an offset property to specify the gap between the target and reflection, so that the target does not always have to look like it is flush against the reflective surface. That way by dragging an object upwards we could easily program its reflection to move downwards (and vice versa) giving a more realistic relationship with the surface.

    By the way I learnt heaps about bitmaps and matrices from your code. Thanks!

  12. # 12   Brian
    September 6th, 2007 at 23:40

    Hi Wietse,

    Congrats on the absolute fastest reflection component out there!

    You might want to fix this however… Your function “targetMoveHandler”, takes a MouseEvent… which should be MoveEvent. Also, you might want to add the event listener 😉

    this._target.addEventListener(MoveEvent.MOVE, targetMoveHandler);

    Once I added that in and changed the even type, it works flawlessly!

    Thanks!

  13. # 13   Brian
    September 8th, 2007 at 07:51

    Huh?!

    If you set up a component with your ReflectionManager, and try to resize the window to a smaller width, or height of the component being reflected, the debugger version of flash, (currently using latest stable version), throws a very weird error along of the lines of: “Cannot convert FlexShape into IUIComponent”.

    I’m still very new at working with custom components, but I narrowed it down to this event –> Event.REMOVED_FROM_STAGE.

    Any ideas? I’m completely baffled!!

    Thanks!

  14. # 14   Wietse Veenstra
    September 8th, 2007 at 18:56

    Thanks for the comments everyone, I’m glad you like this one. Also thank you for the suggestions. I will implement them soon. I’m working on a new version of the SuperPanel at the moment and also will update the Reflection Manager then. Keep checkin in…

  15. # 15   Kerkness
    February 29th, 2008 at 02:45

    Very nice component and thanks for sharing.

    To get your component working (outside of your demo) I had to add a ‘distance’ property and modify the targetResizeHandler method to use this.distance instead of parentDocument.distance.

    Thanks again.

  16. # 16   carnage
    March 16th, 2008 at 14:39

    Don’t know why i can get a Label or the label for a Button to be reflected! Any help here?

  17. # 17   David Stokes
    March 17th, 2008 at 17:07

    Hi,

    Great component. When I tried to use it first it crashed on line 146 with an “invalid param” error. It turns out that when I copy/pasted the xml params, the height of the reflection was less than 1. Changing line 140 to check for values > 1 instead of 0 fixed this problem.

    Regards

  18. # 18   carnage
    March 18th, 2008 at 19:19

    Still doesn\’t perfectly work for me :
    I have a panel with a lot of things datagrids, trees,text input,sliders buttons and labels
    The reflection manager reflects everything but the text for that components

  19. # 19   Kyle Burke
    April 10th, 2008 at 18:51

    Best reflection available! Thanks for the component.

    Just something to add…I have a requirement to center the target on browser/app resize. That works fine but I noticed that the reflection did not move accordingly. I added:

    public function windowSizeUpdateHandler(event:ResizeEvent):void {
    var mouseEvent:MouseEvent = new MouseEvent(MouseEvent.CLICK);
    this.targetMoveHandler(mouseEvent);
    }

    …which just constructs a MouseEvent and reuses targetMoveHandler(event:MouseEvent). I then added this EventListener to my app:

    this.addEventListener(ResizeEvent.RESIZE, reflectMgr.windowResizeUpdateHandler);

    I’m still kind of a Flex noob so if there is a better way, I’d love to know it. Programmatic binding?

  20. # 20   gally
    May 9th, 2008 at 14:34

    It’s working nice, and fast.
    But there ‘s 2 problems:

    – It doesn’t reflect text.
    – It does not support effects.

    Good job anyway =)

  21. # 21   Rafael Biz
    September 19th, 2008 at 19:39

    I fixed the distance bug but i still cant get a Label or the label for a Button to be reflected! Could someone help me?

    Great Joob!!!

  22. # 22   DeepVoid
    November 1st, 2008 at 16:43

    I apply the reflection effect to a normal panel I use as a login panel. If I switch to another state and then come back to the login state (in case of login failure, for example), the reflection is gone. How to re-enable it? Pardon me, I’m a flex noob…

  23. # 23   Marc
    November 24th, 2008 at 18:31

    I wish I could see something -is there a demo anywhere on this page?

  24. # 24   Kyle Burke
    November 24th, 2008 at 19:59
  25. # 25   Valer
    December 4th, 2008 at 03:14

    I am using the reflection component for an app that gathers data from the user and I noticed the following bug in the app. Sometimes with the reflection enabled, the controls like buttons or combo boxes keep flickering when the mouse is over them and I cannot open the combo box drop down. When I click on the combo box to open the drop down, it shows up for a second and immediately is hidden. This doesn’t happen always, and so far I couldn’t link it to any event or app state.

    Has anyone see this behavior or knows of any hints?

    Thanks,
    Valer

  26. # 26   Vinicius Olivera
    December 10th, 2008 at 15:25

    Can I use this class in flash cs3 ???

    http://fukhaos.com

  27. # 27   sanjay vekaria
    December 16th, 2008 at 17:36

    Awesome reflection and superpanel… Thanks so much for sharing the code. Really impressive.

  28. # 28   Valer
    January 8th, 2009 at 20:28

    I have an update to my post #25. It appears that the flickering is related to my use of data grids and advanced data grids and maybe the fact that they have custom render controls like buttons & combo boxes. It is also a timing issue, I could trace and see that in some cases when i move the mouse over a button, combo box control or a line in the grid, the flicker happens and at that time the reflection manager keeps redrawing the bitmap over and over again. It’s like a race condition between the update of my control and the reflection.
    First I tried to fix this by using callLater when redrawing the reflection bitmap. It helped a bit, it stabilized the buttons and the combo boxes, but the flickering still happened for the highlighted line of the grids. So, the second fix was to reject the reflection update if it happens in a very short interval after the last reflection update. I set that interval to 500 ms. This solved the issues for now and I am not too concern about the reflection being out of sync with the controls for a short period of time :)

  29. # 29   Kai
    April 20th, 2009 at 12:33

    Hi,

    nice Component! But i recommend to make the distance a property of the manager instead of “hoping” the parent has a distance property! (Just as Kerkness already pointed out.)
    Further i noticed reflexions vanishing if i resize the browser window. This is due to the “Removed_From_Stage” event handling. There is no “Added_To_Stage” event handling – adding one fixed this for me.
    (This new event handler contains just “_target.parent.addChild(this);”)

    Thx again for this nice component :)

    Greetings, Kai

  30. # 30   The Blogagic Flex Explorer Collection (Component, Style, Effect) | Blogagic
    May 25th, 2010 at 12:00

    […] Flex Reflection Explorer (from Wietse Veenstra blog) demonstrates beautiful reflection effects using the ReflectionManager provided […]

  31. # 31   judah
    October 19th, 2010 at 02:02

    Rafael,

    Prior to Flash Text Engine in Flash Player 10 or 9 you need to embed the font for it to show up a reflection. If you use Flex 4.0 SDK that supports the FTE then that may not be necessary.

Leave a Reply