Instagram carousel build in Animate CC

[MarkSmit]

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.

[Vladin M. Mitov]

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.

[MarkSmit]

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.

[Vladin M. Mitov]

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

[JoãoCésar]

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

[MarkSmit]

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

[JoãoCésar]

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

[MarkSmit]

Wow thanks João! This will help a lot. I'm gonna dive into it!

Cheers,

Mark

[JoãoCésar]

Fantastic! You're welcome!