SuperImage

Last year Ely Greenfield posted on his blog QuietlyScheming a way to end images from flickering when you display them in a Flex List control. Ely created a new component called SuperImage that replaces the Flex Image control. SuperImage fixes a few issues with the current Image control layout in addition to adding the ability to cache loaded images to stop them from constantly reloading (causing the flicker when scrolling a list).

SuperImage Update

In our project we wanted use SuperImage, but what we wanted was for SuperImage to behave more like the Flex Image control. Specifically we wanted the control to broadcast the same standard events as the Image control; ioError, securityError, imageComplete, progress, completem, completeEffect. The new SuperImage also implements IDataRenderer, IDropInListItemRenderer, and IListItemRenderer interfaces. John Yanarella did a great job cleaning up the SuperImage control and add the missing functionality. We ended up not using the SuperImage and instead used a simpler implementation for caching the Image control.

Example

Below is an example similar to Ely’s SuperImage that demonstrates the problem (on the left) with the Image control and the fix (on right) using the updated SuperImage. This example also shows a text dump of events broadcast from the new SuperImage control.

Limitations

One thing the updated SuperImage still lacks is the ability to display loaded SWF files. Since our company never used the code in any project and it was based on Ely’s code, I thought it only fair to repost the update and the code for everyone to use as needed. If anyone has an further updates to the code or suggestions to fix the SWF loading issue, please post them here and I will continue to update the component.

Code

You can download the code for the above project here. You will need your own Flickr API key to make the application work. Be sure to also read Ely’s original post to see the other benefits of SuperImage. Many thanks to John Yanarella who actually did the coding on the project, I finally posted it as I promised him many months ago .

-Mister

I have been developing for the past few months an AS3 library (as3xdrivelib) wrapper for the Open Xdrive JSON API. Xdrive is an online storage platform and they offer a free JSON API for developers to create storage and other types of applications upon their service. With Xdrive, each user gets a 5GB account for free, with additional costs for more storage.

I finally got around to making an AS3 library that wraps much of the Xdrive API and abstracts the inner workings from those developing Flex, AIR, or Flash applications. The Xdrive API is extremely rich, it offers ways for users to share folders, collaborate on shared collections (look for a later post and application on this feature), and publish assets. However, main part of the platform is file management.

I have placed the library on Google Coders and included a Flex sample application for doing some basic operations with Xdrive. You just need an Xdrive account to start using the library. I am hoping this helps developers starts to build some cool applications using the Xdrive plaform. Along with the library, I included an example application called Xdrive SlimDrive, which demonstrates the basic functionality for doing file management and shows how to work with the library.

===============
as3xdrivelib
===============

The as3xdrivelib project is a wrapper for the Open Xdrive JSON API. It provides much of the client-side functionality for applications; for example, authentication, uploading files, sharing files, and basic file management.

Project Page: http://code.google.com/p/as3xdrivelib
Project Group: http://groups.google.com/group/as3xdrivelib

