Comcast Uses Flash Video

Comcast has a new beta site, FANCAST, where you can watch streaming episodes of many of your favorite shows. You can watch something as recent as a latest 30 Rock or something as old as the first Lost in Space from the 1960’s (in black-and-white no less). Oh, an it’s FREE! At least for now.

I suppose Comcast could have choosen to use any number of web technologies to do this, but to me, chosing Flash Video was the right choice. OK, I am a bit biased, but come on, this is really cool technology. Look at all the different ways video is being presented on the web when used with Flash Video.

I’ve watched a couple of episodes on both fast and slow connections including WiFi. Never a hiccup. That may change as more people find out about FANCAST, but that only means Comcast needs to upgrade its equipment, not the software.

For more information about Flash Video, check out the new Flash Media Server.

Using SQL with Adobe AIR

I’ve not been happy about the performance of my Atmospheres Music Player. I installed it on my home computer where I have a network disk that holds all my CDs – about 240 of them. When I pointed Atmospheres at the network drive, it took a long time for it to read all of the music information from the disk. I had taken steps to make the program responsive while the files were being read, but still, it took a long time. I told my teammate, Kyle Quevillon, about this and he suggested that I cache the information much like other music players do.

What he meant was that Atmospheres shouldn’t read the file system, especially one on a remote disk, as its primary source of information in the music library. A light went off in my head when I realized I could use the SQL Lite database built into Adobe AIR. This was a perfect application of the database: I could have Atmospheres read the file system and store information into a local database, reading that information whenever it started. I’d only read the file system when new CDs were ripped.

If you didn’t know it already, AIR comes with a genuine, lightweight, database – an implementation of SQL Lite. You can create tables, views, insert data, delete data, and run queries. The API to do this is the flash.data package. If you are interested in using the SQL capabilities of AIR, then read on.

Here’s what I did:

I created a class to read the file system and build the Album objects. The Album class already existed and in fact, the code to read the file system already existed, too, in the MusicLibraryViewer class. I created a new class (FileReader) which creates the Album objects and notifies another class once an album has been read.

The other class is the Cache. One function of the Cache class is to take the information from the FileReader (ie, Albums) and store them into a database. Another function is to read the database and build a list of Albums from that information.

Atmospheres starts by getting the Cache to read the database and build the Album list. This is presented in the Atmosphere’s user interface. At any time, especially the first time you run Atmospheres, you can refresh the music library. Doing this causes the FileReader to create an Album which the Cache compares to what it has read from the database. Anything new is put into the database as well as in memory.

Scanning the file system isn’t lightning fast, but when you are expecting it to be slow, it moves along quickly enough and builds the local database. Reading the database is, in my opinion, astonishingly fast. I’ve got about 2,800 tracks from those CDs stored in the local database. It reads that data very quickly and builds the Album list in an eye-blink.

Download
You can download the code here. This is a Flex 3 Beta 3 project archive. If you do not hav Flex 3 Beta 3, find it here.

Now when Atmospheres starts on my home computer, it comes up right away, showing all 240 albums and is ready to play any of them.

Scrolling Text Component

Here’s another example of a Flex component. This one scrolls a message within a fixed area. The message can be scrolled vertically or horizontally. You can give it a try right here:

This component shows how to use custom properties, meta data to work with Flex Builder, and overriding functions.

Click here to download the source code. The download is a Flex Builder 3 Beta 3 project – if you do not have Flex Builder 3 Beta 3 from Adobe Labs, you can open the file as a regular archive and use the source code.

Component Pack from ILOG

I’ve been asked a number of times if there are more chart types, as well as other controls, available for Flex. Perhaps I’m late to the party, but I just came across this announcement (from October 2007) that Adobe and ILOG are teaming up to enhance Flex 3.

Here’s a quick list of what’s available in the ILOG ELIXR package. You can find out more on Adobe Labs: http://labs.adobe.com/wiki/index.php/Flex_3:ILOG

  • Radar charts (also named spider charts)
  • Full 3D charts including bar/column, area, line and pie
  • Treemap component, for analyzing large data sets
  • Scheduling component, allowing users to view and manipulate time series data
  • Organizational charts
  • Country maps for creating interactive reports or dashboards

