How to make a button slide a movie

programming flash
1

Hey all!

I am new :cyclops: to action script and am learnign a great deal from you all! THANKS for all the help!

Now for the question:

I have read several tutorials on moving objects around but i have had no luck finding one that tells how to put a simple function of sliding a movie one way and then another way when mousing over 2 different buttons.

I have a photo i want to slide on mouse over to the left for one button but stop at a certain point and then another button that would make it slide to thr right but only to the end of the photo.

Does anyone know the best way to do this and the easiest and cleanest coded way?

thanks for all the help!

2

The easiest and cleanest code I have seen involves easing, not just simple movement. I like easing because it looks good. Easing is when an object moves at speed and then slows when it nears its destination.

Voetsjoeba has written a genuinely beautiful piece of code for easing:

Easing in x direction:


MovieClip.prototype.easeX = function(to){
 this.onEnterFrame = function(){
 this._x = to-(to-this._x)/1.1;
 if(this._x > to-1 && this._x < to+1){
 this._x = to;
 delete this.onEnterFrame
 //do other stuff here, this is the point at which the object reaches its target
 }
 }
 }
 MC.easeX(100);

easing in x and y direction:


 MovieClip.prototype.ease = function(x,y){
this.onEnterFrame = function(){
this._x = x-(x-this._x)/1.1;
 this._y = y-(y-this._y)/1.1
 if(this._x > x-1 && this._x < x+1 && this._y > y-1 && this._y < y+1){
 this._x = x;
 this._y = y;
delete this.onEnterFrame
//do other stuff here, this is the point at which the object reaches its target
                 }
         }
 }
 MC.ease(100,100);

Put the prototype code on the main timeline in an actionscript layer. Put the code that calls the prototype function (in this case MC.ease(x, y)) anywhere you want to call it. You can call it from an on(release) button event:


on(release){
MC.ease(25, 346)
}

Hope this helps! :hr:

3

AWESOME!!! Thanks you sooo much for the info!

I will give it a shot and see if i can figure it out. Since i am new to this i might have some more questions.

Will this alow me to slide it only when pressign the button and when i release it stops sliding? I dont want it to go all the way to the end but only move as long as you hold the button and then when you let off it stops. This way if it is a really long image you scroll a little bit and release to look and then click to keep scrolling to the end or hower far you want.

Do you think that maybe some kind of panoramic script does this with buttons and such?

Thanks!!! I can not tell you how much i really appreciate all the help everyone has given me! :slight_smile:
Aaron

4

Nah the script I gave you wont’ suit your needs then. What I gave you is something that, when you call it the function and give it an x or x,y coordinate, it will move to that spot. Sounds like what you want is something different.

Here is an example of what I mean:

5

man that is awesome though!! :wink:

i wonder if there was a way to say on each click move only so far in pixed width and not to go past the edge of the picture or movie clip edge?

6

Well, don’t know about the bounds part - that is much more complicated (look up getBounds in your actionscript reference). But I can help with the other part.

:hr:

*keep clicking the button in the file

7

man that is awesome too!!! you are very fast at this stuff! :slight_smile:

Thanks for the help! I will see what i can find. If i find somthing i will post because i doubt i will know how implement. Sorry for being such a newb!

Thanks again for all the help!!!

8

No problem. Sorry its not exactly what you need. If there is anything else I can sort of but not really help you out with let me know! :stuck_out_tongue:

And keep searching through the forum - I know I’ve seen your question before.

:hr:

9

ok i found this but am not to sure how to implement.

http://www.macromedia.com/support/flash/action_scripts/actionscript_dictionary/actionscript_dictionary523.html

Can you give me a hand and implement on you test fla so i can see it in action?

Thanks!!!

10

ok this is what i have ried but it does not seem to work. do i have this right?

I have applied the clipbounds to the first frame with this code. Should i put this on the button to make it move?

[QUOTE]MovieClip.prototype.easeX = function(to){
this.onEnterFrame = function(){
this._x = to-(to-this._x)/1.1;
if(this._x > to-1 && this._x < to+1){
this._x = to;

clipBounds = ball.getBounds(_root);
_root._x = clipBounds.xMax;

delete this.onEnterFrame
//do other stuff here, this is the point at which the object reaches its target
}
}
}

11

here is what i have on the first key frame:

MovieClip.prototype.easeX = function(to){
this.onEnterFrame = function(){
this._x = to-(to-this._x)/1.1;
if(this._x > to-1 && this._x < to+1){
this._x = to;

clipBounds = ball.getBounds(_root);
_root._x = clipBounds.xMax;

delete this.onEnterFrame
//do other stuff here, this is the point at which the object reaches its target
}
}
}

and this is what i have for the action for the button to move the item

on(press){
ball.easeX(ball._x + 90);
}

But it does not stop the image when it reaches the start when moving to the left and it does not stop it when moving it to the right and of image.

12

I think you are getting a little off track.
2 buttons instance names btn1 &btn2
movieclip instance name photo_mc
on the timeline containing all 3

function move(clip, targetX, speed) {
if (Math.abs(clip._x-targetX)>1) {
clip._x += speed;
} else {
clip._x = targetX;
clearInterval(myInterval);
}
}
btn1.onPress = function() {
clearInterval(myInterval);
myInterval = setInterval(move, 20, photo_mc, 600, 5);
};
btn2.onPress = function() {
clearInterval(myInterval);
myInterval = setInterval(move, 20, photo_mc, 0, -5);
};
btn1.onRelease = btn2.onRelease=function(){
clearInterval(myInterval);
};

There is no need to use getBounds()

13

ok i have tried what you said but it still goes past the ends of the movie and keeps going.

Can you please look at the fls and tell me what i am doing wrong? PLEASE!???

I just put a black box for the photo_mc but i will have a long photo that will vary in length from 1200px to 2400px.

Thanks!

14

Sorry ,my mistake. I`ve fixed your file but you will have to play with the variables when you change photo_mc.
EDIT/
if you want to use easing something like this might work better
function move(clip, targetX, speed) {
clip._x += (targetX-clip._x)/speed;
if (Math.abs(clip._x-targetX)<1) {
clip._x = targetX;
clearInterval(myInterval);
}
}
btn1.onPress = function() {
clearInterval(myInterval);
myInterval = setInterval(move, 20, photo_mc, 385, 30);
};
btn2.onPress = function() {
clearInterval(myInterval);
myInterval = setInterval(move, 20, photo_mc, 0, 30);
};
btn1.onRelease = btn2.onRelease=function () {
clearInterval(myInterval);
};