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.

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.

   

Integrate Your Cert Files

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.

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

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

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.

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 differently depending 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.

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 games written 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)

Introducing Sina

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 maintain FlashDevelop and the wonderful community behind it. I would also like to thank Lee Brimelow and Adobe 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 Center and register for “free”.

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

What’s New in Version 2?

Absolutely nothing! The Unity 3.x version is identical to the first edition, save for the fancy new cover by UbiSoft Toronto game artist Dan Cox. The occasional errata from the first edition have been corrected, and the screenshots have been updated so that they match Unity’s subtle interface changes. i’ve included two new spaceship models by Dan in Chapter 11 (the same ones you see on the cover), which i’ll make available to owners of all versions.

The first chapter was updated to discuss the BootCamp demo instead of the original Island Demo, which stopped working reliably as of version 3. Then, just as we were ready to release the book, Unity launched v3.4, which included yet another demo and more subtle UI changes. So Unity 3.x Game Development by Example has been lovingly (?) re-written TWICE to bring it in-line with what those nutty funsters at Unity have been up to.

Should i Buy It?

Yes you should.

i made the rather bold claim that the first edition of the book may very well cure cancer. i realize now that this was entirely irresponsible of me, and i regret my error in judgment. i can say now with all certainty that version two is guaranteed to cure cancer, or your money back. Please contact Pack Publishing for all refund inquiries, including a post mortem certificate from your next of kin.

Praise for Unity 3D Game Development by Example (from actual people)

“A great resource for learning Unity.” – Michael Todd, indie game developer

“Creighton’s book teaches both Unity and good design practices while staying hip, funny, and even controversial. A must read!” – Ryon Levitt, Game Designer

“I went from unemployed to working full-time in California!” – Mohammed Al-Sahaf, game school graduate

“I didn’t loose brain cells when I read this book.” – Brent Arnold, Mobile Developer

1. decrease the amount of time the player has to complete a goal

   

   at the climax of Super Metroid, the player has to escape the ship before it explodes

2. increase the speed or power of obstacles

   

   Pac Man’s ghost enemies speed up as the game escalates

   

   Bubble Bobble introduces the invincible Baron von Blubba when the player dawdles

3. decrease the number of “chances” or “tries” the player has to complete a goal

   

   Donkey Kong gives the player a set number of tries (“lives”) as the game escalates before the machine requires another quarter and the player has to start from the beginning

4. increase complexity

   

   as Bejewelled escalates, it introduces extra gem colours, which makes finding matches more challenging

5. increase the grind – an action the player must perform repeatedly to be successful

   

   Gran Turismo introduces endurance races where the player must race for a set number of real-time hours to win

   

   World of Warcraft confronts the player with increasingly more difficult monsters, which forces the player to repeatedly kill weaker monsters to improve his stats

6. decrease the amount of visual information available to the player

   

   The Legend of Zelda periodically turns out the lights, and requires the player to doggedly re-ignite lamps

7. increase the quota – the number of small goals the player must complete within the time limit. This is really just a variation on decreasing the time limit.

   

   As each level progesses, Diner Dash increases the number of customers you have to serve

Lightning Bolt! Lightning Bolt!

i learned an interesting tip about escalation. i wish i could credit my source, but i have a memory like a sieve . (Mother Nature escalates my life by increasingly turning me into a doddering old fool.) The tip is to escalate your game with a lightning bolt graph, rather than a smooth incline. Regard:

In an old-school arcade game, the levels get progressively more insane, until you lose the game and have to feed the machine more quarters. This makes sense for a coin-op that exists to devour your hard-earned pocket change, but it doesn’t make sense if you’re designing a more modern game where you want your player to be engaged for as long as possible. A freemium game, for example, lives and dies by retaining players; a linear escalation curve increases the likelihood that the player will quit out of fear or exhaustion. If he just barely makes it out of level 10 by the skin of his teeth, he may not even want to attempt level 11. He’d sooner quit while he’s ahead.

A modern game that strives for retention might use a lightning bolt or stair-step graph. Here, level 10 was insanely difficult, but level 11 gives the player a bit of a breather. One of the early examples of this approach that i can remember is the coin-op beat-em-up Final Fight. After brawling your way through a preposterously crime-ridden city as the roid-raging mayor or one of his two ninja buddies, you get to smash a car. No bad guys, no chance of death, no risk of losing – just a time-limited opportunity to smash a car.

A more modern example is Little Things, a hidden object game on the iPad that i’ve been playing this week. The levels in Little Things are, refreshingly, NOT rooms in a Victorian mansion in which a child ghost has murdered a wealthy detective. Instead, they’re little pictures composed of even smaller pictures. The player has to complete his quota by finding the items on the list.

Some of these pictures make it easier to find the little things within. The umbrella’s striped design makes it easier to compartmentalize sections of the image and limit your focus. In contrast, the hideously jam-packed cupcake is a real challenge to sift through.

If Little Things were to escalate linearly, you’d unlock the easy pictures at the beginning of the game, and the denser pictures towards the end. But Little Things has a staggered escalation; the densely-populated hamburger is introduced before the cinchy electric guitar. If the escalation was linear, you’d complete 10 missions in the beagle picture before moving on to complete 10 further missions in the wheelbarrow picture. Instead, Little Things bounces around from picture to picture, shuffling in the easier images to give the player a break. Even the missions themselves are staggered: in one instance, you’ll find yourself scouring the level for 15 objects under distinct time pressure; the very next level, you’ll need to point at four pairs of sunglasses in one of the easier pictures.

The net effect is that Little Things held my attention much longer than it would have if its escalation were progressive. Give consideration to staggered escalation if you count player retention among your next game’s goals.

When Untold Entertainment Inc. turned three last year, we were reeling from the fallout of the global economic collapse. It’s been a slow, difficult recovery, and we still have a lot of work left to do, but i’m happy to say we’ve nosed out of the tailspin. This was a landmark year for Untold; we are poised to have an absolutely incredible fifth year going forward. If last year was our Empire, this year is our Jedi. Bring on the Ewoks, baby.

Here’s a look at the Year That Was.

2010

August

Last fiscal ended on a dark note. We were struggling through Spellirium, our post-apocalyptic puzzle adventure game, as various production problems saw the budget sapped with very little to show for our efforts. The year ahead had us planning to complete service projects in the hope that we’d bank enough margin to continue working on the game.

September

My book was published! Unity 3D Game Development by Example: A Beginner’s Guide is a great introduction to game development, computer programming, and Unity 3D itself, which is a super-powerful game engine for creating on a wide variety of platforms. Thanks to you all for buying a copy, or for recommending the book to your friends.

Fall

We launched Jinx 3: Escape from Area Fitty-Two on YTV.com. Jinx 3 was the first game to use UGAGS, the Untold Graphic Adventure Game System. It supported multiple playable characters, an inventory system, a subtitle system, game variable control, and a “puppet” guidance system, which enables the developer to write commands to build in-game cutscenes. Jinx 3 was the first UGAGS game we developed, but the second one to launch, after Heads.

i spoke about UGAGS at Gamercamp Level 2.0, a Toronto convention celebrating the joy of video games.

October saw the publication of a now-infamous article about the Vortex Game Development Competition, where the previous year’s winners were revealed to have never worked on the winning game.

i experimented with a feature called Linkbait Tuesdays, where i used the Linkbait Generator to spit out randomized titles for blog posts. It wasn’t much appreciated by my readership, and didn’t appreciably increase blog traffic, so i killed the feature.

On Hallowe’en, we launched our second free games portal called ZombieGameWorld.com. If you know the song about the old woman who swallowed the fly, you’ll understand our challenge with these portals. We built WordGameWorld.com in order to attract a word game-playing audience, so that we could control the site’s ad inventory and find an audience for Spellirium. When the site suffered from flagging traffic, i decided to build a network of game portals; ZombieGameWorld.com was ostensibly created to help drive traffic to WordGameWorld.com, which should drive traffic to Spellirium.

To round out the fall, i grew a beard to win hockey tickets, despite not enjoying hockey. i spoke at an interactiveontario luncheon. And i wrote an article for Mochiland.com on the disgraceful refusal by contracting companies to credit their Flash game developers.

Winter

As the cold weather set in, i took a position at a private college teaching Unity 3D game development. i had hoped for a better experience than i had at Hervé Velasquez School for the Digitally Inclined, but no such luck: halfway through the course, which was dubbed Programming II (the students had supposedly been taught Flash/Actionscript for four months prior to my arrival), i had to dial everything back and re-teach programming basics to them. And by basics, i mean stuff like “What does the ‘=’ symbol do?” and “What is a variable?”

The class was only eight students, but i had no fewer than two of those students’ parents call or email me to ask why little Billy was getting low grades on tests. YaRly.

In this, i further proved the thesis in my contentious What’s Wrong with Ontario Colleges articles (Part 1 and Part 2). Helicopter parenting and failure aversion have created a generation of non-functional kids, which i later dubbed The Most Useless Generation. My diagnosis is that many college undergrads have escaped high school without ever understanding How to Be a Student (an article i wrote while teaching last winter, which i’ve only just posted now that i’ve put some distance between myself and the situation).

In the interest of helping young people be more successful, i offered My Prescription for (More) Successful Students, which my students all ignored, and i wrote a serious of articles called Understanding Programming to explain programming basics, which my students also ignored. Oh well. As the saying goes, you can lead a horse to water, but sometimes you just have a retarded horse.

2011

Spring

In 2011, we launched an exciting blog series called Pimp My Portal, detailing our struggles to drive traffic to ZombieGameWorld.com and WordGameWorld.com. The hook here was The World’s Most Meager Marketing Budget, a pot of just $100 that i spent on Fiverr.com to buy testimonial videos to promote the site, the rationale being that search loves video. The Old Lady who Swallowed the Fly reared her ugly head again, as i found that i had no audience to watch the videos to go to the portal to go to the OTHER portal to find out about Spellirium. The Pimp My Portal series is ongoing.

Around this time, we were commissioned by The Centre for Skills Development and Training to produce a series of games to help teach workplace skills to 15-30-year-olds. The resulting game, Summer in Smallywood, enabled us to make a number of improvements to UGAGS, including auto-save, debug tools, navigation meshes, saved game profiles, and threaded conversations. We’re looking forward to working further with The Centre in the coming year to expand our educational gaming experience.

In March, i admit i was feeling a little bit desperate and squirrely. Work was trickling into the shop in fits and starts, and i was really wondering whether renewing our lease would be wise. Wild-eyed and hungry at GDC, i was overcome with the need to let the world know i am here, like the tiny Whos living on a speck on a clover stalk, who ultimately issue a resounding YOPP! to show the jungle animals that they exist (and to keep from getting boiled in beezlenut oil).

To that end, i pulled some shenanigans at the conference, which came to be known as the famous GDC Coin Stunt. The resulting press on most major online games sites greased the wheels for what was to be our greatest victory yet.

Over the years, we’ve found it so difficult to drive enough steady Flash game development work that we haven’t been able to bank enough time or enough money to do our own thing. To date, the only chance we seem to get is TOJam, an annual weekend-long Toronto game jam, during which we always produce a complete and original game. Indeed, nearly every title in the Original Games section of our portfolio is a TOJam game, completed in one weekend by me alone.

This year, we used UGAGS to create Sissy’s Magical Ponycorn Adventure. i worked on the game with my 5-year-old daughter Cassandra. It was no accident that i was wearing my “I have all the coins” T-Shirt in the TOJam group photo this year. After the game went live, it went viral, initially being featured on many of the same sites that covered the coin stunt. In the few months since its launch, the ponycorns game has gone on to become an international sensation (i just granted an interview to a Japanese newspaper this week!).

With the ponycorns game, we took a very important step to improving our viability as a dev studio by launching the game on the Apple iPad and the BlackBerry Playbook. On the third day of its launch week, Sissy’s Magical Ponycorn Adventure was featured by Apple in its New & Noteworthy section.

Ponycorns also drove us to develop our first alternate revenue stream based on our original IP. We launched the Untold Booty merchandise store with a number of different ponycorns-based SKUs, and have been very happy with the results.

Throughout the year, i remained active with the IGDA Toronto Chapter, organizing some well-received events including the speed dating-style Game.Set.Match, the Open Mic Night rant session, Straight Outta TOJam: Pint-sized Postmortems, and the Fund in the Sun workshop.

