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
Fan 3 vs Fan 4 Square view
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
7 thoughts on “The Fan, Comcast’s Flex based video player: SHIPPED !”
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â€¦
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 🙂
Hi arpit! just wondering if i could grab your email address and ask some more questions?
Yep! I was agreed, I’ll keep in touch to your blog. This blog is so usefully, Thanks for the posted 😉