Animated sliding screens?

Question

Years ago I created an animate Flash portfolio in AS2. I will post a link from my home computer (I am at work and our firewall prevents it).

In this portfolio, I had a cartoon version of myself on the left side and he was standing in a cartoon room next to a big white screen. The screen had welcome text on it.

Below the screens were two large arrows..forward and backward nav. When the user would click forward the screen would slide out to the left while a new screen would slide in from the right. If you hit the back arrow the reverse would happen. Each screen was a separate SWF that was stored in a "pic" folder. I could add as many screens as I wanted in the folder and the presentation would automatically load the next.

You can see a good example of what I'm hoping to accomplish by checking our reveal.js. https://revealjs.com/#/

I've created a version in reveal.js but it just isn't the same for graphics.

I've been thinking of re-creating this in HTML5 canvas, but can find even a smidge of a tutorial. The tutorial and template files used to be really popular in Flash, but with Animate it's really hard to find good pointers.

If anyone could think about this and either point me in the right direction or even collaborate on making this slideshow file, I would be glad to trade for cartoon work.

I also intend to make the finished product public for anyone that wants to use it.

JoãoCésar17023019 · Accepted Answer

Ok, one last bit to figure out and and I should be all set to recreate this portfolio in HTML5 Canvas.

Is there a way in Animate CC to play in reverse? In my movie I have next and previous buttons. You can hit forward to go to the next slide or backward to go to the previous. I am using the timeline animation with classic tweens to show my slides. It's easy enough to hit the "next" button and go to the next frame and play, but how can I hit the "previous" button and animate the previous slide back into the screen?

Certainly.

You can use TweenJS.

Here is an example:

JS code:

var tl = this;
var nextButton = tl.nextButton;
var prevButton = tl.prevButton;
tl.frame = tl.currentFrame;
tl.counter = 0;
tl.totalSlides = Object.keys(tl.timeline._labels).length;
tl.start = function()
{
    tl.stop();
    if (!tl.started)
    {
        tl.frame = tl.currentFrame;
        tl.transitionDuration = 500;
        tl.transitionEase = createjs.Ease.sineInOut;
       
        nextButton.on("click", tl.nextSlide);
        prevButton.on("click", tl.prevSlide);
       
        tl.started = true;
    }
};
tl.nextSlide = function(e)
{
    tl.counter = Math.min(++tl.counter, tl.totalSlides - 1);
    tl.navigate(tl.timeline._labels["slide" + tl.counter], tl.transitionDuration, tl.transitionEase);
};
tl.prevSlide = function(e)
{
    tl.counter = Math.max(--tl.counter, 0);
    tl.navigate(tl.timeline._labels["slide" + tl.counter], tl.transitionDuration, tl.transitionEase);
};
tl.navigate = function(destination, duration, ease)
{
    createjs.Tween
        .get(tl)
        .to({frame:destination}, duration, ease)
        .addEventListener("change", tl.changeHandler);
};
tl.changeHandler = function(e)
{
    tl.gotoAndStop(Math.ceil(tl.frame));
};
tl.start();

FLA download:

animate_cc_html5_canvas_slideshow.zip - Google Drive

Regards,

JC

JoãoCésar17023019 · Answer

Hi.I don't know how dynamic or featured you want your slidewhow, but the most direct and basic way or creating a presentation in Animate is to setup your slides in individual frames inside of Movie Clips or Graphics instances and then animate the transitions with tweens.Things won't be so different if you have already worked with Flash.Please let us know what you think or if you need further assistance.Regards,JC

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded