플래시 AIR를 IOS에 넣어보자~!!

출처: http://www.untoldentertainment.com/blog/2011/11/23/flash-to-ios-a-step-by-step-tutorial-part-1/

Flash to iOS: A Step-by-Step Tutorial (Part 1)

by Sina Kashanizadeh, November 23, 2011

This is the first part of our tutorial series by Intern Sina on creating an AIR application for free on a PC using FlashDevelop, and deploying it as a native app on an iOS device like the Apple iPad, iPhone or iPod Touch.

Jump to other parts in the series:

• Part 2 – Obtain your Signing Certificate & Mobile Provisioning Profile, and create your App ID
• Part 3 -Use FlashDevelop to build your mobile AIR app
• Part 4 – Modify your project settings and test your app on an Apple device

Dead Wrong

There’s a lot of FUD floating around about Flash these days. Ever since Steve Jobs took to the mic and sounded the death knell of at least the perception of Flash, there’s been heaping gobs of misinformation about what you can and can’t, should and shouldn’t do with Flash. i chalk it up to the fact that death is news. It’s BIG news when Michael Jackson dies, BIG news when Steve Jobs dies, and equally big news if you can be among the first to report on the death of a technology or company – RIM, Flash, Palm, HP – take your pick. If it bleeds, it leads.

Saying stuff is dead, is dead. You heard it here first.

This hyperbolic and sensational misreporting is particularly damaging for those of us who have made our living developing with Flash and Actionscript. Back in 2000, when i first got into Flash, i chose it because the alternative was HTML. HTML appeared and performed completely differentlydepending on a number of different factors:

1. The platform (Mac, PC or Linux)
2. The screen resolution (640×480, 800×600, 1024×768, etc)
3. The browser (Netscape, Internet Explorer, Safari)
4. The browser version (HTML could render completely differently from IE6 to IE7)

Meanwhile with Flash, i could build something inside the little Flash Player box, and it would look and behave reasonably identically across platforms, resolutions, browsers, and browser versions. (Subsequent versions of the Flash player complicated things a smidge, but we were still WORLDS away from the pain of HTML). What’s more, as a visual person, i could actually lay things out within the tool, instead of coding them abstractly and waiting to see how the browser would render them. If i wanted something to appear over there, i picked it up and put it over there. No futzing around with padding or align tags for hours.

The push towards HTML5 doesn’t scare me – more accurately, it makes me feel ill. It’s a step backwards. Without proper tooling, i see myself banging my head against the wall picturing absolutely everything in codespace (rather than concretely laid out in front of me in designspace), and programming all kinds of exception cases so that my content performs properly depending on platform, browser and version. You know what? No thanks.

Thank God Flash is dead! Now we can finally move forward.

Prying Flash from my Cold, Dead Hands

As long as the tools for other technologies stink, and as long as i can keep making and monetizing projects in Flash, i’m going to stay the course until there’s a compelling technological /creative/workflow reason to make a jump. Untold Entertainment has deployed two gameswritten in Actionscript (Sissy’s Magical Ponycorn Adventure and Heads) across two different mobile platforms (Apple iPad and the BlackBerry Playbook), and we’re just getting warmed up.

Here are the facts, at the time of this writing:

1. No one really wants to play a game in a browser on a phone. Native apps are where it’s at.
2. Yes, you CAN put Flash- and Actionscript-created content on an iPhone, in native app format.
3. You can even do it without having to buy Flash Professional or Creative Suite.
4. You can develop entirely on a PC until the very last step (uploading content to the App Store).
5. Untold Entertainment is about to show you how.

What You’ll Need

While buying Adobe’s tools is optional, you’ll still need to spend a bit of money (or mug the right people) to pull this off. Here’s what you’ll need:

1. An Apple Developer account, which is $99 USD/year. Once you start down this path, you’re in it for the long haul … if you let your developer account lapse, they pull all your products off the store. For realsies.
2. A Mac (not free) running the latest version of Xcode (free).
3. An iOS device (optional, but obviously recommended).
4. FlashDevelop v4 or better (free, PC-only)

A Mac: not free.

Introducing Sina

He’s the spitting image of this guy – i swear.

Sina Kashanizadeh is a Sheridan College computer programming student and an intern here at Untold Entertainment. He’s done all the legwork in this process, and has written this step-by-step guiding on porting your Actionscript projects to iOS. Take it away, Sina!

Flash on iOS? So You Want to Be a Hero…

With the mobile world expanding at a crazy rate you may have had the crazy idea to try making an App yourself and putting it on the iPhone. Well, you’re a brave soul, because it can be a confusing task. This is why I have scoured the internet and composed a step by step tutorial of this process. This tutorial would not have been possible without the fantastic people that maintainFlashDevelop and the wonderful community behind it. I would also like to thank Lee Brimelow andAdobe for putting out some great tutorial videos that helped me out a lot. Last but not least, I would like to thank CodeandVisual.com for putting up a fantastic comprehensive guide that inspired me to move forward whenever I had trouble writing this tutorial.

I just want to be clear that this tutorial is not the “be-all, end-all” of this process. There are many different ways of transferring your Flash App to iOS, and the problems I cover are specific to my method. Also, the process I cover is PC-specific.

Getting Started

Before we begin, I would like to recommend a very good video resource by Adobe Evangelist Lee Brimelow, in which he explains the basics of adding an app to the App Store when using Flash. If you do not know how this process works, I highly recommend this video, as it breaks down the somewhat painful process of adding an AIR App to the App Store when using a PC (thanks again, Lee!). The good news is that if you go through this once, you’ll understand the ins and outs of the process. You only have to do the most painful parts once.

The video covers a myriad of stuff but the basics boil down to this: Your end goal is to create an .ipa file, which is what you’ll upload to the App Store. To do this you will require:

• An App
• An iOS developer ID from Apple ($)
• An iPad or iPhone ($)
• A Mac ($, but required for one step only … borrow one from a friend!)
• A Signing Certificate
• A Mobile Provisioning Profile
• YOUR SOUL

Sounds like fun? Well it isn’t, but let’s get cracking anyway!

Any Club that would Have Me as a Member

As I mentioned above, you’ll need a developer ID from Apple. Head over to the iOS Dev Centerand register for “free”.

“Free” as in “Free Beer … that you have to pay for.”

Go through the steps of signing up and the email verification and you will acquire an Apple ID. Now, the unfortunate thing is that you get the Apple ID for free, but if you want to develop anything with it on a device – even a silly test app that you will never release – you will have to pay $99 a year. You’d better be positive that your Angry Birds clone will be worth at least a hundred bucks a year in revenue. You can sign up for a free student account, but again you can’t really do anything with it unless you drop some cash. If you are helping someone develop an App for the iPhone/iPad and they are paying the developer fee, they can add you as a partner to their project.

Adding a Device to Your Developer Account

If you want to test and ultimately launch this App, you will need an Apple device such as an iPhone, iPod Touch or iPad. You will also need to register your Apple device with your Apple ID. Follow these steps:

1. Go into the iOS Developer website and log in with your new account info. Here, you will see the iOS Provisioning Portal. Click on it to see further options.

   
   

   

   
   

2. click Devices in the sidebar.

   
   

   

   
   

3. Click Add Devices.Note: if you are a partner developer with a team member profile, you will not be able to add a device. The option will only appear for the master account holder.

   
   

   

   
   

4. On this screen, you can add up to 100 devices to your account. Start off by adding your Device Name. Nothing fancy here – just enter something that will help you identify it – ie “Sina’s iPad”, or “iPhone what i stole from that guy that one time”.
5. Enter the Device ID (40 hex characters). This is the serial number that is associated with the device that you are trying to register. To find this Device ID, open iTunes while your device is connected. On the main screen, you will see all the information about your device, including a field called Serial Number. It doesn’t look clickable, but click on that field anyway and the number changes to a hex code. That’s your device ID.

   
   

   

   
   

6. Once you’ve filled in those details, click Submit and the device will be added to your Developer account. Now you can build an Adobe AIR application and test it on your device.The next tutorial will take you through the process of requesting and creating a Signing Certificate, converting that certificate to the p12 format that Apple requires, and generating a Mobile Provisioning Profile for your new app.

   Continue to Part 2

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

출처: http://www.untoldentertainment.com/blog/2011/11/30/flash-to-ios-a-step-by-step-tutorial-part-2/

This is the second part of our tutorial series by Intern Sina on creating an AIR application for free on a PC using FlashDevelop, and deploying it as a native app on an iOS device like the Apple iPad, iPhone or iPod Touch.

Jump to other parts in the series:

• Part 1 – Sign up for an Apple iOS Developer Account
• Part 3 -Use FlashDevelop to build your mobile AIR app
• Part 4 – Modify your project settings and test your app on an Apple device

Drudgery

Without a doubt, this section of our tutorial series on bundling your Adobe AIR App for Apple’s iOS platform is the pits. You have to use a complicated command line interpreter, you have to juggle what may feel like a million different certificates and profiles, and you have to jump through a dizzying array of hoops just to get everything set up … and you’re not even going to start building your app at all! But trust me: once you’ve cleared these hurdles, the rest of the process is gravy.

The first goal of this tutorial is to create a signing certificate, which is used very much like a hot brand on cattle. It’s the digital signature of you or your company that identifies an app as your own. We need to use a program called OpenSSL to create this signing certificate.

Install Open SSL

In order to turn your future AIR project into a native app, you need to create two important files: a Signing Certificate and a Mobile Provisioning Profile. If you are working on a Mac, you actually use a program called Keychain to do some fancy voodoo magic and get the certificate you need. We are working on a PC and we do not have that luxury, so there are a couple of confusing steps that we must go through.

The first thing you have to do is go to http://www.slproweb.com/products/Win32OpenSSL.html. Scroll down, and then download the Visual C++ 2008 Redistributables and install the resulting file. Next, download the Win32 OpenSSL v1.0a Light file and install that after you have installed the first package. These two files will help you create the Signing Certificate Request you so richly deserve.

Be sure to keep track of where you installed those last two elements. Next, visit this site:

http://help.adobe.com/en_US/as3/iphone/index.html.

These are Adobe’s help files for generating your signing certificate and then converting that certificate into a .P12 file. If you get lost in this tutorial, that page will be your safety net.

On that Adobe support page, you will see some instructions for Mac machines. Ignore them. Scroll down to the Windows instructions and give them a once-over.

The instructions say that you have to install Open SSL. You’ve already done that. Open a command prompt window. You can do this by going to your Start button and typing in cmd in the search field. (You can also hold the Windows key on your keyboard and hit the “R” key (for “Run”), then type cmd and hit Enter.)

Once you are in the command prompt, travel your way to your Open SSL bin folder. Depending on where you installed it you will have to travel to a different path than in this example. (For your sake, i hope you installed Open SSL in a location that you can remember!)

If this is your first time using the command prompt, here’s a quick primer on the commands that will help you get around:

• cd This command means “Change Directory”. If you are in a directory and you want to go into one of its sub-directories, use this command plus the directory name (example: cd directoryName)
• cd.. This command will pull you up one level in your directory structure
• dir Type this command to see a list of all of the files and folders within your current directory
• dir /w The /w (wide) switch spreads a directory listing across multiple columns. This is useful for seeing all the folder names at a glance, instead of in one big long scrolling list.

You may have some problems getting some of the following commands to work. A fine commenter (and Ontario resident!) named Dan Zen mentioned on the Adobe guide’s comments section that you may need to input set RANDFILE=.rnd in your command prompt before the following commands will work properly.

Generate a Signing Certificate Request File

With all of that taken care of, you can start inputting some commands to create your Signing Certificate Request file. Once you have that file, you’ll use it to ask Apple for your proper Signing Certificate file that you’ll use to identify your app.

1. Punch this command into your command line interpreter and hit the ENTER key when you’re finished:

   openssl genrsa -out mykey.key 2048

   You should see this response:

   
   

   

   
   

2. Next, type (or highlight the line, right-click, choose “Copy”, and right-click/”Paste” in the command line interpreter):

   openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest  -subj "/emailAddress=yourAddress@example.com, CN=John Doe, C=US"

3. Now, before you hit ENTER you’ll want to edit a couple of things. First, replace “John Doe” with your own name or company name. Then replace the “yourAddress@example.com” email with your own email. Then press ENTER.

   You should get a message similar to this:

   
   

   

   
   

   You just generated the Signing Certificate Request file that you’ll use to ask Apple for your Signing Certificate. The Signing Certificate Request file is located in the bin folder of your Open SSL install. It has a .certSigningRequest file extension and should look like this:

   
   

   

   
   

Obtain a Signing Certificate for Development

You have to upload your Signing Certificate Request file to the Apple Provisioning Portal to get your signing certificate.

Note: There have been instances where this upload does not work with Google Chrome. Just to be safe, use another browser like Firefox.

1. Navigate to the iOS Provisioning Portal after logging in with your developer account and click on Certificates.

   
   

   

   
   

2. Click Request Certificate.

   
   

   

   
   

   Note: If you are a team member and/or you have not paid the annual developer fee of $99 dollars, then you cannot request a Signing Certificate. Only the Team Admin – the person who has paid the development fee – will be able make this request.

   On the next screen, you will upload the Signing Certificate Request file that you generated in the previous section.

   
   

   

   
   

3. Click the Browse button and navigate to the bin folder located within your OpenSSL folder.
4. Once you have selected the Signing Certificate Request file, click Submit. Your next screen should show this:

   
   

   

   
   

5. Just hit Refresh a couple of times on your browser and you should eventually see this:

   
   

   

   
   

6. It’s your Signing Certificate! Go ahead and download it. Just to make things easier, you can save that certificate in the bin folder in the Open SSL folder, where your Certificate Signing Request file is sitting.

Convert the Signing Certificate to a .p12 File

Are you having fun yet? Yeah, me neither. We are making good progress though. The next step is converting that Signing Certificate to a p12 certificate, because Apple loves certificates.

1. From the Adobe help page, visit the link describing the process of converting a developer certificate to a p12 file. You get a list of more commands that you’ll have to punch into your trusty old command prompt.

   
   

   

   
   

2. Copy the first command (highlight the text, right-click and select “Copy” from the context menu):

   openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM

3. Open up your command prompt as I showed earlier, and navigate to the bin folder of your Open SSL directory.
4. Once you’re there, paste in the first command (right-click and select “Paste” from the context menu), and press ENTER.
5. Skip ahead to Step 3 of the Adobe help guide and copy that command. (The command in Step 2 is for Macs only.)

   openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out iphone_dev.p12

6. Once you punch in the command, enter a password and then verify that password. Make sure the password is something that you will remember. (Save it in a .txt file in that folder if you’ve got a lousy memory like me – Ed.) When you are typing in your password, the command prompt does not give you the luxury of seeing dots or asterisks to indicate how many letters you are typing in. Rest assured that the command is accepting your input.

   Note: You may get an error mentioning a “random state”. Just type in the command set RANDFILE=.rnd and it should fix the problem for you.

7. Go into the bin folder in your Open SSL directory and you should see your .p12 file. Hooray!

   
   

   

   
   

Create an App ID

Now that you have the precious file you need, it’s finally time to create your Mobile Provisioning Profile. You’ll start by setting up a unique ID for the app you’re creating.

1. Navigate back to the Provisioning Portal in your web browser to create an App ID for your app. Log in, click on Provisioning Portal, and click on App IDs.

   
   

   

   
   

2. Click New App ID.

   Note: If you have not paid the developer fee, or if you are just a team member of the Team Admin, you will not see this option. Ask your Team Admin to complete this step.

   
   

   

   
   

3. On the next screen you’ll start by writing a Description for your app, which can be anything you want. (This is what the player will see when he sees your app in the App Store. Obviously, there’s a whole marketing concern here that’s outside the scope of this tutorial. Since we’re just building a test app, i recommend you punch SOME CRAZY NONSENSE in there for your description. Take THAT, marketing. -Ed)

   Within the Bundle Seed ID (App ID Prefix) you will have various options, depending on your account status. If you are the Team Admin, you’ll have a “Generate New” option. Team Members will only see a “Use Team ID” option. (If this is not your first App, you could also choose the Bundle Seed IDs for previous project). Either way, leave it at the default.

   The Bundle Identifier lets you create a specific package for your App. The standard way to make this package is to reverse the name of your website domain. I used com.sina.ipadtest. (Our team uses com.untoldentertainment.whatever – Ed.)

   Alternately, you can use a generic Bundle Identifier by just putting an “*” in the field.

   Note: There have been cases where the asterisk does not work for some people. It is a safe bet you make a specific namespace like the examples above.

   
   

   

   
   

4. Click Submit.

   Voila – you have now created your App ID! On the next screen you will see all of the app profiles you’ve created.

   
   

   

   
   

Create a Mobile Provisioning Profile

Now that you have an App ID, you can now create your Mobile Provisioning Profile. This is the crowning touch to everything we’ve done in this tutorial so far. The Mobile Provisioning Profile glues your developer(s), your Signing Certificate, your app ID and your testing device together. Once you have this file, you’ll be able to test an app on your device.

1. Within the Provisioning Portal website, click Provisioning in the sidebar.

   
   

   

   
   

2. Click on New Profile.

   Note: You only see this option if you are the fee-paying Team Admin.

   
   

   

   
   

3. Give your provisioning profile a Profile Name.

   
   

   

   
   

4. Choose the Signing Certificate(s) that you want to use with this profile.
5. Use the drop-down list to indicate the app for which you’re creating this profile.
6. Finally, indicate the testing device you want to test it on.
7. Click Submit.

You’ll be taken to a screen that says your Mobile Provisioning Profile is pending. Just click your browser’s refresh button a couple of times until the Downloadbutton appears, and download your precious, hard-fought profile. Make sure to save it in a location you’re likely to remember.

Are We There Yet?

That was a big pile of hoops to jump through just to test an app on your device, and we haven’t even begun building the app yet! Here’s what you just accomplished:

1. You used the command line and OpenSSL to create a Certificate Signing Request file.
2. You sent that file to Apple. Apple responded by enabling you to download your Signing Certificate file. This file identifies you as the developer of your app.
3. You converted your Signing Certificate to the .p12 format.
4. You created an ID for your app.
5. You created your Mobile Provisioning Profile, the glue that holds all these elements together and enables you to test your app on an iOS device.

The good news is that you DO NOT need to repeat the steps to create your Signing Certificate for additional apps. Now that you have that file, you’ll use it to sign all of your iOS apps from here on in. Similarly, you won’t have to re-enter your developer ID or device ID for future projects (unless, of course, you gain a new team member or device). The App ID and Mobile Provisioning Profile are the two pieces that are unique to your app – you WILL need to repeat those steps for additional projects.

The next part of this tutorial series will cover the process of creating your actual Adobe AIR app using FlashDevelop, bundling it up with this mess of certificates and profiles you just built, and deploying the app to your testing device.

Continue to Part 3

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

출처: http://www.untoldentertainment.com/blog/2011/12/07/flash-to-ios-a-step-by-step-tutorial-part-3-2/

This is the third part of our tutorial series by Intern Sina on creating an AIR application for free on a PC using FlashDevelop, and deploying it as a native app on an iOS device like the Apple iPad, iPhone or iPod Touch.

Jump to other parts in the series:

• Part 1 – Sign up for an Apple iOS Developer Account
• Part 2 – Obtain your Signing Certificate & Mobile Provisioning Profile, and create your App ID
• Part 4 – Modify your project settings and test your app on an Apple device

Luke Loses His Hand

Part 2 of this tutorial was like The Empire Strikes Back. It was the crisis moment in the story of deploying a Flash project to the Apple iOS platform. It was dark, it was difficult, and Han Solo wound up frozen in carbonite. Part 3 is redemptive: with all that command line and certificate red tape out of the way, you can finally build our AS3 app using FlashDevelop. Watch closely, friends: you may spot some ewoks.

It’s a trap.

Install Flash Develop

As I mentioned earlier in the series, FlashDevelop is a FREE, PC-only coding environment that is used throughout the industry and loved by many. If you haven’t installed it, head here to download the latest version.

FlashDevelop is an IDE (Integrated Development Environment) where you can create many different types of applications from scratch. The most amazing thing about FlashDevelop is that you don’t actually need to buy Adobe’s Flash Professional software to create Flash (swf) content. FlashDevelop has amazing, time-saving features like importing code libraries on the fly, and numerous awesome templates. At the time of this writing, the latest edition of FlashDevelop is 4.0.0. This version of FlashDevelop contains a template for Mobile AIR applications which you can use for iOS and Android development. In this tutorial, you’ll use the iOS version of the template.

Create a Merged SDK Folder

There are two SDKs (Software Development Kits) you’ll need to deploy Flash content to the iOS platform: Flex and AIR. Depending on the version of FlashDevelop you install, these two SDKs may already be included in the download. You’re going to download them both anew and put them in a single folder. That way, if you mess anything up, you can take off and nuke the site from orbit instead of messing up your main FD install. It’s the only way.

1. Download the latest AIR SDK (which, at the time of this writing, was v3.0)
2. Download the Flex SDK.
3. These two packages download as .zip files. Extract them wherever you like on your computer – just make sure you know where you put them.
4. Once you have both SDK’s extracted to separate folders, copy everything in the AIR SDK folder into the Flex SDK folder. Windows will ask you if you want to overwrite certain files. Say “yes” to everything.

   
   

   

   
   

   You now have a folder with the Flex SDK and the AIR SDK merged into one. This is a Good Thing™.

Point FlashDevelop to the Flex SDK

In order to compile (build and execute) your app, you have to point FlashDevelop to the merged SDK folder that you just created.

1. Open up FlashDevelop and hit F10 or go to Tools->Program Settings in the menus.

   
   

   

   
   

2. In the Program Settings menu, click on AS3 Context.
3. Find the Language section, and the Flex SDK Location line within it.

   
   

   

   
   

4. Click the ellipsis button at the end of that line, and navigate to the merged SDK folder.
5. Click Close to commit the change.

Set Up Your Mobile AIR Application

Once you have downloaded and installed FlashDevelop, open it up and you should see it in all its glory:

To begin with, you’ll need to create a new FlashDevelop project, which is a group of folders governed by a file filled with metadata about your project.

1. Create a new project by clicking Project -> New Project in the menu.
2. Now you will see a screen with a multitude of options. These are all project starter templates that FlashDevelop has for you to use. The one you want is the AIR Mobile AS3 App. Select this template, choose a location on your hard drive to save it, give a name to your project, and hit OK.

   Note: A package name is not required but the option is there if you’d like to use it.

   
   

   

   
   

   After you hit OK, FlashDevelop creates a number of folders and files for you, including:

   • The .as3proj file, which is a FlashDevelop project file filled with metadata that keeps track of various aspects of your project.
   • The bin folder. This is where your finished files end up.
   • The lib folder, where you can put your “construction” files and artwork.
   • The src folder, which contains your .as AS3 code files.
3. Once you’ve created your project file, FlashDevelop starts you off with a blank screen. To open up your code, click on the src folder in the Project sidebar on the right. (The Project sidebar lists your computer’s actual directory structure so that you can access your Actionscript files quickly and easily.)
4. Inside the src folder, double click the Main.as file to open it. This is your project’s point of entry, where you can start writing the code for your app.

   
   

   

   
   

5. Push the F5 key on your keyboard, or the click the little play button at the top-middle of FlashDevelop to compile and run your project.

   
   

   

   
   

   The first compile will take little bit of time, but any compile after that should be quick, because the compiler builds on an as-needed basis, compiling only your most recent changes (as opposed to Flash Professional, which compiles your ENTIRE project every single time. Bleh!). Once you run your new project, the FlashPlayer should pop up and you should see a blank screen. Luckily, this is exactly what we want. As of right now, this is your App.

   
   

   

   
   

Hello, Planet

This is nice and all, but let’s try to the write a simple message on screen so that when we are testing, we know it actually works. Let’s write “Hello Planet” on-screen.

1. Just below the green commented line where it says //entry point in your Main.as file, copy and paste these lines into your code:

   var tf:TextField = new TextField();  
   var format:TextFormat = new TextFormat();  
   format.font = "_sans";  
   format.size = 48;  
   tf.defaultTextFormat = format;  
   tf.text = "Hello Planet";  
   tf.width = stage.stageWidth - 20;  
   tf.x = 10;  
   tf.y = 10;  
   addChild(tf);

   
   

   

   
   

2. Click the compile button (or press F5). Did it screw up? Good. There are a couple more things you have to do before you are ready to compile without errors.
3. In your code, click to place your cursor carat on the word Textfield and hit Ctrl+Shift+1 on your keyboard. The word turns blue. If you scroll to the top of the class, you’ll notice that there is an extra import line at the top of your code. CTRL+SHIFT+1 is a special feature of FlashDevelop that does code completion. In this instance, CTRL+SHIFT+1 automatically handles your import statements for you. You need to import the TextField code with this statement if you want your TextField to work.
4. Use CTRL+SHIFT+1 on the TextFormat word and you should see this:

   
   

   

   
   

5. Now click Compile (or press F5).

   
   

   

   
   

   Thar she blows!

   (It works, but it’s no Angry Birds. – Ed.)

Bust Out the Hardware

This is moving along nicely. You:

• Installed FlashDevelop, a free and open-source IDE for creating Flash and AIR content
• Downloaded and sunk the latest AIR SDK and Flex SDK into a single, merged folder
• Pointed FlashDevelop to the Flex SDK to use its superior compiler
• Created a new FlashDevelop project using the Mobile AIR application template
• Wrote and compiled a new Hello Planet AIR app that you can deploy to a testing device

In the next part of the tutorial, you’ll fine-tune FlashDevelop and modify a number of settings and batch files to create the magical, mystical .ipa file, and you’ll see that file running on your testing device.

Continue to Part 4

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

출처: http://www.untoldentertainment.com/blog/2011/12/14/flash-to-ios-a-step-by-step-tutorial-part-4/

This is the fourth part of our tutorial series by Intern Sina on creating an AIR application for free on a PC using FlashDevelop, and deploying it as a native app on an iOS device like the Apple iPad, iPhone or iPod Touch.

Jump to other parts in the series:

• Part 1 – Sign up for an Apple iOS Developer Account
• Part 2 – Obtain your Signing Certificate & Mobile Provisioning Profile, and create your App ID
• Part 3 -Use FlashDevelop to build your mobile AIR app

In this section of the tutorial, the rubber meets the road. You’ll make all the finicky adjustments to FlashDevelop and the AIR bundling files to get your Hello Planet app up and running on your testing device.

Point FlashDevelop to the Merged SDK Folder

Now that your (cr)app is successfully up and running, you have to make a few tweaks and adjustments to FlashDevelop. You’ll start by telling FlashDevelop all about that merged SDK folder you created in Part 3.

1. In the Project panel on the right, you’ll see a file called AIR_iOS_readme.txt. Double click that file to open it.

   This txt file lists a number of settings needed to get your ipa file working. The ipa file is the Holy Grail- the native app file that you’ll send to your testing device to see everything working properly. A window pops up with a bunch of options.

