Using Making Directions for Origami as an Example in Teaching Programming
Jeanine Meyer, Ph.D.
Purchase College/SUNY
Abstract: Making directions for origami models is an excellent way of demonstrating the use of Flash MX and its 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 activities 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. Links to these examples are available from
Background
This paper describes the use of building a computer application to display instructions to make a simple origami model as an example to teach 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 my 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 importantly, students understood how the application was put together in terms of the Flash elements of Timeline, 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 kissing birds 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 for free. Flash has several features that make it suitable for instructional and/or game applications. These include vector-graphics, frame based animation and event-driven programming. Though the author made no use of them for this first origami application, 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 movies. 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 movies. (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:
Vector-graphics
A feature of Flash that is extremely useful for 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 the 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 called 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 press 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:
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 creating 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 specific 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 lasso 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 heavier 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 capability of Flash 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 horizontal 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 the 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 line 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 indicated 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-usable entities that are stored in the Library. 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 different 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 cel, 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 animated 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 Keyframe 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 names, 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 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.
The 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 capabilityis 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 nextstepto hold the name of the label of the frame at the start of the next step. I wrote code to change 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 assignment 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 statements. (The answer to the question, "why not use periods?" is that periods are used for numbers such as what we call decimal numbers.)
The goToAndPlay does what it sounds like:
goToAndPlay(nextstep);
will advance the Flash movie to the value indicated by the variable nextstep. The value of nextstep is used as 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 are 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 programming. 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 terms"executed" and "called" are also used) when a certain event takes place. In this example, and 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 following 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 programming. The programming is defined in terms of events and the handlers for the events. For example, you 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 action 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 creating 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 Flash 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.
First start with a New Flash document by opening up Flash, or, from within Flash, use 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 fields 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 application. 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 Stage. While still having this button selected, open up the Actions panel and type in
on (release) {
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, essentially 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 is, 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.