So. If you read this blog at all you may already know that I am the sole developer for the Gamebook Adventure series of iOS apps.
If you havent checked them out and enjoy some choose-your-own-adventure style fantasy games, then definitely do so. However, that is not what this post is about. For the books, we have an intro bumper video that plays the first time you open the app. Our first book: Assassin in Orlandes had a landscape oriented menu screen and so we made the video a normal landscape type video. However, the book reading bit was portrait orientation. In our in-house testing we didnt go back and forth between the two orientations all that often, but (as is often the case) the users used the app differently and were constantly going back and forth and so the orientation switch was a bit annoying.
For the second book: The Siege of the Necromancer, we switched to a fully portrait oriented app, with the exception of the intro video (it was already made when we decided to change the orientation, and being a poor indie studio we didnt have the cash to re-do the animations in a vertical aspect. However, most people watch the bumper once or twice then never see it again, so that is OK. )
Now with book three, Slaves of Rema, we are finally moving to a fully portrait oriented video. This poses some interesting problems.
Since I am the developer and we are indies, I am also the video codec guy, and often the video editor as well. The animations are outsourced and the other GFX are done in house, but it falls to me to put it all together and get it ready for the iPhone.
What is the problem you ask? Well, on the iPhone you can only play video in landscape and you can really only play landscape formatted videos. On the iPad you can play videos in portrait, but they get all scrunched down. If you want full screen vertical oriented videos then you really need to make your videos sideways.
This can be a bit of a pain to do. One way to do it is to take all of you grafics and rotate them before inserting them into final cut or similar. This means that you also need to tell the guy doing the animations that you need them to be done sideways and all of that. This is a fine way to go about it, but it can make working on the video a pain in the ass. Who wants to work on a sideways video?
Instead you can make the video upright and rotate it after you have done all the editing. I find this to be the best for our workflow. That way all the graphics guys and animation guys are all working with the right orientation in mind and everything looks good. The hard bit is editing a video that is 320 x 480. Final cut, which I love, is total shite at doing anything that is not meant for TV or HD resolutions. What I use is a combination of Screenflow and Quicktime pro.
Screenflow is a screencasting program, why would you use it for editing? Well, mostly because I already use it for screencasting, so I have it laying around. And it does a fine job of doing basic editing. Most importantly it allows you to export in any crazy-ass aspect ratio you want, and the export options are excellent. This allows me to edit the video in the aspect it will be seen at, ie portrait.
So, what I do is edit my video in Screenflow, (in the case of the new books these videos are at 640 x 960, so I can do high rez versions for the iPhone4 and the iPad, but it all works the same for 320 x 480, just be sure your final export size is the size you are shooting for)
next thing is to open it in Quicktime Pro. (note, the quicktime that comes with your mac these days is not qt pro, it is just qt player. QT pro is $30 ish and is an indispensable tool to have in your arsenal if you do any amount of video work. (if you have final cut or FCX, you should already have QT pro).
Once in QT Pro, go to window->show movie properties. Select the video track, and look at the Visual Settings tab.
All you need to do here is hit one of the rotate buttons. I generally thing that rotating left (the rightmost button) is the way to go. That way the home button on the phone will be facing downward when the phone is is standard portrait orientation and the video is playing.
At this point your video should look like the one above that is tipped sideways.
Now for the fun part, the compression.
This may take a little while, and if you have a slow machine it may take a long while. The idea here is that you will probably need to try a half dozen different settings before you get one that looks good and is the size you want.
Choose File->Export. Then select the Movie to iPhone setting and save it off. This will generate an .m4v file.
Once it is done compressing, open it back up and watch it. If your video still looks fine then you are done. This seems to wrok well for about 90% of the videos I run through it.
However I find that the default ‘iPhone’ settings sometimes produce terrible video artifacting for certain types of video so I have to do it the hard way. (also, if you are trying to really squeeze every last meg out of your app packages, then the you can get similar quality with half (or less) the size by tweaking the settings yourself.
In this case you need to change the export options and select ‘Movie to MPEG-4’
Make sure that the video size is set to what you want, make sure the video format is set to H.264. After that the most important thing on this screen is the Data Rate. but before we get to that, hit the ‘Video Options’ button, and select baseline.
Ok, back the the main MPEG-4 screen and the data rate. This is where you will want to change the value and make a few different videos until you are happy with the quality and the size. I generally start at 1200 or 1500 kbits/sec (this usually produces a fairly nice quality video, but it is generally pretty beefy in terms of size.) then I go down by 250 until the quality degrades to a point where I would never use it. From there you should have a handful fo videos fo different qualities/sizes to choose from. You can tweak the data rate down as accurate as you want. If the video quality is almost good enough, then just bump up the data rate by 25 or 50 and see what you get.