Extend, Enhance, and Facilitate - eZedia - Techniques & Ideas

Extend, Enhance, and Facilitate

Home

Inspiration

VR Software

GIS

Teaching Ideas

Training Materials

Portfolios

VR's (Too cool!)

Contact Us

eZedia & the Path + Event
"Annotating a Science Graph"
Part 1 Part 2

One significant problem for most students is understanding and interpreting graphs and charts. Here is a simple exercise that can be done that combines multimedia and the EZScreen graph from the PASCO science probes to have students begin to annotate graphs. This is only the beginning. It can much more complex, if you want. You'll be using the graphic(s) I've supplied of the EZscreen (the links to those are at the bottom of this page). As you do this, think that this could just as easily be a map or a diagram of a process. Remember: this example is only the most basic.

1. Create a new folder for your project before you begin. This is where you’ll save your eZediaMX project. (Don't tell me you'll do it later - do it now. It's an important habit.)

2. Start eZediaMX.

3. Click on the graphic icon (see the next picture) and go get your science graph that you either exported from Data Studio or did the screen capture on for EZScreen or you've downloaded and saved to your computer from one of the graphics at the end of this page.

Click on graphic icon

Click on graphic icon

Once you've clicked on the graphic icon, you'll be asked to locate the graphic you want to open. In this next image, you see me going to look on my floppy disk, known as the A:\ drive.

Locate the file

4. When you see the file you want, click on it and you’ll see the name appear in the line next to “File Name” (Figure 3). Click on Open. You’ll be returned to eZediaMX and you’ll see your graphic appear in the preview window to the right of the Graphic Object dialog box (Figure 4). If you’ve got the right one, click on OK.

Figure 3:


Figure 4: Here you can see our graph showing up in the preview window in the dialog box. The preview window is quite handy. There are times when you go and grab the wrong file. Just click on the "file" button below the preview and go get the right one if you've goofed.
5. Move your picture into place Figure 5). Our intention is to have it fill the frame. Position it so that the graphic is tucked snugly into the top left-hand corner. You shouldn’t see any white space running down the left side of the frame nor the top of the frame. When it is in the correct position, click on Objects > Add to Background. Remember - once you add an object to the background it can’t be undone. We’re not worried here because we have our graphic saved on the disk and can always get it again if anything goes awry. Figure 5:

6. Drawing our path: We have a graph as part of our background for our frame. We’re now going to draw a path that traces the red line on the graph. Click on the Path Object. Choose the first item from the drop-down menu. Now, move your mouse cursor to the beginning of the red line on the graph and click, hold, and drag your mouse along the length of the line to trace the graph (Figure 6). When you are done, let go of the mouse button. The path object will now appear with a box around it. Figure 6: Using the path to trace the line on the graph
Figure 7: The path is complete. We've let go of the mouse. The path object we've just made appears over the line on the graph.

We now need to get something to run along our path. In Figures 6 and 7, you can see where I have drawn a circular shape. I actually did mine before I traced over my path. It doesn’t matter whether you draw your shape first that you are going to run along the path or if you draw the path first. The order doesn’t matter at all. 7. Drawing our shape: We’re going to click on the Shape Tool icon shown in Figure 8 and choose the ellipse, so we can draw a small circle that will run up the path we’re going to draw on the temperature graph. Click on the Shape Tool and from the drop-down menu, choose the object that looks like a circle. Move anywhere on your frame and click, hold, and drag your cursor, down and across to create a small circular graphic. Next, we’re going to click on the little button below the icon on our circle and we’re going to get the drop-down menu of choices (Figure 9). Click on Edit Graphic at the bottom of the list. You’ll see the Edit box appear. Click on Fill because we’re going to change the color of our ball from white to orange (Figure 10). Figure 8: Click on the Shape Tool icon in the toolbar and choose the ellipse so we can draw a small circle.
Figure 9: We clicked on the little drop down button next to the graphic icon in the top, left-hand corner of the circle we created - or - we right-clicked on the object to get this menu of choices.

Figure 10: Click on the "fill" button in the Edit menu to change the color of our plain, white circle.
Edit fill color

