Easing flash menu

  • andrewmeda
  • Novice
  • Novice
  • User avatar
  • Joined: May 29, 2005
  • Posts: 15
  • Loc: London
  • Status: Offline

Post October 14th, 2005, 3:57 pm

Hello,

I am desparetely trying to make a horizontal easing flash menu, that moves when the user runs their mouse over it.

It is basically the same effect as the link below. This site has a really cool photo viewing gallery that uses the mouse over motion effect.

I jusr want to implement it onto a horizontal menu....

Check out the link, and follow the navigation listed below to check it out.

Any help / advice / code would be really appreciated.

http://www.thedufferofstgeorge.com/

1.launch site
2. hit 'special projects'
3. hit the '20 ans' button / graphic for it to load.

It's really nice!!
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 14th, 2005, 3:57 pm

  • ShapeShifter
  • Graduate
  • Graduate
  • User avatar
  • Joined: Sep 09, 2005
  • Posts: 159
  • Loc: Sweden
  • Status: Offline

Post October 16th, 2005, 5:08 am

this would require good knowledge of AS.. and lots of patience as well coz you WON'T get it right the first time.. I know coz I've been there :)
do you have what it takes? -_^
  • andrewmeda
  • Novice
  • Novice
  • User avatar
  • Joined: May 29, 2005
  • Posts: 15
  • Loc: London
  • Status: Offline

Post October 16th, 2005, 5:20 am

Go on, hit me with it! I can take it!

Any advice or code would be great.

Greetings from London!
  • Jaw
  • Graduate
  • Graduate
  • User avatar
  • Joined: Nov 08, 2004
  • Posts: 132
  • Loc: Minneapolis, MN
  • Status: Offline

Post October 17th, 2005, 1:39 pm

If you were to try and mimic the style I would first start with finding the position of the mouse on the movieclip and then return a percentage.
If the mouse is all the way left or beyond that is 0% and right edge and beyond is 100%.
Same with top to bottom.

Find where the mouse is located and then you will have a percentage value to apply to the position of any other elements.
  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Joined: Oct 12, 2004
  • Posts: 861
  • Loc: BKNY
  • Status: Offline

Post October 19th, 2005, 2:56 am

another way to do it is to have the speed of the menu be a function of how far off-center the mouse is... and then just have stop-points...

i did this a while ago for this photographer's site...
i based it off of [url="http://www.tutorio.com/tutorial/simple-flash-xml-photogallery"]this tutorial[/url] and the scroll code was:
Code: [ Select ]
thumbnails.onEnterFrame = function() {
var distance = midx-_root._xmouse;
if(_root.thumbnails._x>=(302.9) && ((Number(distance))>0)){
_root.thumbnails._x = _root.thumbnails._x;}
else if(((Number(_root.thumbnails._x))<=((641.7)-(i*spacing)) && ((Number(distance))<0))){
_root.thumbnails._x = _root.thumbnails._x;}
else{
_root.thumbnails._x += (distance*friction);}
}
  1. thumbnails.onEnterFrame = function() {
  2. var distance = midx-_root._xmouse;
  3. if(_root.thumbnails._x>=(302.9) && ((Number(distance))>0)){
  4. _root.thumbnails._x = _root.thumbnails._x;}
  5. else if(((Number(_root.thumbnails._x))<=((641.7)-(i*spacing)) && ((Number(distance))<0))){
  6. _root.thumbnails._x = _root.thumbnails._x;}
  7. else{
  8. _root.thumbnails._x += (distance*friction);}
  9. }


check out that tut, though... and the thread i posted the scrolling code in is [url="http://www.tutorio.com/forums/showtopic-41.html"]here[/url], i'm puck... yeah...

if you have any questions, come with 'em...
  • R.L.D.
  • Student
  • Student
  • User avatar
  • Joined: Apr 07, 2005
  • Posts: 83
  • Loc: Astoria,Queens
  • Status: Offline

Post October 19th, 2005, 4:01 am

or if you want something a little more simple you could use something like this...

Code: [ Select ]
onClipEvent (enterFrame) {
    if(this.hitTest(_root._xmouse,_root._ymouse,true)){
        _root.player._y += (14 - _root.player._y)/2;
    }else{
         _root.player._y -= (0 + _root.player._y)/2;
    }
        
}
  1. onClipEvent (enterFrame) {
  2.     if(this.hitTest(_root._xmouse,_root._ymouse,true)){
  3.         _root.player._y += (14 - _root.player._y)/2;
  4.     }else{
  5.          _root.player._y -= (0 + _root.player._y)/2;
  6.     }
  7.         
  8. }


check out http://www.myspace.com/rldesigns to see the code in action...
mouse over the mp3 player on top.

code goes on the movieClip that you want to slide.

_y is obviously the angle you want to slide.
14 would be the distance
2 would be the speed

hope that helps :)
  • andrewmeda
  • Novice
  • Novice
  • User avatar
  • Joined: May 29, 2005
  • Posts: 15
  • Loc: London
  • Status: Offline

Post October 19th, 2005, 11:21 am

Thanks guys - VERY MUCH APPRECIATED!

Will give them a crack and let you know how I get on.

Thanks again.

andrew_meder
  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Joined: Oct 12, 2004
  • Posts: 861
  • Loc: BKNY
  • Status: Offline

Post October 28th, 2005, 1:29 am

R.I.D.,

that's nice, man... much more elegant than my scrappy code...
pretty tight that there's always more than one way to... um... peel an orange? (the cat thing's just kinda nasty)

peace out
  • braxius
  • Born
  • Born
  • No Avatar
  • Joined: Jun 08, 2006
  • Posts: 2
  • Status: Offline

Post June 8th, 2006, 5:40 am

this is what you get when you ask a help from a hardcore AS'esr, they al seem to know how to do it, but none of them can tell how.

A hardcore coder would write millions of code lines and waste lots of time on this, well heres how a smart programmer would to it.

function initScroll() {
this.onEnterFrame = function() {
if (Mask_mc.hitTest(_root._xmouse, _root._ymouse)) {
var Items_mc = _root.target_mc
var position = _root._xmouse-this._x-15;
var visibleWidth = Mask_mc._width-15;
var allWidth = Items_mc._width-matomas;
var stepA = allWidth/visibleWidth;
var needsToBeHere = 10-(Mask_mc._x+(position*stepA));
if (needsToBeHere<-(allWidth-15)) {
needsToBeHere = -(allWidth-15);
}
if (needsToBeHere>10) {
needsToBeHere = 10;
}
var isHere = Items_mc._x;
new mx.transitions.Tween(Items_mc, "_x", mx.transitions.easing.Elastic.easeOut, isHere, needsToBeHere, 3, true);
}
};
}

There are quite a lot of things that i learned in my 5 years of flashing, and one of those things is that, when you have written more that 30 lines of code for a simple looking action- delete it and start using F1 to find alternative
  • andrewmeda
  • Novice
  • Novice
  • User avatar
  • Joined: May 29, 2005
  • Posts: 15
  • Loc: London
  • Status: Offline

Post June 8th, 2006, 2:26 pm

Thanks a lot for that - will certainly give it a go.

All the best.
  • Dima85
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 23, 2008
  • Posts: 10
  • Status: Offline

Post June 27th, 2008, 2:09 pm

andrewmeda wrote:
Thanks a lot for that - will certainly give it a go.

All the best.


You can use some online or desktop menu creator.
Like that one: http://flash-menu.net it's online
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post June 27th, 2008, 2:24 pm

dude you found a 2 year old thread. I assume the problem has been solved...
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 42 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.