Progress bar-like animation

[eugener2418576]

Hi there,

I have a sort of 'progress bar' or 'loading bar' that is higher or lower (scales Y) depending on the x-position of the slider.

The 'progress bar' is named 'meter2' and inside of 'meter2' is the bar itself named 'inner'. When the slider is moved from left to right (which changes the x-co ords), the 'inner' should scale Y accordingly.

So far I have almost made it happen. But for some reason when I use 'scaleY' it scales from the middle so both sides of the 'inner' are scaled instead of just the top part.

Also I think my maths is a little off.

Here's my code the part of my code that's most important.

function onMouseMove1(evt){
var item = evt.currentTarget;
var meter = root.meter2.inner;
if (item.drag){
item.x = Math.max(bounds.x, Math.min(bounds.x + bounds.width - handleWidth, evt.stageX));
meter.scaleY = item.x * 0.1;
var dif = person.x - item.x;
if(dif < 250){
finished = true;
}
}
}

Any help is greatly appreciated!

Cheers.

[ClayUUID]

So moving the registration point of the bar doesn't work?

[eugener2418576]

Hi Clay,

Unfortunately it doesn't help.

The meter2.inner scales from the center of the movie clip.. instead of the bottom or top.

Here's my project if it helps at all.

https://drive.google.com/open?id=1Q5WfXa2pSZAHpqVnE17Rw78i90bFMi6-

Cheers

[eugener2418576]

Would it be wise to have the movie clip 'inner' to be full height of the meter2? And then on load make it smaller or something.. Otherwise how do I tell it to fill the full 'meter2' clip?