Adobe previews Edge, a prototype HTML 5 animation IDE

http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/

by jonknee • 16 years ago

84 48 16 years ago

tv.adobe.com

alanh• 16 years ago

1. Initial reaction: Quick, upgrade Adobe from “Sell” to “Don’t Buy”! (This is an Arrested Development reference, but I mean it literally.) They seem to be finally realizing that, hey, Flash really isn’t going to be everywhere anymore.

2. The demo is in Flash, so I haven’t seen it. (EDIT: This assumption is wrong, but the observation holds:) But looking at everything else Adobe has done with “HTML5” so far, I’m going to assume it’s basically exporting Flash to <canvas>. Which is, yes, HTML5, but <canvas> is no more a replacement for real HTML — you know, tags and semantic markup — than Flash is; you miss out on accessibility (often), SEO, graceful degradation, etc., and it sucks CPU cycles almost as much as Flash, because you’re drawing individual pixels in JavaScript.

daeken• 16 years ago

You really should actually watch it before passing judgement. It does not seem to compile down to <canvas> -- it may use it for some bits, but they emphasize that CSS transformations and transitions are being used in a few different key places. It seems that it really does use HTML5, not just a canvas.

WesleyJohnson3• 16 years ago

I'd have to agree, I was pretty impressed. I paused it in a couple of instances when they were showing the HTML source view and I didn't see any canvas tags. Obviously they could be added dynamically via JavaScript, but that doesn't seem to be the case as you've said. And to back up your statements, they did stress CSS transformations and there is a DOM view which clearly shows him editing DOM elements which when matched with the source code view implies pure HTML. My hope would be that they'd leverage jQuery to handle the actual dirty work of doing the transformations and focus on the tooling and timeline, though I'd imagine it's too early to know if that's case or they'll be rolling their own scripts.

I'm actually surprised someone hasn't made a tool like this for jQuery. I know jQuery and jQueryUI have basic animation support and likely some plugins that build and extend those features, but a dedicated tool for creating advanced timeline and event based animations would be amazing.

jayphelps3• 16 years ago

This actually looks quite awesome, which is a stretch for me considering my opinion of Adobe lately.

I've always wanted to make a similar tool for JS animations, but never got around it.

DjDarkman5• 16 years ago

It uses jQuery, and it generates jQuery/JavaScript code, which is good because you could check it out and learn it. I learned SQL with PHPMyAdmin, so I think you may be able to actually learn how this works behind the scenes.

jayphelps3• 16 years ago

Correct me if I'm wrong (I may well be), but I was under the impression the JS aspects were used for things not implementable in CSS3/HTML5 spec? With the generated animations being done primarily in CSS3 (but maybe a JS fallback?)

I'm having a hard time finding official/reputable info on this, so if you've seen it please share. =)

If it does just use JS for animations, it's quite deceiving to call this an HTML5 animation tool. Though I'm aware the CSS3 spec isn't officially part of HTML5, I think most people assume it is.

bradleyland2• 16 years ago

This is the Adobe we want. Kudos to them for paying attention to HTML 5 as a valuable tool for web developers.

DjDarkman5• 16 years ago

Actually there were no HTML5 stuff shown in the demo, I can code those effects to work with IE6. In fact that demo may even work in IE6 if you would include some hacks.

bradleyland2• 16 years ago

This is not so much an endorsement of their methods as it is an acknowledgement that they're paying attention. Adobe has a lot invested in Flash, and their willingness to produce tools like this shows that they're not so buried in their own proprietary technology that they'll cut their nose off to spite their face. That may sounds like a basic assumption, but many companies, especially large ones, frequently do just that.

WesleyJohnson3• 16 years ago

I swore I saw a <section> tag. Sorry, had to play devil's advocate. I think people generally just group HTML5 and CSS3 together. I would say that perhaps Adobe is doing that as well, but it's equally plausible that it (Edge) promotes the use of HTML5 specific elements and markup?

ugh• 16 years ago

The term “HTML5” has come to include CSS3 and various other things currently proposed or in the process of being implemented that have nothing to do with HTML. You may not like it but that’s just how it is.

JJMalina• 16 years ago

While this is a cool prototype and a step in the right direction, I don't think Adobe should be allowed to get away calling all these features HTML5 when it's all JS, jQuery and some iffy CSS transitions. The media loves buzzwords and Adobe delivers.

russell_h• 16 years ago

I don't care if its HTML5 or not, a huge portion of content on the web is made by people using Adobe products. Improving Adobe's authoring tools (and like you say, this seems like a great step in that direction) is one of the single things that could go the farthest toward making the web more usable today.

duopixel• 16 years ago

