Tag Archives: Tutorial

Spellirium Minute Episode #0: Tripping the Oculus Rift

The first in our series of development vlogs (or “video blogs”, if you’re like me and are uncomfortable with “v” and “l” appearing in such unnaturally close proximity) is an exploration of the very, very two-dimensional Spellirium on the very, very three-dimensional Oculus Rift.



The Oculus Rift is a Kickstarter-supported pair of shielded goggles that beams two slightly offset images of a video game directly into your eyeholes, and tracks your head movement to make it appear as though you’re actually looking around in 3D space. Following on the heels of sensational reaction videos like grandma tripping balls on the Oculus Rift, this one was intended to be a parody video, but judging by our YouTube and Kotaku comments, some viewers don’t quite get the joke.

A Few More Minutes

This is the first in a series of dev diary videos, the majority of which Robby “the Doogs” Duguay and i screencapped during one wild Thursday session, the outtakes of which will surely be released as B-sides when they’re trying to milk posthumous Christmas albums out of us. i’ve written a LOT of content on Spellirium over the past five years; these videos highlight the most interesting content from those five years, except video, so better.

Check out the growing Spellirium Minute playlist, and subscribe to our YouTube channel so you don’t miss any!


Word.

5 Steps to Organically Growing Your Games Portal

This guest post is by Ola Rogula of Doll Divine Dress Up Games, who i met a few years back at the Casual Connect games conference. A lot has been written about the so-called “big” successes in the games industry; certain titles and developers get the lion’s share of the press, the fame, and the love. But meeting Ola and others like her has taught me an extremely valuable lesson: that even while flying under the radar with a product that many people have never heard of (or would even care about), you can still lock into a niche audience and provide a high quality, valuable product or service to them … and make bank.

Sit back, and let Ola showya how it’s done. (Text by Ola, pictures by Ryan)

There are, of course, multiple ways to grow a successful Flash games portal. However, I’m pretty proud to say that I grew mine with a $0 advertising budget and no link building. The site grew entirely from organic referrals. Links and ad campaigns are great too, but if you want to know how to give your portal the ability to grow itself organically, here are the things that worked for me:

1. Mind-Blowingly Good Content

I hate to say this, but if you can’t make games yourself and you don’t have thousands to play with, you face quite an uphill battle. Great games are hard to come by and they are going to be both the biggest source of free advertising for you, and the biggest reason for people to come back to your site.

If you have a lot of money, you can make aggressive bids on games. This is the most straight forward way to fill your site with quality content. Of course, you’re paying the developer to place your link and logo into the game, so that word of your site spreads with the game. Flash Game License is the logical place to start, although I personally have had more luck with seeking out amateur developers through deviantArt. The biggest downfall of this strategy is that you’re always at the mercy of other people. I could never operate my site fully this way because I haven’t been able to find enough good developers to hire for my needs.

Thank you for joining us today for the Consortium of Developers who are Worth a Damn. Please fill in all the rows.

Alternately, you can be dirt poor as long as you know how to draw and program. Being able to create your own quality content is, in my opinion, the best way to make a splash. Of course, it’s also implied that you don’t just do these things; you’re good at them.

There is also an elegant middle road solution. If you have some money to work with, and are a good programmer, it is very cost effective to hire out for artwork. There is literally a world of amazing artists out there who would love to get paid for their drawings. If you are an artist who needs a programmer, the situation is a bit trickier, and usually more expensive. I recommend biting the bullet and learning to code in Flash yourself.

Do not heed words spoken with plastic lips. – Confucius

I must stress that this is the most important point by a long shot. I grew my site almost entirely on my in-game links and word-of-mouth; both products of quality content creation.

2. Dabble

I have come to accept that it is impossible to predict what will be a “hit”. The only thing you can do is try, take notes, and try again. I can very much attest to what my friend, Andy Moore, calls the “1 in 10 rule”, asserting that about one in ten games is a hit. A lot of the rules he mentions for getting a game sponsored apply just as well for creating games for your own portal. Some will spread like wildfire across other sites, while others are left to rot.

Andy Moore: always a hit.

For example, I was very disappointed when my Vampire Maker was a total flop, despite having been successfully timed with Twilight! The Kitten Maker, however, took girl gaming sites by storm. Before these, I had attempted two adventure games which got an even worse reception. In these cases, the amount of time spent on development had no correlation to success. You have to be prepared to put out multiple projects, and you have to be prepared for most to flop. However, this is a beautiful time of self-discovery… It’s the time when you and the world flirt to figure out exactly how you best fit together and what type of projects you should be putting out.

(Vampire Maker may be missing the ability to chew the living foetus out of a labouring mother’s stomach with your fangs? You know – for Twilight fans. Just sayin’. – ed.)

3. Create a Brand

Once you complete #1 and #2 and create a game that has spread to other sites, people will click on your logo to get more of the same. What is “the same” in your case? What do you offer? Based on which of your games resonated best, you need to decide on an adjective and a noun. Are your games funny? Very polished? Imaginative? Accessible to the visually impaired? You have to pick an angle and promise to continually deliver it to users. What are you making? Political satires? Intriguing puzzles? Tower Defense games? Match your adjective with your skills and your noun with your interests. In my case it is: intricate, fantasy doll makers because I love fantasy and pay intense attention to detail. If your interests lie in an already expansive genre, you’d better have a good adjective to go along with it. Of course, you can span multiple genres and wield multiple adjectives, as long there’s a united theme.

Is “shitty” a viable descriptor?

Create your site around this theme. Choose the name and colours accordingly. Contrary to popular belief, the site doesn’t have to be fancy or complex. A lot of people lose money on site design early on which is silly. All you need is a banner, thumbnails, and pages for the games. Anyone can make this happen, especially with the amount of templates online. Orisinal.com is a great example of a simple yet effective layout. The #1 need of users is to find what they’re looking for quickly. Cater to that first.

Quite appalling, in my opinion, are the free scripts that abound which auto-fill your site with games from external sources. How exactly is using a script found all over the internet that fills your site with games that everyone else is posting supposed to give you an edge over the competition? After reading this article, are you itching to get back to playing games on that awesome auto-filled site you love? No? Think about that.

We’re using a purchased WordPress theme the includes one of those scripts, because website design and coding are not Untold’s strong suits. We’re not using that script to automatically siphon games, but have instead been selecting and inputting each game by hand. The problem is that the the theme we purchased was poorly built, and it opens multiple unnecessary connections to our database. The end result is that when a small handful of people visit our portals, our server traffic and memory usage go bananas. This fact alone (and my inability to fix it myself) is the reason why i haven’t worked more diligently to grow traffic on Untold’s games portals. Caveat emptor. -ed.

4. Be Nice to Your Search Engine

(At the time of writing, “search engine” is synonymous with “Google”) The main advice usually given for optimizing Flash websites is: stop using Flash. This, of course, is useless advice for running a Flash games portal, although you should certainly avoid using a Flash-based navigation system. Google can’t see or play your game so it is your job to translate its greatness to the bots. Yes, Google can now crawl the text inside files, but how are the words “Next”, “Play” and “Jump!” supposed to emulate your top-notch graphics?

As for any site, first complete all your basic SEO. Use descriptive text, not just images, when linking within the site. Use a descriptive, yet to-the-point, meta title that includes two good key phrases. Write a robust meta description. Name your pages with descriptive file names so the URL is people-friendly. And finally, find a way to include a large chunk of appropriate text on the page. Describe your game.. the creation process.. the inspiration. Include a set of instructions. You have to put into text what Google cannot see.

Allowing fans to leave comments is a double-edged sword. Users can be an SEO godsend, filling the site with golden keywords and extensive commentary. They can also be a source of unprofessionalism and negativity. You must analyze your demographic and decide if they’d hate or relish the babble of other users. I took the unique approach of only allowing paid members to leave comments. This hasn’t removed unprofessionalism nor negativity, but it has completely removed all external advertising. It seems even as little as $1 per month is enough to detract spammers. It has also kept the community much smaller and respectful of each other.

This moment of clarity courtesy of xkcd

5. Monetize That S***