Through the spring, we developed a great puzzle/platformer game called Spladder, which currently runs on a number of kids’ broadcaster sites – YTV.com. TVO.org and CBBC.co.uk among them.

We launched a new games portal called TowerDefenseGameWorld.com and filled it with free tower defense games, because it’s difficult to prove a theory about a network of games portals lending each other traffic if you only have two portals. We also gave a major upgrade to ZombieGameWorld.com by expanding it to feature zombie games and goodies on other platforms.

i know an old lady who swallowed a horse. She’s dead, of course.

Summer. Future.

We’ve come full circle. Spellirium remains unfinished, but we’re finally spending time on it again. We poked Kahoots with a stick to see if it was still twitching. Thankfully, it is! We’ve made some creative changes to it to spare a fellow indie game dev company some unpleasant legal strife; look forward to a Kahoots-related announcement in the coming months.

i’m writing the 3.x update to my Unity 3D book, which will be ready shortly (send me an email and i’ll add you to our notification list when the update is released).

Going forward, our plan is to leverage the success of the ponycorns game to make major in-roads into game development and education for kids (see our article on CBC.ca). i’m preparing a pilot project with Cassie’s elementary school this fall. We’re preparing the unstoppable UGAGS engine for a business-to-business, and then consumer, release – expect it to have a kid-friendly interface. We’re polling people for their interest in an iPhone/iPod version of the game (send us an email!). i’ll be delivering my conference session Ponycorns: Lightning in a Jar at the Screens festival this fall, and at other conventions throughout the year. Ponycorns is being translated into Japanese in anticipation of the Sense of Wonder Night at the Tokyo Games Show.

Untold Entertainment’s fifth year will be filled with low-life panda bears, daily word puzzles, gamesByKids, and more great articles about game development and education, peppered with rude jokes and stolen LOLcat pictures. Thanks so much for your support, everyone! i’m really looking forward to writing an amazing recap next year.

Check out this vector graphic of a sun. Sure, you can individually copy and rotate all those flames and then meticulously hand-position them, but life’s too short and you’ve got too much other awesome stuff to do. There’s a faster, easier way!

Step 1: Draw your graphics

To begin, I’ve just drawn a circle and a little flame graphic. I filled them both with a gradient so they look less junky.

Step 2: Symbolize your graphics

Select the circle and press F8, or click Modify > Convert to Symbol. Enter a name for your symbol – anything you like – and make sure the Registration point is in the center. Press OK when you’re finished.

Step 3: Create an Empty Movie Clip

Press CTRL+F8 or click Insert > New Symbol … to create an empty Movie Clip. Again, call it whatever you like and click OK. Then click the Scene 1 tab to jump back out to the main timeline.

Press CTRL + L or click Window > Library to bring up the Library. Click and drag the empty Movie Clip you just created and drag it to the Stage. The empty Movie Clip looks like a white dot.

Step 4: Align the two Movie Clips

Press CTRL + K or click Window > Align in the menus to bring up the Align panel. Click and drag to range-select both Movie Clips at once. Click the “Align horizontal center” and “Align vertical center” buttons (highlighted in red in the image) to align the center points of the two clips.

Step 5: Cut and paste the repeated element into the empty Movie Clip.

Select the artwork for the repeated element and press CTRL+X or Edit > Cut in the menus to delete it and copy it to memory in the clipboard.

Now, double-click the empty Movie Clip (the white dot) to edit it. If you accidentally double-click the circle, click the Scene 1 button to jump back out to the main timeline and try again. Alternately, you can double-click the empty clip from the library to edit it.

Finally, press CTRL+V or Edit > Paste to paste the repeated element artwork from the clipboard into the empty Movie Clip. Position the artwork where you’d like it to appear; in the case of our sun graphic, we’ll move the little flame to the edge of the circle. Click the Scene 1 button to jump back out to the main timeline when you’re ready.

Step 6: Prep the timeline.

Select the repeated element (in this case, the flame Movie Clip) and press CTRL+X or Edit > Cut to delete it and copy it to the clipboard.

Click the New Layer button at the bottom left of the Timeline window. Click on the first frame of the newly-added layer, and press CTRL+SHIFT+V to paste the repeated element in exactly the same place.

Step 7: Spin the clip.

Click on frame 30 of the main timeline in the newly-added layer. Press F6 or click Insert > Timeline > Keyframe to drop a new Keyframe there. You’ll see a black dot on frame 30.

Click on Frame 1 of the new layer. Right-click and select Create Classic Tween. An arrow with a blue background appears to indicate that Flash will interpolate the position, rotation, scale and color effects of this Movie Clip across the frame range.

Open the Properties panel (Windows > Properties or CTRL+F3). Select the repeated element Movie Clip. The context-sensitive Properties panel updates to show Movie Clip properties.

Under the Tweening heading, choose CW (clockwise) from the Rotate: dropdown. (You may need to click the little triangle to expand the Tweening section). This makes the repeated element rotate around its registration point for the duration of the animation span.

Step 8: Adjust the animation with Onion-Skinning.

Click the Onion Skin button at the bottom of the Timeline window to turn on Onion Skinning. Click and drag the grey animation range gizmo at the top of the Timeline window to stretch across the entire animation range.

Now you can clearly see how your repeated element is distributed around its registration point. If the distribution is too sparse, click the pink rectangular Playhead at the top of the Timeline window and hold down the F5 key (or repeatedly click Insert > Timeline > Frame if you’re a sucker) until the distribution is to your likely. If the distribution is too dense, press SHIFT+F5 to delete frames until it looks good. If you’re deleting frames, make sure you either lock the lower layer, or move away from Frame 1, or else you’ll delete the lower layer artwork!

The following images show how differing frame range lengths can affect the distribution of your repeated elements:

Step 9: Turn the interpolated frames into symbol instances.

Right now, those repeated elements may look exactly the way you want them, but they’re not “real”. What you’re seeing is just the motion trail of a single Movie Clip instance as it revolves through its animation.
To turn these phantoms into actual symbol instances, click and drag to select the entire range of animated frames, and press F6 to convert them all to keyframes. Now, each frame contains an actual “physical” instance of the Movie Clip.

Step 10: Gather the elements together on one frame.

Click the Edit Multiple Frames button at the bottom of the Timeline window.

Click the dot beneath the Lock column on the lower layer, to keep from messing with the graphics on the lower frame.

Press CTRL+A to select all of the (unlocked) repeated elements. The Edit Multiple Frames mode enables you to select all of the instances across the frame range.

Press CTRL+X or Edit > Cut to delete all of the repeated elements and copy them to the clipboard.
Uncheck the Edit Multiple Frames button. Click on the first frame, and press CTRL+SHIFT+V to paste the repeated elements in place.

Step 11: Tidy up.

Click and drag to select the animation range from frame 2 to the last frame. Press CTRL+F6 to delete all of the empty, blue animated keyframes. Press SHIFT+F5 to delete the frames so that your timeline is back to a single frame.

Click and drag the top layer below the bottom layer to swap their z-depth order. This put the repeated elements behind the circle. Looks pretty good!

This trick works for more than just straight lathe effects. You can animate a MovieClip along a path and add scale effects to it before F6-ing the whole affair. Check out the tail scales on this super-realistic dinosaur:

Here’s how to animate a bouncing ball convincingly using Flash CS5 (though these steps will work in most – if not all -iterations of the Flash software).

Step 1: Create the Ball

1. In the tool palette, click and hold the mouse button on the “stroke” swatch.

   

2. Select the strike-through swatch. Our ball art won’t have a stroke.

   

3. Optionally, click and hold the mouse button on the “fill” swatch and choose a colour for your ball. i went with classic cherry red (#0xCC0000).
4. Again in the tool palette, Select the Oval tool. If you can’t see it, press and hold on the Rectangle tool – the Oval tool is hiding in a fly-out. You could also press the “O” key on your keyboard.

   

5. Click and drag the mouse to draw a circle on the screen. Hold the SHIFT key to constrain the circle’s proportions so that you don’t end up with an oblong ellipse.

   

6. Click the selection (black arrow) tool. You use this one a lot, so why not learn the keyboard shortcut? It’s “V”. (Pointy, like an arrow. Get it?)

   

7. Either double-click the raw circle artwork, or range select it (drag a selection box around the artwork). It goes “fuzzy”. (And it wouldn’t be an Untold Entertainment tutorial without some mention of fuzzy balls.)

   

8. With the artwork selected, choose Modify>Convert to Symbol in the menu, or press the F8 key.
9. In the resulting pop-up, type “Ball” as the MovieClip’s name.
10. Choose the bottom-middle for the registration point. This is key to animating a bouncing ball properly!

    

On or around the Flash MX release, the Flash engineers added a feature where a MovieClip can have its registration point in a certain place (ours is at the bottom of the ball), but there’s a second point – an anchor point – that can move around according to the needs of our animation. i don’t know why the anchor point doesn’t move to the bottom of the ball when we clearly want it there. Anyway, the last bit in this section is to move the ball’s anchor point down to the bottom middle, where its registration point is.

1. Make sure that snapping is turned ON. The Anchor icon in the Tool palette should be depressed (cheer up, little icon – things can only get better). You can quickly toggle snapping with the shortcut CTRL + SHIFT + /.

   

2. Click on the Free Transform Tool. In addition to rotating, skewing and scaling things, this tool lets us move our anchor point around.

   

3. The anchor point is the white dot in the center of the ball MovieClip. Click and drag it to the bottom-middle of the ball. Since snapping’s turned on, it should snap into place.

   

With the anchor point snapped to the bottom of the ball, we can properly squash and stretch it. “Squash n’ stretch” is one of the principles of animation laid out by Disney’s Twelve Old Men in the indispensible book The ILLUSION OF LIFE: DISNEY ANIMATION.

If you’re interested in animation, i highly recommend studying that book and the Disney principles: arc of motion, squash n’ stretch, anticipation, secondary motion, follow-through … fantastic stuff!

Step 2: Rough-In the Animation

Thanks to the magic of computerized interpolative animation (AKA “tweening”), it’s a pretty quick job to get the ball bouncing. Getting it bouncing convincingly takes a tiny bit more effort.

So let’s rough it in first:

1. Click on frame 5 in the Timeline.
2. Click Insert>Timeline>Keyframe in the menu. If you’re going to do even a smidge of animation in Flash, you should really learn the Timeline shortcuts:

   – F5: insert a blank frame
   – F6: insert a keyframe
   – F7: insert a blank keyframe
   – SHIFT + F5: delete a blank frame
   – SHIFT + F6: delete a keyframe
   – SHIFT + F7: delete a blank keyframe

   

   Inserting a keyframe copies everything from the previous keyframe (the first one Flash finds travelling backwards along the timeline). In the case of our Ball MovieClip, Flash copies the ball’s position, rotation, scale, and colour effects. This is a Good Thing.™

3. Click on frame 10 of the Timeline, and press F6 to add another keyframe.

   

   Now we have three instances of the Ball, on frames 1, 5, and 10. Frames 1 and 10 will depict the Ball in its “up” state, and frame 5 will be the “down” state.

4. Click on frame 5.
5. Click on the Ball MovieClip, and move it down the screen. i moved mine about 90 pixels down, and my Ball is 50 pixels in diameter. Don’t worry about botching this step – you can easily adjust your animation later.
6. Click on any frame in the Timeline from 1-4.
7. Right-click and choose “Create Classic Tween” from the context menu, or choose the same option from the program menu – Insert>Classic Tween.

   

   Flash offers two different styles of interpolative animation: the new Motion Tween, for designers who want full spline control over every axis of an animation, and Classic Tween, for us old-schoolers who can’t be arsed. (Guess which kind of developer i am?)

8. Similarly, add a Classic tween between frames 5 and 10.

The first tween we created tells Flash to figure out the in-between drawings (“tweens”) from the Ball’s “up” keyframe and its “down” keyframe. Likewise, the second tween tells Flash to calculate the in-between drawings from the ball’s “down” keyframe to its “up” keyframe.

Play your animation by pressing the ENTER key on your keyboard, or better yet, click Control>Test Movie>Test in the menus, or hit CTRL+ENTER. Your Ball should animate up and down, crappily.

Our Ball is moving, but it’s not animating. The Illusion of Life isn’t there. We’re going to change that.

Step 3: Breath Some Life Into It

The type of ball we’ve got bouncing right now is very very stiff. It’s a cue ball or a bowling ball or a brass ball. It isn’t a very fun ball. It’s not soft or squishy. It has no personality. By adding a tiny bit of squash n’ stretch, we can eke a lot more verve out of it.

The squash n’ stretch principal is this: squishy, bouncy, rubbery things are more fun to watch on screen than rigid things. You’re “allowed” to squash or stretch something as much as you like, even to extremes, as long as the body’s volume stays the same. So if you stretch something up very tall, it has to simultaneously get very thin, or else it appears to gain mass, and it just won’t look right.

By the same token, if you flatten something by making it short, all that stuff has to seep out somewhere, so the shape has to simultaneously become very wide.

It makes sense to add a squash to the ball on the frame when it hits the ground, and maybe a slight stretch when it’s up in the air. Let’s do it:

1. Click on frame 5.
2. Click on the Free Transform tool.
3. Select the Ball MovieClip.
4. Drag the handles around to make your ball short and squat. Try to conserve the ball’s mass. For every inch that you flatten it, you’ve gotta squash it by the same amount.

Now test your movie.

Uh-oh … this isn’t good. Something doesn’t quite look right. Sure, the ball squishes when it lands, but … what’s going on?

The reason it doesn’t play well is that Flash is interpolating the squish from frame 1, when the ball is up in the air, all the way down to frame 5, when it hits the ground. Of course, the ball’s only going to squish when it actually makes contact with a hard surface.

Pres CTRL+Z or choose the Undo options from the Edit menu to undo the last few steps, until the ball on frame 5 is unsquished, and there are no Classic Tweens in the timeline. (If you undo too many steps, you can choose CTRL + Y or Edit>Redo to undo your undo

Step 4: Protect the Squish

In order to prevent Flash from interpolating the squish all the way through the animation, we need to “protect” the squish frame. We can do this by placing two keyframes, one on either side of frame 5. By doing this, we ask Flash to tween only the ball’s position on the way down, and only its position on the way up. Then, on the “protected” 5th frame, we squish the ball.

1. Place a keyframe on frame 6. This copies the ball in its “down” state from frame 5.
2. Press CTRL+C on the keyboard, or Edit>Copy to copy the ball in this position.
3. Place a new blank keyframe on frame 4.

   

4. Press CTRL+SHIFT+V or choose Edit>Paste in Place to paste the ball in its “down” position, exactly as it is on frames 5 and 6.
5. Re-add the Classic Tweens leading from frames 1 and 6.

   

6. Now that the squish frame is protected, you can go back and add the squish to the ball on frame 5.

It’s better with the squish, but it’s not perfect. Let’s try adding a stretch to the “up” positions.

1. On frame 1, stretch the ball out a touch using the Free Transform tool.
2. Since the animation loops, the first and the last frames have to match. Copy the ball from this frame.
3. Click on the last frame, frame 10.
4. Delete the ball from frame 10. This breaks our Classic Tween, and we get a dotted line leading to a blank keyframe.

   

5. Press CTRL+SHIFT+V or select Edit>Past in Place to paste the stretched ball. The Classic Tween is back to normal, now that it has something to animate towards.

Okay! Almost there! It’s looking better with that stretch. You may wonder why i’m not asking you to “protect” the stretch frames like we did with the squashed frame. That’s because while the ball shouldn’t squish until it hits the floor, it actually should lengthen as it travels up through the air.

The worst thing about our animation right now is the timing. The ball moves pretty robotically, and it has a real “computer animated” feel to it. In order to soften this up, we’ll apply some timing to the animation.

Step 5: Apply Timing

To make the ball a little more phyiscally believable, we need to slow it down on the way up. If you’ve ever seen super-slow-motion footage of someone hitting a baseball, or if you’ve studied Newtonian physics, you’ll know that the baseball actually comes to a dead stop as its energy is transferred to the bat. The bat, in turn, applies force in the opposite direction to the ball.

Similarly, there’s a point at which our ball hangs in the air and stops moving, before heading back down towards the ground. It decelerates (moves increasingly more slowly) as it reaches the apex of its bounce, and accelerates as it reverses direction and heads towards the ground.

We need to apply some easing to the ball to imitate this real-world behaviour.

Easing can front- or back-load a tween animation so that it’s slower or faster at the beginning or the end.

Here’s a picture of a tweened box animation with no easing:

The box’s in-between frames are evenly distributed between the start and end points.

And here it is with “Ease In”:

The box appears to move more slowly at the beginning of its animation, and it speeds up as it reaches the end point. We can see this is because the box’s in-betweens are bunched together at the beginning.

Finally, here’s what “Ease Out” looks like:

The box appears to slow down at the end of the animation, because its in-between frames are bunched together there.

So we return to our bouncing ball. We want the tween coming out of frame 1 to Ease In, so that it accelerates towards the ground. We want the tween coming into frame 10 to Ease Out, so that the ball slows down when it reaches the top of its bounce.

1. Click on frame 1.
2. In the properties panel, drag the number 0 next to the “Ease:” label all the way to the left, until it reaches -100 and the word “in” appears. You can also single-click on the number and it becomes an input field. Type “-100″ into the field and press ENTER.

   

3. Click on frame 6.
4. In the properties panel, slide the Ease: to the right until it reaches 100/out, or single-click the field and type “100″, then press ENTER.
5. For the finishing touches, i decided to slow the squish down a bit. First i added a frame on either side of the squish:

   

6. … and then i added Classic Tweens coming into and going out of the squish.

   

Test your movie.

The combination of easing and squash n’ stretch give the ball a lot of spunk and life! Instead of a ball that looks like it was animated by a robot, we’ve got a spunky, squishy object that’s a lot more fun to watch.

No-Fail Sugar Cookies

• 6 cups flour
• 3 tsp. baking powder
• 2 cups butter
• 2 cups sugar
• 2 eggs
• 2 tsp. vanilla or almond extract
• 1 tsp. salt
• fresh brains, to taste

Cream butter and sugar until light and fluffy. Add eggs and vanilla, and mix well. Mix dry ingredients and add gradually to butter mixture. Mix until flour is completely integrated and the dough comes together.

Chill for 1 to 2 hours, or press dough between parchment paper and place in the fridge. By the time you’re finished doing this, the initial batch of rolled dough will be chilled enough to work with. Fry brains and strain them of excess juices. Dry brains on a plate, and crumble over cookies immediately after removing them from the oven. Leftover brain juices may be used in unwholesome ritual ceremonies.

Roll dough to desired thickness and cut into bunny shapes. Bake on an ungreased baking sheet at 350 degrees for 8-10 minutes. Yields one small army of zombunnies.

Poured Fondant Cookie Icing

• 1 – 1 1/2 cups icing sugar, as needed
• 1 tbsp corn syrup
• 1 1/2 tbsp water

Mix ingredients as needed until the icing is runny enough to pour, but thick enough to set. Apply to cooled cookies with an icing bag or jam knife. Plastic baggies with holes snipped out of their corners make inexpensive icing bags, and allow for easy clean-up*.

Visit ZombieGameWorld.com for more fun stuff!

i Killed a Guy

End of story.

New Header

Alright, no – but that would have been interesting.

i’d been aware of Unity 3D, a game engine, right from its early days. i was working at a kids’ media conglomerate and we were researching development tools for a new kids MMO. Unity was used to develop Cartoon Network’s FusionFall MMO. The drawback was that the software only ran on a Mac.

A year later i was at GDC, and Unity had announced a PC version. i saw them on the show floor, and tried comparing them with Torque 3D. At that time, reps for the two companies were doing a lot of mud-slinging, and a lot of FUD was bouncing around between the booths. So when i returned home, i asked a simple question on a LinkedIn forum: Unity or Torque? The answer was overwhelmingly in favour of Unity, to the tune of hundreds of responses. i knew i was on to something.

Get Me Summa Dat

i wanted to use Unity, but there were still a few barriers in the way. One of them was removed in short order when Unity moved to a free model. But there was still the problem that both 3D Studio Max and Maya, 3D software crucial to developing assets for Unity games, were $4000 a seat (after Autodesk had killed the $2k entry level version of each product). $Four large is a lot to swing on software for a small studio like mine.

Still, i could tell Unity was special, and i wanted to be involved. So i started tweeting about it. i kept a watch through Tweetdeck on the #Unity3D hash tag, and if any interesting info floated by, i retweeted it. i set up a new blogbook here called Unity Nuub, which would hold interesting articles and links related to the software. i downloaded Unity and goofed off with the software a little bit. i played Unity games. My interest was piqued, but my activity level was low.

Where There’s a Will…

Around that time, a small publisher out of the UK called Packt was putting out the very first book on Unity 3D, by Will Goldstone. The publisher contacted me and asked if i wanted a free review copy in exchange for a review on my site. i said “sure”. How did they find me? Presumably through Twitter, i’d made a connection between myself and Unity, and i must have come up in a few Google searches.

A short time afterward, David Barnes (@fbindie) from Packt wrote me up saying they wanted to do a few more Unity books. What types of books did i think they should publish? i gave him my feedback. His next question, which left me a bit breathless, was: “Do you have any interest in writing any of them?”

Dusting off the Bucket List

i don’t know about you, but i’ve always wanted to be a published author. That was always just … something i had on my list, along with “fly a helicopter” and “marry rich”. Sadly, few of our childhood fantasies end up coming true … my wife is flat-ass broke, and we all know helicopters don’t exist. Once i was ten years into the games industry, i had resigned myself to the fact that i would probably never be a published author, so i put it out of my mind.

But here it was: an offer to write a book. A book on something i knew nothing about.

i was upfront with David. “i really have no idea how to use Unity.” He looked up my bona fides: trained in 3D Studio Max in college, worked 10 years as a game developer working with Flash, had a rockin’ blog packed with dick jokes and Actionscript tutorials (but mostly dick jokes.) He said a cookbook might be beyond me, but i could probably write a decent beginner book.

i told him i’d need some time to get up to speed on the software. i’d never made a game in Unity. i’d never done anything in Unity, for that matter. (But neither had many other people, really – the software was only 3 years old, and only 1 year out of the gate on the PC. Unity was news to a lot of people.)

David asked me point blank: “How long will it take you to learn Unity well enough to write a book about it?”

Gripping my desk chair and chewing my lips as i answered his email, i typed “Well, i suppose by the time i finish writing a book on it, i’ll know the software pretty well.”

And off we went.

The Luckiest Boy in the World

Are you hating me right now? Maybe you’ve read my other article, TENure, about how i was hired as a game developer despite not ever having made a game before? Maybe you want to wrap my face around your foot?

Who do you think should have written the second-ever published book on Unity? A Unity expert, i suppose! Well, can that Unity expert write? Does that Unity expert have the considerable time and energy for a book? And better yet, will that Unity expert remember what it was like to NOT be an expert? i don’t know about you, but i’ve spent a lot of money over the years on books by subject matter experts who move way, way too quickly. My mandate was to write a beginner book that beginners could truly get through. And not just Unity beginners: game development beginners. For example, there’s a heading in the book that says “What is code?”, and another section that briefs the reader on how 3D models are put together.

The Backlash

i caught a lot of flack from my colleagues while writing my book. They considered themselves Unity experts, i suppose, and why not? They had actually finished some games with it. i remember one particular tweet that went something like this:

Colleague: i’m going to do open heart surgery, but i’ve never trained to be a doctor.

Of course, his error was in comparing Unity to open heart surgery. Unity reminds me a lot of Flash … and not even Flash CSX, but Flash 4 back when i started in 2000. It strips out the whole mystery of writing code to draw stuff on the screen. If you’ve had any experience with XNA and wished you could actually see and manipulate your 3D models, you’ll find Unity a real treat.

Put another way: if coding to the metal is open heart surgery, working with Unity is cutting a heart out of construction paper using safety scissors.

Gag Me

If writing a beginner-friendly book was my first mandate, my secondary goal was to write a technical manual that wasn’t so damned serious as everything else i’d read. You’re learning how to make video games. Why does everything have to read like a Terms of Service agreement?

i’m a fan of an O’Reilly series called HeadFirst, which is filled with cartoons and crossword puzzles and pictures – the idea being that if you are engaged on multiple levels in a variety of different ways, you’ll retain the material better than straight-up reading block after block of text. (You can probably tell by now that i’m a big fan of breaking up text with bullet lists and pictures)

i’d love to work on a HeadFirst book one day. For now, as Packt is a small and relatively new publisher, i had to eschew the stock photography and crossword puzzles. But what i could do, and what David requested i do, was to pepper the text with humour. David wanted the same sense of humour i forcibly inject into this blog to bleed into the book.

One of the book’s technical reviewers apparently didn’t get the memo. Throughout the drafts of the first two chapters, he filled the page up with comments like “please cut the humour – this is a technical manual, not the Muppet Show”, and “Well I never!” i think i even counted one or two “harrumphs” in there. It was like Packt had hired that wealthy dowager whose house the Three Stooges paint to review my book.

i re-connected with David. This reviewer seemed pretty peeved. Did i really have to go through the whole book and strip out all of the witty asides and punny paragraph headings? That would be like taking the red nose and seltzer bottle away from a clown. And then giving him colon cancer.

It got cleared up in short order. i’m not sure Packt even kept that reviewer on for the remainder of the project, and in the end, humour won out.

Currying Favour

Packt maintains a staff in India, who were responsible for copy-editing the book. You may have heard about the cultural growing pains of outsourcing work to foreign countries? While it was far from a nightmare, i did find myself going to bat more than once for various cultural references or turns of phrase that didn’t make sense to my editor from Mumbai – especially whenever i bent the rules of grammar, spelling, and punctuation for the sake of the yuks.

For example:

Worst. Game. Evar.

was corrected to read

Worst Game Ever

i had to do the legwork to explain that, well, there’s this character on the once-popular teevee program The Simpsons, you see, and he enjoys comic books …

Explaining why the word “evar” had to be spelled that way was even more of a challenge. Many of our email volleys ended with “just leave it cuz it’s funnier that way.” After she edited “cuz” to “because” for spite, i usually won out. ;)

The result is a book that i’m very, very proud of: one that makes a great introduction to Unity, 3D graphics, game programming and design, and in a way that encourages the reader to start small, finish something (even if it’s terrible!), and slowly build up those skills until he’s ready to release his opus. Unity 3D Game Development By Example is well worth buying. And the best news of all? i even managed to sneak in a few dick jokes.

Carpe Judex

My grandfather worked as a bailiff in Thunder Bay Ontario. Once day in the courtroom, there was a man brought in who had a dispute with his wife. In the middle of the hearing, he stood up and drew his gun. He shot and killed his wife, the judge, and his lawyer, before turning the gun on himself. The last two men standing were my grandfather and the court stenographer.

Thunder Bay needed a judge. My grandfather the bailiff, who to my knowledge had had no formal judiciary or legal training, was appointed to the position. He became a popular judge of young offenders, and there’s a building in Thunder Bay across from the University that’s named after him.

Many colleges and Universities now offer programs in video game development, as well as golf course management, creative writing, and even stand-up comedy (!). Don’t let the burden of a lack of training or experience get in the way of what you want to do. Get a job making video games even though you’ve never made one. Write a book, even though you’ve never written one and don’t know the subject matter. Perform open heart surgery even though you’re not a “doctor” (whatever that means). Recognize when the swirling twin tornadoes of chance and opportunity settle on your house, and get swept up. Otherwise, you’ll be lying on your death bed wondering what might have been.

And let’s hope to God you’re not in for heart disease.

One of the most popular series of articles i’ve ever written was called Pimp My Game. It was an experiment in game monetization, back before i’d ever released a game of my own. i wanted to know how much money i could earn distributing a game, so that i’d know the amount of money i could invest in development in order to break even, at the very least.

The results were … abysmal. The Pimp My Game feature predates a number of tools and tricks that have made it far more possible for Flash game developers to earn money on their creations – most notably Flash Game License and microtransactions (GamerSafe/HeyZap/Mochi Coins).

Even with those services, it struck me that the amount of money required to develop a game of significant scope and scale to catch the attention of the average portal-goer, versus the relative risk of not landing a large enough sponsorship or earning cash back through scant ad rev share, was not a racket i really wanted to be in. Untold Entertainment makes custom games as a service for a number of clients, and i feel we’re paid appropriately for our efforts. i’ve never developed a game for a client on the off chance that they’d pay money for it.

i’ve been told numerous times, not least of all by the Flash Game License operators themselves, that game sponsorships can get up into five figures, with $20 000 being thrown around most often by people trying to impress me. Who’s paying these sponsorships? The buyers are mostly game portal owners.

The Cake is a Lie

What’s a game portal? It’s a websites that aggregate games and sandbags them with assloads of ads.

So a portal can pay out $20k to sponsor a game. What’s in it for the portal? Usually, portals require the game developers to incorporate the hyperlinked portal logo in the game pre-roll, and possibly other promotional hooks – a “more games” button on the title screen leading back to the portal, portal-specific high scores – that sort of thing. The idea is that players play these free Flash games, which are distributed far and wide to tens of thousands of sites, and the players may purposely (or inadvertently) click somewhere in the game to be brought to the sponsoring portal. Sponsors will often pay extra cash for exclusivity rights.

And how does the portal make enough money to pay a sponsorship? Unless i’m missing something, the most significant source of revenue for a game portal is advertising. There are some smaller, secondary streams – for example, Mochimedia kicks 10% of Mochi Coins sales to the portal when players spend Mochi Coins in games hosted on those portals, and Mochi also cuts the portal in for a small percentage of Mochiads revenue, but there we’re talking about fractions of fractions of pennies. The bread and butter of any games portal is advertising.

If You Can’t Beat ‘Em …

At this point i began eyeing the portals themselves with keen interest. $20 000 for a sponsorship? Again, unless i’m missing something, that must mean that at some point, a portal earns more than $20k in advertising. And game portal advertising revenue is passive income, that elusive majestic money creature that i’m constantly persuing. You just have to throw up a portal, stick some games on there, surround the games with ads, and kick back while waves of money roll over you like a stinky cash tsunami. “Beautiful”, i thought. “Let’s do this thing.”

Here are the steps i followed to set up my first portal, WordGameWorld.com:

1. Register the domain name – $10
2. Pay for hosting. i’m paying $33/mo to a company called 1&1 to host a VPS (Virtual Private Server), which is essentially like having my own (underpowered) web server computer. i originally started renting the VPS so that we could power Interruping Cow Trivia using the multiplayer ElectroServer software. You can probably get away with paying a regular web host less than $10/mo to host a portal.
3. Install WordPress, which is very popular free blog software. The Untold Entertainment blog you’re reading now runs on WordPress.
4. Purchase a WPArcade theme and plugin. These guys license a WordPress theme (skin) that makes your site look like a game portal. The plugin they provide enables you to enter the game distribution rss feed address from MochiMedia and, with the click of a button, inject ten thousand free Flash games into your portal site.
5. Set up a Google Adsense account. This was the trickiest step – at first, Google denied my registration because WordGameWorld.com had zero traffic. WordGameWorld.com was live for a long time with no advertising, until i got a hot tip from a Twitter friend that once Adsense approved one of my sites, i could use Adsense ads on other sites that i owned. i leveraged the traffic on UntoldEntertainment.com to get my account approved, and then placed the ads around the WPArcade WordPress theme using their tool.

Step 4: Proft?

At this point, i had contractors come in to widen my front door in anticipation of the deluge of cash that would no doubt come blasting into my living room from men with money guns, all owing to this most brilliant idea of mine. It wasn’t long before i figured out that setting up a game portal is easy … driving traffic to it ain’t.

For the remainder of this series, i’ll document my madcap methods i used to try to drive traffic to my game portals. My journey takes me from dating services for gay nerds, to bikini-clad women in Brazil, to the very bowels of The Internatz itself … all in the name of making money off the backs of the free Flash game developers that i never want to become. i promise it will be lurid, sleazy, and informative. But mostly lurid.

It took a lot of back and forth and futzing to finally convert the artwork properly, and when i finally found the solution, i realized i had known it all along and had merely forgotten it (because i don’t do this type of thing often). So i’m recording the solution here for posterity; the next time i have to do this, a Google search will turn up my own blog :) It actually wouldn’t be the first time that’s happened.

