Category: Comcast

Personal landmark moment: My first patent: On the design of Comcast’s Fan Player

I joined Comcast four years ago, fresh out of graduate school with a Masters in Computer Engineering and a passion for the Flash programming language. Back then, Comcast was one of the rare companies that had invested heavily in Flash and getting the opportunity to develop applications in Flash that would be seen by a huge number of users was an exciting opportunity.

One of the first apps I got involved in and was my main project till about a year ago was the Fan. Originally conceived by my then boss and later friend and mentor Jeremy Landis, the Fan was a unique application. Comcast was probably one of the first companies who invested in Flash video back when it had just about come out.

History

  • When I joined, the Fan version 1, was written with all the goodness of Flash 6: code in frames, gotoAndPlays, etc etc. That was not too easy to work with.
  • The app was ported to the goodness of ActionScript2 soon after the release of Flash Player 7.
  • Version 3 of the application added some amazing redesign by our new design lead, Alfredo Silva and some amazing interaction models by Gabo (of Gabocorp fame).
  • The 3.5 version of the player introduced the ability to switch to a more conventional square view. There was a sentiment that adding a more conventional interface would lower the barrier to users actually interacting with the application more.
  • The square view was extended even further in Fan 4 which was also written from ground up in Flex 2. Porting the circular view to Flex 2 was an interesting challenge and I think we did an amazing job with Flex custom components.
  • The circular view was discontinued early this year as was the monolithic Fan application with the Comcast.net portal moving to a more conventional single-video-on-page experience.

Its kind of ironic that today the original team responsible for the Fan was awarded the patent by the United States Patent office on the design of the application. My first patent! How f-ing awesome is that !!!

The Fan was always unique if anything, and there was always the debate whether a circular interface was indeed the best to watch rectangular video. But the people loved it for sure, so much so that it even won the Flash Forward People’s Choice award in Sept 2006, and yes, that was for the circular interface. I remember a lot of stories from friends who had parents/relatives who loved the circular interface, and it was perplexing to the usability folk, after all it was clearly breaking all rules of application design. But that was where the magic was. It was different, iconic and had a long history with the Comcast customers who used it to catch up on daily news, events, gossip, etc. Heck, it was cool! Cool enough for even Philebrity to run a post titled The Only Thing Comcast Ever Contributed To The Internet: “The Fan” (Philebrity posts are not usually the most Comcast friendly).

But anyway, this is a moment to celebrate. I have one more fond memory of the Fan now, and believe me, this one is hard to forget :). Special thanks to all who went towards making the Fan a successful product, the editors, content video team, the design,dev and QA teams, etc. This was a fun ride.

Fan 1, 2

Fan 3

Fan 4

BarCampPhilly 2008: What a blast !

BarCamp Philly

This weekend Philadelphia was host to its first BarCamp event. For the uninitiated, BarCamp is an international network of user generated conferences — open, participatory workshop-events, whose content is provided by participants (wikipedia link here). Barcamp is described as an “unconference”, with the sessions being a lot more casual and more like conversations than presentations. Having been to a bunch of conferences before, I definitely found the organic nature of BarCamp rather refreshing. When I walked in at 8:15-ish in the morning, I had no plans of presenting anything but swept by the energy in the group, I ended up giving not one but two sessions (more on that later).

Working for Comcast, and pretty familiar with how it is most often a subject of blame than praise, the biggest surprise for me was how positively the attendees spoke of Comcast. For example, a session on ROI on social media was dominated by a discussion on the @comcastcares twitter account run by Frank Eliason from Comcast support. Always available a tweet away, Frank has been answering twitter users when they have Comcast related troubles. The conversation around how Comcast “gets it” was definitely new (kudos @comcastcares 🙂 ). Comcast definitely had a strong showing at Barcamp this year, with a bunch of us attending as well as volunteering for the event. Aaron Held, the director of engineering at Comcast Interactive Media (the division I work for) gave a talk on building Comcast.net, a site that boasts being one of the top 10 portals on the web, to a packed room. Aaron and I also had a round table discussion about innovating within a corportation, and I personally got a lot out of that (I’ll post a blog post on that sometime later this week).

CIM @ BarCampPhilly2008: Innovation within

Also, continuing my agenda for a Flash-y world, I gave another talk on using Flash in an AJAX world, where I talked about where Flash had certain advantages over AJAX (besides the richer interfaces it enables). Kevin Fitzpatrick, another fellow Flash dev for CIM gave a talk on sharing your ideas early and leveraging the community to take an idea from concept to a product. Livia, another fellow Cimian (yes thats what we call ourselves now 😉 ) from our IA group also gave a talk titled “Jedi Mind Tricks – mediating user, brand, technology & business goals through conversation” which unfortunately I missed as I forgot to check for new sessions on the schedule. Wonder if anyone took notes on that one.

After an intense day of a lot of fun sessions, the day ended at the always fantastic National Mechanics bar, which was made even more geek friendly with a hooked up Rock Band and (gasp!) an open bar! It was amazing.

