thbi's Weblog

Not Your Average iPhone Screencast

thbi — Mon, 09 Nov 2009 20:06:47 +0000

March 11, 2009

So you finished your amazing new iPhone app, it scrolls like butter, now you need to show the world. You could make a screencast by clicking around in the iPhone Simulator, but that has a tendency to look like you just clicked around in the iPhone Simulator.

I’m starting to put together some screencasts for Tweetie, and a number of developers asked how I made them look so awesome. Today I’m happy to share. The trick is a little app I wrote called SimFinger. It’s not a screencapture tool, rather it’s a bundle of little tricks to make a screencapture of the iPhone Simulator suck less.

SimFinger

First, download a copy of SimFinger. If you launch it, you’ll end up with something that looks like the shot below. SimFinger itself is composed of two parts. One is a fake „frame“ that sits ontop of the simulator. It adds some shine and gives it an iPhone 3G-look. Clicking anywhere on it will just click-through to whatever is below. The other part is a little nub that follows around your cursor. It „indents“ when you press down with your mouse, indicating what would be a „touch“ on the phone.

The idea is to position iPhone Simulator below this facade and do a screencapture of just this area. You’ll need a good screencapture tool – I use (and recommend) Snapz Pro X. It has an option to capture just some sub-region of your screen, and also the option to not capture the mouse pointer (which you should use, unless you want to ruin the illusion).

That alone is great, but SimFinger has some more tricks up its sleeve. Normally when you launch iPhone Simulator you get something rather lame, a few builtin apps and something that looks like:

We want it to look like an iPhone. With SimFinger running, go to the Control menu and select „Set Fake Carrier Text…“. Enter the text „ATT“ then, relaunch the iPhone Simulator. You’ll notice the (dead-givaway) „Carrier“ is replaced by „ATT“. Do the same for the „Fake Time Text“. Apple typically uses „9:42 AM“, I do the same for my screencasts.

The last step to the puzzle is to give your app some friends. SimFinger comes bundled with „Fake Apps“ that mimic Apple’s built-in apps. In SimFinger, goto Control – Install Fake Apps…, then restart the iPhone Simulator one more time. You’ll see a ton of stuff was installed, but it’s probably in the wrong order. Go ahead and re-order the icons to match the screenshot below (the „official“ order). Yes, be anal – there is a really nice visual balance to the „Apple-defined“ order of the icons. If you’re feeling pompous, go ahead and put your app in the dock. I don’t.

If you haven’t already figured it out, these „Fake Apps“ are more than just pretty icons. They are capable of one thing – setting their own badge number. Launching them will give you a list, selecting any number (besides 0) will set a badge icon on the home screen. You don’t have to do this, but it adds a little something to the illusion. Don’t go crazy either – only do it for apps where it makes sense (yes, every fake app is capable of setting a badge number).

You might wonder why there is so much extra whitespace around the simulator. The answer is that the SimFinger „facade“ is composed of two layers, one below the mouse-pointer „nub“ (which displays the actual body of the iPhone) and one above the „nub“, which is a fuzzy while outline that serves to „fade away“ the nub as it reaches the edges of the capture area (see screenshot below). This is particularly handy when compositing the captured area on a larger canvas – you’ll never have to deal with the nub hitting a harsh edge.

The last step is a bit of a doosy. Once you have your captured video, you’ll want to add titles, animate and sexify the video. SimFinger doesn’t do that. I love After Effects, but I’m sure there are some other apps that can do the basics. (Someone let me know if you have any cheaper suggestions – I’d be happy to list a few here).

Some notes: you probably want to hide your Dock. SimFinger currently locks itself to the lower-left of the screen. If you launch SimFinger with iPhone Simulator already running, it will automatically reposition the iPhone Simulator. If they ever get out of whack, just go to Control – Reposition iPhone Simulator Window (you’ll need Accessibility enabled in the System Preferences for this to work).

Almost Free

SimFinger is free. Sort-of. I’m trying my hand at this donationware thing. If you like and use SimFinger, and think it saved you a few hours of work, feel free to drop me a few bucks. I’d be happy to post the source on github so we can build something *really* amazing together. If you’d like to see it open-sourced, go ahead and „vote“… by clicking below

Update: SimFinger is now up on github!

hosted by nearlyfreespeech.net

Eingefügt aus <http://blog.atebits.com/2009/03/not-your-average-iphone-screencast/>

Submitting Your App To iTunes

thbi — Mon, 09 Nov 2009 19:38:48 +0000

Labs > OFPS > Building iPhone Apps with HTML, CSS, and JavaScript
Sign-in or Register
Show all comments
Help

Prev

Chapter 8. Submitting Your App To iTunes

Finally, the moment you’ve been waiting for: submitting your completed app to iTunes. There are several steps to the process and you’ll want to have all your ducks in a row before you get started. At a minimum, you’ll need the following to complete the App Store submission process:

