Home >
After months of being gagged and leashed, iPhone developers are now free to talk about the iPhone SDK. Apple has dropped their NDA and opened the flood gates to those new developers who thirst for iPhone programming knowledge. I feel that Actionscript developers will have an easier transition to Cocoa-Touch than developers coming from other languages. Being a long time Actionscript developer myself I found it easy to port from Flash to iPhone. Further down in this article I show how I built my app in Flash and the steps I took to port it over to Cocoa. But first, here’s why I believe the learning curve is very low for Actionscript developers.
Flash and Cocoa are shockingly similar. Much of the Cocoa framework is a mirror image of Actionscript classes / components. For example:
- UIView = MovieClip
- NSNotification = Event
- UIButton = Button
Actually if you think about it, Cocoa can be seen more as the equivalent to MXML because it’s a framework. The underlying language for Cocoa is actually Objective-C. Objective-C is a lot like Actionscript except for one major difference in how methods are written and called.
In Actionscript this is how we would call a method
this.gotoPicnic();
In Objective-C methods are defined in brackets and the keyword for “this” is “self”
[self gotoPicnic];
This will be one of the biggest hurdles for many Actionscript developers to cross, especially when you start adding nested method calls inside of your method calls, for example
[self gotoPicnicWith: [self coworkersAttending]];
So what exactly is the easiest way to learn Cocoa? Well that depends on what works best for you. From my own personal experience I found that using Flash and Actionscript to develop my iPhone app made learning Cocoa very enjoyable.
Benefits of prototyping in Flash.
So what are the benefits of building your iPhone app in flash first? Well, think about the most time-consuming part of your application development….. The actual coding. Now try coding your application and learning a new language at the same time. As you can imagine it’s a time consuming job trying to do two things at once, this is where Flash takes that burden off of you. With flash you can build your app’s logic in a language that you are already familiar with, you have access to UI elements such as buttons and animations and you get to have a visual mockup of your application before writing a single line of Objective-C. Once your UI and logic are in place, porting over to Cocoa will be a breeze.How to setup you flash movie.
The first thing you can do to help assist in the visual layout of your prototype is to download a free iPhone UI elements PSD. Here is a great PSD you can use for free:
http://www.tuaw.com/2008/08/24/free-library-of-iphone-ui-elements/
The iPhone’s screen size is 320 x 480, so if you are creating your app in portrait view you should set your stage size to 320 x 480, otherwise 480 x 320 for landscape view.
Converting your events in flash to work in Cocoa.
For most developers the biggest question when coming to Cocoa is “How do I use events?” My favorite part of Cocoa is its notification system. If you are familiar with PureMVC you will have no problem understanding how events work in Cocoa. In Actionscript we have “Event Dispatchers” and “Event Listeners”. The dispatchers would dispatch and event from somewhere (this.dispatchEvent(event)) and we would setup a listener to listen for that event. Also events in Actionscript have a certain type.
In Cocoa we have a little more freedom. Events are called “Notifications” and we use a “Notification Center” to handle all notifications. To give you a visual, think of the Notification Center as a bulletin board in your office that anyone can leave notes on. When someone has something to say they post a notification to the board. Anyone who is looking at the board is considered an observer (An observer is the equivalent to a listener in flash).
Lets say you (observer) is only interested in notes posted on the board that pertain to next weeks company picnic. Whenever someone comes along a puts a note on the board and its labeled “picnicNote” you will react to the note and do something… lets say you go to the picnic. You can easily have more than one observer looking for the “picnicNote” and any observer can look for many different types of notes also. So how is this coded in Cocoa?
Object1 - [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(gotoPicnic) name:@”picnicNote” object: nil]
Object2 - [[NSNotificationCenter defaultCenter] postNotificationName:@”picnicNote” object: nil]
In the above code Object1 is saying “add me to the defaultCenter and when notification named “picnicNote” is posted I want to gotoPicnic. When Object1 see’s that Object2 has posted a notification to the defaultCenter Notification board it will react by calling a method (selector) called gotoPicnic.
Using this information I was able to build my first iPhone app in Flash and port it over to iPhone. The app is “Urban Tycoon” and sold over 3000 copies in its first week. The process was pretty strait forward. Here are the steps that I took.
- Design the UI for the app in Flash using the timeline to represent each screen.
- Use Actionscript to emulate things like swipes across the screen. For example here is some code that would emulate a UIScrollView.
- After getting the basic UI functioning and some of the logic in place, export all MovieClips (that were made for the UI) as PNGs.
- Open XCode and create a new iPhone project.
- Inside XCode make those PNGs into UIImageViews and position them in the exact position they were in Flash.
- Now wire up the buttons in your UI to post notifications. For example here is a button image from flash that I placed in my Xcode project. It calls a function when pressed.
The code above adds an action to the button, it says on my TouchUpInside event call the method “postPicnicNote” on self. Remember self = this in ActionScript.
[button addTarget:self action:@selector(postPicnicNote) forControlEvents:UIControlEventTouchUpInside];
import flash.display.StageAlign;
import flash.display.StageScaleMode;
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
// holder will act as the main UIScrollView
var holder:MovieClip = new MovieClip();
addChild(holder);
holder.addEventListener(MouseEvent.MOUSE_DOWN, mapMouseDown);
holder.addEventListener(MouseEvent.MOUSE_UP, mapMouseUp);
// Start Drag on Mouse Down
function mapMouseDown(event:Event):void
{
holder.startDrag();
}
// Stop Drag on Mouse Up
function mapMouseUp(event:Event):void
{
holder.stopDrag();
}
Now we have a simple iPhone app that looks and behaves like our Flash movie. Of course pushing new UIViews to the screen or adding a UIScrollView will take a little more understanding of the iPhone SDK. Apple has great documentation on it’s developer website (http://developer.apple.com).
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
thats a really good article, i have been wondering that for a long time, i have read alot in techcrunch and other similar sites that adobe and apple work working together to create a tamed version of the flash player for the iphone.
Thanks for the great article! I'm a Flash developer trying to learn how to develop for the iPhone. Now I'm reading a book on Objective C, then I was planning to read an iPhone dev book, but this seems like a way faster way to get started.
Thanks for this article! Great head start for all of us AS designers/developers out there looking to do something on the iPhone.
- e
Thanks for this article. Always nice to hear how Actionscript developers learn Objective-C and Cocoa.
Hey Mike,
Mind dropping me an email? I run 360|Flex, would love to talk to you about a new even we're working on. Along the lines of this post :D
john AT 360conferences DOT com
Really great article, thanks. I took a similar tack for my upcoming app but you've gone about it in a more disciplined way. Kudos.
Hi Mike,
Great article! Hope you are writing more on this subject, really interesting.
As a side note; i noticed the link to the PSD files are off, it links back to this article.
Thanks,
Sidney
Thanks everyone!
@Sidney - I'm having the same problem with the link (sorry about that), but you can just highlight and copy/paste into your address bar for now.
Thanks Sidney, I fixed the link.
good article Mike, makes me doubt again if i should wait for the Android G1 to be released here, or just buy that iPhone :-),
Jeff.
Good comparision. It's true that there are similarities between Flash/iPhone development. But I'd be careful argumenting it'd be a breeze to migrate from AS3 to Cocoa Touch.
Especially when it comes to media it's getting confusing if you're used to sugar coding due to high level frameworks.
If you're doing more than just GUI develpment you might find yourself in the world of C. Not only obj. C but also lots of pure C.
There is definitely nothing comparable to MovieClips or Events.
E.g. drawing with Quartz is def. not the same as drawing to the 'graphics' object of a Sprite with convenience methods.
And last but not least: the iPhone invites you to the bivalent world of 'put your own garbage away'. There is no garbage collector doing the dirty work for you.
Release what you've retained and free what you created or your beloved 'didReceiveMemoryWarning' method will get triggered or the program crashed immediately.
And by the way: there is no E4X or anything convenient like it. You have to use event based parsers to work with XML. That is like time traveling back to the stone ages when you're used to E4X.
I don't want to discurage AS developers starting iPhone development. It's fun and it's worth some efforts to get into it. It'll definitely improve your AS skills as well. But don't consider it a breeze - it could be disappointing.
I recommend starting with a good book on Cocoa like THE book from Aaron Hillegass (COCOA Programming for MacOS X 3rd edition).
I hate to be the negative person here....but I have to disagree!
You'll be correct if you compare php programmers vs actionscript programmers in their iphone development ease. But the people with true advantage are C and C++ programmers followed perhaps by java guys.
I've done both actionscript and a bit of objective-C...sure you might be able to put something together that compiles, but that doesn't mean it's a good and sustainable code. As another person commented above, managing object and memory is a big pain in objective-C something most actionscript programmers had never really thought about. Not to mention pointers, derefrencing, pointer arithmetics and more....
I really think it pays to have a solid firm understanding of C before you start building something complex !
Actionscript is light years ahead of Objective-C
Honestly I don't think ActionScript is "years ahead" compared to any other language. It is pretty adequate for what it does in its own enviroment, outside of Flash Player it is very much unkown. Having a language that doesn't ask you to think about memory management of your objects (which is not available not even as a option by the way) may be positive for developers on machines with 2+ GB of Ram that gets rebooted twice daily, when you are dealing with embedded devices, you HAVE to have the chance to control memory allocations. Objectve C 2.0, offers many features not available in other languges, one for all, the fact that you don't call other classes' methods but send messages to them is quite nice; also don't forget that Obj-C derive in design from SmallTalk with all advantages that come with this.
Well I bought iPhone and I am more than satisfied with it. Moreover I am trying to learn actionscript language so this will be great.
MikeCrabe
Mike,
What did you use to port your flash to cocoa?
Cheers,
Hi John!
Thanks for posting this. I'm going to show if off at a future Flex user group meeting.
Question: When you developed your app, did you do it purely in AS3, Flex or Flash? Or a combination thereof?
Thanks again for sharing. I am beginning to develop an iPhone app and was feeling daunted about learning Objective-C but this has given me a lot more confidence.
I like the idea since I been working with video animation in Flash (non action script animation but rather manual old school) Do you think I can translate a non action script flash movie into XCode/Cocoa touch app? How can I learn more about how to use XCode? I know the developer Apple page has info and videos but they do not really teach you how to make an app steep by steep untill you uploaded to Itunes store! Any help where can we learn XCode?
I like the idea since I been working with video animation in Flash (non action script animation but rather manual old school) Do you think I can translate a non action script flash movie into XCode/Cocoa touch app? How can I learn more about how to use XCode? I know the developer Apple page has info and videos but they do not really teach you how to make an app steep by steep untill you uploaded to Itunes store! Any help where can we learn XCode?
Great article. I've been stumbling through cocoa touch for a little while, and up until now I was convinced that there wasn't a good replacement for the eventing model of as3. There have been quite a few articles written on migrating as3 skills to obj-c. I always thought that flash people had the ideal balance of programming and graphics skills, but your article pointed out all the obvious argument that I've been missing. Thanks!
Mike, I would be glad if you could tell me how to do this thing with iPhone. How can I play flash or better use Flash on my iPhone?
Tom
Mike,
I have a simple game in flash and want it converted to iphone app.
Can you give me a reasonable price?
Daryl
To disagree with some of the comments on this post: AS3 actually is "years" ahead of lots of other languages. It was based on a draft spec of ECMA script version 4, with the understanding that the spec would go through. However, after the release of AS3/ Flash 9, Microsoft squashed the version; which means that AS3 is based on a spec that will never actually be released. The next version of javascript, won't be half as advanced as AS3. I personally wouldn't be surprised if some of those spec features, such as "package bracketing" are rolled back in the next release of Actionscript. That's the cost of being on the cutting edge.
Yep- I drank the Kool-Aid yesterday. I actually like it. Once I got over the syntax and could actually make out my methods and other structure things became much clearer. Thanks for the motivation to investigate ObjectiveC