9 Replies Latest reply on Apr 27, 2011 3:27 PM by kglad

    moving an object vertically using a horizontal slider

    atrzebunia Level 1

      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.

      image.jpg

       

      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;
      }

        • 1. Re: moving an object vertically using a horizontal slider
          kglad Adobe Community Professional & MVP

          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;

          }

          • 2. Re: moving an object vertically using a horizontal slider
            atrzebunia Level 1

            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.

            • 3. Re: moving an object vertically using a horizontal slider
              kglad Adobe Community Professional & MVP

              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;
              }

              1 person found this helpful
              • 4. Re: moving an object vertically using a horizontal slider
                atrzebunia Level 1

                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!

                • 5. Re: moving an object vertically using a horizontal slider
                  kglad Adobe Community Professional & MVP

                  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.

                  • 6. Re: moving an object vertically using a horizontal slider
                    atrzebunia Level 1

                    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.

                    • 7. Re: moving an object vertically using a horizontal slider
                      kglad Adobe Community Professional & MVP

                      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;
                      }

                      • 8. Re: moving an object vertically using a horizontal slider
                        atrzebunia Level 1

                        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;
                        }