Developing a file upload applet for Velodoc with Flash

This article follow a recent article entitled Designing gadgets and widgets for uploading files to Memba Velodoc.

ActionScript 2 and the Flash 8 IDE

This project was my first trial at Flash and in my opinion, Flash 8 presents two main difficulties for .NET developers:

1. The IDE offers rudimentary development and debugging features;
   
2. Scope and addressing of objects (relative or absolute, using _parent or this) is not always clear. Sometimes relative won't work, and this is fixed with absolute addressing. The rule seems to be using relative unless you cannot get around it.
   

Apart from that, Flash is not a great development tool and I would not consider large projects in Flash, but it does a nice job for small applets.

Flash security

As always, sandboxed security is not intuitive and error messages are unfriendly when you get them, so be prepared to spend a significant amount of development time on security. Most issues are explained at:

• http://www.adobe.com/devnet/flash/articles/fplayer_security.html
  
• http://www.adobe.com/devnet/flash/articles/fplayer8_security.html
  

You can also get information about the IE content activation issue at:

• http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=7c29e252
  

The user interface logic

I have opted for a form application with the following forms:

• The application form contains the background elements and the action script.
  
• The outbox form contains a To, Subject and Message text inputs and a "Select file" button. It also contains a label to display the file name and a Send button.
  
• The progress form contains a progress bar and a Cancel button
  
• The settings form allows you to define your settings.
  
• The success form confirms when a use case completed ok.
  
• The error form displays an error message when needed.
  

Except a couple of behaviours, all our script is written in Frame1 of the application form. Navigation between forms is easy to build and does not raise any major issue.

The file upload process

The file upload process using FileReference is simple and fairly well documented in the following documentation:

• http://livedocs.macromedia.com/labs/as3preview/docs/00000142.html
  
• http://www.codeproject.com/aspnet/FlashUpload.asp
  
• http://markshu.ca/imm/flash/tutorial/fileReference.html
  
• http://www.flash-db.com/Tutorials/upload/
  

Nevertheless, two trick needs to be pointed out:

First, FileReference posts a 0 byte request to the designated URL before posting the file. You need to make sure that your server code does not store a 0 byte file in this case.

Second, FileReference emits an invalid multipart request and our server logic got caught. At the end of the request, you will find something like:

------------GI3ae0Ef1GI3cH2KM7gL6ae0GI3Ef1

Content-Disposition: form-data; name="Upload"

Submit Query

------------GI3ae0Ef1GI3cH2KM7gL6ae0GI3Ef1

which should have been:

------------GI3ae0Ef1GI3cH2KM7gL6ae0GI3Ef1

Content-Disposition: form-data; name="Upload"

Submit Query

------------GI3ae0Ef1GI3cH2KM7gL6ae0GI3Ef1--

The differences being an additional \r\n between the form-data and value and a missing double hyphen at the end of the request. Note that this happens when the applet runs in the Flash environment, it does not happen when the applet runs as a gadget within the Vista sidebar, but in this case, there is an additional random character at the end. We have updated our server code to handle these specificities.

Calling web services

There are three ways to call web services in Flash:

1. Remoting is the most flexible, most complicated way. It is the low level stuff.
   
2. The web service component is a data binding control which does not require any programming. You get it to work just by settings properties in dialogs.
   
3. Finally mx.services.* have high level classes that make calling web services from ActionScript really easy.
   

Our requirements are not terribly complex and the mx.services.* classes have been the way to go. There is only one trick, which I have not been able to find either on the web or in the flash documentation, which is how to pass complex objects as parameters.

Styling our Flash gadget

Styling the flash applet certainly represents the largest amount of code and time spent. We needed gradients and bevel effects that would resize. To achieve that, I have used the Flash Drawing APIs described at http://www.adobe.com/devnet/flash/articles/precision_drawing.html and skinning techniques described at http://www.adobe.com/devnet/flash/articles/skinning_3.0.html.

I have decided to postpone changing colours and localization to a future version.

Debugging and testing

For debugging and testing, you will find the following tools helpful:

• Get a debug version of the Flash player at http://download.macromedia.com/pub/flashplayer/updaters/9/flashplayer_9_plugin_debug.exe
  
• Get Flash switcher at https://addons.mozilla.org/fr/firefox/addon/3649
  
• Get Flash tracer at https://addons.mozilla.org/fr/firefox/addon/3469 (With Flash 9, you need to change the path in Flash Tracer Options to C:\Documents and Settings\<user>\Application Data\Macromedia\Flash Player\Logs\flashlog.txt)
  

The applet works fine in Internet Explorer. There is a bug which we have experimented in Firefox: You get a US keyboard if you define wmode="transparent". This is documented at http://blog.headlondon.com/archives/no-wmode-please-were-british/ but seems to have been corrected . Other issues that you may experience are documented at http://www.asserttrue.com/articles/2006/11/17/firefox-and-flash-swf-selection-and-focus-problems.

Result

The result is available at http://www.velodoc.net/Gadgets/Velodoc.Gadget.aspx.

If you want to participate and improve this applet, please contact me. I'll be very happy to share the code with active contributors.

Next, I'll explain how to turn this applet into gadgets and widgets for all major platforms.