Adobe is on ‘Edge’

A few months back I wrote an article on Adobe Wallaby; a piece of software created to convert Flash files into HTML5, CSS3 and JavaScript. Since then Adobe has created another entry in the Adobe Labs: Edge. From the preview i found on YouTube (see below) it seems that Edge is heading in the direction of overtaking Flash as the premier animation tool for web developers. Of course, only time well tell, but in the meantime I thought it would be a good idea to further explain Edge and introduce it to the readers of DBMEi.

First displayed at Adobe MAX 2010, Adobe Edge targets designers and developers looking for an adept method to raise web standards like HTML to help generate content that provides smooth motion and transitions. THe need for a lightweight, pro-grade tool that is a complimentary addition to Adobe’s current line up of web tools including Adobe Flash Pro CS5.5, Dreamweaver CS5.5, and Adobe Flash Builder 4.5 software.

Perhaps even more significantly, Adobe has announced that because of rapid changes in HTML5, they are initiating an open development policy with Edge. Because of this Adobe Labs will release the software earlier than is usual in the common process of the software development process. Since user feedback is returned to watchful developers before beta begins, that feedback will actually help to shape the final product. To ice that cake, Adobe announced they will also provide a zero-cost download that web designers can download to begin to explore and provide that vital feedback.

Check out this Preview of Adobe Edge:

Adobe Enhancements

Adobe has leapt through several notable milestones over the last year. These include elements such as:

– Contributions to jQuery
– Enhanced HTML5 output for Creative Suite 5.5
– Submitting code to webkit

Adobe Edge Features

The preview of Adobe Edge will work natively with HTML to allow designers to implement motion into existing HTML documents. With no alterations in the integrity of CSS layouts, creating visually enhanced content entirely from scratch becomes possible. Edge uses traditional drawing tools that can produce many HTML elements that are styled with CSS3.

Standard supported web graphics assets include:

– PNG
– GIF
– SVG
– JPG
– EPS

These can easily be styled using CSS3. A design stage uses WebKit to enable the design manipulation of the content with incredibly clarity. A ‘new’ timeline element – borrowed from Flash –  supplies new perspectives and options in animation productivity. Motion can be applied smoothly to elements of the HTML with ease and accuracy.

Edge content can be used on common browsers including:

– Blackberry Playbook
– Android
– iOS
– Hp webOS
– Safari
– Chrome
– IE9
– Firefox

Could this new tool further help animated content find its way to new devices such as the IPad? I guess we’re going to have to wait to find out! In the meantime visit Adobe Labs to download a FREE copy of Edge!

Sources:

Adobe Labs

IT Pro: Adobe Previews Flash Alternative Edge

MK Multimedia: Adobe Edge Preview

PC World: Adobe Edge: What You Need to Know 

Hype @ Apple

When I first read Steve Jobs Thoughts on Flash I knew something was up. It seemed so strange that after years of diplomatic relations between Apple and Adobe – Steve Jobs was bashing one of Adobe’s most popular products and listing reason after reason as to why users won’t see Flash on Iphones and Ipads. That’s not to say that Jobs didn’t make some valid points, but the entire essay struck me as a bit odd. Could Apple be working on software that could eventually replace Flash?

“That’s crazy talk”, I thought to myself. Apparently I wasn’t too far from the mark.

Enter: Apple Hype

Offering many of the familiar interface elements that Adobe Flash has been providing, Hype is a new HTML5 animation builder and authoring tool.
This recently released app available exclusively through the Mac App store at a fairly affordable price of $29.99 USD (much cheaper than Adobe Flash) and is focused on encompassing the HTML5 formats that can include CSS3, HTML5 tags, and even the latest in Javascript technologies.

The Good News

Fortunately for those who already have some background in Flash, learning Hype may not be all that difficult. Although their graphical user interface is laid out in a different manner, the basic components remain the same.
Most developers are huge fans of drag-and-drop working function and will not be disappointed with Hype in this manner either. Users can drag:

• Images
• Vector Art
• Videos

And just about any object onto the creation stage and begin to animate them by utilizing key frames. Hype also has a fairly nifty record feature. In this manner, developers can quickly create ‘dry runs’ on freshly created animations to find out if they will work through the entire progression of a script. Oneof the big ways Hype separates itself from Adobe Flash is that instead of using a proprietary file type, the animations created in Hype can be converted into a JavaScript and CSS based animation. Say goodbye to those annoying “you must download and install the latest version of the Adobe Flash Player to view this content” messages.

Hype does offer a fair share of default elements such as text boxes, buttons, and other elements that are readily available to add to your animations. To create even more complex forms of animations Hype users will also be able to utilize scenes to break up the content, allowing developers to create their own transitions. The programs Flash-like IDE does make creating animations much easier.
So easy in fact, that even the most basic user can likely download their own copy, research the introduction movie and check out their tool bars, and create their own basic animation in a matter of minutes.
The Not So Good News

Despite excessive amounts of claims, Hype does not actually generate HTML5. Instead, it generates CSS, HTML4 and JavaScript. Hype also shows a distinctive lack of canvas elements nor does it use any of the newest APIs. However, this shouldn’t take away from what it is proficient at.
Ironically, because Hype doesn’t utilize a history API, and due to the manner in which the documents are embedded into the page, Hype disables the browsers back button. This is unfortunately not even necessary, with the support of the History API, this most important element of web browsing would remain functional.

Embedding simple Hype animations may require a bit of tweaking or alteration but it can be done. It isn’t that hard to do, but it will mean fishing into the code, which seems in a great part to defeat the purpose of Hype itself.
Only time will tell how much this program will be of benefit, and to whom.

Sources:

Steve Jobs Thoughts on Flash

Apple Engineers Create Hype

Hype Animates the Web

Build Animations in HTML5 with Hype