back

An introduction to developing games on the Adobe Flash Platform

by Samuel Asher Rivello

Games created with Adobe Flash software are everywhere. We play them on game arcade sites such as Newgrounds.com and AddictingGames.com. There are dozens of game genres to choose from: action, adventure, casino, puzzle, role-playing, and much more. These games are interactive, cross-browser, and cross-platform; users can play them on personal computers as well as handheld devices. Additionally, these games are at home as standalone sites, are great additions to larger sites, and can be embedded into the most popular social networks such as Facebook. Top performers such as Alien Hominid and Line Rider have grown so popular that they are ported to devices that don't support Flash technology, such as the Apple iPhone, Nintendo Wii, and Microsoft Xbox 360. Online casual games are booming in popularity and the Adobe Flash Platform offers ideal tools to create and deploy great content.

For almost a decade, I have designed and developed single-player online games. More recently, I have collaborated on massive worlds with thousands of collaborating users. When I started in the industry, there were several viable development platforms, including the ever-powerful but difficult-to-use C++ platform. Over the years, Flash software has matured in its ease of use and Adobe Flash Player has matured in its power, so now the Flash Platform is the de facto environment for creating online casual games.

In this article, I take a look at the rising popularity of casual games and the business behind them. Then I review the history of the ever-evolving technology behind Adobe Flash Player as it relates to gaming, and examine a simple game called Flyer.

The rise of casual gaming

Online games fall into two major categories: hard-core games for a niche group of serious gamers and casual games for a wider, more mainstream audience.

Due to massive game worlds and intense 3D graphics demanded by the serious gamers, most hard-core games are created using proprietary C++ libraries and deployed on DVD-ROM to be played on the most powerful personal computers and video game consoles. These games tend to be sold as retail items in real-world stores, and many also require monthly fees to continue playing.

Casual games, however, target a mainstream audience (varied users, varied computers), and they are often free to play. They feature:

With mass appeal and a low barrier to entry, the growth of casual games has eclipsed that of hard-core games. Because of the simple scope, wide audience, and low file size, the Flash Platform is an ideal development environment for casual games. Why create these games in your business? Compared to large-scale applications, casual games can be relatively inexpensive to produce and incredibly profitable.

Casual games are serious business

Revenue models from casual games are varied. Typically, these games are free to play, but they run on pages that feature banner advertising. Page owners earn money by simply featuring ads or by getting users to click the ads. Or games may be free to play but incorporate product branding within the game. These "advergames" are basically one big ad, analogous to product placement. Theatrical movie websites and toy websites often incorporate advergames. Another way casual games earn money is through the "freemium" business model. In this model, users can play the trial version for free, but they must pay to purchase the full premium experience. Other revenue methods include subscription, micro-transactions, and virtual item sales.

The 1990s saw the birth of online gaming. As computers have become more powerful and Internet speeds have increased, industry growth through the 2000s has been exponential.

The online gaming market research company DFC Intelligence predicts big things again for casual games in 2009:


Figure 1. Annual online game revenue in billions (2006–2011).

This means that $3–5 billion of this year's revenue will be online casual PC games like those created with the Flash Platform.

Marketing firm Strategy Analytics projects the growth will continue to 2011's estimated $11.8 billion in annual revenue. Figure 1 shows the annual online game revenue in billions from 2006 through 2011. The market is huge and only expanding. The time to add casual gaming on the Flash Platform to your repertoire is now.

A history of Flash technology

Flash Player is everywhere, but it's not the only game in town. Historically, when high performance was needed, online games were created mainly in C++, Java, and Shockwave 3D — as well as Torque and Unity3D.

While developers of these other plug-ins have to hope their users have the patience to download the necessary player, Flash developers can count on their users already having Flash Player 10. With Flash, developers can also count on smooth integration of art, sound, and code within the friendly software environment of Adobe Creative Suite 4. Programs such as Adobe Illustrator and Adobe Photoshop can generate assets that integrate with Flash Professional.

Flash Player 10 is blazing fast in code execution and graphical rendering. Developers have their most powerful toolset yet for creating great content. The maturation of Flash Player has been a long road, however. Here is a look at just some of the game-related feature highlights of several versions of Flash Player:

Flash Player is better than ever, but let's not forget about Flash Professional. With each version, it has become more powerful and easier to use. The versatility of the software itself is attributed to its speedy adoption in interactive agencies since the early 2000s. An artist illustrates game menus and background art using Flash. An animator animates walk cycles, explosions, and whatever else is needed. A developer can code an entire project using Flash as well, easily integrating the native assets from colleagues. Of course, specialized tools are available for many roles as well, such as Photoshop and Illustrator, but because they are all part of Adobe Creative Suite, asset integration continues to be (mostly) a snap.

Once only a playground for single-player experiences, Flash technology can now create robust worlds with thousands of users. Since Flash Player 6, Flash has featured the socket connection required for persistent connections to the server. This type of connection allowed for few-on-few multiplayer gaming. The latest version of Flash Player has the needed power for massive multiplayer games; there is no longer a bottleneck on the client side. Michael Gold, CEO of the multiplayer game studio Electrotank, says, "With the ubiquity and performance of Flash Player 10, Flash is the de facto standard for browser-based multiplayer casual games."

The robust, open, and generous community of Flash developers offers unique benefits for the Flash Platform as well. There are millions of developers who not only create great content, but also have spent the last decade creating online forums, tutorials, user groups, and conferences to share their knowledge. The fact is that games created with Flash are only getting more complex, and community-created middleware is playing an even bigger role. Freely available code libraries such as Papervision3D (3D rendering) and Box2D (physics) are making Flash a better and more powerful platform for games. More and more, C++ game developers are viewing Flash as a viable platform for building great games.

PushButton Labs is one team that has switched from using C++ to Flash technology for game development. PushButton's founding members came from GarageGames, the developers of the Torque game engine. According to Ben Garney, lead developer of the open source PushButton Engine, "Flash delivers a good gaming experience, and the fact that you can publish a game to an audience of a billion people overnight is huge. And it's only getting better."

Game development theory with Flash Professional

Creating your first game is relatively straightforward — a major benefit is that armed with just Flash Professional you can create a great game. The following are a few key components of a basic game:

1. While flash.display.Sprite is indeed a Flash class, here instead we mean the general video game term for sprite.

Getting all these elements to work together requires creative and technical skills. The core of the game play code is called the game engine — the skeleton of the game onto which the creative assets are added. Once you complete a fun game engine, you can often reskin it with new graphics and sounds and deploy it on a new site.

According to Omar Gonzalez, software architect at the Almer/Blank Interactive Agency, "Games are profitable projects because they are highly reusable. The Flash Platform makes gaming even easier because of the clean separation of the logic and the easily updatable audio/visual assets. It's unlike any other game development toolset."

Making the game engine fun to play is tricky. An organic, iterative process during game development can be really helpful. Often you won't know all the details of the game during the design phase. You may not know the final size of the art until some coding is done. You won't know the difficulty settings until you play the game quite a bit. And you might realize that that sound effect you used is really annoying to the end user and needs to be changed. Be flexible and tweak the game concept as you go so you can make the best game possible.

The following are the basic steps to develop a game with Flash technology:

  1. Create a game design document. Include the game screen layout(s) and rules of play, and don't forget to make it fun.
  2. Break up the game engine. Plan your game in small parts to make it more manageable.
  3. Make small standalone demo projects. Prove out trickier parts separately such as input controls, physics, and trigonometry.
  4. Create and gather assets. Art can be created in Flash, and sounds can be found online for little or no cost.
  5. Construct the menus. Games often feature screens outside of the game itself such as the introduction, instructions, and Game Over screen.
  6. Play. Test the game as you go to be sure it's enjoyable and challenging.

Game development applied with Flash Professional

In a very brief example, you can see how the game theory applies to a real game. For the purpose of this article, I created a simple game called Flyer (see Figure 2). The game play is similar to the '80s arcade game Frogger. Here, the user's flyer spaceship starts at on the bottom of the screen. The four arrow keys move the flyer. The goal is to reach the top of the screen to win. Colliding with the enemies (biplanes and blimps) before reaching the top will result in a loss.

AlertThis content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of Adobe® Flash® Player.

Download the free Flash Player now!

Get Adobe Flash Player

Figure 2. Flyer game in action. Use the arrow keys to move. Refresh the browser to restart.


Typically games are set up in a more advanced way with external ActionScript 3 classes and a library of linked assets. To make this game easy to understand, I intentionally set it up in a very simple way. The background, score text field, four enemies, and flyer sit on the stage on the first frame of the FLA file. The following code is also placed on the first frame:

////////////////////////////////////////////////////
//STOP FLASH MOVIE ON FRAME 1.  ENTIRE GAME IS PLAYED ON FRAME 1
////////////////////////////////////////////////////
this.stop();


//**************************************************
//IMPORTS - CHOOSE WHICH BUILT IN CLASSES WILL HELP YOU
//**************************************************
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import flash.events.Event;


//**************************************************
//EVENTS - REACT TO KEYS, MOUSE, AND OTHER THINGS
//**************************************************
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyboardKeyDown)
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyboardKeyUp)


////////////////////////////////////////////////////
//KEYBOARD KEY PRESSED
////////////////////////////////////////////////////
function onKeyboardKeyDown(event:KeyboardEvent) : void {
	
	//REACT TO 4 ARROW KEYS
	if (event.keyCode == Keyboard.UP) {
		flyer_mc.y = flyer_mc.y - 30;
		playMoveFlyerSound();
	} else if (event.keyCode == Keyboard.DOWN) {
		flyer_mc.y = flyer_mc.y + 30;
		playMoveFlyerSound();
	} else if (event.keyCode == Keyboard.LEFT) {
		flyer_mc.x = flyer_mc.x - 30;
		playMoveFlyerSound();
	} else if (event.keyCode == Keyboard.RIGHT) {
		flyer_mc.x = flyer_mc.x + 30;
		playMoveFlyerSound();
	}
	
	//WIN WHEN YOU REACH THE TOP OF SCREEN
	if (flyer_mc.y < 30) {
		youWin();
	}
	
	//ANIMATE A LITTLE
	flyer_mc.gotoAndStop(1);

};
////////////////////////////////////////////////////
//KEYBOARD KEY RELEASED
////////////////////////////////////////////////////
function onKeyboardKeyUp (event:KeyboardEvent) : void {
	
	//ANIMATE A LITTLE
	flyer_mc.gotoAndStop(2);
};

//************************************************************
//FUNCTIONS - REUSABLE GROUPS OF CODE
//************************************************************

////////////////////////////////////////////////////
//OUTPUT A VICTORY MESSAGE AND 'STOP' THE GAME
////////////////////////////////////////////////////
function youWin() : void {
	
	//MESSAGE
	trace("You Won the Game!");
	
	//SET SCORE
	setScore (100);
	
	//PLAY SOUND
	playWinGameSound();
	
	//END GAME, STOP LISTENING TO EVENTS
	stage.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyboardKeyDown)
	stage.removeEventListener(KeyboardEvent.KEY_UP, onKeyboardKeyUp)
	biplane_mc1.removeEventListener	(Event.ENTER_FRAME, moveRight);
	biplane_mc2.removeEventListener	(Event.ENTER_FRAME, moveRight);
	blimp_mc1.removeEventListener	(Event.ENTER_FRAME, moveLeft);
	blimp_mc2.removeEventListener	(Event.ENTER_FRAME, moveLeft);
	
	
}
////////////////////////////////////////////////////
//OUTPUT A FAILURE MESSAGE AND 'STOP' THE GAME
////////////////////////////////////////////////////
function youLose() : void {
	
	//MESSAGE
	trace("You Lost the Game!");
	
	//SET SCORE
	setScore (-100);
	
	//PLAY SOUND
	playLoseGameSound();
	
	//END GAME
	stage.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyboardKeyDown)
	stage.removeEventListener(KeyboardEvent.KEY_UP, onKeyboardKeyUp)
	biplane_mc1.removeEventListener	(Event.ENTER_FRAME, moveRight);
	biplane_mc2.removeEventListener	(Event.ENTER_FRAME, moveRight);
	blimp_mc1.removeEventListener	(Event.ENTER_FRAME, moveLeft);
	blimp_mc2.removeEventListener	(Event.ENTER_FRAME, moveLeft);
}

////////////////////////////////////////////////////
//DISPLAY THE SCORE
////////////////////////////////////////////////////
function setScore (aScore_num: Number) : void {
	score_textfield.htmlText = "Score: " + aScore_num;
}

//INITIALLY START SCORE AT 0
setScore (0);


////////////////////////////////////////////////////
//PLAY A SOUND
////////////////////////////////////////////////////

//SETUP (ONE TIME)
var winGameSound:WinGameSound = new WinGameSound();
var loseGameSound:LoseGameSound = new LoseGameSound();
var moveFlyerSound:MoveFlyerSound = new MoveFlyerSound();

//PLAY WHEN NEEDED
function playWinGameSound () : void {
	winGameSound.play();
}
function playLoseGameSound () : void {
	loseGameSound.play();
}
function playMoveFlyerSound () : void {
	moveFlyerSound.play();
}


////////////////////////////////////////////////////
//HANDLE ENEMY THAT MOVES RIGHT
////////////////////////////////////////////////////
function moveRight (event:Event) : void {
	
	//REFERENCE TO ENEMY
	var enemy_mc:MovieClip = event.target as MovieClip;
	
	//MOVE THE ENEMY FORWARD
	enemy_mc.x = enemy_mc.x + enemy_mc.speed;
	
	//RESET POSITION IF OFFSCREEN
	if (enemy_mc.x > 800) {
		enemy_mc.x = -100;
	}
	
	//COLLISION DETECTION 'DID ENEMY HIT FLYER?'
	if (enemy_mc.hitTestObject(flyer_mc)) {
		youLose();
	}
};

////////////////////////////////////////////////////
//HANDLE ENEMY THAT MOVE LEFT
////////////////////////////////////////////////////
function moveLeft (event:Event) : void {	
	
	//REFERENCE TO ENEMY
	var enemy_mc:MovieClip = event.target as MovieClip;
	
	//MOVE THE ENEMY FORWARD
	enemy_mc.x = enemy_mc.x - enemy_mc.speed;
	
	//RESET POSITION IF OFFSCREEN
	if (enemy_mc.x < -100) {
		enemy_mc.x = 800;
	}
	
	//COLLISION DETECTION 'DID ENEMY HIT FLYER?'
	if (enemy_mc.hitTestObject(flyer_mc)) {
		youLose();
	}
};

////////////////////////////////////////////////////
//SET UNIQUE SPEED FOR EACH ENEMY &
//INSTRUCT ENEMY TO RUN ITS GAME LOOP EACH FRAME
////////////////////////////////////////////////////

biplane_mc1.speed = 15;
biplane_mc1.addEventListener(Event.ENTER_FRAME, moveRight);

biplane_mc2.speed = 13;
biplane_mc2.addEventListener(Event.ENTER_FRAME, moveRight);

blimp_mc1.speed = 8;
blimp_mc1.addEventListener(Event.ENTER_FRAME, moveLeft);

blimp_mc2.speed = 5;
blimp_mc2.addEventListener(Event.ENTER_FRAME, moveLeft);

The comments in the code are straightforward. Import statements bring in the needed Flash classes to assist the game. The events and event handlers listen for input from the user's arrow-key presses and move the flyer sprite. Next, the reusable functions of code move the four enemy sprites horizontally across the screen and perform the collision detection. Sounds are played as the flyer moves and when the user wins or loses. Lastly, the game loop for each sprite is set up.

Conclusion

According to John Say, CEO of Say Design, "Since Flash first introduced ActionScript in the late '90s, it has slowly matured from banner ads to much, much more. Now, a decade later, I'm convinced that Flash will change the landscape of online and cross-platform games dramatically as it continues to level up in both performance and capabilities."

Games created with Adobe Flash technology are indeed everywhere, and the future for the casual gaming industry looks bright. Flash Professional and Flash Player 10 are better than ever, fulfilling most (but not quite all) requests on developers' wish lists. By understanding the fundamental theory behind these casual interactive games and how to apply it, you see how easy it is to get started. So get out there and play.

Acknowledgments

I want to offer a special thanks to the contributing artist on the Flyer game. Autumn Rain Turkel of Tangled Dreams created all art and animation.

‹ Back


Samuel Asher Rivello is the principal of Rivello Multimedia Consulting (RMC). RMC’s Flash and Flex services include software architecture, consulting, development, and training. Sam has a decade of experience creating games and applications, and is currently traveling the globe to collaborate with top companies.