Or rather, don’t over-monetize that s***. I know it can be tempting. Flash portals make very little money per user. Mine pulls in about one cent per user per month. When attempts to expand aren’t working, it’s tempting to shift to maximizing profits from the existing users. Over-monetizing the site can drive users away, further lowering revenues. I’m sure I don’t need to explain why increasing income through something that decreases traffic is the beginning of the end.

Flash portals make their money mainly through advertisements around the site and in-game ads. Flash developers can make a lot of short-term cash by putting their games up for bid, but you’d better kiss that avenue goodbye if you want to grow your own portal.

Website ads must be placed with taste. I recommend no more than one ad unit above the fold on the main page. The Google algorithm agrees. You care about the games first and the money is just a nice bonus, right? Hopefully this is true, but even if it’s not, it’s how you want your site to look. Placing an ad unit above or beside your logo exposes where your priorities lie. You want to make sure that all the things on your site that the user might find interesting are clearly visible, and the ad is just a last case scenario for their clicking pleasure.

But Ola – how am i going to earn a steady seventy-three cents a month without placing ads absolutely everywhere? -ed.

People have grown accustomed to one preloader ad and will generally sit through it. However, if you’re just starting out, you need every edge over the competition and sparing the users the annoyance of video ads is a commendable one. The big advantage of in-game ads is that they spread along with your game as/if it goes viral. But again, even on other sites, I recommend giving your games the ad-less advantage. A static, silent, in-game ad that is visible during the true duration of the loading is acceptable (many ads simulate a loading bar which makes the user wait even after the game has loaded). And don’t even think about layering multiple loader ads over each other. It’s a lovingly hand-crafted creation, not an onion.

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

Flash to iOS: A Step-by-Step Tutorial

This is the fifth 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:

Distribution Certificate

Now that you’ve tested your app and it’s to your liking, guess you want to put it up on the App Store? Never fear, my friend! I will now show you how to get your app uploaded on the App Store so the whole world can ignore it and buy Angry Birds instead.

This process of distribution is a bittersweet one. It’s sweet because it’s extremely similar to the development process that you just went through, so you should be familiar with the convoluted certificates and hoops you have to jump through at Apple’s pleasure. It’s bitter because it’s extremely similar to the development process that you just went through.

Groundhog Day

Something about this seems awfully familiar …

Enough talk. Let’s get cracking!

Generate a Signing Certificate Request

Remember that OpenSSL program that you installed in Part 2 of this tutorial? You have to open that bad boy up again to create another Certificate Signing Request. Now, it is possible to just use your old Signing Certificate – however, just to be super clear and to avoid any confusion or difficulty, we’re going to create another one.

Note: We’ll use this new Signing Certificate Request to get a Distribution Certificate rather than a Development Certificate.

  1. Open a command prompt window. You can do this by clicking the Windows Start button and typing in cmd in the search field. Alternately, you can also hold the Windows key on your keyboard and hit the “R” key (for “Run”), then type cmd and hit Enter.

    Windows CLI

  2. Once you are in the command prompt, navigate to your Open SSL bin folder. Depending on where you installed it, you will have to navigate to a different path than in this example. (i hope you installed Open SSL in a location that you can remember!) Check Part 2 if you need a refresher on Windows CLI (Command Line Interpreter) commands.

    Open SSL folder

  3. Punch this command into the CLI and hit the ENTER key when you’re finished:
    openssl genrsa -out mykey.key 2048

    You should see this response:

    Response

  4. Next, type (or highlight the line, right-click, choose “Copy”, and right-click/”Paste” in the CLI):
    openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest  -subj "/emailAddress=yourAddress@example.com, CN=John Doe, C=US"

    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. Press ENTER.

    You should get a message similar to this:

    Response 2

    You just generated the Signing Certificate Request file that you’ll use to ask Apple for your Distribution 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:

    Signing Certificate

Obtain a Signing Certificate for Distribution

