Monthly Archives: October 2009

YouTube AS3 Example Using Flash Professional

Posted on by
11

Based on comments received in my previous article I’ve decided to also produce an example using Flash Professional CS4. The approach is different in some ways, but very similar in others.

View the Example:

Flash Player 10.2 or greater is required!

References:
The ActionScript 3 YouTube Chromeless Player is Now Live
YouTube ActionScript 3.0 Player API Reference

Download the Example:
YouTubeAS3_CS4.zip

View Code for Flash Professional:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

package {
	import flash.system.Security;
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLRequest;
	import fl.data.DataProvider;
	import fl.controls.ComboBox;
	import fl.controls.TextArea;
 
	public class YouTubeAS3 extends MovieClip {
		public var VidHolder:MovieClip;
		public var VidSelection:ComboBox;
		public var traceArea:TextArea;
 
		private var player:Object;
		private var loader:Loader;
		private var vidCollection:DataProvider;
 
		public function YouTubeAS3():void {
			Security.allowInsecureDomain("*");
			Security.allowDomain("*");
 
			vidCollection = new DataProvider();
			vidCollection.addItem({data:"KhAplw0Z8zQ", label:"Wreckage"});
			vidCollection.addItem({data:"d54AA2YWll0", label:"Window View"});
			vidCollection.addItem({data:"Sv83GeuyN8A", label:"The Fearless Man"});
			vidCollection.addItem({data:"9t5guYGbuZs", label:"Ephemeral"});
 
			VidSelection.dataProvider = vidCollection;
			VidSelection.addEventListener(Event.CHANGE, cueVideo);
 
			loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
			loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
		}
 
		private function onLoaderInit(event:Event):void {
			VidHolder.addChild(loader);
			loader.content.addEventListener("onReady", onPlayerReady);
			loader.content.addEventListener("onError", onPlayerError);
			loader.content.addEventListener("onStateChange", onPlayerStateChange);
			loader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);
		}
 
		private function onPlayerReady(event:Event):void {
			traceArea.text += "player ready:" + Object(event).data + "\r";
			player = loader.content;
			player.setSize(VidHolder.width, VidHolder.height);
			VidSelection.selectedIndex = 0;
			VidSelection.dispatchEvent(new Event(Event.CHANGE));
		}
		private function cueVideo(event:Event):void {
			traceArea.text += "switch to:" + event.target.selectedItem.label + "\r";
			player.cueVideoById(event.target.selectedItem.data);
		}
 
		private function onPlayerError(event:Event):void {
			traceArea.text += "player error:" + Object(event).data + "\r";
		}
 
		private function onPlayerStateChange(event:Event):void {
			traceArea.text += "player state:" + Object(event).data + "\r";
		}
 
		private function onVideoPlaybackQualityChange(event:Event):void {
			traceArea.text += "video quality:" + Object(event).data + "\r";
		}
	}
}

Google FINALLY Releases AS3 Player for YouTube

Posted on by
11

Absolutely wonderful that Google has finally released an AS3 version of their chromeless player for use in Flex/AS3 projects. No more weird proxy hacks!!!

I’ve thrown together a quick example and have posted the code below. Really simple stuff to set up and use. Google seems to be more and more friendly to the Flash world lately. There are at least two major projects I’m going to implement this in as soon as I get the time to do so. Very nice- I’m quite pleased!

View the Example:

Flash Player 10.2 or greater is required!

References:
The ActionScript 3 YouTube Chromeless Player is Now Live
YouTube ActionScript 3.0 Player API Reference

Download the Example:
YouTubeAS3.fxp

View Code for Flash Builder 4:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/halo" 
			   applicationComplete="init()" width="480" height="500">
	<fx:Script>
		<![CDATA[
			import flash.system.Security;
			import mx.collections.ArrayCollection;
			import mx.events.ListEvent;
			import flash.display.Loader;
			import flash.events.Event;
 
			private var player:Object;
			private var loader:Loader;
			[Bindable] private var vidCollection:ArrayCollection;
 
			private function init():void {
				Security.allowInsecureDomain("*");
				Security.allowDomain("*");
 
				vidCollection = new ArrayCollection();
				vidCollection.addItem({data:"KhAplw0Z8zQ", label:"Wreckage"});
				vidCollection.addItem({data:"d54AA2YWll0", label:"Window View"});
				vidCollection.addItem({data:"Sv83GeuyN8A", label:"The Fearless Man"});
				vidCollection.addItem({data:"9t5guYGbuZs", label:"Ephemeral"});
 
				loader = new Loader();
				loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
				loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
			}
 
			private function onLoaderInit(event:Event):void {
				VidHolder.rawChildren.addChild(loader);
				loader.content.addEventListener("onReady", onPlayerReady);
				loader.content.addEventListener("onError", onPlayerError);
				loader.content.addEventListener("onStateChange", onPlayerStateChange);
				loader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);
			}
 
			private function onPlayerReady(event:Event):void {
				traceArea.text += "player ready:" + Object(event).data + "\r";
				player = loader.content;
				player.setSize(VidHolder.width, VidHolder.height);
				VidSelection.selectedIndex = 0;
				VidSelection.dispatchEvent(new ListEvent(ListEvent.CHANGE, true, false));
			}
			private function cueVideo(event:ListEvent):void {
				traceArea.text += "switch to:" + event.target.selectedItem.label + "\r";
				player.cueVideoById(event.target.selectedItem.data);
			}
 
			private function onPlayerError(event:Event):void {
				traceArea.text += "player error:" + Object(event).data + "\r";
			}
 
			private function onPlayerStateChange(event:Event):void {
				traceArea.text += "player state:" + Object(event).data + "\r";
			}
 
			private function onVideoPlaybackQualityChange(event:Event):void {
				traceArea.text += "video quality:" + Object(event).data + "\r";
			}
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<mx:Canvas id="VidHolder" left="0" right="0" top="0" bottom="140"></mx:Canvas>
	<mx:ComboBox id="VidSelection" editable="false" dataProvider="{vidCollection}" left="10" right="10" bottom="110" height="22" change="cueVideo(event)"></mx:ComboBox>
	<s:TextArea left="10" right="10" editable="false" top="398" bottom="10" id="traceArea"/>
</s:Application>

Presentation for FITC @ Adobe MAX 2009

Posted on by
5

I gave my presentation at 3:30 on Monday in the FITC unconference room at Adobe MAX. It was well attended and everything went well, for the most part. I did not have a good wireless connection and couldn’t run a live demo- but had screenshots to cover me in such a case.

Thanks to FITC and Influxis for a great setup! Thanks to Adobe for publishing unconference sessions in official materials- it makes a big difference in terms of turnout!

Here are my slides in PDF format:
MAX-2009-FITC-Labrecque.pdf

And the source for my Midge experiment:
MidgeEvents.zip

Here is the video:

Get the Flash Player to see this content.

This was streamed live by the FITC/Influxis crew. Audio was being picked up from my internal laptop microphone, so I apologize for the quality!

Here is a supplemental video of what you would have seen if the LACC had reliable internet access:

Get the Flash Player to see this content.

On a related note, you may also want to check out John Schuman’s MAX session which makes mention of my work on the DU CourseMedia™ project:

A few friendly (but important!) corrections to the above presentation regarding the University of Denver:

  • Regarding AIR, we do have a dedicated solution for AIR that works with a variety of projection systems in the various room configurations across campus. I actually presented on this project at FITC Unconference last year at MAX 2008.
  • My team has 3 developers total, CourseMedia™ has 2 devs (the work of Alex Martinez on this project cannot be diminished – he is the CF/DB guy on this and it is truly his baby!), and all 3 of us are full time. We do employ some part time student workers though, who are also essential.
  • Leslie Trumble isn’t my boss- that would be Julanna Gilbert, director of the CTL at DU :)

Many thanks to John for showcasing our work! With such great amounts of information you can’t expect to not have some inaccuracies – c’est la vie!

All sessions from Adobe MAX can be viewed from the following URL beginning October 11th: https://max.adobe.com/online/

UPDATE October 22 2009:
All sessions from FITC Unconference at Adobe MAX can be viewed at http://fitc.influxis.com/
FITC Presentation