Moods

Welcome to Adobe Edge

7 Comments 01 August 2011

This morning, Adobe released a preview of Adobe Edge, the first Adobe tool dedicated to HTML5 and CSS3 animations. As the web standards are evolving to enable interactive animations, Adobe Edge lets you choreograph graphical assets on the screen. Motion designers who are used to After Effects or Flash Pro can create advanced animations in few seconds thanks to Edge. You can directly work on the timeline to manipulate your keyframes and add prebuilt easing effects on your transitions. It’s not even an alpha release, it’s a “Preview 1”, that’s why a lot of features are still missing. That said, you can have fun playing with the position of your assets, the scale property or the opacity. When you’re ready, Edge exports an HTML document and leverages the latest features of the HTML5 standard, CSS3 animations and the jQuery library.

I really appreciate the timeline approach. I used to be a Flash motion designer (a long long time ago) before focusing on Rich Internet Applications. That’s why I understood the Edge UI in a few minutes and produced this animation in less than 10 minutes during my lunch break (click on the picture to launch the animation). Test the animation on your smartphones too !

 

I also want to introduce a new website: the expressive web. Still in beta, this project is a great showcase of the most creative features of HTML5 and CSS3.

It’s good to see that Adobe is committed to providing first-class software for web animators. Now they can also target the latest generation of browsers leveraging the power of HTML5 and CSS3. Hopefully, we’ll see more and more web banners and websites using HTML5 thanks to Adobe Edge. It’s a great opportunity for web animators and HTML designers. But now let’s go back to another source of fun: Enterprise RIAs and Flex…

Post to Twitter

Your Comments

7 Comments so far

  1. sh says:

    Your animation did not work on my HTC desire hd android 2.3. The beta site works ok but I think this kind of tool would be most suited to making components not fully fledged sites. I use drupal and nothing right now would shift me away from it, it has everything.

  2. Hugo says:

    I already tried Adobe Edge and only have to say “superb” :D.

    I wanted to create a simple website for a flex mobile applications but with same simple animations so I will use Edge for create the animation part of this website :)

  3. admin says:

    @sh Indeed, the Android web browser doesn’t handle the SVG standard. IT’s not due to Edge. Drupal is a CMS, Edge is an animation tool.

  4. sh says:

    Sry I mean I use drupal, mootools and jquery for my website building and animations. U cannot compete 😉

    And under the edge features preview its states animated content created with…is designed to work reliably with ios and android yet u post an example which clearly demonstrates it does not in all cases which is an odd way of showcasing the tech imo.

    Micheal I was really looking forward to another excellent flex mobile example. I really like what u have done so far. I will have to be patient. Ty.

  5. kral says:

    Sorry my bad English:

    HTML5, CSS3, JavaScript, and animations to create web-based prepared in Adobe Edge (HTML5, JavaScript, CSS3 Animation Tool) is a brand new vehicle. HTML5 is shown as an alternative to Flash content designed especially for the preparation of the application but not yet received the final version, web developers experience it was opened.

    Designed according to current web standards and modern software, increasing the HTML5, CSS3, JavaScript, and the preparation of content-based help. Edge of the increasing use of mobile devices, especially the new standards will be supported by Adobe. The program to SVG, PNG, JPG and GIF formats support.

    Adobe Edge anmimasyonlar prepared with Firefox, Chrome, Safari, Internet Explorer 9 in web browsers, can run IOS and Android devices.

  6. Ray says:

    HI.
    I am realy impressed with this first shot of ADOBE EDGE.

    I already start to work with it and I would like to know how to make a text clickable to load another page.

    Thank you very much and I ame waiting for the rest of this program.

  7. Cymbals says:

    You example works in IE 9, however I tried the current ones at http://labs.adobe.com/technologies/edge/resources/ that did not work in IE9.

    What is the difference?


Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2018 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes