This Flash Forum article provides instructions and resources for producing customized graphing applets using the Macromedia Flash (either Flash MX 2004 or the more recent Flash 8) programming environment. After working through this material you will be able to build a fully customized Grapher for your own webpage using your own instructions, your own color schemes and your own choice of functionality.

The compressed file fun_grapher.zip contains all templates and code referenced within the article, and the twenty-four page Developer's Guide ( fg_guide.pdf ) gives detailed instructions for some specific customization tasks. Within this article, there is a brief description of each of the templates including active versions of each to demonstrate its functionality. In addition, we list some of the specific customizations that are addressed within the Developer's Guide.

The Flash 8 programming environment for Windows or Mac can be "borrowed" on a 30 day trial basis from macromedia.com. Try out Flash using these templates. We think you will be hooked!

The compressed file fun_grapher.zip contains all templates and code referenced within the article, and the twenty-four page Developer's Guide ( fg_guide.pdf ) gives detailed instructions for some specific customization tasks. You will find below a brief description of each of the templates including (if you click on the screen image) active versions of each to demonstrate its functionality. In addition, we list some of the specific customizations that are addressed within the Developer's Guide.

The Flash 8 programming environment can be borrowed on a 30 day trial basis from macromedia.com. Try out Flash using these templates. We think you will be hooked!

Template 1

Template 1 consists of the essential Grapher which graphs up to three functions in a single window and displays coordinates of points when the mouse passes over them. The user can also draw directly on the graph by moving the mouse while down. The source code for this applet can be easily modified to

• change the colors of background, border, axes and graphs;
• change the size of the "graphing board" and reposition the instructions and controls on the screen;
• turn off or on various features like the display of coordinates on "mouse over" and the drawing function with "mouse down"; and
• change the number of functions that can be entered to be graphed.

Template 2

Template 2 demonstrates how the essential Grapher in Template 1 can be easily extended to include the trace functionality common to many graphing programs and devices. Like Template 1, the source code for this applet can be easily modified to

• change the colors of background, border, axes and graphs;
• change the size of the "graphing board" and reposition the instructions and controls on the screen;
• change the size and color of the "trace symbol" (a cross in our case); and
• change the number of functions that can be entered to be graphed.

Template 3

Template 3 gives another example of the extensibility of the essential Grapher in Template 1. In this case, we have added a simple calculator to the screen using the same parsing methods already present within the graphing program. The source code for this applet can be easily modified in the same ways outlined in Templates 1 and 2.

The following outline describes what can be accomplished by following the Function Grapher guide after downloading the source files to your machine with Flash MX 2004 or Flash 8 installed.

1. Getting started. Download and unzip the relevant files including the documented source code and the detailed pdf file with instructions for customization.
2. Elements of the Grapher's fla file. An overview of the structure of the source code and some of the basic terminology for the Flash authoring system.
3. Elements on Stage: Properties and Instance Names. A tour of the objects on the Grapher stage along with an explanation of how their basic properties like size, color and location can be modified.
4. Modifying the Script: Changing Appearance. In this section, we will show how to customize the appearance and the properties of the Grapher through simple modifications of the script.
5. Modifying the Script: Resizing and Repositioning. Changing the size of the grapher is done through a modification of the script while corresponding changes to the elements of the stage must be done using the objects' properties.  This section discusses how to make these modifications in a consistent manner.
6. Modifying the Script: Changing Functionality. In this section, you will learn how to modify our basic template for a different learning objective. You will create an application in which a user enters only one function. The function is graphed when the GRAPH button is clicked. Then, when a button df/dx (which you will create) is clicked, the graph of the derivative of the function is displayed.
7. The Description of Custom Classes.  This section gives a technical description of the five custom classes contained within the package edu.uriship.math.fungraph. We include it here for completeness.
8. Creating New Object on Stage. This section provies a detailed description of how to create buttons, movie clips, and text fields from scratch and how to edit them is a bit beyond this little guide. We refer the reader to one of the books listed in the next section. The purpose of this section is to show that the process is really easy.

Download the 24-page fg_guide.pdf (a 1.2 MB file) for detailed instructions for customizing the Function Grapher.

Download fun_grapher.zip file (a 1.3 MB file) and unzip it in a folder on your computer. You will see a fun_grapher folder which contains all the files related to this article. You will be particularly interested in the following:

• The folder edu contains all the necessary ActionScript classes in a nested sequence of folders.Note that for Flash to be able to find the classes, the folder edu must reside in the same folder as the template you are working on.
• The three source files for the templates that will be discussed are fg_template1.fla, fg_template2.fla, and fg_template3.fla.

Working right from the folder fun_grapher, you can open one of the three template .fla files in Flash MX 2004 Professional or Flash 8 Professional and begin customizing the template to your liking. Alternatively, if you prefer a clean working environment, you can copy the edu folder and the templates into a new folder.