html5 animation: Flash CC vs. Edge Animate?

[FritzPablo]

I've been using Flash for many years, and am now creating html5 animations. Just curious, why would I want to use Edge animate to create html5 animation, when I could just make an animation in Flash CC, and then export as html5 canvas? Do both Flash and Edge basically render the same thing (in terms of html/css/js), or are there differences? Thanks!

[sinious]

The edge product focuses exclusively on HTML5 whereas Flash Pro is a mixture of both. If you only need HTML5 animation then you can simply use Edge products. If you ever need to create Flash SWF content then it's nice to have both packed into the larger Flash Pro product.

The two products do differ and I imagine they will continue to do so even more in the future, with edge focusing tightly on JavaScript.

[FritzPablo]

Thanks for the answer! I've worked with both recently, and have been comparing...

The main differences I'm noticing between Flash CC and Edge Animate:

• Flash doesn't export as responsive html, Edge does.
• Flash doesn't accept SVG input, Edge does.

These two factors point to Edge as the better tool for html5 canvas animation. It's a bit unfortunate, though, as Flash is definitely the superior IDE (at least for now). Flash, of course, has all of the drawing/design tools in addition to animation tools, and is overall just a well-developed, intuitive interface. Edge, while still young & growing, surprisingly lacks a few usability tools that are common to other Adobe applications – like the spring-loaded Hand tool on spacebar press, and the Zoom tool. Feels odd not to have those.

It would be great if Flash and Edge Animate were combined into one app!

[sinious]

Never say never but all new products undergo continual updates. You should expect this for both products.

responsive HTML is just a few lines of HTML and CSS you can always adjust yourself. I wouldn't put down the other abilities (Adobe AIR, device apps, kiosks, etc) as worthwhile for those few adjustments. Same goes for SVG. While a great format, it comes at the cost of vector processing power. Based on your needs, ultimately one item will become the biggest problem to fix. If you're crunching tons of cycles on processing SVG but save some bandwidth and gain some flexibility, that may not be worth it in the long run over bitmap.

Your projects (and your future projects) goals are what will ultimately determine what's really better for you.

[noboundaries]

I reckon "It would be great if Flash and Edge Animate were combined into one app!" from FritzPablo

Especially much helpful for developers. Some other edge tools like Reflow too could be grouped with this.  Developer life would be easy if one IDE lives for asset creation (animated, responsive, mobile ready html5 assets) and another for integration.

"I wouldn't put down the other abilities (Adobe AIR, device apps, kiosks, etc) as worthwhile for those few adjustments."

Wouldn't it possible to remove the particular code on bundling for targeted publishes?

Isolating the tools for particular needs is good idea. However, the expected outcome on most of the requirements includes all  ie., animated, responsive, mobile ready html5 assets.

best regards,

[sinious]

Flash creates 'compiled' output the most. SWF, EXE, DMG, IPA, APK, etc. Those formats are sophisticated and very varied. To me, Flash is going out of the box in the realm of HTML5 Canvas to begin with. I think it confuses developers entirely who expect ActionScript and get JavaScript instead. If anything, I think HTML5/Canvas should be removed from the tool and handed solely to Edge Animate.

[noboundaries]

Okay, lets keep Flash is altogether different and capable to generate executable.  But the single IDE still can produce output for different devices when comes to Big Screens(SWF, EXE, AIR), Mobile Apps (AIR), (AIR)Android APKs. Even it generates HTML 5 output for now.

Can we get like ONE EDGE IDE to generate HTML 5 ( Animated, Responsive, Mobile Ready) for different devices?

By the way, It looks the newer version of Flash CC is being added with more html features like WebGL/SVG in addition with HTML 5 Canvas.

best regards,

[sinious]

As everything matures, since multiple products can make usage of it (Muse, Edge Animate, Dreamweaver, Flash, Captivate, etc) I see no reason they won't take the unified exporter route. Although anyone that has exported video from Flash knows if you really want all the detailed 'options' for exporting video, Flash won't provide those. You get the basics. I feel they'll leave the details where they belong (Dreamweaver, Edge Animate, etc) and leave the basics as an addon for the rest. The same old right tool for the job mentality.

