Tag Archives: Google

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>

Google Analytics for Flash (gaforflash)

Posted on by
1

For some time now, I’ve been using Google Analytics for various personal websites including this weblog. Recently though, we’ve begun using it at my place of employment and have received a request to track user generated events from a live Flash Media Server stream. After poking around a bit and coming upon numerous dead ends, I was lucky enough to stumble upon Google Analytics for Flash (gaforflash).

gaforflash

Not only can you pass in “page views” to be reported just like HTML, but you can also craft custom events in a very customizable format:

trackEvent( FMS, Seek, rtmp://localhost/vod/mp4:test.m4v, 60 )
trackEvent( FMS, Pause, rtmp://localhost/vod/mp4:test.m4v, 8 )
trackEvent( FMS, Play, rtmp://localhost/vod/mp4:test.m4v, 8 )
trackEvent( FMS, Pause, rtmp://localhost/vod/mp4:test.m4v, 10 )
trackEvent( FMS, Play, rtmp://localhost/vod/mp4:test.m4v, 10 )

The “Event” view within Analytics itself is still in closed beta but you can request the UI to be enabled on a profile via this form.

You can also track events with a little cheat. Once logged in, just edit the address bar from “reporting/content” to “reporting/events”. You can even then add it to your Dashboard.

Google Gears and Apollo… and Tubes?

Posted on by
1

Since reading this announcement on the Google Gears API Blog last evening, I’ve been wondering to myself (from time-to-time) how this would/could/will apply to the Apollo runtime. Apollo’s integrated web engine is WebKit which is the same engine the Safari browser runs on… but Safari is not supported by the Gears API as of yet. Though as stated on the Gears site- it will be.

It is mentioned in that same announcement that Adobe is one of the “industry partners” working with Google on this project. I can only imagine that there will be some base shared technology between Google Gears and the Apollo local database probably in the form of SQLite?

There are three features touted on the Google Gears website that are of interest:

  1. Store and serve application resources locally
  2. Store data locally in a fully-searchable relational database
  3. Run asynchronous Javascript to improve application responsiveness

Point #1 can already be achieved through the Apollo alpha using the integrated File API and point #3, I believe, is possible as well since Apollo apps can be built with AJAX (though I have only dealt with Apollo through Flex and cannot confirm anything specific on that front). So that leaves point #2… this capability within Apollo would be amazing!


“It’s not a big truck. It’s a series of tubes!”