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

I've already got a few ideas and things I want to try on the Nexus One, so guess I know what I'll be doing for the next week when I get home from work.

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

For my example, I used the tiger SVG file that I always see in SVG posts to create some vector art in Illustrator. After opening the SVG I simply saved it as an FXG 2.0 file using the Save As menu. In the FXG options I just used the default options.

After saving the FXG file, I placed the file in my src folders in a Flex 4 project in Flash Builder 4. I made a skins package to drop the file in.

Once you drop your FXG file into your project, using the file is a breeze. Just write the tag in!

It really is as simple as that. Using this method you can use these FXG files very easily in any of your Spark skins. Here's the rendered FXG:

Once you have your fxg graphics rendering, you can manipulate the object using width, height, alpha, etc and the graphics will scale as you'd expect from vector graphics.

Download Flash Builder 4 project file here: Example Source

Last time I checked (February), OSMF was in Sprint 9 (and I updated my sample files at that time, posted here). Now, it's in Sprint 10, specifically version 0.93. And Adobe appears to have done a lot to lock down the API, which is definitely an exciting and positive development.

But, of course, there are some significant changes since the Sprint 9 OSMF framework — so even the files I posted just two months ago are no longer valid. So, since I wrote it as one of the sample files for my talk, I figured I would post the code to run dynamic streaming with OSMF v0.93.

Here is a Flash CS4 document class, assuming you already have your OSMF SWC in your library path.

package 
{ 
    import flash.display.Sprite; 
 
	import org.osmf.media.MediaPlayer;
	import org.osmf.containers.MediaContainer;
	import org.osmf.media.URLResource;
	import org.osmf.net.NetLoader;
	import org.osmf.elements.VideoElement;
	import org.osmf.utils.URL;
	import org.osmf.net.DynamicStreamingResource ;
	import org.osmf.net.DynamicStreamingItem ;
 
    public class MyPlayer extends Sprite 
    { 
 
		private const RTMP_URL : String = "rtmp://myhost" ;
 
        public function MyPlayer() 
        { 
			player = new MediaPlayer ( ) ;
			container = new MediaContainer ( ) ;
			addChild ( container ) ;
			//set the player to play videos only once by default
			player.autoRewind=false;
			var resource : DynamicStreamingResource = new DynamicStreamingResource ( RTMP_URL ) ;
			var vector : Vector.<DynamicStreamingItem> = new Vector.<DynamicStreamingItem> ( 3 ) ;
			vector [ 0 ] = new DynamicStreamingItem ( "myMovie_high" , 1500 ) ; 
			vector [ 1 ] = new DynamicStreamingItem ( "myMovie_low" , 400 ) ; 
			vector [ 2 ] = new DynamicStreamingItem ( "myMovie_medium" , 600 ) ; 
			resource.streamItems = vector ;
			videoElement = new VideoElement( resource ) ;
			player.media = videoElement ;
			container.addMediaElement ( videoElement ) ;
        } 
 
		private var player:MediaPlayer;
		private var container:MediaContainer;
		private var videoElement : VideoElement ;
 
    } 
}

Share and enjoy!

-r

— NEW CLASSES —

