|
|
eZedia
& the Path +
the Container Object + the Branch
"Our Tour Through the Lower 48 States"
Part 1
Part 2
In a previous project,
we worked through using the path to animate a science graph. This time
we're going to use the exact same techniques, but apply them to a map.
We're
going to create a road trip tour with pictures that will pop up as our
little car drives along the road we're going to make.
As you do this, keep in mind that this same simple technique was
used to animate a science graph and is now being used for a social
studies map. You could also apply it to take people on a tour of your
neighborhood. Or, if you're an English teacher, you might have students
create a map
of the story and indicate where events happened. Once you learn how to
do this, it doesn't matter what you teach. There will probably be a
hundred
ways to apply it.
What will be the result of this project?
Well, we're going to first take a map of the US lower 48 states that I
created in ArcView (see the info in the GIS section) and exported as a
JPEG, and then add it to our background. Next, we're going to bring in
the picture of the US flag, that I've also provided, and we're going to
fade the image a bit so that it becomes a pretty watermark on the page.
When we've adjusted the transparency level to our liking, we'll also
add
it to the background. Once our two images have been put in place, we're
going to draw a path for our road trip and put some markers in
place. As our little car drives along the road we
have created with our path object , we're going to have
pictures pop up showing us what we might see at the markers. We're also
going to attach labels to the pictures. Here's a picture of the final
product:
Keep in mind that our project is all going to be done
on a single frame. What's really exciting about the project is that we
get to start playing with the logic area of eZediaMX. Of course, if
you've never had to do things the hard way, it may be difficult for you
to appreciate just how easy this is. I think you're going to begin to
get some ideas after you work through this. (Note: I've got pictures
popping up, but it could just have easily have been sound files or
movies.)
Let's begin. As per usual, you'll first hear me tell you to
create a new folder for your project. Get in the habit. (How often have
you heard me natter on about that?)
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. Creating our background for the frame: Click on the
graphic icon (see the next picture) and go get the US.png graphic that
I have provided for you. We're going to make that the background image
for our frame.
Figure 2: Clicking on the Graphic Object icon.
Once you've clicked on the graphic icon,
you'll be asked to locate the graphic you want to open. Locate the file
on your hard drive or wherever you may have saved the pictures I have
provided for you.
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 map 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. eZediaMX is going to warn you that this picture
is too big for your frame (Figure 5). It will offer to make it smaller
for you. Say no in this case. We're going to want the extra
room. Once the picture is put in place on the frame, we're going to
enlarge the frame by dragging on the outer edges so that it will fit
our
picture.
Note:
Another way you could do this is to go to Frame > Document Setup
> Frame Width - 742 and Frame Height - 486. That way, your frame
will be the correct size for your graphic. When you don't know the size
of your graphic, then dragging on the outer edges of the frame the
first time is probably the
easiest way to do it. Those dimensions will be recorded in the Document
Setup
information automatically so you can check there for setting up the
size
of other frames in the same project.
Figure 5: Saying no to having
eZediaMX resize the graphic.
|
|
|
6. Move your picture
into place. Our intention is to have it fill the frame, but the frame
is a bit small. Position the map so that there is room
at the top for a title and sufficient room around the edges to have the
pictures show up. See the example at the top of this webpage. Now, move
to the bottom, right-hand corner of the frame and look for when your
cursor
turns into a double-headed arrow (Figure 6). Click,
hold, and drag outwards to enlarge the frame until the entire map can
fit
into place on the frame.
Figure 6:
7. When the map is in the correct position and you
can see little handles around the map, as in Figure 6 or 7, that
indicates it is selected, click on Objects > Add to
Background (Figure 7). 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 or the hard drive and can always get it again
if anything goes awry.
Figure 7:
|
|
|
8. With the map graphic in place, we're going
to bring in the flag picture that will be faded to act as a watermark.
Click on the Graphic Object icon in the toolbar again, as in Step 3.
Navigate to where the picture is located. Highlight it so that the name
appears next to File Name and then click Open. Your flag should now be
showing in
the Graphic Object preview window (Figure 8). Click on OK.
Figure 8:
9. You'll notice that we have a slight problem. The flag fills the
entire frame (Figure 9). We need to move our mouse cursor over the flag
image and then click, hold, and drag it out away from the corner and
down a bit so we can see the map behind. Look at the example in Figure
10.
Figure 9: Flag fills the frame.
|
|
|
Figure 10: The graphic is moved out from the corner of the frame.
|
|
|
10. Changing the transparency level of the
flag: The reason we want the flag out from the corner is so that
we can edit the transparency level more easily. With your flag
positioned, as shown in Figure 10, look at the top, left-hand corner of
your flag
where you see the little graphic icon. Click on the menu button below
the
icon or else right-click on the picture to bring up the menu of choices
(Figure 11).
Figure 11: Menu of choices - choosing Edit Graphic
11. When you clicked on Edit Graphic, you got
the small Edit menu appearing in the corner. See Figure 12. Click on
the bottom icon that allows us to lower the transparency level. When
you click on that, a small bar will appear as in Figure 13.
Figure 12: Clicking on the icon that will let us lower the transparency
level of the picture and turn it into a watermark.
12. The small slider bar that appears on the side of
the graphic allows us to raise or lower transparency levels. It also
provides a numeric value so we can do this the very same way a second
time if we make note of that number. I've lowered the transparency
level
such that the picture of the flag will only be a faint image, yet it
will
be visible on top of the map.
Click on the small "x" in the Edit menu when you have finished changing
the transparency level. That will end the editing. Once you have closed
the Edit menu, move the picture of the flag back into place on the
frame. You will probably need to stretch it a bit so that it covers the
entire frame, just the way the map does (Figure 14).
Figure 13: Dropping the transparency level of the graphic.
Figure 14: Stretching out the image of the flag to cover the entire
frame.
|
|
|
|
|
|
13. With
the image of the flag positioned on the frame so that it covers
everything (you don't want to end up with a skinny white stripe
somewhere), click on Objects > Add to Background (Figure 15). On
older machines, this will take a moment.
Figure 15: Adding the flag to the background after it has been
positioned to cover the entire frame.
14. Creating the path: Click on the
Path Object icon in the toolbar (Figure 16). Choose Freeform path
(Figure
17).
Figure 16: Click on Path Object icon in toolbar.
Figure 17: Choosing Freeform Path from the drop-down menu.
15. When you clicked on the Freeform path option
(Figure 17), your mouse cursor turned into a crosshair. Move it to the
beginning of your path on the map and then click, hold, and drag your
mouse across the map to draw the path. You'll see little red dots
appear to show you where you're drawing (Figure 18). When you get to
the end of your path, let go of the mouse and see what happens.
Figure 18: Drawing our path on the map.
16. As soon as we finished drawing our path and let
go of the mouse, a line appeared around the outside of our path object
(Figure 19). Notice that a "mini version" of the Path Object icon has
appeared in the top, left-hand corner. You've probably caught on now
that
ALL objects in eZediaMX will have something showing up there UNLESS you
decided to turn off the icons. (That's sometimes quite handy so don't
feel
guilty if you've already done that. You can always right-click on any
object
to get the hidden menu.)
Figure 19: The line around the Path Object appears when you let go of
the mouse.
17. Changing path options: Our Path Object
is drawn. Double-click on the Path Object to bring up the Object
Information box. You can also click on the little menu icon in the top,
left-hand corner of the object and choose Get Object Information from
the list.
Look at Figure 20. The first thing I did was give the path a title.
Give your path a title, too. Notice that I've altered the Delay from 1
to 95. In just a minute, we're going to set the path up to send
information to a container object where we're going to look at numbers.
If the path is going too fast, it is difficult to see the numbers. At
the present time, individual computer speeds can impact how big that
number has to be to
slow it down. You might need to make your Delay higher yet.
I've also changed the width of the line that the path will draw to a 5.
In addition, I've chosen to make the path visible. It helps the viewer
understand where our little car will be heading on the road trip. To
make a path visible, make sure there is a check next to visible in the
choices area of the box. Also, uncheck Loop. We want our path
to come to an end.
The final change I made was to click on Color and choose a different
color for our path. When you click on Color, the color box will show
up. Choose a color. Click Ok and the color you choose will appear in
the print for the word Color in the dialog box.
When you've finished making your changes, click OK.
Figure 20: Path Object dialog box
18. Using the Container Object: We're now
going to get a Container Object so we can track the numbers in our
path. We'll use that information to have our pictures pop up at the
right spots. Click on Container Object in the tool bar (Figure 21).
Figure 21: The Container Object
19. The Container Object popped up in the middle of
the frame (Figure 22). Move it to where you can line some items up. I
moved it to the top of the frame because I know I'm going to have
pictures all over the bottom. In a couple of minutes, though, we're
going to see that there could be a minor problem with that decision.
Figure 22:
20. Using the Container Object: Double-click
on your Container Object to get the Object Information dialog box or
use the drop-down menu button on the left of the object. (Notice how
everything is pretty consistent in eZediaMX. Are you starting to catch
on to the patterns? Think about them as you work through this.)
In Figure 23, we see the Object Information box open. I've given
the Container Object a title to describe the contents. I've also left
Visible checked. We want to be able to see the numbers in the
container.
Later, when we've finished developing our project, we'll bring this
option
up again and uncheck visible so that it can't be seen in the final
product.
We want to leave everything else the same. Right now, it says activate
on Mouse Down. That will change in a moment when we link it to the Path
Object; however, eZediaMX takes care of that for us automatically.
Click
OK when you've finished giving it a title.
Figure 23: Container Object dialog box open to check options.
21. We need to have information flow from the
path to the container so we can see the numbers, like mile markers on
the path, appear in the container when we preview the frame. Click on
the Link Object in the toolbar (it's the one that looks like chain) and
then click on the path object and hold, and drag to the container
object.
When the Container Object gets a red line around it (Figure 24), you
can let go and you'll see a line linking the two things together.
Figure 24: Linking the path to the container
22. Click on the Graphic Object icon in the toolbar
and go get the car graphic I have for you. Click OK when it shows up
in the preview window as in Figure 25.
Figure 25: Car graphic
23. Making the white background in a graphic go
away: Our car has a bright white rectangle around it. We're going
to make that go away. Right-click on the graphic and choose Edit
Graphic. This time, choose the top choice in the Edit menu. Next, click
on the
color white by the back bumper in the car graphic and a slider bar will
appear (Figure 26). UNTIL you choose the color by clicking on it, the
slider
bar will NOT show up. That's a good reminder that you haven't completed
that step.
With the car graphic, we want to take the slider bar all the way
to the bottom so that no white will remain. When you have done that,
click on the little "x" in the Edit menu and close out the edit
functions.
Figure 26: Making the white background for the car completely
transparent by using the Edit Graphic option to choose a single color
to make transparent.
24. Move the car off to the right side of the
frame near the top. We're now going to connect the car to the path so
that it runs along our little roadway. Click on the Link Object in the
toolbar. Click, hold, and drag a link from the car to the path (Figure
27).
Figure 27: We've linked our car to the path.
25. Using the Shape Tool: To help us mark
our spots on the path so we can get the approximate numbers we need,
we're going to make some mile markers. These will be created with the
Shape
Tool. We're only going to make one and then we're going to duplicate it.
Click on the Shape Tool in the toolbar and choose ellipse (looks
like a circle). Move to your frame and click, hold, and drag down and
across to create a tiny, white circle. Let go of your mouse. Now, with
the
shape still selected (it has little handles all around it), hold down
the
control key with your little finger on your left hand and touch the
letter
D with the middle finger or forefinger of your left hand. The control
key
is usually shown as being CTRL. The letter "d" stands for duplicate.
You
should have another little circle showing up (Figure 28). If not, try
it
again. Make sure you keep holding down the CTRL key while you touch the
letter d. Only touch the letter d. If you keep your finger
down on it, you'll mass produce those little white circles so that your
frame will look like you've just invented a new type of measles!!
Move the dots to match the placement in Figure 28 or
in the picture at the top of this webpage. These will just sit on top
of the Path Object. Just like signs on the side of the road, they don't
do anything to the road by just being there. However, when we preview
our project in just a minute, we're going to want to pay careful
attention
to what the numbers are in the container when the car drives over those
spots - just the same as mile markers on the highway.
Figure 28: Duplicating the white circular shapes that will mark
particular spots on our path.
26. Click on Frames > Preview. If you
haven't saved your project, eZediaMX will now prompt you to do so
before it will show you what you have created. I know you created that
folder
for your project at the very beginning, so go locate it now and save
your
project in there.
Click on the X to close the Preview Frame
when you’re finished or else hit escape.
27. Did your little car drive along the path past
your white dots? Fix anything that needs to be altered before going
further.
- If your car didn't go along the path, you
probably have the link going the wrong way. Delete the link that is
there and draw a new one as shown in Step 24.
- If numbers didn't show up in the container,
you probably don't have visible checked in the Container Object.
Double-click on the Container Object and fix that.
- If the car won't quit running on the path,
then you forgot to take off loop. Double-click on the Path Object and
fix that.
28. Record the numbers that match the position
of the white dots: I'm going to guess that you didn't get the
numbers recorded the first time you watched your project. There could
be 2 problems: (1) the numbers were going by too fast; (2) the
container object is up
in the left-hand corner of the frame and the dots are in the bottom
right-hand corner. Hmmm?? Did I lead you astray earlier? To a certain
extent, yes!
It is very difficult to look in two parts of a frame at the same time.
On the one hand, the Container Object is out of our way while we work
on the path, but we need it closer to see the dots and the numbers at
the same time because our tour is going along the bottom of the 48
states.
You could just as easily have chosen to go a more northerly route.
Move the Container Object to where you can see the
numbers and the dots at the same time. Just click, hold, and drag
it to the new position. The link between the Container Object and the
Path Object
is like a big elastic. It stays connected and lets you stretch it as
much
as you want. When you've finished getting the numbers, just drag it
back
to the top corner where it will be out of the way when you add all of
your
pictures.
eZediaMX is very flexible. Take advantage of that. It doesn't care
where the Container Object is located. Because we're not going to have
it visible in the final project, we don't care either. What we do care
about in positioning the object is that our work flow remains simple
and
efficient.
While you're trying to catch those numbers, I'd also suggest
double-clicking on the Path Object and slowing the Delay even more. Try
it at 115 or 125 and see if that makes a difference.
Here's our Container Object temporarily moved to a better position
to catch the numbers.
Go to the 2nd
part of the project where we add in the branch object and make the
pictures and text appear!
|
|
|
Graphics for this project:
US map
US flag
Car
Santee Reserve
Hofwyl Plantation
Rice Field
San Antonio
Mission
|
