Code and Visual

Creative Design and Development

Code and Visual specialise in web and mobile development including, HTML, Javascript, jQuery, Flash and mobile games, applications and digital film & TV props for a variety of clients both large and small.

We also develop Rainbow - an extremely simple and flexible Flash CMS for small to medium based Flash websites.

Try rainbow now >

Posts Tagged Flash

Exporting for iPhone using Air 2.7 and FlashDevelop – Part Three, Generating Developer Certificates, Provisioning Profiles and .p12 files

Jun 28

Posted by admin in Air, FlashDevelop, iPhone, Tutorials, Uncategorized

Continuing on from Part Two of the Exporting for iPhone using Air 2.7 and FlashDevelop Tutorial You should have a FlashDevelop project built and ready to export your swf file for conversion into an iOS friendly .ipa file. In Part Three we will learn about the certificates required by Apple in order to create your .ipa file and get it on to your device. For the time being we will be compiling for testing directly on a device as opposed to uploading to the App Store, which requires slightly diferent certificates. A word of warning, although I’m generally a PC user, this stage will require a Mac in order to generate a certificate request and then convert our certificate into the right .p12 format. There is a PC alternative to this for which I’ve linked below.

Frank Costanza

Serenity Now

I’ll start be releasing all of my Apple angst and putting it to the side. I found this part of the process to be confusing and frustrating, not in the least because in comparison to the Android work flow this whole process is unnecessary. The ironic part for me was that compared to how hard Apple have applied themselves to the “it just works” philosophy for consumers, I felt the exact opposite about the developer experience. A big part of the reason was seamingly arbitrary processes that weren’t well explained and used a lot of new jargon. The most telling observation is probably that from a standing start it took me about 2 days to complete on iOS what took about 20 minutes on Android – having had no previous experience with either. But let’s move on because it’s all worth it once you get your app playing on the device, just know that inside I’m gritting my teeth as we walk through most of these steps. Apoligies if some of my frustration seeps out.

Apple Developer Centre

The first thing you’ll need is an iOS Developer account (and a credit card because these cost $99 a year). Once you’ve paid your ransom you can log in to the iOS Dev Center (this seems to work better in non-ie browsers):

http://developer.apple.com/devcenter/ios/index.action

From a Flash developer’s point of view you’ll only need to come to the The iOS Dev Center in order to generate and register certificates. We’ll also need it to register the particular device we wish to test on but more about that later. I’d almost ignore everthing else as the bulk of the content is aimed towards Apple developers working in XCode. So, by way of explaination, we will require two things in order to build and test our app on an iOS device, these are:

  1. A developer certificate – this allows you to create a .p12 file to sign and compile your app to ipa format
  2. A provisioning profile – this allows you to test your app on your particular device

Maybe it’s just me, but even writing the above sounds a little confusing because they are new terms that I don’t have any past experience with. Ultimately these are just authorisation keys to register your app, one is for you as a developer, and the other is sort of like a sub-authorisation for your app/device combination. Here’s a handy glossary that Adobe put together to help do a bit of the explaining.

Developer Certificate

The first thing we need to do is to get Apple to generate us a Developer Certificate. Sounds simple enough, but unfortunately it’s a multistage process and in my workflow I switch over to my trusty Mac Mini to take the path of least resistance. For those of you without access to a Mac, there’s a windows alternative method that Adobe has graciously explained, click the link below for more info:

Generating a Certificate Signing Request for iOS using Windows

On the Mac we open up “Keychain Access”. Being unaccustomed to Mac I wasn’t sure what this was or where to find it, but it seems to be the central OSX authorisation manager covering various software and devices within the Mac ecosystem. You can find it by going to Applications>Utilities>Key Chain Access.

A quick reference on locating the Keychain Access, Step 1

Mac Utilities

step 2

Mac Keychain Access

The process is then as follows (from Adobe’s tech note):

  • On the Keychain Access menu, select Preferences.
  • In the Preferences dialog box, click Certificates. Then set Online Certificate Status Protocol and Certificate Revocation List to Off. Close the dialog box.
  • On the Keychain Access menu, select Certificate Assistant > Request a Certificate from a Certificate Authority.
  • Enter the e-mail address and name that matches your iPhone developer account ID. Do not enter a CA e-mail address. Select Request is Saved to Disk and then click the Continue button.
  • Save the file (CertificateSigningRequest.certSigningRequest).

Once you’ve saved the file to your hard drive you may as well stay on the Mac as we’ll be using it again later to create a .p12 file. Back at the iOS dev centre you can now upload this request file and get a developer certificate in return. Why all of this can’t be done magically behind the scenes on a web interface is a mystery, but that seems to be a common theme in this process.

