Well loading a YouTube video in ActionScript 3 has never been easier and there is nothing to download (which has its downside in some way)to get started.

Here is all the code needed to load a YouTube movie:

package {
 import flash.display.DisplayObject;
 import flash.display.Loader;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.net.URLRequest;
 
 public class Main extends Sprite {
  private var _loader : Loader;
  private var _player : Object;
 
  public function Main() { 
  _loader = new Loader();
  _loader.contentLoaderInfo.addEventListener(Event.INIT, _onLoaderInit, false, 0, true);
  _loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
  }
 
  private function _onLoaderInit(event : Event) : void {
  _player = _loader.content; 
  _player.addEventListener("onReady", _onPlayerReady, false, 0, true);
  addChild (DisplayObject(_player));
 
  _loader.contentLoaderInfo.removeEventListener(Event.INIT, _onLoaderInit);
  _loader = null;
  }
 
  private function _onPlayerReady(event : Event) : void {
  _player.removeEventListener("onReady", _onPlayerReady);
  // Once this event has been dispatched by the player, we can use
  // cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
  // to load a particular YouTube video.  
  _player.setSize(640, 360);
  _player.loadVideoById("D2gqThOfHu4");
  }
 }
}

You can compile this code as an ActionScript project or make it the Document class of an fla in the Flash IDE to make it work.

So you start by loading the player using a normal Loader. Once the player is loaded you have to wait for it to send the onReady event before you can interact with it. Once this is done you can call all of the function from the API.

The previous code would load the chromeless YouTube player; but if you wanted to use the controls from YouTube you would only have to replace one line:

//_loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));//replace this line with the following
_loader.load(new URLRequest("http://www.youtube.com/v/VIDEO_ID?version=3"));//replace VIDEO_ID with the id of the video you want to load in the previous case :"D2gqThOfHu4"
 
//also you can comment the following line if you don't want the video to start automatically:
_player.loadVideoById("D2gqThOfHu4");

All the functionalities that where accessible with TubeLoc are also accessible with the AS3 API and there are some more. Those are methods to control the quality setting of the loaded movie. You can set the quality to small, medium, large and hd720. To do so you have 3 methods on the player. getPlaybackQuality():String will return the quality of the video currently playing. setPlaybackQuality(suggestedQuality:String) enables you to set the quality. Finally, getAvailableQualityLevels():Array will return you all the possibilities of quality that you can set the current video to.

For more information on the topic, refer to the API : http://code.google.com/apis/youtube/flash_api_reference.html

What you should know:
- Basic knowledge of ActionScript
- Basic knowledge of YouTube

What you will learn:
- How to load YouTube videos into Flash
- How to use the TubeLoc library to control those videos

Embedding a YouTube movie in an HTML page is an easy task, but we can’t say the same about embedding a YouTube clip in a Flash/Flex website. TubeLoc, an opensource library, is there to make that easier.

Before TubeLoc, you could always go and try to find the address of the FLV the YouTube player is loading and load that FLV directly into your Flash application, but YouTube changes the address almost every night, so it wasn’t a very long term solution. Another problem that TubeLoc solves is the fact that the YouTube player is made in ActionScript 2 and most projects now are using ActionScript 3, so it was hard interfacing with the player. TubeLoc is a wrapper around the the AS2 player and show us an AS3 API, but behind the scene it handles the YouTube player using local connection.

To get started with TubeLoc you will first need to download the library at this address:

http://code.google.com/p/tubeloc/

There you will also find a great demo showing you what you can do with the library. You can pause, stop, play, mute, seek, change the volume, change the the size of the video and even load the video without the YouTube player chrome (so you won’t see the play button from YouTube the only thing that will be there is the YouTube logo at the bottom right of the video).

In the zip file that you download from the previous url, copy the “com” folder located in the “as3/src” folder in the same directory where your FLA will be. Also copy there the file as2_tubeloc.swf from the folder “as3/lib”. Now we can get coding. Here is all that is needed to load a YouTube movie into Flash:

import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
 
var youtubeMovie:MovieSprite = new MovieSprite(null, true);
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
addChild(youtubeMovie);
 
function onPlayerReady(event_p:PlayerReadyEvent):void {
//it's just cleaner to remove listener that won't be used again
youtubeMovie.removeEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
 
//you can set the size of the movie this way
youtubeMovie.width = 370;
youtubeMovie.height = 276;
 
youtubeMovie.loadVideoById("tprMEs-zfQA");
}

The first lines import the library from the “com” folder we copied. After that it creates the MovieSprite. The first parameter is the id of the YouTube movie, since I will set that later I can just pass null to it. The second parameter is if I want to use the chromeless player, in this case I set it to true. The chromeless player is usefull when you want the video player to have control that are similar to the rest of your application. It is also usefull when you want to put your video under a mask to escape the traditonnal square look of videos. If we continue with the code, after we created the MovieSprite, we have to wait for the player to be initialized to go on that’s why we put an event listener on the MovieSprite(youtubeMovie). Once the listener function is called, all that is left to do is call the loadVideoById method. Finding a video id from YouTube is really easy; if the url of the video you want to load looks like this:

