{"id":4715,"date":"2011-08-01T08:29:02","date_gmt":"2011-08-01T07:29:02","guid":{"rendered":"http:\/\/www.itwriting.com\/blog\/4715-adobe-edge-previewed-another-step-towards-html-5.html"},"modified":"2011-08-01T08:29:02","modified_gmt":"2011-08-01T07:29:02","slug":"adobe-edge-previewed-another-step-towards-html-5","status":"publish","type":"post","link":"https:\/\/www.itwriting.com\/blog\/4715-adobe-edge-previewed-another-step-towards-html-5.html","title":{"rendered":"Adobe Edge previewed: another step towards HTML 5"},"content":{"rendered":"

Adobe has released a preview of Edge<\/a>, a new tool for creating animations in HTML 5, JavaScript and CSS3.<\/p>\n

Edge is interesting on two levels. First, HTML 5 lacks strong design tools so a new tool from Adobe is welcome. Edge is a timeline-based tool for creating animations. You import elements such as images, or create text and graphic elements in the tool. Using the timeline, you create keyframes and specify effects. Here is the designer:<\/p>\n

\"image\"<\/a><\/p>\n

and you can view the output right here<\/a>. This is one of Adobe\u2019s samples, created by Sarah Hunt<\/a>.<\/p>\n

\"image\"<\/a><\/p>\n

Under the covers Edge uses the JQuery<\/a> JavaScript library. Here are the includes for this example:<\/p>\n

\"image\"<\/a><\/p>\n

and here are the transition effects on offer:<\/p>\n

\"image\"<\/a><\/p>\n

Edge is not complete yet.  A future update will add a JavaScript editor, making this more interesting for application developers. There will be a documented Edge library that will let you customise and I presume interact with the Edge output. One of the possibilities that interests me is data visualisation. Will Edge support this? Adobe is not yet saying, but it would be a natural move.<\/p>\n

Adobe already has an HTML design tool, Dreamweaver. Why another one? Or put another way, why is Edge not a new designer for Dreamweaver rather than a new product in its own right? <\/p>\n

This is an early preview, and all things are possible. However, Adobe has a tricky positioning task, given that Edge is encroaching on territory that used to belong to Flash, timeline-based animation. In its FAQ<\/a> [PDF], Adobe distinguishes its products like this:<\/p>\n\n\n\n\n\n\n\n
Product<\/strong><\/td>\nSample use cases<\/strong><\/td>\n<\/tr>\n
Adobe Edge Preview 1<\/td>\nAdvertising, simple animations and motion design for new compositions or using existing CSS-based page layouts<\/td>\n<\/tr>\n
Adobe Dreamweaver<\/td>\nWebsites and web applications for desktops, smartphones, and other devices<\/td>\n<\/tr>\n
Adobe Flash Professional<\/td>\nImmersive interactive experiences, mobile applications, gaming, premium video, advertising<\/td>\n<\/tr>\n
Adobe Flash Builder<\/td>\nRich Internet Applications (RIAs) and mobile applications<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

This table fails to mention what must be part of the core rationale for Edge, which is working on Apple iOS, the mobile operating system for iPhone and iPad that does not run Flash content. If you view the demo page above<\/a> on the iPhone 4 or iPad 2, you will find that it works fine.<\/p>\n

Adobe\u2019s distinctions in the table above are not particularly clear. Leaving aside the relative merits of Flash and HTML 5 as technologies, a key question for developers and designers is one of reach. HTML 5 has a reach that extends to iOS and to other devices that do not run Flash in the browser. Flash has a reach that replaces browser-dependency with dependency on Adobe\u2019s runtime, which can be a good thing.<\/p>\n

Incidentally, I asked Adobe during a press briefing about mobile support and also browser requirements for Edge content, but there is no official statement on this yet.<\/p>\n

Is Adobe moving away from Flash towards standards-based HTML tools? The purpose of a table like the one above is to insist that this is not the case and that Adobe will continue to support both. Nevertheless, Edge is a significant move. A gradual decline in Flash usage in favour of HTML 5 is not necessarily bad for Adobe. Designers will use the same Adobe tools to create content for Edge as they do for Flash.<\/p>\n

What about Wallaby<\/a>, another Adobe experimental project which exports Flash content to HTML, in effect making Flash Professional an HTML 5 authoring tool? Adobe says that Wallaby and Edge are separate projects and there is no plan to have Edge import Wallaby content. Still, you would have thought that, if Wallaby makes it into an official product, some compatibility is inevitable.<\/p>\n

\"image\"<\/a><\/p>\n

Edge demo on Apple iPhone 4<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Adobe has released a preview of Edge, a new tool for creating animations in HTML 5, JavaScript and CSS3. Edge is interesting on two levels. First, HTML 5 lacks strong design tools so a new tool from Adobe is welcome. Edge is a timeline-based tool for creating animations. You import elements such as images, or … Continue reading Adobe Edge previewed: another step towards HTML 5<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,34,67,80,96],"tags":[123,359,394,462],"class_list":["post-4715","post","type-post","status-publish","format-standard","hentry","category-adobe","category-flash","category-professional","category-software-development","category-web-authoring","tag-adobe","tag-edge","tag-flash","tag-html-5"],"_links":{"self":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/4715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/comments?post=4715"}],"version-history":[{"count":0,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/4715\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/media?parent=4715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/categories?post=4715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/tags?post=4715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}