You have to upload your Signing Certificate Request file to the Apple Provisioning Portal to get your Distribution Signing Certificate. Onward.

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 Apple iOS Provisioning Portal within the Dev Center.

    Apple Provisioning Portal

  2. Log in with your developer account and click on Certificates.
  3. Click on the Distribution tab.

    Apple Provisioning Portal

    Note: In our previous tutorials, you requested a certificate from the Development tab. An app signed with a Development certificate cannot be successfully submitted to the Apple App Store.

    If you have an old Distribution Certificate because you’ve made a prior app, and you’d still like to follow along, you can go ahead and Revoke it. Revoking the Certificate will not affect your apps that are already on the App Store, because the Certificate is primarily used during the upload process so that Apple can identify you.

    Note: I recommend revoking an existing Certificate because Apple seems to issue only one Certificate per Team Agent. You must revoke any existing Certificate to be able to request another. Why is it set up like this? I have no idea.

    Revoke your Apple Signing Certificate

  4. If you don’t have a pre-existing Distribution Signing Certificate, you can just go ahead and click Request Certificate.

    Request your Apple Signing Certificate

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

    Request

  5. Click the Browse button and navigate to the OpenSSL bin folder.
  6. Select the Signing Certificate Request file and click Submit. When you are finished, you’ll see your Distribution Signing Certificate ready to download from the web page.

    Your Apple Signing Certificate

Don’t download your Distribution Certificate quite yet. You still need to create an App ID and a Mobile Provisioning Profile.

Create a New App ID

When deciding what you want your App ID to be, you have two choices:

  • Create an entirely new App ID
  • Use the Existing App ID that you create in Part 2

If you want to use your existing App ID, then just skip to the next section. If for some reason you don’t like the name of your App ID, go ahead and make a new App ID, following the steps outlined in Part 2.

Create a Mobile Provisioning Profile for Distribution

Now that you have an App ID, you can create your Mobile Provisioning Profile.

  1. Within the Provisioning Portal website, click Provisioning in the sidebar.
  2. Click the Distribution tab.

    New Provisioning Profile

    In previous tutorials, you created a Development profile for testing. You won’t be able to upload your app to the Apple App Store unless you create a Distribution profile, so make sure you select the correct tab.

    You can either create a new Provisioning Profile, or modify an existing one. Modifying an existing profile if you want to switch between App Store and Ad Hoc distribution. If you’ve never created a Distribution profile, read on. Instructions for modifying a profile are in the section following.

  3. Click on New Profile.

    New Provisioning Profile Button

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

  4. In the next section, you’ll have to fill out a bunch of options. The first option is the Distribution Method. As you can see, you can choose between App Store and Ad Hoc.
    • Choose App Store if you are completely satisfied with your app and you want to submit it to Apple for review. If all goes well, then your app will be released whenever Apple deems it worthy.
    • The Ad Hoc option can be thought of as a closed beta for your app. When you choose Ad Hoc, you are able to release your app to a maximum of 100 people, and only they will have access to it. Your App will NOT appear in the public App Store if you choose Ad Hoc.

    Note: Notice when you choose App Store, the “Devices” option is greyed out. When you choose Ad Hoc, it allows you to choose a number of devices that you have registered. The App Store option releases your app on the public App Store, so it doesn’t make sense to target specific devices.

  5. Your Profile Name is the name that you want for your Provisioning Profile. The Distribution Certificate that you created should be visible here.
  6. Finally, you have to choose which App ID with which you want to register your Provisioning Profile.

    Profile Options

  7. Click Submit.
  8. You should ee a list of the Provisioning Profiles that you’ve created. Click download on the Provisioning Profile that you just created, and save it to you computer.

    Save Your Provisioning Profile

Modify your Provisioning Profile

Note: If you’re not modifying an existing Provisioning Profile (say, from Ad Hoc to App Store), skip over this section.

  1. Within the Provisioning Portal website, click Provisioning in the sidebar.
  2. Click the Distribution tab.

    New Provisioning Profile

  3. Click Modify on the Provisioning Profile that you want to reuse.

    Modify Provisioning Profile

  4. Switch to either Ad Hoc or App Store. The distinction between these two options is explained in the preceding section.

    Edit Provisioning Profile

  5. Click Submit.
  6. You should see a list of the Provisioning Profiles that you’ve created. Click download on the Provisioning Profile that you just modified, and save it to your computer.

    Save Your Provisioning Profile

