Function Grapher Demystified Step 1

Transcription

1 Function Grapher Demystified Step 1 MathDL Flash Forum Learning Center Functions Grapher Demystified by Barbara Kaskosz and Doug Ensley 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 elements 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 way possible. In Step 1, we show how to create buttons and a movie clip in which graphs will be drawn. In Flash MX 2004 or Flash 8 open the file fgd_step1.fla to see how the file that you are about to create will look like at the end. 1

2 Test the movie by going to Control in the uppermost menu and clicking on Test Movie: You see two buttons and a white square. The buttons are clickable but nothing happens when you click them. That is because there is no ActionScript code entered in this step. Note: Most of the screen shots in this article depict Flash MX 2004 Professional but everything looks nearly identical in Flash 8. Close the file fgd_step1.fla. From the File menu choose New Flash Document to open a new fla document. Save it under a name of your choice. Let's begin by changing the size of the document, the target version of the Player, and the background color. To change the size of the document, click on a point on the Stage, open the Properties panel at the bottom of the screen by clicking on its name, and click on the button marked "Size": In the dialog box, type new dimensions and click OK. If you are in Flash 8, the Player version is set by default to Player 8. Everything we will do is compatible with Player 7 as well as 8. Thus, 2

3 if you are in Flash 8, click on the Settings button next to "Publish". In the dialog box that appears, choose Flash Player 7 in the Version field and click OK: To change your movie's background color click on the little arrow below the color box marked "Background". Choose a desired color from the palette that appears and click on it. We chose light gray, #CCCCCC: 3

4 Every document opens with one layer by default. We shall create two more layers and name our layers: Scripts, Board, and Buttons. Click Layer 1 to select it. Click the icon underneath the Timeline marked on the picture below. A new Layer 2 appears: Click the icon again, Layer 3 appears. To rename the layers, double click on their names. The text becomes editable. Type in a new name and press Enter: Name the layers: Scripts, Board, and Buttons. Let's have a quick look at the Tools panel in the leftmost column. Unless you are performing a specific task, like drawing or creating text fields, the Selection, or the Arrow, tool marked by the black arrow should be selected: 4

5 The other two tools that we are going to use throughout this tutorial are the Text tool: and the Rectangle tool: We will create now a movie clip "mcboard" in which our graphs will be drawn. (In the article mentioned above a graphing board was created programmatically. It was an instance of the class GraphingBoard.) First go to the uppermost menu item "View" and then follow submenu items: View Grid Show Grid. Click Show Grid. The grid appears which makes the Stage clearly visible. (The grid will not appear in the compiled movie.) Go to View menu item again, then Magnification and choose 50%. Now, the Stage is visible in its entirety: 5

6 Select the layer "Board". In the Tools panel select the Rectangle tool. Choose black in the stroke box (marked by a pencil icon) and white in the fill box (marked by the bucket icon). To select a color for either of the two, click on the little arrow at the bottom of the respective color box and then on the desired color rectangle: With the right colors showing in the stroke and fill boxes, we are ready to draw a rectangle with a black border and white background. Press the mouse over a point on the Stage and start dragging. In order to draw a square, keep the Shift key pressed while you are dragging the mouse. Try to draw a square which is 320 by 320 pixels. It is hard to get the right dimensions. After you draw a square, select all its elements: the interior and each of the four sides. To select all of them, click on each while the Shift key is pressed. Then, in the Properties panel (make sure the panel is open before you select the elements of the square) type 320 in the width and the height boxes: 6

7 Now we shall convert the square to a movie clip. Once it becomes a movie clip, it has all the important properties and methods of the Flash's movie clip class. To convert the square to a movie clip, select again all its elements. Then right-click on it. From the menu that opens choose Convert to Symbol: 7

8 The dialog box opens. Choose "Movie clip" as behavior and type "boardclip" in the name field. Also, make sure that the registration point is marked as the upper right corner. The registration point is going to serve as the reference point with respect to which coordinates of points within the clip are going to be measured. Knowing where the reference point is will be crucial to drawing correct graphs. 8

9 Once everything is in order, click OK. The outline around the square changes as well as its description in the Properties panel. The registration point of the clip is marked by a cross: The Properties panel tells us that our clip is an instance of boardclip. The Instance Name field is empty. Until we give our clip an instance name, we will not be able to access it through ActionScript. Type "mcboard" in the Instance Name field. We are done. We have created a movie clip with instance name "mcboard". Later, we will place our graphs in this movie clip. To finish this step, we will create two buttons which in Step 2 will cause the graphs of two predefined functions, e x and sin(x) to be drawn. Go to View Magnification 100% to see objects in their actual size. Select the Buttons layer. Select the Rectangle tool. Choose black in the stroke box and #E4E4E4 in the fill box. The latter color does not appear in the palette. Thus, type its number in the palette hex field and press Enter: 9

