Adobe has shown the newest HTML authorizing tool Adobe Edge for a while. Acoording to Adobe, with that tool the making of animated web pages should be easier. Precisely, "Adobe Edge create animated web content using HTML5, CSS3 and JavaScript with ease, power and precision". With a lot of interest I have tested the product. The version Preview 1 is of Aug. 18, 2011 and the Preview 2 of Sept. 8, 2011.
The experience from Preview 1 is really disappointed. There are only 4(!) tools available on the toolbar: select, rectangle, rounded rectangle and text. So only thing I can do is draging the tools to the stage and making some changes to the object.
Now comes the so called big part. The animation part will be done with a timeline that is very similar to that in Adobe Flash. Define the starting and ending property value, the animation (between frames) will be generated automaticly. After doing that, we can take a preview in a browser directly without saving.
If we look at the source code, Adobe Edge utilites jQuery framework actually to make the animation possible. All the animations are capsuled in one generated JavaScript file and all the propery changes will be defined in one CSS file. The part of the html contains only the UI element.
The source code of a html file looks like that:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" src="edge_includes/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="edge_includes/edge.0.1.2.min.js"></script>
<script type="text/javascript" src="edge_includes/edge.symbol.0.1.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="Untitled-1_edge.js"></script>
<link rel="stylesheet" href="Untitled-1_edge.css"/>
<!--Adobe Edge Runtime End-->
</head><body style="margin:0;padding:0;">
<div id="stage" class="symbol_stage">
</div>
</body>
</html>
That idea sounds good, because the user can use Adobe Edge as Adobe Flash. BUT, wait a second, the real world is very complicated. What about a property that is only deteminated by runtime or even by the related position to other objects? Adobe Edge seems cannot afford such kind of work at the moment.
Actually, Adobe Edge is somehow like Adobe Catalyst compared with Adobe Flash Builder. In Adobe Edge, the source code of a html file cannot be seen or edited. It is really like a tool for traditional Flash developers who begin to jump into the html world.
As fas as I said, there is still a long way for Adobe Edge to go to let the web developers accept the tool.
