To record the footage, I used the app Reflection (reflectionapp.com) to AirPlay my iPhone's screen to my MacBook Pro.
Everything was edited using Final Cut Pro X. The trickiest part was the status bar. When you AirPlay an iOS device, the status bar changes to a blue color, and I just wouldn't have it. I made a custom black status bar in Photoshop and keyframed the crap out of it to cover the blue one.
Then I exported the video from FCPX, compressed and converted it with Handbrake (handbrake.fr), and embedded it into the webpage using the HTML5 <video> tag.
Originally, the iPhone image I used on the homepage was angled rather than head-on. Using some clever CSS transforms, I skewed the video to fit perfectly in the angled iPhone. Unfortunately, transforming the video left us with poor aliasing and we opted for the head-on approach to keep the quality high.
If there's anything else you'd like to know, feel free to ask!
To record the footage, I used the app Reflection (reflectionapp.com) to AirPlay my iPhone's screen to my MacBook Pro.
Everything was edited using Final Cut Pro X. The trickiest part was the status bar. When you AirPlay an iOS device, the status bar changes to a blue color, and I just wouldn't have it. I made a custom black status bar in Photoshop and keyframed the crap out of it to cover the blue one.
Then I exported the video from FCPX, compressed and converted it with Handbrake (handbrake.fr), and embedded it into the webpage using the HTML5 <video> tag.
Originally, the iPhone image I used on the homepage was angled rather than head-on. Using some clever CSS transforms, I skewed the video to fit perfectly in the angled iPhone. Unfortunately, transforming the video left us with poor aliasing and we opted for the head-on approach to keep the quality high.
If there's anything else you'd like to know, feel free to ask!