i’ll keep you on tenterhooks and take you through the frustrating conversion process, just so that you can swear along with me and nod your head and say “yep – that’s happened to me.”

Export Image

The ability to export artwork to .ai format has actually been removed from Flash Professional as of version CS5, and has been replaced with the Adobe .fxg format, which works as expected. The .fxg format even converts gradients properly, which have been a longstanding asspain for the past 10 years. If you’re running CS5 or better, export to .fxg and you’re done. If you’re trapped in CS4 or below, here’s what you may have tried:

1. File > Export > Export Image
2. Choose Adobe Illustrator (*.ai) from the drop-down filetype list
3. Punch in a filename, and click “Save”
4. Open the file in Illustrator

The first roadblock you encounter may be this message:

Can’t open the illustration. The illustration contains an incomplete or garbed object description.

Offending operator: “”

Adobe_Illustrator_AI5 / initialize get exec
%%BeginEncoding: _pixelmic … feh. i can’t be arsed to look up the accented characters to type the rest.

i’ve ranted at length before about the error messages eggheads put into their software products. How on Earth is joe average user – and an artist, at that – supposed to react to and troubleshoot a message like this?

Obviously (?), all the egghead wanted the artist to do was this:

Select the single movieclip and press CTRL+B to break apart the object into separate objects. Now, when i go through the export process and bring the file into Illustrator, i get this:

The reason why the colors are desaturated and grey-looking apparently has to do with the Flash .ai export routine deciding to convert RGB artwork to CMYK artwork. i don’t know why it does this, but it’s not helpful. But at least the artwork is in Illustrator in vector format, right?

At this point, you could pick through every piece of vector art and tweak the color by hand … if you’re a sucker. Instead, let’s get on to the reason you’re here: the actual solution to this non-working nonsense.

WMF FTW!

The secret is to export as a Windows Metafile. Mac people, i don’t know if you have this option. If not, i’m not sure how to help you … but once you counter-intuitively export as a .wmf file instead of an .ai file and bring THAT into Illustrator, voila: your artwork is beautifully preserved with its RGB colors intact.

As i mentioned, the one drawback is that gradients don’t survive the crossing. This character’s cell phone casts an alpha gradient glow across her face, which shows up as a flat white polygon in Illustrator:

.fxg format will fix that. If you’re not ready to upgrade your software, this might entail an ugly hand-conversion process of all your gradients … unless someone else has discovered the esoteric conversion secret to preserving gradients? Anyone?

Big thanks to Gavin Friesen, my Art Director back at Corus, for originally cluing me in to this solution.

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

You can do something very similar in Unity 3D, but the process is slightly different. Be sure to read our Flash to Unity 3D Glossary if you’re coming over to Unity 3D from Flash.

1. Create the GameObject

We’ll make it real simple. Click GameObject > Create Other > Cube in the menus to add a cube primitive to the Scene.

2. Create an Empty Prefab

A Prefab is a lot like a Flash MovieClip. It’s going to contain our Cube GameObject. To create the Prefab, click the Create button in the Project panel, and choose Prefab from the resulting menu.

Right/alternate-click on the Prefab, or click and hold (Mac)/press F2 (PC) to rename the Prefab. I called mine “Cube”. This won’t create a naming conflict or anything.

3. Click/drag the Cube into the Prefab

Click and drag the Cube GameObject from the Hierarchy panel into the empty grey Prefab you just created in the Project panel. The Prefab lights up blue to indicate that it’s got junk in the trunk.

It’s now safe to delete the Cube GameObject from the Scene (via the Hierarchy panel) by highlighting it and pressing Delete (PC) or CMD+Delete (Mac). The Cube is safe and sound inside the Prefab.

4. Create a new Javascript

Our Cube Prefab is ready to be instantiated (instantiate == make an instance [copy] of). Let’s create a javascript to do the instantiating. In the Project panel, click Create > Javascript to make a new script.

Name the javascript something sensible. Then, click/drag the script onto the Main Camera. (We do this because our script won’t execute unless it’s hooked up to a GameObject in the Scene.)

5. Store a Reference to the Prefab

This is the fanciest/weirdest thing we’ll do in the entire tutorial.

Double-click the script to open it up in Unitron or Uniscite (depending on whether you have a Mac or a PC).

Declare a variable at the top of the script called myCube:

var myCube : GameObject;
 
function Update()
{
}

Save the script and close the editor.

In order to store a reference to the cube Prefab, we need to click and drag it into the variable we just created.

