Flex Builder Tip: Use SWCs for image assets, not Embed metatags for pure Actionscript Projects

I have been using Flex Builder for a while now as my main Actionscript IDE for both Flex and Actionscript projects. Of course in the latter, I have been very sensitive to not using even an iota of the Fx library. However traditionally I had always used the [Embed] metatag to embed graphic symbols into my Swfs. What I did not realize was that the Embed tag brought in Flex code into my project. I only discovered that as I was getting a build of OpenPyro ready for a release (its going to be 0.4, isnt out yet, but probably early next week).

I was trying to build the OpenPyro swc that users could be imported into projects. However running the compc command resulted in the following error screen:

Compc Error

Apparently, using the Embed metatag was causing the graphic to be imported but then converted to an instance of the Flex SpriteAsset class. WTF, this was definitely not what I wanted. Googling (at 2 am, so I may not have used the best queries) did not bring in any meaningful results. However a friend of mine recently switched from Flex Builder to FDT and I remembered him showing me how he did it, so here are the steps:

1) Create MovieClip symbols in the Fla and export them for Runtime Sharing with appropriate class names.
2) Generate the SWC from the Fla
3) Place the SWC in the classpath of the Actionscript project.
4) Use the exported symbol’s class name to reference the graphic symbol

So this worked. I was pretty aware that the Bindable tag was Flex specific but I didnt know that Embed tag did as well. Adobe really needs to differentiate the Flex specific metatags like Bindable and Embed with the pure AS3 ones like Event. My one big complaint with Flex Builder was that it never complained considering I was in a pure Actionscript project.

I hope Gumbo fixes this.

Announcing EspressoReader (alpha): A desktop client for Google Reader

I am excited to finally announce the alpha release of EspressoReader. EspressoReader, in its current incarnation, is a desktop app for Google Reader. However the goal is to create an application for managing all the information streams you read on a daily basis, and providing user interfaces that help sifting through all of that. For example, this release includes a PhotoView that lays out all the images in different feeds one below the other, which works out really well if you are subscribed to image heavy feeds like web comics.

Espresso Text View

Espresso Reader Image View

You can download the application from here.
Update: I am removing the link to the installer as more and more people keep having a broken experience with version 1. Please get on the alpha list for version 2 at EspressoReader.com. The new system should be a lot more stable since it uses a different authentication system that seems to be working much better.

Features:
Multiple view support like Text, Images and Browser (more coming soon)
FullScreen support
Share with Twitter
Related entries from your other subscriptions

Features coming soon (almost done but couldn’t finish for this release):
Offline support / Prefetch support (allowing you to load all subscriptions for a category when reading an entry for more useful Related Feeds functionality)
Improved Related Feeds Algorithm

Other list of proposed features can be found here. Feel free to add to that list.

Also the application is completely charityware. Please consider donating to Unicef if you find this application useful.

EspressoReader was built completely with OpenPyro.

Update:
EspressoReader v2 is now available on Adobe AIR marketplace as a free download. Check it out

Beyond the Browser: On Gears, BrowserPlus, Prism, AIR, Widgets and really long titles

Most Flash/Flex developers are by now pretty familiar with the Adobe Air platform. And maybe its a case of “when you have a hammer, everything looks like a nail” syndrome, but suddenly the browser doesn’t seem to be enough for the kind of apps I would like to build. The realization couldn’t have come at a better time with so many new cool platforms to play with, and if big company adoption is any measure of the merit of an idea, then web apps that live beyond the browser is the way of the future.

Today a couple of interesting news items came to my attention.

1) Myspace integrated Google Gears into their messaging platform.
This makes Myspace the biggest Gears adopter and with the audience the size of Myspace, the platform has suddenly become relevant again.

For the uninitiated, here is the Gears announcement video from a while back

I use Google Gears (or Gears as apparently it has been renamed today at the Google I/O conference) for Google Reader, but it always surprised me that even GMail hadn’t adopted it. Based on what I read on Techcrunch, MySpace’s main justification was to reduce the load on their servers for pagination and sorting. While they haven’t enabled offline functionality a-la Google Reader, I am sure they will at some time.

