The demo used BitmapData along with the “difference” blendmode to extract the edges from the webcam feed. Using BitmapData’s hitTest method, I was able to check whether my sprite is hitting an edge. This was a pretty quick and simple demo (1hr and 147 lines of code! Woot!), so that I could actually see this thing in action. “Line Rider” anyone?

Press down, drag, and release when your doodle is done. Try to draw the 4 shapes and test out its accuracy.

When you release the mouse, the shape it detects should light up, if it doesn’t recognize it then none of the 4 shapes should light up. What I like about this method is that you don’t need to “close” the shapes you draw. You can draw a spiral and it should detect that it’s a circle.

Compares the constituent colors of the display object with the colors of its background, and subtracts the darker of the values of the two constituent colors from the lighter value. This setting is commonly used for more vibrant colors.

For example, if the display object has a pixel with an RGB value of 0xFFCC33, and the background pixel has an RGB value of 0xDDF800, the resulting RGB value for the displayed pixel is 0x222C33 (because 0xFF – 0xDD = 0×22, 0xF8 – 0xCC = 0x2C, and 0×33 – 0×00 = 0×33).

So as an example, let’s say I have two Sprites, sprite “A” & sprite “B”:

If I was to set sprite B’s blendMode property to BlendMode.DIFFERENCE and place it on top of sprite A, I would end up with something like this:

So why is this useful?

Other than for creating cool visuals, we can use this feature to detect edges within any display object. So let’s pretend I used a second instance of sprite A in place of sprite B and went through the same steps, I would pretty much end up with a black box since there is no difference in pixels between the two sprites. But if I was to move that second instance of sprite A 1 pixel down and 1 pixel right, I would end up with something like this:

Notice how only the edges of our star symbol is visible, making everything else (close to) black. Because of the gradient background we used in our sprites, there is a difference between the pixel values in the black areas when we moved our second sprite to be slightly unaligned with the first. The difference isn’t visible, but it is there. To solve this problem we can use BitmapData to “flatten” these two sprites and using the threshold() method, we can turn any pixels that have a value close to black into any color we choose, including pure black (0×000000).

Okay…now what?

Since blendMode is a property of DisplayObject, we can use it with any objects that inherit from it, including Video:

This example uses 2 video objects in place of the 2 sprites we used in the earlier examples, we could probably increase performance by taking “snapshots” of the video and doing the same steps using 2 bitmaps instead of 2 Video instances, but I decided to keep it simple.

Using this info, we can then interact with edges extracted from the webcam to do some real-time edge detection, a cool webcam game perhaps? Or catching some snowflakes*? but I’ll save that for another post.

Over & out.

*Grant’s example was created in Flash 8(as2), which might have used a method similar to what I mentioned here, but I’m not completely sure.

While developing the game was loads of fun, there were a couple challenges that we had to overcome in order to get this game off the ground…(OH SNAP! See what I did there? off the ground? traveling? airplane? no?…okay)

After being presented with the idea, the first thing that came to mind was how to manage the HUGE map the player had to travel around in. I’m talkin’ loading and moving a 6400×1600 bitmap without sacrificing image quality or performance.

Many tests later, we decided that the best way to solve the filesize issue was to seperate the map into 800×600 tiles, keeping low resolution tiles embedded in the swf file so the player can start the game as soon as possible. While the player travels, the high resolution tiles are being loaded in the background, replacing the low res images one by one as they finish loading. Not only does this reduce the total filesize of the main swf, but it also lets the player continue without having to wait for the giant map to load.

As for performance, most of us know that moving something as big as 6400×1600 around on screen can be choppy. To improve the animation, I used the display object’s scrollRect property. For those who aren’t familiar with this handy feature, it basically acts like a mask, displaying only a section of a display object on screen but with way better performance than a mask. Read more about it in the docs here.

So that takes care of the map, but what about the mini games?