In the Hierarchy panel, click on the Main Camera, which is the GameObject to which we attached our script.

In the Inspector panel, look for the script component. You’ll see the myCube variable we created, and next to it is a piece of text that says None (Game Object)

myCube is the name of the variable (bucket), and the None (Game Object) is where the value goes.

Now, you need to click and drag the Cube Prefab from the Project panel into that value area that i’ve highlighted.

This is the result:

It’s weird. i know.

NOTE: You called the variable “myCube”, but it gets displayed in the IDE as “My Cube”. Why is that? Chalk it up to a Unity idiosyncrasy that i’m not a huge fan of. Check the script. Your variable is still called “myCube” where it counts.

6. Instantiate the Prefab

Now, with a reference to that Prefab, you’re all ready to go. Double-click to edit your script again, and punch in the following code:

var myCube : GameObject;
 
function Start()
{
     var pos : Vector3(0,0,0); // this is where the Cube will appear when it's instantiated
     var rot : Quaternion = Quaternion.identity; // Quaternion.identity essentially means "no rotation"
     Instantiate(myCube, pos, rot); // The Instantiate command takes a GameObject, a Vector3 for position and a Quaternion for rotation.
}
 
function Update()
{
}

Gettin’ Fancy

If you’ve read our article Understanding Loops with Arrays, you might have a notion of how to use Loops and Arrays to instantiate an armada of Prefabs into your scene. Here’s some sample code:

 
var myCube : GameObject;
 
function Start()
{
     // Store a bunch of different positions in an Array:
     var aPositions : Array = [new Vector3(0,0,0),
                                      new Vector3(1,2,1),
                                      new Vector3(2,1,1),
                                      new Vector3(2,0,0),
                                      new Vector3(0,3,0)];
 
     var rot : Quaternion = Quaternion.identity;
 
     // Loop as many times as there are elements in the aPositions Array:
     for(i=0; i<aPositions.length; i++)
     {
          Instantiate(myCube, aPositions[i], rot); // Put a new cube on the screen using the i'th position   
     }
}

One More for the Road

Just for kicks, here’s a script that’ll throw the cubes on the screen any old place, using Random.Range():

 
var myCube : GameObject;
 
function Start()
{
     // Let's store some minimum and maximum possible x,y and z values
     // to position our cubes:
     var minX : int = -5;
     var maxX : int = 5;
     var minY : int = -5;
     var maxY : int = 5;
     var minZ : int = -5;
     var maxZ : int = 5;
     // (you can fiddle with these numbers to change the range of possible spawn positions)
 
     var totalCubes : int = 50; // Change this to whatever number of cubes you'd like to have on-screen
 
     var rot : Quaternion = Quaternion.identity;
 
     for(i=0; i<totalCubes; i++)
     {
          // Use Random.Range to grab randomized x,y and z values within our min/max ranges:
          var randomX : int = Random.Range(minX, maxX);
          var randomY : int = Random.Range(minY, maxY);
          var randomZ : int = Random.Range(minZ, maxZ);
 
          var pos : Vector3 = new Vector3(randomX, randomY, randomZ);
 
          Instantiate(myCube, pos, rot); // Put a new cube on the screen using a randomized position   
     }
}

thing.renderer.enabled = true; // or false

… where “thing” is a reference to a GameObject.

If you’re doing this in a script that’s attached to the GameObject you want to hide, try:

gameObject.renderer.enabled = false;

Note that the GameObject’s collider is still active, so the GameObject can still be clicked on, run into, etc. Here’s a fast way to make the GameObject’s collider inactive:

gameObject.collider.isTrigger = true;

To disable the GameObject’s clickability, do this:

gameObject.active = false;

Here are a few glossary terms that kinda sorta carry over from Flash to Unity:

MovieClip == GameObject (but more accurately, Symbol == Prefab. Much like a MovieClip/Graphic/Button in Flash, whatever changes you make to a Prefab in Unity will replicate to all instances of that Prefab)

Scene == Scene (but Scenes in Flash are generally useless and glitchy … Scenes in Unity are the bee’s knees)

Library == Project panel

Properties panel == Inspector panel

Timeline == A-NOTHING!! (except that there IS a timeline that allows you to animate GameObjects. The resulting animation is stored in an .anim file inside your Project panel. You can apply an animation to any GameObject in your Scene, so animations are curiously reusable)

Instance names == tags … sorta (but unlike in Flash, you can have multiple GameObject instances with the same tag)

Layers == layers (but Unity does not display its layers in anything nearly as nice as the Flash timeline)

1. Start a New Project

Every Unity sits in its own folder. In this dialogue, browse to or create a new folder where your project will live, and then click the Create button.

What you’re left with is this:

Here’s what’s going on behind the scenes:

Unity automatically creates three sub-folders in your Project folder. You won’t have to touch these folders – in fact, you really shouldn’t, because there’s metadata in there that might get botched if you start poking around. Most of the time, you can import assets directly through the Unity IDE (program).

2. Make a Scene

Unity Projects are comprised of Scenes. In Flash, it wasn’t really a good idea to use the Scenes, but in Unity, it’s darn near a requirement. What you’re looking at now is actually an unnamed Scenes. Scenes must be saved individually … whenever you try to leave one Scene to look at another, you’ll get a Save Confirmation prompt.

The smartest thing to do right off the bat is to save this Scene.

Choose a name for your Scene. Some really simple examples are “Title”, “Credits”, “Win”, “Lose”, and “Game” for an extremely basic project. i’m calling this one “Game”, which is where all my main game action will take place.

Once you hit “Save”, two wonderful things will happen:

The Project panel is where all your stuff goes. It’s very much like the Library in Flash. Scenes have a little Unity 3D icon next to them.

Put Your Scene in a Folder

The final thing you’ll want to do is to create a folder for your Scenes, and dump your Scene inside it.

At the top of the Project panel, click the Create button and choose “Folder”:

You can also right click or alternate click on the Project panel to bring up this menu. Mac users can probably splat-click or some nonsense.

And then:

What Now?

How do i learn Unity 3D?

To learn more about developing games for Unity 3d and to learn the basic controls for getting around the program, read the first chapter of my book Unity 3D Game Development by Example. Next, buy four copies of the book (in case you accidentally drop three of them in the mud).

How do i build a timer in Unity?

When you’re a little further along, read this sample of Chapter 7 of my book, Don’t be a Clock Blocker. That’s how.

How do i program in Unity?

If you need a little help with programming in Unity using javascript, read our Understanding Programming in Unity Javascript series.

How do i transition from Flash to Unity?

Check out our article on Five Common AS3 to UnityScript Translations.

Alright – what else you got?

Like our style? For more free Unity 3D tutorials, sign up for our Unity 3D Game Development by Example newsletter, and we’ll send out a link whenever we post a new tutorial or article on Unity 3D.

Go forth and game!

In Understanding Functions, we learned that Functions are a way to bundle code statements together into a tight little unit that we can invoke (or “call”) any time we like, and as often as we like. There are two very important features to learn about Functions: Arguments and Return Values. We’ll figure out Return Values in this article.

One Fanta, Please

We talked about how Functions that accept arguments require exact change. If a Function asks for a String, you have to pass (“pay”) it a String. If it wants an int, you must pass it an int. If it wants two Arrays, a String, and four ints, you have to pass it those seven datatypes in that exact order. If you pass the right datatypes in the wrong order, if you pass the wrong datatypes altogether, or if you pass the wrong number of arguments, you’ll throw a (possibly cryptic) error.

So let’s imagine that Functions are kinda like vending machines. They require exact change, even specifying the types of coins you need to pay (ie five nickels, NOT one quarter). But what do we get for all our trouble? A kick in the pants and we’re sent on our way, that’s what. Wouldn’t it be great if Functions could actually give back to society, instead of being a drain on our charitable resources?

Thanks to return values, they can. A return value is the can of Coke that the Function vending machine spits out when we plug in our coins.

Just as we type (specify a datatype for) our variables, we can also type our Functions. When we do that, we’re saying “this is the type of thing the Function is going to return (give back/pay out/cough up). Here’s how we write a Function that returns a String:

function giveMeGoodNewsOnly() : String
{
    return "good news";
}

There are a few moving parts involved here. Let’s take it step by step.

The type of the return value goes at the end of the Function declaration. We split it out using a colon (two dots), just like when we type a variable. Here’s a punctuation refresher:

And here’s a representation of the Function using colour blocks, because colours are pretty:

By adding that datatype to the end of our Function declaration, we’re making a promise: the Function will return (pay out/cough up) something that has that datatype. To live up to that promise, we use the return keyword. Return is the command that pays/spits out/coughs up a value. In the code example above, the giveMeGoodNewsOnly Function is typed String, which means it must return a String. In the statement block (between the curly braces), we use the return keyword to return a String. And all was right with the world.

Where Does the Return Type Go?

So, fine – we return something from our Function. But what happens to that value? Remember when our Pac Man-like code interpreter chewed through the Function call, and packed his suitcase with the arguments?

When the code interpreter finds the function, he unpacks the arguments into the parameters.

At this point, the code interpreter has an empty suitcase. When he reaches a return statement, he packs the value into his suitcase.

As we saw earlier, the code interpreter returns to the next line after the original function call. But this time, he’s got a suitcase packed with a return value:

(this is an interactive demonstration! Keep clicking the “Next” button to follow the code interpreter through the example)

Unpacking the Return Value

When the code interpreter arrives from his journey with the return value in tow, we need to somehow capture that return value. Otherwise, the interpreter just throws it away and it disappears into the either.

Here’s a simple example to demonstrate that concept:

6+5;

You know and i know that 6+5 is 11. Your computer knows that too. When you type that into a line of code, the computer adds 6 and 5. And then …? Nothing. We haven’t told the computer to do anything with that result, so it’s a wasted piece of code.

Here are a couple of ways we can make use of the 11 result. We can store the result in a variable (bucket), or we can trace the result to the output/console window:

var result : int = 6+5; // Store the value 11 in a variable called "result"
trace(6+5); // Print 11 to the output window

Note: Unity javascript users should use print or Debug.Log instead of trace to print to the Console window.

It’s the same issue with Functions and their return values. If we call the sayHello Function and it returns a value, the value is going to disappear unless we capture it somehow. Just like the 6+5 example, let’s store the return value in a variable, or print it to the output window:

var greeting : String = sayHello("Jennifer"); // Store the return value "Hello, Jennifer" in a variable called greeting
trace(sayHello("Matthias")); // Print Hello, Matthias to the output window

The code interpreter needs some place to unpack his bags. These are just two ways to capture the return value – there are many, many more. For example, you can add the result to an Array using the Push method (see Understanding Arrays for more info).

You Get a-NOTHING!!!

What do we do about a Function that doesn’t return any value at all? Can we just leave that little section at the end of the declaration blank? Well, you can, but it all depends on how picky your compiler is. You can set the Flash compiler to Strict mode … certain other compilers are strict by default. This means that every variable must be typed (given a datatype), and every Function must also be typed.

The keyword for “no type” is void. If your Function doesn’t return a value, type it as void:

function thisReturnsNothing() : void
{
}

Return Stops the Show

The only really important thing to know about the return keyword is that when the code interpreter chews its way down to that line, it’s like hitting the EJECT button. The interpreter gets booted out of your Function, regardless of whatever statements you may have written beneath it:

function sayHello(playerName : String) : String
{
    return "Hello, " + playerName;
    // This line doesn't get executed.
    // Neither does this one.
    // Nor this one.
    // In fact, anything you write after a return statement gets skipped.
}

Breaking Stuff

As with arguments, there are some great ways to break a Function with return values. In brief, here’s how to do it:

1. Return a value even though your Function is typed void (or it’s untyped).
2. Type your Function to return a value, and don’t return a value.
3. Return a datatype that’s different than the return type declaration.
4. Write some branching logic so that it’s possible your Function may not return a value.

Let’s look at each of these, and the error statements that pop up when we make each mistake.

1. Return a Value When You Shouldn’t

Here’s an example of a Function that is typed void, but it returns an int:

function whoops():void
{
    return 57;
}

When you do this, here’s the error that the Flash compiler throws:

Scene 1, Layer ‘Layer 1′, Frame 1, Line 3 1051: Return value must be undefined.

That’s a pretty clear error message. Thank you, eggheads.

Here’s the error message you get when you use Unity javascript:

