Installing Flash Media Server 3 is simple. But actually using it afterwards can be a bit tricky. In this video tutorial I’ll walk through the installation process and then creating a video player - using videoMaru - to stream movies from FMS. There is also a videoRecorder included in the samples download so that you can see how to use your webCam to record videos to your hard drive.

The tutorial also covers how to set your router up so that you can stream videos from your PC to anyone on the Internet. Which can be very handy for application development.

Download Flash Media Server 3

Download Sample Applications

Here’s the WebCamRecorder built in Flex. PLEASE NOTE: if you hit the Start Recording button it will record video to MY hard drive. Maybe I’ll make a webcam viewer page for those of you who record themselves. You’ve been warned. :-)

NOTE: FlexBuilder now displays the live feed from your webcam when you switch to Design view. Which is sort of cool and all but when you switch back to Source view it doesn’t let go of the camera. So when you publish/test the application you won’t be able to see anything - or record - because FlexBuilder already has the stream and there can be only one. You’ll have to restart FlexBuilder to get it to give up the connection to your webcam.

A few more resources

If you’d like to apply smoothing to your VideoDisplay then try this.

Hopefully this will get you up and running with FMS3 pretty well. Please comment if you notice that I’ve missed anything.

Who’s going to 360Flex in San Jose this August? I know I am. Tom and John opened up registration and I jumped. Last time around in San Jose was great. I went to the next 360Flex in, my then hometown, Seattle and it was even better. From the feedback I’ve gotten each 360Flex is better than the last

Here’s what I love about the 360Flex conferences: even if you didn’t attend a single session it’s worth the time and money to attend. The conversations with other developers in the hallways, at lunch/dinner, at the bars in the evenings is just as educational and of course more fun. With the exception of Jessy Warden’s session which is more fun than going to a bar.

So run, don’t walk, over to 360conferences.com and sign up. I look forward to seeing you there!

Things to look forward to at the conference:

• Adobe will announce a public beta of Thermo
• Doug and Deepa will have copies of their book to sign
• The ultra secret site RunPee.com will announce that it’s open to private betas
• We’ll get a hands on with Flash 10 IDE
• Adobe Cocomo will announce it’s open to private beta
• John and Tom will announce that the next 360Flex conference is going to be held on a cruise ship
• FlexBuilder for Linux will be released
• AIR 1.5 with support for Linux will be released
• We’ll get hints of the soon to come Adobe online application suite but it won’t be officially announced until MAX
• and many of the developers of that cool Database app built with Flex will be there. sort of like the guys from VirtualUbiquity were there last year. But we’ll have to wait for MAX for the announcement that they’ve been bought.
• …did I miss anything?

I love prognosticating. :-)

Using tweens to change the behavior of how Flex components transition is very simple. But there are lots of possibilities. So I built this Tween Flex-plorer so that I could see what the different tweens would look like. And of course I always share. :-)

While writing the code for the previous post I ran into a problem: my browser kept crashing when I’d publish my Flex project. All that was happening was that a <mx:Button> and <mx:TextArea> were fading in-and-out using <mx:Fade>.

Sure enough, it would cycle through about 4 times and start getting all jittery and then kaboom! Down goes the browser.

All that’s happening, in this example, is that when you click the top button it starts the other two buttons sliding back and forth. When one <mx:Move> is complete it calls an onTweenLeftEnd which starts the tween to the right. Back and forth we go.

If instead you use <mx:Fade> to fade the buttons in-and-out you get the same result. This doesn’t happen if you move or fade just one <mx:Button>. And it seems to happen with any two UIComponents.

Sometimes I feel that I suffer so that the rest of you don’t have to. When I run across one of those maddening, “but this should work” issues I always try to blog about it so that you - the reader - won’t have to suffer as I have. And I have, suffered greatly today. :-)

Here to the right we have two nearly identical Flex projects. The only difference is that the one on bottom has one line commented out of the CSS: fontWeight: normal;

It turns out that if you want to embed the font for a <mx:Button> you need to set the fontWeight. Yeah, it took me about 2 hours of trial and error to fix it. What really got me was that the embedding worked fine for the <mx:TextArea> all along. Go figure.

That’s it. So why does the fontWeight have to be “normal” in order for the <mx:Button> to get it’s embeded font? In the immortal words of Kyle Reese, “I don’t know. I didn’t build the fucking thing!”

Seriously, why does there have to be a declaration that the fontWeight has to be normal? Isn’t that the default? And yes, changing it to bold breaks it.

Perhaps I’m missing something. Perhaps the Flex team isn’t out to confuse and confound me on a daily basis. If so please enlighten me in the comments. Until then I’m just going to assume that Deepa did this just to drive me mad. Mad I say. Mad, mad, MAD! :-)

I’m creating a Flex based videoPlayer/slideShow viewer for a client. One small usability feature that I wanted to add is making the Spacebar act as a play/pause toggle.

It’s not as straight forward as one might think. First off if you create a Flex application then which ever component has focus receives the keyboard input. Which is really cool unless you don’t want it to do that. And this is the first occasion I’ve had for using applicationComplete() before. Because you have to have access to the application stage in order to set up the keyboard event and that isn’t available on creationComplete() - as noted here at the Flex cookbook.

Here’s the gist of the code:
private function appInit():void {
stage.addEventListener( KeyboardEvent.KEY_DOWN, keyPressHandler );
}
private function keyPressHandler( e:KeyboardEvent ):void {
// if the spaceBar is pressed then toggle video play/pause
if( e.charCode == 32 ) {
if( this.focusManager.getFocus() != toggleBtn ) {
this.focusManager.setFocus( toggleBtn );
// whatever happens when you click on the button you place here
// it's best to have a 'clickHandler' that calls another method
toggleBtnHandler();
}
}
}

