Using Making Directions for Origami as an Example in Teaching Programming

ugliestharrasSoftware and s/w Development

Nov 4, 2013 (3 years and 7 months ago)



Using Making Direc
tions for Origami as an Example

Teaching Programming

Jeanine Meyer, Ph.D.

Purchase College/SUNY

king directions for origami models
is an excellent

way of demonstrating the
use of Flash MX and it
s scripting language, ActionScript. The author uses this

introductory programming class

at Purchase College/SUNY that focuses on game

would be of interest to

people looking for tools to produce
directions for activ
ities such as origami and educators seeking ideas for teaching
programming and digital design. The author has produced

directions for the
talking frog head,
kissing birds, and the captain's shirt. Recently, students
produced directions for

a cup and a turtle.

to these examples are available


This paper describes the use of building a computer application to display instructions to
make a simple origami model as an example to teac
h programming, specifically the use
of Flash MX and ActionScript.
The requirements for a good example for teaching
programming are that the example demonstrate the features of the language in an
authentic and not contrived way, be simple but not trivial,
and be a model that students
can use for something of their own. Directions for origami typically make use of pictures
and text. Flash provides the additional capability of animation and, through the use of
buttons and
, self
pacing. Though m
y students were not, for the most part,
familiar with origami, they could understand the directions and appreciate how the Flash
application showed pictures, animation and text and gave them a chance to control the
pace from step to step. Most importantl
y, students understood how the application was
put together in terms of the Flash elements of Tim
eline, Stage, and Actions and graphical
drawing capabilities and took that understanding with them for more complex

The introductory
model is a
very simple one that requires just 4 folds. I call it the
wiggler. Note: proper origami practice is to identify the creator of the model, but I cannot
do so. I learned it the one time I attended the Wednesday sessions in New York City,
started many years

ago by Lillian Oppenheimer.
Of the other models mentioned here, I
believe k
irds is by Paul Jackson


the other models, including the turtle shown
at the end, are traditional, but would welcome confirmation or correction.

Capabilities of Flash MX

Flash MX is a product of Macromedia, Inc. It is used to produce interactive, animated
applications, called Flash movies, mainly for dissemination on the Web. People can view
the applications using a so
called plug

or player
, which can be downloaded f
or free.
Flash has several features that make it suitable for instructional and/or game applications.


These include vector
frame based animation and event
Though the author made no use of them for this first origami applica
tion, Flash also
supports the use of audio and video.

Flash has a complex program environment, with many toolbars and panels. However,
like many modern applications, it is not necessary to know everything to be productive.
Flash produces what are termed m
ovies. The main ideas of Flash are the Stage and the
Timeline. The Stage is where content is placed, including graphics drawn directly on the
Stage as well as symbols created individually and stored in the Library. Symbols can be
graphics, buttons, or m
ovies. (A Flash movie can contain movies within movies. This is
actually fairly common.) The Timeline is a sequence of frames, frames to be displayed at
specific frame rate, unless stopped by code. When you put something on the Stage, either
by drawing

it directly or bringing something in from the Library, you put it on the Stage
at a specific frame. Here is the initial look of the Flash development environment:



Tools for

Property information:
depends on what is


A feature of Flash that is extremely useful fo
r making origami directions is what is
termed vector
graphics. The vector
graphics mean that the Flash system keeps track of
the graphical material not just as dabs of paint on a canvas but as shapes, lines, and fills.
This means that you, the designer,
can manipulate the graphics in many different ways. It
also means that the Flash files that need to be downloaded for a viewer to see the
application typically are relatively small so you do not have long waiting times.


Notice the many drawing tools

in th
e screen shot shown above of the Flash environment
the wiggler

application, we use line, pencil, paintbrush, rectangle, paint bucket and text
tool (the A icon). The line and the pencil use the first swatch of color, shown above as
black. This is calle
d the stroke call. When you use the pencil, you can specify options to
straighten out or smooth out the lines. The paintbrush and the paint bucket use the
second swatch color, called the fill color. The text tool uses the fill color for the letters.
outline of the rectangle is in the stroke color and the inside is in the fill color. Double
clicking on either swatch opens up a palette of colors.

The pointer at the top is for selecting areas on the stage. You can select parts of graphics
or you can pr
ess down and drag to form a rectangle. The lasso allows you to make a free
hand selection. One thing you will notice is that Flash graphics are segmented. You can
select (click with the pointer) parts of a drawing. A selection can be deleted, moved, or
modified in various ways. The drawing below was made with the rectangle, line, and
pencil (smooth option).

Using the pointer, you can click on 13 different parts! This was done to produce the


This may not seem like a useful thing to do,
but it really helps in creating sequences of
drawings such as required by the origami application: situations in which you need to
make modifications of graphics. This facility also demonstrates that Flash, unlike many
other drawing programs, works by cre
ating what is termed vector graphics, and not bit
mapped graphics. Flash drawings are stored internally in a representation that allows the
Flash runtime system to re
create the graphics. One example is that a rectangle is stored
as rectangle with specif
ic dimensions and not as the color settings of the pixels on the
screen. This means that Flash files are smaller than they would be otherwise and the
Flash graphics scale up and down well.

You can also use the pointer to select a rectangular area or the l
asso to select a freeform
area. When using either of these, the selected area shrinks to the content already on the
screen. So if you begin with a graphic such as a filled
in rectangle:

and then make a rectangular selection (the dotted lines are heavi
er than would be the case
when you actually do this):


The resulting selected area will be:

The same thing happens when using the lasso tool: the shape is still freehand, but it
shrinks to the content on the Stage.

Another ca
pability of Flas
h drawing is the use of numbers to specify coordinate positions
and dimensions. For example, the following series of screen shots shows a rectangle
being modified to be a square (200 by 200 pixels = picture element units) located at
ntal coordinate x = 100 and vertical coordinate y = 100).

The Properties panel
shows the width (W), height (H), x and y of the selected
graphics, in this case, a rectangle
and its outline.


In the next screen shot, the W and H have been changed so the
figure is a square.

The position, the X and Y are changed next.


The next screen shot shows the information for a line that has been positioning to be in
the middle of the square. In this case, the Info panel shows the positioning.

The X and Y in t
he Info panel show the location of the mouse cursor. The mouse is not
shown because of the method used to get the screen shot.

The mouse can be used to modify lines and areas. If the mouse is in the middle of a line
segment, it can be used to drag the li
ne into a curve. If the mouse is at a corner, it can be


used to length or shorten lines. For example, the next screen shot shows how the
appearance of a curl is put into a picture of a paper.

Lastly, there are operations for modifying shapes as indicat
ed in this screen shot:

Here are the results of applying Scale and Rotate with scale 100% (no change) and Rotate
45 degrees.


The drawing tools can be used to draw directly on the Stage or to make symbols, re
entities that

are stored in the Libra
In other applications, graphic, button and
movie clip symbols are created and what are termed instances of these symbols are
moved to the Stage.
In the origami directions, this capability is not used. Instead,
graphics are drawn on the Stage in diffe
rent frames, to be explained in the next section.

In addition to graphics, Flash also supports text on the screen. The text can be in
different fonts, colors and sizes.

Frame based animation

Flash provides what is called frame by frame, also known as ce
l, animation through the
use of the Timeline. Each frame contains graphical material as well as ActionScript, to
be explained later. The default situation is for control to go from frame to frame, the
default frame rate being 12 frames/second. Thus, by
putting different, or, rather, slightly
changing, images in successive frames, the viewer sees animation.
The methodology of
the origami directions demonstrated here is to divide the folding into a sequence of steps,
some of the steps consist of short anim
ated sequences and some are single frames. The
viewer, the one learning the origami model, advances using buttons.

Frames in which there can be distinct material are called keyframes and are inserted
(added) to the Timeline using the Insert/Insert Keyfr
ame menu. The following screen
shot shows the finished Timeline for the wiggler directions.

The layers (labels, code, diagrams) are used to organize the work. The flags indicate
frames that have labels
. You can see
some or

all of most of the label nam
es, which are
meant to be meaningful: diagonal, diagonal2, smalltriangle, foldback, etc. The button
actions will cause the movie to go to an indicated label and keep going until code is


invoked that indicates stop.

Here are screen shots from the wiggler
One text
field holds general information and the other gives a specific directive (White side up).
Notice that graphics and text change

from screen shot to screen shot, but the buttons
remain in the same place.

The next screen shot is from

the middle of the step to divide a triangle to make a smaller

e last

screen shot

to be shown here

is in the middle of an animated sequence showing
the wiggler wiggling.


Flash provides ways to create quite intricate animations. One capabi

is called

tweening, you draw
in one

, skip several frames and insert another
keyframe and draw in it. You then
specify that the Flash system produce frames that
could go in
For more instructions on tweening, consult the
in Help

in Flash.

Event driven

The ActionScript language of Flash contains all the usual features of scripting languages,
including functions and variables. A function is a set of code statements that can be
invoked by name. A
variable is a way to associate a name with a value. The value of the
variable can change by what is called an assignment statement. In the wiggler example,
chose to set up
a variable called


hold the name of the label of the frame at
the st
rt of the next step
I wrote code to

e the value of this variable at the
appropriate places.

The critical code statements for this application are assignment statements,

These are each part of the ActionScript language.

An as
signment statement sets a value for a variable. So the statement

nextstep = "smalltriangle";

means that the variable

now has the value
Semicolons indicate the end of statement
s. (The answer to the question, "
why not use

is that periods are used for numbers such as what we call decimal numbers.)


does what it sounds like:



will advance the Flash movie to the value indicated by the variable
. The
value of

is used a
s the parameter or argument for the function
. The statement


will stop at the current frame, freezing the display until something else happens. The
opening and closing parentheses are required because this is a function and functions ar
defined to use parameters. If a function does not have a parameter, it still needs the

So far, this section has just described some disjointed code. The way it will fit together
to be an application is what is describes as event
driven p
The application
as shown requires the viewer to click on a button to advance to the next step.
In Flash,
the creator/designer/programmer can specify that code is to be invoked (the term

" and "called" are

also used) when a certain e
vent takes place. In this example,
d many others, we write code in a way to indicate what is to happen when the viewer
clicks on a button on the screen. More exactly, after creating a button, placing it on the
stage, and selecting it, you type the foll
owing code:

on (release) {



into the Actions panel. This means that when the viewer presses down and then releases
the mouse cursor over the button, the reaction of the system will be to advance the movie
to the label indicated
by the value held by
It is possible to include more
elaborate actions between the curly brackets or to invoke a function to do the job.

This is termed event
driven program

programming is

in terms of
events and the handlers for

the events. For example, yo
u can specify the action for a
player moving the mouse cursor over an object on the screen. You can specify the code in
a frame. You can specify the code on pressing a key on the keyboard. It means that you
can organize the a
ction in terms of situations. Of course, it is up to you to understand and


Construction plan

for the Wiggler

Flash features for the
different parts of the wiggler directions have been explained.
Here is a plan for creati
ng the application.
Before going on, here are general comments.
The toolbar at the top of the screen holds various pull
down menus, for example File,
Insert, and Window. You will use them in the usual way for Mac/Windows applications.
One feature of Fl
ash is that there are several panels or windows. You probably will find
that the screen gets crowded and you need to open and shut them, using icons at the upper
corners. If you find a window totally absent, a trick is to go to Window/Panel Sets and
the first Developer choice. Lastly, the Actions panel comes in Normal Mode and
Expert Mode, as indicated by clicking on the right top corner. Please change to Expert
Mode. The other way attempts to help, but generally is more confusing than beneficial.


irst start with a New Flash document by opening up Flash, or
, from within Flash,

File/New. Name the first and only layer

and then add 2 new layers, naming

and one

Click in the

layer. The idea is to put the text fi
elds and all graphics in the

Use the A icon on the toolbox to create one or two text fields. These
will be static text fields. Put in the directions for the first frame.

There are several different ways to have buttons in your applicatio
n. Here is one. Use
Window/Common Libraries/Buttons to open up a list of already designed buttons. Pick
suggests advancing
and drag it to the

While still having this
button selected, open up the Actions panel and type in

on (rele
ase) {



Now find another button, one that indicates rewind, and drag it to the Stage. While still
having this button selected, type in the Actions panel

on (release) {



This will send play back to frame 1, esse
ntially rewinding the movie to the very first

It is necessary to write code in the frame as opposed to code associated with the buttons.
You do this by clicking on the

layer, first (and still only) frame. The Actions panel
should now indicate
Actions for Frame 1. Write the following:

var nextstep;

nextstep = "diagonal";


The first line sets up the variable named
. The second line gives it a value.
This assumes that the
label for the frame at the
start of the next step, that i
s, the first step
after the opening display, is named
. If and when you create directions for
your own model, you may have a different name.
The third line indicates that Flash is to
stop! At this point, there is just one frame, so if the stop

statement was not present, Flash
would repeat this one frame over and over. If there were other frames, Flash would go on
to display them if there was not the stop statement.

put a picture on the Stage.
Click in the

layer, in the first f
rame. Again,
the idea is to put all the graphics and text in this layer.
Use the drawing tool for a
rectangle and then Properties panel to create a square. You can use the patches under
color to set the outline (called the stroke) and the fill colors.

Now, here is how to put in the next step. For the wiggler, this is the step to fold on the
diagonal. You could slow down the process and plan for the first step to be rotating the


square 45 degrees to be a diamond shape. With children, the direct


this is "twist
the square so a corner points at your belly." Use
the pulldown menu on the toolbar
Insert/Keyframe. This puts a new keyframe on the

layer. You will see the
same graphics that were in the original keyframe. This is what you want

because for
making these types of directions, it generally is the case that the new graphics

modification of the graphics in the prior keyframe. Use the selection tool to select the
whole square (outline and fill). Click on Modify/Transform and the
n Scale and Rotate
and type in 15 for the number of degrees. You will see that the square has been rotated.
Repeat this 2 more times: Insert/Keyframe, select the square, Modify/Transform and
Scale and Rotate.
What you have created are 3 frames showing t
he square rotating.

After doing this, you need to put in the coding to stop at the end of this sequence of
frames. Click in the

layer, in the same frame as the last frame just made in the

layer. Insert/Keyframe to make a frame in this layer
. Enter the code:


in the Actions panel.

There is o
ne more thing to do before you can test what you have. Click in the labels
layer, 2

frame, and Insert/Keyframe. In the Properties panel, type in diagonal.

The logic can be described in this

way. Suppose a step is represented by a sequence of
frames and the first frame has the label
. Then the code in the last frame of the
previous step (call it step A), the frame with the stop statement, has the code assigning

to the variable
. This will mean that when the viewer is looking at the
final frame of the A and clicks on the advance button, Flash will go to frame "B".

You can and should test the project after the addition of each animated sequence. Some
sequences may be shorter t
han others, perhaps just one frame.


The origami instructions fulfill the requirements stated previously

for an example for
teaching programming
. It is an application that makes use of the features of Flash,
namely ability to dis
play text, ima
ges and animation, in an authentic way. The fact that
the application has a function, explaining the folding of a model, and an audience, people
with an interest in folding, is

Students often need help identifying
an audience.

The t
emplate defined for instructions is reasonably simple but powerful enough to do the
The coding makes use of a variable and the students can see how it varies in a
systematic way. A feature of Flash is its event
driven nature, though this can be a bu
as expressed by the saying, "the code is all over the place." In the origami instructions,


the code is 'in' the two buttons and in the frames representing the end of each animated

Students can build on the example, either for more origami

or other instructional tasks.
Students more skilled in design can vary and improve the integration of text and image
on the screen.
A recent student used the general approach to produce a piece on martial
arts. Similarly, one student produced instructio
ns for the only origami model he knew:
the cup. Another student, experienced in origami, produced instructions for a turtle.

People seeking software tools for presenting origami instructions should look to Flash.
The vector
graphics and the ease of integr
ating text, image and animation as
demonstrated here along with the tweening capability and support for audio and video
make it a great tool.

Maria Chong, Programming Games class, Spring, 2004