YouTube Videos in Flex

Here is an example of how to get YouTube videos to be shown inside your Flex Application.

The first thing to do is add an SWFLoader to your mxml file. The source property of the SWFLoader gets set to the url of the video that you want to show inside Flex.
But you can't just use any YouTube url like this one:

http://www.youtube.com/watch?v=owGykVbfgUE

Instead you use a url in this form:

http://www.youtube.com/v/VIDEO_ID?version=3

The id of the video you want to play (e.g. owGykVbfgUE) must replace the VIDEO_ID portion of the url. This url actually redirects to an SWF file somewhere.

The version=3 parameter is very important. This tells YouTube to load the ActionScript 3.0 version of the SWF file. Without this parameter it defaults to the AS2 version which doesn't not play nicely with AS3. I found that I could watch one video, but after that no other videos could be played (I found this blog post that explains why if you're interested). I also found this YouTube reference which is where I learned about using the version=3 parameter.

There are a few other parameters that you can use like:

• autoplay=1 - starts the video immediately without the user having to press play
• fs=1 - allows full screen
• rel=1 - shows related content after the video has finished playing

For a full list of the parameters go here

And finally, when you want to play another video, make sure you call the swfLoader.unloadAndStop() function otherwise you can get multiple videos playing at the same time, very confusing.

Keep in mind that when you run this locally you will see a lot of SecurityExceptions in your console, this is expected and normal.

And one last thing, some videos you will not be able to play inside Flex due to copyright restrictions. The owners of youtube videos must be able to specify whether the video can be played from a different website using an embedded player.

Here is the example in action (right click to view-source):

Default stylesheet in an SWC (Flex Library Project), and embedded font rotation

For ages now I've been trying to figure out how I can use a StyleSheet from inside my Flex Library Project in ActionScript. I kept reading that it is very resource intensive to be calling UIComponent.setStyle(...) at runtime, so I wanted to set all my styles using a StyleSheet. The LiveDocs on the subject seem to say that there are two ways to load a StyleSheet:

1. From inside MXML in your Application using the <Style source="assets/styles.css"/> tag
2. By loading an external stylesheet SWF file (compiled from a CSS file) using the
   StyleManager. loadStyleDeclarations(url)

Then I finally found the solution in this article (right near the bottom of the page in the comment by Henk). And that pointed me to this LiveDoc - Applying styles to your custom component which solved the problem. Scroll most of the way down until you get to the part called "Applying styles from a defaults.css file".

If you don't want to read the articles above, here is my brief summary.

Using a StyleSheet in your FlexLibrary Project:

1. create a StyleSheet in the src directory of your project, and call it defaults.css
2. open the project Properties > Flex Library Build Path and check the src/defaults.css file under the Assets tab
3. define your styles inside the defaults.css StyleSheet

Restrictions:

• You can include only a single style sheet in the SWC file
• The file must be named defaults.css
• The file must be in the top-most directory of the SWC file

*Note: it appears that having a defaults.css file in your Flex Application project (swf) also works without having to specify the stylesheet in the mxml (e.g. <mx:Style source="defaults.css"/> is not needed).


Using Embedded Fonts inside Flex Library Project/SWC:
If you want to use an embedded font inside your library project you have two ways of doing this:

1. Embed the font inside an ActionScript file like this (the font is inside the project src/assets directory):
   

   [Embed(source='/assets/verdana.ttf', fontName='localVerdana',         mimeType='application/x-font')] public var verdanaFont:Class; ... setStyle("fontFamily", "localVerdana");

2. Or put your embedded ttf font in your project's src directory and embed the fond using the defaults.css file (the font must be in the src directory for this to work - see this Adobe Bug for more details):
   defaults.css:
   
   @font-face {
     font-family: localVerdana;
     font-weight: normal;
     src: url("verdana.ttf");
   }
   .label {
     /* must use embedded font for label rotation to work */
     font-family: localVerdana;
     /* must specifically set the font weight */
     font-weight: normal;
   }

Note that if you want to set the DisplayObject.rotation property then you have to use an embedded font otherwise it doesn't work.

Here is a simple example of font/label rotation (right click "View Source" for the code).
In this example I actually included three fonts - Verdana plain, Verdana bold, and Comic Sans.

* Note that fonts can greatly increase the size of your SWF. The three fonts that I used above are all about 150 KB each. One way to reduce the size of your SWF is to restrict the unicode character range (meaning that only part of the font set is included in your SWF). Here is the LiveDoc on Using Fonts and Setting Character Ranges.

Ben Stucki's blog helped me figure out how to embed a bold and plain font in CSS.