In the IOS Provisioning Portal, click on “Certificates” in the right hand column, and then the “Development” tab in the main content area that appears on the right. From here you can go down to the bottom and click on the button to upload your Certificate Signing Request (CSR) for Apple to approve. Once you click Submit you can go back to the Development tab, if you’re not taken there automatically, and you should see your certificate listed. It might say “Pending” next to it, but if you refresh once or twice it should switch to “Issued”. Download it to your machine and then go back to Keychain Access so that we can add it to your machine. Select File > Import and then navigate to the certificate (the .cer file) you obtained from Apple. We’ll come back to Keychain Access later in order to generate a .p12 file.

Registering Your Test Device

In order to eventually test your app on an actual device you’ll need to register it and then add a provisioning profile on the device itself to allow your app to be installed.

The first step in this process is to find out the Unique Device ID (UDID) of your iPhone/iPod/iPad. The quickest way I know of is to hook up your device to your computer and open up iTunes. Locate your device in the left hand column (under “devices”) and click on it to open up the summary page in the main area on the right. In the first section iTunes should be displaying information about your device including Name, Capacity, Software Version and Serial Number. For some reason Apple decided they couldn’t list the UDID of your device just blatantly out there for you to see, so instead you need to know the secret place to click in order for it to appear. And that place is on the serial number. One click on the serial number and it will show your UDID which you can copy and paste (trust me, even though there is no way to selct the text, once you click you can do a ctrl+C and the UDID will be copied to your clip board).

Find Your UDID

With your UDID in hand, return to the Provisioning Portal and on the left hand column select the “Devices” option. In the Manage tab on the right hand side click on the “Add Devices” button. Here you can name your device and enter in it’s UDID.

Creating an App Id

Next we will create an App ID which will register your app and allow it on to your iOS device. On the left hand column of the iOS Provisioning Portal select the “App IDs” option and then in the main content area on the right click on the “New App ID” button. Some of these options feel a bit arbitrary and it’s not immediately obvious when and how these will be used later down the track, despite the tips Apple have given.

The first thing you need to add is a title for your app, this is purely for identification within the Portal and can be something nice and pretty like “My Awesome App” – basically the title of your app will suffice.

Next it’s the bundle seed ID, and for our purposes we’re just going to take the simple route and choose “Generate New”. From what I can tell it’s possible to have more than one app bundled together into a sort of suite which can utilise the same Bundle seed, but let’s just consider this a one off for now.

Finally you have to add a unique Bundle Indentifier which is appended on to the end of the Bundle seed in order to create the complete App ID. Probably the best advice here is to follow the same approach most people use when creating package names in AS3 and use your domain url in reverse in order to be sure that you have something truly unique. (It seems that you have to provide something that is unique not only to your own projects, but to every other app out there in Apple land). So for me I’d enter in something like com.codeandvisual.myawesomeapp. It’s not important to understand too much else, just enter in those 3 things and click Submit. At this point you should be taken back to the Manage tab of the App IDs section and your new App ID should be listed at the bottom.

Creating a Provisioning Profile

Now we are able to create what is known as a Provisioning Profile. You’ll generate this using your certificate and your App ID and will be needed to allow you to get your App onto a registered iOS device. Click on the “Provisioning” option on the left hand menu of the iOS Provisioning Portal and then make sure you are on the “Development” tab of the page that loads. (You’ll switch to distribution when it’s time to actually submit your app to the AppStore). Here you can enter the required details:

  • Enter in a name. (I just use the same name as my App as they are ostensibly tied together anyway).
  • Select the Developer Certificate to use (you should only have one option to check there).
  • Select an App ID (again you should have only one at this point to chooseyour new Profile form).
  • Choose which device you’ll be uploading and testing on (again if this is your first walk through the process you’ll have only one).

Click Submit and you should see your new profile listed on the page that loads. Again this might have a status of Pending, but refresh the page and it should have updated to “Active”. We’ll install this onto our device next, so download the file and open up iTunes.

Make sure your device is plugged in and iTunes has finished synching or whatever it needs to do. Go to File>Add File To Library and select your provisioning file. Sync your device again one more time for luck and your device should be ready to receive your App when it’s compiled.

A little tip I read to double check that your provisioning file is actually installed is to try and add the file again in the same way – iTunes should tell you that a version already exists on the device if all was done correctly. You can be more categorical by going to your device and opening settings>general>profiles and seeing if your Provisioning Profile is listed.