Hats off to the BarCamp organizers Roz Duffy and JP Toto and the entire volunteer army. You guys did an amazing job. Here’s to a lot geekier Philadelphia :).

Oh and btw, one of the things I had to do was animate a wordle that the BarCamp peeps created. This ran on a couple of big screen displays at the conference. I am attaching it here for posterity and the source can be found here.

https://arpitonline.com/barcamp/wordle.swf

Released: LogBook, An Open Source AIR based Flex Logging Application

126399-logbook_1_4_0_1_alpha_development_other

As promised, today we are formally releasing LogBook, our internally developed tool for logging events from Flex (and coming very soon, pure Flash AS2/AS3) applications. For the uninitiated, logging is the process of recording and storing information about events in your application. The functionality is similar to the trace command, but a lot more robust. Logging combined with a strong log viewer like LogBook gives you a much deeper understanding of the state of your application.

Some quick notes on LogBook:

1) LogBook is being released under the MIT open source license.
2) A detailed post on its features and how to use it is here at the CIM Flash Team Blog.
3) The code for LogBook is being hosted at http://cimlogbook.googlecode.com/.
4) We have also set up a Google group for logbook that we can use to discuss features that we should add in upcoming releases and bugfixes/patches.
5) The installer can be found in the downloads section there.
6) LogBook runs on the AIR beta 3 runtime.

At CIM we already have a list of features we are going to release in the next build. But of course if you have any feature you would like to request, please drop us a mail at cimlogbook@googlegroups.com. We are really hoping LogBook 1.2 is the first step towards a robust Flex/Flash development/debugging toolset.

Happy debugging :).

Releasing tomorrow: LogBook, an open source AIR based Flex logging application

The team at Comcast Interactive Media is putting the final touches to an internally developed tool we use for logging events from Flex applications. The application is built on top of the Flex framework and runs as an installable AIR application. Best of all, we will be releasing it under the MIT open source license. A much more detailed blog entry about logbook’s features will be published soon but here is a quick screengrab of the application (click to open in a new window):

Stay tuned ;).

Update: LogBook has been released and can now be downloaded at http://code.google.com/p/cimlogbook/

Coming to a Flex App near you: 100,000 Videos

The Fan, Comcast Interactive Media’s Flex based video application, is soon about to reach a pretty big milestone: 100,000 video clips in the library. And while sites like YouTube may boast a much bigger library, the content on The Fan is all premium content from cable TV networks. So just for kicks, I took a couple of hours on Friday and built a quick blog badge to show the number of videos on the Fan right at any point.

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

You can embed the badge by copy+paste-ing the following html:

[html]
http://www.arpitonline.com/blog/swf/fanbadge.swf
[/html]

Clicking on the play button will launch the Fan. Unfortunately the Fan is only Comcast High Speed Cable Internet subscribers so you will be prompted to log in.
As an application, big things are happening in the Fan using some unique Flex features. More on that on a later post. And of course my shameless plug: If you are interested in working on the Flex and Flash team for Comcast Interactive media drop me a line at mathur.arpit [at] gmail dot com.

The Fan, Comcast’s Flex based video player: SHIPPED !

WooHoo !!!!
The Fan, Comcast Interactive Media’s flagship video application, which I worked on as main architect and lead developer, was deployed to production this week. The Fan is currently one of the top 10 online video destinations and the new version adds a LOT of cool features to the application. I have already talked about developing the Browse view using the Flex out of the box components and then later writing a component set for the circular view, which HAS to be the most interesting UI for a Flex application ;).

Fan 3 vs Fan 4 Classic view

fan4_circle

fan4_circle

Fan 3 vs Fan 4 Square view

Fan 3 Square

CIM Fan 4

If you are a Comcast subscriber, go to the comcast.net site and watch any video from the huge number of links we have peppered across the portal. The link to the preview version of the fan is still alive from the cimlabs site, so check it out soon before that goes away if you havent already.

As the fan continues to evolve and we get ready to launch another bunch of Flex modules, we are still looking around for Flash/Flex developers. So ping me if you are interested at arpit_mathur [at] comcast.net

Do you have any questions on Flex? Any questions at all?

Continuing the effort to making Comcast Interactive Media a Flex center of excellence, next week the team here is going to be trained by Jeff Tapper, one of the biggest names in the Flex community. Most Flex developers may know him from his book, Adobe Flex 2, Training from the source. Since the team here has been working with Flex for a while, we are not going to have a structured learning class but rather a free 3 day long QA + coding sessions.

I do have a list of questions I want to ask him, but they arent that many. So if you guys have any questions, drop me a comment and I will try my best to bring them up, since a lot of the answers will be beneficial to all. At the end of each day I will put up the day’s conversations up online for the whole www :).

And if you want to be part of the Flex developer team at Comcast Interactive Media, drop me an email at mathur.arpit [at] gmail dot com.

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.

fan4_circle

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:

arclistNow 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.