10.04.2010

Flip-Book Effect in After Effects

During the weekend, we sat over the question of how to fake a good old flip book effect and ended up with quite an interesting solution. See the results of our stresses and strains:

Post: Visual Effects: Flipbook Animation
We thank our reader Eduardo for this suggestion – sending us a video he challenged us to find a way to copy this effect. Hence we put our heads together and came up with a pretty easy-to-use solution. Let us guide you through the single steps of the process.

Remember Visual Effects is all about fooling the eye. Sure, we could have duplicated a 3D paper a thousand times and basically have an alternative pain in the ass to printing out every frame and then just filming a money counting machine flipping through the sheets. Well, don’t make it harder on you than really necessary: we looped the very same page turning over and over and jumping to the next frame every cycle. Underneath it a still layer of the same page creates the impression of being the paper just laid down and underneath that, a particle emitter creates the sheets we need to fake a piling stack.

After having decided with which aspect ratio to go for we’ve build a little sequence to ‘print’ on our flip-book. Make sure the exported movie is either compressed with a lossless codec or uncompressed - we’ll be using it in our After Effects project and don’t want to encode a video twice and lose to much of the quality. To get the best result in the shortest amount of time it is crucial that you plan it out first. The second decision to make is how fast you want the sheets to flip. You are best off rendering out the initial sequence with a frame rate dividable by the number of times the papers flip every second. In our case we wanted it to flip three times a second so we went with 24 fps, which is easily dividable by 3.

Open up After Effects and create a new comp. Drag the pre-rendered sequence onto the timeline and resize it to your convenience. Now add a background and apply a Fast Blur filter to the sequence with an amount of 2. This will subtly blur the footage and make it appear more lifelike (there simply are no perfectly clean edges in real-life). Use Distort > Turbulent Displace and tweak the settings to make the paper look less even. We exaggerated a bit because the filter will lose its conspicuousness as it will get in motion.

Crumpled PaperNow apply the filter Time > Posterize to the animation. In its settings you can choose how many frames (and therefore how many papers) you want to see per second. We went with three.
Posterize EffectNo, your machine is not too slow – the animation is running with three frames per second now. Make your layer 3D and move it back in z-space.

Next we created our first light just to give it some depth and structure. We used a light orange tinted light to cast some warm colors. Offset it in 3D space until you see a subtle vignette on your paper.

sc_light-1Now its time to Pre-Compose our layers. Leave all attributes and rename the new composition to “pages_stay”. Don’t worry about the name, it will all make sense in about a minute. But first we need to duplicate this comp. Be careful though, don’t just duplicate it in our timeline since that will only create an instance of our comp. What we need is a real copy, so duplicate it in the project panel so you can alter either one of the comps without changing the other one – INSANE MAGIC! Now rename the new duplicate to “pages_turn” and open it up by double-clicking on it.

Here comes the tricky part. In this composition we are creating the flapping effect. Remember, we already work in 3D space here, so the animation is easily done by setting three keyframes and duplicating them over the timeline. It could be done with some scripting, but we won’t dig into that right now. Use the previously set up Turbulence Distort effect’s Evolution property to make every paper have its own slight distortion.
sc_flapIn the first frames the paper is oriented towards the top, so the light we created earlier can’t cast light there. Since we do not want the paper to be pitch black in the beginning we created a second light. To get a more uneven looking structure we gave it a highlight, faked by a white solid with animated mask path and opacity.

We now have the essential parts set up and can focus on the final composition. First we want to get some more depth to it, starting with a subtle shadow. We used a Ramp filter, masked it out and copied an instance of “paper_stay” atop of it to use it as Alpha Mask for the shadow. Do not use a black shadow, since shadows are always tinted the complementary color to the light it is casted by. Warm light means cool shadows, so our shadow is slightly blue. Again, you have to animate one flap-cycle and then copy & paste the keyframes over the timespan. If you prefer to loop the keyframes via script to be able to go back and alter the animation without having to redo everything you might want to take a further look into our tutorial about loops in After Effects here.

sc_shadowFinally we want to see all the papers that already fell on the ground. We can create this impression by creating a darker solid and applying the CC Particle World Effect. The idea was to emit a particle using the currently visible frame of the animation every single time a paper plane has flapped down. In the effect settings go to the particle settings, set the Texture Layer to “pages_stay” and the particle type to Textured QuadPolygon. Add a Blur & Sharpen > Fast Blur with a value of 2 to get rid of the way too hard edges.

Your comp should look like that:

sc_screenNow that we have our animation set up, we can create a backdrop and add the sound effect. We filmed a few shots for the beginning to establish the scene.

Post: Visual Effects: Flipbook Animation. the full package. Any questions? Don’t hesitate to leave a comment!

Jake & Dan

...you might also be interested in:

8 comments

  1. April 12, 2010
    Dan said...

    If you wondered: you’ll find the video Eduardo sent us here:
    http://www.youtube.com/watch?v=WjpzNfi2H9I

    They just printed every single frame and cut them out and put them inside the money counting machine… hell, I love post-production :D

  2. April 14, 2010

    [...] & Dan (they design together), with a little after effects tutorial on how to create a flip-book type of [...]

  3. April 14, 2010
    Eduardo Ribeiro said...

    Thanks! I’ll check this out right now :)

  4. May 26, 2010
    Rupert Yearicks said...

    I like this video production. What camera did you use?

    • July 6, 2010
      Dan said...

      We used the Canon EOS 5D Mark II.

  5. July 5, 2010
    Greg Foad said...

    Heya nicely done! I can’t open the AE file as I get an error with the CC effect. I’m using CS4 on a MacPro. Any suggestions?

    • July 6, 2010
      Dan said...

      Hey Greg, could you provide us with a screenshot of the error popping up? We could definitely help you out!

  6. November 24, 2010
    adam said...

    Thanks for the amazing sharing of info. Really good way of doing this!

Leave a Reply