Papertoy design – The basics

One of my most popular post is about how to create papertoys (How to create your own papercraft).
It seems that a lot of people are interested in papertoys and how to make themselves.
But there is not a lot of information about it, so I started this series.
Do you want to know more about my reasons read this.

Because I have not a plan about writing about this, I will call this Lesson 1 – The Cube

The basics…

The first shape you will run into when you start with papertoys is the cube. It’s easy to recognize: all sides (width, height, depth) are the same.

cube 3d
When you build one, it will look something like the one you see above. Not really impressive, yet.

Flat version of a cube

Okay, you probably know how a cube looks, but how does it look flat on a piece of paper:
cube flat

How do I make it into a Urban Papertoy?

For the cube I see 2 methods:
1. Design a pattern/print for it.
2. Add stuff to the cube.

Method 1: Find a cube-pattern

The thing that I do first is, print it out and build the model. It’s strange but when you can hold it, flip it, etc, you will get more ideas then when you just look for it in your head. It will get your creative juices going. Look for clues in the real world…

What is a cube in the real world? A dice
Tutorial-cube image-dice
alarm-clock
Tutorial-cube image-alarm
table
Tutorial-cube image-table
tv
Tutorial-cube image-tv
box
Tutorial-cube image-box
, …. hmmmm not a lot a stuff is really a cube….
Perhaps a little car or bus when you square them out…
Tutorial-cube image-car
A couple of rectangle shaped object can make a cube: stack of books, cds, video, …. you get the idea.
Tutorial-cube image-books
Tutorial-cube image-cds

But that would only create “dead” object (there are not a lot of living objects that are square), so we need to expend our horizon to other objects.

Method 2: Adding stuff to the cube

Now we start adding stuff. This method gives you more room to create cool stuff.
Lets try a couple:
Add a beak, make the cube yellow and you have a little bird.
Tutorial-cube image-littlebird
Add a back fin, make the cube green and you have a prehistoric beast.
Tutorial-cube image-monster
Add two wings and you have a plane…. or another bird.
Tutorial-cube image-plane
Tutorial-cube image-bird
Add an periscope, some water and you have a submarine.
Tutorial-cube image-sub
Add ears and get a head.
Tutorial-cube image-head
Sometimes it helps to rotate the object a little bit. In this case with our cube it will not help you a lot but lets try that.
Add an tail and get a whale.
Tutorial-cube image-whale
Add four feet and get a turtle.
Tutorial-cube image-turtle
You can even add an extra cube, and make a totem pole.

Method 1: How to create/draw a cube-pattern

cube sketch
You can sketch everything with a cube 3d print out like I did. Then you have a global idea how you pattern should look. Then you’ll take your favorite design program (in my case Illustrator) and open the flat template and start designing.
The only problem that you will need to know which part goes where AND and how the pattern connects to the other parts of the template.
You can also build the cube, get your drawing tools out (markers, paint, pen, pencils, whatever) and color/draw the pattern that you want. When you are finished, get a scissor and cut the cube open. Scan it and redraw it, or just draw some glue tabs on it and you are done.

How to create/draw the additional stuff

The same as above: you can sketch everything. Or you start with building a cube and adding stuff as you go. This is a method I use a lot: it’s faster then thinking every thing out on a computer and you see at once if the measurements are correct. If you are satisfied with would you just added to the cube you can measure it with a ruler and rebuild it in your favorite design program. Or cut it of, scan it and then redraw it.

Download links

To get you started I have template with a blank cube for you to download. So you can try some of the technique described here in this tutorial. The zip also contains some of the stuff you can add to a cube to make it more fun.

Happy cut’n & fold’n

[download of a cube/with extra’s like hands]

Your input is needed

I’m trying to write a book about papertoys and how you can design it. It’s not for me, I already know what I’m doing, it’s for you.
So if you have some questions, use the comments to say it to me.

No questions for me? Just let me know what you think a cube also can be?
Or perhaps examples that you have seen based on a cube.

