Hey!In every two year i try to start to convert my interactive, swf, photography materials to HTML5... becose everybody is killing flash, becouse everbody is cheering HTML5.Today is the day... i opened a fairly simple old as3 .fla file, than i created a new canvas document, i copy pasted some keyframes to the canvas from the old actionscript.I get so wierd result... i have to show you..My experience:i get messages in the output panel: "shadow effect is very expensive and not all options are supported"Come on... ?!?! In 2017.. a drop shadow effect... it sound like troll joketo test a scene (ctrl+enter) takes 1 minute to "render"... in flash/swf it was 1-2!SEC!The size of the animation in html 5, canvas is 50mb >> in swf:7mb (no comment)the play frame rate in browser is 1 or half!!!! frame /second (on a developer ninja hardware, tested in multiple browsers)(and of course the target fps is 24)the !offline! loading time is unbearable...(~10 sec loading from an ssd drive... )So i have to ask... is this a prealpha software (becosue it looks like it cost money, so it is not look like one)Anybody else experiencing the same problems?thanksBen

Inspiring

Answered

Animate CC / Canvas >> is this kind of a prealpha state software?!

Forum|Forum|8 years ago
September 20, 2017
6 replies
4050 views

Hey!

In every two year i try to start to convert my interactive, swf, photography materials to HTML5... becose everybody is killing flash, becouse everbody is cheering HTML5.

Today is the day... i opened a fairly simple old as3 .fla file, than i created a new canvas document, i copy pasted some keyframes to the canvas from the old actionscript.

I get so wierd result... i have to show you..

My experience:

i get messages in the output panel: "shadow effect is very expensive and not all options are supported"
Come on... ?!?! In 2017.. a drop shadow effect... it sound like troll joke
to test a scene (ctrl+enter) takes 1 minute to "render"... in flash/swf it was 1-2!SEC!
The size of the animation in html 5, canvas is 50mb >> in swf:7mb (no comment)
the play frame rate in browser is 1 or half!!!! frame /second (on a developer ninja hardware, tested in multiple browsers)(and of course the target fps is 24)
the !offline! loading time is unbearable...(~10 sec loading from an ssd drive... )

So i have to ask... is this a prealpha software (becosue it looks like it cost money, so it is not look like one)

Anybody else experiencing the same problems?

thanks

Ben

This topic has been closed for replies.

Correct answer Colin Holgate

The argument about HTML5 being great and Flash being bad is not valid. Steve Jobs was always wrong.

That aside, here are answers to your questions:

i get messages in the output panel: "shadow effect is very expensive and not all options are supported"
Come on... ?!?! In 2017.. a drop shadow effect... it sound like troll joke

Flash achieves some amazing things, Canvas hasn't caught up with all of them, or in some cases the CreateJS team hasn't managed to get a close enough match of the Flash feature. You can do drop shadows in canvas, but only on symbols, not on textfields.

to test a scene (ctrl+enter) takes 1 minute to "render"... in flash/swf it was 1-2!SEC!

You have turned on the create spritesheet option. That can take a long time to create. Even if you plan on using spritessheets in the end you could do your initial testing with that turned off.

The size of the animation in html 5, canvas is 50mb >> in swf:7mb (no comment)

In HTML5 Canvas all bitmaps are external files, and they are PNG or JPEG based on the name in the library. You can optimize the images later on without having to republish. If the JavaScript is huge that may be because you're using a lot of text and shapes that take a lot of space to describe in text, or you are using Motion or custom ease Classic tweens. The way Motion tweens is converted is something that could be improved, so stay with Classic tweens that don't have custom easing, to reduce the JS file size.

the play frame rate in browser is 1 or half!!!! frame /second (on a developer ninja hardware, tested in multiple browsers)(and of course the target fps is 24)

HTML5 Canvas can be slow, especially if the canvas is huge. Also there's something wrong with the responsive scaling used by Animate, try without making it responsive to see if that makes a difference.

the !offline! loading time is unbearable...(~10 sec loading from an ssd drive... )

Optimizing the graphics will help, but there is also something else you can change. By default the maxconnections is set to 1, setting that to 6 can make a page load 6 times faster. Shouldn't affect local loading so much, but optimizing the images would help a bit. Also, in publish settings there is a checkbox for using hosted libraries, you could uncheck that to get local versions of the libraries, which would save your page having to go and download those before even beginning to load the page.

photogyulaiAuthor

Inspiring

can anybody help me out with some example .fla ??!

with this wegGL , canvas, ease js stuff or just with some canvas/js example codes

more faster and easier to learn when i have an example!

(what i usually use in my projects >> gotoAndPlay/stop stuff, sliders to controll the frame of an animation, or alphachannel, ot movement)

