Adobe Edge: Animated Web Content With HTML5, CSS3 & JavaScript

Adobe Edge: Animated Web Content With HTML5, CSS3 & JavaScript

Adobe is all about Flash, or are they? While supporting their existing products, they are also taking on an approach to allow it [Flash] to co-exist with HTML5. Gaming, media and data-driven applications are all done in Flash already, so in HTML5 they want to facilitate that along with all sorts of interaction and animation, and they're asking you to help starting August 1st.
Adobe does not see HTML5 as a threat, but an opportunity. They are building HTML5 support into just about everything, including Dreamweaver, Illustrator, Scene 7, and more. Plus they've already got the Wallaby preview and now Adobe Edge - August 1st.

The goal: to make an intuitive UI, fast and lightweight, new compositions of old content, animate existing HTML, use SVG, JPG, PNG and GIF files, be a professional grade tool on Mac and Win7 compatible machines.

Adobe Edge: HTML, CSS, Javascript

This product is what was shown last October and it's an interaction and animation editing tool that lets creative pros build Flash-like web content using web standards like HTML5, Javsacript and CSS.

And it's free while they have what is essentially an open beta period, which they're calling a preview period. So that the community can use, abuse, break, and flail against it in order to help make it better. From the demo I saw way back on July 19th, there won't be much flailing against it, but there will be a flailing of arms in the sky while people yell HELL YEAHZ! (or something along those lines).

Adobe Edge: Animated Web Content With HTML5, CSS3 & JavaScript

Adobe Edge outputs in three standard formats; HTML5, CSS 3 and Javascript along with a project file with metadata--no code. This allows for animated web content that is quick and easy to create and edit.

Adobe Edge: The Ease of Use UI

The dashboard, workspace area is a sort of familiar Adobe-like space, much like After Effects, so videophiles will feel right at home, right? On the right side you have elements, and the left side is properties of the element. Below is the timeline, which is where you'll do a lot of your work.

It's an amazingly intuitive interface that gives some seriously cool tools. Drag across a section of the timeline and then edit a property, such as transparency, and you've just created an animation. Then you can drag an element's animations on the timeline to change it's timing of when it happens.

Adobe Edge: Animated Web Content With HTML5, CSS3 & JavaScript

You also have the ability to create very simple shapes like rectangles. But with CSS 3 you can style that rectangle by changing its color or giving it rounded corners and it's all done through a graphical interface.

All of the designs are previewed in real time when you're making changes so that you can see exactly what it will look like when you're working with it instead of speculating.

Many of the transitions, animations, are based on X,Y, scaling, opacity, skew angles, etc. You can also open a standard HTML file and quickly put some animations into it. Just by loading the HTML file, Edge parses it, the javascript and CSS and then allows you to control single elements and provide them with some animation. It doesn't modify the original HTML, but adds in a head section and javascript and CSS files and a .JS file with javascript object definitions.

Boxes & Text? Is That All?

You can also import SVG images. This is the first time that these images will be incorporated into HTML without the need of an extra add-on. You should also be able to output to mobile compatible formats.

There will be more functionality over time to incorporate user feedback and expand what the product can do. The community is going to be able to see the product development, with Animation being the first focus of this preview then moving on to shapes, expressivity, coding, interactivity and graphics expansion. The goal is for a 1.0 version release in early 2012.

Adobe Edge: Animated Web Content With HTML5, CSS3 & JavaScript

Adobe Edge & Video

While the video tag is not supported right from the get go--which is because there's no actual standard, there are two competing codecs, and it is, in general, still fairly unevolved--they do know that it exists and they will work it into the mix, in due time.  The more and more that HTML5 gets nailed down from a standards perspective, the more and more tags, like <video> and <audio>, will be supported by Adobe Edge.

I already expressed my interest to the company in seeing video gain support, and quoted a piece of research that shows that news with video included in it was far more interesting and retained interest longer than just standard text and images. Video is going to be vital to continued expansion and accessibility of information on the web. When it is professionally produced it lends a good amount of creditability to news.

Here's a 15 minute look at the Adobe Edge software, including some demos:

Don't Miss Out - Join Our VIP Video Marketing Community!
Get daily online video tips and trends via email!

About the Author -
Christophor Rick is a freelance writer specializing in technology, new media, video games, IPTV, online video advertising and consumer electronics. His past work has included press releases, copy-writing, travel writing and journalism. He also writes novel-length and short fiction as part of Three-Faced Media . View All Posts By -

What do you think? ▼
  • Gaurav Vashisht

    Nice article Chris, is there way I can add audio in my HTML5 animations. I have created brief tutorials and I want my voice in the animation.

  • Doug

    Did anyone notice that ADobe Edge puts all the page content in a JS file, how is google (panda) going to see that? Sure this works on all devices but still has the same SEO issues as flash! :(

  • http://[email protected] Cal

    this product functions like AE - After Effects, or Apple - Motion. Both products are used in film/video editing; and now it appears that we can now achieve motion in html.... the internet is truly becoming the new frontier. Cutting the cable will be painless.... see, experience what you want when you want it.

    Business will never be the same.