Assets/NewBehaviourScript.js(3,12): BCE0022: Cannot convert ‘int’ to ‘void’.

Again, with a tiny bit of detective work, this error is not too tricky to sort out. The compiler thinks you’re trying to make it force a value of type int to be a value of type void (which is what you’re returning), but this is impossible, even for computers.

2. Promise a Return Value, and then Cop Out

If we type a Function with anything other than void, we’re pledging to return a value. If we don’t return a value of that type, the compiler shows up on our doorstep in the middle of the night with mascara streaking her cheeks, demanding to know why you never do the things you say you’re going to do.

Here’s an example of a promise a programmer didn’t follow up on with a return statement:

function makeBabiesWithTanya() : int
{
    var numberOfBabiesWeCanHave : int = 17;
    // Honest.
}

So because the return statement is missing, this Function doesn’t actually give Tanya any babies. And that’s when she notices something is up:

Scene 1, Layer ‘Layer 1′, Frame 1, Line 5 1170: Function does not return a value.

This is one of the clearest error messages you’ll ever receive when using Actionscript 3. Let’s see how it looks in Unity javascript:

(no error)

Unity is clearly a lot more easy-going about this type of thing. Remember that when you’re thinking of which one you should invite on a road trip to Vegas.

3. Return the Wrong Datatype

If the Function is typed int, we gotta return an int. If it’s typed Array, we gotta return an array. Here’s an obvious boob:

function iAmConfused() : int
{
    return "nyearrrghhh";
}

This Function is typed int, but we’re returning a String. Here’s the Flash error:

Scene 1, Layer ‘Layer 1′, Frame 1, Line 3 1067: Implicit coercion of a value of type String to an unrelated type int.

Nice and clear. And in Unity javascript:

Assets/NewBehaviourScript.js(3,12): BCE0022: Cannot convert ‘String’ to ‘int’.

These are both very similar, and they do a pretty good job at getting the point across.

4. Faulty Logic

If you write a Function that should return a value, and you load it up with branching conditional logic, the compiler will actually step through that logic to make sure a value gets returned. Here’s an example of a logic structure that may never return the value promised by the Function:

function badLogic(playerName : String) : String
{
     if(playerName == "Pete")
     {
          return "Hi, Pete!";
     } else if(playerName == "Carl") {
          return "Hi, Carl!";
     }
}

So if the playerName is Pete, we return “Hi, Pete”, and if the playerName is Carl, we return “Hi, Carl”. But what if the playerName is Suzie, Jasmine, Turk, Paolo or Ferdinand? In that case, neither of the statements will get executed, and so it’s possible that the Function will not return a value.

Here’s what the Actionscript 3 compiler has to say about that:

Scene 1, Layer ‘Layer 1′, Frame 1, Line 9 1170: Function does not return a value.

Clear as crystal! And now, Unity javascript:

(no error)

Hmm. Now we’re up against a situation where permissive coding isn’t always a good thing. As a very new programmer, you might think “the fewer errors, the better”. But if you’re expecting that Function to return a value, and it somehow doesn’t, wouldn’t it be more helpful to see an error telling you what went wrong?

Answer: yes. Yes it would.

Your Triumphant Return

Those are the essentials of writing Functions that return values. Together with Understanding Functions and Understanding Functions – Arguments, you should have a complete picture of what Functions are and what they can do. But this is the HOW, not then WHEN of it. These articles just discuss the building blocks of Object-Oriented Programming. Assembly instructions, and even freestyle building – are entirely different matters altogether.

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

In Understanding Functions, we learned that Functions are a way to bundle code statements together into a tight little unit that we can invoke (or “call”) any time we like, and as often as we like. There are two very important features to learn about Functions: Arguments and Return Values. We’ll figure out Arguments in this article.

Til You’re Blue in the Face

Arguments aren’t as unfriendly as they sound. They’re just additional pieces of information we can send to a Function during a Function call. You’ll remember that a Function call looks like this:

doSomething();

Quite often, we need to pass additional information to Functions to make them super-useful. Let’s imagine we have a text input field where the player can enter his name. The player types in his name and clicks a button, and the game says “Hello, John” (or whatever the player’s name is). The dynamic, or changing, part of that Function is the player’s name. Here’s how that Function might look if it was “hard-coded”:

function sayHello()
{
    trace("Hello, John.");  // ain't nothing dynamic about this
}

Note: Unity javascript people will want to start the function name with a capital letter as a best practice, and use either print or Debug.Log in place of trace.

This is okay, but the problem is that every time we call (run, execute, do) that Function, it’s going to say “Hello, John.” What if the player’s name isn’t John? Well, we need to make that part dynamic, because it changes.

Dynamic!

Let’s set up our Function so that we say “Hello”, and then tack on a variable that holds the player’s name:

function sayHello()
{
    trace("Hello, " + playerName);
}

(When working with Strings, the + operator glues two strings together.)

It’s getting better, but we have a new problem: the code interpreter is going to see playerName and think “playerName? What the heck is that?” Then it’s going to freak out and the Earth is going to crash into the Sun, and we don’t want that.

We need to declare and define the playerName variable somewhere. But instead of just declaring playerName any old place, we’re going to tell the sayHello Function which playerName we’d like it to say. We’re going to set our sayHello Function up so that it has a parameter. We do that between the round brackets in the Function declaration:

function sayHello(playerName : String)
{
    trace("Hello, " + playerName);
}

Parameters go between the round brackets in a Function declaration. In the continuing tradition of seeing our blocks of code as visual elements, check this out:

When we structure a Function this way, we say that the sayHello Function accepts one parameter, which is called playerName. The type of playerName is a String (a list of letters and/or numbers). Notice that even though this is kind of like a variable declaration, we don’t need to use the var keyword.

Exact Change Required

i like to think of parameters as the payment that a Function accepts. The sayHello Function takes one argument and stores it in its first parameter. Since the first parameter is of type string, we need to “pay” it a string. If we pay any other datatype (int, float, number, boolean, array), the compiler will throw an error.

Here’s how we “pay” a string to the sayHello Function:

sayHello("Murphy");

Freeze frame! Let’s become the Pac Man-like code interpreter and follow the logic of this statement for a moment.

The interpreter gets to this line and recognizes it as a Function call, thanks to those round brackets at the end.

It also sees – hey! – the programmer has passed an argument to the Function inside those round brackets. So Pac Man puts that in his suitcase, hops in the DeLorean, and travels off in search of the sayHello Function.

When he finds it, before he starts chewing through the statements in the statement block (between the curly braces), the Pac Man-like code interpreter drops off the argument into the waiting playerName parameter bucket, between the round brackets of the Function declaration.

Now the parameter called playerName has a value of “Murphy”. Since “Murphy” is a String, and since the sayHello Function demands exact change (one argument of type String), we’re good to go!

With payment resolved, the code interpreter chews through the statements in the statement block (between the curly braces), reaches the bottom of the Function, and hops back in the DeLorean to pick up where he left off, back at the end of the Function call.

Because the value of the variable playerName is the String “Murphy”, the result is that the console/output window says Hello, Murphy. It will say Hello to whatever name we pass in as an argument.

Breakamage Pt.1 – Wrong Datatype

It’s really important to break code and cause errors, so that when you’re in a jam on a project and an error comes up, you’ll know what it means and how to deal with it.

Try tweaking the sayHello Function call so that you pass an int (integer/whole number) instead of a String:

sayHello(42);

42 is not a String. Your first clue is that it’s missing those double-quotation marks around it. Since the sayHello Function DEMANDS exactly one string as payment, the compiler throws an error.

This is what that error looks like when we use ActionScript 3:

Scene 1, Layer ‘Layer 1′, Frame 1, Line 1 1067: Implicit coercion of a value of type int to an unrelated type String.

i really take exception to the way eggheads write error messages. They could stand to be a LOT more clearly written. But here’s what this error is trying to say: “implicit coercion” means you’re trying to force something to be something else, and ActionScript 3 can’t manage it. In this case, you’re trying to force an int (42) to become a String when Pac Man delivers the goods to the sayHello Function, and the compiler is having a minor freak-out. That’s your clue that you may have passed a mismatched type as an argument to a Function.

This is the error message that the same mistake will cause in Unity javascript;

Assets/NewBehaviourScript.js(4,10): BCE0017: The best overload for the method ‘Tutorial.sayHello(String)’ is not compatible with the argument list ‘(int)’.

Ugh! You eggheads are killing me. Forget what an “overload” is and focus in on the part that (sorta) makes sense to you right now: something is not compatible with the argument list. You can see quite clearly that one is a String, and the other is an int. That’s your clue that you’ve botched the argument type. Go back and patch this up, and you’ll be golden.

Extremely Argumentative

So is that it? Can Functions only accept one argument? No … they can actually accept multiple arguments. Be sure to comma-separate them, like this:

makePizza("pepperoni", "mustard", "tree bark");
 
function makePizze(topping1 : String, topping2 : String, topping3 : String)
{
 
}

B..but … do they all have to be the same datatype (String)? Heck no! You can mix and match. The only rules are that you need to pass the arguments into the Function in the same order as the parameter list, and you need to pass the same number of arguments the Function requires. The Pac Man-like code interpreter unpacks these one at a time in order. So let’s pretend there’s a function that takes a String, an int and an Array (in that order):

function initPatient(patientName : String, age : int, aPhobias : Array)
{
 
}

As long as we pass in a String, an int and an Array, in that order, it works:

var theName : String = "Shaggy";
var theAge : int = 17;
var aThePhobias : Array = new Array("like, ghosts", "like, zombies", "like, creepy-crawly things");
initPatient(theName, theAge, aThePhobias);

That’s fine. But as soon as we mix up the order, there’s trouble:

var theName : String = "Shaggy";
var theAge : int = 17;
var aThePhobias : Array = new Array("like, ghosts", "like, zombies", "like, creepy-crawly things");
initPatient(theAge, theName, aThePhobias);
 
// ERROR!  Totally long-winded explanation that could really be made a lot more clear, but eggheads aren't about making other people's lives easier (unfortunately).  In short, argument type mismatch.

So far so good? You may have noticed that i made the names of the variables i passed into the Function as arguments conspicuously different than the names of the parameters i accepted in the initPatient Function. This is because i wanted you to see that there is a difference between these two things, and that there CAN be a difference. When you call a Function and pass it some arguments, the variable names you pass in don’t matter … it’s the values stored in those variables that Pac Man takes with him on his journey.

Breakamage Pt.2 – Wrong Number of Arguments

Just as sending in the wrong type of argument will throw an error (ie paying a quarter when the Function wants a nickel), the compiler will throw an error if you pass in the wrong number of arguments.

In this example, we have a Function that accepts one argument, but we try to pass it two arguments:

function eatBacon(numberOfStrips : int)
{
    trace("OM NOM NOM!  I just ate " + numberOfStrips + " strips of delicious bacon.");
}
 
eatBacon(57, "i can haz heart attack"); // ERROR!!

The function wants only one argument, but we’re sending it two. Here’s what the error looks like when we use Actionscript 3:

Scene 1, Layer ‘Layer 1′, Frame 1, Line 6 1137: Incorrect number of arguments. Expected no more than 1.

Thankfully, this is one of the clearest error message i’ve ever seen an egghead write.

This is what the error looks like when we use Unity javascript (changing trace to either print or Debug.Log and using a capital letter to begin our Function name):

Assets/NewBehaviourScript.js(8,9): BCE0017: The best overload for the method ‘NewBehaviourScript.eatBacon(int)’ is not compatible with the argument list ‘(int, String)’.

That’s the same error we get when there’s an argument type mismatch, so the Actionscript eggheads did a slightly better job of communicating the problem than the Unity eggheads did. The important thing is that you learn to recognize why Unity or Flash are throwing the error so that you can fix it quickly and get on with your project.

Note that you’ll throw an error even if you “overpay” a Function. If a Function wants exactly two arguments, and you give it nine, you’ll get one of these errors.

But Wait – There’s More!

There are two more advanced topics when it comes to passing and accepting arguments – optional arguments, and Rest arguments. They’re useful, but not crucial. We’ll be sure to cover them in future articles.

For now, get some practice passing arguments to your Functions, and writing parameters to store those articles. The fate of the free world may depend on it! Or whatever.

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

Bang on De Drum All Day

