moving an object vertically using a horizontal slider

[atrzebunia]

So, I've been struggling with this for hours.  I have a button, a slider (yellow triangle) that moves horizontally within a range.  Above the slider is a vertical meter that should move up/down based on the horizontal movement of the slider, i.e. if the slider moves to the left, the meter should rise; if the slider moves right, the meter should fall.  Both objects start at the center of their axis as shown in the image provided.

Here's what I have so far to display the masked meter correctly and to limit the slider to the range of the horizontal axis.  I can't figure out the rest to make the meter move accordingly.  Someone out there for whom this is really easy, please help me through this; talk me through your logic of how to make this work.  Thank you!

//BY THE WAY, THIS IS ACTIONSCRIPT 2

import flash.geom.Rectangle;

stop();

var varMaskRect:Rectangle;
var varMeterContainer:MovieClip;
var varMeterBar:MovieClip;
var varMeterMove:String;

createScrollRect = function():Void
{
    var nWidth:Number = mc_MeterContainer.mc_MeterBar._width;
    var nHeight:Number = mc_MeterContainer._height;
       
    varMaskRect = new Rectangle(0, 0, nWidth, nHeight);
    mc_MeterContainer.scrollRect = varMaskRect;
   
    varMeterBar = mc_MeterContainer.mc_MeterBar;
}

createScrollRect();

var varScrollLeftLim:Number = 18.0;
var varScrollRightLim:Number = 153.9;
var varScrollTopLim:Number = 213.25;
var varScrollBottomLim:Number = 213.25;

//I need help here...

scrollContent = function():Void
{
    //I need help here...
}

mc_Slider.onPress = function():Void
{
    startDrag(mc_Slider, false, varScrollLeftLim, varScrollTopLim, varScrollRightLim, varScrollBottomLim);
    mc_Slider.onMouseMove = scrollContent;
}

mc_Slider.onRelease = mc_Slider.onReleaseOutside = function():Void
{
    mc_Slider.stopDrag();
    mc_Slider.onMouseMove = null;
}

[kglad]

your blue rectangle should have it's reg point at its bottom,  you can vary its height from 0 to some max using your slider.

you can use the following to find the relevant parameters:

paramF(yourbluerect,varScrollLeftLim,0,varScrollRightLim:Number,somemax);

function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):void{

mc.m=(y1-y2)/(x1-x2);

mc.b=y1-mc.m*x1;

}

[atrzebunia]

Kglad, thanks for your response, however, I don't understand the code you provided.  I don't know what it means or where to insert it within my code that I provided. See my comments below

paramF(yourbluerect,varScrollLeftLim,0,varScrollRightLim:Number,somema x);

//When you say "yourbluerect," should I replace mc:MovieClip below with my movieclip instance name?

//What does "somema x" mean; what is this parameter referring to?

//The initial position of the blue rectangle (the meter) and the slider must be as seen in the graphic, i.e. starting in the middle of their respective axis.

// I see you've defined a function, but I don't know what it does. Can you talk me through it?

//Where in my code would I insert this function and where would I call it? terminate it?

function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):void{

mc.m=(y1-y2)/(x1-x2);

mc.b=y1-mc.m*x1;

}

Thank you.

[kglad]

let me try an make this easier for you:

1.  assign your blue rect an instance name, eg blue_mc.

2.  make sure its reg point is at its bottom

3.  make sure your unscaled rectangle extends to the top of the meter.  ie, on-stage it's at the max.

4.  copy and paste the following in place of the code you showed

///////////// change nothing below ////////////////////////

paramF(blue_mc,varScrollLeftLim,0,varScrollRightLim,1);
scrollContent();

scrollContent = function():Void{
   blue_mc.scaleY=blue_mc.m*mc_Slider._x+blue_mc.b;
}

mc_Slider.onPress = function():Void{
    startDrag(mc_Slider, false, varScrollLeftLim, varScrollTopLim, varScrollRightLim, varScrollBottomLim);
    mc_Slider.onMouseMove = scrollContent;
}

