On The Other Hand...

Lefty List

In the category of the somewhat strange, what if you need to place a scroll bar on the left side of a Flex component?  Or maybe you need a horizontal scroll bar at top instead of the bottom of a list? It is almost, but not quite, as simple as overriding updateDisplayList and moving the scroll bar, as I have seen mentioned elsewhere. 

What is easy to miss is the effect on the viewMetrics property of ScrollControlBase.  The viewMetrics is simply a borderMetrics that also accounts for the space used by any visible scrollbars.  If you move the scrollbars you must also recalculate the view metrics to accurately account for their new positions. 

The Flex 3 controls have hardcoded logic for scrollbars on the right and bottom, but placing them on the left or top is so easy it should really just be a matter of setting a style.  The demo below does exactly that. 

It uses a derived List class that adds two new styles --  horizontalScrollSide can be set to "top" or "bottom," and verticalScrollSide can be set to "left" or "right."  The demo also shows the difference between the borderMetrics and viewMetrics using the radio buttons at the bottom.

Right-click to view or download the source code.

Tune Your Flex Builder Java VM Settings

Have you ever suffered from constant pauses in the IDE while using Flex Builder?   The default memory and garbage collection choices can, depending on your setup, end up leading to relentless garbage collection that leaves you with the feeling of playing a first person shooter at about ten frames per second.  It makes productive development impossible, but fortunately you can almost certainly fix it by tuning the JVM options found in the file flexbuilder.ini in the directory where you installed Flex Builder.

To begin you can check your current environment in Flex Builder by choosing Help -> Product Details -> Configuration Details.

The first thing you might notice is that Flex Builder is running with a JRE 1.5 located in the [jre] directory where Flex Builder is installed, even though as a developer you have the latest 1.6 JRE installed on your system.  If you want to run under 1.6, I believe the easiest was to do it is to simply remain the [jre] directory to [this-is-not-a-jre] and restart Flex Builder, which will now run using the default JRE on your system.  You can point to a specific JRE on your system, but make sure that Eclipse is actually using that JRE -- see the comments here.

Next you can change the garbage collection and memory settings by editing the file flexbuilder.ini.  By default, these settings probably look like this:

-Xms128m
-Xmx512m
-XX:MaxPermSize=256m
-XX:PermSize=64m

Using the Garbage Collection Tuning documentation as your guide, try different settings to improve the responsiveness of the IDE.  Since developers' systems, and even the way we use Flex Builder, are different, there is no one choice of settings that is optimal for everyone.  However, a few points may hold true:

• Use a larger heap size if you can.  More memory is the easiest way to achieve fewer full collections ;-)
• Use a relatively larger tenured collection than the default settings provide.
• A couple of seconds added to compile time is barely noticeable, but constant virtual "screen freezes" while you are typing code or working in the IDE is fatal to your work flow as a developer.  Therefore, I have a strong preference for the low pause garbage collector over the throughput collector.

In my case, on an Athlon X2 machine with 2GB of memory I found the following settings give excellent performance without evidence of full collections taking place and, most importantly, have eliminated any hint of constant pauses while using Flex Builder.

-XX:+UseConcMarkSweepGC
-XX:+CMSIncrementalMode
-XX:NewRatio=3
-Xmx640m

Once you have the JVM garbage collection under control, Flex Builder is a joy to use.

Embed The YouTube Chromeless Player In Your Flex Application

Update Feb 27, 2009
This article generated a lot of interest. The most common complaint has been that the example doesn't work if you open it in multiple browser windows. This is a consequence of using a LocalConnection with a fixed name to receive incoming messages from the wrapper -- a second instance of the demo tries, and fails, to create the same LocalConnection. This is now fixed. I also reworked YTPlayer as a simple AS3 class instead of an MXML component. If you are trying to use this class in an AIR application, expect some difficulty! I hope to address this later, but for now please have a look at Chris Black's article showing an alternative approach that uses AIR's HTML control to embed the player and communicate via the YouTUbe Javascript APIs. In fact, the same approach can be used in the browser so long as you have script access.

The following is the original article.

Embed The YouTube Chromeless Player In Your Flex Application

