Steal this Applet!!!
Doug Ensley, Shippensburg University
Barbara Kaskosz, University of Rhode Island
The material presented in this workshop is also available on the site http://webspace.ship.edu/deensley/stealthisapplet/
Minicourse Outline





Overview of the www.flashandmath.com Project
An Introduction to XML: The nuts and bolts of stealing our applets
Presentation of the Applets
Overview of Flash Programming and Resources Available
Discussion of Future Developments for this Project
Flash and Math
The website http://www.flashandmath.com was launched in July 2007 as a resource for mathematics and science
educators, but it has quickly grown into a very popular site for Flash Developers in general. While increasingly general in
scope, we have not lost sight of our origins, so the context for many of examples and the focus of many of our tutorials
remains the use of mathematics in Flash and the use of Flash for mathematics.
ICTCM 2008
Ensley & Kaskosz – ICTCM 2008
Introduction to XML in Flash
In this tutorial, we will show how to edit an external data file that has been created in tandem with a Flash applet. The
advantage of this approach is the flexibility that it allows for the finished applet file. With this technique, a single applet
file can be used to host multiple activities or problem sets. Even more importantly, an instructor who knows nothing of
Flash programming can customize an application for his or her own needs.
Part 1: Before and After Comparison. Let’s pretend that you have browsed the Math Flash Forum site and come across
a mathlet written by Ensley & Kaskosz called polar.fla. The application is the straightforward polar curve graphing utility
shown below:
“Very nice,” you think. “Ensley & Kaskosz are very clever, but I wish this application had some built-in examples for my
students who are just learning about polar curves.” In this tutorial, we will show how to add this functionality in such a
way that the pool of examples can be constantly updated without any additional programming.
Part 2. Using an appropriately structured XML data file
According to the World Wide Web Consortium (http://www.w3.org),
... Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML (ISO 8879).
Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an
increasingly important role in the exchange of a wide variety of data on the Web and elsewhere.
If you have used HTML before, then the format of XML will look very familiar to you. The only difference is that in XML,
you create your own tags and tag attributes to make sense for your particular application. Open a text file (say, using
Notepad on a Windows machine) and enter the following text to reflect the information required to completely specify
two examples in the polar.fla application.
<gallery>
<plot func="1 + 2*sin(t)">
<xRange min= "-3.5" max="3.5" />
<yRange min= "-3.5" max="3.5" />
<tRange min= "0" max="2*pi" />
</plot>
Page 2
Ensley & Kaskosz – ICTCM 2008
<plot func="t/4">
<xRange min= "-4" max="4" />
<yRange min= "-4" max="4" />
<tRange min= "0" max="5*pi" />
</plot>
</gallery>
The tags <gallery>, <plot> , etc. and the attributes func, min and max are all invented in order to convey the
meaning of the data. ActionScript 3.0 allows the manipulation of this data in a manner that is entirely intuitive. Save
this file as gallery.xml in the same directory that your html and swf files will eventually reside. (Be sure you have not
accidentally saved your file as “gallery.xml.txt.”)
To understand the way XML works, we should define some of the basic terminology using the file described above as an
example.
We can think of the XML object plotDataXML as referring to gallery, which is essentially the root class of objects in
this file. plotDataXML has one type of child called plot, but it has several of them. These are referenced using array
notation as plotDataXML.plot[0], plotDataXML.plot[1], etc. We continue use the “dot” notation to refer
to children, so plotDataXML.plot[0].tRange refers to the tRange node of the first plot data object. To
reference an attribute, we vary this notation slightly adding an @ symbol. The reference
plotDataXML.plot[0].@func refers to the func attribute of the first plot object, and the reference
plotDataXML.plot[0].tRange.@min similarly refers to the min attribute of the tRange node of the first plot
object.
Part 3. Add code to import XML file and parse the data. We can make the following additions (along with adding an
appropriately functioning “Gallery” button on the stage) to polar.fla to create the new Flash file polarGallery.fla.
The gist of the changes is that we define an array for each of the nine input textboxes on the stage so that we can hold
the data for each of the examples in our gallery.xml file. In this way, any student-focused applet can be stocked with a
gallery of pre-defined examples that can be modified from instructor to instructor through manipulation of the data file
with any simple text editor.
We will discuss the code below in more detail at the end of the minicourse.
var arrFunc:Array;
var arrXmin:Array;
Page 3
Ensley & Kaskosz – ICTCM 2008
var
var
var
var
var
arrXmax:Array;
arrYmin:Array;
arrYmax:Array;
arrTmin:Array;
arrTmax:Array;
var xmlString:URLRequest = new URLRequest("gallery.xml");
var xmlLoader:URLLoader = new URLLoader(xmlString);
xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, noFile);
xmlLoader.addEventListener(Event.COMPLETE, initData);
function noFile(evt:IOErrorEvent):void {
arrFunc = [ "3*cos(t)" ];
arrXmin = [ -5 ];
arrXmax = [ 5 ];
arrYmin = [ -5 ];
arrYmax = [ 5 ];
arrTmin = [ 0 ];
arrTmax = [ 6.3 ];
InputBox1.text = arrFunc[0];
XminEnter.text = arrXmin[0];
XmaxEnter.text = arrXmax[0];
YminEnter.text = arrYmin[0];
YmaxEnter.text = arrYmax[0];
TminBox.text=arrTmin[0];
TmaxBox.text=arrTmax[0];
graphCurve();
}
function initData(evt:Event):void {
var plotDataXML:XML = XML(xmlLoader.data);
var numFuncs:Number = plotDataXML.plot.length();
arrFunc = new Array(numFuncs);
arrXmin = new Array(numFuncs);
arrXmax = new Array(numFuncs);
arrYmin = new Array(numFuncs);
arrYmax = new Array(numFuncs);
arrTmin = new Array(numFuncs);
arrTmax = new Array(numFuncs);
for (var i=0; i < numFuncs; i++) {
arrFunc[i] = plotDataXML.plot[i].@func.toString();
arrXmin[i] = plotDataXML.plot[i].xRange.@min.toString();
arrXmax[i] = plotDataXML.plot[i].xRange.@max.toString();
arrYmin[i] = plotDataXML.plot[i].yRange.@min.toString();
arrYmax[i] = plotDataXML.plot[i].yRange.@max.toString();
arrTmin[i] = plotDataXML.plot[i].tRange.@min.toString();
arrTmax[i] = plotDataXML.plot[i].tRange.@max.toString();
}
InputBox1.text = arrFunc[0];
XminEnter.text = arrXmin[0];
XmaxEnter.text = arrXmax[0];
YminEnter.text = arrYmin[0];
YmaxEnter.text = arrYmax[0];
TminBox.text=arrTmin[0];
TmaxBox.text=arrTmax[0];
graphCurve();
}
Page 4
Ensley & Kaskosz – ICTCM 2008
Derivative Self Test
Notes
In this example we have a simple xml file storing data controlling both the problem sets and parameters that determine
the interaction that the student will see. Note that for each problem, both question and answer are specified. We
check the user answer against the stored answer for a small number of points (numpoints) and if the evaluation stays
within a level of tolerance (tol) for this number of points, we mark the answer as correct. To understand the different
options for student interaction it is recommended that you interchange some true/false values to see the effect.
Set up a subdirectory (folder) on your website. In this folder, place the files Derivatives.swf, Derivatives.html,
AC_RunActiveContent.js, and derivatives.xml provided on the workshop CD in the Derivatives folder. Edit the file
derivatives.xml. (Look below to see an explanation of the various choices you have.) Direct users to
http://[yourdomain/yoursubdirectory]/Derivatives.html, and they will find your version of the applet.
Structure of the derivatives.xml data file
Page 5
Ensley & Kaskosz – ICTCM 2008
Riemann Sums
Notes
This classic applet can be customized with an enhanced gui applet that allows an instructor to choose the specific
examples a student sees and to tailor the functionality of the applet for use as a demo only or as a hands-on tool for
students to explore convergence of numerical integration methods.
Set up a subdirectory (folder) on your website. In this folder, place the files riemann.swf, riemann.html,
AC_RunActiveContent.js, and riemann.xml provided on the workshop CD in the RiemannSums folder. Use the
Instructor’s Tool (shown below) to set up your version. Once the desired settings have been made, click the button
labeled “Done?” to see the XML data that will correspond to your customized applet. Copy this XML code in its entirety
into the riemannData.xml file. Direct users to http://[yourdomain/yoursubdirectory]/riemann.html, and they will find
your version of the applet.
Using the Instructor’s Tool
Page 6
Ensley & Kaskosz – ICTCM 2008
Area Function
Notes
Download the files area_function.swf, area_function.html, AC_RunActiveContent.js, and intData.xml to a subdirectory
(a.k.a., folder) on your website. The final applet is shown below. Edit the file intData.xml. (See below to see an
explanation of the various choices you have.) Direct users to
http://[yourdomain/yoursubdirectory]/area_function.html, and they will find your version of the applet.
Structure of the intData.xml data file
Page 7
Ensley & Kaskosz – ICTCM 2008
Graphing a Function in Two Variables
Notes
Download the Flash player file fun_graph3d_gallery.swf, fun_graph3d_gallery.html, AC_RunActiveContent.js, and
graph3Ddata.xml from Surfaces directory of your workshop CD to a subdirectory (a.k.a., folder) on your website. Edit
the file graph3Ddata.xml to customize the gallery of examples. (Look below to see an explanation of the various choices
you have.) Direct users to http://[yourdomain/yoursubdirectory]/fun_graph3d_gallery.html, and they will find your
version of the applet.
Structure of the graph3Ddata.xml data file
Page 8
Ensley & Kaskosz – ICTCM 2008
Parametric Surfaces in 3D
Notes
This set of three applets serve a similar purpose in teach about parametrically defined surfaces shown in various
standard coordinate systems. The following instructions address all three of the applets, though we only show the XML
data for one of them.
1. Rectangular coordinates. Download the Flash player file surf_graph_rectan.swf, surf_graph_rectan.html,
AC_RunActiveContent.js, and surf_graph_rectan.xml from ParamSurfaces directory of your workshop CD to a
subdirectory (a.k.a., folder) on your website. Edit the file surf_graph_rectan.xml to customize the gallery of
examples. (Look below to see an explanation of the various choices you have.) Direct users to
http://[yourdomain/yoursubdirectory]/ surf_graph_sphere.html, and they will find your version of the applet.
2. Spherical coordinates. Download the Flash player file surf_graph_ sphere.swf, surf_graph_ sphere.html,
AC_RunActiveContent.js, and surf_graph_ sphere.xml from ParamSurfaces directory of your workshop CD to a
subdirectory (a.k.a., folder) on your website. Edit the file surf_graph_ sphere.xml to customize the gallery of
examples. Direct users to http://[yourdomain/yoursubdirectory]/ surf_graph_ sphere.html, and they will find
your version of the applet.
3. Cylindrical coordinates. Download the Flash player file surf_graph_cylin.swf, surf_graph_ cylin.html,
AC_RunActiveContent.js, and surf_graph_ cylin.xml from ParamSurfaces directory of your workshop CD to a
subdirectory (a.k.a., folder) on your website. Edit the file surf_graph_ cylin.xml to customize the gallery of
examples. Direct users to http://[yourdomain/yoursubdirectory]/ surf_graph_ cylin.html, and they will find
your version of the applet.
Structure of the xml data files
All three versions of the applet use a similarly formatted xml file. We show just one example below to illustrate the basic
structure. In the rectangular coordinates example, the three functions 𝑥(𝑠, 𝑡), 𝑦(𝑠, 𝑡) and 𝑧(𝑠, 𝑡) as the xfun, yfun and
zfun attributes of the <plot> tag. In addition, a range for the s and t parameters must be specified.
<rectangular>
<plot xfun="cos(s)" yfun="sin(s)" zfun="t" >
<sRange min= "0" max="2*pi" />
<tRange min= "0" max="3" />
</plot>
<plot xfun="t*cos(s)" yfun="t*sin(s)" zfun="t" >
<sRange min= "0" max="2*pi" />
<tRange min= "0" max="1.5*pi" />
</plot>
<plot xfun="sin(t)*cos(s)" yfun="sin(t)*sin(s)" zfun="cos(t)" >
<sRange min= "0" max="2*pi" />
<tRange min= "0" max="pi" />
</plot>
</rectangular>
Page 9
Ensley & Kaskosz – ICTCM 2008
Custom Grapher
Notes
This is a prototype for more types of interactivity we anticipate using for this project. When feasible we would like the
author to have the ability to lay out the entire applet (content and functionality) using only a drag-and-drop interface.
Using the Instructor’s Tool
Set up a subdirectory (folder) on your website. In this folder, place the files CustomGrapher.swf, CustomGrapher.html,
AC_RunActiveContent.js, and grapherData.xml provided on the workshop CD in the CustomGrapher folder. Use the
Instructor’s Tool (shown below) to set up your version. Once the desired settings have been made, click the button
labeled “SAVE” to see the XML data that will correspond to your customized applet. Copy this XML code in its entirety
into the grapherData.xml file. Direct users to http://[yourdomain/yoursubdirectory]/CustomGrapher.html, and they
will find your version of the applet.
Page 10
Ensley & Kaskosz – ICTCM 2008
Matching Game
Notes
The Matching Game applet is the brainchild of Barbara Margolius of Cleveland State University. Barbara is a “graduate”
of our 2007 summer Flash workshop who has graciously given us permission to use her work here. We have adapted
her original design (for matching (𝑓, 𝑓’) pairs) so that the same applet can be used in a precalculus course (matching
(𝑓(𝑥), 𝑓(𝑥 + 1)) pairs, e.g.) or in more than one way for calculus (matching 𝑓(𝑥) and 𝐹(𝑥), matching 𝑓(𝑥) and 𝑓’’(𝑥),
e.g.)
Set up a subdirectory (folder) on your website. In this folder, place the files matchXML.swf, MatchingGame.html,
AC_RunActiveContent.js, and matchData.xml provided on the workshop CD in the MatchingGame folder. Edit the file
matchData.xml. (See below to see an explanation of the various choices you have.) Direct users to
http://[yourdomain/yoursubdirectory]/MatchingGame.html, and they will find your version of the applet.
Structure of the matchData.xml data file
Page 11
Ensley & Kaskosz – ICTCM 2008
Scrambled Quiz
Notes
This applet uses a drag-and-drop quiz structure that can be applied to many different problems. The instructor can
customize the quiz content as well as title, instructions, and color scheme.
Set up a subdirectory (folder) on your website. In this folder, place the files ScrambledQuiz.swf, ScrambledQuiz.html,
AC_RunActiveContent.js, and quizData.xml provided on the workshop CD in the Scrambler folder. Edit the file
quizData.xml. (See below to see an explanation of the various choices you have.) Direct users to
http://[yourdomain/yoursubdirectory]/ ScrambledQuiz.html, and they will find your version of the applet.
Structure of the quizData.xml data file
Page 12
Ensley & Kaskosz – ICTCM 2008
Other Quizzes
Notes
Creating a custom quiz is a very common classroom use for Flash applets. It makes sense that the content and type of
quiz should be definable without Flash programming, and this applet allows you to do just that. There are three types of
questions that can be used (radio button, check box, and combobox – try the given example to see the differences).
Certainly the question type and content are easy to specify, but we have also tried to anticipate a few interface issues
that can be equally easily specified through data in the XML file.
Set up a subdirectory (folder) on your website. In this folder, place the files CustomQuiz.swf, CustomQuiz.html,
AC_RunActiveContent.js, and quizData.xml provided on the workshop CD in the CustomQuiz folder. Edit the file
quizData.xml. (See below to see an explanation of the various choices you have.) Direct users to
http://[yourdomain/yoursubdirectory]/CustomQuiz.html, and they will find your version of the applet.
Structure of the xml data file
Page 13
Discrete Mathematics applets for creating XML data
Ensley & Kaskosz – ICTCM 2008
There are times when the amount of data necessary to specify content or functionality is overwhelming to a potential
applet “thief.” In these cases, we can create graphical user interfaces (GUI), also in Flash, to help create the XML data.
Most of the examples below are for a unit on Graph Theory in a Discrete Mathematics course. Note that these example
use an older form of the Flash authoring system (and the swf files play in Flash Player 8). The result is that there some
peculiarities with the XML format required. Read the instructions carefully!
Instructions for the Eulerian Graph Tool
These instructions will allow you to create customized graph theory problems within the directory MyExercises provided
on the workshop CD.
Step 1. Open the instructor's "GraphMakerEuler" tool in its own window. Print these instructions or resize things to be
able to see these instructions and the GraphMakerEuler tool at the same time.
Step 2. Open the file euler.xml within the MyExercises directory. You will see the following lines:
<?xml version="1.0"?>
<problems>
<NumberToUse>0</NumberToUse>
<graph>
</graph>
</problems>
The number 0 between the <NumberToUse> and </NumberToUse> indicates that all of the graphs in this file will
be used. To specify that a subset of the total should be used, change this to the number of graphs you would like to be
part of your problem set. Note that initially there is nothing between the <graph> and </graph> tags. This is where
we will place the data that specifies our graphs. Leave this file open and return to the EulerGraphMaker tool.
Step 3. Follow the instructions in EulerGraphMaker to draw a graph that you want your students to search for Eulerian
trails or circuits. A quick reference for the functions available appears below. After the graph is formed, the student
interace will shrink the scale slightly so that labels can be added automatically. It is strongly recommended that you
preview the labeled graph in the student interface before quitting the EulerGraphMaker tool.