No comments yet
- A plain text description for the application (4000 characters max).
  2 comments
- A URL where people can learn more about your app.
  No comments yet
- A support URL and email address so people can contact you with issues pertaining to your app.
  No comments yet
- If your app requires a login, full access credentials for a demo account so reviewers can test your app.
  No comments yet
- A 512×512 pixel icon.
  No comments yet
- A 320×480 pixel screenshot of your app.
  No comments yet
- A distribution provisioning profile for the app.
  1 comment
- A zipped version of the application binary.
  1 comment
  
  Note
  
  It’s fine with me if you submit the sample Kilo application to iTunes. The App Store reviewers might not be thrilled, but that’s anyone’s guess; I really don’t know what they’ll do. At the very least, you’ll have to choose an alternate name because I already submitted Kilo and the App Store does not allow duplicate names.
  
  No comments yet
Just to be on the safe side, and in the interest of making the App Store a richer place for users, I would encourage you to make meaningful changes to the app before submitting it. Maybe even morph it into an entirely different app! If you’d like to let me and other readers know about your cool new app, please visit http://forums.oreilly.com and add a link and description of what you’ve created!

No comments yet

These steps should all be fairly straight-forward except for the last two: creating a distribution profile for the app, and preparing the application binary. We’ll cover those two in detail next.

No comments yet

Note

Wherever I refer to Kilo in this chapter, please substitute the name you are going to use for your app.

No comments yet

Creating an iPhone Distribution Provisioning Profile

In Chapter 7, Going Native, you created a Development Provisioning Profile that allowed you to test your app on an actual iPhone. Now, you need to create a Distribution Provisioning Profile in order to submit the app to iTunes.

No comments yet
- Navigate to the iPhone Developer site (http://developer.apple.com/iphone/) and log in.
  No comments yet
- Click iPhone Developer Program Portal in the right sidebar.
  No comments yet
- Click on Provisioning in the left sidebar.
  No comments yet
- Click on the Distribution tab.
  No comments yet
- Click the New Profile button.
  No comments yet
- Choose App Store as your distribution method.
  No comments yet
- Enter a profile name (e.g. Kilo Distribution Provisioning Profile).
  No comments yet
- If you have not created a Distribution Certificate, you should do so before proceeding. If you see a link on this page labeled "Please create a Distribution Certificate," click it and carefully follow the instructions. You’ll be making a couple of trips into the Keychain Access application (located in /Applications/Utilities) to create certificate signing requests and to install signed certificates that you download from the portal into your own keychain.
  No comments yet
- Select the appropriate App ID (Figure 8.1, "Create a distribution provisioning profile in the iPhone Developer portal.").
  No comments yet
- Click the Submit button (you’ll be returned to the Distribution Provisioning Profile list view).
  No comments yet
- Refresh the page until the Download button appears (Figure 8.2, "Refresh the distribution profile list until the download button appears.").
  No comments yet
- Click the Download button to save the profile to your local download directory (usually the Downloads folder in your Home folder).
  No comments yet
- Drag the downloaded profile onto the Xcode icon in the dock.
  No comments yet
  
  Figure 8.1. Create a distribution provisioning profile in the iPhone Developer portal.
  
  No comments yet
Figure 8.2. Refresh the distribution profile list until the download button appears.

No comments yet

Install the iPhone Distribution Provisioning Profile

Now that the profile is in Xcode, you need configure the project to use it.

No comments yet
- Open Kilo in Xcode if it’s not already open.
  No comments yet
- Select Edit Project Settings from the Project menu (the project settings window will appear).
  No comments yet
- Click the Build tab if it’s not already active.
  No comments yet
- Select Distribution from the Configuration popup.
  No comments yet
- Select "Settings Defined at This Level" from the Show popup.
  No comments yet
- Locate Code Signing > Code Signing Identity > Any iPhone OS Device in the main area of the window.
  No comments yet
- Click the popup list to the right of Any iPhone OS Device to display a list of profile options (Figure 8.3, "Select the Distribution Identity.").
  No comments yet
- Locate your Distribution Provisioning Profile in the list and select the distribution identity directly beneath it (Figure 8.4, "The Distribution Identity will be located directly beneath the Distribution Profile").
  No comments yet
- Close the Project Info window.
  No comments yet
  
  Figure 8.3. Select the Distribution Identity.
  
  No comments yet
Figure 8.4. The Distribution Identity will be located directly beneath the Distribution Profile

No comments yet

Renaming the Project

Before you submit your app, you need to rename it from PhoneGap to Kilo. To do so:

No comments yet
- Open the project in Xcode.
  No comments yet
- Select Rename from the Project menu (Figure 8.5, "Select Rename from the Project menu.").
  2 comments
- Type Kilo in the "Rename project to" field (Figure 8.6, "Type Kilo in the "Rename project to" field.").
  No comments yet
- You can leave "Take Snapshot before renaming" checked if you want to save the state of the project prior to making the change, but it will significantly increase the amount of time it takes to process the request.
  2 comments
- Click the Rename button.
  No comments yet
  
  You will see a series of green arrows that indicate that the changes have taken effect (Figure 8.7, "The green arrows indicate that the Renaming process succeeded.").
  
  No comments yet
Figure 8.5. Select Rename from the Project menu.

No comments yet

Figure 8.6. Type Kilo in the "Rename project to" field.

No comments yet

Figure 8.7. The green arrows indicate that the Renaming process succeeded.

No comments yet

Prepare the Application Binary

Next, we need to build the application executable and prepare it to be uploaded.

No comments yet
- Select iPhone Device – 3.1.2 (or the current version of the iPhone OS) from the Active SDK popup, then select it again and pick Distribution. This should set the target to something like "Device – 3.1.2 | Distribution."
  No comments yet
- Select Clean All Targets from the Build menu.
  No comments yet
- Select Build from the Build menu. You may be prompted to allow the application codesign to access your keychain. Allow it to do this so it can sign the app.
  No comments yet
- Make sure that you didn’t get any errors.
  No comments yet
- Reveal the app in the Finder (Figure 8.8, "Reveal the application in the Finder.").
  No comments yet
- Compress the app into a zip archive (Figure 8.9, "The application must be compressed as a zip archive to be uploaded.").
  No comments yet
  
  Figure 8.8. Reveal the application in the Finder.
  
  No comments yet
Figure 8.9. The application must be compressed as a zip archive to be uploaded.

No comments yet

Submit Your App

Now that you have everything you need:

No comments yet
- Login to iTunes Connect (https://itunesconnect.apple.com/).
  No comments yet
- Click on Manage Your Applications.
  No comments yet
- Click on the Add New Application button.
  No comments yet
- Follow the onscreen instructions to proceed with the submission process.
  No comments yet
- Wait
  No comments yet
  
  If all goes well, you should see your app listed as In Review (Figure 8.10, "The uploaded app will appear in your list with a status of In Review.").
  
  No comments yet
Figure 8.10. The uploaded app will appear in your list with a status of In Review.

No comments yet

While You Wait

Congratulations! You’ve officially submitted your first app to the iTunes App Store! Now what? You’ll probably have to wait a week or two to hear back from Apple. Here are some things that you can do in the meantime to keep yourself busy:

No comments yet
- Set up a nice looking web page for your app that is located at the URL that you submitted to Apple. Be sure to include the following elements:
  No comments yet
  - A video of your app in action. Loren Brichter (http://twitter.com/atebits) has posted a great tutorial on making beautiful iPhone screencasts at http://blog.atebits.com/2009/03/not-your-average-iphone-screencast/.
    No comments yet
  - A brief description of your app. Just a paragraph or two and 5-10 bullet points.
    No comments yet
  - An iTunes link to purchase your app.
    No comments yet
  - A few testimonials, with a link to more if you have them.
    No comments yet
  - A support email address. You could opt to set up a support forum instead, but you’ll learn more about your customers via email.
    No comments yet
- Send personal email messages to bloggers who you think would be interested in your app. Target blogs that are relevant to the market for your app, and blogs that are about the iPhone in general.
  No comments yet
- Clean out your inbox; you’ll probably get about 5-20 email messages per 100 sales. If you’re app is popular, you’re going to be getting a lot of email.
  No comments yet
- Start working on your first upgrade. The more popular apps seem to upgrade about twice a month which causes a steady buzz and lots of customer goodwill.
  No comments yet
  
  Further Reading
  
  If you find yourself in a jam, here are some helpful resources:
  
  No comments yet
- jQTouch Issue Tracker: http://code.google.com/p/jqtouch/issues/list
  No comments yet
- jQTouch on Twitter: http://twitter.com/jqtouch
  No comments yet
- jQTouch Wiki: http://code.google.com/p/jqtouch/w/list
  No comments yet
- PhoneGap Google Group: http://groups.google.com/group/phonegap
  No comments yet
- PhoneGap on Twitter: http://twitter.com/phonegap
  No comments yet
- PhoneGap Wiki: http://phonegap.pbworks.com/
  No comments yet
- jQuery Documentation: http://docs.jquery.com/
  No comments yet
- W3C Spec for Offline Applications: http://dev.w3.org/html5/spec/Overview.html#offline
  No comments yet
Prev

Chapter 7. Going Native

Home

Comments on this page or Comments on the whole book.
Copyright © 2009 Jonathan Stark

Eingefügt aus <http://building-iphone-apps.labs.oreilly.com/ch08.html>

Prev
Chapter 7. Going Native	Home