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.
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", t
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
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.
Copy link to clipboard
Copied
First and foremost, if you have just installed Animate CC recently then...
Click CTRL and J then un-tick 'Use Advanced Layers'.
See if that helps first.
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.
Copy link to clipboard
Copied
Haha.
You're the official turn-off-the-advanced-layers guy, Greg.
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!
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
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.
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
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?
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
Copy link to clipboard
Copied
This is EXACTLY what I need! Amazing help!
Copy link to clipboard
Copied
This is the barebones idea that I'm working on.
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.
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