Use the comments!

Pre-post about Urban Paper Toy tutorials

One of my most popular post is about how to create papertoys (How to create your own papercraft).
It seems that a lot of people are interested in papertoys and how to make themselves.
On Nice paper toys (NPT) this question pops up now and again on the forum.
You can buy a book about it, if you want to know more about it: Urban paper toys (well you should buy this book anyhow because I’m in it 🙂 ).

But besides my post about this subject you’re on your own…..
Well perhaps not for long! I’ve been playing with this idea for a while now of making a tutorial series about papertoy and how you can make one yourself. That got me thinking….
It seems that people really enjoy making/creating papertoys, so why not make a book about it?

…… hmmm a book, I have never thought about writing a book (grammar is not really my thing, not in English and not in my native tongue), I never wrote a book or designed one (well… not recently).
So I have no idea where this series is taking me, but here it is:

I want to make a “book” about creating/designing Urban Paper toys. But I’m a internet designer/developer, I have no experience with book design, no experience with writing a book and no idea how to do it.
It doesn’t matter, I have my blog. I can write and rewrite as much as I want.
And I have something that a conventional writer doesn’t have: User generated feedback….. (no idea what that means? It’s you giving me comments/advice/whatever and helping me write this “book” by giving comments).

I say “book” because you don’t really need the book, because you can read it on my blog. But for the less internet savy peeps I can create a download link for a e-book or a you can buy a book.
I have searched for options to Self Publish and I found a couple, but these two sites seem to popup the most: lulu.com/ and booksurge.com/.
But before I can think about that, I need to write about papertoys and how they are made.

So this week I’m focusing on how I will do this on my blog.
But in the mean time, use the comments to show me what you want to know

And perhaps we will write a book 🙂

Document Class in AS3

A while back a read this post about the AS3 Pills #1 – Document class and it reminded me to write something about the “Document Class”. The title of this post is a little misleading: there is no “Document Class” in Actionscript 2 but this is probably the way you are searching for this problem.

A good explanation can be found on kirupa.com which has a ton of examples, explanations and tutorials!

But this is what it comes down to:

  1. create a folder with the name “Matthijs tutorials” (or use your own name, it’s not important)
  2. create in the folder “Matthijs tutorials”, another folder “source”
  3. save a flash file in the “source” folder: “documentClassTest.fla”
  4. now we start making packages: create a folder “nl”
  5. and save in folder “nl” a folder “matthijskamstra “
Folder structure (FlashDevelop)

Folder structure (FlashDevelop)

Goto Adobe Flash, and create a AS3 Flash file and save it in the source folder.

Fill in the document Class: nl.matthijskamstra.Main
(Flash will complain somewhat, you can ignore it for now…)

Document Class

Document Class

Create a new class in the folder matthijskamstra, default (at least the default Flashdevelop class) it will look something like this.
[as]
package nl.matthijskamstra {

/**
* @author Matthijs Kamstra aka [mck]
*/
public class Main {

public function Main () {

}

} // end class

} // end package
[/as]

If you would compile the .FLA now you will get an error (Compiler Errors):

Location: Main.as, Line 1
Description: 5000: The class ‘nl.matthijskamstra.Main’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.

(if you compile using flex you will get this error)

Error #2023: Class Main$ must inherit from Sprite to link to the root.

The first time I got this error I couldn’t understand it, luckily I do now and the answer isn’t that difficult, but if you don’t know… 🙁

  • The class ‘nl.matthijskamstra.Main’ must subclass ‘flash.display.MovieClip’: the class that we just made needs to extend (be a subclass) of Movieclip (the root has a timeline)
  • since it is linked to a library symbol of that type: this is strange, this says that the class is linked to a library symbol. This what puzzled me the most: I (we) didn’t link this to a library item, we linked it to the document class. The Flex error helps more, but you can see the root as a very big movie (timeline) and let the error be the error.
  • Error #2023: Class Main$ must inherit from Sprite to link to the root.: why does flex say you need a to extend Sprite? Flex programmers don’t use the timeline and a Sprite is a Movieclip with just one frame.