2. Click the Project Properties button at the top of the Properties Panel (alternately, you can use the menus to navigate to Project>Properties).

   
   

   

   
   

3. Change the version of your AIR SDK from 2.7 to 3.0 because (at the time of this writing), that is the latest version.

   
   

   

   
   

4. Click on the SDK tab, and click Manage.

   
   

   

   
   

5. On the next screen you will see list of installed Flex SDKs. Click the ellipsis (…) button at the end of that line. An InstalledSDK Collection Editor window pops up.

   
   

   

   
   

6. You’re going to point FlashDevelop to the location of our recently-downloaded Flex SDK (the same folder that contains both the Flex SDK and AIR SDK that you created earlier in this tutorial). First click the Add button, and then click on the Path line to get another ellipsis. Click on THAT ellipsis to browse your computer.

   
   

   

   
   

7. Once you have clicked the ellipsis button, a Windows File Browser appears. Navigate to the merged SDK directory. Select that folder and click OK.

   
   

   

   
   

8. Click OK again to exit the InstalledSDK Collection Editor window.
9. Click Close.
10. In the drop-down menu, you should see the Default option. Click on the drop-down list and choose the SDK location you just told FlashDevelop about.

    
    

    

    
    

11. Click Apply.
12. Click OK. Voila! Your SDK is now setup for your FlashDevelop Project.

    Let’s just test it out quickly to see if it works. The code you pasted in the previous tutorial prints out the words “Hello Planet” within your app. Well, I’m going to change mine to say “Sina is Cool”, just because I can, and also because I AM COOL. (You may be tempted to replace “Sina” with your own name. Please don’t, because uh … your code won’t work.)

    Your resulting app should look like this:

    
    

    

    
    

    A beautiful sight, isn’t it?

    (At this point, Sina actually is pretty damned cool. – Ed.)

Delete the Extra Icons Folder

Now you have FlashDevelop set up to create mobile-formatted AIR apps. Your app compiles, and you have your Mobile Provisioning Profile and your .p12 Signing Certificate waiting in the wings. All you need to do is combine all these amazing files together to create the Holy Grail .ipa file.

Ah – this is truly the .ipa of a FlashDeveloper.

An .ipa file is like the program file – the Windows executable (.exe) – that you need to test your iPhone/iPad App on a device, and ultimately upload it to the Apple App Store.

The creators of FlashDevelop 4 made a minor error when they created the Mobile App template: the template generates a duplicate icons folder that will cause a conflict when you try to bundle your .ipa file. You need to get rid of this extra folder to make sure your .ipa file to builds properly.

1. Look in the right sidebar that lists your files and folders. You’ll see a folder called bin. (This is one of the folders that FlashDevelop created for you automatically when you created your project.)
2. Click on the little plus sign beside the bin folder to expand it. You will see a folder calledicons tucked inside. Right-click the icons folder and click Delete. Problem solved.

   
   

   

   
   

Integrate Your Cert Files

Copy your Mobile Provisioning Profile and your .p12 Signing Certificate into the certs folder of your project. If you’ve been following along with this tutorial from the beginning, you probably saved these two files in the bin folder of your OpenSSL install.

Once the files are in the right place, they should show up in your Project sidebar:

To create the .ipa, you have to edit a couple of lines in a batch file so that the app compiles properly. Don’t be scared: a batch file (.bat) is simply a text file that runs a script when you double-click it in Windows. You can open up a batch file by using a text editor of any kind. Since you’ve already got FlashDevelop open, it makes a lot of sense to use it to edit the batch files.

In the following screenshot, I’ve opened up the ReadMe file that describes the iOS compilation steps. Step 5 talks about editing a batch file. Take a read if you’re nervous.

In the sidebar, find the bat folder and expand it.

Double-click the SetupApplication.bat file. The file should open in FlashDevelop.

In the batch file, you should see some green text that says ios packaging, and a bunch of setoptions beneath it. This is where you have to add or adjust some text. In the IOS_DEV_CERT_FILE line, type the path to your .p12 Signing Certificate file (the one you just copied into the certsfolder). You only have to use a relative path (one that describes where the file is in relation to the compilation target), so just copy what I have and you should be fine:

cert\iphone_dev.p12

In the IOS_DEV_CERT_PASS line, you have to enter password that you set when you made yourSigning Certificate. (Don’t come crying to me if you don’t remember it – i told you to write it down – Ed.)

In the IOS_PROVISION line, type the name of your Mobile Provisioning Profile.

All in all your SetupApplication.bat should look like this:

Note: Make sure you have the path properly setup as well as the same exact filename. If you have any sort of typo, it’s not going to work.

Get Your Ducks in a Row

You’re almost there! All you have to do is edit the SetupSDK.bat file.

1. Double-click the SetupSDK.bat file to open it in FlashDevelop.
2. At the top of the file, you’ll see a line that says path to Flex SDK in green. Right under that line is the path to the SDK. However, it’s not pointing to the merged SDK folder that we created earlier. Replace the default path with the path to your merged SDK folder. It might look similar to this:

   
   

   

   
   

   Note: Remember to save often!

3. Open the application.xml file. This xml file is the descriptor file for your application. You have to double-check to ensure everything in there is correct. Everything from your App name to the version of your App is located in this file.

   
   

   

   
   

4. Change the version number at the end of the xmlns parameter of the root application node to the version of AIR you’re running. In this case (and at the time of this writing), it’s 3.0.
5. In the id node, enter the package name that you created for your Mobile Provisioning Profile.

   
   

   

   
   

   If you don’t remember what your Bundle ID was, go to the Provisioning Portal on the iOS developer website and click on Provisioning.

Compile Time

After all that, you’re finally ready to compile your .ipa file to test on an iOS device.

1. In the sidebar, right-click the PackageApp.bat file and select Execute.

   
   

   

   
   

2. You’ll see a bunch of options. Since this is only a test, you can pick the fast test option. This option will quickly create an .ipa file for you to throw onto your iWhatever. Once you choose fast test, sit back and relax.

   
   

   

   
   

3. Look in the dist folder in the sidebar. You now have an .ipa file!

   
   

   

   
   

Test Your New App

Take a moment and soak in what you’ve accomplished. You’re in the final steps of your epic journey of iEnlightenment. All you have to do now is load the hard-fought .ipa file up on your iWhatever.

I made a copy of my Mobile Provisioning Profile and my .ipa file and put them in a separate folder. I suggest you do the same as a backup measure … better safe than sorry. Now let’s get that sucker onto your device.

1. Plug in your iPhone/iPad/iPod Touch/iEtCetera and let it sync in iTunes.
2. After it’s synced, go to Library -> Apps.

   
   

   

   
   

3. To add your Mobile Provisioning Profile, click and drag it from your folder into the iTunes Library.
4. Follow the same process to add your .ipa file.

   Note: You have to add your Mobile Provisioning Profile before you add your .ipa file! If you add these files in the wrong order, you may get errors!

   
   

   

   
   

   After dragging your .ipa file into iTunes, you’ll see a generic App icon that FlashDevelop/AIR generated for you.

   
   

   

   
   

5. In the left sidebar, click on Devices -> Your iPad/iPod/iPhone.
6. Click on the little Apps button at the top of iTunes. You’ll see a screen that displays all your Apps. Within that screen, you should be able to find your App (you may have to scroll around a little to find it).
7. Click the Apply button to transfer everything to your device.

   iTunes will go through the syncing process, and will add your App to your device. You can click sync a few more times just to make sure everything is good – iTunes doesn’t always behave perfectly on a PC.

   Note: If you get an error saying that the App failed to install, your Bundle ID or something within your Application.xml may be wrong. Double-check everything! There is no harm in deleting your App and from iTunes and transferring it again. You can also overwrite yourMobile Provision Profile with a corrected one.

   DOUBLE NOTE: If you change anything in your project, you must compile your .ipa file again, because it contains all the new information necessary for iTunes to run your App.

8. Fire up your iPad/iPhone and BAM!

   
   

   

   
   

   It’s so … beautiful. *sniff*

To the App Store … and Beyond!

In this section of the tutorial, you:

• Pointed FlashDevelop to your merged AIR/Flex SDK folder
• Corrected an error with the Mobile AIR template by deleting an extraneous icons folder
• Copied your Mobile Provisioning Profile and your .p12 Signing Certificate into your project and pointed FlashDevelop to them
• Pointed the SetupSDK.bat file to the merged SDK folder
• Modified the application.xml descriptor file to match your project settings
• Compiled your project and created an .ipa file
• Copied your .ipa file and Mobile Provisioning Profile into iTunes
• Synced your app and ran it on your testing device!

With your project set up, you can continue developing your application until you have an amazingthing that you’re ready to foist on the app-buying public. There are still a few more things you need to know to deploy your app to the live iTunes store. What about that generic AIR icon? Wouldn’t you like to see something nicer in its place? And how do you get your .ipa file in front of the app-approvers at Apple to get it to show up in iTunes? And are we finished with certificates and profiles, or is there more to do?

Short answer? There’s more to do.