Blog Pod - Archive for the ‘Developer Tips’ Category

Part of our marketing campaign to promote our new iPhone apps was to make overview videos of our apps in action. None of us here at The Apps Pod are film directors, nor did we have a massive budget to get them professionally produced. So we thought lets have a go at doing some ourselves and see how we go.

After much research we discovered that we can make as many videos as we wanted for under £15. OK so they’re not going to win any Oscars but they will show our apps in action and thought we would share this with you.

We purchased an application called iShowU for $20. iShowU makes movies by recording what happens on your screen. To make our apps we simply fired it up in the iPhone simulator and recorded it.  This worked really well however, operating the iPhone with the mouse did not look to great so we looked into resolving that. Eventually we came across some donation ware software called Sim Finger which effectively puts a white disc under the mouse cursor and this is what gets recorded. It really looks so much more professional than a mouse cursor. Sim Finger does more than simply replace the cursor, it also allows you to replace the Carrier name and time in the simulator as well as install fake apple app icons. However, we have had problems with this on xcode 3.2.3

So how does this all work together.

1. Open up Sim Finger in XCode (Its an xcode project, not an application)
2. Build and run Sim Finger and you will see a white rectangular area on your screen with a blank iPhone displayed on top.
3. Open up your iPhone app project in another xcode window and Build / Run that in simulator mode.
4. The iPhone simulator will appear over Sim Fingers blank iPhone automatically
5. Now run iShowU, Select the capture area and make sure the ‘Show Mouse in Recording’ option is OFF
6. When you’re ready press record and use your app

That’s it, you will end up with a decent recording of your app in use. Using iShowU you can also record voice overs, background music and even record yourself in an overlayed window using the app. All for under £15 – amazing value!

With the launch of the new iPhone 4 I have noticed that the images on many apps are appearing blurred or fuzzy. This is as a result of the iPhone 4′s display containing double the amount of pixels over prievious iPhone models. iOS4 will automatically scale your images up for you but this will cause images to appear blurred.  The following example shows the icon taken from our iPhone VAT Calculator, VAT Pro. The small image is the standard 57×57 icon which is shown on the iPhones home page.  If you double the size of this you will see how blurred it gets.

So what do we do to fix this?

Luckily Apple has introduced an easy way for developers to get the best of both worlds and supply two versions of each image (one for standard resolution iPhones and one for the retinal display on iPhone 4). All you need do is create a new version of your images at twice the size and save it with the same name appending ‘@2x’ to the end.

So for example, say we have an image that is 100 x 50 pixels called animage.png. We would redraw this image at 200 x 100 pixels and save it as animage@2x.png and add it to our app’s resources. When your app runs the SDK will automatiucally use the higher resolution images if the device supports it.

It is best that you re-draw the image at twice the size and not up-scale it using your graphics package as this will not add any real benefit – in effect this is what the SDK does for you anyway. You will get much sharper images by redrawing them and from now on, when ever you need new images for your app, draw them at double the resolution required and then scale down for older iPhones.

This image shows the same icon re-drawn at 114×114 which would appear sharp on the retina display.

A word about app icons

If your app is to support both iOS4 and older iPhone OS versions then again you will need two app icon images. Keep the original icon.png file at 57×57 pixels and add a new file called icon@2x.png at 114×114 to the resources folder. Now, to get this to work you will need to edit your apps info.plist file in xcode. Find the key named ‘Icon File’. You will probably have this set to ‘icon.png’, remove the ‘.png’ so the value simply reads ‘icon’.  There, job done. If your app is installed on an iPhone 4, the hi-res icon will be used and if installed on an older iPhone, the normal 57×57 icon will be used.