There is a beta for you to download on that link as well as links to demos.

Component Class – Part Five

The last article in this series showed how to write the CycleSelectButton from scratch. In this article I’ll look at styling and skinning the component.

Skins versus Styles

One frequently asked question is "what’s the difference between styles and skins?" This is a good question and it is confusing a bit because you specify a component’s skins using specific styles on the component. For example, the upSkin style on the Button component.

Styles control the appearance of a component while skins are the appearence. Or put another way, skins use styles to present the component. Take the borderColor style. It’s purpose is to specify the color of a component’s edge. The component’s skin can use that style to draw its border – which may be round or square, thick or thin (using the borderThickness style). The skin contains the look of the component.

The reason skins are specified as style is so you can build an entire look or theme using just style sheets (.CSS files). If skins were specified in ActionScript you would have to deliver a new SWF for each theme. Having the skins and other styles in CSS means you can change the theme of an application with a new style sheet.

There are two types of skins: graphical and programmatic. Graphical skins are bitmaps: GIFs, JPGs, PNGs, etc. In Flex 3 you can import graphical skins from Adobe Illustrator and Adobe Photoshop. You can use Adobe Flash CS3 to create animated skins (picture a button that pulses with color).

Programmatic skins are written in ActionScript. They are class files that usually extend mx.skins.ProgrammaticSkin which is a very lightweight class. The class uses its override of updateDisplayList() to render the skin using the drawing API (see flash.display.Graphics).

Each component has its own set of skins. For a Button there are 8 possible skins: upSkin (its normal state), overSkin (when the mouse hovers over it), downSkin (when the mouse is pressed over it), disabledSkin (when the Button’s enabled property is false), selectedUpSkin (when the Button’s toggle property is true), selectedOverSkin (toggle is true and mouse is hovering over the Button), selectedDownSkin (toggle is true and mouse is pressed over it), and selectedDisabledSkin (toggle is true and enabled is false). If you want to use graphical skins for a Button, you should supply 8 different image files. If your Button will never be a toggle, then you can supply just 4 skins.

Continue reading…

Atmospheres Music Player Update for AIR Beta 3

I have (finally) ported the Atmospheres AIR Music Player to Flex 3 Beta 3. You can get the complete code as a Flex Builder 3 Beta 3 project at the following link:

Download Atmospheres Beta 3 Project Here

You will need the Flex 3 Beta 3 software from Adobe Labs. This will also install the newest version of AIR. You may find however, that older AIR applications will no longer run.

There are a couple of changes from the previous version of this application:

The music player uses a component I wrote called ScrollingText. This displays a moving banner at the top of the application showing the artist, track, and composer of the current song.

Drag and drop has changed. You can still drag both Albums and Tracks into the Playlist area, but the feedback is different. That’s because in Beta 3, AIR applications use the native drag and drop. This means your AIR applications can exchange data with desktop applications. Very nice, but I liked the image proxies. Hopefully that will become an option by the final release.

Friday, March 7 2008: I’ve updated the link associated with this article.

Flex 3 Beta 3 Available

The third and final public beta releases of Flex 3 and Adobe AIR are now available for download on Adobe labs. These releases are focused on quality and performance, resolving numerous bugs from beta 2. This is your final chance to provide feedback on the release before launch, so please take this opportunity to take a final, thorough look. You can download the final beta releases of Flex 3, Flex Builder 3, and Adobe AIR on Adobe Labs at: http://labs.adobe.com/.  Please also be sure to check out BlazeDS, the newest open source Remoting and Messaging project from Adobe.

New Versions of Flash Media Server and Flash Player

Adobe in the News

On Monday, December 3, 2007, Adobe announced new versions of the Flash Media Server and the Flash Player. Here are some highlights:

- Flash Media Server 3:  includes two offerings; Adobe Flash Media Streaming Server 3 for live and video on-demand streaming and Adobe Flash Media Interactive Server 3 for customized scalable video streaming services plus multi-way social media applications