When RemoveNodes, DrawNodes, or EditLines buttons are pressed, you activate/deactivate a mode with
specific editing abilities. You will be able to tell that mode is active by the gray box that appears behind the
relevant button.
o When DrawNodes is active, clicking on the screen will produce a node. Once the maximum allowable
number of nodes is reached, you will be "cut off" from this function.
o When RemoveNodes is active, clicking on a node will delete it along with any incident edges.
o When EditLines is active, clicking on a pair of nodes will either draw an edge between them or remove
the edge between them if an edge is already there.
o When none of this buttons is active, you can freely drag nodes to rearrange your graph.
The Clear button erases your graph so you can start over.
The Finished button leaves the editor and shows you the data that defines your graph.
Step 4. The data for your graph is shown in a text box in the middle of the screen. Use your mouse (or click in the box
and press Ctrl+A to "Select All") to select all text that is there, and press "Ctrl+C" to copy it. Go to the still-open file
euler.xml, and paste (Ctrl+V) this line of data between the tags <graph> and </graph>.) Note that you can then
Page 14
Ensley & Kaskosz – ICTCM 2008
start over building another graph or you can return to edit the one you just copied to the text file. You should make sure
that a graph looks okay in the student interface before starting to build a new graph.
When adding more graphs to the euler.xml file, you will need to type your own <graph> and </graph> tags. Do not put
any space between the tags and the graph data!
Step 5. Test your exercises by opening the file EulerGraphs.html in your browser. You will notice that the problems
are given in random order. Note that you can include more instructions or information before and/or after the actual
Flash applet, if desired.
Other Graph Theory Applets
The following applets use the same authoring system and conventions as the Euler graph applet. Specific instructions
for each are given on the website.
Hamilton Graphs
Planar Graphs
Isomorphic Graphs
Page 15
Ensley & Kaskosz – ICTCM 2008
http://www.maa.org/prep/
http://webspace.ship.edu/deensley/prep2008/
Page 16