So to sum things up: there are some stuff that you need to do with a document class that you don’t have to do to an other class:
First you need to extend it to Sprite or MovieClip. If you create more then one frame in the timeline you need to extend to MovieClip because MovieClip supports frames and Sprite doesn’t. I always choose to extend to MovieClip, because it covers all the bases… (a Sprite is a MovieClip with just one frame: a Sprite is not a MovieClip but a MovieClip is a Sprite)

Another error that seems to happen sometime (not if you use the default class from FlashDevelop)
Second a document class should be public (the constructor is always public).
A Constructor is a function or method that is called whenever the Class (in our case the document class) gets instantiated, it must never have a return type such as “void”

Don’t forget you need to import the MovieClip class: import flash.display.MovieClip; (see the error created by Flash)

So the Document Class looks now something like this:

[as]
package nl.matthijskamstra {

import flash.display.MovieClip;

/**
* @author Matthijs Kamstra aka [mck]
*/
public class Main extends MovieClip {

// constructor
public function Main () {
trace( “Main.Main” );
init ();
}

private function init ():void {
trace( “Main.init” );
}

} // end class

} // end package
[/as]

Export you Flash file and you will have two traces in you output panel

My default class looks similar, I add two group-imports:

	
import flash.display.*;
import flash.events.*;

with the “*” you import everything in that package (MovieClip, Sprite, etc)
because AS3 is event based, I import everything in the events-package

[as]
package nl.matthijskamstra {

import flash.display.*;
import flash.events.*;

/**
* @author Matthijs Kamstra aka [mck]
*/
public class Main extends MovieClip {

// constructor
public function Main () {
trace( “Main.Main” );
init ();
}

private function init ():void {
trace( “Main.init” );
}

} // end class

} // end package
[/as]

That’s it, I hope this clears the mystery called Document Class
Questions? You know where to place them!

Linkdump:
another post that I never finished, but it fits here…

Andrew Paul Simmons: Blog: ReferenceError: Error #1056: Caused by Declaring Stage Instances Private.

Ever got this error: ReferenceError: Error #1056: Cannot create property? No, then someone has explained it to you before you made this mistake.

AS3 Flash Physics Engine Box2D

I was looking for a physics engine for Flash so I started looking for one… there are a lot of engines…
I won’t mention them all, there are enough people who did that already (here, here, here and here)

If the list is that big, how to choose?
Well I also want to use it with papervision3d so I googled on that and if someone checked out a couple of engines (this guy checked out 3).
And in one of my rss feeds there is a guy who builds games, and now it writing tutorials for box2d 😉

So I decided on box2d.

Box2D is an open source physics engine written primarily for games. As the name suggests, Box2D is a purely 2D engine. However, Box2D has grown beyond it’s humble box simulating roots, and can now handle convex polygons and other shapes coming soon.

Box2D is written in C++, but there is a port to as3: AS3 Flash Physics Engine Box2DFlashAS3 2.0.1.

You need to upgrade your Flash Player

You do not have the (correct) Flash plugin installed, or your browser does not support Javascript (you should enable it, perhaps?)

You need to download the Adobe Flash Player.

If you're sure you have the Flash plugin just ad
?detectflash=false
to the current url, to bypass the Flash-plugin detection.

Box2DFlashAS3 is an open source port of Erin Catto‘s powerful c++ physics library Box2D.

There is not a lot of information about Box2DFlashAS3 and tutorials are even harder to find.
So here some useful links:

Emanuele Feronato (an Italian PROgrammer) has written an extremely useful tutorial: box2d tutorial for the absolute beginners/. This one is a very good starting point!

I will write about the problems that I encounter with Box2D, I hope that will help you in your quest to understand box3DFlash.


Because I’m quite lazy, I didn’t mention all the as3 physics engines but you can: just make a comment about any engine and perhaps why you are working with that engine…