Activate your free membership today | Log-in

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

+++--
3.9 rating from 18 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 22 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.5 rating from 65 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.3 rating from 10 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.9 rating from 14 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
11 Comments

++++-
4.1 rating from 17 votes

Monday, February 25th, 2008

Adobe AIR v1.0 & Flex 3.0 Released; New Adobe Open Source Site Launched

Category: Adobe, Flash, www.eng.ajaxian.com Announcements

Continuing their march into the RIA space, Adobe announced today the official release of AIR v1.0 and Flex 3.0.

Adobe has taken the beta off of the wrapper as their have released both AIR 1.0 and Flex 3.0.

As Ajax developers, Adobe is trying hard to get us developing applications, not just Flash folks. They have a place for us to start with AIR:

The new Adobe AIR runtime enables Ajax developers to build rich Internet applications (RIAs) that deploy on the desktop. AIR applications run across operating systems on the WebKit HTML engine and are easily delivered using a single installer file. With Adobe AIR, Ajax developers can use their existing skills and code to build responsive, highly engaging applications that combine the power of local resources and data with the reach of the web.

Adobe AIR

The AIR runtime and SDK has gone through an especially long beta cycle (since June 2007) to ensure that both security and compatibility with existing frameworks was achieved. Some key new and/or updated features include:

  • Enhanced Desktop Fucntionality: Drag and drop to the operating system, copy and paste between applications, launching of AIR applications from the desktop or the browser, and run in the background with notifications.
  • Data Access: Adobe AIR now provides both synchronous and asynchronous access to the local file system, as well as structured data within a local database. This database is implemented using the open source SQLite database.
  • JS Library Support: Most major Ajax frameworks can be used to build AIR applications. Supported frameworks include jQuery, Ext JS, Dojo, and Spry. Adobe AIR integrates JavaScript and ActionScript to allow cross-scripting between the two languages, and integrated rendering of Flash and HTML content.
  • Security: Applications built on Adobe AIR can only be installed through a trustworthy install process that verifies that the application is signed via industry standard certificates, providing users with information about the source and capabilities of the application.

Flex 3.0

Adobe's Flash-based RIA development platform, Flex, continues to mature and has been picking up steam in both the corporate space as well as sites such as blist and Scrapblog who have embraced Flex whole-heartedly. Some of the new features in Flex 3.0 include:

  • Intelligent coding, interactive step-through debugging, and visual design of user interface layout
  • New capabilities for creating RIAs and building applications on Adobe AIR
  • Integrates with Adobe Creative Suite® 3 making it easy for designers and developers to work together more efficiently.
  • New testing tools, including memory and performance profilers and integrated support for automated functional testing, speed up development and lead to higher performing RIAs.

One of the most compelling parts of the Flex announcement is the fact that Adobe has released the Flex SDK under the open source Mozilla Public License.

Adobe Open Source Site Launch

Finally, Adobe announced the launch of their new Adobe Open Source site which aims to "presents the definitive view into open source activities at Adobe, including details regarding projects that Adobe participates in and hosts."

The new...website is designed to keep you up to date on Adobe open source activities, within Adobe as well as with the larger world. It will also be the point of entry to our source code contributions, including Flex, BlazeDS and others. We'll post news items, tell you where to see us, and keep you in touch with some of our favorite bloggers.

Currently, the site houses the Flex SDK, BlazeDS and Tamarin projects, all of which have been open-sourced by Adobe.

Aptana has coordinated the release of their AIR plugin that includes support for Jaxer which allows you to write AIR apps that run on the desktop that include server-side code, written in JS, that can run on your backend server.

Adobe also put together a list of featured applications that you can check out.

Hitting a "1.0" release is a big deal (as is a 1.0.1 ;), so congratulations to the entire Air team. Adobe is working hard to raise the bar in the RIA space by giving developers more tools with great functionality. 2008 is panning out to be an interesting year in web development.

Ben and I are at Adobe Engage today, and hope to find out more about Adobes plans in the coming year. We are live twittering using the #engage hash tag.

To end with something a little fun, and since it was the Oscars tonight:

Lisa Awards: Most Overloaded Product Name

NOTE: Rey and I both wrote a post on this big release. This post is a conjoining of both posts into one

Posted by Dion Almaer at 2:02 am
9 Comments

++++-
4.5 rating from 29 votes

Wednesday, February 13th, 2008

MooTools Swiff: Communicate with Flash

Category: Flash, MooTools

MooTools core team member Michelle Steigerwalt has a writeup about the MooTools 1.2 Swiff object which allows communication between Flash movie (.swf) files and a page's JavaScript. The Swiff object makes it substantially easier to interact with ActionScript allowing you to pass values or manipulate the Flash movie using JavaScript and MooTools:

Unless you're a diehard fan of the embedded Quicktime movie, you might see the benefit in a Flash video player to provide smooth playback of videos to your users, while still yearning for full control over the action using JavaScript and MooTools.

It's not even necessary for the Swiff object to be visible in order to benefit from its use. Using Swiff, you can utilize all of Flash's functionality, including its video, sound, file streaming, and clipboard accessing features, and lots more.

You get all the flashiness of Flash, while still being able to manipulate and display your content using the DOM and MooTools.

Instantiating a Swiff object instantly provides access to the referenced Flash movie and any exposed methods:

LANGUAGE:
    //(JavaScript)
    var obj = new Swiff('mySwf.swf', {
        width:  1,
        height: 1,
        container: $('swiffContainer'),
        events: {
            onLoad: function() {
                alert("Flash is loaded!")
            }
        }
    });

In addition to this, the Swiff object's remote() method provides the hook to make calls to actual ActionScript functions:

LANGUAGE:
    //(JavaScript)
    var obj = new Swiff('mySwf.swf', {
        //[...]
        events: {
            onLoad: function() {
                Swiff.remote(obj, 'echoText', 'Hello Flash, meet Swiff.');
            }
        }
    });

The Swiff object is currently available in MooTools 1.2 beta

Posted by Rey Bango at 9:18 am
7 Comments

++++-