it would be very appreciated!!!

photogyulaiAuthor

Inspiring

thank you for all your help!

i haave to look into things that you wrote!

If i have to study new things is not bad (if you want to teach, you have to learn first :-)

My only concern is that there are some conflict in your comments (sorry if im wrong)

but some of you say the canvas are not complete yet, some of you say it is widely used in many projects

i have to find out.... it looks difficult with all that magic that you wrote (webgl, ease js and stuff)

photogyulaiAuthor

Inspiring

thanks the comments guys! i appreciete it...

i will upload an .fla file (just gime some time)

BUT

let me ask you! Is there anybody here who use this canvas stuff to anything.... ?!?!?!?
so far i looks like a very-very-very compromissed trade... saddly compromissed!!

Are there any future proof develop software for teachers who wants -again- futureproof their interactive stuff!
Thank you all!

rayek.elfin

Legend

photogyulai wrote
BUT
let me ask you! Is there anybody here who use this canvas stuff to anything.... ?!?!?!?
so far i looks like a very-very-very compromissed trade... saddly compromissed!!
Are there any future proof develop software for teachers who wants -again- futureproof their interactive stuff!
Thank you all!

Let's put a couple things straight here:

Canvas is used by many developers, and some quite amazing software is based on Canvas/html/css/javascript: Storyboarder, Gravit Designer, GitKraken, Construct 3, and many more. Check out the list at Apps | Electron
Performance is very VERY good with canvas and browsers. Compare Bunny Benchmarks for the web Notice that direct Flash swf output is quite bad.
Construct 3 is a browser-based, canvas-based game dev engine that runs games almost as fast as native code in a browser.
Canvas can be completely webgl accelerated. If done well, performance is excellent. Turn off webgl or run canvas on a device without any webgl support, and performance is not that great.
The one thing the Flash player/SWF is/was great with: video playing and video playing controls. Videos with alpha channels. Canvas/html/css/js is just not very suitable for this at the moment.
Any Flash/SWF game developer will tell you that if you need performance, all your assets must be bitmap. Vector is slow as molasses. Vector (SVG) is supported in Canvas, but similarly slow. Vector-based graphics are costly in terms of rendering/processing speed, no matter the platform.
Animate CC's canvas implementation is, as far as I am aware, motivated by Adobe's need to provide a banner/advertising platform to replace SWF. It is a relatively young implementation, and not optimized very well for pure performance. Compare Construct, which is backed up by years and years of canvas development and optimization. Those guys live and breath canvas and browser performance optimization. I doubt that Flash Animate CC's developers possess even a tenth of that experience. In short, Canvas output from Animate CC is still relatively young compared. It'll get better hopefully
No matter the engine used, things may grind to a halt when the user doesn't know how to optimize assets. For example, cachasbitmap for static objects can be very memory hungry. And I have heard that everything in Animate CC's canvas output is pre-instantiated, which means longer timelines may be problematic during conversion.
Finally, no development software has ever been future proof so far - excepting core programming languages such as C/C++. Director: gone. SWF: gone (soon). Just how things are. Learn to code in C++ if you need (relative) future-proof security.

Colin Holgate

Inspiring

That was a lot to read! I don't have anything really useful to say, but wanted to add:

Storyboarder is amazing. I didn't know it used Canvas.

If you wanted to use WebGL to optimize Canvas, you need not use Canvas at all. Animate can publish straight to WebGL. I'm not sure if it still then uses Canvas, or goes straight to the GPU, which is what I think it should do.

The CreateJS team were working on a WebGL version. If they finish that you would be able to use all the CreateJS syntax, only playback in WebGL instead of Canvas.

Here's a canvas thing I did, that isn't quite an ad banner. But it also isn't anywhere near as demanding as Ben's app:

YellowHatParty

You will need sound turned on to hear what you're supposed to do.

Colin HolgateCorrect answer

Inspiring

The argument about HTML5 being great and Flash being bad is not valid. Steve Jobs was always wrong.

That aside, here are answers to your questions:

i get messages in the output panel: "shadow effect is very expensive and not all options are supported"
Come on... ?!?! In 2017.. a drop shadow effect... it sound like troll joke

Flash achieves some amazing things, Canvas hasn't caught up with all of them, or in some cases the CreateJS team hasn't managed to get a close enough match of the Flash feature. You can do drop shadows in canvas, but only on symbols, not on textfields.

to test a scene (ctrl+enter) takes 1 minute to "render"... in flash/swf it was 1-2!SEC!

You have turned on the create spritesheet option. That can take a long time to create. Even if you plan on using spritessheets in the end you could do your initial testing with that turned off.

