• About
• AIR Applications
  • ImageSizer
  • Screentweetr
• Blog
• Contact

Psyked *

it’s easy once you know how.

Fish Eye Menu in ActionScript 2.0

Posted by James - 12/10/08 at 02:10:05 pm

A little while ago we had to do a Fish Eye menu – the magnification effect you see on the Mac OSX dock menu – but we had to do it in ActionScript 2.0, rather than ActionScript 3.0.

Now, 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 targetted for Flash Player 8 – which means AS1 or AS2 only – so I backwards converted Shine Draw’s lovely class-based demo to a timeline-scripted AS2 version.

Demo

Download: Fish Eye Menu [Flash CS3, Flash Player 8, AS3, 110KB]

The process;

Actually, it wasn’t too hard to backwards convert the AS3 version – the three main things to do are to

1. Take the code out of a document class structure, and onto the timeline – which in reality is mostly a copy and paste job, a bit of commenting out, and changing the events or function calls that initalise the code.
2. Change variables and parameters, linkages and library classes; .scaleX to ._xscale, event names and listener arrangements, and library item classes.
3. Rewrite code dealing with depths or the display list. – This is actually the most difficult part of the conversion, and really highlights how difficult depths were to work with, pre AS3.

There’s a little bit of code commenting in there, but if you’re interested in seeing how the two compare, I would suggest you head over to Shine Draw, download the AS3 version, download this version, and look at them side-by-side.

Resources;

• Shine Draw – Flash and Silverlight: Fish Eye Menu
  (yes, there’s a Silverlight equivilent!)
• Update: The timeline code, available on GitHub

5 Comments »

1. 

   Hi.
   I’m David, from Portugal, and I’m nearly finishing my Design of Communication and Multimedia course, at ETIC.

   I’m currently working on my portfolio website, and I decided to use a fisheye menu on the galleries, as a way to display the images’ thumbnails.
   I found your AS2 version of the fisheye menu I had found before, but in AS3 (which is completely out of my league). I made a few changes just to make icons a bit smaller and closer, and to place it on the left of the movieclip.

   But then I ran into 2 problems.

   1- How do I make it so the mouse movement only affects the thumbnails (making the fisheye effect) when the mouse is over it?
   I was trying to make a condition to say that it will only work when the “xmouse” is over 440 – so it’s in the area where the fisheye menu is placed (my movieclip dimensions are 560 x 450 px), but I can’t get the code right!

   2- I’m trying to make the thumbnails into buttons. So I got them to the stage, opened them, and turned the bitmaps inside the movieclips into buttons.
   I got the “down” stage to work, replacing the image I use as “normal” with another that I created to be that “down” stage, and it works. It recognizes the button and it’s “down” stage when I press it, but now I’m trying to make the buttons to work “onPress”, using labels (a simple flash gallery).
   I used the simple code:

   stop();
   b1.onPress = function (){
   gotoAndStop(“photo1″);
   };
   b2.onPress = function (){
   gotoAndStop(“photo2″);
   };
   b3.onPress = function (){
   gotoAndStop(“photo3″);
   };
   b4.onPress = function (){
   gotoAndStop(“photo4″);
   };

   But it doesn’t work! It wont go to the other labels.
   Can you tell me what I’m doing wrong?!

   Stay cool!
   Peace ;p

   Comment by David — 4 February 2009 #

2. 

   This rocks, thanks!

   Comment by Lars — 21 June 2009 #

3. 

   Gracias por el script!!

   para la pregunta de David..

   si deseas que los iconos se activen en determinado lugar.. o area.. lo puedes hacer manejando porcentajes..

   this.onMouseMove = function():Void
   {
   //1/3 of stage height
   if(_ymouse>Stage.height/3)
   {

   //Acomplete the Code here….
   //
   }
   }

   Comment by Henry — 8 July 2010 #

4. 

   hi… I interest to this sample,,, but can U tell me how to make event every images/button in this menu

   I will call other swf or frame
   I need Your help please…

   Comment by sapta — 11 August 2010 #

5. 

   I’ve copied the timeline code across to GitHub and will try and have a look at modifying that to add events for you, @sapta.

   Comment by James — 11 August 2010 #

Leave a comment

Name (required)

Mail (will not be published) (required)

Website

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: This post is over a year and a half old. You may want to check later in this blog to see if there is new information relevant to your comment.

Notify me of followup comments via e-mail.