Step 1: Get Flash

The first obvious step in becoming a flash game developer is to actually get the program. There are two ways to get flash, expensively or cheaply.

If you want to get it expensively, you can just go to Adobe’s Site and buy it for a couple hundred dollars.

If you want it for only a fraction of the price, you’ll have to meet a few requirements. You either have to be a student, a teacher, a parent of a student, part of a non-profit organization, or anybody that has to do with education. If you are any of these things, you can get an academic discount! Just go to any of the following discount online academic stores:

• Academic Superstore
• CampusTech
• Gradware
• CCV Software

You can either get Flash for a few bucks ($248.95 compared to $699.99 from Adobe), or even a suite of programs for even less than Flash costs on Adobe itself ($398.95 – $598.95). It’s a pretty sweet deal, ain’t it?

Step 2: Get used to the Program (Optional)

This step is optional, but still very highly recommended. I suggest looking at some online tutorials or even buying some video lessons. A combination of both is what got me to be comfortable with Flash. I’ll just give you a brief description of some panels you’ll need to learn in order to be efficient with Flash.

The Toolbar

This is the toolbar. This is your utility belt. You’re going to need this in your journeys as a game developer very much. I also suggest learning some of the hot keys.

The Properties Panel

This is the properties panel. Depending on what version of flash you have, it’ll either be horizontal on the bottom or vertical on the sidebar. This is a pretty important panel, as it gives you all of the information you need about a selected object.

Other Panels that You’ll Need to Be Familiar With

The Actions Panel – This is where you will type in all of your code. If you’re going to be a game developer, you’ll want to make this as large as possible

The Compiler Errors Panel – This is useful if you mess up with your code. It’ll pop up whenever a problem occurs with your code and the game won’t work.

The Output Panel – This panel is similar to the compiler errors. This is where Flash will output warnings. Your trace statements will also appear here.

A Good Layout of Panels for a Game Developer

Online Tutorials to Get Used to Flash

• W3 Schools
• Entheos Web Flash Tutorials
• Kirupa
• Flash Designer Zone Flash Tutorials

Step 3: Learn Some ActionScript

Finally! It’s time for you to learn some code. But, which version of ActionScript should you learn first? In my opinion, ActionScript 2.0 is probably the best to gain knowledge of first, as it isn’t as strict as ActionScript 3.0. Then, later, once you’ve gotten the hang of it, you can learn AS3. But, it’s all up to you. There are many tutorials online (including on my site). Here are some of the ones I suggest:

• Kirupa
• Flash Kit Tutorials
• ActionScript.org Tutorials

Step 4: Make some Practice Games (Optional)

Hopefully, the above tutorials have helped you learn to code. If you’re still shaky, then I suggest creating some simple games as “practice”. Tutorials are a must for this step. I suggest finding some that will walk you through the entire process. Don’t expect to make any money with these games, or maybe even to release them to the public. These games are just for practice. Games that are great to make as practice are: brick breakers, simple platformers, Pacman, vertical shooters, mouse mazes, and other classic games. Here are some great tutorials:

AS2

• Brick Breaker Game
• Avoiding Game
• A Game Like Ball Revamped
• Artillery Game

AS3

• Brick Breaker Game
• Setting Up a Pacman Game
• Platform Game

Step 5: Develop Some Killer Flash Games!

Now, assuming that you’ve done all of the previous steps, you can unleash your inner game developer. The possibilities are now virtually endless for you. You can create any game you want. You can make some simple innovative new concept, or maybe even create an epic MMORPG. Develop your own world.

• Make a Tetris Game with Flex by Jenkov
• Flex Best Practices Presentations by Sean the Flex Guy
• Top 8 Resources for Learning Actionscript 3 by Warm Forest

Web Design Links

• Why do Designers Abuse CSS float:left? by Hiveminds Magazine
• 5 Tips to Making Your Headings more User Friendly by UX Booth
• Web Optimization Guide: Part 1 by Ethan Gardner
• Beautiful CSS: Organizing your Stylesheets by Mirificam Press
• 2009, the Year We Drop IE6? by TVI Design
• How NOT To Design a Logo by Webdesigner Depot

Flash/Flex Links

• Why Flash Can’t Win the Web Application War by DevCentral
• Silverlight vs Flash: Driving Game with hit test by Shine Draw
• Getting through Popup Blockers with window.open() in Flex by Xebia Blog

Web Design Links

• Advanced CSS Accordian Effect by CSS Newbie
• Stay Employed – Web Developer Skills in Most Demand (PHP, AJAX, MySQL …) by oDesk Blog
• Managing Anonymous Users For Better Site Performance by Lee Dumond
• 10 Ways to Improve your Web Page Performance by Six Revisions
• 11 Expert Tips For Enhancing The User Login Process by Site Point
• 10 Usability Tips for Web Designers by Web Designer Depot
• A website checklist. 20 things to check before going live by Web Distortion
• Are you Losing Traffic from Poor Findability? by UX Booth

1. Basic Character Programming
2. Programming the “Bells”
3. Level Creation
4. Scoring
5. Finishing Touches

Step 1: Basic Character Programming

Welcome, people, and get ready for yet another tutorial! In celebration of the winter season, we’re going to make a game like Winter Bells, in ActionScript 2.0. Let us begin, shall we?

The basic concept of Winter Bells is to get as high as you can by jumping on bells. It’s extremely addictive, and if you haven’t, you should play it now.

First of all, let’s set up our flash file. Keep the default dimensions of the file the same (550×400), but change the background of the stage to black, and make the frame rate 24 fps. This way, it’ll look nicer and smoother. The second thing we’ve got to do is create a character that we’re going to use. I won’t go overboard in detail on mine, so it’s going to be a simple 25×25 white circle. Next, convert it into a MovieClip called “mcMain”. Also, give it an instance name of the same thing, “mcMain”.

Next, set it so that the crosshair is on the center of the circle. You can do this by double clicking on the MovieClip to edit it. Then, change the circle’s coordinates to -12.5, -12.5. This will make it in the exact center of the MovieClip.

Now, let’s add some actions to this character. Create a new layer named “actions” and then add the following code to it:

var mainSpeed:Number = 25; //how fast the character will go
 
_root.onEnterFrame = function(){
	//making the character follow the mouse
	if(_root._xmouse > mcMain._x + 25){ //if the mouse is to the right of mcMain
		mcMain._x += mainSpeed;//move mcMain to the right
	} else if (_root._xmouse < mcMain._x - 25){//same thing with the left side
		mcMain._x -= mainSpeed;
	} else {
		mcMain._x = _xmouse;//if it's close enough, then make it the same _x  value
	}
}

This code will simply make mcMain follow the mouse on it’s _x value. That was pretty easy, right? Now, we have to make it so it can jump. In order to do this, create a MovieClip the same size (550×400) and color (black) as the background with an instance name of mcBg. We’ll use this so that if clicked, the user will jump. First, we have to add some variables to the top of the stage:

var mainJumping = false; //whether or not main is in the air
var jumpSpeed:Number = 0; //how quickly he's jumping at the moment
var jumpSpeedLimit:Number = 25; //how quickly he'll be able to jump

Next, add these two functions to the bottom of the stage:

mcBg.onRelease = function(){//if the user clicks
	mainJumping = true;//then we can start jumping
	jumpSpeed = jumpSpeedLimit*-1;//change the jumpSpeed so that we can begin jumping
}
 
function mainJump():Void{
	if(mainJumping) {//if jumping has been initiated
		if(jumpSpeed < 0){//if the guy is still going up
			jumpSpeed *= 1 - jumpSpeedLimit/120;//decrease jumpSpeed slightly
			if(jumpSpeed > -jumpSpeedLimit*.1){//if jumpSpeed is small enough
				jumpSpeed *= -1;//then begin to go down
			}
		}
		if(jumpSpeed > 0 && jumpSpeed <= jumpSpeedLimit){//if main is going down
			jumpSpeed *= 1 + jumpSpeedLimit/120;//incrase the falling speed
		}
		mcMain._y += jumpSpeed;//finally, apply jumpSpeed to mcMain
		//if main hits the floor, then stop jumping
		if(mcMain._y >= Stage.height - mcMain._height && totalHeight <= 0){
			mainJumping = false;
			mcMain._y = 387.5;
		}
	}
	if(mcMain._y > 387.5){
		mcMain._y = 387.5;
	}
}

I’ve tried to comment the code as best as I can. Hopefully, you can decipher this code. There is one final thing to do in order to make this code to work, however. In the main onEnterFrame() function, run the mainJump() function. Now, if you test the game, you’re character should be able to jump!!!

Well, this wraps up this part of the tutorial! Next, we’ll create “bells” to be added to the stage!

The Final Product

• The Top 10 Things You Should Know About Flex by Schalk Neethling
• Flash 10 Security Changes Good and Bad, Mostly Good (Full Screen Input, RTMFP, Clipboard, Local Save and Load) by draw.logic
• Adobe Flash CS4 – Overview by Hidden Pixels
• Flex-ible Programing With Adobe Flex by Nick Boldison

Web Design Links

• 10 CSS shorthand techniques you’ll use everyday by The Floating Frog
• Common Traits of Bad Web Design by Positive Space
• Top 7 Most Cliche Stock Images Used in Web Design by Just Creative Design
• 5 Simple Tips on Improving UI by Aliph Digital Web Consulting

1. DZone

2. SwiK

3. Design Float

4. DotNetKicks

5. Hacker News

6. All Dev Net

7. WScoop

8. Game Dev Kicks

9. Gamer Blips

• What Makes a Good Developer? by Primal Skill Blog
• The Rarely Used AS3 with Keyword by Flexia
• Flash CS4, Big Changes Ahead by Flash Magazine
• Flash CS4 Feature Tour by Lee Brimelow (video)

Web Design Links

• Creating Usable Website Navigation by Nathan Beck
• The Function of Rounded Corners and Using Whitespace to Indicate Relationships Between Content Elements by The Usability Post
• How Friendly Will a URL Ever Be? by The Matchbox
• How to Make CSS Sprites by Ra Ajax

Academic Superstore is a great place to find any kind of program for an amazingly cheap price (up to 80% off). It’s the place where I bought my Creative Suite 3 Design Premium for about $1000 less than it would have been from the Adobe site. That is quite a deal, isn’t it? But, there is one catch. You need to be eligible for the savings. Don’t worry, it’s very easy to be eligible.

Here is the site’s page about eligibility for savings. In order to be eligible, all you have to be is either a student, the parent of a student, or a teacher. The eligibility requirements are different for different products. I’m a student, so that’s how I got my savings.

So, why don’t you go now and pre-order Adobe CS4 now?

Emanuele Feronato

The Flash Blog

Bit 101

Frozen Haddock

Freelance Flash Games

Flash Enabled Blog

8 Bit Rocket

Visual Rinse

Flash Magazine

Mochiland