Slide object in on mouseover

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!

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

PHP Code:

---

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);
} 


---

I'll try it out - thanks a ton!

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

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.

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.

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

Try this to see if it helps.

PHP Code:

---

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.

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.

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

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!

For the thumbgrid, try something like this,

PHP Code:

---

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);
} 


---

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.

Try this.
File Link

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.

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

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

PHP Code:

---

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);
} 


---

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.

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

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

OK let me ask you is this, is the sliding box going to bleed off the stage on the mouse over or is going slide in further so that the entire panel is visible on the mouse over?

No - 1/3 of the box will remain on stage on mouseout and on mouseover the whole box will slide onto the stage.

OK, good to know. As far as I can see using a MOUSE_OUT will complicate things to no end. So instead try incorporating a CLICK. Something like,

PHP Code:

---

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

var startPos:Number = 580;
var endPos:Number = 350;

thumbgrid.addEventListener(MouseEvent.MOUSE_OVER, mOver);
thumbgrid.addEventListener(MouseEvent.CLICK, mClick);

function mOver(e:MouseEvent):void {
    if(thumbgrid.x >= startPos) {
        var twIn:Tween = new Tween(thumbgrid, "x", Regular.easeOut, startPos, endPos, 1, true);
    }
}
function mClick(e:MouseEvent):void {
    if(thumbgrid.x == endPos) {
        var twRet:Tween = new Tween(thumbgrid, "x", Regular.easeOut, endPos, startPos, 1, true);
    }
} 


---

HTH.

ok, we're getting close. Can we lose the click functionality? I only want it to work on mouseover / mouseout. Remember the sample? http://benpieperphoto.com/

No clicking!

The error isnt happening any more - the one where the object was vibrating when mouseovered on the edge.

Yes I remember the example, the problem is that the example bleeds off the stage even on a mouseover, in which there is no issue with the object "shaking". However, wanting the menu to float within the screen forces the user to follow the movieclip with some precision, with consequences being the "shakey" effect or the menu returning to original position.

If we can make it function *exactly* like the sample, that would be perfect. It seems to be working fine with no shaking. That's what I'd like. Is that possible?

Maybe I'm not explaining myself clearly enough, the example can be done as long as part of the object remains off stage, as the example shows. Post 22 however states, at least as I understand it that you want the object to be center stage on mouseover... that can be done but not without "shakey" effect, at least to my knowledge. If you're fine with the object partially staying off the stage as per the example then refer back to post 12.

No, you must have misunderstood me at some point. I'd like it to behave *exactly* like the sample. I tried the code from post 12, and like my response in post 13, the component is shaky.

Maybe I was mistaken, try the code in post 17 which works fine... some of the properties may need to be adjusted for proper performance. Namely the startPos and endPos values in relation to the width of the object being tweened and the width of the stage. Make sense?

PHP Code:

---

var startPos:Number = 931; // starting x position of thumbgrid, most of which should be off stage, so the x value of thumbgrid should be less than stage width
var endPos:Number = 831; // ending x value of thumbgrid, the difference of  startPos - endPos should be less than the width of the object to prevent shaking 


---

Tried it, it doesn't work perfectly. It's shaky.

What happens when you view the attached swf?

It works like a dream.

Yeah that's the code from post 17. What version of Flash are you using?

Flash CS5. I'm so tired of not getting this thing to work. I really really really appreciate all your help so far. Also with the swf that you posted that I said was perfect, it's really not - when you move the mouse pointer back and forth over the left vertical edge, it starts to skip.

I'm wondering if the mouseover you created is having some issues with any built in mouseovers (which I have tried to remove) in the thumbgrid component?

What do you think I can do to get this thing done perfectly once and for all? I'm quite out of my depth but very interested in getting results.

I know this thread is a few months old, but I'm trying to do the same thing as the OP and have found some good info here. However, I'm getting the same jerky thumbs as the OP when using the Thumbgrid component for SlideShowPro. When I use a standard movie clip the code from post 17 works fine, but when using the component that is populated with thumbnails, and you mouse over them, it starts jerking all over the place.

Any advice would be much appreciated.

Thanks.

I just figured it out! I've been working with a couple different versions and the AS3 code below works. The name of the ThumbGrid component is "my_tg". I'm also working on a version that will resize with the browser and keep the thumbs aligned on the right side, and will post that when I get it working in case someone else can use it.

Code:

---


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

var rolled_up = my_tg.x;

// change the value below to suit your stage and position of your thumbs when they are rolled out
var rolled_out = 700;

function slideout(e:MouseEvent){
var fresh = my_tg.x;
var myTween:Tween = new Tween(my_tg, "x", Strong.easeOut, fresh, rolled_out, 1, true);
}


function slidein(e:MouseEvent){
var current = my_tg.x;
var myTween:Tween = new Tween(my_tg, "x", Back.easeOut, current, rolled_up, 1, true);
}
   
my_tg.addEventListener(MouseEvent.MOUSE_OVER, slideout);

my_tg.addEventListener(MouseEvent.MOUSE_OUT, slidein);

---

Wow, amazing that you figured it out. I found that I was way out of my league with this project, so I found someone to do it for me. He's pretty great, so let me know if you need any help with this. Also thanks for posting the code.

It would nice to see the code you had written to see how it differs from mine. I'm really new to actionscript, so I'm fumbling my way thought it with lots of trial and error, and help from sites like this. I've got an example working that resizes with the browser, but the thumbs are still a bit jerky and occasionally jump around the stage when I resize it.