I have done some development with CSS transitions/animations (see http://www.blackvostok.com/test/ in Safari under Snow Leopard) and I absolutely love the smoothness hardware acceleration provides. It's really simple once you understand it's just an interpolation between two states.

Edge seems to solve a pet peeve I have with CSS Transitions: chaining animations is a drag. You gotta listen when the animation is over to fire the next one. A couple of them and your head will explode.

That said, I have encountered some stumbling blocks which Edge can't resolve:

1. No frame by frame animation. Imagine you have a large jpeg with all the frames of a video, you place it as the background of a fixed size container, and then change the background position every x milliseconds. This could be an interactive version of an animated gif, but it just can't be done with css animations. The frames slide from each frame to the other.

2. Unless your target platform is webkit under iPhone/iPad you're out of luck with the hardware accelerated 3d transitions.

3. There are no animations along a path, even though you can kinda fake it by changing the rotation origin. To be honest I think this belongs more to canvas than to CSS transitions.

mortenjorck2• 16 years ago

Somewhat ironically, you can't view the presentation without Flash.

ElbertF• 16 years ago

...Which crashed my browser, twice. My excitement to see Adobe embrace HTML5 was short-lived, it's still a good thing though I suppose.

cryptoz4• 16 years ago

If your browser allows its plugins to crash the entire program, then it's time for you to switch browsers.

watty• 16 years ago

Adobe isn't jumping ship on Flash, it's still a viable product with a place on the internet.

mortenjorck2• 16 years ago

Wow. This may be an experiment right now, but I would be surprised if Adobe weren't serious about this project's long-term viability. It appears to be essentially a rethought Flash 5 IDE from before Flash became an increasingly schizophrenic Flash design / ActionScript development environment, one that happens to spit out standards-compliant files.

For animation, it already looks leagues better than the half-baked attempt at adapting After Effects' timeline to the Flash environment in CS4 and CS5.

tlrobinson• 16 years ago

Let's just hope the "standards-compliant" code it spits out is better than that spit out by Dreamweaver, FrontPage, etc...

marclove• 16 years ago

Finally! They should have begun work on this a couple years ago. But its good to see they're finally headed in the right direction.

I just hope the HTML & JS it spits out is nicer than the HTML that Dreamweaver spit out. :)

zhyder• 16 years ago

We'll soon be cursing HTML5 for powering too much unnecessary animation on the web: ads, restaurant websites, etc. Adobe's tools will make it so easy, that people are bound to abuse their power.

That abuse of power has been the main problem with Flash, on Windows at least (Mac+Linux have relatively poor implementations of the player).

jasonlotito3• 16 years ago

I hope this isn't something anyone is just now realising. Though, I shouldn't be surprised. I always wonder why people hated on Flash ads so much and supported HTML5... when the truth was, HTML5 and tech would allow companies to do essentially the same thing. Except now instead of just disabling Flash, you'd have to disable... what?