mc_Slider.onRelease = mc_Slider.onReleaseOutside = function():Void{
    mc_Slider.stopDrag();
    mc_Slider.onMouseMove = null;
}

function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):void{
mc.m=(y1-y2)/(x1-x2);
mc.b=y1-mc.m*x1;
}

[atrzebunia]

Kglad, I thought it would help for you to have the .fla file with this simple animation to test your code.  I've updated my code as you suggested and while mc_Slider works within the boundaries I set, blue_mc (the meter bar) does not move at all.

Here's the link to download the .fla:

http://www.warnerdevelopment.com/Adobe_d7g8b9/blue_mc.fla

Again, thanks so much for your help!

[kglad]

i don't download and correct files unless i'm hired.

you should be able to correct this with hiring anyone (unless you're in a hurry).  you just need to check your references to blue_mc.

you can always use the trace() function to pinpoint the problem.

[atrzebunia]

Kglad, I understand.  I only provided the file so that you'd have something to test your code with.  I wouldn't need you to send the fixed file back to me - just the code as you have done here.

1. My reference to blue_mc is correct.  I just changed "..._scaleY" to "..._yscale" and blue_mc disappears when I move the slider, but I can see that it barely moves a few pixels up when I move the slider to the very right.
   
2. Is there a difference between using mc.b vs. mc.some other letter?  The letter "b" is highlighted in blue which would mean that it's reserved for something else in AS2.  I changed it to "n" as in mc.n with no luck.
3. Also, the multiplication asterisk turns blue when there is a space before and after it, as in the last statement in the code:

          mc.n = y1 - mc.m * x1; vs.

          mc.n=y1-mc.m*x1

          This makes no difference in how the animation behaves.

I do appreciate your help on this.  It's the only item in my 1.5hr. eLearning course that is not working properly.

[kglad · Accepted solution]

oops, i mixed as3 in there:

1.  assign your blue rect an instance name, eg blue_mc.

2.  make sure its reg point is at its bottom

3.  make sure your unscaled rectangle extends to the top of the meter.  ie, on-stage it's at the max.

4.  copy and paste the following in place of the code you showed

///////////// change nothing below ////////////////////////

paramF(blue_mc,varScrollLeftLim,0,varScrollRightLim,100);
scrollContent();

scrollContent = function():Void{
   blue_mc._yscale=blue_mc.m*mc_Slider._x+blue_mc.b;
}

mc_Slider.onPress = function():Void{
    startDrag(mc_Slider, false, varScrollLeftLim, varScrollTopLim, varScrollRightLim, varScrollBottomLim);
    mc_Slider.onMouseMove = scrollContent;
}

mc_Slider.onRelease = mc_Slider.onReleaseOutside = function():Void{
    mc_Slider.stopDrag();
    mc_Slider.onMouseMove = null;
}

function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):void{
mc.m=(y1-y2)/(x1-x2);
mc.b=y1-mc.m*x1;
}

[atrzebunia]

Kglad, thanks so much!  Replacing AS3 code with AS2 throughout did the trick.  The correct code is:

1.  assign your blue rect an instance name, eg blue_mc.

2.  make sure its reg point is at its bottom

3.  make sure your unscaled rectangle extends to the top of the meter.  ie, on-stage it's at the max.

4.  copy and paste the following in place of the code you showed

///////////// change nothing below ////////////////////////

paramF(blue_mc, varScrollRightLim, 0, varScrollLeftLim, 100);
scrollContent();

scrollContent = function():Void

{
   blue_mc._yscale=blue_mc.m*mc_Slider._x+blue_mc.b;
}

mc_Slider.onPress = function():Void

{
    startDrag(mc_Slider, false, varScrollLeftLim, varScrollTopLim, varScrollRightLim, varScrollBottomLim);
    mc_Slider.onMouseMove = scrollContent;
}

mc_Slider.onRelease = mc_Slider.onReleaseOutside = function():Void

{
    mc_Slider.stopDrag();
    mc_Slider.onMouseMove = null;
}

function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):Void

{
     mc.m=(y1-y2)/(x1-x2);
     mc.b=y1-mc.m*x1;
}

[kglad]

you're welcome.