Here’s a secret about programmers: they are inherently lazy. The less typing a programmer can do, the better. Programming is all about dreaming up complex tasks that programmers don’t want to do, and delegating those tasks to a computer so that the programmer can blow off and watch cartoons the rest of the day.

Many programming structures are designed to make a programmer’s life easier. And a programming rule of thumb is generally that if you have to type something twice, there’s an opportunity to make your code more efficient.

Functions make your code more efficient. Let’s imagine a game where we need to create a bunch of monsters. If you’ve read Understanding Loops, you know that you can set up a loop to run an action multiple times. i’ll use a combination of pseudocode (in comments) and real code to demonstrate:

// Make 50 monsters.
var totalMonsters:int = 50;
var i:int = 0;
for(i=0; i<totalMonsters; i++)
{
    // make a monster
}

So far so good. But there are a few other things we have to do with these monsters we create. We need to put each one on a hill. Then we need to dress each monster up in a Power Hat. Next, we need to hide a key to each monster’s hilly domain. Let’s modify the loop:

// Make 50 monsters.
var totalMonsters:int = 50;
var i:int = 0;
for(i=0; i<totalMonsters; i++)
{
    // make a monster
    // put the monster on a hill
    // put a power hat on the monster
    // hide a key
}

Mmmm … we’re almost there. Now we need to create a portrait for that each monster and put it inside the castle, so that when the hero defeats a monster, the portrait gets a big checkmark on it. Then we need to create a magic gem that will kill each monster. Each gem needs to be buried somewhere underground. Finally, we need to create a villager for each monster in the game. Each villager will give you a clue as to where to find the monster-killing gem.

// Make 50 monsters.
var totalMonsters:int = 50;
var i:int = 0;
for(i=0; i<totalMonsters; i++)
{
    // make a monster
    // put the monster on a hill
    // put a power hat on the monster
    // hide a key
    // create a portrait
    // put the monster's face on the portrait
    // put the portrait inside the castle
    // create a gem
    // bury the gem underground
    // create a villager
    // give the villager a gem clue
}

Oh man. This loop is getting real ugly, real fast. There’s so much STUFF in there. It’s getting out of control.

If we take a close look, we see that we’re running a few tasks that can be grouped together. All the monster stuff goes together. All the key stuff goes together. The gem stuff goes together. The villager stuff goes together. That’s four separate bundles of tasks that, like a pile of sticks, we should be able to wrap up with twine in a tidy little package.

I Have a Tiny Little Package

That’s one of the things Functions do for us: they allow us to group related tasks together into a little package, and we can refer to that package over and over again without having to repeat any lines.

A Function declaration looks very much like a variable or array declaration. Instead of the var keyword, we use the function keyword. In ECMA-based languages like Actionscript 3, Unity javascript and C#, functions are followed by round brackets. Then you open up a statement block between curly brackets, just like in a For Loop or a conditional (If) statement:

function doSomething()
{
   // statements go here
}

Note: If you’re using Unity javascript, best practice is to begin a function name with a capital letter.

So doSomething is our function name. That’s a custom name that we came up with. It makes a lot of sense to use verbs (action words) when naming your functions. We’ll see why in a moment.

Let’s carve out the statements involving the monsters and put them in their own function:

function initMonsters()
{
    // make a monster
    // put the monster on a hill
    // put a power hat on the monster
}

(the “init” here is short for “initialize”, which means “set it up”)

Now, back in the loop, we can substitute those three statements with a Function call. A Function call always uses the name of the function, followed by round brackets, with a semi-colon to end the statement. Take a look:

// Make 50 monsters.
var totalMonsters:int = 50;
var i:int = 0;
for(i=0; i<totalMonsters; i++)
{
    initMonsters(); // We removed these three statements and put them in their own function.
    // Now, we just call the function.
 
    // hide a key
    // create a portrait
    // put the monster's face on the portrait
    // put the portrait inside the castle
    // create a gem
    // bury the gem underground
    // create a villager
    // give the villager a gem clue
}

In common programming parlance, this is called calling a Function.

To understand how a function call works, we need to put ourselves back in the role of our code interpreter, which is a lot like Pac Man.

Pac Man hits the first statement in the loop. It’s a function call. So he jumps out of the loop to wherever the Function is declared, and chews through all of the statements in that Function. When he reaches the bottom of the Function, he bounces back to the loop again, and resumes chewing through code at the very next line.

This works very nicely. Now we can go through and offload all of our chunks of functionality into their own Functions. When we write it all up, i looks something like this:

// Make 50 monsters.
var totalMonsters:int = 50;
var i:int = 0;
for(i=0; i<totalMonsters; i++)
{
    initMonsters();
    initKeys();
    initPortraits();
    initGems();
    initVillagers();
}

Look how much easier to read that loop is now. It’s very clear that we loop 50 times, and each time we make some monsters, some keys, some portraits, some gems, and some villagers. The details for each process are buried in their respective functions. Now, when we look at the initKeys function, we only have to worry about tasks related to initializing those keys.

This bouncing around that the Pac Man-like code interpreter does is the reason why i say that Object Oriented Programming (OOP) is like taking multiple plane flights through time portals.

There are two more very important things to learn about functions: Arguments and Return Values. These are detailed in two additional articles. Once you read through those, you’ll know almost everything there is to know about Functions, and you’ll be ready to start putting that knowledge into practice by building your own stuff!

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

Now that we understand loops, and we understand arrays, we’re ready to smack their featureless plastic genitals together like we’re making Barbie have babies.

Arrays really come alive with Loops. By using an Array’s length property as the loop limiter, we can step through every element in an Array one by one.

Here’s what that looks like in code:

var myArray:Array = new Array("Nigel Tufnel", "Derek Smalls", "David St. Hubbins");
 
var i:int =0;
for(i=0; i<myArray.length; i++)
{
    trace(myArray[i]); // This prints each element in the array, one by one, to the console/output window 
}

Note: If you’re using Unity javascript, try print or Debug.Log instead of trace.

If you truly understand Loops, this shouldn’t be too challenging for you. Instead of using some arbitrary value like one thousand as our limiter, we’re using the array’s length property, which is the number of elements in the array. This property is dynamic, so that any time we add things to our array, or take them away, length is updated for us. We don’t have to rely on a hard-coded value (which means a number that doesn’t change).

The code snippet shown above traces out each element in the array, one after the other:

• Nigel Tufnel
• Derek Smalls
• David St. Hubbins

This is because on every iteration of the loop, our iterator variable called i is increased by one.

i begins life with a value of 0. On the first run through the loop, the code interpreter resolves myArray[i] to myArray[0]. The first element in the array, at index 0, is “Nigel Tufnel”, so that’s what you’ll see in the output console.

On the next iteration, i gets jacked up to 1. The element at index 1 in the array is “Derek Smalls”, so that’s what prints out.

Finally, in the third and final round, we print out “David St. Hubbins”, because myArray[i] resolves to myArray[2]. The element at index 2 of the array is “David St. Hubbins”.

After that, the interpreter bounces back to the top of the loop. i is incremented to 3. We check the limiter:

i < myArray.length

Because i is 3 and myArray.length is also 3, this line resolves to 3 < 3. Since 3 is not less than 3, the answer here is false. And because the answer is false, the code interpreter is not allowed to go through the loop any more. It happily exits the loop and starts chewing through the code beneath the bottom closed curly brace that ties up the loop.

Protip: If you’re a stickler for speed, it’s marginally faster to store myArray.length in a variable, to prevent your interpreter from having to do the length calculation on every iteration of your loop. Here’s what that looks like:

var myArray:Array = new Array("Nigel Tufnel", "Derek Smalls", "David St. Hubbins");
 
var i:int =0;
var len:int = myArray.length;
for(i=0; i<len; i++)
{
    trace(myArray[i]);
}

We store myArray.length in a variable called len, and then refer to that variable in the limiter section of the loop header.

For even more of a tiny speed increase, do away with the new keyword and declare the array like this:

var myArray:Array = ["Nigel Tufnel", "Derek Smalls", "David St. Hubbins"];

Who Cares?

This is all still pretty pointless. When are you ever going to use this when programming a game? Well, for the rest of the article, i’ll lay some real-world examples on you to give you an idea of how to maximize the wonderful union of Loops with Arrays.

Think of any situation in a video game when you have a list of similar things. In a first person shooter, you need to keep track of all the bullets that get fired. Makes sense to create an array to store all of those bullets. You can add bullets to the list and remove them from the list using the Array class methods we looked at in the Understanding Arrays article.

Most games run on one giant loop, with an Update process and a Draw process. Update figures out where everything should be, and Draw renders those things to the player’s view. If you want to update the positions of all the bullets, you may need to use a For Loop to loop through your collection of bullets and move them one tiny bit. Then in the Draw process, you loop through your list of bullets and render them to the screen. When you repeat these processes quickly enough, you get the illusion of animation.

Very often, you’ll use a loop to create the initial array of objects, and then more loops later to pick through that list. Here’s an example of two functions. One initializes all of the monsters, and the other kills all of the monsters (assuming the player just used the “Kill All Monsters” megabomb power-up).

var aMonsters:Array; // this array is a bucket that can hold many things: namely, monsters.
 
function initMonsters():void
{
     aMonsters = [];  // Defines an empty instance of the Array class.
     var totalMonsters:int = 50; // this is a variable (bucket) that contains the number of monsters we'd like to begin with
     for(var i:int = 0; i<totalMonsters; i++)
     {
         aMonsters.push(new Monster()); // Creates a new instance of the Monster class, and adds that instance to the aMonsters array.  
         // If that's confusing to you, we can split this up into two separate lines:
         // var monster:Monster = new Monster();
         // aMonsters.push(monster);
     }
}
 
function killAllMonsters():void
{
     var len:int = aMonsters.length; // store the length of the aMonsters array in a variable called len.
     // By doing this, we speed up our loop ever so slightly.
     for(var i:int = 0; i<len; i++)
     {
         var monster:Monster = aMonsters[0]; // stores a reference to the first monster in the array
         monster.die(); // calls some sort of death method on the monster instance
         aMonsters.shift(); // removes the first element of the array.  The aMonsters array gets shorter and shorter every time we loop, as we remove monster after monster.  By the end of this loop, the aMonsters array is empty.
     }   
}

Note: If some of the initialization stuff here looks a bit spooky, try reading the Understanding Classes series. Hopefully you’re catching what i’m throwing regarding loops and arrays, even if the class stuff is a little unfamiliar.

For Unity javascript: Everything here is almost identical … the main difference is that methods like push begin with capital letters.

Those double-slashes, by the way, are comments. They are ignored by the compiler, and are added to clarify the code.

Get Carded

Here’s another example. Let’s say we’re programming a card game. We can use an array to store our deck of cards. Each element in the array is a card. We use one loop to build the deck. Then we shuffle the deck. Finally, we use a loop to deal some cards onto the table, using the Array.shift() method to deal off the top of the deck. This removes the cards from the array one by one, and adds them to a different array called aCardsOnTable.

var aDeck:Array; // declare an array to hold all the cards
var aCardsOnTable:Array; // declare an array to hold the cards that we deal out
 
function buildDeck():void
{
    aDeck = []; // create an empty instance of the Array class and store it in a variable called aDeck
    var totalCards:int = 52; // we want 52 cards in the deck, so that's how many times we'll loop
    for(var i:int=0; i<totalCards; i++)
    {
         aDeck.push(new Card()); // we instantiate the Card class, and add the new card instance to the aDeck array.
         // Once again, if we're doing too much in this line for you to follow along, here's a longer version of the same code in two steps:
        // var card:Card = new Card(); // create the card instance and store it in a variable
        // aDeck.push(card); // add the card instance to the aDeck array
    }
    shuffle(aDeck); // this is a custom function that you'll probably have to write yourself (just like the Card class).  It randomizes all of the elements in the array.
}
 
function dealCards():void
{
    aCardsOnTable = []; // define aCardsOnTable as an empty array
    var numCardsToDeal : int = 5; // Let's deal 5 cards to the table.
    for(var i:int=0; i<numCardsToDeal; i++)
    {
         aCardsOnTable.push(aDeck.shift()); // pulls the first element out of aDeck, and adds it to aCardsOnTable
         // That's a bit of shorthand.  Let me blow that line out into separate steps in case you're having trouble following it:
         // var topCard:Card = aDeck.shift();  // use shift to pull out the first card in the aDeck array, and store it in a variable called topCard
         // aCardsOnTable.push(topCard); // add the card we removed to the end of the aCardsOnTable array.
    }
    // When we finish with this loop, there are 5 cards in the aCardsOnTable array,
    // and 47 cards left in the aDeck array.
    // This is a great way to deal out cards!   By removing a card from the aDeck array each time using shift(), we ensure that we'll never deal the same card twice.
}

