This is a a Simple Fish Eye Menu (or Dock Menu). The logic is simple and you may further customize it as your own menu. It included both Flash and Silverlight version with complete source codes.
You can find similar resources from ComponentOne as well.
Comparison
Flash implementation: 1 hour
Silverlight implementation: 1 hour
Code variation in the source code:
- Attach Mouse Event: MouseEvent.MOUSE_MOVE [AS3] vs MouseEventHandler [C#]
Source codes
Fish Eye Menu [Flash 9, AS3] (138.8 KiB, 3,712 hits)
- Fish Eye Menu [Silverlight 2, C#] (786.2 KiB, 4,029 hits)
Flash
Silverlight
Attach Mouse Event: MouseEvent.MOUSE_MOVE [AS3] vs MouseEventHandler [C#]
After you have attached a mouse event handler, you may retrieve the mouse position from the local perspective (e.localX) or from the stage perspective (e.stageX). However, if you would get the position with respect to other movieclip, then you may have to use the method globalToLocal to calculate the values.
// AS3
// make sure the display object is added to the stage
// before calling the stage variable
stage.addEventListener(MouseEvent.MOUSE_MOVE, on_mouse_move);
// mouse event handler
private function on_mouse_move(e : MouseEvent):void{
// get x
var localX:Number = e.localX;
var stageX:Number = e.stageX;
}
Let’s look into case in C#. You must always specific the perspective as a parameter in the GetPosition method. Please also note that if you would like to get the root element, you can retrieve it by reference to Applicatoin.Current.RootVisual.
// C#
this.MouseMove +=new MouseEventHandler(MouseMove);
// mouse event handler
void MouseMove(object sender, MouseEventArgs e)
{
// get x with the perspective of this
double localX = e.GetPosition(this).X;
double stageX = e.GetPosition(Application.Current.RootVisual).X;
}
September 1st, 2008 at 6:34 pm
The animation in the Silverlight version runs much more smoothly.
September 1st, 2008 at 7:09 pm
Yes, actually I think Silvelright has a bettern image rendering than Flash. Anyway, next time, I will use exacly the same images for both application and see if there is really some differences.
September 1st, 2008 at 8:04 pm
WOW …. SilverLight’s animation is so slick
September 1st, 2008 at 8:58 pm
You might need to set “Allow Smoothing” on the bitmaps in Flash so they scale well.
September 1st, 2008 at 9:19 pm
Thanks for Alex suggesion, I really don’t know there is such a property for imported images.
But it sad that this property can’t be applied to dynamically loaded images.
September 3rd, 2008 at 5:48 pm
No wonder Silverlight looks better it is 6 times larger in size!
September 3rd, 2008 at 11:52 pm
mdma, in fact, the zip included the whole silverlight project (also included the silverlight debug files) which makes it larger.
And it fact, the smooth propertiy is not set in the images of the Flash which makes them look ugly.
September 4th, 2008 at 12:38 am
[...] Read more [...]
September 8th, 2008 at 3:22 pm
won’t it better more reasonable to change until the mouse is near the objects? I mean the Y aspect. even when the mouse is at the top/bottom of the silverlight object, it also change.
September 21st, 2008 at 8:03 am
Was the Flash Compiled with the default 24fps setting? Cause in Flex and Flash the default frame rate is 24fps, you can increase that to 50 for example and it will be much smoother……
September 30th, 2008 at 4:52 pm
This comparison isnt really fair.
The flashfile is compiled at 24 fps, so the flash animation doesn’t run as smooth as the silverlight version. You should change it in your example to reflect the same FPS as silverlight.
Since you’re not loading in images, you should also turn the smoothing on the images in your library.
And as far as your comment on not beeing able to turn on smoothing on dynamically loaded images, this is simply not true :)
For as3.0 take a look at Bitmap.smoothing in the flash helpfile.
In as2.0 you can simply set myLoadedMovie.forceSmoothing=true after loading your clip with a movieClipLoader.
October 6th, 2008 at 3:52 pm
Why not RC0?
October 8th, 2008 at 5:40 am
[...] 2 RC0 If you haven’t upgraded to RC0 yet, James Bacon has a step-by-step tutorial for you. Flash and Silverlight: Fish Eye Menu I’m getting close to the bottom of the list of old posts by Terence Tsang… This Fish-Eye menu was [...]
October 12th, 2008 at 9:01 pm
[...] Shine Draw have been kind enough to put a version of this out into the wild, but it’s in AS3 [link]. Of course AS3 is faster and nicer, but there are still some out there who want their stuff [...]
October 12th, 2008 at 9:01 pm
[...] Shine Draw have been kind enough to put a version of this out into the wild, but it’s in AS3 [link]. Of course AS3 is faster and nicer, but there are still some out there who want their stuff [...]
October 13th, 2008 at 8:12 am
Much better version in as2: http://actionscriptnotes.com/showcase/macmenu/Main.html
October 28th, 2008 at 4:43 pm
In FLEX if we set the framerate to 60 we can see a animation as smoth as we see in SilverLight example, but SilverLight as a beter image render (in my point of view).
November 8th, 2008 at 2:11 am
Nice example.
I did one of these recently to learn silverlight. Took quite a bit more than an hour, but the part that took the most was that I only got the mouse move events when the mouse was over one of the elements. I eventually solved it by filling the grid with an invisible rectangle. I looked at your page.xaml and see that there’s a gradient behind the icons. Does one really only get mousemove events when the mouse is ‘over something’? If so, could someone point me to where that’s documented so I can read the details?
November 8th, 2008 at 6:53 pm
To Mickael : you can use the mousemove event on the root element (grid or canvas for example), this way you will get code executed each time the mouse moves, whatever object it is on.
If you need to execute code on an element and it’s ancestors, you can use the handled property.
December 14th, 2008 at 3:30 pm
Great job ;)
How can we put a link inside each image, “getURL()’??
Best regards,
December 15th, 2008 at 9:47 pm
How can we put a link inside each image, using xaml and c#?
December 18th, 2008 at 6:52 pm
How can I built a click-event for selection of images?
Thanks
January 7th, 2009 at 1:44 pm
哇太好了.终于找到 (skybot) 了谢谢
January 21st, 2009 at 6:07 pm
I’ve just looked into it for a few minutes, ’cause it might come in handy:
The code line to dynamically set smoothing is simple.
Juste add “.smoothing = true;” to your BitmapData or your Bitmap upon creation.
Thanks AS3.
February 12th, 2009 at 5:09 am
i like it just as much or with mootools or jquery probably more because then i completely eliminate flash and silverlight from the site
March 20th, 2009 at 5:58 am
Click Event for selection of images:
Put the following after the line “_images.Add(image);” in the addImages method:
FrameworkElement FE = image;
FE.Tag = i;
FE.MouseLeftButtonDown += new MouseButtonEventHandler(FE_MouseLeftButtonDown);
Then add New Event Handler:
void FE_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
FrameworkElement selectedItem = (FrameworkElement)sender;
MessageBox.Show(selectedItem.Tag.ToString());
}
April 30th, 2009 at 9:43 pm
[...] I came across a nice comparison of Fish-Eye-Menu in Flash and Silverlight. Looks Cool! So thought of writing one in JavaFX and [...]
April 30th, 2009 at 10:00 pm
[...] came across a nice comparison of Fish-Eye-Menu in Flash and Silverlight. Looks Cool! So thought of writing one in JavaFX and [...]
April 30th, 2009 at 11:20 pm
[...] came across a nice comparison of Fish-Eye-Menu in Flash and Silverlight. Looks Cool! So thought of writing one in JavaFX and [...]
May 6th, 2009 at 6:28 pm
[...] Categories: javafx Tags: fish eye menu, javafx I came across a nice comparison of Fish-Eye-Menu in Flash and Silverlight. Looks Cool! So thought of writing one in JavaFX and [...]
June 1st, 2009 at 4:26 pm
[...] http://www.shinedraw.com/animation-effect/flash-and-silverlight-fish-eye-menu/ Modified: 1 June 2009 • by admin Created: 26 April 2009 • by admin Categories: hyperliste • navigation Comments: none yet • add one! [...]