• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

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

Contributor ,
Sep 20, 2017 Sep 20, 2017

Copy link to clipboard

Copied

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:

  1. 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
  2. to test a scene (ctrl+enter) takes 1 minute to "render"... in flash/swf it was 1-2!SEC!
  3. The size of the animation in html 5, canvas is 50mb >> in swf:7mb  (no comment)
  4. 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)
  5. 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

Views

3.2K

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
community guidelines

correct answers 1 Correct answer

LEGEND , Sep 20, 2017 Sep 20, 2017

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

...

Votes

Translate

Translate
Contributor ,
Sep 20, 2017 Sep 20, 2017

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Contributor ,
Sep 20, 2017 Sep 20, 2017

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Contributor ,
Sep 20, 2017 Sep 20, 2017

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Contributor ,
Sep 21, 2017 Sep 21, 2017

Copy link to clipboard

Copied

thanks RandomlyFish! but i have to tell you i dont understand your answer....

but let me guess : >> the html5 version fps is ~1frame/sec... i preatty sure that is unbearable slow with or without filters...

if you telling me to do blur effect by fadeing sharp and blurred image, i have to tell you it not nearly looks the same, and that is not the professional, and precise look that i can use in my classes (im teachinhg photogrpahy if i not mentioned already)

Votes

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
community guidelines
LEGEND ,
Sep 20, 2017 Sep 20, 2017

Copy link to clipboard

Copied

The HTML5 version shows an error when loading the page. Can you post the FLA?

Votes

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
community guidelines
Community Expert ,
Sep 20, 2017 Sep 20, 2017

Copy link to clipboard

Copied

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".

Votes

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
community guidelines
Contributor ,
Sep 21, 2017 Sep 21, 2017

Copy link to clipboard

Copied

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!

Votes

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
community guidelines
LEGEND ,
Sep 21, 2017 Sep 21, 2017

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Sep 22, 2017 Sep 22, 2017

Copy link to clipboard

Copied

It's called a conspiracy. I'm not kidding.

Votes

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
community guidelines
Explorer ,
Apr 01, 2018 Apr 01, 2018

Copy link to clipboard

Copied

Joseph, I do not know if it's a conspiracy or it's just the stupidity of the human being.

What they have done is similar to that someone in the industry starts thinking that the best thing is the cars with three wheels, for a series of absurd reasons. And with this decision they force all humanity to change their car ...

Reinventing the wheel for stupid reasons. The problem is that, among all, have made everyone believe that the reasons are logical.

Votes

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
community guidelines
Community Expert ,
Apr 01, 2018 Apr 01, 2018

Copy link to clipboard

Copied

LATEST

Yeah, it's absurd... but everyone has been convinced that 2 + 2 = 5 and there is no going back from that. Dark times.

Votes

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
community guidelines
LEGEND ,
Sep 20, 2017 Sep 20, 2017

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Contributor ,
Sep 21, 2017 Sep 21, 2017

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
LEGEND ,
Sep 21, 2017 Sep 21, 2017

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Contributor ,
Sep 22, 2017 Sep 22, 2017

Copy link to clipboard

Copied

ClayUUID​

with all respect: i strongly disagree >> i dont want to hear anything!! I just want to find a solution(and dont want to waste my time for softtwares IF! they not capable doing simple stuff

Votes

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
community guidelines
Contributor ,
Sep 21, 2017 Sep 21, 2017

Copy link to clipboard

Copied

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!

Votes

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
community guidelines
Mentor ,
Sep 21, 2017 Sep 21, 2017

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
LEGEND ,
Sep 21, 2017 Sep 21, 2017

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Explorer ,
Apr 01, 2018 Apr 01, 2018

Copy link to clipboard

Copied

From my point of view, the key is not the amount of sprites that a virtual machine or a rendering output (example webgl) is capable of executing.

The main problem is the agility of development that allows the whole set of tools and language quality that a Flash type ecosystem provides. This does not exist in a web solution today, which means that the development times for interactive products are greater than in the past and therefore companies that work with short times, stop being competitive.

A simple example: in a similar development using Animate CC as a visual environment, if we export a "free" design (interactive design type tactile POI or educational product), the two fastest ways to solve a development are:

1) Flash (swf or AIR) GPU mode. No need to work with textures and much more agile in development than any webgl solution. The interactive seems fast and agile as the execution begins even on devices, with almost no need to optimize. You can convert vectors to bitmap at runtime in a complete solution without having to export and manage a lot of assets in different environments.

2) Animate CC HTML5 canvas output. The product is perceived as "heavy" just start the execution, (even if we convert vectors to bitmap). It can be optimized to a point but rarely gives the impression of being as agile or as smooth in execution as the first solution. Vectors in canvas are even much slower than in Flash Player. In devices it seems even heavier.

Both have the advantage of being able to use a combination of visual environment to place elements and a solid language when working. But the first solution is better out of the box (without having to do a lot of processes so that everything goes smoothly).

These differences are aggravated when there are a lot of totally different layout interactive screens. Different and complex designs in html5 canvas are very heavy and there are only two options. Load screens into another html (continuity is lost and gives the impression of patching) or through an intelligent loading system but it is too complex to develop, you could not use a visual environment to place elements, and it does not guarantee the same agility of a application based on swf's.

There are lots of web solutions and it is clear that a development can be more optimized in other types of canvas / webgl solutions like the ones you mention, but none is complete and all require more work than we had before. No matter where you look at it, what we have now has not improved, but worsened.

If the only variable needed to develop interactive products was "speed of execution", we all would develop everything in C ++, but this is unthinkable for the profitability of an interactive product company. The important thing is productivity (combined with a good and agile product obviously), but it seems a thing of the past.

In summary: It is not the result, but how and in what time of development you have reached that result.

All this is commented by someone with great development experience in: html5 (responsive dom + canvas), css3, javascript (+ different frameworks), asp, access, sql server, php, mysql, Flash, AS3, Director, Lingo, Unity, C # , etc.

The industry has simply been wrong (maybe because they doesn't give a shit about flash). But more important is that Adobe's shareholders have not wanted to risk. From my point of view in 2010 they had all the win with the very widespread technology, and in a position far superior to the html5 of then.

Votes

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
community guidelines
Contributor ,
Sep 22, 2017 Sep 22, 2017

Copy link to clipboard

Copied

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)

Votes

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
community guidelines
Contributor ,
Sep 22, 2017 Sep 22, 2017

Copy link to clipboard

Copied

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!!!

Votes

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
community guidelines