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.

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.

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.