In order to keep the games organized, each one is a separate swf file that gets loaded. This let’s me encapsulate each mini game, keeping its functionality hidden from the rest of the game. A manager had to be created in order to keep track of all the different games and is in charge of displaying a game when needed, communicating the user’s performance to the main swf, and cleaning up after a game so the game engine can be reused.

Videos…so many videos…

For the videos, we wanted to do something simple, using only basic controls to toggle between play and pause states plus a couple events that we can listen for. The FLVPlayback component, while convenient, has too many bells and whistles for our purpose and using the Video class didn’t give us the amount of control that we wanted. So I decided to go with the built-in VideoPlayer class, which is also a subclass of the Video object but a lot simpler than the FLVPlayback component.

#$%@#!!!

While this wasn’t an issue, it was something that was completely new to me and thought I’d share the experience. Since this is a children’s game after all, we needed to make sure that text inputs filter out “no-no” words. Luckily, there’s only one text input in the entire game (*high-five!). Instead of clearing the field when a bad word is detected, I chose to just disable the “go” button. This makes it less frustrating for children with names like “Dickson”.

Now, how am I suppose to detect inappropriate words? Should I just type out every word I could think of?….Interwebz to the rescue!!! Check out the list. Now the only thing I needed to do was copy the entire list and write a quick script to format it the way I want, instant digital earmuffs.

So in the end, I would have to say that this project was probably one of the biggest I had the opportunity to code on my own (yes, I’m a big boy now). I had a chance to take my time, lay out an architecture, and execute smoothly and with ease. While there were some speed bumps along the way, mostly flash “gotchas”, there was definitely a lot to learn from this project.

And I’m not quite sure why I did it, but I added a rollover effect on the dots as well…go ahead, put your mouse over those dots, you know you want to!

Looking back at this, and some recent BitmapData work, I’m getting a bit excited and starting to crave some more experimental work, I’ve already got a few ideas in mind! Superfluous rollover effects and all!

-Carlo

Here are the topics I covered:

• Camera.activityLevel – A brief explanation on using the Camera object’s activityLevel property
• Bitmap.getPixel() – Using the BitmapData class to check for motion
• Augmented Reality & Marker Tracking – What it is and how it can be used in different applications.
• Moving MovieClips with your hand (or other limbs) using the webcam – An example of how you can use the motion detection stuff to move a MovieClip around the screen using only your hands and a webcam.

So check out my post over at the Metal Fish Eggs blog and let me know what you think!

http://www.psyked.co.uk/adobe/flash/superscript-and-subscript-with-actionscript.htm

http://blog.ggshow.com/index.php/reference/2007/04/19/how_to_use_subscript_aamp_superscript_in

Pretty neat, eh?

-Carlo

Here’s a couple things that I found made my life easier when creating forms in flash.

Email Validation
Here’s a good function that I snatched from a senocular forum thread. Using AS3 regular expressions, it returns true if an email is valid and false if it’s not:

function isValidEmail(email:String):Boolean {
	var emailExpression:RegExp = /^[a-z][\w.-]+@\w[\w.-]+\.[\w.-]*[a-z][a-z]$/i;
	return emailExpression.test(email);
}

All you have to do is pass the email in the parameter like so:

trace(isValidEmail("carlo@alducente.com")) //traces "true"
trace(isValidEmail("woot!")) //traces "false"

Checking For Empty Fields
This isn’t a big issue but found that it’s good to keep reminding myself that if text in a field is ==”" or == null, it doesn’t necessarily mean that it’s not empty.

Previously, in order to check for empty fields, i would always just check if the string is empty or equal to null, like so:

if([string] == "" || [string] == null){
	//[string] is empty, throw a big fat bolded error.
}

I did this for quite a while until i realized that people can still put in spaces only and it will bypass my validation because technically, the string is not empty. It’s got one (or more) spaces in it only. So here’s a quick function that I hacked together:

