Activate your free membership today | Log-in

Saturday, September 27th, 2008

Flash 10 and the bad news for JavaScript interaction

Category: Accessibility, Adobe, Flash, Security

Right now you can use Flash to work around a lot of JavaScript limitations and many products use an invisible Flash movie to for example batch upload files (Flickr, Wordpress), play movies in a screenreader accessible manner (with DHTML controls outside the main movie - Yahoo Video, for example) or automatically add content to the browser clipboard (snipurl.com).

All of these will cease to work without user interaction in flash as reported on the adobe devnet. There are very good reasons for it as explained by Lee Brimelow but it is a real problem that will cease to make Flash a useful tool to patch inaccessible solutions.

As long as you cannot access a Flash movie in non-Internet Explorer browsers via keyboard, there will be no such thing as an accessible flash page. Research findings presented at Scripting Enabled last week showed that for example many screen reader users skip Flash as soon as they hear that there is a movie on the page, regardless of how much effort you put in to make the movie itself keyboard enabled. DHTML controls worked around that issue - a button that cannot be accessed is very secure, but also pointless.

There must be some middle ground there somewhere…

Posted by Chris Heilmann at 4:11 pm
22 Comments

++++-
4.3 rating from 34 votes

Thursday, September 4th, 2008

Dojo Multifile Uploader with Flash

Category: Dojo, Flash

SitePen continues their work on Deft with a multi-file uploader:

The Dojo Toolkit now has support for multi-file uploads, thanks to the new Deft project. The dojox.form.FileUploader class embeds a hidden SWF file in the page which, when triggered, will open a system dialog that supports multiple file selection, and also file masks, which allows the user to filter their selection by file type.

Better yet, it’s fully degradable. If the user does not have version 9 or greater of the Flash Player installed it can, depending on the options you set, present the user with a standard HTML file input instead (or the option to install the latest Flash Player). The HTML form also supports multiple files, although due to browser restrictions, only one can be selected at a time. But they are all uploaded at once.

A major benefit to developers is the flexibility to supply your own styled upload button. For example, a paperclip icon toolbar button in an email application should not look like the standard file input with a text field followed by a “browse …” button. What inspired this design was working on projects where designers and clients would hand me a specification which would say, “the upload button looks like this“.

To use it? Fairly simple:

JAVASCRIPT:
  1.  
  2. var uploader = new dojox.form.FileInputFlash({
  3.         uploadUrl:"http.localHost/FileUpload.php",
  4.         button:myButton,
  5.         uploadOnChange: false,
  6.         selectMultipleFiles: true,
  7.         fileMask: ["All Images", "*.jpg;*.jpeg;*.gif;*.png"],
  8.         degradable: true
  9. });
  10.  

Want to try it out?

This comes after the YouTube uploader that uses Gears.

Posted by Dion Almaer at 10:09 am
7 Comments

+++--
3.6 rating from 29 votes

Monday, August 4th, 2008

Deft-fully using Dojo and Flex

Category: Dojo, Flash

Tom Trenka of SitePen has created a new top-level Dojo package called Deft which "focuses on ActionScript components created in support of the various projects within the Dojo Toolkit (mostly for DojoX). Deft source files are well organized based in part on the organization of other Dojo Toolkit projects, as well as the package structure required by the Flex compiler. Most Flex applications are based on the Flex AS3 Application class, which forces you to write at least one “controlling” MXML file in order compile your code. Instead of this, Deft components inherit primarily from the Sprite class — which allows you to write pure ActionScript code."

It contains a few goodies in it including the multi-image uploader, and pre-alpha quality support for dojox.gfx. Future plans include support for audio and video. "Hopefully Adobe will continue its current path towards being open source friendly, helping Deft flourish."

The article goes into detail on downloading the Flex SDK so you can build applications with it.

This is an interesting experiment in the melding of Flash and Ajax techniques. I would love to see the Flash player giving us more access via simple JavaScript, so we don't even need to create SWF bridges.

