Skip to main content
MarkSmit
MarkSmit
Inspiring
Sep 6, 2022 9:52 AM UTC
Question

Instagram carousel build in Animate CC

Is it possible to build a swipe-able carousel in Adobe Animate like on Instagram? So if you swiped the next slide into the canvas it starts to play? And if you swipe it out of the canvas the animation resets?

 

I build a workaround with a on click event. See this example 

 

Would this be possible with createJS. That is the Javascript library Adobe Animate uses I thought.

This topic is closed to new replies. Start a new post to keep the conversation going.

8 replies

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
Sep 8, 2022 1:22 PM UTC

Hi.

 

I'm glad that tutorial is still useful somehow!

 

And thank you, @Vladin M. Mitov, for the mention!

 

Regarding the question, I think you can add a call method to the tween. Like this:

createjs.Tween.get(pages)
.to({x:pages.index * (canvas.width / stage.scaleX)}, pages.transitionDelay, pages.transitionEase)
.call(function(target)
{
	// supposing that you have a instance inside of each page called anim
	target.target.children[Math.abs(target.target.index)].anim.gotoAndPlay(1);
});

 

In this way each animation should play when the tween ends.

 

Please let me know if this is what you're looking for.

 

Regards,

JC

 

 

Translate
    MarkSmit
    MarkSmitAuthor
    Inspiring
    Sep 8, 2022 2:57 PM UTC

    Hi JC,

     

    Thanks for your comment! I'm still a bit of a newbie in JavaScript. Got interested in coding because of web flow and learned the basics of HTML5 and CSS. I now follow JavaScript tutorials so I understand and can implement code snippets like the one you wrote.

     

    At the moment I don't understand what you wrote, but I hope to understand it in the near future and implement it in my project.

     

    Do you have any tips for people like me who want to create interactive animations with JavaScript and Animate CC?

     

    - Mark

    Translate
      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      Sep 8, 2022 3:52 PM UTC

      Awesome, Mark!

       

      I think tutorials and trial and error are a great combination! Just take your time.

       

      And I do have some references I believe will help on your learning journey:

      - Basic AS3 to HTML5 reference: https://helpx.adobe.com/animate/kb/as-to-html5.html;

      - LinkedIn Learning has some great video courses (special mention to Joseph Labrecque): https://www.linkedin.com/learning;

      - Pluralsight also have some great video courses: https://www.pluralsight.com;

      - General tips and tricks in the comment that starts with "Excellent!";

      - Official demos developed by the CreateJS team: https://github.com/CreateJS/AdobeAnimateDemo;

      - Other samples from the CreateJS official account on GitHub: https://github.com/CreateJS; 

      - CreateJS official samples on CodePen: https://codepen.io/createjs; 

      - CreateJS blog: http://blog.createjs.com; 

      - Lanny McNie, from the CreateJS team, samples on JSFiddle: https://jsfiddle.net/user/lannymcnie/fiddles; 

      - This old talk by Grant Skinner, the author of CreateJS: https://www.youtube.com/watch?v=QHudJJLRp-c; 

      - Adobe Animate's official YouTube channel;

      - Martin Melendez's YouTube channel;

      - My repo on GitHub that contains the source codes and files of some games, apps, and other stuff;

      - There's also my YouTube channel;

      - O'Reilly and Packt have lots of books about Flash, AS3, Animate, and so on, in paper or in a subscription fashion.

       

      Please let me know if you need further assistance.

       

      Regards,

      JC

      Translate
      Vladin M. Mitov
      Vladin M. Mitov
      Inspiring
      Sep 6, 2022 11:16 AM UTC

      Hi,

      I don't know what exactly do you want to achieve:
            a) to handle the real swipe event on a touch screen device
            b) to simulate it with mouse drag

      If the case is b), here is an example for similar functionality.



      Translate
      - Vlad: UX and graphic design, Flash user since 1998Member of Flanimate Power Tools team - extensions for character animation
        MarkSmit
        MarkSmitAuthor
        Inspiring
        Sep 6, 2022 12:09 PM UTC

        Hi Vlad, thanks for your fast response!

        Yeah I have watched the HTML5 Swipe Gallery video a while back and I was really excited. It is exactly what I want. But I couldn't figure out how to play an animation if it swiped into the canvas.

         

        I could add a movie clip on for example slide 3, but it would loop for ever and I want it to start playing when it slides into view.

         

        I'm looking for a line of code what says: "when slide in view, play movieclip". Or "when slide in view play from frame "fame_number".

         

        Idk, i'm not a experienced programmer.

        Translate
        Vladin M. Mitov
        Vladin M. Mitov
        Inspiring
        Sep 6, 2022 7:14 PM UTC

        Oh, I just realized that the author of the tutorial is @JoãoCésar17023019 
        I believe that he can help you with more specific advices.

         

         

        Translate
        - Vlad: UX and graphic design, Flash user since 1998Member of Flanimate Power Tools team - extensions for character animation
          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices