Something Cool For the Kids

Fairie Wings always makes such nice things and shows you how to do it, so I'm feeling inspired by her. 

Today I saw a neat segment on making a flash game out of your children's drawings on the The Lab.  I'm hunting for a video of the segment, but it hasn't been placed online yet, I have faith I'll find it though, and I'll update with the video attached when I'm able.  For now, here's a quick how-to so you too can work with your children to make flash games.

Episode #53: Show Notes

Jim Rutherford : Turn your Kid’s Artwork into a Video Game

My four year old son and I have a Saturday morning ritual where the two of us go out for a “special” breakfast at a local restaurant. While we are waiting for our food, Owen always draws a very exciting battle scene on the back of the paper placemat using the crayons provided by our server. One day, after he was done drawing, he asked “Dad, can we turn this into a video game?”. I answered of course I could!

So we went home and pulled out an old scanner, scanned his drawing, and went to work in Gimpshop and Adobe Flex! After a little cropping, resizing, ActionScript coding and a trigonometry refresher, the result is a Flash game titled Crayon Battle.

If you would like to produce a Flash game out of your children’s artwork, here are some simple steps.
1.Download our crayon_battle.zip file from http://www.digitalmediaminute.com/howto/crayonbattle/

2.Extract the zip file to your local disk
3.In the folder where you extracted the file, you will notice a folder named gamePieces. In this folder are the “building block” files that contain the artwork for the game. The files and their function are as follows:

background.png
This file is the backdrop for your game

goodguy.png
This is your game unit that will blast the badguys

bullet.png
This is what your bullets will look like

badguyx.png
This is the badguy. You can have multiple badguys – just replace the x with a number from 1 to 4

4.When scanning the artwork, make sure the background image is scanned to a dimension of 800×600 pixels. Your scanner software should allow you to do this, but if it doesn’t, you can use GIMPShop.
5.When scanning the goodguys, badguys, and bullets, I would recommend that each should be no larger than 70 pixels in either direction. You also need to remove the background from these images so they float cleanly over the background. This can easily be done in GimpShop using the Magic Wand tool.
6.If you are intereted in looking at the source code for the game, in the folder where you extracted the zip file, there is a folder named source that contains the ActionScript files and Flex project used to create the game. You can modify the ActionScript using any text editor and recompile it using the free Flex SDK that is available at http://www.adobe.com/products/flex/downloads/.

Read and post comments | Send to a friend

Advertisements

About Helmsman

Importing a Vox Blog.
This entry was posted in Uncategorized and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s