3 Replies Latest reply on Jan 13, 2016 10:42 AM by bertjeuh88

    Swiping between videos in Edge Animate

    bertjeuh88 Level 1



      This is my first time using Edge Animate. I have been trying to use it to make a sort of animated, interactive graphic novel.

      How I planned using Edge Animate was to first draw all my animations, then import them into after effects to add effects and export as a .mp4. Then I wanted to import these videos in Edge animate, which has succeeded so far. Each one of these videos is a separate comic panel, I wanted to use edge animate together with hammer.js to create a interactive environment where you can swipe between the separate .mp4 on screen so that you reach through the comic from one animated comic panel to the next.


      Using this technique by tricedesigns : http://www.tricedesigns.com/2013/04/17/enabling-gestures-in-edge-animate-compositions/


      So I made a basic file where I insert 4 of my animations on a page. I set the playback to play on the timeline so I can see where each movie starts and ends. I added stop triggers at the beginning and ending of each playback. And then I tried to add the swipe motion to swipe between the .mp4. But I guess that's not possible. I also tried using the doubletap to return to the beginning of my comp. But I guess I'm not using the right method of going about it, to make this work. I wondered if anyone could get me started in the right direction?


      What I also wanted to do later on was to make for example a animation where we zoom in on something. Then put that in the timeline, so when you use the pinch touch to zoom in, it goes to that specific point in time. Or perhaps the tap function to tap on the screen during and animation to make it "react". Also wanted to add a multi-finger swipe, to swipe between the pages perhaps. All I really need to know to get all these things to work, is how can I let an action like a swipe start the next mp4 in my timeline.


      I started using Edge Animate because I know very little about code, so I guess that's also part of the reason why I'm stuck.


      I would really appreciate your help! This project is my master-project for my masters in graphic design.

      If this doesn't work I'll probably make it in after effects and make it look real. But it would be so awesome to make it actually work!


      Thanks again,



        • 1. Re: Swiping between videos in Edge Animate
          bertjeuh88 Level 1

          I'm trying to figure it out. So far I've been trying to find a solution using symbols where I've nested each separate panel on playback.

          So what I'm trying to do is to skip between labels and using triggers underneath them. Each time a label would be triggered, the symbol i want to link it to would play.

          That's the idea, but I don't really know what I'm doing, it's a throw in the dark.


          I've written this piece of "code" for each trigger/label


          // insert code here











          function init (){



            var element = sym.element[0];

            var hammer = Hammer(element);



            hammer.on("doubletap", function(event) {





            hammer.on("swipeleft", function(event) {





            hammer.on("swiperight", function(event) {







          • 2. Re: Swiping between videos in Edge Animate
            bertjeuh88 Level 1



            What I did was at stop triggers and then right next to it a sym.$("pannel(current)")[0].play(); trigger. So now when you swipe right the animation starts playing and it hits the next stop trigger. What I've added for the moment being is a sym.$("pannel(previous)")[0].pause();. So that when the next animation starts playing the previous one stops. I also added a doubletap that makes the current page reset.


            Now I'm just looking for a way to make the previous animation not pause but stop at the ending of it's animation.


            Can anyone help me with that?


            Also looking for a way to say when I swipe but with multiple fingers, it will skip to the next page. Is there a way to say like when you are on label page 1, go to label page 2, and so on. Without having to say doubletap play symbol("page1") for each page? Like something if you are on page 3 you can swipe to go to page 3-1 or swipe right to go to page 3+1? I have no clue how to say that .


            Any help will be appreciated! I will post all my own findings here aswell!

            • 3. Re: Swiping between videos in Edge Animate
              bertjeuh88 Level 1

              YES! It was pretty easy to get the previous animation to get to it's ending. Just get the duration at 100%.

              sym.$("panel(previous)")[0].currentTime = sym.$("panel(previous)")[0].currentTime + ((100/100) * sym.$("panel(previous)")[0].duration);


              added that in the trigger for the next animation. So the previous animation just stops at its ending!


              Now I just need to still figure out how to add a swipe with multiple fingers in my code...

              All help still appreciated!