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:
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
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:
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
...Copy link to clipboard
Copied
Could you create a basic project that runs poorly for you, and upload it?
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
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.
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)
Copy link to clipboard
Copied
The HTML5 version shows an error when loading the page. Can you post the FLA?
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".
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!
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.
Copy link to clipboard
Copied
It's called a conspiracy. I'm not kidding.
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.
Copy link to clipboard
Copied
Yeah, it's absurd... but everyone has been convinced that 2 + 2 = 5 and there is no going back from that. Dark times.
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:
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.
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.
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.
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.
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.
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.
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.
Copy link to clipboard
Copied
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
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!
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:
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:
You will need sound turned on to hear what you're supposed to do.
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.
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)
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!!!