All posts tagged ‘Adobe Edge’

File Under: Software & Tools

Adobe’s New ‘Edge’ App Suite Doubles Down on HTML

Adobe’s new Edge Suite of tools for web developers. Image: Screenshot/Webmonkey

Adobe may be best known among web developers for its much-maligned Flash Player plugin, but in recent years the company has begun shifting its efforts away from Flash to open web tools like HTML, CSS and JavaScript. Now Adobe is launching a new suite of apps for web developers working with the latest web standards.

The new Adobe Edge suite of HTML5 development tools includes Edge Animate 1.0, a tool to create HTML, CSS and JavaScript-based animations, and Edge Inspect (formerly known as Adobe Shadow), a handy tool for testing your sites on multiple devices at once. There’s also Edge Code, a fork of the Brackets code editor that’s now included in Adobe’s Creative Cloud suite.

As part of the announcement at Adobe’s Create the Web conference in San Francisco the company also showed off a demo of the still-in-development Edge Reflow, a new tool for working with responsive design layouts.

While there are quite a few very nice things for web developers in Adobe’s new Edge suite, one of the less welcome bits of news is that Adobe Edge Inspect, née Shadow, is no longer a free tool. Technically you can still use Inspect as part of the free version of Creative Cloud, but you’ll only be able to test sites on one device at a time, which pretty much defeats the whole point of the tool — testing on multiple devices at once.

The pricing for Edge Inspect is either $10/month as a standalone product or you can subscribe to the Creative Cloud suite for $50/month. That may well be outside the price range of small developers in these tough economic times. Luckily you can do pretty much everything Edge does by setting up your own local server for testing and connecting your devices directly to it. As an added bonus your DIY setup can test any web browser, rather than being limited to WebKit browsers like Edge Inspect.

On the brighter side of Adobe’s announcement the still unreleased Reflow tool looks impressive and it looks like the focus is on creating breakpoints based on design rather than device screen size, which is good news. The video below gives a little sneak peek at how Reflow works and we’ll be sure to give you an in-depth look when it’s available for testing.

Another appealing aspect of Adobe’s Edge Suite is Animate 1.0, which has been improved considerably since our initial review. Animate still doesn’t output canvas or SVG (which makes the HTML5 marketing somewhat misleading), but it does a good job of helping Flash refugees feel more at home creating standards-based animations.

For a limited time, Edge Animate is available for free via Creative Cloud. When the free intro period ends it will be available as a standalone app for $500 or as part of the $50/month Creative Cloud subscription.

We’ve been arguing for years that we need better tools for building the web. I may like Vim, you may love emacs, but let’s face it both of them are relics of the dark ages. Today’s web developers shouldn’t need the same archaic text editors we used to build the web fifteen years ago. Tools like Edge Animate, Edge Inspect and Reflow may not be everyone’s cup of tea, but they go a long way toward helping people who want a more intuitive way to create cool stuff on the web and that’s almost never a bad thing.

For more info, and full details on all the Edge apps and pricing, head on over to the new Adobe Edge website.

Review: Adobe’s Edge Offers Web Animation Sans Flash

Adobe has released a preview version of a new HTML animation tool dubbed Edge. Together with Wallaby, Adobe’s Flash-to-HTML conversion app, Edge is part of Adobe’s push to remind the web that the company is more than just its much-maligned Flash plugin.

Edge has been released as a free, beta public preview and is available for download through the Adobe Labs website.

Edge is not intended to replace Adobe Flash. At least not in the short term. Instead Edge is aimed at Flash animators looking for a visual way into the world of HTML, CSS and JavaScript-based animations, particularly the relatively simple animations often currently found in Flash-based advertisements.

HTML, especially some of the new elements in HTML5, combined with CSS 3′s animation syntax offers web designers a way to create sophisticated animations without requiring users to have the Flash plugin installed. That’s a good thing since no iOS user is going to have the Flash plugin.

Unfortunately, HTML, CSS and JavaScript don’t offer any easy way to create animations. Developers comfortable writing raw code in text editors have, thus far, been the driving force behind web standards-based animation. Designers and animators accustomed to development tools like Flash, which offers visual layouts and drag-and-drop animation, have been left out of the web standards animation trend.

Edge is Adobe’s attempt to bring the good parts of the Flash development app — visual animation tools, keyframe-based timelines and a stage where you can drag-and-drop objects — to the world of web standards-based animation. But of course, instead of publishing your animations as Flash files, Edge publishes them as web standard HTML, CSS and JavaScript.

Like Hype (see our review) and other HTML animation apps out there, Edge looks and behaves much like Adobe’s Flash development environment with a timeline, keyframes and editing tools that will look familiar to Flash developers. If you know how to use Flash, you’ll be up to speed with Edge in no time.

The Edge interface should look familiar to anyone who has used Flash.

Despite Adobe’s marketing efforts, there’s almost nothing about Edge that is HTML5. Adobe is hardly alone in its misleading use of the HTML5 moniker. Both Hype and Sencha Animator claim to be “HTML5″ animation apps and, like Adobe, neither generates much of anything that isn’t in the HTML4 spec.

In its current form Edge will export your animations using div tags, some CSS animations, a fair bit of JSON and a combination of jQuery and some custom JavaScript to hold everything together.

Why go with div and CSS-based animations when there’s Canvas and SVG? Well, for one thing, this is a very early preview and Adobe claims that eventually Edge will support canvas and SVG (in fact Edge already has some support for importing SVG file). A Mozilla developer raised this question in the Adobe forums and Adobe’s Mark Anders chimed in to say that, “we seriously considered canvas, but current performance on mobile browsers (especially iOS) is very bad.”

Anders goes on to note that iOS 5 will remedy much of iOS’s canvas performance woes, and Adobe is clearly looking for developer feedback on where to go with Edge. If you’ve got strong feelings about where Edge should focus its efforts, head over to the forums and let Adobe know.

While Edge is a long way from a finished product, this early release shows considerable promise. If you’re a Flash developer looking to expand your repertoire to include HTML, CSS and JavaScript animations, Edge just might help. For a nice overview of how to use Edge be sure to check out Mark Anders’ Edge overview movie on Adobe TV.

See Also: