a polymath zapper

a polymath zapper

tutorial

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.

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:

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
alarm-clock
table
tv
box
, …. hmmmm not a lot a stuff is really a cube….
Perhaps a little car or bus when you square them out…
A couple of rectangle shaped object can make a cube: stack of books, cds, video, …. you get the idea.

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.
Add a back fin, make the cube green and you have a prehistoric beast.
Add two wings and you have a plane…. or another bird.
Add an periscope, some water and you have a submarine.
Add ears and get a 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.
Add four feet and get a turtle.
You can even add an extra cube, and make a totem pole.

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

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.

I’ve been using a code-editor for years now. I started with SEPY and now I’m using FlashDevelop. Both on Windows.
A colleague of mine still uses the Flash IDE (on a mac), so I decide to help him with his transition.

Sadly there is no free editor for the OSX that handles AS2/AS3, but TextMate is not very expensive and very lightweight. So I decide that TextMate would be the programme that would get him out of Flash IDE editor.

With a little help of Google (I haven’t used a mac for about 7 years) I found some help/instructions that are easy to follow. Sadly it didn’t work while I followed the instruction to the letter.

While you start reading the post below, start downloading Flex 3.2 SDK, it’s 118Mb but you’ll need it later on so why not start downloading it now.

Download Textmate (duh), if you want to test this, use the trail version.

Download Flex 3.2 SDK and extract it into your Developer/SDKs folder (but there are more places where you can extract it: just read this, for example /Applications/Flex and /Developer/Applications/Flex is also allowed)

Subversion: follow the instructions from the tutorial: its very easy (read also the note at the bottom of the post)

ActionScript 3 bundle from subversion: I can repeat myself: follow the instructions (to get the Terminal: Apple + space and type Terminal and get it from the list)

This you don’t have to do: in the new Flex 3.2 SDK it’s already included

I didn’t install this either and it worked just fine

It seems that this is not necesarry anymore (perhaps there was an update of the AS3 bundle…). But if you need it: Follow the instructions, but for the TM_FLEX_FILE_SPECS src/Main.as and TM_FLEX_OUTPUT deploy/Main.swf I needed some help because what ever I did, I couldn’t get the described window.
I found my answer in this:

Thats a little hidden. With nothing selected in the project drawer, click on the little i at the bottom. Youll get a box to enter any variables you want for the project.

And this one was very frustrating:TM_FLEX_PATH Developer/SDKs/Your Flex SDK Folder: this one needed an extra slash TM_FLEX_PATH /Developer/SDKs/Your Flex SDK Folder and in my case it was TM_FLEX_PATH /Developer/SDKs/flex_sdk_3

Note: Some of this is not necessary when you create a project instead of separate files: File >> New From Templates >> Actionscript 3 >> Project. Just check TM_FLEX_PATH if you installed flex in file that standard is read by Textmate. If not you need to fill it as described above (I needed to do that)

The same as in the tutorial

The same as in the tutorial

If you extract the Flex SDK, you will get a folder named “flex_sdk_3” and the very observant reader will notice that the script used here doesn’t include the path “Developer/SDKs/flex_sdk_3“, so that is the reason you need to add it to the “shell variables” (number 7). You can also rename the folder to “flex_sdk_3.2.0” and then I don’t think you need to add it to the shell variables, but I haven’t tested it!

Some extra information: svn is something that not everybody will use. So if you have no idea what it is, the bundle can also be installed without subversion. But the cool thing about subversion stuff is that it’s always up to date… (And I can’t help you with how you should fix it without svn)

Every blog mentions the price of Textmate: “single user license (39 ? $53)”. That’s not expensive; unless you live in the Netherlands: “single user license (48.75)” because we need to pay “Prices above include 25% VAT.” π

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

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:

create a folder with the name “Matthijs tutorials” (or use your own name, it’s not important)

create in the folder “Matthijs tutorials”, another folder “source”

save a flash file in the “source” folder: “documentClassTest.fla”

now we start making packages: create a folder “nl”

and save in folder “nl” a folder “matthijskamstra “

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

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)

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)

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.