http://www.youtube.com/watch?v=tprMEs-zfQA

Than your id is only the last part : “tprMEs-zfQA”.

Now if you want to control your video all you have to do is :

//this will pause the video
youtubeMovie.pauseVideo()
 
//this will make it play again
youtubeMovie.playVideo()
 
//to mute the video
youtubeMovie.mute()
 
//to set the volume to half of maximum
youtubeMovie.setVolume(50)
 
//to seek in the video to 20 seconds
youtubeMovie.seekTo(20)

Well that is all it take to load a YouTube movie into Flash. I should warn you of some pitfalls; by reading the issues on the google code page, there seems to be problems with loading multiple videos at the same time. Also, destroying an instance of a MovieSprite seems to inhibit you from creating another one after so you should always keep an instance of you MovieSprite alive. Aside from that TubeLoc is an awesome library and I hope to see the proliferation of YouTube videos inside of Flash!

On the same note, I received my copy of the Flash & Flex developer’s magazine where my article on Google Analytics For Flash was published and it feels very nice to see my own work in paper. They forgot to put my bio where I mention this blog, but I think they will fix this on my next article on TubeLoc. Can’t wait to see it.

Here is the verbatim from my slides

Google Analytics For Flash – Presentation Transcript

1. Google Analytics for Flash
2. Dominic Gélineau Flash developer Analytics, Animation, SEO dgelineau@gmail.com Blog: www.zedia.net Twitter: http://www.twitter.com/zedia WE ARE HIRING aubrey@twistimage.com
3. Why care about analytics? Because it’s cool To provide data to your clients on the impact of what you are doing To give you feedback on the effectivness of your work
4. Why Google Analytics? It’s free It’s widely used It has a concept called event It now has a library just for Flash
5. Basic concepts about web analytics PageViews Events
6. PageViews The PageViews model is based on the HTML version of a web page The real idea behind a pageView is NAVIGATION In HTML this is sent automaticaly every time the user changes or refresh the pageIn Flash we have to do this manually We should try and keep the same syntax as HTML for consistency
7. Events The real idea behind events is INTERACTION Whenever you want to track something that is not related to navigation you should use an event. In Google Analytics Events are not enabled for all profiles http://code.google.com/p/gaforflash/wiki/EventTrackingRequ est
8. Google Analytics for Flash Library http://code.google.com/p/gaforflash/ Just search Google for «Google Analytics for Flash»
9. How to install it Flex and Flash CS4 can import SWC Flash CS3 can’t Download the library from SVN Put the SWC file in this folder: C:\\Program Files\\Adobe\\Adobe Flash CS3\\language\\Configuration\\Components Macintosh HD:Applications:Adobe Flash CS3:Configuration:Components
10. Sample Code import com.google.analytics.AnalyticsTracker; import com.google.analytics.GATracker; var _tracker:AnalyticsTracker = new GATracker ( main, “UA-7777777-7”, “AS3”); _tracker.trackPageview(yourSectionName + “/”);
11. More on Events _tracker.trackEvent(“English”, “Client Quiz”, “Question 3”, value); Category, Action, Label, valueOnly the two first are mandatory Value is an integer No standards, no real guidelines
12. 2 Modes: AS3 vs Bridge The library can work in two modes, AS3 or Bridge. Each of them has there advantages.
13. AS3 Mode Stand Alone mode Doesn’t require javascript Usefull for full Flash website Usefull when you don’t control the HTML that wraps the swf like for widgets or games
14. Bridge Mode var _tracker:AnalyticsTracker = new GATracker (main, “window.PageTracker”, “Bridge”); Integrates better when the Flash part of a website is minor Enables more of the Google Analytics API like E-commerce allowScriptAccess = always
15. Visual Debug var _tracker:AnalyticsTracker = new GATracker (main, “UA-7777777-7”, “AS3”, true);   One of the coolest features of GA for Flash Permits you to see in real time what is being sent to Google Clear advantage over the old way, which was to wait 3 hours and check to see if everything worked
16. Visual Debug Screenshot
17. What should you track Too much is like not enough Tracking errors is really helpful
18. One draw back The library will add 40k to your project Might not be the best thing for all project Like banners
19. Links  Google Code – http://code.google.com/p/gaforflash/  Developer group – http://groups.google.com/group/ga-for- flash?pli= 1  Adobe Max presentation on GA for Flash – http://tv.adobe.com/#vi+f15385v1040
20. Questions?
21. Thank you Dominic Gélineau dgelineau@gmail.com www.zedia.net http://www.twitter.com/zedia

• PureMVC
• SWFObject from Google hosted libraries API
• TubeLoc (I had a few problems using it at first, but I could do it way faster now)
• The microsite resizes to fit smaller resolutions
• TweenMax (I am going to use the colorMatrixFilters everywhere now)

One of the goal of the campaign is to get the most people clicking on a button on June 3rd to make a world record. You can click on the button from facebook, banners, the microsite and a widget like this one:

Congrats to the entire team at Twist Image who worked on this. So check it out: The Great Canadian Moo.

And I forgot on June 3rd, go back to the microsite and go beserk on the moo button!