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)

90 views

jeanine.meyer@purchase.edu



1

Using Making Direc
tions for Origami as an Example

in
Teaching Programming


Jeanine Meyer, Ph.D.

Purchase College/SUNY

jeanine.meyer@purchase.edu


Abstract
:
Ma
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
approach
in
her

introductory programming class

at Purchase College/SUNY that focuses on game
programming
.
This
paper

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
Flash

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

a cup and a turtle.

L
inks
to these examples are available
from
http://
newmedia.purchase.edu/~Jeanine.


Background

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
programming
, 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
applications.

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
issing
b
irds is by Paul Jackson

and

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
-
in

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



2

These include vector
-
graphics,
frame based animation and event
-
driven
programming.
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:



Timeline

Stage

Tools for
drawing

Property information:
depends on what is
selected.


Vector
-
graphics

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.

jeanine.meyer@purchase.edu



3

Notice the many drawing tools

in th
e screen shot shown above of the Flash environment
.
In
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.
The
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
following:


jeanine.meyer@purchase.edu



4


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):


jeanine.meyer@purchase.edu



5



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


jeanine.meyer@purchase.edu



6


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.

jeanine.meyer@purchase.edu



7


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
jeanine.meyer@purchase.edu



8

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.

jeanine.meyer@purchase.edu



9


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

are stored in the Libra
ry.
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
jeanine.meyer@purchase.edu



10

invoked that indicates stop.

Here are screen shots from the wiggler
directions.
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
triangle.


Th
e last

screen shot

to be shown here

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

jeanine.meyer@purchase.edu



11



Flash provides ways to create quite intricate animations. One capabi
lity

is called
tweening.
With

tweening, you draw
in one

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

in Flash.

Event driven
Programming

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,
I
chose to set up
a variable called
nextstep

to

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

chang
e the value of this variable at the
appropriate places.


The critical code statements for this application are assignment statements,
goToAndPlay

and
stop
.
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
nextstep

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

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

The
goToAndPlay

does what it sounds like:

jeanine.meyer@purchase.edu



12


goToAndPlay(nextstep);

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

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


stop();

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
e
defined to use parameters. If a function does not have a parameter, it still needs the
parentheses.

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
rogramming.
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
s

"
executed
" and "called" are

also used) when a certain e
vent takes place. In this example,
an
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) {


goToAndPlay(nextstep);

}


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
nextstep
.
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
ming.
The

programming is
defined

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
manage
any

interdependencies.

Construction plan

for the Wiggler

The
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
pick
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.

jeanine.meyer@purchase.edu



13

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

us
e
File/New. Name the first and only layer
diagrams

and then add 2 new layers, naming
one
code

and one
labels
.

Click in the
diagrams

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

layer.
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
one
that
visually
suggests advancing
and drag it to the
S
tage.

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

on (rele
ase) {


goToAndPlay(nextstep);

}


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) {


goToAndPlay(1);

}


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

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

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

var nextstep;

nextstep = "diagonal";

stop();


The first line sets up the variable named
nextstep
. 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
"diagonal
"
. 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.

Let's
put a picture on the Stage.
Click in the
diagrams

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
jeanine.meyer@purchase.edu



14

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

for

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
diagrams

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
are

a
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
code

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

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

stop();

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
nd

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
"B"
. 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
"B"

to the variable
nextst
ep
. 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.

Reflection

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
especially
important.

Students often need help identifying
an audience.

The t
emplate defined for instructions is reasonably simple but powerful enough to do the
job.
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
rden
as expressed by the saying, "the code is all over the place." In the origami instructions,
jeanine.meyer@purchase.edu



15

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

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