Flipnote Player

A web player and video converter for animations created with Flipnote Studio and Flipnote Studio 3D
Check it out at flipnote.rakujira.jp

Features

• Full support for both of the proprietary animation formats used by Flipnote Studio and Flipnote Studio 3D
• Built-in converters for exporting Flipnotes as high quality MP4 video (!!!), animated GIF, or static image sequences
• Multi-file upload support -- open multiple Flipnotes at once and browse through them, with thumbnails and usernames shown
• The ability to load Flipnotes directly from Kaeru Gallery or IPGFlip web URLs
• No server-side code whatsoever
• 100% free and open source :^)

Background

Released in 2009, Flipnote Studio is an application for the Nintendo DSi which allows users to create flipbook-style animations with the console's touch screen, cameras and microphone. In 2013 it recieved a sequel on the Nintendo 3DS called Flipnote Studio 3D, which expanded upon the original's feature set and added the ability to use 3D depth.

Even though it has been several years since the last Flipnote Studio installment was released (and the online services for both apps have since been retired) there is still a large community of people actively creating Flipnotes thanks to fan-built services such as Kaeru Gallery, IPGFlip and Sudomemo. There's even several high-profile artists such as Kéké who are rocking Flipnote Studio on social media.

My hope is that this project will help the Flipnote community to continue sharing their creations :)

Built With

• flipnote.js (my Flipnote parsing library)
• ffmpeg.js (for handling video conversion -- I made a modified build that handles PCM audio and GIF input, among other things)
• React
• React Router
• React Transition Group
• react-dropzone
• pullstate
• Poi
• sudofont (for rendering certain custom characters that can be used in Nintendo DSi usernames)
• Sketch (for making graphics)

Building

Copy .env.example to .env:

cp .env.example .env

Install dependencies:

npm install

Build production-ready assets in the /dist directory:

npm run build

Run development server:

npm run dev

Generate sample Flipnote manifest file

npm run manifest

Acknowledgments

• Everyone acknowledged in the flipnote.js readme
• Kaeru Team for providing helpful feedback and for their assistance with testing.
• Sudomemo for providing sample Flipnotes and audio equalizer settings used in video conversion.