0 Replies Latest reply on Aug 20, 2017 6:08 AM by Topu252

    touchmove event is not working, can anyone help please?

    Topu252 Level 1

      Hi,
      I am a graphic designer with limited code skill using the latest Edge Animate CC 2015. I wanted to achieve a horizontal parallax effect by moving my stage (actually a year based timeline) with touch/mouse in a kiosk touchscreen (run by windows touchscreen laptop. I don't want any scroll bar to appear on screen. I watched Paul Trani's parallax effect video on youtube and tried the following...

       

       

      On compositionReady code window...

       

      this.onMove=function(posX, posY){

      timelinecontrol = Number(posX)*2.5;

      console.log(timelinecontrol);

      sym.stop(timelinecontrol);

      }

       

      On touchmove code window...

       

      this.onMove (e.pageX, e.pageY);

       

      But it didn't work with the touchmove event. However, when I put the last line in mousemove code window like paul's original video, it worked as usual.

       

      For record, i have the following script installed,

       

       

      jquery-ui-1.10.4.min.js

      jquery-mobile-1.4.2.min.js
      jquery.ui.touch-punch.min.js
      jquery-2.0.3.min.js

       

       

      Do you think not using any updated script causing this problem? Is there any HTML 5 incompatibility issue with certain browsers/platform?

       

      I also tried the following code from adobe forum...

       

      $(window).on "mousemove touchmove", (e) ->

        touch = undefined

        if e.originalEvent.touches

          touch = e.originalEvent.touches[0]

        pos_x = e.pageX or touch.pageX

        pos_y = e.pageY or touch.pageY

       

      But Edge found system syntax error on the first line. Any suggestion how can I adopt this on the latest Edge Animate? I tried 'stage' in place or 'window' but failed.

       

      After touchmove failed, I used swiperight and swipeleft to advance the timeline/stage 300ms at a time to mimic the touchmove events (like directly dragging the stage/timeline left or right).

       

       

      Code on swipeleft...

       


      var pos = sym.getPosition()

       

      if (pos == 3000){

      sym.stop();

      }

      else

      {

      sym.play(pos + 300);

           sym.stop();

      }

       

      Code on swiperight...

       

       

      var pos = sym.getPosition()

       

      if (pos == 0){

      sym.stop();

      }

      else

      {

      sym.playReverse(pos - 300);

           sym.stop();

      }

       

       

      But it only works well on android chrome browser, that too on certain devices. ipad safari keeps reloading the animation after 2-3 swipe! I used big (more than 1024x1024px) SVG files in the animation and Edge gave me a warning. Is this causing problems? Then why android chrome is working fine?   Do you guys think I should use draggable event for the stage instead?

       

      Another question... I have links on the stage on the year timeline that triggers popup history dialogue boxes by touchstart. if I use touchmove on the stage on touchstart event, should it interfere with the links triggered by touch as well, since Edge Animate's stage is the top most layer by default? Moreover, when I move the timeline, any opened popup dialogue box disappears (the box symbols are 'always off' by default) . Is there a rule that when a hotspot moves, the symbols it triggers also must goes back to its 'display off' position?   

       

       

      Please help. Thanks in advance.