[noboundaries]

Right tool for the job mentality.

Probably as come from the developer background, looking for one IDE for HTML 5 development like Eclipse (Covers most of my Java needs also Android), MS Visual studio(MS), xCode(Apple). From the initial trials, looks  Flash CC &  edge CC tools would make development easy without writing 1000 lines of code to create animated HTML 5 content. However, still couldn't quite convinced on that, I have to use 3 to 4 tools to get the complete HTML5 output that could be used on integration.

best regards,

[sinious]

SWF isn't illegal to use so if you're talking about making quick light weight animations, you can always still use Flash. If you need device support and/or simply just want to use JavaScript animation, then I think your best tool is always going to be a combo. A good grasp of the JavaScript language paired with a tool, like either Flash Pro or Edge Animate with CreateJS. The timeline animation and sprite sheet generation alone makes it a worthy tool. It's also only going to integrate tighter with CreateJS. Adobe sponsors them. Adobe is as good for this as Eclipse (I use for AS, PHP, JS, Java, CSS, etc) is for anything else. There really isn't much competition outside hand coding with a framework, like CreateJS/EaselJS.

[noboundaries]

I can't take SWF as requires device support for mobile users. Your recommendation is to use combo on this, okay then. Probably that may be the best from the available on this scenario.

If device support is the only concern to lead for combo, flash CC IDE can be used to generate different kind of out puts for multi device compatibility when it comes to executable. Whether it is for SWF, EXE, DMG, IPA, or APK I use the utilities from my familiar Flash IDE environment.

One eclipse environment can be used for AS, PHP, JS, JAVA, CSS.

On initial days on Java development, compared different vendors Eclipse, Netbeans, IntelliJ for the IDE support. Obviously one has advantage on another based on the different needs. However I don't see anybody works with all in this case Eclipse, Netbeans, IntelliJ for day to day development works. Choose one Dev env and stick with that is a general use case when others provide similar outputs.

Here comparing tools that can provides similar/relative outputs from a single Vendor. As all the tools comes from single Vendor, tends to think they can be grouped in a single IDE. Don't want to miss the advantages one has on another.

The team just need HTML5 responsive content that may includes animations.   Finally we can't expect a tool to do all the magics, rather the dev team have to code something!

best regards

[sinious]

I use same same barebones copy of Eclipse with many different programs for many different purposes. That's not what Flash or Edge Animate intend to be, even if they can be.

Much like you'll need to know ActionScript to get anything really exceptional from Flash, you'll need to know JavaScript to get anything exceptional on Canvas. The two tools I was referring to again for device-friendly animation was Edge Animate and a good working knowledge of JavaScript. More so on the latter than anything. Without knowing JavaScript or being familiar with CreateJS, you're stuck to timeline animation, or without being able to produce anything truly interactive or custom.

For your needs, Canvas, I'd stick to Edge Animate and spend some time learning CreateJS/EaselJS. The timeline can save quite a bit of time, but you must learn the JavaScript libraries it depends on.

[Marco_ALEX]

Hi,

i am a newbie web dsigner marco.

So i heard a lot about flash websites and how cool they are and that its a great way to make templates and make some money, but now like you  are discussing here flash vs edge i feel insecure about wich one to aquire to make flash websites.i read this whole discussion betwen you both and i still don't get it. Which one is a better tool to make flash websites, what is the difference, is it a diference like fireworks and photoshop?

[sinious]

"Flash" websites are arguably the Shockwave Flash variant (SWF). This means a site intended to be viewed by a person who has a Flash plugin new enough to play back the content you create. You get to specify which version of Flash the user must have to see your site. At this point you'd be using Flash Professional to create the site. It is the application designed to produce the Flash SWF format with relative ease.

If you haven't already Marco_ALEX, get a trial of Flash Professional CC. That's what you'll need to make Flash websites. There's other tools available (Flash Builder) but they're for more advanced development. I feel you'll find Flash Professional very easy, capable and powerful. Just understand Flash sites, at this point, are not visible on all phones. Only some Android handsets can see them.

[joeomar]

Sorry to ask another really fundamental question but I haven't found a precise response and you're obviously knowledgeable:  I develop fairly simple websites with uncomplicated SWF content.  I subscribe to CC and use Dreamweaver, Photoshop, Lightroom, Illustrator, Flash Pro, and Premier Pro. I have HTML/CSS experience but no HTML5.  I am learning JavaScript (I am an experienced programmer in other languages).  Not surprisingly, clients now want their websites to work on their mobile devices.  Also not surprisingly, I'd like to develop one website (more-or-less) and port it across platforms with minimal hassle. What products / tools / languages should I add ?

[whathehangojango]

Re the topic of this discussion - I'd been wondering the same thing.

Until recently, I assumed there was no real difference other than the interface (I prefer the Edge layout - it's closer to video editing - but wish they would undo the changes made to the code editor since CC 2014. I need as many JavaScript hints as possible!).

But now I'm looking at the area of ebooks and there are problems with Edge animations on iPads, even though they are indeed HTML5. See Adobe discussion here: https://forums.adobe.com/message/6550864

On the one hand, iBooks may have a problem with content in iFrames. (I'm not into coding - but the Adobe guy in the other forum alluded to as much.)

On the other hand, even the GitReader app on iPad won't interact with the Edge animation within an iFrame. ...But it will with Flash & Captivate HTML output.

Could it be that Edge uses its own library of Edge JS, whereas the libraries used by Flash Captivate (CreateJS) are supported by iOS?

Whatever the reason, I'm now investing time in Flash  HTML5 content over Edge.

[whathehangojango]

...and if your animation is for video, Flash is the go too.

[sinious]

I would honestly say that learning JavaScript should be your first move. This language is often thought to be simple but the more you learn about prototypical programming the more you'll learn to respect the flexibility of it. That flex comes with the responsibility of using it correctly.

While large single page applications doesn't really seem to be the concern here, JavaScript's objects and encapsulation (scope) must be fully understood to really get anywhere, regardless what tool you use. Without knowing it, you'd be entirely limited to the IDE's built in capabilities. It's like trying to get professional results out of a watered down Flash, minus ActionScript. It's just not possible or practical.

A good solid understanding of the various CSS3 transforms and animation will be extremely useful because they are already typically GPU accelerated. There's plenty of times you can simply apply a style to an object and get a rather complex, professional effect, with no code, silky smooth on the GPU. JavaScript, CSS3 and Canvas is the ultimate combination.

After a working knowledge of them you'll see the road a bit more clearly. You honestly won't care if you use Flash, Edge Animate, a framework or hand code things in Dreamweaver yourself. It's being on the other side of the basics of JavaScript/CSS3/Canvas that creates the question "which will do it for be, best?". None, really.

If people really don't wish to learn the necessary technologies then my bet is split 50/50. The safer bet is Edge Animate will become the go-to tool. The less safe other half is the Flash runtime will re-emerge on mobile devices who now have the large batteries required to keep a 1ms refresh rate and certainly have more than enough CPU, RAM and GPU to run properly created SWF content. It was always more about the battery than the performance.

Sorry for the late reply, I'm doing my tour duty for a few more weeks. Happy learning!

[whathehangojango]

Thanks for your post, sinious. I couldn't agree more that we should all be comfortable coding with JavaScript and CSS transitions. Unfortunately, lack of time stops many of us from diving in deep so it has to be a slow process squeezed between family and other work commitments. Otherwise we could download Notepad++ or Brackets for free and code merrily away without using Adobe programs. 

I also see your point that HTML, CSS and JavaScript are universal codes - so it shouldn't matter which program is used to put them together - the final code should work the same.

Unfortunately, that doesn't seem to be happening between the output from Flash (canvas) and Edge Animate. It would be good if others could try it out for themselves in case there is an error on my part - but judging from the Adobe discussion noted in my previous post, this is a known problem with Edge. In short, iOS7 isn't working with Edge Animate code in stand-alone docs.

The only difference I can see (when I open the HTML and JS docs in code view) is that Edge relies on EdgeJS while Flash uses the CreateJS library - so perhaps iOS7 won't load the EdgeJS library. (It will play Edge output if it is hosted, by the way - i.e. on a website - but not if it is included in a document, e.g. EPUB3).

Anyway, it is beyond my meagre coding abilities to comment past this - but I thought I'd throw it out there for discussion because something isn't working and as yet, I've seen no clear explanation.

Thanks.

[sinious]

So to be clear, loading off a server works fine in iOS7 but what you appear to want to do is load it locally. Is that correct?

If the latter is true then the paths are what I presume isn't working. For instance the StageWebView only has access to certain content, and that access changes, content to content. For a very well known example, although doesn't apply, is SWF content trying to load other SWF content on a different server required the hosting server to have a crossdomain.xml that gave it permission to load the SWF from other domains. Likewise, you may notice your browsers (especially IE) does not like to load local scripts off your filesystem. You'll get a prompt warning you about it, need to allow it and then refresh the page. This may be what you're coming up against.

A simple way to test that is making a very simple Edge Animate project that just draws a simple object and tweens it. After publishing, take all the HTML/CSS/JS and combine it into a single page. Either load that page into StageWebView (so it doesn't need to load external scripts) or read it into a string and inject it into the StageWebView. If it works, you know you have a local access violation to deal with.

[whathehangojango]

Hi sinious,

I appreciate your ideas. Yes, it could be a problem with paths, but I doubt it and here's why: the same document (same file paths) works elsewhere, just not on the iPad. It's not a complicated project. There are no complex file paths with content on different servers. Here is a quick summary:

- Create basic animation using Edge Animate and publish OAM file. Insert this into InDesign document and publish to EPUB (standalone document).

- Open this document on desktop (e.g. in Chrome Readium) = no problem. Open this document on iPad (e.g. iBooks or Gitden Reader) = problem.

- Try publishing an iBooks widget from Edge Animate and according to the forums, there's a problem with that since iOS7 too. Won't work.

- Try publishing straight web content from Edge Animate, load this onto server, access it via browser. No problem, even on iPad. That's the only reason why I suggested hosted content (specifically, hosted Edge JS library), was okay but that content that required the operating system to unpack the Edge JS library wasn't.
I could be way off the mark, but javascript was alluded to in this post (https://forums.adobe.com/message/6550864 ) as being an issue with iOS.

The topic is in different forums - including Apple's. Quite simply, Edge isn't working in all ways as advertised at this point in time. (e.g. iBooks output).

[MeisterKris]

Adobe Edge outputs to SVG. Flash HTML5 outputs to a canvas object.

I haven't used the latest Edge so I haven't looked at their output code in a while. However the Flash HTML output uses Grant Skinners awesome CreateJS which is very robust for programmer. The biggest drawback of Flash HTML5 output is the text support sucks. They recommend you add your own text content via initializing a DOMElement: EaselJS v0.8.0 API Documentation : DOMElement

Embedded texts work well in Adobe Edge.

----------------

I'd take whatever Grant Skinner works on as gold for what other flash folks should transition to.

I've been using CreateJS in some kiosk work that also was published for the web and it was awesome. We implemented scaling as CSS transform for DOMElement and canvas size for Flash output. It worked well, but is not responsive in the current sense of the responsive design.

[akashm6791515]

I am a Flash developer and have been working for past 6 years. Now I realized Flash is still strong for gaming and complex applications but the issue is with Flash player in Web Browsers therefore I selected to Adobe Edge to my project continuity in Web Browsers.

[Colin Holgate]

Something changed today. Now Flash Pro is able to export SVG animation, as well as Canvas and WebGL 2D:

Snap.svg Animator

[akashm6791515]

But Output doesn't support input text field.