Category: Uncategorized

…or rather as of a month or so ago. Still it felt worthy of a blogpost if nothing else to mark this date (/month) for posterity. I will be working with Derek Wischusen who has been doing an amazing job so far organizing local meetups. If you are in Philadelphia and interested in Flex, I would love to get to know you better and welcome your suggestions on making the group truly kick@$$.

The timing has been perfect, with Flex 4 on the horizon that seems really cool. In fact on the 24th of June, Adam Lehman from Adobe will be coming down to talk about Flex 4 and Coldfusion NEXT (details for the event can be found at the Philadelphia Flash Platform Group page on Adobe User Groups portal. Going forward we are hoping to coordinate even more events with the Philadelphia Flash Platform Adobe User Group as Flash and Flex come together.

If you have any suggestions on content, agendas and such for group activities, do join the conversation on our Google group. And if you are a local Flash or Flex developer who’s on Twitter, do drop me a comment here with your Twitter id (mine is @arpit).

Over the last couple of years I have released a bunch of libraries under Open Source licenses, usually on Google code. However the my last project, OpenPyro was a little different and was released on GitHub with Git as the Version Control System. I write this as a developer with more experience and comfort using Subversion and yet encourage you to release your open source projects on Git.

So what is Git? The one line description (from Wikipedia) is “Git is a distributed version control system, born with the fundamental mechanisms making branching and merging really easy.” A detailed description of Git is beyond this post but the Wikipedia page is a good place to start.

Releasing OpenPyro on Git was not an easy decision to make. The project represents a lot of work on my part and I am nowhere near as comfortable yet with Git as I was with SVN. I definitely did not want an unfamiliar Version Control System deter possible contributors to the project. However the fundamental philosophy of Git was what finally won me over.

The Git workflow is kind of new (at least to me). A developer working on a project begins by forking the core repository. He can commit code to his fork at his whim and needs to keep merging from the original branch to get the latest updates from there. Its up to him to merge changes from the core repository as they happen. People working on different forks merge changes from each other as they see fit (if you are working in a non-distributed environment, you can all merge off of a source of truth repo)

Forking basically allows the project to achieve velocities greater than the initiator of the project. If tomorrow I stop working on OpenPyro, there could be a fork that has developers more committed than I could be. Why should OpenPyro stall just cause the original developer may have.

As of right now OpenPyro has been forked a couple of times. The first fork was for a Haxe port and this was before OpenPyro was on GitHub so it wont show up on the network graph on Github. The second fork was by Kelvin Luck who fixed a few bugs on his branch and is adding new functionality there. However he didnt have to wait for me to commit his changes into OpenPyro head. I merged his changes into the OpenPyro head much later. And now the OpenPyro history shows his additions to the project as official commits.

The diagram below shows the state of the repository as it got branched and merged at different times.

This kind of collaboration wasnt possible with SVN, something I realized while working on LogBook. I would get patches for bugs on the project, sometimes feature updates I didn’t much care about. But it was up to me to add those in, and sometimes time pressures made me miss commiting some features forcing the developer on the other side to wait with probably changes local to his machine.

I have been on the receiving side of that as well and I am sure you have as well. How many times have you looked at an open source project that seems to fit the bill for what you are working for but comes up slightly short. What do you do then ? Do you fork it? Without commit access to the core repository that the original author is maintaining, you cannot branch the project. All you can do is export all the files and recommit them into a new repository that you control. But now you have lost the project history (plus something about this approach just smells wrong, with very little attribution on the “forked” repository to the main project).

There are other features that are great in Git. Offline commits is another great feature that I use quite a bit. A more detailed comparison against SVN can be found here

Whether this paradigm works as well within teams working together, I am not sure. At work we continue to use SVN right now and I am not sure if we plan to move off it anytime soon, But if you are a developer releasing code under open source, I strongly encourage you to try Git. In the meanwhile here are some resources that you could find useful. Linus Torvald’s talk at Google is a good place to start understanding Git philosophically.

Git Manual
GitCasts: Videos on using Git
Getting Started with Git docs on OpenPyro

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:

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.

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 ;).

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.

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.

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 !

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.

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