Today Adobe published on their Adobe Labs website a public preview of a new application called Edge, which is described in their own words as:
"Adobe® Edge Preview is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3."
Having previously done a little comparison between the output contents and file size of their previously released Wallaby ‘Flash to HTML5’ conversion tool and that of Flash itself then I thought it would be good to do the same thing for Edge. However, the problem at the moment is – being only the first preview release – Edge has a fairly limited featureset with animation methods such as rotation, location (X / Y axis movement), opacity, scaling and skewing. Essentially some of the basic animation tools that you’d find in Flash. The problem with trying to do a comparison along the lines of the Wallaby test that I did is that I used a shape-tweened animation for that test, something which just isn’t possible at this time within the capabilities of Edge.
So, in lieu of being able to do a really exact comparison I have instead made a simple animation using one of the original SVG source graphics that I used for my Wallaby test. The main outcome of doing this test is just to see what the output of Edge is like – how many files does it create, how big is each file individually and in total. If you haven’t read the previous Wallaby post prior to this then in a nutshell the Flash output was far more efficient in both number of files and file size. Again it has to be said that a shape-tween animation is probably the most complex type of animation you could aim to do in this context, so I did set the bar fairly high there. But as tools like Edge and Wallaby are an attempt to try and bring Flash-esque timeline based animation creation to the world of HTML5/CSS/JS/SVG then it’s fair to expect that beyond some simple x/y movement and rotation that shape-tweening is something that people – especially those from a Flash background – will want to create.
‘Edge Case’ sample: Rotating an SVG in Adobe Edge
So, here’s the simple animation I created in Edge. I imported an SVG file which I had used for the Wallaby test and applied a simple 360 degree rotation to it, a lot simpler than the Wallaby test but I thought it was worthwhile bringing in an SVG file to see what Edge did with it.
View Edge’s Output in new Window
Download the Edge Assets as a Zip
Adobe Edge’s ouput HTML, CSS, JS etc
Here are all the files that Edge created for this example:
- edge-case.html: 1kb
- edge_includes/jquery-1.4.2.min.js: 72kb
- edge_includes/jquery.easing.1.3.js: 8kb
- edge_includes/edge.0.1.1.min.js: 32kb
- edge_includes/edge.symbol.0.1.1.min.js: 29kb
- edge-case_edge.js: 5kb
- edge-case_edge.css: 1kb
- images/noun_project_182.svg: 1kb
Total: 149kb
So, to get that basic rotation animation of an SVG file we get almost a 150kb payload in order to make that work. I haven’t bothered creating a Flash (or video) version of this animation as I think it’s fairly clear that it would be possible to get a smaller file size using Flash to create it. Edge and tools like it have obviously got their work cut out here, especially with the huge use of mobile devices then file sizes and number of separate files in a site (i.e. minimising server calls etc) is an important issue.
We’ve definitely got to cut Edge some slack though here, as small as Flash files can be it’s important to remember that the entire runtime for Flash is a plugin whereas as HTML / CSS / JS etc is supported by the browser’s native features, Also the JS files used by Edge are providing a kind of runtime in the form of some Javascript functions which gets added to every animation that you create with it. Presumably this could be alleviated by having this file be published only once and then referenced, or better yet by being hosted by Google’s CDN and referenced that way along with jQuery which Edge also includes with each animation.
Adobe Edge: Just a tool for Flash-ers or true HTML based creation?
It’s hard to say at this point how these tools will be used, a big area will surely be a replacement for Flash-based interactive / animated advertising, again file size is very important here as Flash banner ads often have a maxmimum payload for ad networks of about 40kb, so Edge is not competitive here.
I think my biggest concern about these tools is that they simply become a swap-in replacement for Flash and that people start to use them purely from a visual perspective and not considering the structure and semantic meaning which underlies all HTML pages. It is *HTML*5 after all, even though that term is often used as a buzzword to include JavaScript effects, technologies such as Canvas, SVG etc. It is extremely important to remember that semantic meaning is at the core of HTML. As such animations created with tools like Edge should keep that at heart and include a workflow that encourages this fact, not just enabling ways to make things move around the screen etc. So I’ll be interested to see how things progress with Edge.
Despite that concern it is still great to see tools like Edge and Sencha Animator being released, the uptake of complex JavaScript based interaction and animation is certainly hindered most by the lack of capable IDE’s to make the process quicker to do. Hand coding jQuery animation and interaction is fine but a good IDE would enable you to keep on top of the code being used but also make it much quicker and efficient to develop using these technologies.
Anyway, that’s my thoughts having played around with Edge, I’ll have to go catch up with some reading online and see what other people are saying, feel free to comment with your own thoughts!
@Alex: Yes, that is a very good point, but it shows the challenge involved in developing non-flash based animation / interactivity without having the core 'engine' of it wrapped up in a single plugin.
It's very difficult to see how this can be easily managed, even though JavaScript is a core feature of web browsers it obviously doesn't include jQuery or the many other JS libraries that people use, so the payload of all of these JS files has got to be downloaded somehow.
I think uptake of SVG will make a big difference to the issue of file size, once we get beyond the hurdle of old versions of IE that don't support it!
ok – macromedia flash file could be smaller, but … macromedia flash animation need a flash player …
Hi Rick,
Packt Publishing is looking for Technical Reviewers on "Learning Adobe Edge" If interested in reviewing it, contact alkan@packtpub.com
Thanks.
@Jason: Whilst bytecode compiling might seem attractive this has aspect of Flash never stopped people from getting to the code as there are many tools that can decompile swf files. I'm not sure how having this a feature in HTML5 or the browser would have any more success in preventing people from gaining access to your code.
How about commercial apps? All your intellectual property is hanging in the wind all code available to be seen in the javascript files. HTML5 should have capability to compile the js to bytecode with some level of obfuscation.
@Lawrence: I think I just see Edge's role as being an app that can feed into the workflow of other apps rather than have to become part of existing apps.
Being able to wrap something created in Edge and have it take the form of a Widget in DW is an interesting notion, that could be a good feature for Edge if it could save out animations as Widgets!
Cheers for the discussion :)
@Rick Curran:.. Now I'm confused ;^)… perhaps I'm seeing it from a different vantage point,…. would i be fussed if DW got bulkier? probably NOT… it's the end result/output that matters…(I remember the days when Photoshop would fit on a couple of floppy disks)..I also remember photoshop & imageready as part of a workflow… you don't see that any more… I guess the point I'm making is that I'd prefer to see DW to be the authoring tool of choice (for those that already have DW and have invested significant years using the product)than introducing yet another tool that needs to form part of a workflow.
I think the introduction of Widgets in DW is a good approach… kinda like add-ons that can give you the flexibility & functionality… if Edge could be made availble or (woven into dreamWeaver)that would be awesome.
Any way that's my 2cents..
Thanks Rick for the conversation/discussion cheers
@Lawrence: I wasn't really meaning 'bulky' in regard to the output of it , javascript etc, I was thinking of the bulkiness of having that as part of Dreamweaver itself.
A lot of people wouldn't want that feature in the app or use it. I would guess that it would also increase the development effort required as Adobe would have to maintain Dreamweaver and Edge with similar features. Much better to have Adobe focus on Edge as the app that does that than to include the same feature in DW. I can think of a lot of other improvements I'd rather see in DW over and above Edge-like features.
@Rick Curran:.. Ah that's because the old timeline was bulky…. there's no reason why the new timeline (hint, hint ADOBE) shouldn't have a simplified frontend UI that connecets with the JS framework of your choice.
@Lawrence: Personally I find the thought of adding the timeline back into Dreamweaver quite scary! I'd be concerned that it would just add a lot of bulkiness and complexity to it.
There definitely needs to be some good connection between Dreamweaver and Edge though to make it easy to add and edit animations once added to a website layout.
Thanks!
Hmmm I'm thinking about a time when Dreamweaver(Macromedia owned days) had a timeline …. if only it continued to exist in DW with the addition to simply define your framework (spry/jQuery/ etc)
…live in hope
@Jon z: Yep, minifying the JS will definitely help and I do mention that using a CDN version of these files would also help make the payload less bulky and make use of cached files.
It's true that Edge only really works with jQuery, although as long as the jQuery code is namespaced there's no reason you couldn't use another framework, although that would just contribute further to the previous issue of file size / payload. I think mainly jQuery is really the most popular JavaScript framework and as such is the reason it's getting used here.
Regarding my spam test, I would presume the temperature of ice is the same in both northern and southern hemispheres? ;) (I'm guessing you misread that as "Is *it* hot or cold?" – I can see how that would be dumb!)
Thanks for your comment!
If your major complaint is the filesize, it's probably worth pointing out that about 50% of the filesize comes from the included jquery framework file. This can be minified and gzipped to something more like 30kb, and moreover probably any site that's including this stuff already has a framework loaded, maybe from a public CDN. A bigger flag in my mind besides the filesize would be that edge (apparently) only works with a specific framework (jquery) at this time .. maybe future versions will have configuration options for using mootools, dojo, prototype, and other frameworks.
Also, your spam test is stupid, I'm trying to post this from a different hemisphere.
I had the same empty feeling after my first "demo" (yes, a bouncing ball). I agree when you say "I think my biggest concern about these tools is that they simply become a swap-in replacement for Flash and that people start to use them purely from a visual perspective and not considering the structure and semantic meaning which underlies all HTML pages." I hope this doesn't get thought of as some WYSIWIG animator. The environment feels like flash to me, and it would be great if it had something like Dreamweaver's Code View or Split view so I can edit the JS and HTML files right there in the same IDE.