I posted four new OSMF recipes on Adobe's cookbook site this afternoon, and thought you might care to see 'em:

Playing Multiple Pieces of Media, Consecutively, with the OSMF ParallelElement
Playing Multiple Pieces of Media, Concurrently, with the OSMF ParallelElement
Dynamic Streaming with OSMF
HTTP Streaming in OSMF

And, as a reminder along these lines, I'm teaching this year at MAX, as a MAX Master, on 'Designing Custom Video Players with OSMF' (you can browse the catalog of talks and presentations and then you can register here).

Share and enjoy!

-r

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

On Wednesday, June 9th, Adobe will be hosting a FREE 90-minute session, run by Lisa Larson-Kelley, on the formal launch of the 1.0 version of the Adobe Open Source Media Framework (OSMF). Lisa will also cover the beta release of "Strobe Media Playback," a pre-compiled SWF media player (including source code) based on OSMF.

The invitation is here and you may register here.

[blockquote]In this session, Lisa Larson-Kelley will introduce you to the fundamentals of Open Source Media Framework (OSMF), Adobe’s standard video player libraries for building playback experiences and monetizing video on the web. She’ll give you a high-level overview of why you’d want to use OSMF and what it can do, and then dive into its underlying structure and some simple sample code to get you started. This session is for beginner to intermediate programmers and web developers who want to gain a better understanding of OSMF, and how it can simplify media player development.[/blockquote]

Share and enjoy!

-r

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

The Synesthesizer is a Flash 10 musical synthesizer that relies on synesthesia-inspired translation metaphors.

I'm only a few short months into what is a very long-term endeavor, and I've had precious few hours to spend on the project in that time, but I always set the benchmark definition of version 1.0 of the synesthesizer as 'a system that produces something approximating music', and even though I haven't invested nearly the amount of time as I'd like, I believe that the current Synesthesizer meets this definition. And thus, I feel I have Synesthesizer 1.0.

The Synesthesizer is a Flash 10 application that translates pictures into music in real-time. What I've included with this post is a rendering of the output of the application — not the Synesthesizer itself. I'll let you judge the quality for yourself — and please feel free to let me know what you think.

Now, of course, there is far more to do here, but what I found most amazing about this process was how easy it was to get to a point of generating 'music' instead of 'sound'. In effect, I apply something along the order of six rules to get to this point. The addition of each rule to the Synesthesizer brings us closer to the generation of music, instead of raw sound.

To get a bit more insight into the Synesthesizer, you should check out my talk, Hearing Pictures, which I'll be presenting at FITC Amsterdam in February and at FITC Toronto in April.

In this talk, I describe the process I followed to get the Synesthesizer to this point. Using the 1943 Hermann Hesse novel, The Glass Bead Game (also published under the title Magister Ludi, the protagonist of the novel, from whom Project Ludi derives its name), as a starting point, and proceeding through a discussion of synesthesia, the aural illusions of Professor Diana Deutsch, the Experiments in Musical Intelligence by Professor David Cope, the music of Tamarin Monkeys, and many other stepping points, I walk through the thought process required to assume an odd endeavor such as the cross-modal translation of pictures into music.

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.