# Width and Position Easing

**URL:** <https://forum.kirupa.com/t/width-and-position-easing/58300>\
**Category:** flash\
**Created:** [July 21, 2004, 12:13pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300 "2004-07-21T12:13:42Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![as\_clark20](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@as\_clark20](https://forum.kirupa.com/u/as_clark20)\
**Post date:** [July 21, 2004, 12:13pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/1 "2004-07-21T12:13:42Z")

</div>

I have a series of buttons lied out horizontally for a navigation system I am making. The buttons are different widths. What I am trying to create is a slider that will ease underneath each of the buttons onRollOver, but at the same time will resize to each buttons width so it all looks seemless.

Is it possible to have an ease of width (xscale) AND position (x) at the same time? And could someone please help me out with it.

Thank you ever so much

Adam.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 21, 2004, 2:19pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/2 "2004-07-21T14:19:45Z")

</div>

yes, it’s possible. and not difficult.

[http://www.kirupaforum.com/forums/showthread.php?t=62491](http://www.kirupaforum.com/forums/showthread.php?t=62491)

you’ll be using this.\_x and this.\_width

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 21, 2004, 2:53pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/3 "2004-07-21T14:53:14Z")

</div>

> [@as\_clark20](#):
>
> I have a series of buttons lied out horizontally for a navigation system I am making. The buttons are different widths. What I am trying to create is a slider that will ease underneath each of the buttons onRollOver, but at the same time will resize to each buttons width so it all looks seemless.
> 
> Is it possible to have an ease of width (xscale) AND position (x) at the same time? And could someone please help me out with it.
> 
> Thank you ever so much
> 
> Adam.

Quickly made but i think its something like what you are looking for [http://www.gifsrus.com/testfile/tweenTo.swf](http://www.gifsrus.com/testfile/tweenTo.swf)

buttons with instance names B1,B2,B3 etc- you can alter the number in the code.  
slider movieclip with instance name mc.  
On the timeline containing both

MovieClip.prototype.tweenTo = function(targetsObj, speed) {  
this.targetsObj = targetsObj;  
this.speed = speed;  
move = function (clip) {  
var count;  
for (var prop in clip.targetsObj) {  
clip[prop] += (clip.targetsObj[prop]-clip[prop])/clip.speed;  
if (Math.abs(clip.targetsObj[prop]-clip[prop])\<0.4) {  
clip[prop] = clip.targetsObj[prop];  
delete clip.targetsObj[prop];  
}  
count++;  
}  
if (!count) {  
clearInterval(myInterval);  
}  
};  
myinterval = setInterval(move, 50, this);  
};  
//alter your number of buttons here  
for (var i = 1; i\<5; i++) {  
this[“B”+i].onRollOver = function() {  
var obj = {\_width:this.\_width, \_x:this.\_x};  
mc.tweenTo(obj, 5);  
};  
}

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 21, 2004, 10:49pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/4 "2004-07-21T22:49:49Z")

</div>

hi do you have an fla file so i can see what i am doing wrong.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 21, 2004, 10:50pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/5 "2004-07-21T22:50:36Z")

</div>

hi do you have an fla file so i can see what i am doing wrong.

thanks in advance

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 22, 2004, 5:17am UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/6 "2004-07-22T05:17:26Z")

</div>

> [@Gupps](#):
>
> hi do you have an fla file so i can see what i am doing wrong.
> 
> thanks in advance

[http://www.gifsrus.com/testfile/tweenTo.fla](http://www.gifsrus.com/testfile/tweenTo.fla)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 3, 2004, 2:43pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/7 "2004-08-03T14:43:16Z")

</div>

Ah haaa!

I’ve been playing with functions and I’ve written my first prototype.  
Changes the \_x and \_xscale of a movieclip using easing for both effects.

Put this code on your time line:

```auto

MovieClip.prototype.moveMe = function(targetX, targetY, sizeX, sizeY) {
     this.onEnterFrame = function() {
          easeSpeed = 5;
          this._x += (targetX-this._x)/easeSpeed;
          this._y += (targetY-this._y)/easeSpeed;
          this._width += (sizeX-this._width)/easeSpeed;
          this._height += (sizeY-this._height)/easeSpeed;
     };
};

```

When you want to call your movieclip, lets say “dragger”, just put this code on your button

```auto

on (rollOver) {
          dragger.moveMe(targetX, targetY, sizeX, sizeY);
}

```

Have a nice day!  
Me.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 3, 2004, 3:36pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/8 "2004-08-03T15:36:21Z")

</div>

> [@as\_clark20](#):
>
> Ah haaa!
> 
> I’ve been playing with functions and I’ve written my first prototype.  
> Changes the \_x and \_xscale of a movieclip using easing for both effects.
> 
> Put this code on your time line:
> 
> ```auto
> 
> MovieClip.prototype.moveMe = function(targetX, targetY, sizeX, sizeY) {
> this.onEnterFrame = function() {
> easeSpeed = 5;
> this._x += (targetX-this._x)/easeSpeed;
> this._y += (targetY-this._y)/easeSpeed;
> this._width += (sizeX-this._width)/easeSpeed;
> this._height += (sizeY-this._height)/easeSpeed;
> };
> };
> 
> ```
> 
> When you want to call your movieclip, lets say “dragger”, just put this code on your button
> 
> ```auto
> 
> on (rollOver) {
> dragger.moveMe(targetX, targetY, sizeX, sizeY);
> }
> 
> ```
> 
> Have a nice day!  
> Me.

Well done.  
You should also add a condition that when the targets are met the onEnterFrame is removed.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 3, 2004, 3:51pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/9 "2004-08-03T15:51:50Z")

</div>

Yeah I’ve always wanted to know why do you have to do this? I mean it works fine without it but I’ve been curious as to why, I guess I can’t get my head around that bit of AS.

Adam.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 3, 2004, 3:55pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/10 "2004-08-03T15:55:51Z")

