My thoughts on Adobe Edge
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:
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.
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
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.
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.
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!
Originally published on 2011-08-02 00:50:33 by Rick Curran
Last edited on 2011-08-03 10:13:04 by Rick Curran
Left by Gabe on 2011-08-02 19:19:17 #
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.
Left by Jon z on 2011-08-02 21:44:48 #
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.
Left by Rick Curran on 2011-08-03 14:22:37 #
@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.
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!
Left by Lawrence on 2011-08-04 07:20:11 #
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
Left by Rick Curran on 2011-08-04 11:11:25 #
@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.
Left by lawrence on 2011-08-12 00:45:14 #
@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.
Left by Rick Curran on 2011-08-12 12:14:58 #
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.
Left by lawrence on 2011-08-15 00:48:04 #
@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
Left by Rick Curran on 2011-08-17 10:30:35 #
@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 :)
Left by Jason on 2011-12-08 19:29:48 #
Left by Rick Curran on 2011-12-09 16:53:23 #
@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.
Packt Publishing is looking for Technical Reviewers on "Learning Adobe Edge" If interested in reviewing it, contact firstname.lastname@example.org
Left by Alex on 2012-06-02 22:09:36 #
ok - macromedia flash file could be smaller, but ... macromedia flash animation need a flash player ...
Left by Rick Curran on 2012-06-06 12:04:23 #
@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.
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!