Scurrying seagull: CAD-assisted Fliposcope animation

***

It is no secret that I like mechanical displays.¹ While scheming to realize my split-flap display dreams, I encountered Fliposcope.

Fliposcope is a mechanical flipbook kit produced by artists Marvel & Rosen. Their kits contain a cardboard box display, a plastic axel-with-crank, a set of blank split-flap cards, and a set of blank stickers sized to fit the split-flap cards. Each kit results in a 40-frame physical animation. Folks have used these kits to make some really awesome, creative art:

For my birthday my parents gifted me one of these kits, and I’ve been sitting on it for awhile, paralyzed by indecision and perfectionism waiting for inspiration to strike. And here we are!

Parallaxxing in Cuttle

I wanted my flipbook to use drawings I’d made myself, but I also did not want to hand-draw 40 frames of an incrementally shifting scene. Parallax (and programming) to the rescue!

Parallax: the apparent displacement or the difference in apparent direction of an object as seen from two different points not on a straight line with the object. [Merriam-Webster]

Basically, relative motion between different objects or scenes provides information about how far away their respective contents are from one another and the viewer. If you look out the window of a train, the foreground view changes rapidly—trees whip by!—while the background view changes slowly: those mountains in the distance don’t change much at all for long periods of time.

Parallax is a broadly applicable phenomenon,² and is commonly exploited in animation: moving background and foreground content at different speeds to add depth to a scene. Once you start recognizing it, you’ll see it everywhere: in cartoons and video games and real life, when staring out the window of a moving vehicle.

For my own use of parallax in animation, I used Cuttle a web-based parametric CAD software that I love and have written about previously. Here is my initial proof-of-concept prototype:³

In the polished Cuttle implementation, I sketched out and uploaded a couple of background layers (the background ocean, the foreground shore) and a main character (the seagull).

Just rotating the gull back and forth didn’t give the gull the movement I wanted, so I ended up giving it independently-moving legs: I cropped the legs from the original sketch, and then added them in as their own objects and gave those objects a rotation of a few degrees for every frame increment.

This is what the final animation looked like in Cuttle:

Digital frames to physical frames

To convert a frame (a single still shot) of the digital animation into a frame of the physical Fliposcope, it must be printed onto the accompanying stickers, and then stuck onto the kit’s split-flap cards. A single animation frame is split horizontally across two stickers (the top half and bottom half of the image). Furthermore, an single sticker contains the the top and bottom frames from two consecutive frames, rather than the same frame, as each sticker is folded around a single split-flap card.

While Fliposcope provides a conversion tool for formatting a short video (or set of frames) to be printed onto the kit’s sticker-sheets, I figured I was already far enough down the Cuttle path that I might as well do that piece myself. I set up a Cuttle object that formatted my frames correctly⁴ for the sticker paper.

I then printed the frames onto the stickers,⁵ put on some good music, and painted them with watercolor paints.

Running with the Gulls

After the paint had dried, I put the stickers on the flaps, put the flaps in the Fliposcope spool, and hey presto! A running gull!

Womp womp—my gull was running backwards. 😭

Running with the Gulls, forwards edition

I sulked a bit, fixed up my Cuttle template, reviewed that fix several times, reprinted all the stickers, repainted all the stickers,

re-stuck all the stickers, and hey presto! A running gull!

Huzzah!

Conclusion

Overall, the challenging pieces of this project were:

1. Staying motivated to repaint 40 frames of running gull, after I realized I’d botched the first round, and
2. Configuring print settings for printing accurately to the sticker paper from my not-that-great secondhand printer.

Additionally, the relatively low-resolution 40-frame setup of the Fliposcope meant that my parallax animation was less obvious than I would have preferred, as a full loop of each layer had to fit into 40 frames. If I make another, I’ll probably simplify the background layer and remove any significant objects from it (i.e., not include the sailboat or cloud clusters). If you make your own—and I encourage you to do so!—keep this in mind when you design your own layers.

Would it have been faster to just draw everything by hand from the start? Perhaps! But that is besides the point.

Want to make your own Fliposcope following this approach? My Cuttle template and instructions are here. Thanks to the Fliposcope team for developing the kit, and to my parents for gifting it to me!

---

Footnotes

1. As discussed in this post and this post!↩︎

2. If you haven’t encountered the term parallax before, it’s worth reading more about its applications. One of my favorites is astronomer Henrietta Swan Leavitt using stellar parallax in the early 1900s to calibrate her discoveries for measuring large (very large!) distances across the universe.↩︎

3. This prototype template is here; play with it!↩︎

4. Foreshadowing! (The photo is actually the correct template, I forgot to take a photo of the incorrect one.)↩︎

5. I’m sparing you the saga where I went back and forth and back and forth with my printer to convince it to print the correct margins AND print the full page. Lots of holding a printed proof sheet up and sticker sheet stack up to the light to check whether the margins were correct….↩︎

---

• Created: 2024-10-31
• Last updated: 2024-10-31
• Type: Project write-up
• Tags: art, cuttle, cad, programming, split-flap