Width and Position Easing

programming flash
1

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.

2

yes, it’s possible. and not difficult.

http://www.kirupaforum.com/forums/showthread.php?t=62491

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

3

Quickly made but i think its something like what you are looking for 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);
};
}

4

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

5

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

thanks in advance

6

http://www.gifsrus.com/testfile/tweenTo.fla

7

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:


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


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

Have a nice day!
Me.

8

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

9

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.

10

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

11

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.

12

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:

13

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.

14

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.

15

Hey Stringy,
Do you know how they did this menu? 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 !!!

16

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
whenever a buton is pressed, pressed = true when the mc stops playing, pressed = false.The rollover only works when pressed !=true

17

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

18

you are welcome and playaway