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.

Use the comments!

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.

Start reading here: textmate actionscript 3 and flex bundles, it’s about the files you will use. But besides being informative, I needed more help.
I found that here: setting up a as3 project in textmate, the same steps will be followed here

1. Download Textmate (duh), if you want to test this, use the trail version.
2. 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)
3. Subversion: follow the instructions from the tutorial: its very easy (read also the note at the bottom of the post)
4. 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)
5. This you don’t have to do: in the new Flex 3.2 SDK it’s already included
6. I didn’t install this either and it worked just fine
7. 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.

   source

   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)

8. The same as in the tutorial
9. The same as in the tutorial

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.”

Links in this tutorial:
textmate actionscript 3 and flex bundles
Flex 3.2 SDK
installing as3 and flex bundle for textmate.
flex and actionscript 3 with textmate and fcsh

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

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)

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)

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.

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.

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:

• The original box2D v2.0.2 C++ User Manual
• The box2D Flash User Manual
• box2D AS3 FAQ (not very useful but …)
• box2D Flash AS3
• Tutorials and source by Emanuele Feronato
• Box2DAs3 For Beginners! part 1: a tutorial on triquitips
• Box2DAs3 For Beginners! part 2: a tutorial on triquitips
• Video tutorial for beginners
• physics in actionscript 3: Hello World
• Working through Hello World (previous link)
• List of tutorials >> AS3 (thx Boy Wonder!!)

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…