This move, while obviously great for MySpace, also is a huge boon to people looking to create OpenSocial applications that would live on MySpace. They can, if not completely depend on, at least use it to lighten the load on their own servers. And these applications living on a different OpenSocial containers may prompt more non-MySpace audience to download Gears.

2) Yahoo launches BrowserPlus

BrowserPlus is an application that adds more services to a web browser. The plugin installs Drag-and-drop capabilities, image manipulation libraries, persistent stores, etc. And the idea is that you will be able to write your more and more services once the platform opens. Another great idea here is that, while there may be a million services out there, only the ones that are needed for apps are loaded on demand. Yahoo will adopt a ITunes-for-IPhone-Apps model to make sure services loaded in are not malicious, and given Yahoo’s history, I trust them a lot more that Apple or Google. All the services will be available via Javascript, so web developers can leverage any of the services out there to build their apps, all of which are basically web pages. I am really psyched about this one. To me it almost looks like a Adobe AIR-esque runtime but this time I can extend it if I need it to do something. Plus given that a Ruby interpreter is already included into the runtime, and I am getting to like Ruby quite a bit, you can potentially build some really awesome applications leveraging libraries available there.

Gears and BrowserPlus are awesome, and there are other technologies that look really interesting. One of these is JavaFX, Java’s stab at a client-side runtime very similar to Flash. The Java Virtual Machine (Java’s equivalent to the Flash Player), is a lot more powerful than the Flash Player itself, although I am not sure how much of that functionality will be enabled from JFX, it still could be an interesting technology to watch, especially after you see the kind of interaction they are hoping to enable (even if the demo below crashes repeatedly)

Besides these there are other technologies that Mozilla Prism as well as other widget engines Yahoo Widget engine, Windows Gadgets, Mac Dashboard widgets, Google sidebars etc etc, all of which are worth watching. With all these technologies and runtimes that are based on web technologies, especially client side technologies like HTML, Javascript and even Flash, the web developer is suddenly at a point where he can enable his applications to do a lot more than ever. Of course now we have to choose our runtimes and make sure we do not serve broken experiences when users dont have appropriate plugins, as well as learn some technologies traditionally we weren’t concerned with (like SQLite, almost everything seems to use SQLite). But in any case, its a good time to be a client-side developer ;).

On Flash/Flex build systems and application versioning

The last couple of weeks I have been caught in a couple of conversations around application versioning and build systems for Flash and Flex. Once for example, the context was a list of bugs from a QA build of a Flex project that we could not reproduce, and were not sure of the version of the swf that QA was seeing. We had checked in our latest swf that was part of a Java war that was to be deployed to the site, but there was no way to confirm that the version in QA was the one we had checked in. Another time, we were fixing up a swf that actually did have a version string that was integrated into the context-menu of the swf. However, this version was not tied to any particular logic and the developer was free to increment/decrement versions as he saw fit. And of course there are purists who feel strongly that we should have a build system because all the other “serious developers” have it.

