New Component: 2D Fisheye (v0.2?)
April 25th, 2006
I’m releasing another version of the Fisheye component for Flex today, this time as a two dimensional Tile component. Try a quick demo below.
2D Fisheye Explorer Demo
Updated 1D Fisheye Explorer Demo
In addition to extending into a Tile based layout, I’ve made a couple of other improvements:
* the ’scaleFactor’ style property has been split into two more meaningful styles, hilightScaleRadius, and hilightScaleSlope. hilightScaleRadius indicates how many items the component takes to scale from the max scale value down to the min scale value. A value of 1 would only scale up the hilighted item, while a value of 3 would use the two adjacent items to scale down all the way to min scale. scaleSlope affects how it scales across those items. A small value scales down quickly at the beginning (ease in), while a larger value scales down quickly at the end (ease out).
* the variables in the layout equations are adjusted as necessary to make sure the items fit into the components available space. Right now it’s just adjusting the minScale down…A future task is to adjust the other parameters if necessary. Try resizing the window larger and smaller to see this in action.
* I added a style, zoomMode, that controls how the component sizes the items. If set to ‘resize’, it will set the width/height of the items to the appropriate size. If set to ’scale’, it will size the items to their default size, and scale them down to fit in the alloted space (but maintain its aspect ratio). Play with the zoom mode radio group in the demo to see the difference.
* In addition to being able to name a ’selected’, ‘hilighted’, and ‘default’ state value, you can also name a ‘unselected’ state value. If you name this, it will be assigned as the state value for all items that are _not_ hilighted when there _is_ a hilighted item. If you don’t set this, the default state value will be assigned instead. Imagine a photo viewer that blurs out the other images when you select one of them (The Explorer Demo isn’t currently taking advantage of this).
* I broke out the animated layout functionality into a new class, called…big surprise here…LayoutAnimator. Using this class, it’s easy to separate the _current_ layout of the children of a container from the _target_ layout, and have it automatically animate between them.
As before, I’m releasing the source under the MIT License, so feel free to use it, modify it, etc. The code has gotten a bit more complicated, so unfortunately I haven’t had a chance to really keep it well commented. I’ll try and patch it up when I get a moment free. Right click on the demo to browse the source, or go ahead and download it here:
Fisheye 1D/2D Component Source.zip
Comments, Feedback? Drop me a line below.
Enjoy…
Ely.
April 26th, 2006 at 12:27 am
This is pretty cool, and runs really nicely.
Can this normal Flex 2 components? or is it just images and text?
April 26th, 2006 at 12:27 am
I meant can this support normal Flex 2 components?
sorry
April 26th, 2006 at 6:22 am
Hi nz. You can put whatever you want in the item renderer, just like you can with List, DataGrid, etc. In fact, if you take a look at the code, you’ll notice that when you switch the items over to ‘test squares’, it’s using an HBox with a backgroundcolor set as its item renderer.
one catch: Flash Player doesn’t scale device fonts well, so If you’ve got the zoomMode set to scale and you’re using components with text in them, you might get unattractive results unless you use an embedded font.
May 1st, 2006 at 9:13 am
Friggin awesome!
Keep em coming.
We really need an open-source repository of these components that we could all reference. I know Adobe is supposed to be sponsoring a project like this, the sooner the better.
May 1st, 2006 at 9:28 am
HAHA,
On your last post(Fisheye) I mentioned something like this. Well, you know, your good man.
I have been focusing more on the Framework side of the UI, I can’t wait till I get to start messing around with animation components.
You should see what I have comming out that has to deal with DND. (remember my TaskPane/TaskList)
Have you ever used Adobe Premeire or AfterEffects? I have created the exact same Workspace functionality using workspaces dnd panes/tabs in divided boxes.
Ironically, I did this to make the judges laugh for the derby. Skinned it the same to :)
You can save and load workspaces ect. Tabs have close, drag and tab buttons.
I still don’t understand why Adobe uses factories when creating things like a popup for the combobox but they don’t use a factory when making tab buttons for a tabbar. Don’t you think the tab button should be instantiated using a factory and an interface?
oh well.. off to the yellow brick road
There are two kinds of components, the fun ones like these and the taskmasters… hehe Fun ones are fun to make ;-)
Peace, Mike
May 1st, 2006 at 9:54 am
Hi Mike. It was the comments thread on the last version that gave me the idea. So, Thanks for the idea ;)
Re: being able to provide a factory to a NavBar component…That’s a good suggestion. Please submit it as a feature request, maybe we can slip it into a future release.
Ely.
May 17th, 2006 at 10:57 am
Im having a bit of trouble viewing the source of the 2D version. I downloaded it and it seems just like the 1D version and has improper imports throwing compiler errors (flash.util is now flash.utils). Also when trying to view the source via the view source context menu I get the same errors and the outline pane does not show anything. This is using the Flash 9 Beta 3 player.
September 26th, 2006 at 10:49 am
I really like this component. But when I want to view the source, I get an “Action Controller: Routing Error” message …
March 8th, 2007 at 9:51 am
Hey, I am new to Flex and I am working on my first app, for which I would love to incorporate the Fisheye sample you have here on your site… I am trying to use it as a menu [like a mac] but I would like to have buttons, instead of images… How would I go about that? do you have any examples that could point me in the right direction?
Thank you in advanced.
May 9th, 2007 at 2:40 pm
I was wondering if there was a version of your Bitmap Tile component that would work with Embedded images? I would like to use your fisheye components (but without externally loading assets). (I’ve been trying to do it but got been failing).
July 25th, 2007 at 2:17 pm
Really nice. Ive found that it is most flexible when using regular MXML:s as tiles. What I miss though is an easier way to manage the tiles e.g. using it as a datagrid, making it possible to replace single items or rows.
October 25th, 2007 at 7:57 am
While using the LayoutAnimator.as, I found a condition where (using the default tolerances) that the timer was never stopped. m.tx += _animationSpeed*(target.x – m.tx) always resulted in the same value. I upped the scale and translate tolerance to .25 and the timer would stop.
Here are the values in question: m.tx = 200.25, target.x = 200.399999, animationSpeed = .25, TRANSLATE_TOLERANCE = 0.01. After the adjustment m.tx = 200.2875 but on the next loop back the m.tx was 200.25 again.