Posted by Dion Almaer at 6:38 am
5 Comments

+++--
3.9 rating from 16 votes

Wednesday, June 25th, 2008

flXHR: Flash based XHR from flensed

Category: Ajax, Flash, JavaScript, Library

Kyle Simpson has announced a new family of opensource projects called flensed and the first project being flXHR which "utilizes javascript+flash to create a complete, literal drop-in replacement (by being API identical) for the native browser XHR (Ajax) communication mechanism. However, flXHR uses Flash Player's security model to enable direct cross-domain communication, and also has a number of other very helpful extensions."

http://flxhr.flensed.com/code/tests/flxhr-4.html

There are a number of demos which illustrate how it easy it is to take the API-compatible flXHR and swap it to any of your favorite JS frameworks (Dojo, Prototype, YUI, ExtJS, etc) in place of its usage of native XHR... once the simple adapt/swap happens, everything else about the framework library communication works the same, because flXHR speaks the same familiar protocol and API, and so it really is what I like to call "set it and forget it" good.

Hasn't this been done before?

There have been several other attempts at similar things before, including SWFHttpRequest, FlashXMLHttpRequest, Fjax, and F4A. However, all those fell short of the mark in different ways. On my site, there are comparison charts and detailed FAQ's which show how flXHR stands up to these predecessors, and exceeds them in very important and powerful ways. I believe flXHR has accomplished its goal, which was to be *the* complete solution for SWF-based Ajax calls as an identical API-compatible drop-in replacement for native XHR, not to mention many helpful improvements including robust error callback handling, timeouts, and convenience configuration functions, to name a few.

Posted by Dion Almaer at 9:53 am
21 Comments

++++-
4.3 rating from 31 votes

Sunday, June 1st, 2008

Acrobat.com: PDF and Flash sitting in a tree

Category: Flash, Showcase

Acrobat.com

Ever since Macromedia and Adobe merged, we have been waiting for a day where PDF and Flash played really nice together, and today is the day. Very symbolic for the folks from the companies before the merge.

As TechCrunch says:

At the same time Adobe is launching Acrobat.com, it is releasing Acrobat 9—a major upgrade to one of its anchor desktop apps. the big news here is that for the first time, Adobe’s PDF-creating desktop software will supports Flash. So people can now create documents with embedded Flash movies from YouTube, or developers can design entire new skins for electronic documents using Adobe’s Flex framework—the same programming tool they use to create Web applications.

PDF documents made with Acrobat 9 also support collaboration among multiple authors and reviewers over the Internet, making them connected documents. Best of all, they no longer take forever to load. The next step is for Adobe to make it easy to turn any PDF into a Web page, and vice versa.

Acrobat.com Services

This is the biggest news for me. Acrobat.com itself is a very nice integration of Buzzword, ConnectNow, PDF, and Share. It feels quite snappy (despite the "loading..."), and there are a lot of nice animations of course. A good showcase for Flex.

Posted by Dion Almaer at 11:46 pm
2 Comments

+++--
3.9 rating from 23 votes

Tuesday, May 6th, 2008

Porting Dojo Methods to Flash

Category: Dojo, Flash

