Flash basics for mathematics applets

Transcription

1 Flash basics for mathematics applets A Simple Function Grapher, Part 4 by Doug Ensley, Shippensburg University and Barbara Kaskosz, University of Rhode Island In Part 4, we will allow the user to enter an arbitrary function f(x) to be graphed as well as the x and y range values. Thus, we will need to parse the user s input for f(x); that is, rewrite a formula for f(x) in a form suitable for evaluation. For that, we will need a couple of custom classes in the package bkde.as3.parsers. For Flash to find the classes required in your fla file, the folder bkde (with all the nested subfolders: bkde as3 parsers) has to reside in the same folder as your fla file: Under this condition an import statement in your code: This will allow Flash to find the classes in the package and compile them into you final swf file. Open fg_basic_part4.fla file in fg_basic_part4 subfolder in fun_graph_basic folder. Save the file under any name you want in the same subfolder, say my_part4.fla, to preserve the original. Before we examine the code, go to Control Test Movie to see how the compiled file works. NSF DUE and the Mathematical Association of America. Page 1 of 7

2 We see new buttons GRAPH and SYNTAX and a new input box for a formula for f(x). When you mouse over SYNTAX button, syntax instructions to the user appear. After a correct formula for f(x) and the values for x and y ranges are entered, GRAPH button causes the graph of the user-defined function f(x) to appear. If an error is found the familiar error box shows up. Close the movie and go back to our fla file. On the Stage we see a few Static Text boxes addressing the user. We also see a new input box for f(x). Select the box as shown in the picture on the right, and examine its properties. It is an Input Text type field. The field s instance name is finputbox. It is important to observe that finputbox is a Single line text field. The Single line setting prevents the user from entering hard breaks into the box. Hard breaks would ruin the input string that we will need to parse. We will set up wordwrap for the box to true to allow multiline display. We also see a movie clip in the Library (as shown on the left) called Instructions. The clip does not appear on the Stage. If you drag it to the Stage, you will see that it is a movie clip created manually with syntax instructions to the user, as shown on the right. NSF DUE and the Mathematical Association of America. Page 2 of 7

3 We will attach the clip at runtime as we want it to appear above the graphing board, ErrorBox, and other elements created programmatically. In order to make the clip accessible to ActionScript at runtime, we have to establish a link from the clip to ActionScript. It is done as follows. Select the item in the Library and click the tiny icon in the upper right corner of the Library window. In the menu that appears, click Linkage as shown on the right, and the following dialog box will appear: Check Export for ActionScript. All other fields will be filled in for you. Click OK. What you have done is the following. You have created a subclass of the MovieClip class. The subclass is called Instructions. You do not have to actually write the class. Flash did it for you. Flash created a subclass of the MovieClip class which has all the visual properties of your Instructions clip, with the class constructor, etc.. Having done that, you will be able to create instances of Instructions at runtime using the keyword new. This is all that was done at authoring time. Now, let s examine the new elements in the code. We only point out below the new aspects of the code and omit the parts that we have already discussed. On the next line we import classes from the subfolder "parsers" in a nested sequence of folders bkde as3 parsers. For Flash to find these classes, you have to place the folder bkde in the same folder as this fla file. The necessary classes will be compiled into your swf file. The two classes that we will use in this tutorial are MathParser and CompiledObject. import bkde.as3.parsers.*; We are creating an instance of the custom class MathParser and storing it in a variable called procfun whose datatype is MathParser. The constructor of the class, evoked by the keyword "new", takes one parameter: an array of strings. The elements of the array are names of variables allowed. In our case, it is just one variable x. Note: it is ["x"] and not [x]. In general, it is important to remember the order in which you list your variables. The NSF DUE and the Mathematical Association of America. Page 3 of 7

4 values of the variables will be passed to the evaluator method of MathParser in the same order. In our case, it will be simple: procfun.doeval(...,[value for x]); Our instance of MathParser will process the user's input for f(x). It will report mistakes in syntax and if no mistakes are found, procfun will "compile" the user's formula; that is, rewrite it in a form suitable for evaluation. var procfun:mathparser=new MathParser(["x"]); The movie clip Instructions was created by hand and it is stored in the Library. Under the Linkage item in the Library menu (the menu that can be accessed through the little icon in the upper right corner of the Library panel), the clip was set for export to ActionScript with the identifier Instructions. Because of that the clip can be attached at runtime via the "new" keyword. (When exported, Instructions became a subclass of the MovieClip class.) Below we are creating an instance of Instructions and storing it in the variable mcsyntax. var mcsyntax:instructions=new Instructions(); addchild(mcsyntax); mcsyntax.x=10; mcsyntax.y=10; mcsyntax will be visible only when the user mouses over SYNTAX button. Hence, we set its initial visibility to false. mcsyntax.visible=false; We have created a new input field on the Stage with instance name finputbox. This is where the user will enter a formula for f(x). finputbox.wordwrap=true; finputbox.text=""; There are no changes in drawaxes, detgraph, and other functions in the script. There are important changes in drawgraph. Hence, we copy the function below in its entirety and comment on the changes. NSF DUE and the Mathematical Association of America. Page 4 of 7