FAIRLY OBVIOUS WARNING: A lot of this post is fairly obvious if you have worked on big projects that have a life of more than 1 or 2 releases (more so if you come from a language with an already established build tools like Java or C#). However this doesn’t seem to be the case with a lot of Flash and Flex developers who are often called to do quick projects. This is more for teams like mine where we work on diverse projects are often jump from one to another. Sometimes we have to work on stuff we did a while back and now there is one new feature thats needed but in the meanwhile dependent libraries have changed.

Because of the lack of any robust, easy-to-setup build and unit testing systems, they have traditionally been considered nice-to-haves but not really available if you have a deadline looming. Ant and FlexUnit are definitely available but why isnt FlexUnit integrated into FlexBuilder with one click “Run Tests” button ? For example, here is an image of JUnit as integrated into Eclipse:

This may be changing slowly though. I think Flex Builder now comes with a template ant build setup in one of the install directories, but its still upto you to set it up on your environment.

So here are a list of issues I deal with on a fairly regular way. I have a few solutions but if anyone has other ideas, please leave me a comment.

1) Identifying a live application:
When you are evolving an application or have QA builds going out fairly regularly, there is a big need to be able to verify what build is in front of the end user / QA engineer. For example, we have had caching issues when even after we have deployed a swf, a few users still see an old version till their browser expires it. So if I get a bug filed on my application, I want to make sure of the version its being filed against. Context menu integrated version strings seem to do this job pretty well, and its something I feel all applications should have. On a recent project this saved quite a bit of time since some network issues were preventing the latest build from actually reaching a test server and it was really easy to verify the build was wrong. One technique we adopted was an idea taken from web services (most webservices are accessed using a url that includes a version, for example facebook’s apis are accessed via a url like http://api.facebook.com/1.0/). So using the same idea, we now compile so that output swf’s name has a version string appended to it. For example we may have player_1.2.3.swf (or release swfs to folders like …/v1_2_3/player.swf). This lets us check version via html and also keeps a history of previous swfs in case we have to revert to one in an emergency, or check if a particular issue in the current live build existed in the previous build as well.

There is a blog post on the SVN based version context menus here

Whats interesting is I have such an easier process when I release code on this blog. With a simple “enable view source” option, All the code gets packed into a downloadable zip file and the context menu item is appended to with the view source option that takes me immediately to the source of the current swf. I wish this concept could be extending to target svn repositories and app versions.

2) Getting back to the source of the code from the swf
The preceding conversation immediately brings to light another requirement: Once I do know what version a bug is on, I should be able to check the code out for that version and build it. One thing I am trying to prevent is a swf that may go into production built of code on a developer’s machine that he may then forget to check in. Ideally the application version should be tied to your source code repository in some way. Although I am nowhere near this yet, ideally, the action of compiling your swf should trigger a checkout from the repository first and the swf should be built of THAT code. And in a perfect world, I would live the SVN revision number to be available in the application version.

This problem becomes a lot more tricky when you may have different versions of an application running in different places. If you are building a generic swf for example (like a photo browser application or a video player that may love on different environments). How do you know which version of the swf is running if the last time you deployed to that environment was like 8 months ago.

3) Controlled Refactoring
Honestly speaking, historically, build systems were always considered nice-to-have for our projects. Developers on a project have a pretty good idea how to get their application to build by hitting the compile icon on Flex Builder. But that breaks down if you have ANY dependency on any other library. For example, there are more than a couple of libraries that we have common among different applications. However if anything needs to be changed on a class in one such library, after the change is made, the developer making the change must ensure that the change didnt break anything on any of the other applications that use that as a dependency. To do that within the context of Flex Builder is virtually impossible, would you open every project and compile it ? At this point it becomes imperative that all your dependent applications have tests that can be triggered with one click when a core class is changed.

The need for Release Engineers
Our other projects have release engineers whose main job among others is to check out code from the repository compile it and then deploy it to the test environment. Here is a quick snippet from Wikipedia:

The responsibility for creating and applying a version numbering scheme into software–and tracking that number back to the specific source files to which it applies–often falls onto the release engineer. Producing or improving automation in software production is usually a goal of the release engineer. Gathering, tracking, and supplying all the tools that are required to develop and build a particular piece of software may be a release engineering task, in order to reliably reproduce or maintain software years after its initial release to customers.

I encourage you to read the entire article here.

These are a few thoughts and ideas I have right now. In the last few weeks we have made a lot of progress towards a mature build and deploy process for Flash based applications. In the meanwhile if any of you readers have a good release system built and that you use regularly, please drop me a comment here and I would love to have a conversation with you on your system. I know there are a few interesting projects out there like antennae, but if there is anything else anyone can recommend, please let me know.

DiggGraphr Lives Again

