A Flash Developer Resource Site
|
Internet Commerce
Developer ChannelFlashKit.com
JavaScript.com JavaScriptSource Developer Jobs ScriptSearch StreamingMediaWorld Web Developer's Journal Web Developer's Virtual Library WebDeveloper.com Webreference Web Hosts XMLfiles.com
internet.com
|
  Tutorials HomeWhat's NewTop RatedSubmitmyTutesRandom!
Search Tutorials
 Tutorials » Interactivity/Navigation
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!!!
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Mac OS X - like Menu
 |
 |
|