Here’s my Why Actionscript video for the 30onair series. ( You can see the youTube version here but it’s compressed to hell. )

The effect was created - serendipitously - by using a combination of bitmapData effects. The gist is to take two webCam video windows and place one on top of the other. Offsetting the top one by a few pixels x/y and giving it a blend mode of ‘difference’. Then create a BitmapData object that draws the content of the sprite holding both windows. Now use threshold and mix in a few blur filters and merging and you get the above - in realtime.

This is the core of the code that creates the effect:
private function onTic( e:TimerEvent ):void {
bmpDataSource.draw( camsHolder ); // this is the bitmap data inside the camsHolder
// applying a threshold to the bitmap data
bmpDataSource.threshold(bmpDataSource, rect, pt, ">", 0xFFbdbdbd, 0xFFFF0000, 0xFFFFFFFF, true );
// you can change the settings and order that these are applied to get
// lots of different effects. Some are really cool. A lot produce black screens
// you never know until you try. :-)
bmpDataSource.applyFilter( bmpDataSource, rect, pt, blurEffect );
bmpDataDisplay.copyPixels( bmpDataSource, rect, pt );
bmpDataDisplay.applyFilter( bmpDataDisplay, rect, pt, blurEffect );
bmpDataDisplay.merge( bmpDataSource, rect, pt, 0xFFFFFF, 0xFFFFFF, 0xFFFFFF, 0xFFFFFF );
}

Here’s the full code. ( Something’s broken in the published setting. You have to use the leftNav to load the code views. )

And I also found what, I think, is a pretty good AIR theme song.

If you have a webcam you can see it in live action here.

Did you see the Master Chief’s helmet in there?

Here’s what the Actionscript 3 docs have to say about getColorBoundsRect()

Determines a rectangular region that either fully encloses all pixels of a specified color within the bitmap image (if the findColor parameter is set to true) or fully encloses all pixels that do not include the specified color (if the findColor parameter is set to false).

That makes a lot more since if you see it in action. Click on the SWF below to see how the rectangle is drawn. In this case getColorBoundsRect() is returning a rectangle that encloses the selected color under the mouse pointer.

Here’s the meat and potatoes of the code:

private function clickHandler( e:MouseEvent ):void {
var color:uint = bmpData.getPixel32( mouseX, mouseY );
var rect:Rectangle = bmpData.getColorBoundsRect( 0xFFFFFFFF, color );
outline.graphics.clear();
outline.graphics.lineStyle( 1, 0x000000, 1 );
outline.graphics.drawRect( rect.x, rect.y, rect.width, rect.height );
}

You can read more about it on the Actionscript 3 docs. Or in the Actionscript 3 Bible, page 637.

Author C. Clark has passed. He was probably . . . no, he was the most influential man during my adolescence and early adulthood. He’s the main reason I began college as an astronomy major at the University of Arizona - later to get sidetracked into mathematics, history, philosophy, etc.

I read nearly all of his books, both science fiction and science. Along with the 2001 and 2010 Odysseys I love his books Songs of Distant Earth, Childhoods End, and Fountains of Paradise. And it boggles my mind that A Fall of Moondust hasn’t been made into a movie yet.

One of my favorite quotes comes in the acknowledgment of one of his books, “In accordance to the Clark/Asimov treaty the second best science writer dedicates this book to the second best science fiction writer.”

I read his bio a few years ago and it really stuck me that he wrote the screenplay for 2001 from Sri Lanka. He would fax the changes to Stanly Kubrik, they would talk on the phone and then he would go back to editing again. And this is in the late 60s that he was doing this. Sending a fax on a daily basis from Sri Lanka, in the 60s. That’s bleeding edge!

In watching 2010 the sceen that really sticks out for me is where Floyd is talking to Bowman as Bowman transforms through various ages. The old man version of Bowman says, “You see, it’s all very clear to me now. The whole thing. It’s wonderful.”

I hope AC is with the Star Child, and it’s wonderful.

A bit about the code
There’s not much to see in the code of my tribute. It’s a poor rendition of the most popular screen saver of all time. ( I wonder what AC Clark’s screen saver was. ) It’s just something I knocked together while watching 2010 again tonight. ( The movie still holds up very well.) I used the TweenLite tweening engine for the first time. I played around with a fullScreen version but I can’t get the Kimili plugin to accept the allowfullscreen attrubute. ( Yes, I have the most recent version of Kimili. )

Oh, don’t hang out on this page too long. There is a memory leak in the FullStars.swf. When a tween completes it calls to a callback function and that callback simply creates another star in a random position and then tweens it to the center. I looked through the TweenLite code and it seems to try and clean up a reference when a tween completes. But something isn’t going right. It’s probably something I overlooked. Anyway, if you’re computer is slowing down you might want to browse on from this page. :-)

I got stuck on a problem the other day using E4X. I was simply trying to get a Boolean value out of an attribute. It seemed to me that I could simply say:

setAutoPlayVideo( p.@autoPlayVideo );

Where autoPlayVideo is an attribute with a value of either “true” or “false”.

I expected E4X to type the variables I was using because I hadn’t needed to cast any of the attributes that were Strings or Numbers. Those all worked fine. After debugging a bit I discovered that each attribute was actually typed as XML. I’m a bit spoiled by my PXP2 class which automatically types values as Number, Boolean or String.

In the case of E4X and Booleans it was simple enough to fix once I understood what was going on. This does the trick:

var b:Boolean = ( p.@autoPlayVideo == "true" ) ? true : false;
setAutoPlayVideo( b );

Or if you’re not used to the ternary operator

var b:Boolean
if( p.@autoPlayVideo == "true ) {
b = true;
} else {
b = false
}
setAutoPlayVideo( b );