Archive for December, 2007

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:

  • 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:  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 or if you want to watch a recent episode of The Office you just go to 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.