The CIM Flash Team Blog

NCAA Fan a Slam Dunk!

2008-04-04T13:31:33Z

It's that time of year. Everything looks like a round orange orb, traveling through air on its way toward a peach basket. And here at Comcast Interactive Media we were able to create a version of the Fan that compliments that old college feel. In less than a week turnaround our team was able to build a version of the fan that puts college hoops fans in the middle of their own video player. The code used separated the skinning and content changes from the code base. So everything works the same internally like the regular Fan you have grown to know and love. However the appearance of the tried and true Fan player boasts a new appearance that compliments the hysteria that comes with the tournament. The flexible skinning framework allowed the design team to make all the changes to the CSS file with minimal interaction with the Flash team at. Future versions of the fan with other skins will be even faster than the week turnaround for the March Maddness skin. That makes creating the Fan player a slam dunk.

LogBook, now for pure Actionscript 3 projects

2008-04-02T15:55:00Z

A while back we released LogBook, an AIR based application for logging messages from Flex applications. The feedback from the project has been great and the team is constantly working to add features to LogBook. However, as we used LogBook within CIM, we kept hitting a couple of issues with the Flex logging framework. One of the main issues was that not all projects we work on are Flex based. A lot of times we work on pure AS3 projects and sometimes even Flash CS3 projects. Using the Flex logging framework here was not really an option. One main reason for the problems was the dependency of the logging framework on other members of the Flex framework, most notably the ResourceBundle dependency. In AS3 projects in Flex Builder, including the ResourceBundle swc seems to fix this but that completely doesn't work in Flash CS3. Before adopting the Flex framework, within CIM we had our own internally developed frameworks (the AS2 version called Flashcore and the new AS3 version called Pyro. More news on Pyro in a few days as well so stay tuned). The framework had a completely developed logging implementation as well, which is really close to the Flex logging framework (both of ours and Flex's logging implementation was inspired by the logging frameworks in Java, most notably Log4J). Today we finally finished the LogBook console for the CIM logging framework and released it all into the LogBook SVN repository. Like the Flex logging framework, the main class here is a class named Logger as well. However, unlike the Flex logging framework, you do not request the Logger for an ILogger instance. Instead sending logging messages here is as easy as calling one of the static methods on the Logger class. For example, for logging messages that are at the Fatal level, you call Logger.fatal() method. The first parameter to any of the logging messages is the reference to the source of the message itself and the second is the message you want to log. Similar to the concept of Logging Targets (implementing the Flex ILoggingTarget interface) in Flex, our logging classes use a concept of Logging Consoles, implementing an IConsole interface. Out of the box, you get the TraceConsole and the LogBookConsole (There are a couple of other consoles as well that are not completely tested yet, like a Flex component based on TitleWindow that can float within the application). So at the start of your application's init phase, create a console and set it as the console for Logger. So at startup, do:


var console:LogBookConsole = new LogBookConsole('_localconnectionname');
Logger.console = console;

thats it, now you can send messages to LogBook by calling:


Logger.info(this, "Something crazy happened");
Logger.fatal(this, "KaBoom");
Logger.warn(this, "Dont say you haven't been warned");

Hope this helps. The CIM logging framework swc can be found on the featured downloads on the CIM Logbook project. Just include the swc in your application's build path. The documentation can be found here and the source code can be found here. Feedback is welcome, and if you are willing to help extend the libraries, drop us a message here. Cheers.

Fan 4.2.1 Launched : Save videos to watch later

2008-03-16T16:03:28Z