Creating a .p12 File

You’re almost free of the Mac specific steps now besides one last thing, and that is to create the .p12 file which will allow you to compile your .swf to a .ipa file. For a quick footnote, here’s a definition I found about what a .p12 file actually is:

The P12 file type is primarily associated with ‘Personal Information Exchange File’. In cryptography, a public key certificate (or identity certificate) is a certificate which uses a digital signature to bind together a public key with an identity. The certificate can be used to verify that a public key belongs to an individual. This is a PKCS #12 file. In cryptography, PKCS refers to a group of Public Key Cryptography Standards devised and published by RSA Security.

All we really need to know is that it’s an authorisation certificate to please the Apple ecosphere Gods so they allow us to put our awesome app onto our device. Geez, thanks for that. In order to do so we’ll jump back to the Mac. Again there is a way to do this on windows machines which I will link to below, but for sake of ease I’m going to go the Mac path.

Click here to read how to create a .p12 file on a Windows machine

In Mac world we need to go back to the Keychain Access and from there Adobe’s notes say it best:

  • Select the private key associated with your iPhone Development Certificate.
    The private key is identified by the iPhone Developer: public certificate that is paired with it.
  • Select File > Export Items.
  • Save your key in the Personal Information Exchange (.p12) file format.
  • You will be prompted to create a password that is used when you attempt to import this key on another computer.

This .p12 file is the key to allowing you to compile a .ipa file from your .swf and install it onto your machine. Copy this to a folder handy to your development machine and you’re ready to rock’n'roll.

Licence to Ill

From this point on you shouldn’t require a Mac at all so, if you’re like me, you can power down your Mac Mini until next time you’re required by the powers that be to do something on a Mac just because they said you have to. That next time may well be when it comes time to create a deploy version of your app which will require you to redo a portion of these steps in order to upload an Appstore approved build. We’ll get to that in a later tutorial, but until that point you can fairly much develop away as you please.

Next.

In the Part Four we’ll go through the process of using the .p12 certificate and provisioning profile to generate your .ipa file ready for uploading onto your iOS device for testing.

Index

Part 1 – Installation
Part 2 – Creating an iPhone Project
Part 3 – Generating Developer Certificates, Provisioning Profiles and .p12 Files
Part 4 – Creating an Air Certificate and Compiling to .IPA
Part 5 – Loading your .IPA File onto a Test Device

Tags: , , , , ,

3 Comments

Game In Development – Spider Leap

Jun 26

Posted by admin in Uncategorized

With the recent release of Air 2.7 Adobe is claiming that they’ve increased performance by up to 4 times what was previously possible. You have to take that with a grain of salt though as the proof is always in real world use and while I would definitely say 2.6 was a vast improvement upon 2.5, I’ve not seen a quantum leap in performance moving on to 2.7 – not for the games I build anyway (Adobe seemed to have focussed on media playback (video,sound etc.)). Having said that, we’re light years ahead of where we were with the original Flash iPhone exporter and now making games for iPhone is a real and plausible proposition!

So now on to the game. It’s DoodleJump meets Bloons! OK I admit that phrase ran through my head once or twice, but I’m yet to be convinced there is glory to be had from riding on the coat-tails of other previous winners. The thinking for Spider Leap is that it takes the “get as far/high as you can” aspect of DoodleJump and combines it with the importance of accuracy as in Bloons. Neither of those ideas are unique even to the two games I’ve mentioned so it’s valid enough to use them as a starting point. Hopefully by combining the two it’ll have a combination of challenges that work well together

Click and drag the mouse to make the spider jump. Grab as many stars as you can without falling off the bottom of the screen. Watch out for bees as they will knock you from your path.

You can see the development is quite far along, the inspiration came from a quick demo I released a few weeks ago but I am still not sure where to take the game play aspect. Right now I’ve covered the screen with stars and there is no win/lose condition (besides falling off the bottom of the screen) But what I’m thinking is that you may be required to achieve a certain score per level (obviously to get harder and harder). I won’t go in to all the other scoring mechanics I’ve had, but there have been 3 or 4 that I’ve been circling around, unable to find the right implementation.

As for the look, I made it water coloured just to be a bit different, hopefully it doesn’t turn people off because it’s not “gamey” enough, but I thought it was kind of interesting – I haven’t seen too many other games using that style.

Tags: , , , , ,

No Comments

Background Processing Class in AS3

Jun 7

Posted by admin in Tutorials

I’ll be trying to release some useful classes over the next couple of months, many of which I used to build Rainbow. So starting off here’s a class that became pretty handy when running a function that chewed up lots of CPU time.

