Adobe Prototype on HTML5's Cutting "Edge"
DZone's Guide to
Adobe Prototype on HTML5's Cutting "Edge"
Join the DZone community and get the full member experience.
Join For FreeDeploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
During the Adobe MAX 2010 keynote address, Adobe CTO Kevin Lynch demoed another tool based on emerging 'HTML5' technologies. Edge is an HTML5 animation tool that's not in its final form yet, but Adobe is working on bringing its unique functionality into a final form as a standalone tool or an add-on to other software. (Not to be confused with the Adobe Edge newsletter)
For web developers and designers, it can be simple to build an HTML5 animation, but difficult to choreograph that animation just the way you want it. You can see below that the Edge prototype has a timeline setup that is commonly found in any video editing or effects software.
Letting the visual tools do some of the leg work can be extremely helpful and time-saving, especially when you have a lot of elements. Of course, you'll need to verify that any generated code is clean and know your HTML5.
A properties editor also supports new CSS transformations in 2D and 3D. The Edge prototype uses the WebKit rendering engine for previewing animations, which should support all of the most stable HTML5 specifications. Of course, Adobe didn't forget developer needs when building the prototype, which currently has a source code editing mode.
Check out this video of Adobe's Mark Anders previewing some of the features in Edge:
One of the commenters on the video was especially pleased with Adobe's new tooling venture, saying: "This tool is looking really promising. As a visual designer I look at the new HTML/CSS features and while they seem cool, there's such a huge barrier between what they can theoretically do and the voodoo that must be done for it to actually work. A tool that does the voodoo for you is what we need!"
For web developers and designers, it can be simple to build an HTML5 animation, but difficult to choreograph that animation just the way you want it. You can see below that the Edge prototype has a timeline setup that is commonly found in any video editing or effects software.
Letting the visual tools do some of the leg work can be extremely helpful and time-saving, especially when you have a lot of elements. Of course, you'll need to verify that any generated code is clean and know your HTML5.
A properties editor also supports new CSS transformations in 2D and 3D. The Edge prototype uses the WebKit rendering engine for previewing animations, which should support all of the most stable HTML5 specifications. Of course, Adobe didn't forget developer needs when building the prototype, which currently has a source code editing mode.
Check out this video of Adobe's Mark Anders previewing some of the features in Edge:
One of the commenters on the video was especially pleased with Adobe's new tooling venture, saying: "This tool is looking really promising. As a visual designer I look at the new HTML/CSS features and while they seem cool, there's such a huge barrier between what they can theoretically do and the voodoo that must be done for it to actually work. A tool that does the voodoo for you is what we need!"
Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Like This Article? Read More From DZone
Topics:
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}