A while back I had released DiggGraphr, an application that used Digg’s api’s to render the stories on a TreeMap. Then I got caught up with the Adobe AIR mania and the next few versions of DiggGraphr were targeted to AIR rather than the web app. I have to admit that was a bad idea, since the AIR version brought no new functionality to the application that couldn’t have been done on the web. Ah well, it still got me some attention from Techcrunch and I also won a copy of Adobe Creative Suite in a contest that only accepted AIR apps.

In the meanwhile, the web app died online. I think some API changed just slightly, but that wasn’t really surprising. All code left to itself tends to deteriorate as anyone trying to compile code a few months old will tell you. However a few people have asked me about it and I figured I take a few mins and fix the app. Also reduced the crazy red borders that were definitely distracting.

So check out the web app here. If you havent Dugg it yet, do show some Digg love 😉 (the Digg button is right there).
I have no plans to release an AIR version of DiggGraphr, unless someone asks me to.

Let me know what you think.

Seamless panoramas powered by Papervision3D and Flickr

Continuing with my experiments with Papervision3D, today I was looking more into creating the Qucktime VR like panoramas. There are quite a number of well done panoramas but all of them require custom cropped images etc. What I really wanted to do was to just have them be generated off images in my Flickr account. Of course this is unrealistic a bit since the way panoramas work requires the two edges of the photo being viewed to merge seamlessly with each other. This way there is a sense of continuity. However, I took some ‘creative license’ and the result is below.

Creating Panoramas the right way:
There is an excellent tutorial on how to create simple Panoramas the right way here. The idea is simple. Create 6 photographs of a location and map each of them on the different planes of a cube. Then set a Free Camera in the middle of the cube and then use the mouseX/mouseY properties to change the camera’s rotation about the X and Y axis.

The direction I wanted to take was to load an image from Flickr and then chop it up into 4 equal sizes, and then use them as textures on my cube. I realized pretty early on that there was no way I could enable looking up/down since I couldnt take any part of the image as surfaces for those planes, so I restricted the motion to only the X-axis.

Loading an image from Flickr, taking bitmap snapshots at quarter intervals each only 1/4 of the width of the photo (thank you flickr.com/crossdomain.xml) for each surface and then mapping to the surfaces was really easy and I was pretty much done soon. It looked okay-ish but there was one big issue: As I mapped the images to planes 1,2,3 and 4 (left, front, right, back) successively, the edge between plane 4 and 1 killed the look since they did not merge seamlessly. I was about to shrug and walk away (after all this was just to get more familiar with P3D), when I had an idea. I was already taking snapshots of the images loaded in, it wouldnt be that hard to take another set of snapshots that were flipped on the Y axis (ie mirror images). Then, I mapped the original 4 pieces to just 2 planes (say left and front surfaces of the cube). The edge of the front plane then connected with its own mirror image, and the mirror images were mapped to the remaining 2 surfaces. This way there were no disjointed segments butting against each other.

[SWF]http://www.arpitonline.com/blog/swf/flickr/Main.swf, 500, 600 [/SWF]

I’ll make another post on my mirrored image generator next but in the meanwhile check it out and let me know what you think.

P.S: It took me another 30 minutes to fix a bug when I put the swf on my server, since Loaders dont check crossdomain.xml by default. Arghhh !

CardStack: This aint no Coverflow

I finally got around to playing a bit with Papervision3D, the open source 3D library for Flash,today. I have to say its been a lot of fun and its surprisingly easy to use. I was looking for some interface that I could build using what I was learning. The ITunes Coverflow seemed a good place to start but considering how many implementations of that I am seeing on the web, I couldn’t really bring myself to write a new one. So I started monkeying around with camera motion etc and finally reached a point I was pretty happy with, at least for day one.

The idea behind CardStack was to recreate to some extent the real world shelf. When the user clicks on an element on the shelf, it moves out of the shelf and can be interacted with.

This is just my first stab at this and there will be a lot more changes before I pack it into any sort of code I can share with the community. At the very least I can put in keyboard navigation and some reflection to make it a little more interesting.