AAAARecord
Accelerometer
AccelerometerEvent
AnimatorFactoryUniversal
AnimatorUniversal
ApplyElementIDOperation
ApplyElementStyleNameOperation
ApplyElementUserStyleOperation
ApplyFormatOperation
ApplyFormatToElementOperation
ApplyLinkOperation
ApplyTCYOperation
ARecord
BackgroundColor
BaselineOffset
BaselineShift
BlockProgression
BreakElement
CameraRoll
CertificateStatus
CharacterUtil
ClearFormatOnElementOperation
ClearFormatOperation
Collator
CollatorMode
ColumnState
CompositeOperation
CompositionAttributeRange
CompositionCompleteEvent
Configuration
ContainerController
ContainerFormattedElement
ConversionType
CopyOperation
CurrencyFormatter
CurrencyParseResult
CutOperation
DamageEvent
DatagramSocket
DatagramSocketDataEvent
DateTimeFormatter
DateTimeNameContext
DateTimeNameStyle
DateTimeStyle
DeleteTextOperation
Direction
DivElement
DNSResolver
DNSResolverEvent
EditingMode
EditManager
ElementRange
FlowComposerBase
FlowDamageType
FlowElement
FlowElementMouseEvent
FlowElementOperation
FlowGroupElement
FlowLeafElement
FlowOperation
FlowOperationEvent
FlowTextOperation
FormatValue
Geolocation
GeolocationEvent
GestureEvent
GesturePhase
GlobalSettings
GroupSpecifier
HTMLSWFCapability
InlineGraphicElement
InlineGraphicElementStatus
InsertInlineGraphicOperation
InsertTextOperation
InterfaceAddress
IPVersion
JustificationRule
KeyboardType
LastOperationStatus
LeadingModel
LineBreak
LinkElement
LinkState
LoadVoucherSetting
LocaleID
ModifyInlineGraphicOperation
Multitouch
MultitouchInputMode
MXRecord
NationalDigitsType
NativeProcess
NativeProcessExitEvent
NativeProcessStartupInfo
NavigationUtil
NetGroup
NetGroupInfo
NetGroupReceiveMode
NetGroupReplicationStrategy
NetGroupSendMode
NetGroupSendResult
NetStreamAppendBytesAction
NetStreamMulticastInfo
NetworkInfo
NetworkInterface
NumberFormatter
NumberParseResult
OverflowPolicy
PaperSize
ParagraphElement
ParagraphFormattedElement
PasteOperation
PlainTextExporter
PressAndTapGestureEvent
PrintMethod
PrintUIOptions
PTRRecord
RedoOperation
ResourceRecord
RSLErrorEvent
RSLEvent
RSLInfo
RSLPreloader
SecureSocket
SecureSocketMonitor
SelectionEvent
SelectionFormat
SelectionManager
SelectionState
ServerSocket
ServerSocketConnectEvent
SpanElement
SpecialCharacterElement
SplitParagraphOperation
SRVRecord
StageAspectRatio
StageOrientation
StageOrientationEvent
StandardFlowComposer
StatusChangeEvent
StorageVolume
StorageVolumeChangeEvent
StorageVolumeInfo
StringTextLineFactory
StringTools
SubParagraphGroupElement
SWZInfo
SystemIdleMode
SystemUpdater
SystemUpdaterType
TabElement
TabStopFormat
TCYElement
TextAlign
TextClipboard
TextContainerManager
TextConverter
TextDecoration
TextFlow
TextFlowLine
TextFlowLineLocation
TextFlowTextLineFactory
TextJustify
TextLayoutEvent
TextLayoutFormat
TextLineFactoryBase
TextLineRecycler
TextRange
TextScrap
TLFTextField
TLFTypographicCase
TouchEvent
TouchscreenType
TransformGestureEvent
TruncationOptions
UncaughtErrorEvent
UncaughtErrorEvents
UndoManager
UndoOperation
UpdateCompleteEvent
URLFilePromise
VerticalAlign
VoucherAccessInfo
WhiteSpaceCollapse

— NEW INTERFACES —

IConfiguration
IEditManager
IFilePromise
IFlowComposer
IFormatResolver
IIMEClient
IInteractionEventHandler
IOperation
ISandboxSupport
ISearchableText
ISelectionManager
ISimpleTextSelection
ISWFContext
ITabStopFormat
ITextExporter
ITextImporter
ITextLayoutFormat
ITextLineCreator
IUndoManager
IVerticalJustificationLine

I'm planning on putting together some code examples over the next few weeks that cover some of the more interesting packages. Let me know if you have a request, and I'll gladly make an effort to include them…

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

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