Solved

movie or graphic to vertically follow mouse tracking.

Posted on 2009-04-07
8
564 Views
Last Modified: 2013-11-11
I am trying to come up with a script that will follow only the movements of my mouse only vertically [.y?]

I have tried putting together a scrollable area with a mask and up and down buttons on a ROLL_OVER. But it is not exactly what I am after.

The perfect example of what i am trying to do is on the main landing page for FURLA.COM.

I am not asking for anyone to write a code for me.  I am just looking for help to be pointed in the right direction.

Any assistance is appreciated.
0
Comment
Question by:domestika
  • 5
  • 2
8 Comments
 

Author Comment

by:domestika
Comment Utility
http://www.furla.com/

if this helps as a reference.

I am terribly new at AS3 and cannot even think of where to being, is this an enter.frame type of function of a mouse event?  I am pretty lost.

Thanks
0
 
LVL 19

Accepted Solution

by:
quizengine earned 500 total points
Comment Utility
The attached example is pretty crude (e.g. there is no tweening of the shape as in your example) and I've just used vector shapes to keep the filesize down, but I think it may. Also some of the maths is pretty scrappy to get the scaling right, but maybe it will get you started.

To see the script, click the symbol on the stage and look in the actions panel. Basically the approach I took was to draw an imaginary line across the movie, half way down the y axis. If the mouse position was above that line, move the clip vertically (i.e. reduce the _y property) and if the mouse pointer were below that imaginary line to move the clip down the screen.

Hope it's of some use.
y-scroll-cs3.fla.jpg
0
 

Author Comment

by:domestika
Comment Utility
Great!  thanks so much for that script.  It's so simple. I love it. What i did was to switch the direction of the clip so it moves opposite to the direction of the mouse movement.

My next question is:

How would I go about adding easing to the movie clip? And it there is a way to balance the amount that the clip moves top and bottom, I notice it tends to move more in one direction than the other.  No biggie. The easing it more important for me to get sorted.


y-scroll-cs3.fla.txt
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 19

Expert Comment

by:quizengine
Comment Utility
I'm thinking it would be almost faster to write some easing code than to try and explain how i would go about it, but then I think you would learn less, so here goes.

You need to set a target _y position for the movieclip - a place where you want it to reach eventually. Then you need work out the difference (in pixels) between where the clip is now, and where it will be. Then you need to divide that by some scaling factor. For example, if you divided it by 10, it would take 10 frames to get there - I'll call this fractional distance the 'delta'. Then just add (or subtract) that *delta* value to the movieclips position each frame using the on (enterFrame) that's already on the clip.

Ok. So we now have fractional movement each frame, but not easing. This isn't  easing because the clip moves in standard increments each frame. With easing we need to have the clip move a different distance in each frame. In the example you showed, the clip moves a large distance quickly then as it approaches it's target place, it starts to move more slowly.

In order to do this we will need to reduce the delta each frame. So, if the variable were called delta_y, I would put something in there like

delta_y = delta_y *0.9;

which would reduce the amount the clip moves by 10% per frame. Now if you're good with maths, you'll realise that with this idea, the clip will *never* reach it's target - it will only ever get closer and closer. But from a practical point of view, the movement will get so small that it will appear to have come to rest.

Good luck experimenting.
0
 

Author Comment

by:domestika
Comment Utility
so i have figured out what my 'delta_y' is and where the final position [final_y] of the image shall be.  

I have tried a couple of different ways of inserting that code into the (enterFrame) method, but I can't seem to produce results.  I thought by switching out a few values i could get results.

I am happy by the distance I am getting in the movement of the clip. by I am lost on how to create an equation to insert the delta value? [math's was not my strong point]

I feel as though I am totally missing something. But I am not too sure what?
onClipEvent (load) {

	mouse_ypos = _ymouse;

	start_y = 300; 		// middle of the stage

	y_offset = 300;		// half of stage height

	y_final = 275; 		// final position of image

	delta_y = 0.5; 		// fractional distance

}
 

onClipEvent (enterFrame) {

	this._y = start_y + ((y_offset + _ymouse)/(y_final - y_offset));

}

Open in new window

y-scroll-cs3.fla.txt
0
 

Author Comment

by:domestika
Comment Utility
I have been super busy, that I haven't had a chance to work on this as yet.

But I now have a co-worker who only knows AS2.0.

I have never used AS2.0 before.  Will i have to rewrite this whole script [and more] to get it to work in 2.0?
0
 

Author Comment

by:domestika
Comment Utility
Also, another thought in AS3.0

I have come up with this super easy script. BUT i need to find a way to stop the image at a certain point and to slow down it's movement. Then I just need to reverse the direction of the image to the opposite of whatever way the mouse moves...

Am I going about this the right way?
onClipEvent (enterFrame) {

_y += (_parent._ymouse-_y)*.1;

}

Open in new window

0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
best online free website 29 118
Download Adobe Flash Player 6 55
Can text be turned into a nice jpeg? 4 51
Question to locate the problem 18 53
I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now