Mike Wilcox has started a nice series of posts on porting Dojo methods to Flash as a homage for Open Screen (aside: I applaud Adobe's intentions, but need to see a non-assert of their IP before I can do anything with it.)

In part one of the series Mike ports dojo.hitch to ActionScript:

JAVASCRIPT:
  1.  
  2. _global.lang = {
  3.         hitch: function(scope, method){
  4.                 if(!method){
  5.                         method = scope;
  6.                         scope = _global;
  7.                 }
  8.                 var args;
  9.                 if(arguments.length>2){
  10.                         args = arguments;
  11.                         args.shift();
  12.                         args.shift();
  13.                 }
  14.                 if(typeof(method) == "string"){
  15.                         return  function(){ scope[method].apply(scope, args) };
  16.                 }
  17.                 return function(){ method.apply(scope, args) };
  18.         }
  19. }
  20.  

In part two he adds support for dojo.connect(), resulting in:

JAVASCRIPT:
  1.  
  2. _global.lang = {
  3.         __conListeners:{},
  4.         __id:0,
  5.         connect: function(source, event, target, callback){
  6.                 var hitched = this._hitch(target, callback);
  7.  
  8.                 var listener = new Object();
  9.                 listener[event] = function(args){
  10.                         hitched();
  11.                 }
  12.  
  13.                 if(!source.broadcasters) {
  14.                         source.broadcasters = {};
  15.                         AsBroadcaster.initialize(source)
  16.                 }
  17.  
  18.                 source.addListener(listener);
  19.  
  20.                 if(!source.broadcasters[event]){
  21.                         source[event] = function(){
  22.                                 source.broadcastMessage(event, arguments);
  23.                         }
  24.                         source.broadcasters[event] = true;
  25.                 }
  26.  
  27.                 var id = "connect_"+this.__id++;
  28.                 this.__conListeners[id] = {listener:listener, source:source};
  29.                 return id;
  30.         }
  31.  
  32.         disconnect: function(id){
  33.                 var con = this.__conListeners[id];
  34.                 if(con){
  35.                         con.source.removeListener(con.listener);
  36.                         con = null;
  37.                 }
  38.         }
  39. }
  40.  

Posted by Dion Almaer at 7:12 am
1 Comment

++++-
4.5 rating from 14 votes

Monday, April 28th, 2008

FancyUpload: Swiff meets Ajax

Category: Component, Flash, JavaScript, MooTools

FancyUpload

Harald Kirschner has created a new version of FancyUpload "a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar."

A good example is the Queued Photo Uploader which is coded by:

JAVASCRIPT:
  1.  
  2. var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
  3.         'url': $('form-demo').action,
  4.         'fieldName': 'photoupload',
  5.         'path': '../../source/Swiff.Uploader.swf',
  6.         'onLoad': function() {
  7.                 $('demo-status').removeClass('hide');
  8.                 $('demo-fallback').destroy();
  9.         }
  10. });
  11.  
  12. /**
  13. * Various interactions
  14. */
  15. $('demo-browse-all').addEvent('click', function() {
  16.         swiffy.browse();
  17.         return false;
  18. });
  19.  
  20. $('demo-browse-images').addEvent('click', function() {
  21.         swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
  22.         return false;
  23. });
  24.  
  25. $('demo-clear').addEvent('click', function() {
  26.         swiffy.removeFile();
  27.         return false;
  28. });
  29.  
  30. $('demo-upload').addEvent('click', function() {
  31.         swiffy.upload();
  32.         return false;
  33. });
  34.  

Posted by Dion Almaer at 8:37 am
4 Comments

++++-
4.4 rating from 70 votes

Thursday, March 27th, 2008

Adobe Photoshop Express Launches

Category: Adobe, Flash, Showcase

The launch of Adobe Photoshop Express has been much anticipated. We are seeing the move of a large software company going from desktop to Web for a major application.

As Erick Schonfeld points out "Photoshop Express is by no means just Photoshop ported onto the web."

I am a big fan of Picnik and for awhile was using it quite regularly, so I wanted to see how they compared.

It seems like Photoshop Express is pretty limited and seems very much focused on taking images, putting them online, and doing little touch-ups. One of the things that I am always doing is taking a picture and adding text and shapes to it, and this isn't available, so I kinda don't know when I would use this other than for simple cropping and resizing.

The interface is sleek and Flash-y but somehow doesn't feel as nice as Picnik to me.... I don't know why.

View Source has some fun though:

HTML:
  1.  
  2. <!--
  3. Smart developers always View Source.
  4. This application was built using Adobe Flex, an open source framework
  5. for building rich Internet applications that get delivered via the
  6. Flash Player or to desktops via Adobe AIR.
  7. Learn more about Flex at http://flex.org
  8. // -->
  9.  

