Highlighted

Animated sliding screens?

Community Beginner ,
Mar 07, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

226

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Animated sliding screens?

Community Beginner ,
Mar 07, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

227

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 07, 2019 0
Adobe Community Professional ,
Mar 07, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 07, 2019 0
Community Beginner ,
Mar 07, 2019

Copy link to clipboard

Copied

I started playing with that method but I found lots of strange behavior.  For example, if I add mulitple layers as such:

1. Top layer has a cartoon (drawn in Flash).

2.  below that I have the slide layer

3.  bottom layer is my cartoon room background.

I can make the slides animate from 1 to 2 to 3 easily enough, but when I publish the preview the top layer disappears.  I am accustomed to converting nearly everything to movie clip symbols so my cartoon guy is a movie clip.  I assign an action to it to go a frame and play.  When I publish, cartoon guy isn't visible, background layer isn't visible, etc.  Very odd behavior, especially considering I've been working in Flash for 20 years.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 07, 2019 0
Engaged ,
Mar 07, 2019

Copy link to clipboard

Copied

First and foremost, if you have just installed Animate CC recently then...

advancedlayers.jpg

Click CTRL and J then un-tick 'Use Advanced Layers'.

See if that helps first.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 07, 2019 0
Community Beginner ,
Mar 07, 2019

Copy link to clipboard

Copied

Yep, learned that lesson a couple of weeks back when a presentation I had been working on is AS3 stopped working entirely.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 07, 2019 0
Adobe Community Professional ,
Mar 07, 2019

Copy link to clipboard

Copied

Haha.

You're the official turn-off-the-advanced-layers guy, Greg.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 07, 2019 0
Adobe Community Professional ,
Mar 07, 2019

Copy link to clipboard

Copied

Hi again.

This most likely is happening because Export document as texture is checked in the Publish Settings.

Try unchecking that option and see what happens.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 07, 2019 2
Engaged ,
Mar 08, 2019

Copy link to clipboard

Copied

Ha ha I think it appears that way, João! I think I'm obsessed! But so many times I've used the pic it has been a swing and a miss ha ha! Can Adobe just not put me out of my misery and remove it from being default?

I should also add "Also make sure 'Export document as texture' is not ticked in Publish Settings" to that pic!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 08, 2019 1
Community Beginner ,
Mar 08, 2019

Copy link to clipboard

Copied

Yes, that fixed it.  You're a guru.

I need to stop assuming that Animate is Flash...it's an entirely new software in the old software's skin.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 08, 2019 1
Adobe Community Professional ,
Mar 08, 2019

Copy link to clipboard

Copied

Excellent!

This option is useful to boost performance. In the end, you can try using it and see what happens.

You can also exclude symbols from being exported as textures in the same tab.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 08, 2019 0
Community Beginner ,
Mar 08, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 08, 2019 0
Adobe Community Professional ,
Mar 08, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 08, 2019 2
Community Beginner ,
Mar 08, 2019

Copy link to clipboard

Copied

This is EXACTLY what I need!  Amazing help!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 08, 2019 1
Community Beginner ,
Mar 08, 2019

Copy link to clipboard

Copied

This is the barebones idea that I'm working on.

index 

Pay no mind to the cartoon quality...it was copy/pasted from an older version of Flash that is incompatible.


Thanks a ton for your "help".  I say "help" because I didn't do anything. 

I will post a version of this for anyone to use once I'm done with different backgrounds and characters to swap out.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 08, 2019 1
Adobe Community Professional ,
Mar 08, 2019

Copy link to clipboard

Copied

Excellent!

You're welcome!

And great work!

I hope you can find a good use for this demo and hopefully others can also make use of it.

Have a nice weekend!

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 08, 2019 0