Hi, I'm trying to find out how to create a menu that moves towards the mouse like a magnet. An example can be seen in the following site: http://www.hilfigerdenim.com/
Any help would be appreciated.
Any help would be appreciated.
Proximity Menu
- Thread starter inmyhood
- Start date
horrorshow75
New Member
Well that particular site was done in flash. Lou might have some more insight for you on that. He seems to be pretty savvy with the flash.
There may be a way to do this with JS. I doubt it will function as pretty as that one though. It would probably look more like when you hide your taskbar in Windows.
There may be a way to do this with JS. I doubt it will function as pretty as that one though. It would probably look more like when you hide your taskbar in Windows.
LouTheDesigner
New Member
Okay,
If you are not familiar with Flash, then this will be a struggle, unless you figure out another way to do this. If you don't know anything about Flash, scroll down to the bottom paragraph.
But, if you have a basic knowledge of Flash, here's what you do. All of those navigation links need to be (or at least should be) movie clips. So you would name them, mc_collection, mc_fitguide, mc_advertising, etc.
Then create another movie clip (named "nav_bar" in this example) into which you will place all of the movie clip links. Place them all on frame one on the same layer.
So, you have a movie clip named nav_bar, which contains instances of mc_collection, mc_fitguide, etc. Line up the links in nav_bar so that they appear in a linear fashion just like the hilfigerdenim.com site.
Create a new movie clip called nav_bar2. Drag the nav_bar symbol onto nav_bar2.
Copy the first keyframe in nav_bar2. Paste this keyframe onto frames 15 and 30. Then go to frame 15 and lower the nav_bar instance about 50 pixels. Click on the layer name (presumably Layer 1), and look at the properties bar. There should be an option called tween. Click the drop down list next to it and choose "motion."
While still in nav_bar2, create a new layer above layer 1. On frames 1 and 15 of the new layer, insert a blank keyframe. Right click on each blank keyframe, click "Actions" and add the following code:
stop();
Okay, now to the main stage. Drag an instance of nav_bar2 onto the stage. Give it an instance name of "mc_navigation".
Create a new layer and, once again, right click on the blank keyframe to choose "Actions".
Copy and paste the following code.
stop();
mc_navigation.addEventListener(MouseEvent.MOUSE_OVER, change_nav);
mc_navigation.addEventListener(MouseEvent.MOUSE_OUT, change_back);
function change_nav(event:MouseEvent)
{
mc_navigation.play(); /*this tells the movie clip to play, thus tweening the links down */
}
function change_back(event:MouseEvent)
{
mc_navigation.gotoAndPlay(15); /* this returns the navigation back to its original y-coordinate. */
}
-------------------------
Please note that this won't be the exact magnet effect that you have in your example. It would just be my version, where the navigation bar moves down when you move near it. It won't however, move down in the exact proportion to which the mouse moves up. The mouse hovering near it will just trigger the bar to move down.
-----------
Once again, if you don't know Anything about Flash, then this would be very difficult. If you'd like, I can create one of these for you in about 20 minutes free of charge. All I would need you to do is send me the names of the links (the text that you would like to appear), and the absolute URL's that you would like them to link to. All you would have to do then is place the SWF that I send you into the top of your html document.
Lou
If you are not familiar with Flash, then this will be a struggle, unless you figure out another way to do this. If you don't know anything about Flash, scroll down to the bottom paragraph.
But, if you have a basic knowledge of Flash, here's what you do. All of those navigation links need to be (or at least should be) movie clips. So you would name them, mc_collection, mc_fitguide, mc_advertising, etc.
Then create another movie clip (named "nav_bar" in this example) into which you will place all of the movie clip links. Place them all on frame one on the same layer.
So, you have a movie clip named nav_bar, which contains instances of mc_collection, mc_fitguide, etc. Line up the links in nav_bar so that they appear in a linear fashion just like the hilfigerdenim.com site.
Create a new movie clip called nav_bar2. Drag the nav_bar symbol onto nav_bar2.
Copy the first keyframe in nav_bar2. Paste this keyframe onto frames 15 and 30. Then go to frame 15 and lower the nav_bar instance about 50 pixels. Click on the layer name (presumably Layer 1), and look at the properties bar. There should be an option called tween. Click the drop down list next to it and choose "motion."
While still in nav_bar2, create a new layer above layer 1. On frames 1 and 15 of the new layer, insert a blank keyframe. Right click on each blank keyframe, click "Actions" and add the following code:
stop();
Okay, now to the main stage. Drag an instance of nav_bar2 onto the stage. Give it an instance name of "mc_navigation".
Create a new layer and, once again, right click on the blank keyframe to choose "Actions".
Copy and paste the following code.
stop();
mc_navigation.addEventListener(MouseEvent.MOUSE_OVER, change_nav);
mc_navigation.addEventListener(MouseEvent.MOUSE_OUT, change_back);
function change_nav(event:MouseEvent)
{
mc_navigation.play(); /*this tells the movie clip to play, thus tweening the links down */
}
function change_back(event:MouseEvent)
{
mc_navigation.gotoAndPlay(15); /* this returns the navigation back to its original y-coordinate. */
}
-------------------------
Please note that this won't be the exact magnet effect that you have in your example. It would just be my version, where the navigation bar moves down when you move near it. It won't however, move down in the exact proportion to which the mouse moves up. The mouse hovering near it will just trigger the bar to move down.
-----------
Once again, if you don't know Anything about Flash, then this would be very difficult. If you'd like, I can create one of these for you in about 20 minutes free of charge. All I would need you to do is send me the names of the links (the text that you would like to appear), and the absolute URL's that you would like them to link to. All you would have to do then is place the SWF that I send you into the top of your html document.
Lou
Last edited: