How To Make a Simple iPhone Game with Flash CS5

This is a tutorial by iOS Tutorial Team member Russell Savage, the founder of Dented Pixel, a creative development company. He recently released its first app – Princess Piano – and he is currently hard at work on several new projects. I originally got into Objective C reluctantly. I had been holding out because I […] By Ray Wenderlich.

Leave a rating/review
Save for later
Share

This is a tutorial by iOS Tutorial Team member Russell Savage, the founder of Dented Pixel, a creative development company. He recently released its first app – Princess Piano – and he is currently hard at work on several new projects.

Create a simple Air Hockey game for the iPhone in Flash!

Create a simple Air Hockey game for the iPhone in Flash!

I originally got into Objective C reluctantly. I had been holding out because I heard that the upcoming Flash CS5 would be able to compile to the iPhone, and because I was well versed with writing Actionscript code, I decided I could wait a couple of months and save myself the effort of having to learn a new language.

When Flash CS5 came out, it did in fact compile to an iPhone build but the performance was painfully slow, it was really unusable even for the simplest of games.

Luckily, things have changed – with Adobe’s latest release CS5.5 that slow performance is a thing of the past, and making an iPhone game with Flash is a viable option! Not only is developing in Flash quite quick and easy, but it also offers some additional benefits like being able to export to Android and of course to the web, with minimal or no changes to the code.

In this tutorial, you’ll get hands-on experience creating a simple iPhone game with Adobe Flash CS5.5. You’ll take a hockey paddle, and use it to flick a hockey puck around the board to hit targets, and gain points!

To go through this tutorial, you don’t need any prior experience with Adobe Flash or Actionscript, because I’ll walk you through step by step. In fact you don’t even need Flash itself, because you can download a free trial!

So let’s get started with a Flash!

Getting Started

First things first, you need a copy of Adobe Flash CS5.5.

If you don’t have a copy of Flash CS5.5, you can download a free trial of version of it here, that has no limitations besides the fact that it only lasts for a month.

Important note: Unfortunately, CS5.5 does not ship with the latest version of AIR which is Adobe’s runtime system for applications. I would highly recommend upgrading the version of AIR to the latest before you publish your game. You can find instructions from Adobe on how to do so here .

So once you have your copy of Flash CS5.5 ready to go, let’s move on!

Setting Things Up

Create a new document in Flash by selecting File->New. Set the type to “Air for iOS” and set the framerate to 60 frames per second (fps). Also set the document size to 640×960 – this way we can target the retina display and scale down for older phones.

Creating a new project with Flash CS5.5

Let’s start by creating a graphic for our air-hockey paddle. One advantage to Flash is that you can create graphics and animations right from inside the same app!

Click on Insert->New Symbol. You need to give the symbol a name, so name it “HockeyPaddle”.

Click on Advanced if it’s not already expanded to define what this symbol will be referred to as in our Actionscript code. Click on Export for Actionscript and the class name should auto-fill in as “HockeyPaddle”. Click on OK to create the symbol.

Creating a new symbol for the hockey paddle

Now we need to draw our object. Tap the “O” key to bring up the circle tool. I am going to create a medium sized circle about 80 pixels in diameter, and I will make another circle inside of it to make it extra purty.

Here’s an example of what it can look like (but be as creative as you want!)

A Hockey Paddle drawn in Flash

Now we are going to write our first code! First we will make the Document Class that will act as the central piece of code, so go to File\New and select “Actionscript 3.0 Class” (not plain old “ActionScript 3.0!”)

Name your class “HockeyMain”. Then save the class (the default should autofill to HockeyMain.as which is correct).

Before we can see our handywork we need to tell the Flash project to use this document class, so switch back to the Flash project and click on “Scene 1” in the breadcrumb bar to switch back to the Scene. In the Document Properties on the side there is a Class property – set this to “HockeyMain”.

Setting the Document Class of a scene in Flash CS 5.5

Your code is almost ready to run, but you won’t see anything on if you publish it, so let’s add our hockey paddle first. Replace the contents of HockeyMain.as with the following:

package  {
	
	import flash.display.Sprite;
	
	public class HockeyMain extends Sprite {

 		var hockeyPaddle:Sprite;
		
		public function HockeyMain() {
			hockeyPaddle = new HockeyPaddle() as Sprite;
			this.addChild(hockeyPaddle);	
		}
	}	
}

This imports the Sprite class we need, marks HockeyMain as extending Sprite, then creates a HockeyPaddle and adds it to the screen.

The :Sprite is added to the variable so the compiler knows it will be of type Sprite, also the “as Sprite” on the end to type-caste it as such. This typecasting of the variables is added so that we can squeeze some extra efficiency out of the compiler, but we could have easily left it in this format:

hockeyPaddle = new HockeyPaddle(); // no type-casting
this.addChild(hockeyPaddle);

Now you are ready to run your project! Save your Flash project as Hockey.fla in the same folder as HockeyMain.as, then hit Command & Enter (or CTRL Enter on a PC) to see your creation!

The hockey paddle added to the game

OK not that thrilling yet, but you should be able to see your paddle in the top-left corner.

As you can see from the diagram above, Flash has the 0,0 coordinate in the top-left corner and the Y value increases as it goes downwards. This is a little different than how some platforms setup their coordinate system (such as OpenGL or Cocos2D) so keep this in mind if you are new to Flash.

Now add the following code to make the paddle follow the users touch (or mouse if they’re running it on the web):

package  {
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    
    public class HockeyMain extends Sprite {
   	 var hockeyPaddle:Sprite;
   	 
   	 public function HockeyMain() {
   		 hockeyPaddle = new HockeyPaddle() as Sprite;
   		 this.addChild(hockeyPaddle);
   		 hockeyPaddle.mouseEnabled = false;
   		 
   		 stage.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown, false, 0, true);
   	 }
   	 
   	 private function handleMouseDown(e:MouseEvent){
   		 hockeyPaddle.x = e.target.mouseX;
   		 hockeyPaddle.y = e.target.mouseY;
   		 stage.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove, false, 0, true);
   		 stage.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp, false, 0, true);
   	 }
   	 
   	 private function handleMouseMove(e:MouseEvent){
   		 hockeyPaddle.x = e.target.mouseX;
   		 hockeyPaddle.y = e.target.mouseY;
   	 }
   	 
   	 private function handleMouseUp(e:MouseEvent){
   		 stage.removeEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
   		 stage.removeEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
   	 }
    }
}

We moved the hockeyPaddle variable outside of the scope of just the constructor so that it can be accessed by the other functions. Also we set it to not be mouseEnabled so that it would not get in the way when we are capturing other touch events on the screen.

In the constructor we added a listener that calls the handleMouseDown function when the user pushes on the screen. The additional variables in the addEventListener make sure that the Actionscript Virtual Machine (AVM) doesn’t keep this object in memory in case we forget to remove this listener ourselves (it counts the listener as a reference to the object and therefore thinks it’s in use otherwise).

This is an important distinction from Objective C. Even though this Flash project is compiled into native bytecode, the AVM is also compiled into the bytecode. This provides some advantages such as not having to worry about the memory management ourselves, although there are some practices like the one above that you need to keep in mind so that the AVM does not keep objects in memory because of a reference to it.

In the handleMouseDown function we set the target of the Mouse Down event to the x,y coordinates of our paddle. We are also doing the same in the handleMouseMove function.

Lastly in the handleMouseUp function we are removing both the listeners for MOUSE_MOVE and MOUSE_UP events. Now if you run your project, you can see that the paddle follows the mouse cursor on click and release!

Hockey Paddle following mouse

Contributors

Over 300 content creators. Join our team.