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

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.

7 thoughts on “The Fan, Comcast’s Flex based video player: SHIPPED !”

  1. Pingback: University Update - Comcast - The Fan, Comcast’s Flex based video player: SHIPPED !
  2. Pingback: Jeremy LaCivita » Blog Archive » Milestones: Team and Individual

  3. Hi i was just wanting to ask you some questions about the fan flex app you did for comcast… im looking at doing drag drop around a circular path and was wondering how hard it was to implement in flex… very similar to the way you had add to playlist and then it adds it to the circular path allowing reordering…
    would you have any hints or reading materials i could get in to to look at how best to approach the situation…

    thanks,
    – tom

    Like

    Reply

  4. @Tom
    That part did require quite a bit of work but the idea was pretty simple. It required some really good understanding of trigonometry and basic Flash. Here is the gist:

    Each blade has its registration point set to the center of the blade. This keeps rotation logical as the blade when your code is asked to rotate.
    I wrote a class that you could initialize with a radius value and the number of points you need and it would give you those points (flash.geom.Point objects) along a circular path of that radius. The points returned are where I place the blade at startup.

    When the blade is dragged, it initializes an enterframe function that continuously computes the angle the blade subtends at the center of the circle as it moves. If the theta exceeds the theta of the next blade, the next blade moves to the point this blade occupied. The dragging blade now sets its own theta value to blade (that moved)’s original theta, and now looks at the theta of the next blade.

    Same goes for the action of dragging the blade in backwards direction.

    Hope this makes some sense. Just brush up your basic trig math and you should be good 🙂

    Like

    Reply
  7. Pingback: Remembering Yahoo – Code Zen

Leave a comment