Quicke unlucky by RealisMagical Contributors is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Exploring an Open Animation Series and Virtual Flip Book Experience

When I was a child, a brother introduced me to the concept of a flip book. Intrigued by the technique, I quickly embraced it, delving into the realm of animation. My early animations centered around Stickman figures and various experimental creations. These animations expanded across multiple pages, showcasing my growing enthusiasm.

Equipped with a Nokia 3220 phone, I harnessed stop-motion techniques to capture my creations in motion. The process involved meticulously recording each frame, using a squared notebook to draft character designs. Drawing and recording frame by frame, sound effects were integrated with each photogram, resulting in captivating outcomes.

The response from my classmates was overwhelmingly positive when I shared those creations. Sadly, the material was lost along with the phone. Despite this setback, this is a strive to recapture the essence of those memories using modern applications.

Tools

• Synfig
• React
• JavaScript

Digital animation

Utilizing Synfig, I crafted every anatomical component of the character, organizing them into distinct layers. Following this, I proceeded to establish the background and introduced various objects that engaged with the character, allocating them to separate layers. This strategic layering approach facilitated precise control over the unique movements of each element.

The use of keyframes mark a pivotal step in the creative process. Entrusting the software to compute the intermediate frames significantly streamlined the workload, resulting in notable time savings. Ultimately, the sequence of images was exported.

The following picture shows the Synfig project:

Virtual flipbook development

I developed a React application designed to enable users to craft personalized animations utilizing the provided images. Employing an approach of eager image loading, is ensured a seamless user interaction. The initial image was rendered onto an HTML5 canvas, and subsequent user clicks on the canvas trigger a successive display of subsequent images, effectively animating the sequence.

Notably, an additional capability was integrated into the application: The ability to record the animation complete with sound. This functionality was achieved by harnessing the MediaRecorder Web API, allowing users to capture their animations in a multimedia format.

Source code

The source code of this experience is available at GitHub.

The code is completely free and open source under the MIT license.

2023-08-25