The size of the animation in html 5, canvas is 50mb >> in swf:7mb (no comment)

In HTML5 Canvas all bitmaps are external files, and they are PNG or JPEG based on the name in the library. You can optimize the images later on without having to republish. If the JavaScript is huge that may be because you're using a lot of text and shapes that take a lot of space to describe in text, or you are using Motion or custom ease Classic tweens. The way Motion tweens is converted is something that could be improved, so stay with Classic tweens that don't have custom easing, to reduce the JS file size.

the play frame rate in browser is 1 or half!!!! frame /second (on a developer ninja hardware, tested in multiple browsers)(and of course the target fps is 24)

HTML5 Canvas can be slow, especially if the canvas is huge. Also there's something wrong with the responsive scaling used by Animate, try without making it responsive to see if that makes a difference.

the !offline! loading time is unbearable...(~10 sec loading from an ssd drive... )

Optimizing the graphics will help, but there is also something else you can change. By default the maxconnections is set to 1, setting that to 6 can make a page load 6 times faster. Shouldn't affect local loading so much, but optimizing the images would help a bit. Also, in publish settings there is a checkbox for using hosted libraries, you could uncheck that to get local versions of the libraries, which would save your page having to go and download those before even beginning to load the page.

photogyulaiAuthor

Inspiring

Thanks Colin! I will look in to this things it look kinda helpfull, but your comments sound like an answer: "yes animate cc(and/or canvas) is a prealpha stuff"

i dont like Steve Jobs policy as well.

about the effect/filter topic:

let me tell you >> it is preaty f....n ridicilous to not have drop shadow as an option on text (or anywhere)

and i feel the same when we talk about blur, glow.... this is so simple css stuff... "we" already landed on an asteriod, we have automatic research lab on the mars... but the "holly HTML5/canvas cannot get drop shadow :-DDD

thank you the tipp about the spritesheet stuff (but again >> spritesheeet ....!??!?! gif like animation in 2017... when there was 20 years ago a vector based modern stuff called flash.... what is happening here?!? :-)

today pc's are able to play fullHD materialls without a hickup. but canvas had problem with an ~1000x700 mostly stillframe animation?!?

For me it looks like it has....

so no thanks... that is unuseable.

C

ClayUUID

Legend

photogyulai wrote
Thanks Colin! I will look in to this things it look kinda helpfull, but your comments sound like an answer: "yes animate cc(and/or canvas) is a prealpha stuff"

No, that's not what he said at all. That's what you want to hear.

Joseph Labrecque

Community Expert

To be fair to Animate CC - it has to work within limitations of HTML and the Web Browsers. Some things that work very well in Flash Player work completely different or not at all when targeting the "open web".

photogyulaiAuthor

Inspiring

okay Joseph thank you! but how it is possible that every browser, company started to block and/or unsupport flash... but the "new and better" technology it is not capable for the same performance and,or features.
now i hear everhywhere "html5 is faster, better, easier, smalller" BUT the last decade when i tried to convert manually my swf stuff to html5/js/canvas stuff it looked like slower, much harder, dramaticcaly less feathures, bigger size, somethimes with more cpu/gpu usage on the same animation.
thanks if anybody had any thoughts!

Colin Holgate

Inspiring

It's plugins that browser makers stopped supporting. Flash was an exception, and Google and Microsoft still build Flash Player into their browsers. Firefox and Safari both show the user a request whenever any plugin content comes up. Chrome started doing that recently too. Adobe recently announced they would stop development of the Flash Player plugin at the end of 2020, and the other companies also announced continued support for Flash Player until that time. Since then Microsoft have said they will phase it out over time before then.

So, HTML5 has 3 years and 3 months to get to be as good as Flash Player. Hopefully filters and other things you take for granted will be supported by all browsers by then. In the meantime you can use Flash Player, or restrict your features to be able to work in HTML5 desktop, and even more to work on mobile.

R

RandomlyFish

Inspiring

Could you create a basic project that runs poorly for you, and upload it?

photogyulaiAuthor

Inspiring

Of course!

i uploaded some material fo you!

Here you go:

this is the html5 canvas version:

http://www.fotobetyar.hu/html5/auto_fokusz_1_1.html

ON THIS ONE EVERY BIT OF SCRIPT IS DELETED (so it is basiccaly an animation)

here are a flash/swf example:

http://www.fotobetyar.hu/flash/

this is the original... here you have to press the play button to see the animation

R

RandomlyFish

Inspiring

How does it run without the filters? If you are using blur filters on the images, you could replicate that effect by having one sharp image and one blurred image and then tween so that one turns visible and the other turns invisible.

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