Yes, I have other interests other than just Flex/Actionscript. That’s why the blog is named polyGeek - because I have multiple geek interests. And one of those is the Joss Whedon universe: Firefly, Buffy, Angel and now Dr. Horrible.

Dr. Horrible is an Internet based musical comedy. You can read more about it here.

And of course part of being a geek is combining those geek interests so I modified an earlier 3D cube project so that I could load images via XML. Now I can modify it quickly and easily to display other photos. And so can you because as my blog moto goes: mi coda, su coda.

As always, thanks to the PaperVision3D folks for making Flash 3D easy to do and Luke at paperVision2.com for his great tutorials.

In a project I’m working on I get the number of seconds since the device was turned on and I need to display a message to the user similar to this: System uptime is 2 years, 1 month, 13 days, 1 hour and 15 seconds.

I figured that since showing System uptime is common to many websites it would be easy to find someone who had already written some code to do the conversion. After about 15 minutes of searching I hadn’t found anything and figured I could have written the code myself in that time. ( It actually took closer to 30 minutes to write the code because John Wilker stole my mojo and I was feeling pretty stupid. )

Trouble with time

So I lied. It ended up taking hours to get the code to work just right, at least mostly right.

There were losts of little things that I had to accomodate. Like if the time output ends with hours then it needs to say, “blah, blah, blah and some hours.” Originally I only took into account the “and” going before the seconds. But if there are no seconds then … you get my meaning.

Oh, and adding a space in some places to the output string turned out to be harder than I thought it would be. But after messing with output for a while I think I got it.

Time is an illusion, lunch-time doubly so

But then the issue came up: how many seconds are there in a year, or whatever. There are lots of different ways to measure time durations. Turns out we’re pretty well set for things like minutes, hours, and days. Beyond that it starts getting messy.

The way my code works is to take the number of seconds you input and create a date starting that many seconds after January 1, 1970. It’s then doing conversions to see how many years, month, days, etc. after that date. Which is probably going to be an approximation of what you really want. But the problem is that I don’t know what you really want. It could be that you want to measure time before or after right now. That would be a different algorythm. If that’s what you need then you have my source to start from. This solution works for my current need and I’ll bet it would work for Douglas Adams, if he needed such a thing.

If you know of some standards that are used in time calculations, such as this I’d love to hear about it in the comments. Or anything else you might have to share on the matter.

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.

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 );

I’ve been playing around with Bitmaps/BitmapData and came up with this. The main .as class loads an external image and then uses a Tiles.as class to break the image into rows/columns and then randomly position the tiles so that they can spring back into position.

The meat and potatoes of the work is done with the BitmapData.copyPixels() method:

bmpData.copyPixels( imgData, new Rectangle( c * w, r * h, w, h ), new Point() );

Where c and r stand for the current column/row.

The spring code is right out of Keith Peter’s Making Things Move for AS3 book, chapter 8, page 202. Thanks Kieth.

There’s a handful of features that I’d like to add to this just for funzies. If you think of something interesting tweak to add just comment and I’ll see about it.

And of course the source is well documented, mostly.

Note to FlexBuilder programmers: thanks for applying my code coloring preferences. But you missed the body:background-color. I had to manually add that. Otherwise it’s unreadable.

A reader emailed with a problem he’s having with the ExternalInterface. It seems that his code works fine when the page is hosted on a server but doesn’t work sometimes when accessed directly on the PC. ( Meaning opening the file locally in the browser with a C://path/filename. )

I seem to recall some issues that I had in the past but I haven’t worked with the ExternalInterface in over a year.

The error he gets is: Object or property is not supported.

The reader who asked the question said that he found no mention online nor in the documentation about this. Anyone out there know what’s the what?

I’m working on an image browser to go along with a video player. I noticed that after browsing to the 12th image the loading slowed down considerably.

When an image is replaced it fades to 0 and the image that gets loaded fades to 100. Nothing I haven’t done countless times before.

To fix the slow loading after the 12th image I tested a few things. First I made sure that my reference to the imageLoader was cleaned up. It was. Yeah me. :-)

Then I tried removeMovieClip on the image that faded to 0. That fixed it. Problem is that now I have to load each image every time instead of just fading it back to 100 if it’s already been loaded.

Then I tried setting the visible = false  after the image had faded out. That worked. Everything runs smooth.

I would have thought that an alpha = 0 would take that object out of the rendering list but I suppose it doesn’t. If you don’t want the Flash player to be rendering an object set it’s visibility to  false.

I have to look this up all the time because I can never remember the syntax for using FlashVars in the various ways one embeds a SWF in an HTML file.

FlashVars is a way to pass data from the HTML containing page. You can read more about it here.

[ download example using AC_RunActiveContent and object/embed tags ]

For the <object><embed> tags

The <object> tag will run in IE. Add this param along with the others:

<param name=”FlashVars” value=”var1=One&var2=Two” />

The <embed> tag will run in Netscape/FireFox browsers. Simply place the following attribute anywhere inside the <embed> tag:

FlashVars="var1=One&var2=Two"

Using the Flash IDE’s Javascript ( AC_RunActiveContent.js )

I add the FlashVars parameter to the end of the AC_FL_RunContent function like so:
’salign’, ”, ‘flashvars’,'var1=One&var2=Two’); //end AC code

Don’t forget to add a comma after the - ’salign’, ”, - line. If you don’t you’ll get a Javascript error and nothing works. I’ve only made that mistake a few dozen times.

And don’t forget, you have to edit the <object><embed> tags contained in the <noscript> block manually.

Using swfobject

Check out the examples page at blog.deconcept.com here.

It’s pretty simple:

<script type=”text/javascript”>
var so = new SWFObject(”movie.swf”, “mymovie”, “400″, “200″, “8″, “#336699″);
so.addVariable(”var1″, “One”);
so.addVariable(”var2″, “Two”);
so.write(”flashcontent”);
</script>

Using Kimili Flash Embed Wordpress plugin

Use the fvars attribute:

[kml_flashembed movie="/flash/471_FlashVars.swf"height="100" width="200"

fvars="var1=One&var2=Two" /]

So I’m writing this Flex widget/app/thingy that will let people vote for things on my site. I need to test that the user has selected one of the radio buttons when they hit the submit vote button. The code for that is:

Pretty simple stuff. In the if-statement I’m essentially saying, “if votingChoices.selectedValue DOESN’T exist then do this stuff, else do this other stuff.

Like I said, simple. Right?

But there’s a catch. I wasn’t paying attention and gave the radioButtons data values of, wait for it, numbers starting with zero. And you know what that means: no one will be able to submit the first choice in the list.

Okay, so simple fix. I shouldn’t use numbers, especially starting with zero, for the radioButton values.

But better yet I could just change the if-statement to:

if( votingChoices.selectedValue == null ) { ...

That would be the smart thing to do. And I tell myself that all the time. Don’t test for the existence of something in an if statement by just placing a reference. Go ahead and write out undefined or null. Because that’s what you’re really testing.

I can’t count the number of times I’ve screwed that up. So now every time I do that I’ll force myself to come back to this post and comment that no I can’t learn from my mistakes. :-)

So here are a few other things that equate to false. From Moock’s Essential ActionScript 3.0.

Here is a table of the default values for the various types.