function isNotEmpty(info:String):Boolean{
	var noSpaces:Array = info.split(" ");
	var a:uint;
	for (a = 0; a < noSpaces.length;a++ ){
		if (noSpaces[a] != ""){
			return true;
		}
	}
	return false;
}

Using the split() method of a string, i seperate the string into an array wherever there is a space. So if I call the function on “Carlo is blogging”, i get an array back that looks like this: ["Carlo", "is", "blogging"]. I can then loop through the array and check if there are any empty (“”) values in the array. If the Array is full of empty values, then the string is empty (return false), but if it finds at least one real value, return true.

And the best for last: TABBING!! AAAHHHHH!!!!
I’m probably the worst at remembering the tabbing order of my forms in flash. Just when you think you’re done with a form, the QA guy hits the “TAB” button and BLAM! You’re selection goes from the “First Name” field to some random movieclip and puts you to shame with a thick ugly yellow border around that movieclip.

There are two ways you can specify the tabbing order. You can do it by selecting the object you want to add tabbing on to, and going to Window>Other Panels>Accessibility. A window will popup with a “Tab index” field. There you can put in a number depending on the order of the tabbing. So if you want to make a text field the first one in the tabbing order, you just put 1 in that field.

You can also specify tabbing order through code, in AS3 objects have a “tabIndex” property, you can do the same thing above and give it a numerical value.

The one “gotcha” I always encounter is having random movieclips be part of the tabbing, highlighting it with a yellow border. The simplest solution to this is disabling the tabbing for that movieclip by using the “tabEnabled” property.

myMovieClip.tabEnabled = false; //keeps it out of the tab order.

Any buttons on stage will automatically get added to the tabbing order, even if it’s originally a movieclip and you set its “buttonMode” property to true, that’s how I usually get that yellow border.

Using this class, you can grab the average color of any bitmap you specify. Pretty neat, eh?

-Car

The simplest way of getting random values from an array is by creating a random index number and using it to access the array:

//Array you want to pull values from
var myArray:Array = ["hello", "world", 11, 8, 86, {prop: "value"}];

//Trace a random value from the array
trace(getRandomValue(myArray));

function getRandomValue(array:Array):*{
	//Generate a random number to use as an index for the array
	var index:Number = Math.floor( Math.random() * array.length );
	//Return the value associated with the random index
	return array[index];
}

If you try tracing out the value more than once, you’ll notice that sometimes you get the same value two or more times in a row. What if we just want to pull a unique random value from the array? We can do that by removing the selected value from the array so next time we ask for a random value, the previous values that were chosen will not be available again:

var myArray:Array = ["hello", "world", 11, 8, 86, {prop: "value"}];

trace("Original Array: "+myArray);
trace(getRandomValue(myArray));
trace("Original Array: "+myArray);

function getRandomValue(array:Array):*{
	//Generate a random number to use as an index for the array
	var index:Number = Math.floor( Math.random() * array.length );
	//Remove the selected value from the array using the splice method, and return it
	return array.splice(index, 1)[0];
}

If you run the code above, you’ll notice that the value selected by our getRandomValue() function edits the array and removes the value so next time we ask for another random value, it won’t be there for the function to select.

This is all good, but what happens if we want to get a unique random value without editing the original array? This is where the slice() method comes in to help, it returns a duplicate of the array you’re slicing:

var myArray:Array = ["hello", "world", 11, 8, 86, {prop: "value"}];

//Create a copy of the original array and assign it to a new variable
var arrayCopy:Array = myArray.slice();

trace(getRandomValue(arrayCopy));
trace("Original Array: "+myArray);
trace("Duplicate Array: "+arrayCopy);

function getRandomValue(array:Array):*{
	//Generate a random number to use as an index for the array
	var index:Number = Math.floor( Math.random() * array.length );
	//Remove the selected value from the array using the splice method, and return it
	return array.splice(index, 1)[0];
}

In our code above, we create a duplicate of our original array and use it to get unique random values. This prevents us from editing the original.

Pretty simple, right?