26 Replies Latest reply on Sep 14, 2017 8:37 AM by montana321 Branched to a new discussion.

    Controlling the currentframe of a movieclip based off of position of another movieclip on the stage - html createjs

    keelym35886708 Level 1

      Can you use one movieclip's position to control the frame number of another movieclip?

       

      I have two movieclip's on my stage - one called 'handle' and one called 'plane'. The plane MC has 63 frames in it and I would like to move through the frames by dragging the handle MC up and down. I have already set up a bounding box for the 'handle' and set it up to be able to drag it up and down along the y axis with this code: (thanks to another forum user for helping me with this code in an earlier post: Createjs - dragging an object within a bounding box )

      var handleHeight = 20; //actually half the height
      var bounds = {x:623, y:212, width:143, height:283};
      
      
      var sliderBoundary = new createjs.Shape();
      sliderBoundary.graphics.beginStroke("#999")
      .setStrokeStyle(2)
      .drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
      this.stage.addChild(sliderBoundary);
      
      
      this.handle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));
      
      
      function fl_MouseClickHandler_2(evt){
      evt.currentTarget.y = Math.max(bounds.y + handleHeight, Math.min(bounds.y + bounds.height - handleHeight, evt.stageY));
      }
      
      
      
      this.handle.x = 704;
      this.handle.y = bounds.y + bounds.height / 2;
      

       

      From here, I've figured out how to adjust the 'plane' MC frame based off of static positions of the handle - I have a function for when the handle is at the top of the bounding box and one for when it's at the bottom, here is how that code looks:

       

      this.stage.addEventListener("tick", planetop.bind(this));
      function planetop(){
      if (this.handle.y <= 233){
      this.lift.plane.gotoAndStop(63);
      this.lift.heli.gotoAndStop(63);
      }
      }
      
      
      this.stage.addEventListener("tick", planebottom.bind(this));
      function planebottom(){
      if (this.handle.y >= 472) {
      this.lift.plane.gotoAndStop(61);
      this.lift.heli.gotoAndStop(61);
      }
      }
      

       

      but what I would like to do is have 'plane' (I have another MC called 'heli', the user can toggle between the two with some other buttons) move evenly through it's 63 frames based on the position of the 'handle' y axis - having it stop at frame 63 when the handle is at the top and stop at frame 1 when the handle is at the bottom (I hope this makes sense). I'm not a coder and not very good with math so any help with how to accomplish this would be much appreciated!

       

       

      Thanks.