Download your Distribution Certificate

You just need to download the Distribution Signing Certificate that you created at the top of this tutorial, and then you are ready to bundle your .ipa file to submit to the App Store.

  1. Click on the Certificates section in the sidebar.
  2. Click the Distribution tab.

    Apple Provisioning Portal

  3. You’ll see that your Distribution Signing Certificate is ready to download. You can also see that it contains the Distribution Provisioning Profile that you just made.

    Your Certificate is Ready

  • Click download and save the file to your computer. Just to make things easier, you can save that certificate in the Open SSL bin folder, where your Certificate Signing Request file is sitting.

    Hooray!

    Note: Make sure not to get confused between your Development Certificate and Profile, and your Distribution Certificate and Profile. You won’t be able to upload your app to the App Store if you accidentally use the Distribution set of certs in these next steps.

    Convert the Signing Certificate to a .p12 File

    You’ll have to perform the .p12 conversion on your Certificate again, as you did in an earlier tutorial. Here are the steps:

    1. Open up your command prompt.
    2. Navigate to your Open SSL bin folder.
    3. Copy and paste this command:
      openssl x509 -in distribution_identity.cer -inform DER -out distribution_identity.pem -outform PEM

      After you enter that command, you’ll see a .pem file show up in your OpenSSL bin folder.

      .pem file

    4. Copy and paste this command in the CLI:
      openssl pkcs12 -export -inkey mykey.key -in distribution_identity.pem -out iphone_dev.p12

      Note: These are the exact same commands that you used for our Development Certificate in an earlier tutorial, except that the file name has been changed from “development” to “distribution”.

    5. After 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! – Ed.)

      Note: Remember that 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.

    6. Navigate to the bin folder in your Open SSL directory and you should see your .p12 file. Hooray!

      .p12 file

    Hello, Planet

    As we mentioned off the top, much of this is familiar territory. With all of your Distribution certs sorted out, you’re ready to bundle up your final .ipa file and foist it onto an unsuspecting public. In the next tutorial, you’ll follow familiar instructions to bind your certs to your .ipa, and experience that magical moment of uploading your app for Apple’s approval (followed shortly by that equally magical moment of getting your app rejected cuz BEWBZ.) Let’s do it!

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

    Flash to iOS: A Step-by-Step Tutorial

    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:

    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).

      FlashDevelop 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.

      FlashDevelop Project Properties Options

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

      FlashDevelop Project Properties Options - 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.

      FlashDevelop Project Properties Options - Flex SDK Location

    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.

      Add

    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.

      Navigate to your merged SDK folder

    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.

      Choose your Merged SDK profile from the drop-down menu.

    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:

      Breaking: Sina is cool.

      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.

    The .ipa file is the Holy Grail of this tutorial series

    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 called icons tucked inside. Right-click the icons folder and click Delete. Problem solved.

      Delete the icons folder to avoid a conflict later

    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:

    You put yer WEED in there.

    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.

    iOS compilation readme

  • 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 set options 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 certs folder). 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 your Signing 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:

    SetupApplication.bat

    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:

      SetupSDK.bat

      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.

      Application.xml

    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.

      Application.xml changes

      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.

      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.

      Choices

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

      Success!

    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.

      iTunes

    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!

      Drag and drop your files into iTunes

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

      Generic Apple App Icon

    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 your Mobile 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!

      AIR on iOS

      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 amazing thing 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.

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

    Flash to iOS: A Step-by-Step Tutorial

    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:

    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.

    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 4

    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.

      Merged SDK folder

      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.

      Program Settings

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

      AS3 Context

    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:

    FlashDevelop 4 Interace

    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.

      FlashDevelop 4 Project Templates

      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.

      FlashDevelop 4 Main.as

    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.

      FlashDevelop 4 Compile Button

      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.

      FlashDevelop 4 Blank 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);
      

      Code Entry Point

    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:

      Import Statements

    5. Now click Compile (or press F5).

      Hello Planet

      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