Authors: Michael Ritchie, Maria Vazquez, Lucas McGregor, Joe Provost
Dependencies: corelib (http://code.google.com/p/as3corelib)

How to use the as3xdrivelib with Cairngorm.

I didn’t get a chance to post this to the Google Code, but I wanted to show a quick login example that uses the library with Cairngorm. The following example uses a very simplistic login screen with a Cairngorm Event/Command/Delegate to login to a users Xdrive account. The example is pretty straight forward if you know Cairngorm already. There are some things to notice in the Delegate and Command. In the Delegate, notice how the I setup the delegate to use the as3xdrivelib as a service and how I mapped the events back to the command.

In the Command notice how I map the payload (user) on the API result to the Model. This is explained in the documentation for the library, but basically the payload contains a return variable(s) name on the payload event that almost always represents the object you send to the library method.

Example File (right-click to view source/download)

Update

AOL killed Xdrive and so the API is also dead, code still available but its not defunct and won’t work with Xdrive. Thanks AOL for killing yet another good product.

- Mister

Another puzzling thought is why did Adobe develop share to begin with?   You have a lot of existing vendors in the storage service provider arena already, in fact, you have many that use Adobe’s existing software to develop tools around storage and sharing.  So it is strange that a software company decided to compete with companies that already use its software to provide the same service (Bluestring by AOL is one example).   Does this mean that Adobe intends to become an online service for storage, document editing (Buzzword) and media editing (Remix and Photoshop Express)?  

I mean, its cool that the applications Adobe builds use their own software (Flex, Flash, etc.), but when they start competing with other companies using also using Adobe software to provide  similar services (aka, the bread and butter of those organizations), then I am wondering what will be the outcome? Is Adobe to become a huge conglomerate that not only provides services and software, but competes with its own food source for resources? What’s next, Adobe phones?  Of course I am joking.  I love Adobe and I love their products.  I guess as Flex developer, I’m just comfortable with Adobe providng me with the tools to create applications and not competing with the tools I create.  I could totally be misreading this move by Adobe, which is most likely the case (I say this so that a big black panel van with tinted windows doen’t pull up beside me one day and take me away).

Well, time will tell for sure.  The storage business is extremely expensive (bandwidth, banks of servers) and there are a lot of established companies already out there with storage and sharing services that offer more space and possibly a lower cost (Xdrive, Box, Mozy, Bluestring, Amazon S3) with sharing capabilities and API’s.  For now, the Share API looks to be a simple to use and easy service providing minimal sharing capabilities and less complexity than some other API’s. 

Yep, that is me

Bluestring represents the second enterprise level Flex application launched by our team in the last year. The reason I mention Enterprise is because there are a lot of really cool Flex applications out there, but Bluestring is built, and tested to withstand time and traffic of millions of users.  You don’t need an AOL account to sign up for Bluestring, probably for the first time you can use whatever email account you already have to register.  Though Bluestring is a beta, its still offers robust file management and sharing capabilities.  This is because we built Bluestring is built entirely upon the Xdrive Open API which offers a lot of different ways to share.  This also means that any media file you upload to your Xdrive account will show up in Bluestring, and vice versa.  

The AOL Techcrunch40 Booth. 

Your Bluestring files and creations can be shared privately, publicly, or even as a collaborate show with rostered list of users.  Users can contribute to a “String It” creation from their own accounts and then pass that creation to a friend to add his/her own media.   People editing the show can rearrange and even delete other peoples content, but it never wipes it from that persons account.  Items within shows are referenced back to either the aggregated sources or to other Bluestring accounts.

Our team presenting Bluestring to the Techcrunch audience.

I am very proud of this product, it was certainly a lot of Flex coding by both myself and Larry (the other Flex dude working for AOL in Beverly Hills with me).  Something nice about Bluestring is that the graphics used were almost entirely vector graphics in a single Flash 9 library.   This gives Bluestring the appearance of not appearing like every other Flex application on the market (with the exception of Picnik, which I adore).   The graphics were mostly imported as PNG files saved from Photoshop while others were imported from Illustrator (simple copy/paste).  All the images were then converted to Flash vector graphics and given instance names within the library.  The CSS file and a shared assets class file referenced the instance names within the SWF. 

We also used about 15 different Flex modules using the new Flex <mx:Module> tag introduced in Flex 2.01.  Each module gets loaded as the user navigates through the major views. Modules really slimmed down the size of the application and decreased the initial load time.  However, it was a bit challenging at first devising a method of using modules with Cairngorm, but I think we have a really proven method that I might talk about in future posts.   Most of the text within Bluestring resides in a single external xml file that can eventually be localized into different languages.  The XML file is loaded at runtime before any of the graphics libraries or modules are loaded, making sure the text is ready before we load any views that bind to the text in the model.

I will be working to post some more code samples and components that we use for Bluestring in upcoming posts as time permits.  We also have some new items coming down the pipe for AIR.   For those of you interested, please check our the presentation Larry and I will be giving at the upcoming FITC Hollywood called Concepts on AIR.

For those of you at the last 360Flex conference, you now know what the Bluestring lanyards around your necks means. Due to some legal reasons and duct tape, we were unable to talk about Bluestring when we were at 360Flex. Maybe next year when 360Flex comes to Los Angeles???? we can talk about other products we are working on .

-Mister