Part of the success of Adobe Flex is due to the fact that it makes development for Flash recognizable and readily accessible to mainstream C++ and Java application developers who never programmed for Flash before.  But development can come to a screeching halt when confronted with something as simple as integration of a legacy Flash component.  Embedding the YouTube chromeless player, written in AS2, in a Flex application is a good example.  How does a Flex developer pull this off with no prior knowledge of AS2 or Flash Authoring, and without a copy of CS3 anywhere in sight?

Some Background

For this article we are only concerned with playing a YouTube video in a Flex application using the chromeless player API.  We will not be using the YouTube Data APIs, so our starting assumption is that we already have the ID of any video we want to play.

There are three ways to playback YouTube video.  You could embed the stock YouTube player using a URL of the form http://www.youtube.com/v/VIDEO_ID  but you will not be able to control or interact with the player SWF at all.  Secondly, you could access the FLV files directly and play them with the Flex VideoDisplay control.  You'll need to construct the URL to the FLV.  See James Ward's impressive demo using Dough McCune’s cover flow component.  Note that to play the FLVs directly you will end up proxying or storing them on your own server.

The third option, and the one we are interested in, is to embed the YouTube chromeless player, located at http://gdata.youtube.com/apiplayer.  The advantages of this player are:

• It allows full programmatic control over loading and playback.
• It can be used without a proxy thanks to the presence of a crossdomain.xml at gdata.youtube.com.
• As the name implies, you can skin the player in any way you like.

The catch using this with Flex is that the YouTube player is written in AS2.  While there is no issue loading the AS2 SWF in your Flex app, you cannot interact with it from your AS3 code.  The solution to this problem is to write a wrapper SWF in AS2 and use LocalConnection objects to enable two-way communication between the AS2 code and your Flex application. 

A basic outline of this approach was posted on March 17th on the YouTube developer forum.  Still, a Flex-only developer with no tools other than Flex Builder might feel no closer to a solution with this code. At least one developer on the forums was lead to practically beg for help from the AS2/Flash developers.

Writing The AS2 Wrapper

First, to use the chromeless player you must have a YouTube Developer key and you must pass the key as a query argument in the player URL.  It only takes a minute to sign up here.

The wrapper follows the same outline as the AS2 code posted in the YouTube developer forums with a few changes.  First we are going to use a pair of LocalConnection objects for each instance of the embedded player to enable bi-directional communication.  This is required if we want to deliver player status-change events and the current playback position to our Flex application.  Secondly, we will give each instance of the embedded player a different name -- hopefully the code will support multiple embedded players.

The communication looks like this:

The Flex code will use one LocalConnection with a fixed name to receive from the wrapper the randomly generated instance name of each player instance.  Using this name, a pair of additional LocalConnection objects is created -- one for Flex to issue commands that control the player, and one for the wrapper to send status updates to Flex.

Building The Wrapper Without CS3

We can use swfmill and MTASC to build the wrapper without using CS3.  Both are very simple to use and Clemans Hofreither posted a nice tutorial about using these two programs together.  The result is a ytbridge.swf that we can deploy with our Flex application, and we don't need a copy of CS3.  The full source for the wrapper and the commands used to build it are included in the source ZIP with the Flex demo below so I'm not reposting it here. 

Because the required developer key is passed from Flex to the wrapper, you are not required to build ytbridge.swf yourself unless you are making changes to the wrapper.  If you want, you can simply take ytbridge.swf as is from the source ZIP and avoid this step completely.

Using The Wrapper from Flex

All that remains is to load ytbridge.swf in our Flex application and communicate with it via the  LocalConnection objects.  Rather than walk through the details here, just choose View Source on the Flex demo.  Click on the image below to view the demo.

Other comments:

• I am not a Flash/AS2 developer.  If anyone can help improve or make corrections to the wrapper, please help!  Otherwise, feel free to use this as is at your own risk.
• You can create multiple instances of YTPlayer in your Flex app, but it seems you must load a video into each one before creating another.  Also, I had trouble separately controlling volume in any except the last player instance created.
• If you are finished with a player instance you must call dispose() in order to have the best chance of actually stopping audio and video playback and reclaiming resources.
• You can resize the player without difficulty as the demo shows, but you should ensure that the player maintains an aspect ratio of 4:3.
• Don't forget to pass your developer key -- it will not work without it.