Basically, the benefit of HTML5 and associated technologies (seriously, that's getting annoying fast, maybe I should just rename it Superior HTML5 and Integrated Technologies, and shorten that to... nm) is simple that you'll be able to run "Flash like things" without a plug-in.

Everything Flash can do, browsers will be able to do by default. Yay. Net result? You don't need a plug-in. Everything else remains.

cryptoz4• 16 years ago

Net result? The web is controlled by open standards and organizations with multiple implementations of the standard. Rather than the current situation, which is total SHIT: a single company in California - Adobe - controls 99% of the media online.

That's bad news. Flash is constantly full of security holes that only Adobe can fix. Flash's performance cross-platform is abysmal since nobody can fix it but them and they don't care. Fuck Flash, long live open technologies!

And just call it HTML5: everyone knows you're including the new JavaScript APIs when you say that.

HTML5 allows us to build rich applications for the web that will run on virtually every single device made (except for Microsoft devices this year, next year will change).

Don't bash tech you don't understand the benefits of.

cobralibre• 16 years ago

Except now instead of just disabling Flash, you'd have to disable... what?

This is an understandable concern, but at the risk of stating the obvious, HTML5 is HTML. Any HTML5 elements that irk you are available for your inspection and manipulation through the DOM. This means that sites that abuse HTML5 can be easily "patched" with Greasemonkey scripts, Safari extensions, Chrome extensions, etc.

ludwigvan• 16 years ago

Agreed. The only good thing about Flash is that it is easy to block.

8ren2• 16 years ago

Pre-announcing cuts off the oxygen to competitors - although you probably could code up what they've done, how do you feel about competing with Adobe's headspace with animators? Better to try something else, right? And they also have huge depth of experience with animator's needs, and detailed tech knowhow for meeting those needs. But if Adobe wasn't entering, it would be a great opportunity. So they pre-announce.

I'm surprised that you have to edit code to change parameters - I would have thought that would been natural to have in a GUI, and would give a less cluttered workflow for animators.

A nice effect having two cameras, and simple to edit between them.

jasonkester• 16 years ago

Interesting that they're doing it as desktop software, since everything they demonstrate could be done just as well inside of a browser.

The reason I know this is that I'm currently building a prototype application that looks almost exactly like this, and that in its current form could produce the exact same demo in that video. Spooky, but comforting that we actually have a leg up on Adobe...

smiler2• 16 years ago

If you believe web apps to be superior to desktop apps then yes, you have a leg up.

However, this is content creation - and if Adobe develop this product, they will have workflow integration with Fireworks, Photoshop, Illustrator etc which you won't be able to match. Much of the world still have slow upload speeds, so uploading assets sucks.

How will this webapp work, if its SaaS then that's a monthly sub whereas you can just pay Adobe a fixed fee?

What if I want to work on my html files, css files, and other components with my own asset management system / source control which is behind a VPN on a company server - I can't integrate that with your SaaS.

I hope you're releasing as a standalone web app I can buy and download - I don't want to invest in a content creation tool which I have to rent and could disappear.

Sometimes desktop apps are much better than web apps, and I believe this kind of tool to be one of them. I am slightly biased though because I am a big fan of the desktop app!

k33n• 16 years ago

He's playing to his strength which is smart. Trying to compete with Adobe on cross-app desktop integration is a fool's errand. Going balls to the wall "Web" is something that might net him a thin slice of Adobe's delicious market share.

lurchpop• 16 years ago

jesus. 9 JS files for that demo.

yason• 16 years ago

I hope this means that Adobe, too, have accepted the fact that the world would be a better place if we replaced Flash with something more scalable, instead of sticking to the hodge-podge mess of a closed, backwards compatible proprietary runtime draining my battery at the rate of a stormwater pipework that is the current Flash plugin.

Adobe still has lots of genuine value to leech from their design tools, even if they eventually targetted HTML5 and other new technologies. I hope they won't kill this development in its infancy.

tomlin2• 16 years ago

While quiet obvious to some, I think it's worth mentioning that Adobe was never against HTML5, or implicitly worried about Flash because of it.

Adobe always tried to make a case for Flash based on a few points that some refuse to grasp. HTML5 just can't do- or not easily at least -some of the things Flash can (e.g. webcam interaction, RTMP, multi-threaded animation).

This isn't to say that Flash is amazing, just that developers must have some kind of platform to deliver engaging, rich experiences for many reasons. Not all of them are banner ads and movie sites.

While Flash may have had many years as a cheesy intro page engine, more recent development with Flash is often an impromptu petrie dish for future advances in standards and web-based UI.

The real issue is, could implementation of a standards-based Flash variant work? And if so, how?

Certainly Adobe has pondered whether Flash would survive such standardization since we barely see CSS3 and HTML5 specs materialized as necessary.

cryptoz4• 16 years ago

> HTML5 just can't do- or not easily at least -some of the things Flash can (e.g. webcam interaction, RTMP, multi-threaded animation).

Webcam integration: Sure, I'll buy that.

RTMP: Of course HTML5 isn't built with a technology that was developed for Flash. You know what Flash doesn't have? A <video> tag! Can equal functionality be built with Flash? Of course, very easily. But don't go calling Flash-specific protocols things that are against HTML5; that's silly.

multi-threaded animation: HTML5 has WebWorkers and multithreaded JavaScript. Not sure why you think this can't be applied to animation.

HTML5 is stronger than you think.

tomlin2• 16 years ago

> RTMP: Of course HTML5 isn't built with a technology that was developed for Flash.

Likewise, a similar protocol could have been created for HTML5 video. It would be hard to argue that the web doesn't need some sort of persistence for video. Waiting for an entire video to load before you can seek to an appropriate position makes HTML5 video outright archaic in this light.

> But don't go calling Flash-specific protocols things that are against HTML5; that's silly.

It's silly to ascertain Flash as an enemy of HTML5, period. I never did. I simply implied that Flash has a leg-up in some important departments.

> multi-threaded animation: HTML5 has WebWorkers and multithreaded JavaScript. Not sure why you think this can't be applied to animation.

Let's assume for a minute that I didn't preface with "...not easily at least" and claimed that it couldn't be done at all. No matter the reach or depth of your imagination, you will not be able to conjure up a single timeline-critical HTML5+JS-based site that performs on the same level as a Flash-developed one. By that, I mean Flash is much more capable of handling vector-based and raster-based graphics at high speeds while maintaining composure. Secondly, WebWorkers and timeline animation -despite your insistence- is not easy to implement, as I earlier stated. If your statement was entirely true and HTML5+JS was readily capable of such feats, I'd imagine we'd see much less Flash games and much more JS-based ones today.

> HTML5 is stronger than you think.

I never attested that it wasn't strong. Regardless of Flash, I hope that HTML5 continues to evolve and is eventually capable of what Flash is. At this time, it is not capable and selling these false statements does nothing to help HTML5's cause.

raimondious• 16 years ago

I was excited to see Adobe using jQuery, but then was brought down thinking about how they got here. Adobe was so stuck on making the swf a de facto standard that they completely missed the boat defining the direction of the web. While Apple was moving CSS in a way that suited them, Adobe could have been working on bringing Actionscript straight into the browser so that Flash could have exported to HTML. Instead they're showing off what essentially is a UI for a javascript library made by a reddit.com/r/sex moderator(1). It's sad.

(1) No disrespect to John Resig, he's one of my heroes. The image was too good to pass up.

Adobe previews Edge, a prototype HTML 5 animation IDE

Related Stories