Creating a mouse follow Effect with Layers

1

Hi All,

I want to make a mouse follow Effect with Flash mx 2004, such that when the mouse come over the links the Image as the banner will move to the other direct, i want to do that without using Actionscript.

Take a look at www.craigdavid.co.uk and see the Effect. I need help as fast as possible.

Thanks FlashFile.:hr:

2

That effect was done using ActionScript for sure. It would take ages to tween an effect like that. This is how it works:

All the images are placed next to eachother and brought together in one movieclip. A mask is being placed over that movieclip so you can only see the part in the middle. When you roll over the buttons, ActionScript is used to make that movieclip ease to a given x position. Here is a prototype you can use to make the movieclip ease to a certain x position:


MovieClip.prototype.easeX = function(x){
this.onEnterFrame = function(){
this._x = x-(x-this._x)/1.2
if(this._x > x-1 && this._x < x+1){
delete this.onEnterFrame;
}
}
}
//Usage:
yourmovieclip.easeX(500)
//this will make yourmovieclip ease to the x position of 500.

Here’s what you would use on the buttons:


on(release){
imagesmovieclip.easeX(326);
}

326 is just an example position. These are of course different for each button.

If you also want a mouse follower, there’s a great tutorial here on www.kirupa.com :slight_smile:

3

I got answer right the but where do i insert the first code ?

ActionScript:--------------------------------------------------------------------------------MovieClip.prototype.easeX = function(x){
this.onEnterFrame = function(){
this._x = x-(x-this._x)/1.2
if(this._x > x-1 && this._x < x+1){
delete this.onEnterFrame;
}
}
}
//Usage:
yourmovieclip.easeX(500)
//this will make yourmovieclip ease to the x position of 500.

And the movie, does it need Frames (how many) or how many layers does it require.

FlashFile:hr:

4

The prototype code can be placed anywhere in your movie, but it is preferably placed on the first frame of your main movie. That way the function is available to all movieclips from the first frame on.

I can’t tell exactly you where you need to place your button code - that depends on your file structure. If you are going to use the dynamic event handler (yourbutton.onRelease = function() {…), then it should be placed on the frame which your buttons are in.

If you are using the static on(release) handler, the code should be placed onto your buttons.

Always remember to alter paths !

And the movie, does it need Frames (how many) or how many layers does it require.

A movie doesn’t “require” a certain amount of layers or frames. You use the movie’s frames for animating, the movie doesn’t require you to use a specific amount. Same goes for layers. They are just there to make working with timelines and objects easier.

Why did you make a poll on this ? Quite unnecesary.

5

I still dont understand it, i have tried it but i still need a little tutorials on that so that i can make a perfect Effect.

If any little tutorials is available i will highly appriacite it, because it will be of benefit to the forum in general.

Thanks FlashFile:hr:

6

What don’t you understand about it ?

7

Thanks once more.

I dont understand where to put the Actionscript you gave up there and how to make the buttons.

Though if it is the buttons that will not be a problem as much as understanding HOW and WHERE to put this Actionscript in particulaly.

Is it on the image that moves? or on the buttons?

And can you just tell me which Actionscript is for a perticular Function on this Issue.

Thanks FlashFile:hr:

8

This part:


MovieClip.prototype.easeX = function(x){
        this.onEnterFrame = function(){
                this._x = x-(x-this._x)/1.2
                if(this._x > x-1 && this._x < x+1){
                        delete this.onEnterFrame;
                }
        }
}

Goes on the first frame of your main timeline. This code makes the ease function available to every movieclip. That’s why it’s placed at the beginning of the movie, so that every movie has access to it from the first frame on.

The second part depends on if you want to use static event handlers (on(release), goes on the button itself) or dynamic event handlers (yourButton.onRelease = function(){…, goes on the timeline your buttons are in). I suggest you use dynamic event handlers here. Then this code goes on the timeline your buttons are in:


button1.onRelease = function(){
images_mc.easeX(326);
}
button2.onRelease = function(){
images_mc.easeX(426);
}
button3.onRelease = function(){
images_mc.easeX(526);
}

This is just an example, you have to alter the paths and the values to ease to to make it work. That I can’t do for you.