Wednesday, October 15th, 2008

FancyUpload for Flash 10 to fix your uploader

Category: Adobe

This is the week of the plugin. First we had the launch of Silverlight 2, and then, quickly on the back of that we get Adobe Flash 10 at the same time as the entire Creative Suite 4 (which has great Flash authoring tools of course).

One of the security features in Flash 10 is the requirement for the user to act on a Flash movie to be able to access certain APIs. This has caused some Flash upload components to break (ones that use a hidden Flash movie, such as SWFUpload Flickrs FancyUpoad). The solution is quite simple, you need to make the button that launches the upload a Flash control itself (versus an HTML button for example).

Harald Kirschner has jumped on it and created a FancyUpload for Flash 10.

You can check out the showcase and do a view source to see that the link is not a link :)

What else is in Flash 10? Here are the top features that Adobe mentions:

3D effects

Create more intuitive, engaging interfaces using built-in support for 3D effects. Get started quickly without being a 3D master by designing in 2D and easily transforming and animating in 3D. Fast, extremely lightweight, and simple-to-use APIs, along with 3D tools in Adobe® Flash® CS4 Professional software, make motion that was previously accessible only to expert users via ActionScript® language or custom third-party libraries available to everyone.

Custom filters and effects

Create high-performance, real-time effects for cinematic experiences that quickly engage users. With new Adobe Pixel Bender™, the same technology behind many filters and effects in Adobe After Effects® software, these dynamic and interactive effects can be used both in production with After Effects CS4 and live with Flash Player 10. The Pixel Bender just-in- time (JIT) compiler can also be used to process other types of data, such as sound or mathematical functions, asynchronously in a separate thread.

Advanced text support

Take advantage of a new, flexible text layout engine that brings print-quality publishing to the web, building on more than 25 years of Adobe expertise in typography. Gain more control over text layout using an extensible library of ActionScript 3.0 text components to flow text and sophisticated typographic elements such as ligatures across multiple columns, around inline images, bidirectionally, vertically, or chained together. Create multilingual rich Internet applications (RIAs) using device fonts that can now be anti-aliased, rotated, and styled, or build your own unique text components.

Dynamic sound generation

Use enhanced sound APIs to dynamically generate audio and create new types of audio applications such as music mixers and sequencers, real-time audio for games, and even audio visualizers. Work with loaded MP3 audio at a lower level by extracting audio data and supplying it to the sound buffer. Process, filter, and mix audio in real time through the Pixel Bender JIT compiler to extend creative freedom beyond the visual experience.

Drawing API

Perform runtime drawing more easily with restyleable properties, 3D APIs, and a new way of drawing sophisticated shapes without having to code them line by line. Developers can tweak parts of curves, change styling, replace parts, and use custom filters and effects, delivering improved throughput, creative control, and greater productivity. Enhancements to the Drawing API add the z dimension, real perspective, textured meshes in 3D space, a retained graphics model, read/write rendering, and triangle drawing with UV coordinates, while adding memory and improving performance.

Hardware acceleration

Use the hardware processing power of the graphics card to paint SWF files into the browser and accelerate compositing calculations of bitmaps, filters, blend modes, and video overlays faster than would be performed in software.

Vector data type

Use the new typed array class for better performance, efficiency, and error checking of data.

Dynamic Streaming

Show exceptional video with streams that automatically adjust to changing network conditions. Leverage new quality-of-service metrics to provide a better streaming experience.

Speex audio codec

Take advantage of the new, high-fidelity and open source Speex voice codec, which offers a low-latency alternative for voice encoding. Flash Player also supports ADPCM, HE-AAC, MP3, and Nellymoser audio.

File upload and download APIs

Bring users into the experience by letting them load and save files from your web application. New file reference runtime access allows local processing of data without roundtripping to the server.

Posted by Dion Almaer at 4:06 pm
13 Comments

+++--
3.9 rating from 24 votes

13 Comments »

Comments feed TrackBack URI

To complete the possible solutions: YUI has also an uploader component (http://developer.yahoo.com/yui/uploader/) with clickable overlay (for all flash versions, FancyUpload adds it only for Flash 10). Only problem I noticed with YUI, that it fails with FF3+AdBlock.
I’m looking forward to feedback and to see how other upload libraries evolve after that setback from Adobe.

Comment by digitarald — October 15, 2008

It’s probly worth noting that his awesome FancyUploader is a MooTools plugin. I know you guys are hip to jQuery, but that’s no reason to gloss over the other awesome libraries out there.

Comment by SubtleGradient — October 15, 2008

To the above comment, I just found a fix (and pushed it to Flickr) for the Firefox 3 + AdBlock case. It’s rather odd, but it seems to be a timing issue relating to ABP and Firefox where the plugin is destroyed and recreated – thus, causing a very cryptic “top is undefined” JS error. Apparently extensions with “content policies” can affect plugins in this way.
 
YUI’s uploader JS (version 2.6) sets a tabIndex property and also an “owner” property on the SWF after grabbing a reference to it (this._swf I think.) I removed the tabIndex and referenced a global object instead of tacking “owner” onto the .swf, and it eliminated the JS error.
 
Amusingly, putting an alert(‘ding’) right after writing out the .SWF via JS also solved the issue, further suggesting it’s timing-related.
 
Very strange, but there it is. John Resig said he has seen this issue crop up with Java applets as well, FWIW.

Comment by Schill — October 15, 2008

I guess I’m missing something, whats so great about using flash as a multi file upload?

Comment by TNO — October 15, 2008

More info between AdBlock Plus (developer), and Mozilla. The issue didn’t exist in Firefox 2, and appears to have regressed.

Comment by Schill — October 15, 2008

@TNO “whats so great about using flash as a multi file upload?”

The clue is in the question :) The other viable alternative is Java, of course, but Java applets on the web make me want to hammer my keyboard and scream like an ADHD chimp during a banana famine.

Comment by jeromew — October 15, 2008

Awesome work Harald!

Comment by davidwalsh83 — October 15, 2008

Ugh! Harald.. now Adobe will have to think of yet another way to ruin it for us! :(

Way to go making our lives easier, and costing Adobe some more pain. :(

Comment by ibolmo — October 15, 2008

@TNO, re: Why Flash: I wrote a bit about the Flickr web uploadr (which uses YUI’s uploader component), on our dev code blog. If nothing else, it has rainbows in the header and stats on how many times we’ve deployed this week in the footer to keep you entertained. ;)

Comment by Schill — October 15, 2008

This worrying situation

I use the library SWFUpload, in many applications

The solution is not simple, forcing switch to other libraries like FancyUpload, the problem rises to extend the new version of Flash Player 10, not taking enough time to make the change

Many applications are affected by this situation

Comment by JorgeR — October 16, 2008

@digitarald – “The Uploader Control requires Flash Player 9.0.45 or higher”. Fancy and YUI appear to support the same versions of the flash player.
Poo to Adobe for breaking this. Yay for security though.

Comment by DanF — October 16, 2008

Latest Flash 10 affects even popular site like slideshare.net, I feel so sorry to Adobe, they have ruined the web. But eventually we all need to run the fix ;-p

Comment by freddywang — October 18, 2008

Hi,

The is another simple solution. Use TWG Flash Uploader from http://www.tinywebgallery.com. Because there the browser windows is not opened by Javascript but by the flash directly this flash does not have any problems after updating to flash 10.

/Michael

Comment by mdempfle — October 21, 2008

Leave a comment

You must be logged in to post a comment.