Background.as
This is a simple background process manager class that uses up a specific ratio of CPU time to process functions that are registered to it. For instance if you have to generate a whole bunch of sprites, but don’t want the .swf to freeze while the number crunching happens, you can register a sprite creation function that will create one sprite at a time. on Each ENTER_FRAME event the Background class will continue to call its registered functions until all of it’s alloted CPU time has been used.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

//**********************************
//
// © 2009 - James McNess
// <a href="http://www.codeandvisual.com">http://www.codeandvisual.com</a>
//
// **********************************
 
package {
 //
 // *******************************************************************
 //
 //
 // IMPORTS
 //
 //
 // *******************************************************************
 import flash.display.*
 import flash.events.*
 import flash.utils.*
 public class Background{
  //
  // *******************************************************************
  //
  //
  // PROPERTIES
  //
  //
  // *******************************************************************
  private var pFrameMonitor:DisplayObject
  private var pCPURatio:Number
  //
  private var pIdleLength:Number
  private var pFunctions:Array
  //
  //
  // *******************************************************************
  //
  //
  // INITIALISATION
  //
  //
  // *******************************************************************
  public function Background(thisFrameMonitor:DisplayObject, thisCPURatio:Number){
   pFrameMonitor = thisFrameMonitor
   pCPURatio = thisCPURatio
   init()
  }
  private function init(){
   pFunctions = new Array()
   pIdleLength = 1000/pFrameMonitor.stage.frameRate*pCPURatio
   pFrameMonitor.addEventListener(Event.ENTER_FRAME,doIdle)
  }
  private function doIdle(evt:Event){
   var myStartTime:Number = getTimer()
   while(getTimer()-myStartTime&lt;pIdleLength&amp;&amp;pFunctions.length&gt;0){
    for(var i in pFunctions){
     var myFunction:Function = pFunctions[i]
     myFunction()
    }
   }
  }
  //
  //
  // *******************************************************************
  //
  //
  // API
  //
  //
  // *******************************************************************
  public function addFunction(thisFunction:Function){
   if(pFunctions.indexOf(thisFunction)==-1){
    pFunctions.push(thisFunction)
   }
  }
  public function removeFunction(thisFunction:Function){
   var myIndex:int = pFunctions.indexOf(thisFunction)
   pFunctions.splice(myIndex,1)
  }
  public function removeAllFunctions(){
   pFunctions = new Array()
  }
  //
  //
  // *******************************************************************
  //
  //
  // DESTROY
  //
  //
  // *******************************************************************
  public function destroy(){
   removeAllFunctions()
   pFrameMonitor.removeEventListener(Event.ENTER_FRAME, doIdle)
  }
 }
}

Example Usage:

1
2
3
4
5
6
7
8
9
10
11
12
13

package{
  import flash.display.*
  public class Main{
    public var pBackground:Background 
    public function Main extends MovieClip(){
      pBackground = new Background(this, .2);
      myBackground.addFunction(myFunction);
    }
    public function myFunction(){
      // This function will get called until .2 of the ENTER_FRAME interval is used
    }
  }
}

You can add as many functions as you like to the pFunctions array, it will call each of them in the order they were added, and keep cycling until the allotted CPU time is used up.

You can download the class form here:
Background.as

Tags: , , , , , ,

No Comments

Introducing Rainbow Live

May 21

Posted by admin in Rainbow

Code and Visual is happy to announce the launch of Rainbow Live XML Editor.

Rainbow has been developed to answer the needs of Flash developers who use XML as a data source.

With Rainbow Live you can combine the ease of Visual XML editing with the power of a Live Content Management System (CMS).

If you need to manage online XML data then Rainbow Live is for you. Rainbow Live makes it easy to design data in whatever structure you want, and then edit it online without having to re-upload new XML files.

Rainbow Live puts the power back into the hands of Flash developers. There’s no more need to rely on a backend developer to build and maintain a database. Rainbow Live saves time and money as the process of setting up XML structures is familiar to many Flash developers and is made even more intuitive with Rainbow Live’s node-based approach.

Rainbow Live provides you with a User log-in to allow data to be managed by the client long after your involvement is through. Rainbow Live provides the perfect lightweight solution when you don’t need all the bells and whistles (and overhead) of a complete CMS system.

While Rainbow Live is not technically a complete CMS, it provides all of the basic functionality needed to design, populate and edit data for small to medium based Flash projects (And any where else that XML is used as a data source).

Tags: , , , , , , , ,

No Comments