iPhone Camera Shutter Animation

Posted on August 31, 2009

For our 3D Camera Video Tour, we needed to show how to use the iPhone camera to take two photos, but we didn’t want to simply point a video camera at the screen and press record. The reflective iPhone screen makes it very difficult to get a high quality recording.

We decided to use the excellent SimFinger utility along with Snapz Pro X to capture video of the iPhone simulator. Unfortunately, the simulator doesn’t include any camera functionality. So, we searched the ‘net for someone who may have had the same problem, hoping to find an app/animation/resource/whatever that might make our lives a little easier. Sadly, we couldn’t find anything.

As these things go, we spent a bit of time building our own camera animations, and we’ve decided to share them with the community. It’s our hope that these animations will help anyone who finds themselves in the same situation we were in.

First, download iPhone Camera Shutter Animation.zip (7.24 MB). The zip contains the following four files:

iPhone Camera Shutter Animation

The thumbnail images are shown in the order that they should be used with the alpha channel represented as a gray checkerboard pattern. All of the media is at a resolution of 320 x 480, and the video files are 30 fps with 44 kHz audio.

To simulate the scenery, we recorded a short video with our iPhone 3GS. Then, we overlayed the four files on top of the video and paused the frame at the start of the Camera Shutter Animation.mov through to the Preview Toolbar.png.

It took some time to get it right, and while the animations aren’t perfect, they’re close enough…especially at the full playback speed.

We hope that you find them to be useful!


13 Responses to “iPhone Camera Shutter Animation”

  1. David B
    Dec 23, 2009

    Thanks for sharing your work – you’re gonna help me make my deadline!
    great job!

  2. rob
    Dec 30, 2009

    hey, thanks a lot for sharing this :) might be useful for me :)

    thanks and take care, a good new year 2010,

    cheers, rob

  3. Nhi
    Aug 23, 2010

    much thanks for sharing! Need this for work ;)

  4. Jules
    Sep 13, 2010

    Thanks alot for sharing. Been hoping to find that!

  5. gekko
    Jun 06, 2011

    thanks a lot of sharing! I Need this for a work..
    great job !

  6. solstice
    Jun 15, 2011

    Live saver! Thanks so much for the download.

  7. Jones
    Jan 26, 2012

    Every time I put this in FCP it corrupts my file… very strange…

  8. Daneel
    Feb 01, 2012

    thank you so much. saved me loads of time on a tight deadline. you guys are legend!

  9. Erica
    May 02, 2012

    Hi I’d love to know how exactly you animated this. I need to do the same but make the shutter slightly customized!

  10. Winston
    Jan 03, 2013

    Thanks so much! You’ve added a ton of production value to my work!

  11. philipp
    Aug 20, 2013

    thank you you saved my ass.

  12. Seldt
    Aug 31, 2013

    Hey dude, my boss needed me to do Iphone shutter for the same reason so I looked the net up for good ref and yours was the one I ended up remaking the animation based on. So now I have a huge hi rez 5000pixel version that I re created in Photoshop entirely only looking at your ref. So I did animate it in After Effects and the result is exacly what we need so I want to put it up here so people can have it and not fall for the trap of the deadline assets creation :) If that is OK hit me an e-mail.

    have a cool day

  13. Seldt
    Sep 01, 2013

    did you get my win rar file man :

Leave a Reply