What do you think?

Adobe Photoshop Express

Posted by Dion Almaer at 2:14 am
8 Comments

+++--
3.5 rating from 11 votes

Monday, March 24th, 2008

FaviconGrabber and Social Graph

Category: Flash, Showcase

Alistair Rutherford has written a nice looking Flex application that visualizes the Social Graph API:

Flex Graph API

Alistair told us about the application, and some of the fun features:

The initial version was a bit boring looking so I thought it would be nice to pull the 'favicons' for the sites returned in the results. I have detailed how I did this here

Because I could not fetch the icons directly using HTTPService I have used a cgi proxy script written in Python to fetch the target icons and convert them into a Base64 encoded string before returning the data to the Flex application.

The Flex application decodes the Base64 and then passes the data to a modifed version of the IconLoader class from the flexlib library.

The modifications to flexlib took the form of adding in support for 8bpp and 24bpp images.

The graph is implemented using the flexvizgraphlib visualisation component from here:

The application also uses a novel IFrame component which lets you
embed html pages directly into your Flex application.

Posted by Dion Almaer at 10:11 am
1 Comment

+++--
3.5 rating from 8 votes

Monday, March 17th, 2008

Dojo Storage updated for 1.0

Category: Dojo, Flash, Gears

Brad Neuberg, a partner of crime on the Gears team, has released an update to Dojo Storage that has it cooking with gas on the new Dojo 1.x codebase:

Dojo Storage makes it possible to store large amounts of data (hundreds or megabytes of K) on the client-side, way beyond the 4K limit of cookies. Developers are given a simple key/value storage abstraction, similar to a hash table. What makes Dojo Storage unique is that it automatically determines the best way to achieve this. If Google Gears, a small open-source plug-in that teaches current browsers new tricks, is present then this will be used for storage; if the browser supports HTML 5 DOM Storage, such as Firefox 2, then this is used; and finally, if none of the others are available, then a hidden Flash applet is used to store the data permanently. There are even Adobe AIR storage providers (thanks to SitePen and Adobe) if you are running in an AIR environment!

Dojo Storage has been around for a few years. However, when Dojo made the big move to the Dojo 1.0 architecture, the Flash and HTML 5 storage providers broke; plus, new versions of Flash and new browsers made the old design inefficient. I have seriously re-factored the Flash storage system to be much faster and simpler and fixed bugs in the HTML 5 and Gears storage systems. There is now a new storage.js profile build that you can grab and include in your page to easily use Dojo Storage with the three main browser storage providers: Gears, HTML 5, and Flash. The new Dojo Storage will come out as part of the Dojo 1.1 release coming soon.

I've created a screen cast demoing the different storage providers in action:

Posted by Dion Almaer at 6:35 am
1 Comment

+++--
3.7 rating from 15 votes

Wednesday, February 27th, 2008

Adobe extending Flash platform: Run C, C++, Java and more

Category: Adobe, Flash

Paul Krill picked up on Kevin Lynch saying "It's basically a way to take other languages and make them run on top of Flash Player" as he answered a question from the audience at Engage the other night.

Expanding on the project, Ted Patrick, Adobe technical evangelist, said the technology would allow for cross-compiling existing code from C, C++, Java, Python, and Ruby to ActionScript. This would enable components written in those languages to be integrated into a larger project, Patrick said. "That code becomes perfectly portable into our application platform," he said.

For example, an alternative PDF renderer providing a lighter version of PDF could be cross-compiled, and the Flash Player could read it and display PDFs.

"Right now, everything has to be written in ActionScript or our lower level byte code languages," said Patrick.

In Flash Player, everything has to compile down to SWF byte code, Patrick said. The byte code language inside SWF is called ActionScript byte code.

Of course, this has been talked about quite some time ago. As Tamarin grows up and becomes a solid VM, we are likely to see the polyglot come to being in full force.

Posted by Dion Almaer at 6:20 am
12 Comments