Fan4 Beta: Thinking Flex out of the box !

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.

Author: Arpit Mathur

Arpit Mathur is a Principal Engineer at Comcast Labs where he is currently working on a variety of topics including Machine Learning, Affective Computing, and Blockchain applications. Arpit has also worked extensively on Android and iOS applications, Virtual Reality apps as well as with web technologies like JavaScript, HTML and Ruby on Rails. He also spent a couple of years in the User Experience team as a Creative Technologist. View all posts by Arpit Mathur