December 4th, 2008
Porting actionscript to iPhone, not magic!

When the iPhone first came out with an SDK, as a developer I was really excited, but apprehensive as I did not know a thing about Objective C. The first couple of days it seems like you need to be a damn ‘wizard’ to get anything running on the phone, much less practical code. Documented below are my first steps at porting actionscript code to Objective C. I know it’s not the ‘magic’ solution you were looking for, but give it a chance. It’s certainly nothing beautiful and you’ll have to forgive any inaccuracies, but it’s my first go, so cut me some slack.
Before starting you’re going to need a mac with an intel processor, Leopard, and the free iPhone dev kit from http://developer.apple.com/iphone/. It comes with a neat iPhone simulator so you don’t even need a real phone.
When considering what to make for my first app I wanted something fun and graphical that would be fun with a touch screen. It was just my luck that a few days prior Keith Peters was nice enough to share some code for a spinning drawing toy. Perfect!
Note: If you just want the goods, you can download all the project files at the bottom of the post.
First, a couple quick basic points:
- The SDK works in a fairly strict MVC pattern. You’ll notice in my code that I just sort of stuck most of my code in the view which works for simple apps, but it really makes sense to stick to the pattern for any apps of substantial size.
- Function and variable definitions are declared in a separate header file (with a .h extension). All vars work through setters and getters which can be automatically generated with ‘@synthesize’.
- trace = NSLog. To trace something to the console you use NSLog, but it’s slightly different depending if you are tracing, a string, integer, or even float. This was a constant source of random errors for me until I figured this out. Without getting into it too much, here is a sample of what I mean.
NSString *myString = @”Hello World”;
int myInt = 2;
NSLog(“This is a string: %@”, myString); // ouputs “This is a string: Hello World”
NSLog(“This is a number: %d”, myInt); // ouputs “This is a number: 2″
NSLog(“This is a number: %@”, myInt); // Error!
A quick run through:
The first thing called is the LineSpinAppDelegate which allocates a UIWindow instance. Think of a UIWindow as your stage root, it’s a singleton which you attach screens to in order to be rendered. The window (mWindow) then adds a subview which is of type LineView. LineView itself is a subclass of UIView which is an actionscript equivalent to MovieClip. It’s a container with and x, y, width, height etc. which will contain your app’s objects. It’s also at this point LineView gets initialized.
Inside LineView is where you might start to recognize some code. Inside initWithFrame (basically a constructor) initial variables are set and a timer is started which will call ‘TimerFired’. TimerFired checks if the screen is being touched and then acts accordingly by adding a new Point3D, which is just a class that holds an x, y, and z.
Now one funny thing you’ll notice is that there is a drawRect function, but nothing calling it. drawRect gets called automatically when the View is initialized, and then to retrigger it, we call [self setNeedsDisplay]. Inside the drawRect it is using the iPhone’s 2D rendering engine called Quartz to render the lines. Quartz is pretty similar to flash’s graphics package in that it is great for drawing lines, fills, and that sort of thing, but for any real graphic heavy lifting you’ll likely want to look into the iPhones OpenGL rendering (perhaps a future post on that). Drawing the path is started with CGContextBeginPath, then all the drawing instructions are added in the loop, and finally drawn with CGContextDrawPath.
Lastly is the question of how we detect screen touches. It isn’t exactly as simple as listening for MouseEvent.CLICK. However, what we do have are 3 functions native to any UIView class we can override called touchesBegan, touchesMoved, and touchesEnd. With in these we can grab [event alltouches] which returns a ‘set’ (basically an array) of locations where a finger is touching the screen. How cool is that? In the touchesBegan function you can see that if a touch is down it is setting the boolean mouseDown to true (‘YES’ in ObjC), or if we get 2 touches it does a rudimentary pinch detection.
When compiled you should get something similar looking to the flash code, but in a cool iPhone window. I know I’m omitting a lot of details, but hopefully it’s just incentive to dig into the SDK. There are a lot of great resources starting to pop up like the official docs and Stanford’s online course.
