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.
Popularity: 55% [?]
Hey !
Nice job once again, I have updated the new links on flexbox.
Reflection Manager…
AS3 class to manage reflection…
A big thanks Mrinal!:)
[...] Factum Vicesimus Quartus » Reflection Manager 1.0 Reflection Manager 1.0 (tags: Flex components component reflection) [...]
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.
[...] 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 [...]
[...] Factum Vicesimus Quartus » Reflection Manager 1.0 [...]
[...] manager by Wietse Veenstra. A component that adds shadows to flex [...]
[...] I have updated the Reflection Manager. The new version can be found overhere [...]
Great Work!!!
But does it only work with Panels? I wanted to use a Box or Canvas, but it seems not to work.
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!
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!
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!
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…
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.
Don’t know why i can get a Label or the label for a Button to be reflected! Any help here?
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
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
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?
It’s working nice, and fast.
But there ’s 2 problems:
- It doesn’t reflect text.
- It does not support effects.
Good job anyway =)
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!!!
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…
I wish I could see something -is there a demo anywhere on this page?
http://www.wietseveenstra.nl/files/flex/ReflectionExplorer/v1_0/ReflectionExplorer.html
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
Can I use this class in flash cs3 ???
http://fukhaos.com
Awesome reflection and superpanel… Thanks so much for sharing the code. Really impressive.
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
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
[...] Flex Reflection Explorer (from Wietse Veenstra blog) demonstrates beautiful reflection effects using the ReflectionManager provided [...]