Adobe Flash Player 9 Update 3, previously code named Moviestar now includes H.264 standard video support ­ the same standard deployed in Blu-Ray and HD-DVD high definition video players ­and High Efficiency AAC (HE-AAC) audio support

Adobe Flash Player 9, combined with Adobe Flash Media Server 3 enables the delivery of HDTV quality video to the broadest online audience and paves the way for high definition Adobe Flash experiences on consumer devices.

If you read carefully you’ll see we are offering two versions of Flash Media Server. Why? Well FMS was often compared to Windows Media Server and some people complained that the price point for FMS was too high. What they failed to realize is that FMS was more than just a video streaming server. Unlike WMS, you can program FMS using ActionScript and do a number of behind-the-scenes tasks (such as authorization) that are not possible with WMS.

Adobe has a nicely priced version of FMS that does nothing but streaming. Iif you’ve ever thought about creating your own video blog or your own movie studio, you now how have a way to deliver high-quality video to virtually every desktop in a fast, and reliable manner.

Future of Entertainment

Normally I just post these announcements, but I feel compelled to add more in this case. You see, I am a television/video junkie. There’s not much I won’t watch. Have you ever watched one your favorite programs streamed over the web? Chances are you were watching the show in the Flash Player with the video streamed with Flash Media Server. Some sites still use WMS and you can tell which ones they are. Now with Flash Player 9 Update 3, FMS can deliver HDTV quality video right to your desktop.

Having the major networks make popular shows available for streaming is a huge step toward what I believe to be, the future of in-home entertainment. Today you can use your television as a computer monitor and to watch a home improvement show you go to HGTV.com or if you want to watch a recent episode of The Office you just go to NBC.com. It is just a little clunky to get directly to the shows you want to watch.

What I don’t get is why advertisers aren’t driving this more aggressively. As you probably know, the use of TiVO (I have 3 myself) has started to raise some alarms with advertisers. People just skip over the commercials. Who wouldn’t? You want to watch the program, not someone patting themselves on the back for making a vacuum cleaner.

If you have watched a streamed video from the major networks you have noticed that it, too, has commercials. But you cannot skip over them. You are held captive and must either leave the room, close the laptop, or do whatever it is you did before you got a TiVO, to avoid them. This is what I mean – the advertisers are worried about viewership going downhill with the rise of TiVO use, yet right before their eyes is the emerging technology of video streaming over the internet. And they have total control. You can fast-forward and rewind and pause the program’s video stream ala TiVO, but come commercial time you are stuck. Some sites post a “Video will resume in # seconds” countdown clock (which I tend to watch more than the commercial) followed by ‘Click here to continue’ button (I wish the video would just start back up).

The really cool thing for advertisers about watching television programs streamed over the internet is that they have many choices in their advertisements. There is the standard commercial inserted into the video stream. There is also all the space around the video player for ads. But what’s most important, is the ability to have targeted advertising. Imagine that your location is readily available to the web page hosting the video. The advertising software can display ads for services and products local to you.

We are just at the beginning of this revolution in entertainment. Once the advertisers get a whiff of this, the money will start flowing to the web sites and the focus will be redirected. I hope this leads to a lot of improvements, but these things often get off to a rocky start. I just hope we all have the sense and patience to make this a rich and responsible way to get our entertainment in the 21st century.  If I were TiVO, I’d start planning to be a leader and not let my market dry up.

PopUp, Can You Hear Me?

Communicating with a PopUp is a common task. This article explores how to do that.

The first example shows how to use Alert to pose a question and get answer.

private function showQuestion() : void
{
Alert.show("Do you like Flex?", "Question", Alert.YES|Alert.NO,this,processAnswer);
}

private function processAnswer( event:CloseEvent ) : void
{
if( event.detail == Alert.YES ) {
response.text = "Of course you do!";
} else {
response.text = "Hmm. Really? Keep reading then.";
}
}

