ToonClip – A Flash-like animation editor that runs in the browser

Hacker News

Share card

ToonClip – A Flash-like animation editor that runs in the browser

Show HN: ToonClip – A Flash-like animation editor that runs in the browser ToonClip (https://toonclip.com) is a Flash like, online animation editor that lets users create and export animations in minutes. Its accessible to people with no prior animation experience. Being an artist and a techie, I have always dabbled with animations via Blender, Maya .... But these are complex beasts with a sharp learning curve. Between the dabbles, the skill faded and I had to relearn. One day I just gave up. But should it be this way? I was using only the basics of the animation software and producing good results. I wished that the animation software would throw out all the advanced stuff and put only the basic things in an easy to use way for dummies like me. The troubled thought stuck to the cobwebs of my mind like a fly floundering for escape. And then Flash was offically discontinued. There are numerous threads on HN about its demise. One such thread - https://news.ycombinator.com/item?id=21387967 A recurring theme in the threads was how there was a gap in the market for a browser based, easy to use animation software. I created a thread asking if anyone was willing to cooperate on building such a software. https://news.ycombinator.com/item?id=21396048 I received comments but no offers to coooperate. Giving up, I started by myself. I had the following requirements in mind – should be browser based, WYSIWYG, and no code. I started with HTML5 canvas and realized it was still primitive. For instance, it does not have any mouse detection. Then I explored libraries that I could use – bonsai.js, two.js, raphael.js and fabric.js. After approximately a month of experimentation, I decided on fabric.js as it fit my needs best and had an active community. And thus ToonClip.com was born. How does it work? Say I want to create an animation where a cowboy tells a dog “Come here.” Dog says “ok” and runs to the cowboy. The editor has a library of assets. The user clicks on the needed images (desert background, cowboy and dog). They are now in the canvas but unarranged. To arrange and resize, the user drags and clicks with the mouse. The script that controls the action uses everyday English sentences. In this case it could be: Cowboy say “Come here.” Wait for 0.5 seconds. Dog say “Ok.” Dog run to Point P2 in 3 seconds. Cowboy smile. Optionally, audio can be imported and worked into the animation. Eg script would be: Cowboy say “Come here.” using Audio cowboy1. The benefit – a dummy like me can create animations in minutes. There is a silly grin when I see my animation come alive. It’s special – like the silly grin of a new mama looking at the just delivered. Because it’s within reach, we want ordinary people to experience this silly grin. It’s not smooth sailing, of course. For one, ordinary users don’t even know that the creation of animations is within their grasp. I have chatted with friends with an artistic bent. They have visited my website but still don’t realize that its well within their reach. Folks without artistic bent don’t even try. We have to educate – a long, tiring process. Second, the underlying HTML5 canvas and media technology is still evolving, so we have many technical problems that are not cleanly solved. Case in point: exporting to video formats is only possible in Firefox and Chrome. The first time audio is added, it plays with a good 3 second lag. After an animation is recorded, the audio is no longer audible on Firefox. The video created makes a round trip to the server, just to add a header of the duration, which Chrome can fix very easily but has been marked “Will not fix”. Ah, the joys of bleeding edge tech. So far, people are using it to create memes, animations for special events such as birthdays, company promotional animations and language learners creating simple English dialogs. One other area where we have interest is from companies that want to create customized animations. For instance, John receives an animation with John mentioned in the animation, Mary with Mary … This is possible via our bulk animation feature, where an animation is created with variables in the action script and then a program runs to fill those variables with the correct values and creates the gifs or video files. So that is ToonClip.com – a Flash like web based animation editor. We'd love to hear what you think and answer any questions you might have. Thanks!