This is a very simple experiment for a project I’m working on. I need to display a series of Bitmap images stacked on top of each other but with varying z-depths. All I’m doing here is running through two loops: the first creates red circles of varying size and places them at a z-depth that is inversely proportional* to their radius. ( The further away they are from z=0 the smaller they are. ) Then do the same thing with blue circles. Only this time bring them closer – negative z-depth – to the user as their radius gets smaller. The result is that the circles edges’ define something nearly spherical.

Of course to make it fun and see the 3Dness I added changes to the SpriteVisualElement’s  rotationX/Y based on the Mouse.X/Y.

Making a circle
Here’s the code that makes the red circles.

// Make the red circles
for( var iRed:Number = 0.01; iRed < 1; iRed += 0.1 ) {
	// Draw a red circle.
	var spriteRed:Sprite = new Sprite();
	spriteRed.graphics.beginFill( 0xFF0000, 0.2 );
	spriteRed.graphics.drawCircle( 250, 250, 150 * Math.cos( Math.PI/2 * iRed ) );

	// Make a new BitmapData and then draw the red circle into it.
	var bmpDataRed:BitmapData = new BitmapData( 500, 500, true, 0x00333333 );
	bmpDataRed.draw( spriteRed );

	// Make a new Bitmap and give it the BitmapData with the red circle.
	var bmpRed:Bitmap = new Bitmap( bmpDataRed );

	// Position the bitmap.
	bmpRed.x = -250;
	bmpRed.y = -250;
	bmpRed.z = 165 * iRed;

	// Add the bitmap to the SpriteVisualElement: bmpPlanesHolder
	bmpPlanesHolder.addChild( bmpRed );
}

*Note: I like using the term inversely proportional because it makes me feel smart. :)

The problem in a nutshell is this: suppose you have an array of Bitmaps. Once you use one of the elements in that array as the source for an that element will become null.

I ran into a problem with using an array of Bitmaps as the source for an Image in my Flex app. The app is very simple: it just loads a series of images and then displays them one at a time for a few seconds. When it has displayed all the images it starts over with the first one.

Since the number of images displayed can change I’m keeping the image data in an array:
_imagesArray

I’m loading the images in with the Loader class – instance name: _imgLoader. So when the data is loaded it comes in as type Bitmap. No problem just do the following.

_imagesArray.push( _imgLoader.contentLoaderInfo.content );

After all of the images are loaded I start a Timer that tics every few seconds. Each tic I change the source of my Image component to the next image like so:

imagesHolder.source = _imagesArray[ e.currentTarget.currentCount % _imagesArray.length ] );

I’m using a modulo of _imagesArray.length on the Timers currentCount so that it will continually cycle through the images.

Everything works perfect until it cycles back around. At that point the imagesHolder goes blank. Upon further inspection I noticed that the content of each element of the array went to null as soon as the image was displayed. Do you know why? ‘Cause if you do I’d love to know so comment below. I haven’t a clue. I just wanted to fix the frakking thing. [ Note: Read the first comment below from Tink who explains why this happens. ]

The fix is pretty simple. Instead of storing the Bitmaps in the _imagesArray as they are loaded I grabbed the BitmapData from the _imgLoader.contentLoaderInfo.content and stored that instead like so:

var bmp:Bitmap = _imgLoader.contentLoaderInfo.content as Bitmap;
_imagesArray.push( bmp.bitmapData );

And then inside the Timer I use:

imagesHolder.source = new Bitmap( _imagesArray[ e.currentTarget.currentCount % _imagesArray.length ] );

Problem solved. I have no idea why displaying the Bitmaps yanked the data out of the Array. But in the end it all works.

Applying a ColorTransform() to BitmapData is probably the easiest and most predictable of the BitmapData methods. But it still deserves an Explorer.

I needed to create this explorer because I’m looking for ways to increase the contrast of various objects in front of my webcam so that I can effectively track them. Turns out that the getColorBoundsRect() isn’t very effective at tracking moving objects by color because it looks at a specific ARGB color value. Even very slight changes in lighting or orientation throws the tracking out of whack.

Suppose you wanted to track the position of the cursor in a TextArea. You might need to do this if you wanted to provide some contextual information to the user. And if you do so you want to position the message very near to where the user is typing.

The TextArea provides a lot of information and some of it can be used to approximate the location of the cursor but it isn’t precise.  But I did happen upon an idea that gets the position of the last typed character very accurately. Check it out below:

You should be able to see the red dot follow the cursor around. I’m doing this by checking the BitmapData of the TextArea every time the text changes. I then combine that with the BitmapData from the previous change in text and apply a Difference blend mode. You can see that in the black box at the bottom. What is different each time is the last character.

Now I can use the getColorBoundsRect method on the BitmapData to find the x/y coordinates of the last character. Actually, I have to mix in a little threshold magic because the blending doesn’t produce exactly white pixels and the getColorBoundsRect is very picky. You can check out the source code for a full explaination.

I’m reading A³3 – AdvancED ActionScript 3.0 Animation – and having fun making a mess with BitmapData and webcams.

The inspiration for the above code comes from the chapter on Alternate Input: The Camera and Microphone – page 215. The code is pretty much a mess. I’m just playing.

You can see some interesting effects depending on the order that you switch modes. For instance, if you switch from Difference - the default – to alpha then there will be a permanent imprint of what was visible when you switched under the changes to the screen. So you can switch and then move your hand in front of your face and you’ll be able to see an outline of your face behind your hand. It gets even more interesting if you go from Lighten to alpha.

Let me know if you find some interesting mode combinations to try out?

Anyone else think that Difference looks a little like the Agent Smith effect in Matrix Revolutions or is it just me? :)