10 With the desired colors selected (of course, you can choose different colors if you prefer), draw a rectangle on the Stage of the size you want your button to be. Go back to the Arrow tool. Select the left portion of the rectangle's border, press Shift, and select the upper portion of the border. You want to change their color to white. Click the little arrow of the Stroke box and click on the white square in the palette that opens. The selected portions of the border are now white. In order to create the label for your button, choose the Text tool. 10

11 Make sure that Static Text shows in the Properties panel. Choose font, size, and color. Make sure that that Alias button marked "A" is clicked. You do not want anti-aliasing for small text. (In Flash 8, choose "Bitmap text, no anti-alias" in the menu which appears where the Alias button used to be.) Type "e". Go back to the Arrow tool. The text box is selected. You can still change all its properties via the Properties panel if you are not pleased with the appearance of the text box. Use the arrow keys on your keyboard to move the text box to the center of your rectangle. Select the Text tool again and type "x" in a new static text box. (You could use the superscript option before but creating a new box gives you more control over the appearance of your exponential. For all text boxes, try to make sure that their x and y coordinates are whole numbers; it tends to prevent smudging. Now we need to convert our rectangle and its label into a button. To do that, select all elements by pressing the Shift key and clicking on the elements with the Arrow tool: 11

12 After all elements are selected, right-click on the rectangle and choose Convert to Symbol from the pop-up menu. In the dialog box, select Button and type in expbtn in the name field: Click OK. The outline around the rectangle changes and it is still selected. We could leave it as is and it would act properly as a button but to animate its behavior a bit, we shall edit the button symbol we have just created. Right-click on the selected button and choose Edit in Place in the pop-up menu: 12

13 Once we click Edit in Place a new view opens: we are now in the button's own timeline: Select the Over frame, which is at the moment empty. Then go to the Insert item in the uppermost menu. Once you mouse over the Timeline item a submenu shows up: 13

14 Click on Keyframe. All contents from the first frame are now copied to the Over frame. Select Down frame and insert a keyframe as above. We want to edit the content to create the illusion of motion when our button is pressed. Still within the Down frame, select the left and the upper portions of the button's border. Change their color to black. Select the right and the lower portions of the border and change their color to white. Next, select the Hit frame and insert a keyframe there. Move the red Playhead over the four frames. You should see the button movement up and down. 14

15 To leave the button edit mode and get back to the main document, go the Edit item in the uppermost menu and click Edit Document: Test the movie. If you click on the newly created button, it gives an illusion of motion. Go back to the fla file. We want to create another button for graphing the sine function. Instead of going through the lengthy process again, we shall duplicate the expbtn button. If the file's Library is not open, go to Window in the uppermost menu and click Library: 15

16 In the Library, select the expbtn and click on the tiny icon in the upper right corner: In the pull-down menu, click Duplicate. A dialog box appears: In the Name field type the new name sinbtn and click OK. A new symbol, sinbtn, appears in the Library. Select it and drag it from the Library window onto the Stage: 16

17 We have two identically appearing buttons on the Stage; we need to edit the one we just dragged onto the Stage. Right-click on it and select Edit in Place. You are now in the button's timeline. In the Up frame, delete the box with the exponent and, using the Text tool, change the text in the "e" box to "sin(x)". Center the text box within the button's area (adjust x and y coordinates to be whole numbers). Then, with the text field selected, choose Copy from the Edit menu: Move the Playhead to the next frame. Delete both text boxes comprising "e x ", then go to Edit Paste in Place: 17

18 The "sin(x)" text appears where it should be. Repeat the process for the remaining two frames. Move the Playhead over the four frames to check the behavior of the button. If it is fine, go to Edit Edit Document. We have two buttons on the Stage now. In Step 2, we will need to access them via ActionScript. Hence, we need to give them instance names. Select the exponential button. In the instance name field, type "butexp". Next, select the sine button and give it the instance name "butsin". 18

19 We are ready to proceed to the next step. If you wish to create the title for the movie you have just created as in fgd_step1.fla, select Buttons layer, select the Text tool and make sure that Static Text shows in the Properties panel. Click a point near the upper right corner of the Stage and type "Function Grapher Demystified", press Enter for a new line, type "Step 1". Go back to the Arrow tool. With the text box still selected, change the text to italic, justification to right. As before, you enter the changes in the Properties panel. Move the field to a desired position by pressing the arrow keys on your keyboard, or by typing the new coordinates into the X-, Y- boxes of the Properties panel. Notice that we placed the title text on the Buttons layer. If we plan to have more text boxes, it would be convenient to create a separate "Text" layer. We will do so in the next step. The "Scripts" (or a similarly named layer) to which ActionScript is attached is traditionally left blank. Our "Board" layer will be masked in the next step, so placing our title there would not be a good idea. Note: The registration point for text fields is usually set by default to the upper left corner. To make sure that is the case, select a text box, then go to Window Design Panels Info. Click on "Info" to open the Info panel. The panel will show you properties of the selected field including its registration point. 19