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, 7,490 hits)
- Fish Eye Menu [Silverlight 2, C#] (786.2 KiB, 8,962 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! [...]
July 9th, 2009 at 7:58 am
var image : Bitmap = _images[i] as Bitmap;
image.smoothing = true;
You’ll need to set the smoothing property to all your Flash examples for the images being loaded to render smoothly. simple!
July 9th, 2009 at 7:07 pm
Yes, you can do that too in the flash actionscript file :
var image : Bitmap = new Bitmap(bitmapData, “auto”, true);
:) No difference between the 2 applications with flash smoothing
July 22nd, 2009 at 3:43 am
I see in an earlier post instruction on how to add links to the flash Fisheye menu but I can’t seem to get it to work. I don’t even see _images.Add(image); in the source code. Can you please help with adding a link for each image.
July 27th, 2009 at 10:54 am
oh.SHIT
August 15th, 2009 at 5:15 am
woahh.
shouldn’t the images get smaller once the hosting container of item controls loses focus?
do you know any good links to interactive patterns … i’m trying to get better at interaction suttle animation to entice my user interfaces .. a menu control like this is pretty slick .. you plan on doing the hierarchical approach like mac? http://cache.lifehacker.com/assets/resources/2007/06/leopard-desktop-stack.jpg
to accomplish this the menu will have the top most z-index and container set to auto size based on children … i think that should work
August 18th, 2009 at 5:58 am
Hi Leblanc, To accomplish, it’s better to store the stuff in a Canvas and animate their Canvas.Left, Canvas.Top and Canva.ZIndex properties.
September 22nd, 2009 at 12:17 am
[...] re: flash menu for windows form?? google bing…never heard of….will be learning about it today…Ya its a inhouse project..i can go for image editing but i wanted to give the carousel menu…something like this : http://www.shinedraw.com/animation-e…fish-eye-menu/ [...]
October 14th, 2009 at 7:20 pm
Working great except the ability to link. Can anyone help with linking? Pleeeeeeease?
October 16th, 2009 at 6:43 am
Hi all,
I’m sorry, but this is not a true fishEye effect, the images aren’t supposed to move over each other, they should be horizontally aligned next to each other, where the larger elements push the smaller ones aside, more like the dock on a Mac. It should simulate a FishEye lens you put on a camera or a peephole in a door.
November 26th, 2009 at 1:52 pm
Una comparacion pobre, la version en flash esta totalmente mal hecha…
December 17th, 2009 at 9:47 pm
How can we change the images? I’m still a beginner and I have no clue how to do this. Would be great if someone could help. I’m using the flash version.
December 17th, 2009 at 9:51 pm
And linking also would help :D
January 13th, 2010 at 2:12 am
wats5@mail.ru
- изготовление сайтов от 30$, баннеров от 10$
- разослать рекламу на 30000 русскоязычных форумов - 20$
- рассылка рекламы на 10000 русскоязычных досок - 7$
- регистрация в 6000 русскоязычных каталогах - 7$
- рассылка рекламы на 30000 англоязычных форумов - 20$
-рассылка рекламы на тематические сайты (каталоги,доски и др.) - сбор базы
+ рассылка 60$. Следующие рассылки 10-20$.Собраные базы отдам Вам.
-ручные рассылки рекламы на любые сайты интернета 0.2$ за каждую регистрацию (не меньше 200 регистраций)
-рассылка со скидками 100$ -то есть при заказе любых рассылок на общую сумму 150$ скидка 50$ подбор видов рассылок бесплатно
-комплексная раскрутка сайтов 1000$ разовая + 100$ в месяц за рассылки или по договорености.
Комплексная раскрутка расчитывалась на минимум 1000 уникальных в сутки,гарантии.
-E-mai рассылка (только по Вашим базам подписчиков) 20$ на 150000 адресов. Можно на меньшие объемы но не меньше 10$
-сбор баз любых сайтов или сбор информации.
Изготовление сайтов, интернет-магазинов как на готовых шаблонах так и на шаблонах “с ноля”.
На сайт могу поставить аудио,видео,слайдшою,формы связи,регистрацию,фотогалерею,форум,
гостевую,чат,блоги и другие модули.Можно с панелью администратора и без.Можно заказать простые
сайты 1 - 5 страниц текста с рисунками 10$-30$ есть более 100 простых шаблонов.
- Много лицензионных программ (тысячи).
wats5@mail.ru
January 19th, 2010 at 7:04 am
wats6@mail.ru
- изготовление сайтов от 30$, баннеров от 10$
- разослка рекламы на 30000 русскоязычных форумов - 20$
- рассылка рекламы на 1000 русскоязычных интернет досок - 7$
- регистрация в 6000 русскоязычных каталогах - 7$
- рассылка рекламы на 30000 англоязычных форумов - 20$
-рассылка рекламы на тематические сайты (каталоги,доски и др.) - сбор базы
+ рассылка 60$. Следующие рассылки 10-20$.Собраные базы отдам Вам.
-ручные рассылки рекламы на любые сайты интернета 0.2$ за каждую регистрацию (не меньше 200 регистраций)
-рассылка со скидками 100$ -то есть при заказе любых рассылок на общую сумму 150$ скидка 50$ подбор видов рассылок бесплатно
-комплексная раскрутка сайтов 1000$ разовая + 100$ в месяц за рассылки или по договорености.
Комплексная раскрутка расчитывалась на минимум 1000 уникальных в сутки,гарантии.
-E-mai рассылка (только по Вашим базам подписчиков) 20$ на 150000 адресов. Можно на меньшие объемы но не меньше 10$
-сбор баз любых сайтов или сбор информации.
Изготовление сайтов, интернет-магазинов как на готовых шаблонах так и на шаблонах “с ноля”.
На сайт могу поставить аудио,видео,слайдшою,формы связи,регистрацию,фотогалерею,форум,
гостевую,чат,блоги и другие модули.Можно с панелью администратора и без.Можно заказать простые
сайты 1 - 5 страниц текста с рисунками 10$-30$ есть более 100 простых шаблонов.
- Много лицензионных программ (тысячи).
wats6@mail.ru
January 26th, 2010 at 3:58 am
gfd23@mail.ru
- изготовление сайтов от 30$, баннеров от 10$
- рассылка рекламы на 30000 русскоязычных форумов - 20$
- рассылка рекламы на 1000 русскоязычных интернет досок - 7$
- регистрация в 6000 русскоязычных каталогах - 7$
- рассылка рекламы на 30000 англоязычных форумов - 20$
-рассылка рекламы на тематические сайты (каталоги,доски и др.) - сбор базы
+ рассылка 60$. Следующие рассылки 10-20$.Собраные базы отдам Вам.
-ручная рассылка рекламы на любые сайты интернета 0.2$ за каждую регистрацию (минимум 200 регистраций)
-рассылка со скидками 100$ -то есть при заказе любых рассылок на общую сумму 150$ скидка 50$ подбор видов рассылок бесплатно
-комплексная раскрутка сайтов 1000$ разовая + 100$ в месяц за рассылки или по договорености.
Комплексная раскрутка расчитывалась на минимум 1000 уникальных в сутки,гарантии.
-Рассылка на E-mail (только по Вашим базам подписчиков) 20$ на 150000 адресов. Можно на меньшие объемы но не меньше 10$
-сбор баз любых сайтов или сбор информации.
Изготовление сайтов, интернет-магазинов как на готовых шаблонах так и на шаблонах “с ноля”.
На сайт можно поставить аудио,видео,слайдшоу,формы,регистрацию,фотогалерею,форум,
гостевую,чат,блоги и другие возможости.Можно с панелью администратора и без.Можно заказать простые
сайты 1 - 5 страниц текста с рисунками 10$-30$ есть более 100 простых шаблонов.
- Много лицензионных программ (тысячи).
gfd23@mail.ru
January 28th, 2010 at 8:24 am
metov64@mail.ru
- изготовление сайтов от 30$, баннеров от 10$
- разослать рекламу на 30000 русскоязычных форумов - 20$
- разослать рекламу на 1000 русскоязычных интернет досок - 7$
- регистрация сайта в 6000 русскоязычных каталогах - 7$
- разослать рекламу на 30000 англоязычных форумов - 20$
-рассылка рекламы на тематические сайты (каталоги,доски и др.) - сбор базы
+ рассылка 60$. Следующие рассылки 10-20$.Собраные базы отдам Вам.
-ручная рассылка рекламы на любые сайты интернета 0.2$ за каждую регистрацию (минимум 200 регистраций)
-рассылка со скидками 100$ -то есть при заказе любых рассылок на общую сумму 150$ скидка 50$ подбор видов рассылок бесплатно
-комплексная раскрутка сайтов 1000$ разовая + 100$ в месяц за рассылки или по договорености.
Комплексная раскрутка расчитывалась на минимум 1000 уникальных в сутки,гарантии.
-Рассылка на E-mail (только по Вашим базам подписчиков) 20$ на 150000 адресов. Можно на меньшие объемы но не меньше 10$
-сбор баз любых сайтов или сбор информации.
Изготовление сайтов, интернет-магазинов как на готовых шаблонах так и на шаблонах “с ноля”.
На сайт можно поставить аудио,видео,слайдшоу,формы,регистрацию,фотогалерею,форум,
гостевую,чат,блоги и другие возможости.Можно с панелью администратора и без.Можно заказать простые
сайты 1 - 5 страниц текста с рисунками 10$-30$ есть более 100 простых шаблонов.
- Много лицензионных программ (тысячи).
metov64@mail.ru
February 12th, 2010 at 12:31 am
[...] came across a nice comparison of Fish-Eye-Menu in Flash and Silverlight. Looks Cool! So thought of writing one in JavaFX and [...]
February 19th, 2010 at 4:00 am
HELP!
Hi,
i loved this fish eye menue. But i have one problem. I don´t have any expirience with flash. I hope somebody can help me. See in my website: http://www.wazir-tobacco.com. On the top i want to put this menue with this 6 pictures. (i can be 7 too). But i don´t know how to chance the position of the objects and how to bring the size on this i need???!!!
Please i need urgent help in this topic…
Thanks.
April 11th, 2010 at 4:32 pm
Предлагаю рассылки рекламы:
- на форумы 20$ на 30000 форумов
- регистрация в белых каталогах сайтов 10$ на 6000 каталогах
- на доски бесплатных объявлений интернета 15$ на 20000 досок
- ручная рассылка рекламы в любые ресурсы 0.2$ за регистрацию, сбор сайтов входит в стоимость.
E-mail:rot789@mail.ru
April 27th, 2010 at 1:31 pm
Great, but without the ability to link anywhere, it is pointless.
June 3rd, 2010 at 6:23 am
thank for silverlight code.
July 8th, 2010 at 7:49 am
Hello Guys
I made some Changes to this application :::
– I added a Smoothing
– I added a REFLECT class in AS3 of course
– I insert each image inside a MovieClip, so that reagise as a Button….
you can download a SOURCE
http://www.davidmanrique.be/blog/?p=96
— Thanks a lot SHINEDRAW
July 13th, 2010 at 11:37 am
How do we change the pictures from the default icons that are there?
July 30th, 2010 at 10:00 am
ShineDraw,
I have a much smoother rendering of the images in Flash AS3 using image.smoothing=true; inside the on_mouse_move and addImages private functions.
Kind Regards,
Mike Palmer.
Webmaster.
Brand-Rex Ltd.
August 13th, 2010 at 8:53 am
Animation of Silverlight looks so good.