In our MathDL Flash Forum article Flash Tools for Developers: Function Grapher, we provide source code and three templates for creating a function grapher in Flash. Those templates are versatile and easy to customize. This versatility comes at a price: most elemnts of the grapher are created dynamically, at runtime, which makes the code harder to read and understand. In this step-by-step tutorial, we show how to create a basic function grapher from scratch in the easiest possible way, with many elements created manually at the authoring time.

Unlike others, this tutorial is self-contained and does not require the material covered by other tutorials.

You can follow the step-by-step links below or you can download all the source files and the PDF tutorial files: fgd.zip.

You can also watch narrated video tutorials explaining each step in detail!   Companion video tutorials.

• Step 1.   In the first two steps we show how to graph two predefined functions, the exponential e^x and sin(x), in a predefined range. In Step 1, we create two buttons and a movie clip in which the graphs will later be drawn.

     Take a look at a PDF guide (1.6 MB)    View the html file

     Download the source fla file  You may need to right-click on the link to save the file before opening it.

• Step 2.   In Step 2, we write and explain ActionScript code necessary to graph the two functions. We also explain the need for masking, and the "wrapping at infinity" effect.

     Take a look at a PDF guide (794 KB)    View the html file

     Download the source fla file  You may need to right-click on the link to save the file before opening it.

• Step 3.   In Step 3, we allow the user to control the x and y ranges. We create the necessary input boxes, process the user's input, and draw the graph of the predefined function, e^x, in the new ranges.

     Take a look at a PDF guide (396 KB)    View the html file

     Download the source fla file  You may need to right-click on the link to save the file before opening it.

• Steps 4 and 5.   In Step 4, we allow the user to define the function to be graphed as well as the x and y ranges. To process the inputted function, we need the MathParser class from the article mentioned above. We explain in detail how to use the parser. In Step 5 we add a few final touches.

     Take a look at a PDF guide (624 KB)    Step 4 html file    Step 5 html file

     Download the source fla and class files: fgd_step4a5.zip