Tutorial Details
- Difficulty: Intermediate
- Program: Flash Pro CS5
- Estimated Completion Time: 1 hour
Last week saw a very significant development in the relationship between Apple and Adobe. Flash is back in the iPhone picture. In this tutorial, I will show you how to convert an exisiting Flash movie to an iPhone application using Flash Professional CS5.
Step 1: Choose a Flash App
The first thing you need to do is select the application that you want to port. In this example we’ll be working with the Digital Clock app we created in another ActiveTuts+ tutorial.
Step 2: Create a new iPhone OS File
Launch Flash CS5 and create a new iPhone OS Document.
Step 3: Landscape
As you can see, the default stage size is 320×480 px, which is the iPhone full screen resolution in portrait mode (this is holding the iPhone vertically).
However, this application is has a Landscape format and it won’t look good if we adapt the interface to Portrait. Your first instinct is probably to rotate the interface 90° and build the app that way. It will work, but it will be very difficult and you will probably end up with neck pain. For this reason Flash CS5 includes a Publish option to make the iPhone application in landscape mode.
Set the stage size to 480×320 px and continue with the next step, we’ll see how to set the app to Landscape mode in step 10.
Step 4: Interface
To port the interface, a simple copy and paste will be enough. Yes, it’s that simple!
However, in most cases you will need to optimize the graphics, which involves size, alignment and the balance between vectors and bitmaps. Since we are using simple graphics, we’ll focus on the alignment and the size of the elements.
Step 5: iPhone Adjustments
The original application size doesn’t match the iPhone size, so the first thing to do is change the background size to fit the stage.
The current size of the clock text will look too small in the iPhone, select it and change the size to 120px.
Step 6: Class File
Copy and paste the class file to the source folder, no changes need to be made to this file.
Step 7: Document Class
Remember to add the class name to the Class field in the Publish section of the Properties panel.
Step 8: Test for Errors
You can now test your movie to see if everything works as intended.
Step 9: iPhone OS Settings
Here comes the part you’re interested in; the iPhone part.
Now you have a perfectly working Flash movie, it’s time to convert it to an iPhone application. Go to the Properties panel, Publish section and press the iPhone OS Settings button.
Step 10: General
You will now enter a window full of settings. These settings are:
- Output File: The name of the ipa file that will be created, this can be whatever you want.
- App Name: The name that will be shown in your iPhone below the icon.
- Version: The current version of the application; you need to edit this on every test for iTunes to update the app succesfully.
- Aspect Ratio: The view mode of your app.
- Full Screen: Hides the top info bar (signal, bluetooth, wifi, battery, etc).
- Auto Orientation: Uses the accelerometer to change the orientation without writing code.
- Rendering: A very important option, using the gpu for rendering in complex graphics applications will highly increase the performance.
- Included Files: The files to be included with your app. If you are loading content from an XML, TXT or any other source you should add those files here.
Step 11: Launch Image
Every iPhone application displays an image at launch while loading the essentials to show the app. This image is the Default.png file we included in step 10. It’s recommended to show the same screen that the app will show when fully loaded, but you can use it to show your company logo, loading screen, title screen, or any other useful info.
The image must be 320×480 it doesn’t matter if you’re working in landscape mode.
Step 12: Deployment
For the Deployment tab, you will need to be a member of the iPhone Developer Program and follow the instructions in the Provisioning Portal to get the necesary files to compile your application.
Step 13: Certificates
There are three different kinds of certificates. The first is the Apple Worldwide Developer Certificate (WWDC). This certificate is compiled alongside one of the other two certificates: either a Developer certificate or a Distribution certificate. These are used for testing applications and deploying to the Apple Store, respectively.
Step 14: Provisioning Profile
The Provisioning Profile is basically a file that states which application we’re testing and on which devices can we test it.
Step 15: App ID
An Identifier of your application, each application ID is required to have its own unique namespace that looks something like com.yourcompany.YourApp. This is also generated in the developer program site and included in your provisionig profile.
Step 16: Deployment Type
Select an option depending on the kind of certificate and provisioning profile you’re working with. A Developer Certificate can be used for Quick Publishing and a Distribution Certificate is needed for deployment, using this kind of certificate will create an app ready to be submitted to the app store.
Step 17: Icons
Next is a simple one, the Icons tab.
Three sizes of icons must be used 29x29px, 57x57px (this is the icon shown in the device) and 512x512px. Don’t worry about the round corners, iTunes will automatically generate them.
Step 18: Publish
When you’re done filling the settings press the Publish button, a progress bar will appear showing the remaining time. The time it takes depends on your application and the files included. Also, more time is needed when publishing for deployment.
Step 19: Device Testing
An .ipa file will be created in your source folder, drag it or double-click it to open in iTunes. You will see the icon of your app with the other applications.
Sync your iPhone and get ready to run your new app!
Step 20: Submit App
If you’re done porting your prefered application to iPhone and want to share it with the rest of the world, you can submit it to the App Store. Login at iTunes Connect and follow the guided instructions.
Conclusion
Now you know how easy it is to develop iPhone applications using Flash Pro CS5, start making your own!
I hope you liked this tutorial, thank you for reading!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Carlos Yanez
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Awesome. I was experimenting with this just the other day.
Hope to see many more iPhone tuts here on Activetuts+ in the near future…
Ben
Thanks for the nice tutorial. I’m glad that Apple now accept apps built on Flash. Looking forward to build an app :)
Thx for this.
I got another question on iOS development with Flash:
Will the x and y position change if i select landscape mode ? So that x is y ?
I’ve a problem when I try to add ipa file on my iDevice.
In fact it gives an error (“signer is not valid”) do you have any suggestions!?
I had this problem too when I did this earlier.You have to add the provisioning profile to Itunes.
Carlos’ tutorial leaves a ton of steps out and is going to be leaving alot of ppl going WTH?
Here is a good step by step tutorial
http://help.adobe.com/en_US/as3/iphone/WS144092a96ffef7cc-33e1d8031250a54a821-7fff.html
I
Also check out this link to convert your .cer file to a p12 file which you need to compile the application.
http://help.adobe.com/en_US/as3/iphone/WS144092a96ffef7cc-371badff126abc17b1f-7fff.html
Sorry maybe i should not say a ton of steps but a few steps it is still a good intro tutorial,not meant to offend the author
Your not being very clear on which certificate to use since there are three of them,and which ones to use,how to compile them etc…
Can you be more clear
Nice tutorial. I got to the last step, Submit App. I ran into a problem..Im on a pc the upload tool is for a mac. I have every thing else done and my app’s status is “Waiting For Upload”. Anyone know how to upload on a pc?
woohoo!
Flash is back! Flash roooooooocks!!!!
Hello,
I’m trying to make a iphone app for school in flash.(iphone os) But when i import the images they are getting ugly…
Do you maybe know how i can fix this? your image look normal when I import it..
i don’t get it :(
Thnx
Great!! The p12 file it was my problem, but with your tut is more clearly. Thanks and congratulations. Saludos desde Mexico.
Hi John,
Thanks for your comment, as mentioned in Step 16, you can use the Developer Certificate for quick device testing and the Distribution Certificate when you’re app is ready to go in the App Store.
The Ad Hoc certificate can be used to distribute your content to other developers / users directly, you can get it from the Apple iPhone developer portal, it will allow you to specify a limited number of devices that the content can be deployed to.
yeahh !! :)
this is great !!
Thanks for putting this together. I am waiting on my CS5 master collection to arrive so that I can have a one-suite setup for deploying everywhere (everywhere that matters, anyway)…
Hope to see more tuts here in the near future!
Thank you very much for the tutorial. I am currently starting development for the iPhone using Flash and this was helpful.
helpful indeed!
the images shown in the tutorial are not showing up though
Really? No problems here – let me know if it’s something you come across again :S
I’m learning XCode to develop iPhone apps but I’m aslo an AS3 dev and this tutorial has been really helpful.
I advice to everybody wanting to learn more about Flash CS5 IOS dev to read this PDF :
http://download.macromedia.com/pub/labs/packagerforiphone/packagerforiphone_devguide.pdf
Thanks for this great tutorial Carlos.
Jk_
Hey guy do I need to pay for the developer membership to apple to get my apps on my iPhone for testing?
Not only are the images not showing up but the download isn’t working either.
Why should this hapen to a small number of people (UK based).
Sorry to hear that, JF :(
It’s working OK for me (I’m also UK based). Which browser are you using?
IE8 / FF2 / FF4
Firebug shows the zip file download as a 301 Moved for http://cdn.active.tutsplus.com/tuts/170_iPhonePort/Src.zip
which ends up as a 404 for the redirect to http://active.tutsplus.com/tuts/170_iPhonePort/Src.zip
I can download a ZIP from a random selection of 6 other tutorials but am unable to for this tutorial (+ loose approx half of the JPG images to a 404 e.g. http://active.tutsplus.com/tuts/170_iPhonePort/Preview/Preview.jpg
Disabled firewall etc. but the ZIP file download is quite specific – 404 website image
There’s a famous Law for this sort of thing.
YEAH !!!!!!!!!!!!!!!!!!!
As always GREAT instruction Carlos! By the way, do you have an official website? What’s the best way of contacting you for external consulting?
My email is sal@lightlysoft.com. Please drop a line when you get a chance.
Thanks again!
Hey Carlos, I’m also Carlos Yanez… graphic designer
people are sending me emails with questions about your tutorials, sadly they have the wrong Carlos.
do you mind adding your actual website to your profile so people don’t confuse us?
small world uh? maybe we’re related! (…gotta call my dad now)
I have 3gs Non-jailbreak iphone can i simply sync this application through my itunes and can run it on my iphone?
Nice tutorial, but I’m not sure about the actionscript part of all this. Don’t you have to make changes to the script – like change “click” to “touch”?
I’m not sure about all the script, but mouse events do get treated as touch events, automatically.
No kidding – so the Adobe “packager” converts your actionscript mouse terms to touch terms. That’s cool. I thought I was going to have to learn all kinds of new actionscript commands.
Yep! It’s great. Check out Mike Chambers’s post on it here.
Great link Michael. Thanks so much. Very informative.
I was sent a link at work today.
http://itunes.apple.com/au/app/pandabella/id398269983?mt=8
It looks so much like the Flash game
http://www.freeworldgroup.com/games8/gameindex/thesirenofyingyang.htm
But I don’t have an iPad, anyone can find out if he used the packager to convert it!!!
Hello Sir I created few apps from your tutorial. Thanks for that.
I want to start developing game in flash for iphone. I heard somewhere that heavy animation(vector) creating problem in iphone. Inshort its not look smooth in iphone. Is that correct? Please reply me and clear my confusion because I wanted to start my first iphone game asap.
Hi Guys,
CS5 asks me for a password for the .p12
I didn’t see anywhere in the developer center where I can set a certificate password.. any help please?
Cheers,
Roey
Hey, For the certificate u can create one using flash. Open it up, click Adobe Air application go to the publish settings (the box u open that says publish) go to the certificate place and click create certificate save it and use it!
Followed this to know how, to actually create it for jailbroken phones, without the signing and paying 100 dollars:
http://www.instructables.com/id/How-to-use-Adobes-iPhone-Packager-without-an-Appl/
Hello Absolutely Everyone
I can’t find a definitive, trustworthy answer to this one (and a potentially well-paid project rests on it): Using AS3 (either Flash or Air) via the iPhone Packager, can my app grab a still from the device camera AND/OR load an image from the device (probably camera roll) as chosen by The User?
Cheers
Sally
You might be able to do this, just check the documentation : http://download.macromedia.com/pub/labs/packagerforiphone/packagerforiphone_devguide.pdf
Hi there, for some reason I´m not being able to install this or any app created thru this steps, hope you can help me out here.. My device is jailbroken and I can install third party apps just by dragging them into the app tab in iTunes and syncing but for some reason is not working on these ones… it just says install failed :(
hey try to use installous to install the ipa. Download iFUNBOX (no ssh needed) open it. connect ur device, it will detect it, go to the installous category and drag the app in. Open installous and it will be in the downloads category
The Launch Image doesn’t appear :(
The Flash CS5 with iPhone development toos are not ready for retina display? I’ve done a image with the size of iPhone 4 screen but she became distorted. And the icon (144×144) why not support?
Whenever I try to test the movie it says:
“Application descriptor file cannot be parsed”
what does that mean and how do i solve it???
Hi, did you solve this? I also have the error of ‘Application Descriptor File cannot be parsed’
What is the size of your ipa file?
what is the size of your .zipped app file?
basically, what is the minimum app size with the flash engine? This app would be a great example because it is very small and simple.
thank you!
Dude you are AWESOME! I searched up all tutorials, i did everything and tried everything to get rid of that black screen at the starting up of the app! I’ve made a successful app now! THANKS ALOT
Hi,
I’m new to using FLASH. Ok my problem is when I open up FLASH CS5 I don’t see anything referencing the iPhone OS. Can anybody please help me?
Thanks in advance
CS5 or CS5.5?
CS5.5
Does this help?
Yes thanks.
Hi Carlos, I’m a beginner on IOS development and As3, and I have two little questions that maybe will sound absurd, but honestly I don’t get it:
1.- step 6, you say something about a class file, which one are you talking about? I mean, where is it? or which one you mean at?, and you say something about a source folder, that’s the same where mi .fla and .swf files?
2.- on Step 7, you say that there is a class field that needs a class name, in the publish section, i don’t know where is the class name, I mean, which one?
I’m sorry for those questions, I’m learning about as3 and iOS dev. and there is so much that I don’t understand because I’m doing this by myself and my native language is spanish.
thanks for the tutorial!!
Ohhhh now I get it, you use an external AS file, but well, now my question is:
for an iOS app, an external AS file is needed? or you only do it inside the same .fla file, then publish it?
and, are there some benefits from writing an AS file better than doing inside the same .fla?
Hey Antonio,
This is an old post, so things might have changed, but I believe you could put all your code inside a single FLA if you really wanted to.
Class-based coding is generally a lot neater and easier to maintain, though, so we encourage it at Activetuts+. Take a look at this Quick Tip for a beginner’s guide.
Whichever method you choose, you’ll still end up with the same set of files once you’ve published the project.