Those previous two examples are very similar. Here’s another real-world example that’s slightly different.

Looping Through Movieclips on the Stage

Super eggheads like to lay out their GUIs (graphical user interfaces – buttons and windows and text boxes and junk) entirely in code. i don’t prefer to do it that way, because i’m a very visual person, and i like to see my interface laid out on-screen. i like to be able to poke, prod and nudge things around visually.

So often, i’ll have a bunch of buttons on the stage. The buttons all have instance names. i’ll put those instance names in an array, and then loop through the array to add standard buttonMode, rollover and rollout effects to all the buttons in one shot. Here’s how that looks, presuming i have the buttons “phyiscally” on my stage and named properly:

 
 
// i call the initBtns function somewhere in my code
 
function initBtns():void
{
    var aBtnNames:Array = ["btnPlay", "btnQuit", "btnCredits"]; // we store the instance names of my on-stage buttons in an array
 
    var len:int = aBtnNames.length; // Let's dynamically loop through as many buttons as we have in the array.
    for(var i:int=0; i<len; i++)
    {
         activateBtn(this[aBtnNames[i]]);
         // Here's a slower, possibly clearer way to say that:
         // var btnName:String = aBtnNames[i]; // Refers to the i'th element of the array
         // var btn:MovieClip = this[btnName] // Refers to a movieclip instance on stage with that name
         // activateBtn(btn); // Passes the reference to that button to the activateBtn function
    }
}
 
function activateBtn(btn:MovieClip):void
{
     // This is standard stuff i want all of my buttons to do:
     btn.buttonMode = true;
     btn.mouseEnabled = true;
     btn.mouseChildren = false;
     btn.addEventListener(MouseEvent.MOUSE_OVER, rollOverBtn);
     btn.addEventListener(MouseEvent.MOUSE_OUT, rollOutBtn);
}

Of course, an even better way to handle this button situation is to create your own custom button class, but we’re taking baby steps here. That’s the thing about code – these pieces we’re learning are like Lego blocks. There are tons of different ways to build a sculpture out of Lego. There are no “right” ways – only preferred ways. Use this Understanding … series to get a grip on all the blocks you have to play with, and then … it’s time to play!

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

It’s a great idea to back up and read Understanding Arrays if you haven’t already. The reason is that Loops and Arrays go hand-in-hand. Loops are the interface we use to do interesting things with Arrays. You might think of Arrays as an mp3 player, and Loops as headphones … if you try to use either of these things separately, they may not seem too terribly useful. But put them together, and boy … beautiful music happens. Unless you’re listening to Nickelback.

That’s why the next article in this series is called Understanding Loops with Arrays. For now, just muscle through this article to understand what loops are all about – i’ll try to make it somewhat interesting. The beautiful music starts playing in the next article.

Pac Man

Your code is usually chewed through, line by line, by an interpreter. The interpreter is like Pac Man. It eats the first line, and carries out its instructions. Then it eats the second line and carries out those instructions and so on, until the end of your program. Earlier programming languages had each statement numbered, and the Pac Man code interpreter would chew through each one.

Object-oriented programming (OOP) does away with those line numbers and sends Pac Man flying all over the maze a little bit, jumping into and out of chunks of code.

But imagine for a second that your Pac Man code interpreter has to eat straight down the page to the bottom, to the last line of code. If you want to do things more than once, you have to write the command more than once:

// This is pseudo-code, which means you can't really copy/paste it and expect it to work,
// but it's very readable.
eat a power pellet;
eat a power pellet;
eat a power pellet;

Fine. Pac Man eats a power pellet three times.

Hungry Hungry Pac Man

But what happens if your code interpreter needs to do something more than three times? Say, fifty times. Or a thousand? Now you’re going to have that same line repeated a thousand times down the screen. Yuck.

Or even worse, let’s say there are a number of instructions we want to carry out, and we want that set of instructions repeated:

// This is pseudo-code, which means you can't really copy/paste it and expect it to work,
// but it's very readable.
eat a power pellet;
give Ms. Pac Man a smooch;
punch a ghost in the face;
 
eat a power pellet;
give Ms. Pac Man a smooch;
punch a ghost in the face;
 
eat a power pellet;
give Ms. Pac Man a smooch;
punch a ghost in the face;

Now you’ve got a real problem. Your little set of instructions, repeated a thousand times, adds three thousand lines to the code – four thousand with line breaks. This code becomes ridiculous to manage and maintain, it looks ugly, and it takes up way too much room.

Enter that frustrated mom from every infomercial ever: “There’s got to be a better way!”

Loops are the better way. You build them to make the interpreter repeat an instruction, or set of instructions, a bunch of times. When the loop is done, the interpreter continues on its merry way down the page, chewing through each subsequent instruction you’ve written for it.

The Anatomy of a Loop

Here’s what a loop (often called a “for” loop) looks like in Actionscript 3 and other ECMA-based languages:

for(var i:int = 0; i<1000; i++)
{
}

Let’s break it down piece by piece.

You’ll notice there are two sections: the declaration line, and those curly braces.

The instructions you want to repeat go in between those curly braces, like so:

for(var i:int = 0; i<1000; i++)
{
    eat a power pellet;
    give Ms. Pac Man a smooch;
    punch a ghost in the face;
}

That declaration line looks pretty hairy, though. Let’s break it down.

Notice that the whole thing is just the word “for” followed by open and closed round brackets. If we completely gut the loop, it looks like this:

for()
{
}

Doesn’t look so scary any more, yeah?

The stuff between the round brackets is split up into three sections:

1. Start here.
2. Keep looping as long as this is true.
3. Do this after every run through the loop.

The first and second sections are separated by a semi-colon, which is the dot-above-the-comma symbol that we usually use to end our statements.

1. Start Here

A “run” through a loop is called an iteration. In order to keep count of how many times we’ve looped, we use a variable called an iterator. Because the word “iterator” starts with the letter “i”, it’s common practice to use “i” as the iterator variable name.

So you need to declare and define that variable first, to give your loop a starting point. Depending on how picky your language is, you may have to type the variable (give it a datatype). Here are two examples of loops written in a permissive vs. strict language:

// Permissive, like Unity javascript:
for(i=0; i<1000; i++)
{
}
 
// Strict, like Actionscript 3:
for(var i:int=0; i<1000; i++)
{
}

So the only real difference is that in the stricter language, we had to declare the iterator variable using the “var’ keyword, and we had to expressly say that it was an integer datatype (whole number) by adding “:int” to the end of the variable name.

Note that you can also declare the iterator outside the loop, and define it inside the loop header:

var i:int;
for(i=0; i<1000; i++)
{
}

i like doing this, because it makes my loop header look cleaner. If i have more than one loop in my program, the compiler throws an error if i use the var keyword to declare the iterator more than once. That means that if i quickly copy/paste a loop where the iterator is delcared inside the header, the compiler yells at me:

for(var i:int=0; i<1000; i++)
{
}
 
for(var i:int=0; i<20; i++) // ERROR!  You've already declared a variable called i, dummy.
{
}

Meanwhile, this does not throw an error:

var i:int;
for(i=0; i<1000; i++)
{
}
 
for(i=0; i<20; i++) // No error. We're just resetting i to zero.
{
}

What this section does is set the value of a variable called i to zero. i is our counter that will keep track of how many times we’ve run through the loop.

Now, onto the second section of that confusing header.

2. Keep looping as long as this is true.

Every time the Pac Man interpreter starts to chew through this loop, he’s going to check the second section. This section tells him “you’re okay to chew through this loop, as long as this statement resolves to true.”

What do i mean by “resolves”? Imagine you take a bunch of ingredients and put them in a pan, and then bake what’s in the pan. You’ve resolved the ingredients into a cake. In the same way, we’re going to resolve the ingredients in this statement until they result in either true or false.

Here’s an easy one:

3<5

That statement resolves to true, because 3 is less than 5. But this statement:

3>5

resolves to false, because 3 is not greater than 5. These are the same rules we follow when we’re setting up conditional if statements. If you need a review, check out Understanding Operators, and Understanding Conditionals. (note: i haven’t written these articles yet, but they’re on the way!)

Things get a touch more complicated when variables are involved. Take this statement:

i<5

That's not as straightforward. i is the name of a variable (a bucket) that holds a value. Whether this statement resolves to true or false really depends on the value of i. If the value of i is 3, the statement resolves to true. But if the value of i is 867, the statement resolves to false.

You can put all kinds of complicated nonsense into the second section of your loop header. Regard:

var i:int;
for(i=0; (i<1000 && theSunIsShining) || dogsLoveBacon(); i++)
{
}

In English, that second section now reads “run through the loop as long as the value of i is less than one thousand and the value of theSunIsShining is true, OR if the function dogsLoveBacon returns true.

Gross! Let’s keep it simple. When i was first learning programming, i’d sometimes write very complicated loop limiters, and i’d always regret it. It’s rare that you see anything beyond a simple i in this second section.

3. Do this after every run through the loop.

The third and final section of the loop header tells the interpreter what to do after it chews through the last statement inside the curly braces of the loop. The interpreter gets to the bottom, does whatever is in the third section, and then checks the second section to see if it should run through the loop again. (If that’s confuding, don’t worry – we’ll take a closer look at that process in a moment.)

In most cases, this third section will say i++. That’s the increment operator, which is code shorthand for saying “add 1 to the value of i”. So every time through the loop, the counter goes up by one.

Again, you can make this bit crazy complicated if you like. You could say something like i+=Math.sqrt(beesHaveKnees()), which means “add the square root of the value returned by the beesHaveKnees function to the value of i”. You can even comma-separate multiple statements by saying i++, j++, which means “increment the value of i, and also increment the value of j”. You can do this, but in day-to-day vanilla programming, and especially just starting out, you’ll want to keep this stuff very, very simple.

Follow the Interpreter Through the Loop

So let’s trace the path of the Pac Man code interpreter through our loop.

1. Do what’s in the first section first. In this case, we set the value of the iterator variable i to zero.

2. Check to see if the second section resolves to true.

3. If it does resolve to true, chew through all the statements in the statement block (the stuff between those curly braces). A power pellet gets eaten, Ms. Pac Man gets some lovin’, and a ghost gets his just desserts.

4. When you finish chewing through the last statement in order, do what’s in the third section. In this example, we increase the value of i by one. The value of i (0) plus 1 equals 1, so the second time through the loop, i equals 1.

5. Check the second section to see if it resolves to true. In our example, the value of i (1) is indeed less than 1000, so our interpreter should chew through all the statements in the loop body again. He eats another power pellet, plants another kiss, and dispatches another ghost.

6. Let’s pretend we’ve gone through the loop 1000 times. Pac Man’s gluttony continues unabated, Ms. Pac Man struggles to cope with her husband’s relentless sexual advances, and his plan for spectral genocide is finally complete. At the bottom of the loop, the value of i is 999. (Note: it’s not 1000, because we started counting at zero)

7. The interpreter jumps to the top of the loop header, and does what’s in the third section. Adding 1 to the value of i puts it at 1000.

8. The interpreter looks at the second section of the loop header to determine whether it should go through the loop again. This time, i is not less than 1000. (1000 is not less than 1000.) So because this statement resolves to false, the interpreter exits the loop, and continues after the closed curly brace at the bottom of the whole structure.

9. Our Pac Man-like code interpreter exits the loop and smugly strikes a pose.

A Real-World Example

None of the code in this article will actually run properly, so here’s a chunk that will:

var i:int;
for(i=0; i<5; i++)
{
    trace("The value of i is " + i);
}

(If you want it to work in Unity javascript, change “trace” to “print” or “Debug.Log”, and you should see the results of the loop pop up in the Console window.)

As i mentioned off the top, loops on their own are very useful for keeping our programs down to a manageable size, but they really come alive when we combine them with Arrays. In the next article, Understanding Loops with Arrays, we’ll see how these two code constructs, when married, are a match made in programming heaven. And if we’re lucky, we’ll even see Pac Man tried as a war criminal. Join me, won’t you?

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

]]>