This week, we launched a new version of the Fan 4 application. The new version includes a new "My Playlist" tab. This entry is a quick introduction to that feature. If you are an active user of the Fan, you know that the Fan lets you queue the videos you would like to watch by selecting them from the browse menu under the player. However a few people have complained about a couple of features of that functionality: 1) If you didn't want to see the videos that had been selected by the editorial team, you would have to clear all videos by clicking on the "Clear Videos" button on top and then start adding your videos to the playlist. A lot of people missed the clear button as well and ended up adding videos at the end of the editorial playlist but the addition was not obvious. 2) There was no persistence of the user playlist between sessions. You could save a lot more videos to a playlist but end up watching only a few of them at one pass. Coming back to the fan at a later time would not show the videos you had added. To address these concerns, we introduced the "My Playlist" tab. Adding videos by clicking on the +playlist button now adds it to your playlist which is completely independent of the editorial playlist. You can choose whether you want to see the editorial playlist or your playlist by clicking on the corresponding tab on top of the player. The videos are saved on the browser so the next time you return to the Fan, your playlist shows all the videos you had saved in your earlier sessions. You can remove videos from your playlist by clicking on the 'x' icon in the list or remove all videos by clicking on the "Clear All" button on the top. Hopefully you will like this new feature. Happy browsing :).

Say Hello to LogBook

2008-02-08T21:46:18Z

Most Flex developers write perfect code ;). However, every once in a while, a bug appears somewhere in your application that becomes notoriously hard to find. Worse when the bug actually appears on a live web application and you have very poor visibility into whats happening within your application. In such cases, logging application events can be a blessing. As Flex developers may know, Flex has a pretty robust logging framework. However the default logging target is just the trace window and lacking in functionality most developers need. We hope this tool can improve that. Logbook is a tool that we developed within Comcast Interactive Media for logging messages from our Flex applications. LogBook is a desktop application built using Adobe AIR, so works on both Macs and PCs. This is the first public build of it and we have a list of features we are hoping to add in the coming months. LogBook is released under the MIT Open Source License. How does it work The LogBook application listens on a LocalConnection to messages sent from any application. When you launch LogBook, it will prompt you to enter the name of the connection you want to listen to. On the other end, in your Flex application, you must use the LocalConnectionTarget object in the cim.fx.logging.targets package as a logging target. And thats pretty much it. Now all logs will get sent to the LogBook application. Features There are quite a number of interesting features in LogBook that make it really useful: Color coded alerts LogMessages in the LogBook are color coded from gray for simple debug messages to red indicating fatal messages. This makes them really easy to spot when looking through a large set of log messages. Level based filtering The drop down ComboBox quickly lets you select what level you are interested in. For example, when debugging an application if you only care to see warning, error and fatal messages, you can set your level to "Warn" and all messages below that threshold will not be visible. Logger based filtering In a typical Flex application you can create a variety of Loggers by calling the Log.getLogger('...') method (see http://livedocs.adobe.com/labs/flex3/langref/mx/logging/Log.html#getLogger()). Each Logger created gets listed in the list on the right hand side of LogBook. By clicking on any logger listed there, you can filter data among the different Loggers that are logging messages letting you isolate messages from classes you are debugging from the larger log files. The list supports multiple selections. Live Search Using the text-input at the top of the application lets you filter on text in messages within your logs to quickly find info you are looking for. Save to file You can even save the logs into a text file on your machine. Log files are saved as formatted text that is very readable using any text editor. Text view vs. Grid view While most of the time, the grid view works to view log messages, you can even switch to text view if for example you want to copy paste a certain part of the log message. Once again, the text view is cleanly formatted to be readable. Open source The LogBook is released under the open source MIT license which means you are welcome to take the source code and build on top of it if you wish. However, we encourage you to submit feature requests and code that we can integrate into the core LogBook application so that evolution of this application benefits the entire Flex developer community. All code is housed on the Google Code site and bugs and feature requests will be listed there as well. Download LogBook Download the LocalConnection based Logging class here. To use this, see the "Using LogBook" section of this post. Using LogBook Once you have installed LogBook, launch it and you will be prompted to enter the name of the localConnection you want it to listen to. The example below broadcasts messages out on a channel named _test. Enter _test in the text input. Now in the widget below, put any message in the text input, choose the level you want to send the message as and hit send. In your application, you will immediately see the message appear in the main view. Add a few more messages and play around with the filtering functions in LogBook. The source code for the widget below can be downloaded from here. To enable LogBook logging in your application, all you have to do is include the cim.fx.logging.targets.LocalConnectionTarget in your classpath and create a new LocalConnectionTarget object initializing it with the name of your communication channel. Once thats set as your Logger, you should be good to go. You can use the source code of this widget as a starting point to get into LogBook.

Sneak Peek: Fan 4.2

2008-01-30T02:57:06Z

The last few weeks the Fan development team has been working pretty hard towards the next release of the video player. The new release revisits some of the UI of the application. We hope the changes make it easier to discover other videos from the Fan's library of over 100,000 videos. While the build is still currently in development/bug-fix mode, we figured it would be cool to give a sneak peek of whats coming down the line. So here is the first look at Fan 4.2: View image Comcast High Speed Internet service users can preview the application here. A lot of the design changes have come from user feedback on the Fan forum which the team has monitored closely as well as other user studies performed by the Information Architecture group here. One of the biggest changes has been the introduction of the "My Playlist" tab in the playlist area next to the video player. Currently, the Fan is always launched with a default set of videos from the Comcast.net site. However, the list is completely customizable by the user: Users can delete videos from the list by clicking on the x icon at the right corner of each list item, add new videos from the tabbed browse area under the player and drag videos to arrange the list in any order they wish. However, the current design didn't announce those features as well. The explicit naming of the two lists will hopfully get users to create a video experience that works best for them. Another change in the browse view is bigger thumbnails and paged navigation in the tabbed content browse region. We have also reduced the size of the +Playlist button that adds the video to the end of the user's "My Playlist" rather than play it immediately since most users expected the instant play when the clicked on a list item there. So basically we have maximized the area for the default action. The two arrows on either side of the content browser will allow you to browse through the initial set of videos per category. We've also added a little bit of eye candy that makes the user experience a little smoother. When paging through the navigator at the bottom of the screen, the thumbnails smoothly slide in. Rollover states are now soft transitions instead of instant color changes, and thumbnails get an animated "play" icon when mousing over them. Hopefully the new features as well as the design tweaks to the user interface will make the video experience a lot better. Feedback on these new features is welcome.

CIM acquires next generation of cell phone technology ;)

