Wednesday, November 19th, 2008
Category: Editorial
, Flash, HTML
As it is Adobe MAX this week, there is a lot of talk about the Flash platform. How does this relate to the Open Web? Well, it turns out that Dion and I have been discussing how Flash can join and become a part of the Open Web.
Dion kicks things off with his blog post “The Flash Platform: How Adobe could join the Open Web to take on…”. He first talks about how developers see Flash today versus other options:
Adobe (via Macromedia) has traditionally been a Web designer company, but developers haven’t jumped in to the same degree (note: not to say they haven’t been wildly successful!). I think that the perception is something like this:
Dion discusses how Adobe has an opportunity to position themselves relative to Silverlight much more strongly in the Open Web camp:
With Silverlight making a huge charge I worry about a world where you have “Best viewed in Silverlight and IE” (which in fact is “only viewed in…”) and people often ask: “But isn’t Flash just as bad?”
Adobe has an opportunity here. They can move to the right and Flash could become strongly in the Open Web camp. Then we would all be stronger as we come up against Silverlight :)
The next logical question related to this is open sourcing Flash:
The conversation tends to end up with opensourcing Flash, which I think will happen at some point through necessity, and the sooner the better (for everyones sake). Flex has a loyal base and has some open source help, but hasn’t gotten the love that it could get because it sits on top of something that isn’t open source itself. It is hard to get excited about an open source tech that sits on top of the same vendors proprietary platform!
I agree with Dion that open sourcing Flash and having it join the Open Web camp is a very compelling idea. Open source would just be the first step, though, so following up on Dion’s post I put together an editorial titled “How Flash Can Integrate With The Open Web”:
As Dion points out open sourcing Flash is one big part of making this happen, but another huge aspect would be to have Flash and Flex integrate better into the web stack and be less of a ‘black box’ on the screen…The important point is to integrate Flash and Flex more deeply into how the Open Web works:
- Cross-Platform Standards
- No Vendor Lock-in
- Anyone Can Innovate
- Powerful, Universal Clients
- Open Source Implementations
- Mashable, Searchable, and Integrated
I give a list of suggested ways to do this; the important thing is to have Flash integrate more deeply — these are just some suggestions to kick things off. Here are some of them; click on them to read more in-depth how this might work:
I wrap up with a conclusion:
At the end of the day Adobe is a tools company, a really damn good tools company actually. Doing the above should allow Adobe to continue creating powerful tools that help authors and content creators while expanding the size of the market they can target.
The above list was just a suggestion to kick things off. The real focus is on having Flash integrate into the web stack better itself (and evolving both Flash and the web stack themselves into the future).
How do you see this happening?
Saturday, September 27th, 2008
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…
Thursday, September 4th, 2008
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:
-
-
var uploader = new dojox.form.FileInputFlash({
-
uploadUrl:"http.localHost/FileUpload.php",
-
button:myButton,
-
uploadOnChange: false,
-
selectMultipleFiles: true,
-
fileMask: ["All Images", "*.jpg;*.jpeg;*.gif;*.png"],
-
degradable: true
-
});
-
Want to try it out?
This comes after the YouTube uploader that uses Gears.
Monday, August 4th, 2008
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.
Wednesday, June 25th, 2008
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.
Sunday, June 1st, 2008
Category: Flash, Showcase
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.
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.
Tuesday, May 6th, 2008
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:
-
-
_global.lang = {
-
hitch: function(scope, method){
-
if(!method){
-
method = scope;
-
scope = _global;
-
}
-
var args;
-
if(arguments.length>2){
-
args = arguments;
-
args.shift();
-
args.shift();
-
}
-
if(typeof(method) == "string"){
-
return function(){ scope[method].apply(scope, args) };
-
}
-
return function(){ method.apply(scope, args) };
-
}
-
}
-
In part two he adds support for dojo.connect(), resulting in:
JAVASCRIPT:
-
-
_global.lang = {
-
__conListeners:{},
-
__id:0,
-
connect: function(source, event, target, callback){
-
var hitched = this._hitch(target, callback);
-
-
var listener = new Object();
-
listener[event] = function(args){
-
hitched();
-
}
-
-
if(!source.broadcasters) {
-
source.broadcasters = {};
-
AsBroadcaster.initialize(source)
-
}
-
-
source.addListener(listener);
-
-
if(!source.broadcasters[event]){
-
source[event] = function(){
-
source.broadcastMessage(event, arguments);
-
}
-
source.broadcasters[event] = true;
-
}
-
-
var id = "connect_"+this.__id++;
-
this.__conListeners[id] = {listener:listener, source:source};
-
return id;
-
}
-
-
disconnect: function(id){
-
var con = this.__conListeners[id];
-
if(con){
-
con.source.removeListener(con.listener);
-
con = null;
-
}
-
}
-
}
-
Monday, April 28th, 2008
Category: Component, Flash, JavaScript, MooTools
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:
-
-
var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
-
'url': $('form-demo').action,
-
'fieldName': 'photoupload',
-
'path': '../../source/Swiff.Uploader.swf',
-
'onLoad': function() {
-
$('demo-status').removeClass('hide');
-
$('demo-fallback').destroy();
-
}
-
});
-
-
/**
-
* Various interactions
-
*/
-
$('demo-browse-all').addEvent('click', function() {
-
swiffy.browse();
-
return false;
-
});
-
-
$('demo-browse-images').addEvent('click', function() {
-
swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
-
return false;
-
});
-
-
$('demo-clear').addEvent('click', function() {
-
swiffy.removeFile();
-
return false;
-
});
-
-
$('demo-upload').addEvent('click', function() {
-
swiffy.upload();
-
return false;
-
});
-
Thursday, March 27th, 2008
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:
-
-
<!--
-
Smart developers always View Source.
-
This application was built using Adobe Flex, an open source framework
-
for building rich Internet applications that get delivered via the
-
Flash Player or to desktops via Adobe AIR.
-
Learn more about Flex at http://flex.org
-
// -->
-
What do you think?
Monday, March 24th, 2008
Category: Flash, Showcase
Alistair Rutherford has written a nice looking Flex application that visualizes the Social 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.