Now that you’ve seen how Alert works, let’s look at a more complex example. Here, a TitleWindow is used to present a choice of themes (you can see one like it in my Atmospheres AIR Music Player). When the user picks the Apply button the theme changes.

This is the code for the pop-up, ThemeChooser.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
width="338" height="252"
title="Choose Your Theme"
showCloseButton="true"
horizontalAlign="center"
verticalAlign="middle"
close="PopUpManager.removePopUp(this)">

<mx:Metadata>
[Event(name="changeTheme", type="theme.ThemeEvent")]
</mx:Metadata>

<mx:Script>
<![CDATA[
import theme.ThemeEvent;
import mx.managers.PopUpManager;

private function dispatchThemeChoice( themeName:String ) : void
{
dispatchEvent( new ThemeEvent(themeName) );
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>

<mx:VBox horizontalAlign="left" verticalGap="17">
<mx:RadioButton label="Adobe Red" click="dispatchThemeChoice('adobeRed')"/>
<mx:RadioButton label="Orange Neon" click="dispatchThemeChoice('orangeNeon')"/>
<mx:RadioButton label="Blue Wave" click="dispatchThemeChoice('blueWave')"/>
</mx:VBox>

</mx:TitleWindow>

Notice that when a RadioButton is clicked, an event is dispatched. The event is a
ThemeEvent – a custom event type. This is the code for the event, ThemeEvent.as:

package theme
{
import flash.events.Event;

public class ThemeEvent extends Event
{
public static const CHANGE_THEME:String = "changeTheme";

public function ThemeEvent(themeName:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(CHANGE_THEME, bubbles, cancelable);

this.themeName = themeName;
}

public var themeName:String;
}
}

This is the code for the main application to demonstrate it:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="271" width="532"
borderStyle="solid"
borderColor="black"
borderThickness="1">

<mx:Script>
<![CDATA[
import theme.ThemeEvent;
import theme.ThemeChooser;
import mx.managers.PopUpManager;
import mx.core.IFlexDisplayObject;

private function showThemeDialog() : void
{
var pop:IFlexDisplayObject = PopUpManager.createPopUp(this, theme.ThemeChooser, true );
pop.addEventListener( ThemeEvent.CHANGE_THEME, selectTheme );
PopUpManager.centerPopUp(pop);
result.text = ""; // reset
}

private function selectTheme( event:ThemeEvent ) : void
{
result.text = event.themeName;
}
]]>
</mx:Script>

<mx:Button x="24" y="27" label="Select Theme" click="showThemeDialog()"/>
<mx:Label x="24" y="57" fontWeight="bold" color="#FFFFFF" id="result"/>

</mx:Application>

I think this is the easiest solution: a custom event. The event contains all of the information from the pop-up and lets the pop-up disappear without having to hang around while you get information from it. If you have a lot of data (e.g., a user’s profile) consider creating a class to represent it and have the custom event contain an instance of the class. This also makes it easier to change the information later.

Both of these examples use window-type classes as the base for the pop-ups. But you can use any component for a pop-up. Here’s a pop-up that’s a shape with text; it has no buttons nor a frame. Click it make it go away. While not very intuitive, it does make the point.

Download Files
You can download the code for this specialized pop-up here.

This zip file is a Flex Builder 3, Beta 2, project archive. If you do have Flex Builder 3, Beta 2, you can import the source files directly from the zip.

When you use a modal pop-up, which is what all these examples have been so far, you’ll notice that the background becomes lighter and blurred. This is governed by styles on the Application which you can change. You can change the color and amount of blur. You can even get rid of both.

Mode-less pop-ups are common as floating tool bars. There’s no difference in how you make them nor interact with them, just in how you present them. Using a mode-less pop-up enables the user to continue working with the application while the pop-up is still present.

I hope this gives you some ideas in case you need to pop-up dialogs or warnings. Be unconvential and use events to communicate the result of the pop-up back to the main application.

Component Sources Modified

A couple of typos and a mistake have been brought to my attention regarding the ZIP files for these Component examples. I have made the fixes and replaced the files. If you have downloaded the code, please go back to the articles and download the files again.
.