2D Cartoon Animation of the Instructable Robot

by Tecwyn Twmffat in Craft > Digital Graphics

5162 Views, 33 Favorites, 0 Comments

2D Cartoon Animation of the Instructable Robot

front image.jpg
Instructinator

The familiar instructable robot that we have all grown to love has now been modeled in Synfig Studio's amazing 2D animation software and published on these pages for everybody to use. The fully functional robot model file is included and everything is free. This easy to follow tutorial will now give even the absolute beginner the chance to produce his/her own superhero cartoon adventure.

The Adventures of the Instructable Robot - A Disfunctional Superhero. Everybody is invited to help write this story using the Synfig 2D animation software. In the basement of an old abandoned warehouse called Pier 7 a team of eccentric scientists have spent many hours building a super hero robot to crack down on the escalating crime wave hitting the city. However, the scientists are all complete beginners, so the resulting robot has a lot of functional problems, which makes his attempts at preventing crimes quite amusing!

Have fun!

Difficulty: . . . . . . . . . .
Cost: . . . . . . . . . .
Satisfaction: . . . . . . . . . .
Hazards: . . . . . . . . . . RSI - take frequent breaks

I did look at these other instructables for 2D animation, which gave me a bit of inspiration for the project:

https://www.instructables.com/id/Saw-Animation/

https://www.instructables.com/id/Processing-Instruc...

https://www.instructables.com/id/Make-A-2D-Infinite-Runner-with-Unity/

https://www.instructables.com/id/Instructables-Robot-Cartoons/

Episode 1 - First Attempts at Flying

robot 32 animated 19.gif

The eccentric scientists in the basement of Pier 7 decide that the Instructables Robot must be capable of self sustained flight. All super heroes can fly right? He turns his arms into wings and performs his first test flight in this video. Does he succeed, does he fail? Will the boffins at Pier7 have to repair him?

Please feel free to join in with this storey, the tutorial for the animation software should help! Remember, the robot is dysfunctional and it needs to be funny/witty/clever etc.

The tutorial starts at step 2 or, if you're brave, you can jump into it using the file attached below.

Instructables Robot Mk1

screenprint01.jpg
synfig.jpg

Download and install Synfig here: CLICKY LINKY it's free but you can pay an optional donation. Open instructables robot mk1 from the files section in this instructable and you should get the same as the screen shot above. This tutorial is written for version 0.64.1.

screenprint02.jpg

We are going to make the Robot wave his left arm and produce an animated gif file for uploading to websites etc. Click on the 'left arm and fingers' green box on the right hand side and select the rotate tool as in the screenshot above.

screenprint02.jpg

Click on the little green man in the bottom right corner of the main panel to start the animation editing. Create a key frame by making a very small movement of the arm. The gold triangle in the time line shows when a key frame has been made.

screenprint04.jpg

Move the cursor in the time track to 24 and then rotate the arm to make a second key frame.

screenprint05.jpg

Now you can start waving the arm around in the next few key frames.

screenprint06.jpg

screenprint07.jpg

screenprint08.jpg

We're going to end the animation at frame number 96 so now we need to move the arm back to it's original position so that when the finished graphic loops it is nice and smooth.

screenprint10.jpg

Now we need to render the file to produce the graphic. The red arrow shows the render dialogue button and there's a few settings to be made.

screenprint11.jpg

The red arrows above show where you need to type or select 'gif' as appropriate.

screenprint12.jpg
instructables robot mk1.gif

You can watch the black dialogue box render the graphic step by step or go and cuddle the dog etc. Should take less than 5 minutes, depending on the speed of your pooter.

Open the gif that you've created and check it's ok. Then go back to synfig and save a copy of the master file.

screenprint14.jpg

Now we want to make the tentacles or antennae wave about a little bit as well. Use the zoom tool to zoom in on the head.

screenprint15.jpg

Now click on the green 'head' box on the right hand panel and find the tenticles. Click on a tentacle and it will light up with little coloured circles as above.

screenprint16.jpg

Making sure the little green man is red, move one of the coloured circles very slightly to create a key frame.

screenprint17.jpg

Move the cursor to frame 24 and repeat the process.

screenprint18.jpg

Make sure that the tentacle is back to close to it's original position at frame 96. Then do the same with the other tentacle.

screenprint19.jpg

screenprint20.jpg

screenprint21.jpg

screenprint22.jpg
instructables robot mk2.gif

Now use the render dialogue box to produce the gif graphic again.

screenprint23.jpg

Now we want to create a little bit of rotation of the whole body, so we create a rotation layer by right clicking on the green 'head' box as shown above and selecting rotate as shown.

screenprint24.jpg

You can now create key frames in the normal way.

screenprint25.jpg
instructables robot mk3.gif

Now render the graphic.

screenprint26.jpg
screenprint27.jpg
screenprint28.jpg

Now you can use my robot sketch to produce your own action packed animations. Please post your animations in the comments section but please no cruelty, sexuality, drug taking etc.

Some more very useful tips:

  • Right click on the main panel and use the properties box to create more animation time on the time track (see above).
  • Work on the project at low resolution to save computing time. When you're ready for the final HD version use the settings shown above and allow plenty of time for rendering - this will depend on your computer power and could take all night for a 30 second clip, so be warned!

Further Possibilities

Instructinator
instructinator part 2
Instructinator

Once you've got an HD gif finished you could put this into a program such as adobe premiere and make a videos with it as I have done above.

Episode 2 - Repairing the Robot

Repair the robot 10.gif

In the basement of Pier 7 there are other Robots at work and some of them are capable of repairing and modifying each other, but they are rather clumsy and do make certain mistakes!