Adobe’s Edge in the Cloud (Animate, Code, Inspect, Reflow)
- No Comments
If you’re a fairly new subscriber to Adobe’s Creative Cloud service, the sudden availability of the extensive software library may leave you a bit overwhelmed. While we’ve pretty deep experience with most of those tools, we do have various experts here who focus on a set of those tools…so it’s been great, for example, for developers to be able to install Premiere and try their hand at video editing and greenscreen features.
But a fairly new set of tools to Adobe’s box are these ‘Edge’ products. What are those all about?
Generally, with the sudden drop in the relevance of Flash, Adobe needed an answer to replace at least some of that functionality with a tool that used HTML/JS…and the Edge suite of tools was born.
Edge Animate uses CSS, JavaScript and jQuery to accomplish animation for HTML within a tool that feels like Flash Pro – and outputs the results to ‘HTML5’ for mobile compatibility, so there’s no Flash and no required plugin to run (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 animation.
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 to tweak the HTML/CSS/JavaScript/jQuery code output of Edge Animate and Edge Reflow without needing to dig into Dreamweaver itself. (built on Brackets)
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 ‘pulled out’ with a focus on just that responsive design purpose.
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).
Edge Tools are ‘bleeding edge’ technologies rapidly coming to the forefront and still evolving. This Edge suite of tools will be a critical component of mobile-compatible eLearning development 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.
These Edge tools fit well into our eLearning production. With our custom, HTML-based, SCORM-compliant shell – we can develop our learning content with a variety of tools and closely match the level of engagement and interactivity previously achieved with Flash – all in a desktop AND mobile-compatible solution without any plugin requirements.