http://www.arpitonline.com/blog/swf/cardstack.swf

Please let me know if there is something I can add to this to give it a little more zing.

Ice cube predicts demise of Flash !

This one is funny: I followed this link off of Ryan Stewart‘s blog to NewTeeVee with a video on Ice Cube promoting UVNTV, which is being advertised as an internet TV experience complete with a channel lineup etc built on Silverlight. I love it when Ice Cube basically forecasts the demise of Flash (‘Flash is outta here’): hey man, if he says it, it must be true ;). The interview later has them saying that they got a better video quality using the windows codecs but seeing some of the really cool high def video around even before the Moviestar release of the Flash Player kind of makes me doubt that. Anyway, the video is a fun watch if nothing else than to see celebrities talk about server-side code, CDNs and of course, Silverlight ;).

http://images.video.msn.com/flash/soapbox1_1.swf
Video: Ice Cube's UVNTV.com goes live with Microsoft Silverlight

Google Maps, the IPhone and my San Francisco Trip

I just got back from my trip to San Francisco (top secret project…shhhhhh), but a couple of things made this trip rather interesting. I have never really been a tourist or a photographer. Its something I have been meaning to change for a while since I do want to have something I can look at years from now and be like: “oh yeah I remember that..”. However my interests are so much more in the new and shiny things on the www that cataloging my travels seems like a chore.

However this trip I tried to mix the two domains a bit. I have a shiny new iPhone (well not so new now), and I have been meaning to play with Google’s new my maps + embeddable maps features, so here is my trip with photos from my iPhone with some information about my trip on custom markers. I have a vague color coding going on there with green markers being the first day, the blue, the second and pink the third day at SF.

While this was fun, it really isnt the experience I was hoping to create. Thankfully, both flickr (where my photos are hosted) and google maps have apis so I may monkey with ’em a bit and come up with something interesting.

It aint about the tech…

I usually keep personal observations on my blog to a minimum, keeping it more about the code and apps. But off late I have been feeling this a lot and so I feel I must speak at least once if only for cathartic release ;).

There has been a lot of new activity in the UI world: Apollo, Silverlight, JavaFX, WPF and now Ted Patrick’s sneak peeks on the new features of Flex 3, and a lot of people have very strong sentiments about it. However it seems like we have all set camps around technologies rather than what they mean for the end user.

Silverlight was the perfect example of course. While blogs on mxna screamed how it was utter crap, people I know who attended the Microsoft MIX conference proclaimed it to be the undoubted Flash killer. As a UI developer who moved from Java to Flash to Flex to now-eyeing-the-3D-capabilities-of-WPF, I couldnt care less about what I write my code in. If there is something in Silverlight that I cant do in Flash (and my target audience has the plugin), I will code in it.

But the Silverlight conversation is over so lets continue…

The latest thing is the Flex 3 sneak peeks. I have read quite a few blogs about the lack of any earth-shattering new component in the framework. I am not surprised. Now that I have been with Flex for about a year, I am truly loving it. I dont care about the List, Datagrid or the Tree component, heck I could them all easily in Flash. Flex gave me a framework to work within. When I work with another developer or look through a component’s source code, I KNOW what I am dealing with: I know the measure function is where the measurement is happening, and updateDisplaylist is where the component is drawing itself out, etc. Now its up to ME to code my cool app. I will write a component to suit my application’s need rather than look at the new component set and try to fit those into an application. Adobe cannot write a component set for every app out there. Flex 3 gives me exactly what I want: A better way to write code (Refactoting, Code assist, etc), a way to make sure I am not killing a user’s computer (with the profiler stuff) and a better way to deploy it (using the flash player’s caching mechanism): after that I almost want it to leave me alone and let me build my app to work the way I want it to.

I dont want to sound harsh. Heck I would love to have some cool components that I may use once in a while, but its not something I expect to get from the SDK. For that I look at the broader community out there.

Lets make cool things….