

Adobe previews Edge, a prototype HTML 5 animation IDE - jonknee
http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/

======
mortenjorck
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
Let's just hope the "standards-compliant" code it spits out is better than
that spit out by Dreamweaver, FrontPage, etc...

------
tomlin
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.

~~~
cryptoz
> 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.

~~~
tomlin
> 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.

Read more here: <http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html>

~~~
cryptoz
> I'd imagine we'd see much less Flash games and much more JS-based ones.

HTML5 games work (by default) on ~50% of computers because there is no
Microsoft implementation. The reason we haven't seem many games in HTML5 is
because of Microsoft's lack of HTML5 support. When everyone is using Windows 7
and IE9 (with hardware acceleration, too!) HTML5 will outperform Flash and
will be available on every platform.

------
zhyder
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).

~~~
jasonlotito
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.

~~~
cobralibre
_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.

~~~
jasonlotito
Oh, I realize that. =) Of course, I find it funny that we'll have to install
plug-ins to do what not installing a plug-in accomplished before.

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

~~~
DjDarkman
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.

~~~
bradleyland
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.

~~~
8ren
Adobe is an unusual large company, in that it has successfully managed the
transition between closed and open before. Starting with the fonts for
postscript printers, just a few years after Adobe was founded. Flash itself
was also (somewhat) opened a few years back, to successfully fend off open
source alternatives - though I don't recall if it was still owned by
Macromedia at that time. They've also known when they could successfully stay
closed despite vigorous open competition, as in Photoshop vs. Gimp.

So Adobe probably understands the issues of open/closed better than anyone,
and has an organizational structure that has proven able to adapt to it.

[ Though it's worth noting that MS made an incredible sacrifice to ship
windows for netbooks at a massive discount, to fend off linux. Although I use
a linux netbook myself, I have to admire their foresight and fortitude.
Another company is Intel. Although I don't have a specific story for them,
Andy Grove wrote a book _Only the Paranoid Survive_ , and also has a blurb on
the cover of _The Innovator's Dilemma_ ("lucid, analytical - and scary" he
says) - they know the danger, and have lasted a long long time, as the driver
(and proposer) of Moore's Law. ]

------
jasonkester
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...

~~~
smiler
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
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.

~~~
smiler
I am sure he can and not denying that. I just wanted to outline that I don't
believe web apps to be superior to desktop apps. In many cases they are not
and I think this is one of those instances.

------
jayphelps
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.

~~~
DjDarkman
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.

~~~
jayphelps
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.

~~~
DjDarkman
Quote from [http://www.optimum7.com/internet-marketing/web-
development/p...](http://www.optimum7.com/internet-marketing/web-
development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html)

"Believe it or not, the biggest road block I encountered when creating this
css3 cartoon was switching the scenes at the correct moment to coincide with
the css3 animation. I used jquery’s built in delay function to flip through
the scenes and activate the next scene."

Being able to correctly time your animation is at least as important as the
effects themselves. You don't get it with CSS not even CSS3. To be more
specific: <http://api.jquery.com/animate/>

TL;DR: the animation logic can only be done in JavaScript, CSS does not have
such a feature, and it doesn't even need to because it's fine to do that in
JavaScript.

~~~
jayphelps
Sorry to be "that guy" but looking at the source, he uses JS just for changing
scenes and sometimes for opacity (the latter of which can be done w/ CSS3)

When I was referring to animations, I meant the actual transformation of the
element/object, which he does use CSS3 for.

I'm a jQuery user myself, along with plenty of CSS3 action, and I was indeed
aware you still need to use JS for scene changes and triggering CSS3
animations.

Why I want this tool to use CSS3 for the actual animations themselves is the
performance. I'm not sure what voodoo browsers use to make CSS3 animations so
much more smooth then the equivalent JS animation, but it's so noticable.
Especially on iOS devices.

Thanks for the link, I hadn't seen this example before and it rocks!

------
8ren
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.

------
duopixel
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.

------
marclove
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. :)

------
JJMalina
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
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.

------
raimondious
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.

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

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

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

------
yason
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.

------
lurchpop
jesus. 9 JS files for that demo.

------
alanh
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
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.

~~~
WesleyJohnson
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.

~~~
DjDarkman
Until we get rid of most IE versions, we can't really reliably produce
animation in web applications. I have built a very simple image cross-fade
effect. I most of my time making it IE compatible.

~~~
WesleyJohnson
I would guess it depends what type of animation you're trying to tackle.
jQuery has some pretty slick animation capabilities and it supports IE 6.0+.

My point, though not complaint, was that it's more geared towards executing a
single animation against a single DOM element or a group of DOM elements. This
is incredibly powerful, but when you want to start chaining animations, or
"firing" off additional animations when you're mid cycle on your first
animation - it gets tricky.

For example doing something like...

$("#myDiv").animate({top: 50}, 1000, function(){ $("#myDiv").animate({left:
50}, 1000) });

Would move "myDiv" down from 0 to 50 over 1 second and then move it right from
0 to 50 over 1 second. But if I wanted to trigger the left -> right animation
midway between the top -> bottom animation there isn't an easy way to do that
as far as I know. Currently you'd have to create two top -> bottom animations
and split up the distance and duration so you can interject the secondary
animation.

$("#myDiv").animate({top: 25}, 500, function(){ $("#myDiv").animate({left:
50}, 1000); $("#myDiv").animate({top: 50}, 500) });

That or just execute the 2nd one with a timeout independent of the first...

$("#myDiv").animate({top: 50}, 1000);
window.setTimeout($("#myDiv").animate({left: 50}, 1000), 500);

Neither of those "solutions" are terribly difficult, but it gets more and more
complex when you start building on it. If Adobe's EDGE or another set of tools
would give you the ability to do this easily, I'd happily pay for it. Anyway,
I suppose I'm getting off topic. :)

~~~
DjDarkman
My issue was this: when I have set the ocacity/trasnparency of an element, in
IE6 it did not effect the child elements, which was a real pain to fix. I also
had very hard time with aligning elements on top of each other and avoiding
CSS rules that behave differently in IE and non-IE browsers.

TL;DR: Doing animations in web applications is hard for all the wrong reasons.

