Fisheye Component v0.1
April 14th, 2006
A few days ago I was idly browsing the web when I ran across a nice little DHTML animation that zoomed in on text as you moved your mouse around it. The effect reminded me of the Fisheye Menus developed by Ben Benderson at the University of Washington. I remember reading about the concept years ago and thought was a great little bit of UI innovation. Well, one thing led to another, and shortly thereafter a Flex component popped out.
Try out a demo below…
I’ve been poking and prodding it in my spare time, and decided it’s far enough along to put out for anyone to play around with. So without further ado, here’s the Fisheye component v0.1. It’s available under the MIT Open Source license, so feel free to use it or modify it in your own applications.
A couple of notes:
Flash vs. Flex
One important goal with this component, as with a bunch of things I’ve been working on lately, is to help the community see how you can merge the best of what flex gives you (productivity, development process, consistent component model) with the best of what people have been doing in flash for years (rich, highly interactive, fluid, etc). The SDK’s GUI components provide a lot of value, but they’re really just the tip of the iceberg of what’s possible with Flex. Hopefully these kinds of demos whet your appetite.
Item Renderers
The Fisheye component is based around the concept of itemRenderer factories, just like the flex list and charting components. The goal is to use composition to separate behavior from content, so you can reuse the basic fisheye effect across many different applications and uses. Take a look at the source and see how it’s done.
states as a contract
I’m experimenting a bit in this component with the idea of using view states to communicate state information form the component to its item renderers. In addition to telling the Fisheye component what to use as its item renderer, you can tell it what state to put the renderer in when it’s hilighted or selected.
It’s a nice idea, but it’s complicated by the fact that there’s only one state variable for each component. With this approach, for example, you couldn’t have the fisheye menu use states as a contract and have the item renderer itself use states to control whether or not it’s expanded or collapsed.
For what it’s worth, we actually identified this limitation when we designed states for Flex 2. We sacrificed this use case in favor of the simpler approach on the belief it would make it easier to understand and use in the more general case. I’m still hoping we can find a way to get the functionality in the next release.
Separating layout from intent
The Fisheye component uses a pattern that’s been coming up a lot lately where the intended layout of the component is not the same as the actual layout.
In this case, the fluid animation as you move the mouse across the component is built by migrating the actual layout of the renderers towards the intended layout (as determined by the mouse position) over time. Over and over again, I find myself writing layout routines that update external structures rather than the components themselves, and update routines that use a variety of algorithms to reconcile them.
It’s come up enough now that I think I’ll try pulling it out into a reusable ‘mixin’ for my next project.
Styling
I borrowed the styling used in the explorer from a mockup by one of the excellent designers on the Adobe Experience Design team, Ty Lettau. Thank god for designers.
Limitations
I’m a little embarassed to point out the original Fisheye Menu as an inspiration for this, since at this point I’ve really only copied the form and not the function. The Fisheye menu is intended as an alternate way to present a large list of information on one screen without having to resort to paging or scrolling.
But this Fisheye component doesn’t make any attempt to fit the contents to its space on screen. RIght now the layout is determined entirely by the value of its styles.
In the next version, I hope to have it dynamically adjusting those values to keep the items constrainted within the component’s bounds.
Useful?
Personally, I think the real promise of Flex is in the marriage of the productivity of the platform with the expressiveness of flash. But I’m curious what you think. Where should the flex team be spending its time in the next releases? On features that make it easier to build ‘expressive’ content like this? Or elsewhere, on other things? Like what?
Leave a comment, let me know what you think.
April 14th, 2006 at 8:51 am
Can I use The Fish Eye Component In My Projects?
April 14th, 2006 at 9:59 am
That rocks. Good job, clean code, well done!!
April 14th, 2006 at 10:40 am
Very cool. I’ve done a bunch of custom stuff in flash, but I think it’s time to start doing custom objects in Flex. It’s gotta be easier in Flex, that’s for sure!
April 14th, 2006 at 11:53 am
Love the fisheye. Would it be possible to include support for content that had a veritical aspect? Right now the line of photos and text are merely horizontal. Could you have the fisheye effect work with a paragraph of text or a grid of photos?
April 14th, 2006 at 12:36 pm
Jack — I know this isn’t what you’re asking, but to be clear, the v0.1 can be either horizontal or rectangular.
But you’re asking about 2 dimensional layouts, like grid or flow, right? Great suggestion, I’ll add it to the enhancement list.
April 14th, 2006 at 12:42 pm
Thank you so much for these demos. I was hoping to see some examples on how to build unique custom components completely in Flex. Excellent Job!
April 14th, 2006 at 1:16 pm
Very good Component!
A Hint, if there are more images than in your example they are not shown. Maybe you can fix this in 0.2
April 14th, 2006 at 2:03 pm
Faisal and all — I’m putting the source out under the MIT open source license, so go ahead and use it however you see fit.
April 14th, 2006 at 3:04 pm
[...] Check out the Fish-eye component on Ely’s blog Posted by jcrosby Filed in Development, Flex [...]
April 14th, 2006 at 3:30 pm
Fisheye component is so cool - and fast.
I hope someone creates an Flex 2 open source component library project…where we all can contribute with loads of new Flex v2 components etc :)
April 14th, 2006 at 3:34 pm
nz — That’s a great idea. There’s some great content starting to crop up, and it would be nice to have a central repository where you can find it. Sho Kuwamoto and I (who has created some great components of his own) were just discussing this not 15 minutes ago.
April 14th, 2006 at 6:58 pm
[...] Just cruisin my rss feeds and stumbled on some really cool Flex Fish Eye Menus that Ely put together. I’ve always like the concept of fish eye menus. Very usable. Allows a user to scroll through items very quickly and as the target is always big, but it allows to have smaller menu items for display. Also encourages users to interact and play with the menu vs just look at it. Have I mentioned I’m stoked to start integrating Flex and AJAX UIs? Well I am. Expect to see some action here in the next couple weeks. [...]
April 15th, 2006 at 4:07 am
Ely,
This is a great component. You know, I was just thinking of making some suite similar to this.
I was using picasa2 for some project and really loved the fluid UI. I don’t know if you have used it but, wow google does some good stuff!
The part that intrigued me was the drag and drop cell items that repositioned children by tweens. Also, how they seem to have a liking for tweens but use them in a responsible way.
Anyway, it is not a fisheye I was thinking of but, just creating an abstract layout algorithm that could, move/tween/rotate items parabolically.
Peace, Mike
April 15th, 2006 at 4:19 am
[...] http://www.quietlyscheming.com/blog/2006/04/14/fisheye-component-v01/ [...]
May 11th, 2006 at 11:37 pm
hi ely,
i heard good things about this example. unfortunately, i can’t view it. is there a chance you’ll be able to convert it to work in Flash Player 9 (not FP 8.5) in FB2B3?
June 21st, 2006 at 7:03 pm
[...] component experiment with a fisheye lens i need to look into when i have time. [...]
December 14th, 2006 at 8:43 pm
Great stuff. Thank for the help on the chat!
I cant wait to take a peek at the source!
December 18th, 2006 at 9:32 pm
Hey Eli,
Great work, but I can only get the image examples to work locally. Seems to be missing a key class: qs.controls.CachedLabel
Any chance you have it laying around? :)
Thanks,
Ben
December 18th, 2006 at 9:37 pm
Please ignore last post… just found v0.3 here.
Very cool…
January 30th, 2007 at 7:51 am
Really cool Stuff …But the FisheyeBase class needs qs.controls.cachedlabel…where can i get it from.Downloaded v0.3
thanks
February 15th, 2007 at 5:44 am
http://google.com
February 23rd, 2007 at 3:35 am
Hello, I am not a programmer but I need someone who will customize this component for my web site. Do you know how can I find such person?
June 18th, 2007 at 3:45 am
Hello,
How can i get x and y position of each image in fisheye by when i click or mouseover on any image?
September 18th, 2007 at 4:51 am
i have a button outside the component. by clicking the button the fisheye component should change its selected index according to the index given to it.
how do i fire an event click for FishEye buttons
October 31st, 2007 at 10:13 am
[...] Ely Greenfield has put together a cool Flex 2 FishEye menu component (complete with source). [...]
November 3rd, 2007 at 11:48 pm
Hey! Do I need to install Flex data services to run this application? Coz I’m getting the following error when I’m trying to run the application.
unable to open ‘C:\dev\qs\web\config\WEB-INF\flex\services-config.xml’
I tried changing the compiler options, but still no luck.
How exactly do I get this application up and running? Please help. Thanks in advance.
January 22nd, 2008 at 2:16 pm
I have downloaded and implemented v 0.3 as a component in my facebook application (under development). Thank you very much for an excellent piece of code.
I have begun to modify it to fit some of my own requirements. For instance, I have the requirement of adding assets to the fisheye menu from an externally loaded asset swf. I have modified your component to do that.
My next challenge, though, is to have the fisheye container not take up 100% width on the screen, and still allow for the children elements to display in their entirety. I have started messing with this by extending Container, as opposed to UIComponent. The clipContent = “false” property seems to have no effect though. Also, I’ve attempted to use the rawChildren property of the Container to add child items (because clipping is disabled for all children added to rawChildren) - but neither of these methods worked. Perhaps you may be able to point me in the right direction with respect to this issue.
Best regards, and thank you again for an excellent example of a highly modular and customizable flex component!
Alex