2008-01-12T04:31:32Z

A lot of you following this year's CES proceedings may have seen keynote by Comcast's CEO Brian Roberts which was followed by a segment by Jemaine & Bret from Flight of the Conchords. For those who missed it, here is the video of the skit. Well, the guys were kind enough to donate their 'prototype' duly autographed to us at CIM. So here is a quick photo before it gets taken away by the technology department ;). For those who haven't yet gotten into the show, I would strongly recommend it. And you can use our very own Fancast to find out when and how you can watch it.

Scary Weather

2008-01-09T01:39:28Z

The Flash team worked a bit with the team from fearnet.com a while back, integrating video within the site. We didnt have access to the Fearnet content at this time so we were just using the default videos from the Fan to debug the code. Something about this screen made me laugh: I wonder if weather.com would consider this whenever they redesign their site ;).

Welcome to the Flash Team Blog

2008-01-07T17:01:33Z

Oh we have so much to talk about... Actually I may be getting a bit ahead of myself here, so lets start again with the formal introductions. Hi, and welcome to the official Comcast Interactive Media (CIM) Flash team blog. Over the last few years, we have released quite a lot of Flash applications and we hope you have enjoyed them. As a team we have always tried to be a little ahead of the curve and deliver the best experiences on the web to you as soon as they appear. The team blog here is an attempt to give everyone a little more insight on how we do things and once in a while come up with something that may not be an official CIM project but may be cool anyway (think data-visualization and unconventional UIs). CIM also strives to be a Flex center for excellence and we have invested quite a bit into Flex standardizing on it for the next generation of video experiences. The Fan, CIM's flagship video player and winner of the prestigious Flash Forward User's Choice Award (Sept, 2006) is now a 100% Flex application and one of the best examples you would see in terms of skinning and MVC pattern based code. Being ahead of the curve, especially in Flex, we have also ended up developing a few tools to aid development and we are planning to release a bunch of them under open source licenses as well. Whew ! As you can see there is quite a bit here we would like to share with you, so do stay tuned in. 2008 promises to be pretty exciting :).