Skip to main content
FlatChat
Inspiring
Feb 11, 2022 1:55 AM UTC
Answered

HTML5 - Press button to move graphic symbol horizontally

New to Animate.

 

I have a button symbol on stage and a graphic symbol.  I want to press the button to move the graphic programatically in the positive direction in the X axis.  The graphic needs to move while the button is pressed up to a certain point, then stop,  

 

How should that be done?  Code please.

    This topic is closed to new replies. Start a new post to keep the conversation going.
    kglad
    kgladCorrect answer
    Community Expert
    Feb 11, 2022 4:31 AM UTC

    Yes, you mean the button.  I copied the name of that button from the library and pasted it into the code.  It's the same name - Button_Left_Frame_Move_Right


    library name is irrelevant.  that's the symbol name NOT the instance name.  

     

    the instance name ( in the properties panel) needs to match the code reference.

     

    if you don't understand the properties panel you need to pause and learn a little about it.

    View reply

    26 replies

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    Feb 11, 2022 2:13 AM UTC

    there are a number of ways to do that.  one way would be to tween your graphic symbol's position (on the symbol's timeline), place a this.stop() on frame 0 of the symbol's timeline and use:

     

    this.yourbuttoninstancename.addEventListener("mousedown",downF.bind(this));

    this.yourbuttoninstancename.addEventListener("pressup",upF.bind(this));

     

    function downF(){

    this.yoursymbolinstancename.play();

    }

    function upF(){

    this.yoursymbolinstancename.stop();

    }

    Translate
      FlatChatAuthor
      Inspiring
      Feb 11, 2022 2:16 AM UTC

      @kglad   Thanks for the reply.   Is there a way, in HTM5/JavaScript, to move the graphic in pixels programatically rather than tweening?

      Translate
      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      Feb 11, 2022 2:22 AM UTC

      yes, you'd use the same code as shown but instead of play() and stop(), in the downF and upF, you'd start a loop (ie, ticker) in upF that calls another function which updates your symbol's position and in upF you remove that loop;

       

      var tl = this;

      function downF(){

      createjs.Ticker.addEventListener("tick",updateF);

      }

      function upF(){

      createjs.Ticker.removeEventListener("tick",updateF);

      }

      function updateF(){

      tl.symbolinstance.x+=whatever;

      tl.symbolinstance.y+=whatever else;

      }

      Translate
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices