As you may know, OSMF 1.0 has been release, so one of the first tasks I set for myself was to test the code I wrote in April for OSMF 0.95 (which I posted, along with the screencasts of my talk at FITC, here). And, lo and behold, all of them worked!

Well, all except one. The final demo file, the Full Sample Player was playing, but the video was invisible and all the controls were disabled. So I set out to figure out why. (For those who don't want to read to the end, you can download the updated project file, for Flash CS5, here.)

It wasn't long before I found the culprit. It turns out that the MediaPlayer in OSMF now dispatches the 'ready' MediaPlayerStateChangeEvent when the video is ready to play for the first time — not just when it's ready to play again. So, the result of my last code sample, with OSMF 1.0, was to hide the video and disable the controls — at the start of the video playback! Not what I wanted.

So, if we just remove lines 157 and 158 (seen below), from the _onMediaPlayerStateChange function, the player will work.

case "ready":
	_disableControls ( ) ;
	_cleanUpVideo ( ) ;
	break;

But now, when our video ends, the video doesn't get reset (or 'cleaned up' or however you want to say it) — it looks ugly and doesn't behave how we would expect (because we just removed the code that's supposed to clean up these videos).

So, how do we clean up at the end of a video? Well, you can now listen for the TimeEvent.COMPLETE event on the MediaPlayer instance — when it's fired, the playback of your media is done.

So, if we add this line to the _setupOSMF() function:

_mediaPlayer.addEventListener ( TimeEvent.COMPLETE , _onComplete , false , 0 , true ) ;

…and then declare the _onComplete function, adding back in those two lines we removed from the _onMediaPlayerStateChange function:

private function _onComplete ( evt : TimeEvent ) : void
{
	_disableControls ( ) ;
	_cleanUpVideo ( ) ;
}

One final note… Adobe added in string constants for all of the MediaPlayerStateChangeEvent types, grouped in the new MediaPlayerState class. So instead of comparing against the string, "ready", you can now compare against the string constant of MediaPlayerState.READY. All of them are listed here and have been included in the updated source files that accompany this post.

See you in October at MAX in LA!

And, as always, share and enjoy!

-r

I know blogging's been light for the past several months. Work here at Almer/Blank has had me pretty consumed.

But, as I gear up and prepare for a busy autumn of talks and courses, you can expect some heavier posting.

First up, I'll be presenting at FITC San Francisco — the first SF installment of the really amazing FITC conferences.

On day one, August 17th, I'll be giving my talk, 'Hearing Pictures with Synthia' — you can see an earlier version of that talk, from FITC Toronto in April, here, and play with Synthia at SynthiaHearsPictures.com.

Then, on day three, August 19th, I'll be giving a talk on 'Getting Started with Adobe Open Source Media Framework (OSMF)' in the 'Adobe Under the Hood' room — a version from FITC Toronto in April you can view here.

It will be an amazing conference, with a ton of great talks. Early bird pricing ends July 2nd, so get your tickets now!

Share and enjoy!

-r

If you have suggestions for enhancements or more bug fixes please do report them at http://zamfbrowser.riaforge.com  If you don't want to sign up for RIAForge just send me an email to omar@almerblank.com, I'd really like to hear your suggestions and bug reports!

Unfortunately, even those courses are relatively new, the code in them no longer works, because OSMF has advanced a few sprints. We're now at OSMF sprint 9, and the framework continues to shift quite a bit.

Because there are almost no examples on the web of using OSMF with Flash (as opposed to Flex), and I've had several people email me asking if I had time to update the code.

And, so, finally I did. At least for the progressive player. So you can download the Flash CS4 source code to build an OSMF player with the Sprint 9 framework from the article on Building progressive video players in Flash with OSMF.

Share and enjoy!

It's 35 minutes across five lessons and takes you through the process of converting the progressive OSMF video player (which we create in the first installment of this course on Building Progressive Video Players with Adobe OSMF, into a dynamic multi-bitrate streaming player. Multi-bitrate streaming occurs when you program your Flash to deliver the highest quality video a viewer can see (dependent on their bandwidth). *Dynamic* multi-bitrate streaming is similar, with the additional feature of having your player constantly meters the bandwidth throughout viewing, to adjust the playback between multiple videos seamlessly, as the viewer's bandwidth may fluctuate.

Please note: that the first course on progressive video players was built with OSMF Sprint 5. The second course on streaming with OSMF was built with OSMF Sprint 7. I spend the first lesson of the new course updating the progressive player to work with Sprint 7, and I wrote a few notes about the major differences between OSMF 0.5 and 0.7 in a post on my personal blog last month. Also note that, by the time the course was published by Adobe, OSMF had already moved forward to Spring 8.

When I wrote the first course on building a progressive video player with OSMF, I was struck by two things:
1) OSMF is clean — really clean — and it just works well in ways that the AS3 video API does not — for instance, with OSMF setting volume is a matter of talking to the volume property of the MediaPlayer
2) OSMF felt like a bit of overkill — you need a lot of imports and classes (a MediaPlayer, a MediaElement, a NetLoader and a URLResource) just to build the simplest of progressive video players — that would be simple enough, requiring seven lines of code with raw AS3 if you knew it

But, I had a hunch that #2 above was due to the fact that I was using approximately 0.05% of this powerful framework — like trying to use a nuclear bomb when a shovel would do just fine.

Well, when I started learning how to write the code to build dynamic multi-bitrate streaming player, I quickly learned that my hunch was right. The benefits of OSMF really kick in once you do anything beyond the most basic video player.

In the case of streaming, to convert your progressive OSMF video player to a streaming OSMF video player, all you do is change the URL! Seriously, that's it. OSMF is smart enough to know that when you try to load a video from an RTMP server, you're trying to stream — and it takes care of the rest.

That was pretty neat. But the benefits really kicked in when I beefed my regular streaming OSMF video player to one that supports dynamic multi-bitrate streaming. All it took was just a few extra lines of code to turn my regular video player into one that supports dynamic multi-bitrate streaming. If you want to learn those lines of code, I'd recommend checking out the course.

As I say, I'm still just barely cracking the surface of OSMF, and I'm really looking forward to digging deeper into its support for layouts, playlists and monetization. But, even with this second course, the massive time, workflow and standardization features of OSMF are already revealing themselves.

Share and enjoy!

-r

package {
	import __AS3__.vec.Vector;

	import com.almerblanklabs.view.ApplicationView;
	import com.lifeztream.debug.FPS;

	import flash.display.SimpleButton;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.MouseEvent;
	import flash.events.ProgressEvent;
	import flash.external.ExternalInterface;
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.media.SoundLoaderContext;
	import flash.media.SoundTransform;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.system.Security;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;

	import flash.utils.setTimeout;

	import hype.framework.behavior.SimpleBehavior;
	import hype.framework.core.TimeType;
	import hype.framework.rhythm.SimpleRhythm;
	import hype.framework.sound.SoundAnalyzer;

	import org.papervision3d.objects.primitives.Sphere;

	[SWF(width='580', height='580', backgroundColor='#000000')]

	/**
	 *
	 * @author Nolan Butcher
	 *
	 * DISCLAIMER : This code sample is by no means an optimized example. It is a PROTOTYPE.
	 * 				Please keep this in mind when looking through this code.
	 *
	 */	

	public class Paper_Hype_Lab extends Sprite
	{
		private static const ARTIST : String = "Trioptic of the Sound Scientists";
		private static const AUDIO_PATH : String = 'http://flexgraphix.com/blog/wp-content/uploads/2009/11/';
		private static const AUDIO_FILES : Array = [
														{file:'evil_violin.mp3', title:'Evil Violin(Rich \'n Stingy)'},
														{file:'am_i_going_to_die.mp3', title:'Am I Going to Die'},
														{file:'going_pro.mp3', title:'Going Pro'},
														{file:'life_is_easily_taken.mp3', title:'Life is Easily Taken'},
														{file:'bubachu.mp3', title:'Bubachu'},
														{file:'midi_in-out.mp3', title:'Midi In/Out'},
														{file:'may_6.mp3', title:'May 6'},
														{file:'slow_descent.mp3', title:'Slow Descent'},
														{file:'nocens_sonitus.mp3', title:'Nocens Sonitus'},
														{file:'remember.mp3', title:'Remember'},
														{file:'soulful_east_coast.mp3', title:'Soulful East Coast'},
														{file:'sunrise_on_the_highway.mp3', title:'Sunrise on the Highway'},
														{file:'the_sad_truth_of_it_all.mp3', title:'The Sad Truth of it All'},
														{file:'blueberry_haze.mp3', title:'Blueberry Haze'}
													];

		private static const VOLUME : Number = 1;

		private var _view : ApplicationView;
		private var _sphere : Sphere;
		private var _music : Sound;
		private var _sndChannel : SoundChannel;
		private var _soundAnalyzer : SoundAnalyzer;
		private var _freq : Vector. = new Vector.;
		private var _rythm : SimpleRhythm;
		private var _fps : FPS;
		private var _audioIndex : int = 1;

		private var _button : Sprite;
		private var _hitArea : Sprite;

		private var _textField : TextField;
		private var _songText : TextField;

		private var _rotationX : Number = 0.3;
		private var _rotationY : Number = 0.3;
		private var _cameraPitch : Number = 90;
		private var _cameraYaw : Number = 270;

		private var _xDist : Number;
		private var _yDist : Number;

		private var _mouseDown : Boolean = false;

		public function Paper_Hype_Lab()
		{
			Security.allowDomain('*');

			stage.frameRate = 60;

			_sphere = new Sphere(null, 300, 24, 14);

			_view = new ApplicationView();
			_view.object3D = _sphere;
			_view.startRendering();

			addChild(_view);

			_initRythm();
			_initTextField();
			_loadSound();
			_initUI();

			// Get the FPS widget @ www.lifeztream.com
			_fps = new FPS();
			addChild(_fps);

		}

		private function _handleMouseEvents(evt:MouseEvent):void
		{
			switch(String(evt.type))
			{
				case MouseEvent.MOUSE_DOWN:
					_mouseDown = true;
				break;
				case MouseEvent.MOUSE_UP:
					_mouseDown = false;
				break;
			}
		}

		private function _loadSound():void
		{
			var context : SoundLoaderContext = new SoundLoaderContext(1000, true);
			var req : URLRequest = new URLRequest();
				req.url = AUDIO_PATH + AUDIO_FILES[_audioIndex].file;

			if (_rythm && _rythm.isRunning) _pauseRythm();
			if (_sndChannel)
			{
				_sndChannel.stop();
				try {
					_music.close();
				} catch(e:Error) {
					trace ('cannot close sound stream');
				}
			}
			_music = new Sound(req, context);
			_music.addEventListener(IOErrorEvent.IO_ERROR, _handleIOErrorEvents, false, 0, true);

			_sndChannel = _music.play(0, 1, new SoundTransform(VOLUME));
			_sndChannel.addEventListener(Event.SOUND_COMPLETE, _onSoundDone, false, 0, true);

			_soundAnalyzer = new SoundAnalyzer();
			_soundAnalyzer.start();

			_updateSongText();
			if (_rythm) _initRythm();

		}

		private function _onSoundDone(evt:Event):void
		{
			_button.mouseEnabled = false;
			setTimeout(_nextSong, 1000);
		}

		private function _nextSong():void
		{
			_button.mouseEnabled = true;
			_button.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
		}

		private function _handleIOErrorEvents(evt:IOErrorEvent):void
		{
			if (ExternalInterface.available)
			{
				ExternalInterface.call("window.alert('" + AUDIO_FILES[_audioIndex].file + " cannot be loaded')");
			}
		}

		private function _initUI():void
		{
			_hitArea = new Sprite();
			_hitArea.graphics.beginFill(0x000,0);
			_hitArea.graphics.drawRect(0,0,580,580);
			_hitArea.graphics.endFill();
			_hitArea.addEventListener(MouseEvent.MOUSE_DOWN, _handleMouseEvents, false, 0, true);
			_hitArea.addEventListener(MouseEvent.MOUSE_UP, _handleMouseEvents, false, 0, true);
			addChild(_hitArea);

			_button = new Sprite();
			_button.graphics.beginFill(0x666666);
			_button.graphics.drawRect(0,0,100,30);
			_button.graphics.endFill();
			_button.x = 476;
			_button.y = 4;
			_button.buttonMode = true;
			_button.mouseChildren = false;
			_button.useHandCursor = true;
			_button.addEventListener(MouseEvent.CLICK, _handleButtonEvents, false, 0, true);

			var buttonFormat : TextFormat = new TextFormat(null, 14, 0xFFFFFF, true);
			var buttonText : TextField = new TextField();

				buttonText.defaultTextFormat = buttonFormat;
				buttonText.text = "NEXT RIFF";
				buttonText.height = 18;
				buttonText.y = (_button.height - buttonText.textHeight) * .5;
				buttonText.x = (_button.width - buttonText.textWidth) * .5;

			addChild(_button);

			_button.addChild(buttonText);
		}

		private function _pauseRythm():void
		{
			_rythm.stop();
		}

		private function _resumeRythm():void
		{
			_rythm.start();
		}

		private function _initRythm():void
		{
			_rythm = new SimpleRhythm(_trackRythm);
			_rythm.start(TimeType.ENTER_FRAME);
		}

		private function _initTextField():void
		{
			var textFormat : TextFormat = new TextFormat();
				textFormat.color = 0x666666;
				textFormat.align = TextFormatAlign.CENTER;
				textFormat.size = 14;

			_songText = new TextField();
			_songText.defaultTextFormat = textFormat;
			_songText.width = 1;
			_songText.text = "-- :: --";
			_songText.autoSize = TextFieldAutoSize.CENTER;
			_songText.y = (stage.stageHeight - _songText.textHeight) - 4;
			_songText.x = (stage.stageWidth - _songText.width) * 0.5;
			addChild(_songText);

			var artistText : TextField = new TextField();
				artistText.defaultTextFormat = textFormat;
				artistText.width = 1;
				artistText.text = "-- Artist :: " + ARTIST + " --";
				artistText.x = (stage.stageWidth - artistText.width) * 0.5;
				artistText.y = (_songText.y - artistText.textHeight) - 4;
				artistText.autoSize = TextFieldAutoSize.CENTER;

			addChild(artistText);

			_textField = new TextField();
			_textField.width = 1;
			_textField.defaultTextFormat = textFormat;
			_textField.text = "-- Click and drag to rotate sphere --";
			_textField.x = (stage.stageWidth - _textField.width) * 0.5;
			_textField.y = artistText.y - _textField.textHeight - 5;
			_textField.autoSize = TextFieldAutoSize.CENTER;

			addChild(_textField);

		}

		private function _updateSongText():void
		{
			_songText.text = "-- Song :: " + AUDIO_FILES[_audioIndex].title + " --";
			_songText.x = (stage.stageWidth - _songText.width) * 0.5;
		}

		private function _handleButtonEvents(evt:MouseEvent):void
		{
			_sndChannel.removeEventListener(Event.SOUND_COMPLETE, _onSoundDone);
			if (_audioIndex < AUDIO_FILES.length-2)
			{
				_audioIndex++;
			} else {
				_audioIndex = 0;
			}

			_loadSound();
		}

		private function _trackRythm(rythm : SimpleRhythm):void
		{
			for (var i:int = 1;i < _sphere.geometry.vertices.length + 1;++i)
			{
				_freq[i-1] = _soundAnalyzer.getFrequencyIndex(i, 400, 100);
			}

			_view.moveParticles(_freq);

			// Rotates camera around sphere depending on mouse position
			if (_mouseDown)
			{
				_xDist = mouseX - stage.stageWidth * 0.5;
				_yDist = mouseY - stage.stageHeight * 0.5;

				_cameraPitch = _yDist * _rotationX + 90;
				_cameraYaw = _xDist * _rotationY + 270;

				_view.camera.orbit(_cameraPitch, _cameraYaw);
			}

		}
	}
}

package com.almerblanklabs.view
{
	import __AS3__.vec.Vector;
	
	import com.greensock.OverwriteManager;
	import com.greensock.TweenMax;
	import com.greensock.easing.Elastic;
	import com.greensock.plugins.MotionBlurPlugin;
	import com.greensock.plugins.TweenPlugin;
	
	import flash.events.Event;
	
	import org.papervision3d.core.geom.Particles;
	import org.papervision3d.core.geom.renderables.Particle;
	import org.papervision3d.core.geom.renderables.Vertex3D;
	import org.papervision3d.materials.special.ParticleMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.view.BasicView;
	
	//import com.greensock.plugins.

	public class ApplicationView extends BasicView
	{
		private var _object3D : DisplayObject3D;
		private var _origVertices : Vector.