</div>

> [@as\_clark20](#):
>
> Yeah I’ve always wanted to know why do you have to do this? I mean it works fine without it but I’ve been curious as to why, I guess I can’t get my head around that bit of AS.
> 
> Adam.

ok, well inside the onEnterFrame, put a trace, something like trace(“hi”) just to see what happens.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 3, 2004, 4:07pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/11 "2004-08-03T16:07:03Z")

</div>

I got a load of “undefined” in the output box. So I take it I need to delete onEnterFrame to avoid this? How do I set my condition up, stringy?

PS Can you believe this “heat wave” we’re having? We’ve got mega storms in manc land.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 3, 2004, 4:22pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/12 "2004-08-03T16:22:38Z")

</div>

> [@as\_clark20](#):
>
> I got a load of “undefined” in the output box. So I take it I need to delete onEnterFrame to avoid this? How do I set my condition up, stringy?
> 
> PS Can you believe this “heat wave” we’re having? We’ve got mega storms in manc land.

you should have got a load of hi. Did you put the “” in?  
Basically i was just trying to show you that although nothing is happening on the screen there is still lots going on and if you have a few mcs it can slow the movie down tons.  
Also because with this sort of easing you are moving a fraction of the distance to the target each frame, as you approach the target the distance is so small as not to be noticable but there are still tons of computations going on unnecessarily. So you need to say if the distance is tiny then \_x = targetX etc.  
so something like this  
MovieClip.prototype.moveMe = function(targetX, targetY, sizeX, sizeY) {  
this.onEnterFrame = function() {  
trace(“hi”);  
easeSpeed = 5;  
this.\_x += (targetX-this.\_x)/easeSpeed;  
this.\_y += (targetY-this.\_y)/easeSpeed;  
this.\_width += (sizeX-this.\_width)/easeSpeed;  
this.\_height += (sizeY-this.\_height)/easeSpeed;  
if (Math.abs(targetX-this.\_x)\<1 && Math.abs(targetY-this.\_y)\<1 && Math.abs(sizeX-this.\_width)\<1 && Math.abs(sizeY-this.\_height)\<1) {  
this.\_x = targetX;  
this.\_y = targetY;  
this.\_width = sizeX;  
this.\_height = sizeY;  
delete this.onEnterFrame;  
}  
};  
};

And ee ba gum tis raining cats and dogs.  
Yeh we had storms last night but not today. Alaways rains in Manchester, you should move UP to the drier side of the Pennines. :lol:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 3, 2004, 4:39pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/13 "2004-08-03T16:39:08Z")

</div>

Thanks for that stringy!

Oh the rain. I can’t move away from Manchester, us manc melt away if we don’t have a constant supply of rain hitting us from above! We’ve become genetically dependant on it!

What does Math.abs mean? Is that Absolute or something? I’m still pretty new to actionscript. I need a book!

Ads.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 3, 2004, 4:51pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/14 "2004-08-03T16:51:31Z")

</div>

yes it does, just makes everything in the brackets positive,if it were negative then the condition would always be true.Also,where it says Math.abs(sizeY-this.\_height)\<1 etc, try changing the value to .1 and see how much longer it runs.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 3, 2004, 8:20pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/15 "2004-08-03T20:20:55Z")

</div>

Hey Stringy,  
Do you know how they did this menu? [http://www.mn8studio.com](http://www.mn8studio.com)  
Not the main follow, but if you hit the print section you can see where the numbers are. How was that made? Where it follows that mouse and all stay on the number?

Thanks !!!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 3, 2004, 8:58pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/16 "2004-08-03T20:58:01Z")

</div>

> [@Playapierce](#):
>
> Hey Stringy,  
> Do you know how they did this menu? [http://www.mn8studio.com](http://www.mn8studio.com)  
> Not the main follow, but if you hit the print section you can see where the numbers are. How was that made? Where it follows that mouse and all stay on the number?
> 
> Thanks !!!

its just a transparent image moving over the buttons.They probably assign a variable a value of true whenever a button has been pressed and then false after the movie has loaded. The rollOver only works when not true. Have a look at this [http://www.gifsrus.com/testfile/smoothmovementbuttonsmenu.fla](http://www.gifsrus.com/testfile/smoothmovementbuttonsmenu.fla)  
whenever a buton is pressed, pressed = true when the mc stops playing, pressed = false.The rollover only works when pressed !=true

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 3, 2004, 9:34pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/17 "2004-08-03T21:34:34Z")

</div>

Thanks Stringy!!!  
I am going to play with it.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [August 3, 2004, 9:40pm UTC](https://forum.kirupa.com/t/width-and-position-easing/58300/18 "2004-08-03T21:40:31Z")

</div>

> [@Playapierce](#):
>
> Thanks Stringy!!!  
> I am going to play with it.

you are welcome and playaway