First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Aaron Ham

Creating the code (Cont.)

Okay, now we have our offsets, they've been checked and we need to make the menu move. For each icon 2 things need to take place:

1) Move the icon inversely proportional to the cursor's movement. As the cursor approaches the icon's starting x location, the icon approaches the starting x location. As the cursor moves away from the icon's x location, so too will the icon move away from its starting x location. This is what the 1st setProperty line does in the code below.

For instance, let's assume the cursor was at x location 155. Our HomeOffset would be calculated as x-200 or 155-200, which equals -45. Since this value is within the 175 pixel limit for offsets it remains set at -45. The Home icon will then be moved to x position 245, because 200-HomeOffset or 200-(-45) = 245. Remember from basic math class a negative multiplied by a negative is a positive.

If we plug in a few more numbers we can see what is happening to the icon based on the cursor's movement:

Cursor X = 155, Icon X = 245

Cursor X = 170, Icon X = 230 (they're getting closer)

Cursor X = 200, Icon X = 200 (they meet!!)

Cursor X = 230, Icon X = 170 (they're moving farther apart)

Cursor X = 350, Icon X = 50

2) The second thing that needs to happen is the icon needs to scale, based on how far away the cursor is. The closer it is to the icon, the larger the icon gets. The 2nd and 3rd setProperty lines accomplish this for us using the setScale( ) function that we set up earlier. We want the image to scale x and y proportionally, so the same function is used for both.

Let's take our above example and look at the scale effect. We found our cursor x location to be 155, which made the HomeOffset -45. Plugging this number into the setScale function gives us the following: 100*(3-(2*(Math.abs(-45)/175)))

Let me break this down. First we take the absolute value of the offset because we just can't work with a negative number here. Our -45 offset becomes 45. We then divide this number by 175. This gives us the percentage of distance away from the origin point that our icon is (175 pixels is 100% away). The next two numbers are used for scaling. We want the icon to become 3 times larger when the cursor reaches it's origin point, so this is where the 3 comes from. We also want the scaling to be able to scale down to 100%, so we multiply by 2. If we didn't do this, the smallest the image would ever be able to get is 200% (175/175 = 1 and 3 - 1 = 2). By changing these numbers you can get different scaling effects. If we used 4 and 3 we would be able to scale up to 4 times the original size, and by using 5 and 4 we could zoom up to 5 times. The problem is you will need to change the initial size of your icons, or space them farther apart, otherwise, they will overlap each other during the zoom.

Lets take our previous offset examples and plug them into the setScale( ) function:

Cursor X = 155, Icon scale = 248.57%

Cursor X = 170, Icon scale = 265.71% (they're getting closer and the icon is getting larger)

Cursor X = 200, Icon scale = 300 (they meet and the icon reaches the maximum of 300% size)

Cursor X = 230, Icon scale = 265.71% (they're moving farther apart and the icon is shrinking)

Cursor X = 350, Icon scale = 128.57%

Whew!!! Now for the actual code. There are 3 lines for each icon. Line 1 sets the location of the icon from its origin point: Lines 2 and 3 set the scale of the icon. Notice the base offset for each icon. It starts with 200, then the next icon is 250, then 300, etc.

		// Move the Home Icon
		setProperty ("_root.Home", _x, 200-HomeOffset);
		setProperty ("_root.Home", _xscale, setScale(HomeOffset));
		setProperty ("_root.Home", _yscale, setScale(HomeOffset));
		// Move the News and Events Icon
		setProperty ("_root.NewsEvents", _x, 250-NewsEventsOffset);
		setProperty ("_root.NewsEvents", _xscale, setScale(NewsEventsOffset));
		setProperty ("_root.NewsEvents", _yscale, setScale(NewsEventsOffset));
		// Move the Schedule Icon
		setProperty ("_root.Schedule", _x, 300-ScheduleOffset);
		setProperty ("_root.Schedule", _xscale, setScale(ScheduleOffset));
		setProperty ("_root.Schedule", _yscale, setScale(ScheduleOffset));
		// Move the Manual Icon
		setProperty ("_root.Manual", _x, 350-ManualOffset);
		setProperty ("_root.Manual", _xscale, setScale(ManualOffset));
		setProperty ("_root.Manual", _yscale, setScale(ManualOffset));
		// Move the Directions Icon
		setProperty ("_root.Directions", _x, 400-DirectionsOffset);
		setProperty ("_root.Directions", _xscale, setScale(DirectionsOffset));
		setProperty ("_root.Directions", _yscale, setScale(DirectionsOffset));
		// Move the Lesson Icon
		setProperty ("_root.Lesson", _x, 450-LessonOffset);
		setProperty ("_root.Lesson", _xscale, setScale(LessonOffset));
		setProperty ("_root.Lesson", _yscale, setScale(LessonOffset));
		// Move the Contact Us Icon
		setProperty ("_root.ContactUs", _x, 500-ContactUsOffset);
		setProperty ("_root.ContactUs", _xscale, setScale(ContactUsOffset));
		setProperty ("_root.ContactUs", _yscale, setScale(ContactUsOffset));
		// Move the MP3 Collection Icon
		setProperty ("_root.MP3Collection", _x, 550-MP3CollectionOffset);
		setProperty ("_root.MP3Collection", _xscale, setScale(MP3CollectionOffset));
		setProperty ("_root.MP3Collection", _yscale, setScale(MP3CollectionOffset));
		// Move the Bookmark Icon
		setProperty ("_root.Bookmark", _x, 600-BookmarkOffset);
		setProperty ("_root.Bookmark", _xscale, setScale(BookmarkOffset));
		setProperty ("_root.Bookmark", _yscale, setScale(BookmarkOffset));
		// Move the Links Icon
		setProperty ("_root.Links", _x, 650-LinksOffset);
		setProperty ("_root.Links", _xscale, setScale(LinksOffset));
		setProperty ("_root.Links", _yscale, setScale(LinksOffset));

Don't close the IF statement, we still aren't done with it yet!!!

» Level Intermediate

Added: 2002-02-19
Rating: 7.99 Votes: 186
(10 being the highest)
» Author
I'm a freelance web developer and designer. Although I specialize in networking (you know, Cisco routers, servers, etc), I also dabble with programming and right-brained creativity.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.