5 function drawgraph():void { var pixarray:array=[]; var i:int; var xstep:number; var curx:number; var cury:number; //The next variable will store the user's input for f(x). var sfunction:string=""; MathParser's docompile method returns an object of a datatype "CompiledObject". (CompiledObject is defined by one of the classes in the package). Any instance of CompiledObject has three instance properties: CompiledObject.PolishArray which represents a mathematical formula in a form suitable for evaluation, CompiledObject.errorMes which contains a string with an error message should a mistake in syntax be found, and, finally, CompiledObject.errorStatus which is 1 if an error is detected and 0 otherwise. Below we create a variable to store the results of compiling the user's formulas for a function f(x). var compobj:compiledobject; shgraph.graphics.clear(); ErrorBox.visible=false; iserror=false; drawaxes(); if(iserror){ return; We are storing the user's input for f(x). If the input box is empty, the function drawgraph quits. sfunction=finputbox.text; if(sfunction==""){ return; Evoking our MathParser's docompile method to compile the formula for f(x) entered by the user. Recall that the instance of MathParser created above is called procfun. If a syntax error committed by the user is found during compiling, that is, compobj.errorstatus is 1, a message is sent to ErrorBox and the function quits. NSF DUE and the Mathematical Association of America. Page 5 of 7

6 compobj=procfun.docompile(sfunction); if(compobj.errorstatus==1) { ErrorBox.visible=true; ErrorBox.text="Error in f(x). "+compobj.errormes; iserror=true; shaxes.graphics.clear(); return; If the function drawgraph gets to this point, that means there were no mistakes in the range input and a formula for f(x) was compiled successfully. The formula for f(x), rewritten in the form suitable for evaluation, is stored in compobj.polisharray. We proceed to draw the graph. xstep=(nxmax-nxmin)/npoints; for(i=0;i<=npoints;i++){ curx=nxmin+xstep*i; We calculated the consecutive value of x exactly as before. To obtain the corresponding value of y, we need to evaluate the formula for f(x) for x=curx. We accomplish that by evoking the procfun.doeval method of MathParser. Observe that the method requires two parameters. The first parameter has to be a PolishArray of a compiled expression. In the case below, it is comobj.polisharray which gives a compiled form of the formula for f(x). The second parameter of procfun.doeval method is an array of values for variables recognized by our instance of MathParser. In our case, it is an array containing a value for x: procfun.doeval(compobj.polisharray,[curx]). The method gives us the y values corresponding to consecutive x values. cury=procfun.doeval(compobj.polisharray,[curx]); pixarray[i]=[]; pixarray[i]=[xtopix(curx),ytopix(cury)]; shgraph.graphics.linestyle(1,0xff0000); for(i=0;i<npoints;i++){ if(isdrawable(pixarray[i][1]) && isdrawable(pixarray[i+1][1])) { shgraph.graphics.moveto(pixarray[i][0],pixarray[i][1]); NSF DUE and the Mathematical Association of America. Page 6 of 7

7 shgraph.graphics.lineto(pixarray[i+1][0],pixarray[i+1][1]); The following code makes SYNTAX button behave the way it does. When the user mouses over SYNTAX button, the Instruction movie clip appears. When the mouse rolls out, the clip disappears. butsyntax.addeventlistener(mouseevent.mouse_over,showsyntax); function showsyntax(e:mouseevent):void { mcsyntax.visible=true; butsyntax.addeventlistener(mouseevent.mouse_out,hidesyntax); function hidesyntax(e:mouseevent):void { mcsyntax.visible=false; The last very minor change is in the callback function for RESET button. The button resets the text in the f(x) input box to the empty string. Suggested Exercises. Modify the code to accomplish each of the following: 1) The current version does not display an error when the user does not enter anything in the f(x) input box. Change the code so the user gets the message Enter a formula for f(x) in such situation. 2) Modify the grapher so it can graph and display two user-defined functions at a time. Make sure the two graphs are displayed in different colors and both erased by RESET button. NSF DUE and the Mathematical Association of America. Page 7 of 7