Slide object in on mouseover

[asmemnoch]

Hi, I'd like to figure out how to do this (I think in AS3).

I'd like to mouseover an object and have it slide across (tween) and stop. Then when the mouse is removed from the object, it returns to its original position.

Here's an example: http://benpieperphoto.com

It's fine if we just make it happen to a box - don't worry about all the slideshow bits and all that.

Thank you!

[Robb@exo]

Try something like this, it incorporates the Tween class within Flash. There are other Tween engines available and can be easily switched. HTH.

import fl.transitions.Tween;
import fl.transitions.easing.*;

sl.addEventListener(MouseEvent.MOUSE_OVER, mOver);
sl.addEventListener(MouseEvent.MOUSE_OUT, mOut);

function mOver(e:MouseEvent):void {
    var tIn:Tween = new Tween(e.currentTarget, "x", Regular.easeOut, sl.x, sl.x - 75, .5, true);
}
function mOut(e:MouseEvent):void {
    var tOut:Tween = new Tween(e.currentTarget, "x", Regular.easeOut, sl.x, sl.x + 75, .5, true);
} 

[asmemnoch]

I'll try it out - thanks a ton!

[Robb@exo]

Forgot to mention that the above code is in AS3, in case you were wondering.

[asmemnoch]

Yeah, I figured it was AS3. Thanks for the help, but it seems I have grossly overestimated my abilities. What values do I replace with my own object name? Is there a com pack I need to download for the fl import to work? I'm so lost.

[asmemnoch]

ok - I did some figuring out myself - thanks for your help so far, I changed the name of my object to sl and it works! The only problem is when the mouse is at the edge of the object, it fluctuates rapidly.

Example at http://foreverdayphotos.com/fdp2010.html - the blue box.

[asmemnoch]

ok - i think i was having a local flash rendering problem. I'll let you know if i still have problems - thanks so much!

[Robb@exo]

Try this to see if it helps.

var startPos:Number = sl.x; // or use the numeric equivalent to sl.x 

Then use the variable in the tween parameters, for tIn: sl.x, for tOut: sl.x - 75.

[asmemnoch]

As usual, I don't understand. Can you please set me up with some sample code - like the whole set and I'll just sub numbers? Sorry for the hassle, but I really am a n00b.

[Robb@exo]

Try uploading the file and I'll have a look at it.

[asmemnoch]

Thanks! Here is is - www.foreverdayphotos.com/fdp2010.fla The blue box is a decoy - feel free to rename it or whatever. The thumbgrid component on the right is what I really want to move in and out. Thanks again!

[Robb@exo]

For the thumbgrid, try something like this,

import fl.transitions.Tween;
import fl.transitions.easing.*;

thumbgrid.addEventListener(MouseEvent.MOUSE_OVER, mOver);
thumbgrid.addEventListener(MouseEvent.MOUSE_OUT, mOut);

function mOver(e:MouseEvent):void {
    var tIn:Tween = new Tween(e.currentTarget, "x", Regular.easeOut, e.currentTarget.x, e.currentTarget.x - 150, .5, true);
}
function mOut(e:MouseEvent):void {
    var tOut:Tween = new Tween(e.currentTarget, "x", Regular.easeOut, e.currentTarget.x, e.currentTarget.x + 150, .5, true);
} 

[asmemnoch]

Finally got round to trying it out - same exact problem. The thumbgrid component fluctuates rapidly when the mouse if over it.

www.foreverdayphotos.com/fdp2010.html

Thanks again for all your help.

When you reply, please send me a full set of code - I can't figure out where to add / remove exchange snippets.

[Robb@exo]

Try this.
File Link

[asmemnoch]

Thanks again for all your help. Same problem exactly, the object just oscillates and keeps going off the page. Should I give this up? I though it would be simple but it's really turning into a hassle. I hate to keep bothering you.

[Robb@exo]

Don't know what to tell you... as it works for me just fine.

[Robb@exo]

Try replacing the code with this and see if it works any better.

import fl.transitions.Tween;
import fl.transitions.easing.*;

thumbgrid.addEventListener(MouseEvent.MOUSE_OVER, mOver);
thumbgrid.addEventListener(MouseEvent.MOUSE_OUT, mOut);

var startPos:Number = 931;
var endPos:Number = 831;

function mOver(e:MouseEvent):void {
    var tIn:Tween = new Tween(e.currentTarget, "x", Regular.easeOut, startPos, endPos, 1, true);
}
function mOut(e:MouseEvent):void {
    var tOut:Tween = new Tween(e.currentTarget, "x", Regular.easeOut, e.currentTarget.x, startPos, 1, true);
    if(e.currentTarget.x != startPos) {
        e.currentTarget.x = startPos;
    }
    trace(e.currentTarget.x);
} 

[asmemnoch]

Hi,

Sorry it's been a while. I got pretty dejected and I'm losing hope :-(

I tried the code you put above, and it's erroring on lines 11 and 14. Syntax error: expecting identifier before var, and Label must be a simple identifier on both.

Any other help you can give would be appreciated.

Thank you.

[Robb@exo]

Take out the "*" in 11 and 14, not sure why they were there in the first place.

[asmemnoch]

Umm, there is no "*" in 11 or 14.