View Demo
Download Source Code
PERSONAL NOTES
So I've read a lot of posts on the flashcoders mailing list lately, debating about the power vs. complexity of Macromedia components and whether we'd be better off with a thinner architecture. As a general rule in UI design, solid usability comes with a higher cost in development effort and testing, and Macromedia components are no exception to the rule. The architecture behind components such as the ListBox component allows Flash developers to extend the functionality of those widgets while re-using all of the coding efforts that made them so user-friendly in the first place. I think this fisheye menu demonstrates the extensibility of the Framework engineers' architecture. Not only is it usable, but it also smoothly inherits the FSelectableListClass functionality and integrates into the FUIComponent class hierarchy.
Flash developers might recognize fisheye menus from Joshua Davis' "Tsunami" special effect. Fisheye views have actually been around for much longer than Flash (Furnas, 1986). The main difference is in the mathematics and user interaction, which follow tighter constraints in a full implementation of fisheye distortion.
OVERVIEW
This implementation of the fisheye menu extends the original Listbox component. The Flash-based fisheye menu takes advantage of the natural vector scalability found in the SWF format, and adopts Macromedia UI Component techniques for quick development time and optimized run-time performance. The vertical distribution of menu items is based on the Sarkar-Brown distortion function. Menu items above the focus index are distributed with an inverted Sarkar-Brown function, and items below the focus index are distorted with a non-inverted function. Focus spanning is based on the design patterns found in Ben Bederson's Swing-based Java source code (http://www.cs.umd.edu/hcil/fisheyemenu/).
The fisheye menu is identical to the listbox component in every way, except for the vertical distribution of items. The fisheye menu supports all of the APIs, selection, multi-selection, and event-handling features found in the original Macromedia FListBox component. Four additional component parameters allow the user to customize the fisheye distortion effect:
COMPONENT PARAMETERS
Focus Length - Number of menu items shown at full size near the mouse cursor
Distortion - Degree of distortion in the Sarkar-Brown distortion function.
(Any integer greater than 0)
Max Size - Maximum height of a focused menu item
Highlight Border - Border color of the item under the mouse cursor.
REFERENCES:
Sarkar, M., & Brown, M. H. (1992). Graphical Fisheye Views of Graphs. In Proceedings of Human Factors in Computing Systems (CHI 92) ACM Press, pp. 83-91.
G. W. Furnas. Generalized fisheye views. In M. M. Mantei and P. Orbeton, editors, Proceedings of the ACM Conference on Human Factors in Computer Systems, SIGCHI Bulletin, pages 16--23, New York, U.S.A., 1986. Association for Computer Machinery. 10
Bederson, B. B. (November 2000). Fisheye Menus. In Proceedings of ACM Conference on User Interface Software and Technology (UIST 2000), pp. 217-226, ACM Press.
Hollands, J. G., T. T. Carey, M. L. Matthews, and C. A. McCann. "Presenting a Graphical Network: A Comparison of Performance Using Fisheye and Scrolling Views." Proceedings of the Third International Conference on Human-Computer Interaction. 1989. v.2. p.313-320.
Posted by samuel at May 31, 2002 04:56 PMThis is damn cool.
Fell in love with it at first eye contact.
My issue with the component is that the items in the Fisheye Listbox are too tiny to be read. User's looking to make a selection will find this menu very difficult to use as they are only able to read 3 (or possibly 4) items at any time. By comparison, the traditional listbox on the sample page shows 12 items in an easy to read font size.
That's not to say that your Fisheye component is not going to be an excellent solution for some interfaces. It certainly does offer an easier ay to see how many multiple selections the user has made.
Posted by: CHris at May 31, 2002 10:10 PMHi Chris,
I agree with your points about the usability of fisheye views. Research shows that scrollers have a slight advantage in goal-directed tasks (user knows exactly what he/she's looking for), but fisheye views have more of an advantage for browsing tasks. Increasing the focus length parameter will balance out some of the trade-offs in focus-context distortion.
-Sam
Posted by: Sam at May 31, 2002 10:39 PMVery nice. One thing--when the focus length is too large for the textbox (10 in your demo), it gets screwed up.
Posted by: Robert Penner at May 31, 2002 10:43 PMThanks for the tip, Robert. It was in the original paper too, but I forgot to add the failsafe. I'll patch that and post a new version shortly.
Posted by: Sam at May 31, 2002 10:57 PMway cool
Posted by: mark singleton at June 1, 2002 03:47 AMSam -- nice work. One thing you could also do is "hide" the scrollbar that you inhert from FScrollSelectList, since you aren't using it.
In your constructor or maybe the setSize method, you can set this.scrollBar_mc._width = 0;
Posted by: Ben Chun at June 2, 2002 07:06 PMGood idea, Ben. I'm thinking of integrating the code into a dual-mode listbox, so the scrollbar might stay to enable scrolling mode.
Posted by: Sam at June 3, 2002 11:25 AMI downloaded this and could not get it to load into flashmx?
Posted by: Charles at June 4, 2002 12:41 AMHi Charles, are you using the Macromedia Extension Manager? Basically, close the Flash MX editor, double-click on the .mxp file to install the components, reopen the Flash editor, and go to the components panel. In the components panel, click on the small round rectangle just below the "Components" grey bar, and choose the option named "Beveled Panel Components". Please let me know if the file's still giving you problems with these instructions.
-Sam
Posted by: Sam at June 4, 2002 03:52 AMThis can also be use as a menu system?
and how about writing code to get to some URL?
cool
sudhiro -- here's how you write code to get to some URL:
define a function that does a getURL (presumably with a URL from getSelectedItem().data), and then set that function as the Change Handler for your fisheye menu instance.
Posted by: Ben Chun at July 27, 2002 10:18 PMAstonishing menu. Congratulations Sam.
But.... how the hell am I supposed to write the code to be able to put these different actions on the different items :
loadMovie on one item
goToUrl on another item
get(different)URL on different items.
I'm afraid I don't know how and where to write the damn code. Can anybody help and give an example ? Thanks.
Neat,
I've been trying to something somehwat similar (non-component wise) for a video navigation device. My current implementation is somewhat buggy, but I think the fisheye menu could form the basis for a better video nav solution.
http://www.video4flash.com/
Hi!
Nice, but the arrow keys dont work quite as expected.
Hey Sam
Just wanted to say great job on the OOP book - really liked your style of writing
cheers
Posted by: Billy at February 4, 2003 04:17 AMsdfsd
Posted by: mrKHeram at April 15, 2003 08:26 AMIs it possible to have a horizontal scrollbar(visible) if the text length is greater than the width of textfield.
thanks
Posted by: benno at May 26, 2003 07:33 AMetertertert
Posted by: at May 30, 2003 08:06 PMFisheye menus are very helpful if we know when and how.
Nice demo.
aSH
nice site, you know
Posted by: Lolita! at October 14, 2003 09:36 PMNice site you have!
Posted by: lolita at November 4, 2003 08:10 AMHi, I just wanted so say thank you guys ! i really like your site and i hope you'll continue to improving it.
Posted by: viagra at January 25, 2004 12:05 AMWhy did you do that?
Posted by: side effect of tramadol at February 12, 2004 08:44 PMThis is the Tramadol place that never Vioxx for a couple of days. Dont ever Diet Pills
Posted by: Ultram pain relief at February 14, 2004 06:05 AMSo much so!
Posted by: adipex at February 14, 2004 04:34 PMThis is the Tramadol place that never Vioxx for a couple of days. Dont ever Phentermine Plus, you can always Ultram.
Posted by: cheap Diet Pills at February 14, 2004 09:58 PMI have to agree with that.
Posted by: Phentermine Diet Pills at February 15, 2004 03:03 AMIn what context?
Posted by: New Truck at February 16, 2004 07:45 PMI agree
Posted by: tramadol side effects at February 18, 2004 03:46 PMwho says?
Posted by: order phentermine diet pills at February 18, 2004 04:52 PMTop BlackJack sites - pretty cool
Posted by: blackjack at February 21, 2004 10:13 PMfree credit report blog
Posted by: online credit report at February 22, 2004 06:05 PMsoma
Posted by: soma at March 2, 2004 03:06 AMThis is the phentermine Diet pills place that never cheap vioxx for a couple of days. Dont ever Phentermine Plus, you can always cheap Ultram.
Posted by: tramdol effects at March 4, 2004 02:33 AMWhy do not I see me posts???
Posted by: Mopet at March 5, 2004 08:34 PMWow, very sweet nlog
Posted by: propecia at March 10, 2004 12:19 AMArchitectural & Garden Asian Antiques Books, Manuscripts Folk Art Mixed Media Other Art Audio Children Education & Textbooks Farm Healthcare, Medical Industrial Supply, MRO Infants & Toddlers Men's Accessories Men's Clothing Coins: US Coins: World Exonumia Animation Art, Characters Autographs Barware Desktop PCs Drives & Controllers Input Devices Cell Phones & Plans Gadgets & Other Electronics Home Audio & Video Dollhouse Miniatures Dolls Paper Dolls Music Video Games Genealogy Gifts & Occasions Health & Beauty Bedding Building & Repair Materials Crafts, Arts, Sewing Bracelets Cameos Charms & Charm Bracelets Automotive Books & Manuscripts Business & Industrial Equipment Guitar Harmonica ESPN Other Real Estate Residential Timeshares for Sale Custom Clothing & Jewelry eBay Auction Services Graphic & Logo Design Memorabilia Sporting Goods Australia Br. Comm. Other Canada Other Items Beanbag Plush, Beanie Babies Building Toys Classic Toys Lodging Luggage Other Travel
Posted by: jest a test at March 10, 2004 12:30 AMThis is the Diet pills place that never Adipex for a couple of days. Dont ever Phentermine Plus, you can always Ultram.
Posted by: cheap phentermine at March 10, 2004 04:14 AMJake says os
Posted by: Cialis at March 10, 2004 03:09 PMGet used car prices, pictures, reviews, specs, and more for all used cars. Get a used car loans from lenders in your area by state, city, town, and more. Choose a used car make below to view car models and used car values. Its all here.
Posted by: Used Cars at March 10, 2004 10:58 PMMeridia is a great weight loss diet pill. Ionamin can also do the job. If not try to buy Viagra online.
Posted by: cheap adipex at March 12, 2004 09:25 PMHi Ya. Very cool blog. thanks much.
Posted by: satellite tv at March 13, 2004 03:05 AMThank you for such an informative site!Male Hairloss is a serious problem! Buy Propecia today to start to reverse the problem! Buy Propecia Online Today!
Posted by: Buy Propecia at March 20, 2004 03:10 AMWatcha neams iut
Posted by: free credit report at March 20, 2004 05:25 PM