Skip to main content
F
FlatChat
Inspiring
February 11, 2022
Answered

HTML5 - Press button to move graphic symbol horizontally

  • February 11, 2022
  • 1 reply
  • 1198 views

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 has been closed for replies.
    Correct answer kglad

    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.

    1 reply

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    February 11, 2022

    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();

    }

      F
      FlatChatAuthor
      Inspiring
      February 11, 2022

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

      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      February 11, 2022

      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;

      }

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