Edit fill color

8. The Choose Color dialog box becomes visible. Simply click on a color and then click on OK (Figure 11). Back in Figures 6 and 7, you can see the little, orange circle I made earlier.

Figure 11: Just click on a color - in this case orange. In another situation where you want very subtle choices over color, click on the tab labeled HSB.
Choosing the color

Choosing the color

Creating our link:
We now have a path traced over our graph. We have a shape drawn and ready to go. We now have to link the two together so that the graphic (circle) runs on the path. We’re going to click on the Link icon in the toolbar, the one that looks like chain links and connect the one to the other.

Big Question: Which should we click on first - the path or the graphic? Does it matter this time? YES!!!!

Let’s talk ourselves through this. Do we want the ball/circle to run along the path? Or, is the path supposed to run on top of the ball? Put like that, it sounds rather obvious. We want the ball to run along the path.

To make the ball run along the path, we click on our Link icon. Now, move to the circle and click, hold, and drag over to the path. You’re going to notice that the box around the path will turn red when you are ready to let go. As soon as the path object gets a red line all around the perimeter, you can let go and your object will be linked. That bright red line around the object is the signal you can let go every time you’re linking something.

9. In Figure 12, you can see that we have created our link by clicking on the ball/circle and dragging over to the path object. The path object now has a red perimeter. That signals you have linked correctly and can let go.

Figure 12: Linking the graphic to the path.

Linking the graphic to the path

10. Let’s save our project in its own folder and then preview it to see how it looks. To save a project for the first time, click on File > Save As. You can even click on File > Save, IF it is the first time you are saving it - eZediaMX will still prompt you to give it a name.

Figure 13: Saving the project in the folder you created before you started this project. IF you didn't, then clicking on the 3rd icon (the one with the little start on it) to the right of "Save in" will let you create a new folder now. Make sure you open the folder up to put your project in it before giving the project a title and saving it.
Saving project in the folder

Saving project in the folder

11. To preview your project, click on Frames > Preview (Figure 14). Click on the X to close the Preview Frame when you’re finished or hit escape.
Figure 14:
Previewing our project

Previewing our project

What we might have seen in the Preview window:
The ball might be running a bit quickly on the path. It may also be caught up in an endless loop. Let’s change that by editing the Path Object. Close the Preview window if you haven’t already done so BEFORE going on to this next step.

12. Look at the Path Object in the eZediaMX editor (Figure 15). As per usual, look in the top, left-hand corner of the object. Click on the little menu button right below the icon. Choose Get Object Info from the drop-down menu. Of course, you also could have just double-clicked on the object and gotten to the same spot! (I just wanted you to practice playing with that little button to get to the menu.)
Figure 15:
Editing the path object

Editing the path object

13. Okay, you’ve gotten to the Path Object dialog box (Figure 16). First, give it a name. I named mine “Temperature Path.” I left it to activate as soon as the frame opens. The direction is forward, but the delay has been changed to 5 from the default (usual) value of 1. The bigger the number the slower it goes. I also have decided I don’t want the path to be visible so that is unchecked. As this is a temperature graph, I also don’t want it looped, so that has been unchecked. With those choices made, I click on OK. You can, too. Are you done? When you are, preview your project again and see if that slowed things down just enough.

Figure 16: The Path Object dialog box

Path object dialog box

Preview your project again.

Challenge:
Once you get the ball running along the path, I want you to create a second path that runs up the thermometer on the left and stops at the end of the red area. I want the graphic to be a bright, yellow rectangle - not too big, and a bit narrow, running along the path. Think of it as a yellow bar running up the thermometer.

Hint:
You’ve already practiced all the steps necessary to accomplish this. Talk yourself through it. What’s the first thing you’re going to do?

Figure 17: You can see the results of our efforts in this picture. There is one difference. A text box is also on the frame. In Part 2, we're going to show you how to trigger an event from a path. The result, in this case, is to make the text box appear when the circle stops.
Finished project

Finished project

Here are 3 EZscreen graphs you can use for this project:
Graph 1
Graph 2
Graph 3

Last edited: September 21st, 2003