Last week we updated the build on link to the Fan 4, Comcast Interactive Media’s flagship video product. The new build includes the ability to switch your preferred video viewing experience between a “traditional video page” experience, the unique circular video playback experience that the Fan has traditionally been associated with, and also a fullscreen view. As we continue to work towards the final release of the application, I thought I should take a few moments and talk about the experience of building a Flex app like no other .

I had already talked about how and why we built the alpha version with Flex in a previous post. I was pretty surprised by how many people picked it up. As of right now, the mode is still featured on scalenine.com, a site archiving some of the best skinned flex applications out there. However, while the page view of the alpha release was very well skinned, the basic interactions on the application such as drag and drop playlist controls and data bound UI components were still fairly out-of-the-box Flex. The circular view of the Fan is however anything but traditional and so we ended up writing a lot of custom components to get the look and feel of the application right.

A deeper look into the circular view:
Gabo has a pretty nice video capture of the Fan 3 application’s interaction model on his site. The goal of the Fan 4 circular view was to keep most of the functionality the same. On the circular view, the traditional list of queued videos is replaced by an arc of blades. The drag and drop metaphor remains, but users can also delete the videos from the queue by simply dragging the blade far enough away from the circle. We also removed some of the controls that seemed to clutter the interface. The idea is that the circular fan is a fun UI with the ability to switch to the page view to browse more content.

Some thoughts on the experience:
As you can imagine, implementing this view was a lot more difficult than just skinning the Flex controls. However by the time we were done with the square view, we seemed to have Flex kinda figured out . One big thing that I feel Flex taught me was ‘thinking in terms of components’. In the end I was pretty happy with the implementation. The circle view is basically 3 components (controls):
1) A CircularNav component that can takes an ArrayCollection of Video Value Objects as a dataProvider, creates ‘Fan Blades’ representing them and manages scrolling through them.
2) A CircularBackground component that basically holds the video player, and
3) An ArcList component that takes takes an Array of links as the dataProvider and basically lays them out in a list that scrolls along the circular path.

A little more about the ArcList:

Now that we seem to understand the spirit of the Flex framework, we try to implement our custom controls with it in mind. For example, the ArcList control behaves very much like the Flex list class. Besides the ability to pick any radius along which the list should scroll, we can add different renderers to the ArcList and style the colors in CSS.

Know thy measuring:
We didnt pay much attention to overriding the measure function and things were fine for a while. However when we tried to use the horizontalCenter and verticalCenter styles, they wouldnt work right till measure was correctly implemented.

The need of another framework:
As we work now to finish the application, getting this baby to hit primetime in front of the millions of users, we are feeling some pain arising from the complexity of the application. Because the fan has a number of components interacting with each other and has hooks to allow us to add new views to the application (sphere? octagon? triangle? ), we do once in a while find a bug as the application goes from one view to another. Something I found fairly recently (thanks to the Philadelphia Area Flex User Group) is Cairngorm. For the uninitiated, Cairngorm is a framework that enforces the MVC paradigm on your application. The framework is owned by Adobe now I guess (I think they bought the company that originally owned it, but there are a lot less people using Cairngorm than Flex and online resources arent as easily available). While adopting Cairngorm a couple of months back wouldn’t have been a great idea, using an MVC framework that we didnt know on top of the Flex UI framework that we just barely knew, I think we may now start exploring it, maybe for a Fan 4.5 release ?. Anyway, its something we are going to look into.

Some requests for Flex 3 / 4.
Since Flex 3 is in beta, I guess all I can do is make some requests for Flex 4. While Flex Builder seems to be approaching maturity as a development tool with refactoring support and the profiler, there needs to be some effort on team support on Flex applications. For example, we were having issues with OS path separators in build paths since some team members were on PCs and others on Macs. There also arent any articles I have been able to find on best practices when developing in a team (a MAX session anyone?)

Anyway, do take a look at the application at http://preview.comcast.net/fan4 and send me a note if you find any bugs or think some features may need improvement.

Cheers.

A quick update for anyone using or interested in DiggGraphr Desktop. I ported the application to AIR today (it was a fairly painless operation requiring changes to just the application descriptor XML file and the parent tag of the application). So go ahead and get the latest build from here. For the uninitiated, the DiggGraphr Desktop application uses the treemap algorithm (with the theme from the newsmap application by marumushi) to render out Digg stories in treemaps. Customization even include auto refresh and custom pages. Details can be found on the application page here.

I have seen a couple of posts recently from people looking for some information on integrating AS2 and AS3 code. I recently worked on a project that I ended up spending quite a few hours trying to get some things to work right so I figured I should post about it. Hopefully someone will find it useful.
So I wrote a Flex application that I was able to knock out fairly quickly. The core framework really made a lot of the grunt work disappear and I was pretty pleased with what I had. It was only when I was done with the application itself was I informed that the application was supposed to be loaded in an AS2 swf. Ah well, I could always loadmovie it.
Wrong.
AS2 swfs cannot loadmovie AS3 swfs. I guess the swf headers dont get recognized by the Flash Player and the AVM2 doesnt startup. So we had to find a workaround to that. I was hoping Javascript popups would work but that was unacceptable user experience. So we went back to the drawing board. The other option seemed loading the existing AS2 base swf using an AS3 basic loader as the root. It worked well for a few initial scenarios but soon hit a wall since there were _root references all over some of the AS2 code and the root loader killed all that functionality (For those who still do so, please STOP using _root in your code !!!).
Just when I was ready to quit and about to just port the whole app to AS2, I tried going completely out of the flash player to get my application to show up on top of the base swf. Go html positioning. I ended up writing both the swfs into 2 separate divs using swfobject and then absolutely positioning the base swf and relatively positioning the container with the Flex application on top of it.

The css styles looked like this:

Works pretty well .

For the last couple of days I have been monkeying around with the HTML control in AIR. One aspect that fascinated me was the ability of AIR to execute arbitrary javascripts to manipulate the DOM of the loaded document. So I wrote this proof of concept application which I LOVE. I use Yahoo news for all my news needs (well that and BBC), but yahoo is too branded and has way too many ads for me. So I wrote this application that lets me browse yahoo news but strips the branding and the ads.

The left column of the application is fed via yahoo rss feeds. When the list item is clicked, the html control loads the link specified and then executes some dom scripts that looks for certain divs and removes them. I also had to change the content's css style to allow it to float left.

Cool. My news browsing experience has just gotten a lot better