Tuesday, August 2, 2011

Adobe finally jumps on the HTML 5 bandwagon with Adobe Edge


Being a creative in these times is pretty exciting. After the firm abandonment of Flash on iOS, the world seems to be ignoring Flash and moving towards the more robust but still nascent HTML5. With lots of big name companies and designs studios jumping on the HTML5 bandwagon, with majority of clients are demanding HTML5 to get their brands and messages through mobile as well desktop spaces.

 

Adobe in all this could easily have thrown everything it had against the overwhelming odds. Instead of succumbing to ego, Adobe instead just kept its ear to the ground, and today they have just revealed Adobe Edge, a software that makes uses HTML 5, CSS and JavaScript to create animations and UI elements.

This is an extremely smart move by Adobe, instead of fighting fire with fire, they have launched the solution that all HTML 5 designers have been waiting for. We have a video below of Adobe Edge in action, and its quite exciting to finally have a competent easy to use piece of software from one of the giants. Designers can try it out for themselves as Adobe has it up for free for testing.  Not only that you can check out some exampleshere and here.

Now, tackling the elephant in the room.

What does this mean for Flash? Is Flash dead? Whats the future of Flash?

Adobe in these last few years is still streamlining Flash and the Flash player. However, it seems they are also beginning to realise that having a cumbersome Flash player that constantly needs updates is not the way to go. However, rather than let Flash just die out, they have made the system more powerful, with ActionScript libraries providing a rich scripting language capable of visually and aurally beautiful websites, robust applications as well as social and augmented reality experiences unlike anything you have ever seen. 

Adobe has also been busy building Air for mobile design and development as well as application design. So we will not be seeing the death of Flash at all, in fact we will be seeing the maturity of Flash in the sense that its making inroads into more serious application development.



Motion and Interaction Design for HTML5

Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Edge will be updated regularly to add new functionality, stay ahead of evolving web standards, and incorporate user feedback to provide the best functionality and experience possible. This is an early look at Edge with more capabilities to come.


Edge Preview Highlights


This version of Edge focuses primarily on adding rich motion design to new or existing HTML projects, that runs beautifully on devices and desktops.

  •     Create new compositions with Edge's drawing and text tools.
  •     Import popular web graphics such as SVG, PNG, JPG or GIF files.
  •     Easily choreograph animation with the timeline editor. Animate position, size, color, shape, rotation and more at the property level.
  •     Energize existing HTML files with motion, while preserving the integrity of CSS-based HTML layouts.
  •     Copy and paste transitions, invert them, and choose from over 25 built-in easing effects for added creativity.



Features

Feature Description
Intuitive user Interface The user interface is based on a stage, timeline, and panels for elements and properties. It's influenced by our customers' favorite features and functionality in class-leading tools like After Effects and Flash Professional, but innovates in its ease of use. Animations and timing can be controlled on a WebKit-based stage, or via precise property adjustments directly on the timeline. You can also make quick edits on individual or multiple objects.
Visually author animated content Create new compositions from scratch using basic HTML building blocks, text, and imported web graphics. Manipulate objects with an array of transformation and styling options which Edge natively applies to our jQuery-based animation framework.
Add motion to existing HTML content Add motion elements to existing HTML web documents. Edge stores all of its animation in a separate JavaScript file that cleanly distinguishes the original HTML from Edge's animation code. Edge makes minimal, non-intrusive changes to the HTML code to reference the JavaScript and CSS files it creates.
Import web graphics files Import existing web graphics such as SVG, JPG, PNG, and GIF files.
Standards-based output Edge reads and writes HTML, CSS and JavaScript files natively. Animated content produced in Edge  is expressed in a JavaScript Object Notation (JSON) data structure that preserves the CSS-based layout. JSON is a formatting style for JavaScript that is easily readable, and allows more flexibility to work with the document and animated content independently.
Reliable content on desktops and devices Animated content created with Edge is designed and tested to work reliably on the iOS and Android platforms, WebKit-enabled devices, and popular desktop browsers such as Firefox, Chrome, Safari, and Internet Explorer 9.

No comments:

Post a Comment