With Flash being increasingly dismissed for many web projects, Adobe needed an answer to replace at least some of that functionality with a tool that used HTML/JS…resulting in the Edge suite of tools.

Here’s Wikipedia’s entry on the Edge tools. I’m not sure the overview paragraph is terribly accurate, but it’s a good reference page overall, outside Adobe’s site.

That said, Flash isn’t entirely out of the game. With CreateJS integrated, Flash can output to HTML5 Canvas, creating solid images, charts, and animations. I consider this the beginning of the Flash IDE transformation. Until it moves further, however, the Edge tools provide a lot of the otherwise missing HTML functionality.

Edge Animate uses JavaScript, jQuery, and CSS3 to accomplish HTML5-compliant animation within a tool that feels like Flash Pro, but the Flash IDE is not involved and the Flash Player is not required to run the output (though you’ll still be at the mercy of HTML5-complaint browsers). It uses the same ‘Stage’ environment with a familiar timeline, library, and properties panel to animate any object on the stage. You can rely on the stage for creating animations, or dig into the code with custom jQuery commands to create more interactive and custom HTML5 animations. What can I create with it? (2)

Edge Code is an idealistic approach to provide “design-centric features in the context of a code editor.” Some folks may just decide to stick to Dreamweaver (or NotePad++), but for designers it may be a lightweight tool allowing you to design in the browser with all the power of a regular code editor. A good example may be to use Edge Code (built on Brackets) to tweak the HTML/CSS/JavaScript/jQuery code output of Edge Animate and Edge Reflow without needing to dig into Dreamweaver itself.

Edge Inspect has a bit more simple of a calling – allowing you to quickly preview a web design on mobile platforms (tablet, phone) so you can see how your design looks on those devices without having to go through the trouble of actually packaging an App or deploy to a web server. Coolest thing: code may be edited live and the changes displayed on the paired devices in real-time.

Edge Reflow is another tool based on the visual layout rather than the code; setup that overall layout and will produce the responsive design CSS. It’s similar to the mechanics used in Dreamweaver but somewhat ‘standalone’ with a focus on just responsive design, with perhaps an ear to rapid-customer-prototyping.

There are other components of the Edge suite of tools as well – ‘Web Fonts’, Typekit, and Phonegap – each with their own benefits. Read the linked pages for more on those specifics (entire articles are written on Phonegap).

This Edge suite of tools can be a critical component of mobile-compatible eLearning development, with a growing support system, when you need to get away from the pre-packaged solutions tools like Captivate and Storyline provide, from advanced animation and interactivity to responsive design plans.

Of course, don’t forget about Dreamweaver, which started supporting HTML5/CSS3 in version 5.5, and has steadily increased such support ever since (i.e. integrating the WebKit engine for live previews). It’s pretty easy to setup and code in native HTML5 now, including adding video and audio without the need to rely on the end-user’s plugins.

As a final bit of spew, while I’m not one to often make predictions, I will here…

I think the Edge suite is a bunch of beta-release tools. Those that work out well will eventually be folded into the Flash IDE. Flash, the tool, is far too mature and powerful to let it just lapse to nothing…isn’t it? Wouldn’t integrating all the good things coming with the Edge tools into Adobe’s lash IDE make for the Ultimate Development Tool – allowing one-stop publishing to SWF, App, HTML5, MP4…

I guess we’ll see…but that’s not to say the tools aren’t worth learning. Surely any skill developed with the Edge suite will easily translate to the Flash IDE (if/whenever that happens).