I want to use one of the classy, drop-down
menus to navigate my project. How do I do that?
Drop-down menus look classy, so we automatically assume
they are difficult. Wrong! I've done a small demonstration project for
which I built a drop-down menu. Keep in mind that this is only one use
of the menu object. There are many more and I will show you those in
later pages.
First, let's look at a picture of one of these menus in
action on a project:
I love this feature in eZediaMX and as I've already said, it
can be used in a number of ways in addition to what I'm showing on this
page.
Beginning the process of making a drop-down menu to
navigate a
project:
I'm going to begin by assuming you have a document
window open in eZediaMX. You don't have to have a real project up to
try this. Just add 3 or 4 frames so you can check out whether you have
it working. When I was first doing a quick check like this, I went to
Frames - Frame Setup
- Color and gave each frame a different color. I didn't worry about
putting anything on it. I just wanted to know that I was really moving
between frames. Seeing the different colors would tell me that. If all
the frames are white, how do you know where you are when you're trying
it?? Some of you will want to get fancy. In that case, drag in a
different picture for each frame.
At the end of this page, I'm going to share teacher tips
to
make things a little fancier.
How to create a drop-down menu:
For a movie clip
showing this next series of steps (1 - 4), click here. (2.6 MB
compressed)
1. Click on the menu icon. It's not hard to guess which
it is because it looks like a drop-down menu. It's the 12th icon from
the left.
2. A menu object will appear in your document frame.
Double-click on it.
3. Give your menu object a title. It's just a good
habit and
you'll thank yourself later.
4. Look at the bottom of the menu object dialog box.
See where
it says "Item"? Highlight the text, type in one of the choices you want
on
your menu and click Add. Keep doing that until you have 3 or 4 items
entered.
Click OK when you're done. If you make a mistake, click on the item in
the
menu and the text will appear next to "Item" again. Make your
changes.
In the event that you don't want an item, click on it, and just hit the
Delete
button. Replace works the same way. Select the item. Type in the new
name
and hit replace to get it into the same order in the menu as it was.
Remember
to Click OK when you're finished your changes. Don't worry if you spot
an
error later. Just double click on the menu object and make your changes
-
nice and simple and very forgiving.
HINT: You're going to use this text 3 times in setting up your
menu. Why not just do it once? Use Notepad
(Start>Programs>Accessories>Notepad) to type up a quick list
of your menu items. In the steps that follow, you'll be able to copy
and paste into the Menu object, the Branch object, and the GoTo object.
It cuts down on typing and on errors! You'll note that I used long
titles for my menu items. You don't have to copy and paste any more
than a key word into the Branch object and the GoTo object. Also, this
way you won't have to keep checking to see what you put in your list
for your menu items.
5. Position your menu object where you want it on
your frame. Remember that the menu drops down - just like it
says.
If you put it at the very bottom of your frame, no one will be able to
see
your menu when your project plays!!
For a movie clip
showing this next series of steps (6 - 7), click here. (874 kb
compressed)
6. You've got your menu object filled out and
positioned. Now, click on a branch object and line it up in some way.
(This isn't mandatory - it just looks neater and it is easier to keep
things organized.)
7. Next, click on the link object. Your cursor will
turn into
a cross-hair. Click, hold, and drag from the menu object to the little
empty
box that is on the left side of the branch object.
The order for these next two steps doesn't really
matter. You can either double-click on the branch object and fill in
the names from the menu items OR you can create GoTo objects - one for
each item in the menu and park those in a nice, neat vertical line
about 1" (2.5 cm) to the right of the branch object. You're going to be
connecting everything shortly.
The logic of this process is that someone will click
on one of your items from your menu, that information will flow down
the link into the empty area in the branch object. It will then look to
see if there is a match. If there is a match, it will follow that link
to the GoTo and it will take you to your final destination.
For a movie clip
showing this next series of steps (8 -9), click here. (6.9 MB
compressed)
8. Click on the GoTo icon. You'll need one GoTo for
each item
in your menu list of 3 or 4 items.
9. Double-click on the GoTo and give it a name from your list and tell
it where it is going. In my example, the AlphaSmart session, was frame
2. Uncheck "visible" in the GoTo dialog box. You don't want it showing
up
when you play your project.
For a movie clip
showing this next series of steps (10 - 12), click here. (5.7 mb
compressed)
Teacher Tip #1: Look at this screen capture from my
project.
Notice my bright blue button from which my drop-down menu appears. That
was just me being sneaky. Look at the Menu Object dialog box from my
actual project. In particular, look next to the word "Visible." The box
is
unchecked.
Why? I made my Menu Object invisible so I could put it
over a fancier button to jazz up my project a bit. Just click on the
Button Object icon, fill in your title (keep it short), adjust the
color of your button, the text, and the size of your text. Move it into
position on your project frame where you are going to have the
drop-down menu. Position the
"invisible" drop-down menu object over top of the button and that's it!
If your button is over top of your drop-down menu object, just click on
the one you want on top and go to Objects > Layers > Bring to
front.
Teacher Tip #2: How did I make my frame background? I
make a lot of use of pictures and the transparency well that comes with
eZedia. If it was possible to wear it out, then I would be the one to
do it!! (Just joking! You can't wear it out.) I dragged in a picture
that captured the sense of the day (hands-on experience with the
technology) and then used the Edit Graphic option to lower the
transparency level. I then added it to the background. Next, I used the
shape tool to draw a rectangle to act
as a title bar on my frames. I used the Edit Graphic feature again to
drop
its transparency level. After that, I dragged in the hard bevel
transparency from the transparency well, put it on top of my rectangle
and then with both of them selected at the same time, I added them to
the background. I then duplicated my frame because I was going to add
the title to the background, as well, and I didn't want the same title
on every frame.
I created a text box with black print to act as a shadow for my title,
duplicated that, and then made the top text box color brighter. I
positioned them the way I wanted and with both selected at the SAME
time, I added them to the background.
The nifty, raised effect with the picture was just a matter of dragging
in a picture and adding a rounded bevel on the top of it. As i said
earlier, if the objects aren't in the right order, just click on the
one you want on top and go to Objects > Layers > Bring to front.
I positioned my transparency on top of my picture and when I was happy
with it, I selected both objects at the SAME time added them to the
background, too.
To summarize the ingredients for this project:
1 background image, transparency lowered
5 images highlighting a few of the things that happened at the
conference we had on campus
1 rectangle created with the shape tool, filled with a color and the
transparency level lowered
1 hard bevel transparency from the transparency well (located in the
Resources folder of eZediaMX)
1 rounded bevel transparency (same spot)
1 normal button
1 drop-down menu object, invisible
1 branch object
5 GoTo objects, invisible
1 Notepad text file with the little menu items in it
2 text boxes - one dark color - one light color
For those of you who don't have eZediaMX, I'm going to put screen
captures of some of the other frames on this page. For those of you who
do have eZediaMX,
I'm putting my zoi
file here for
you to download, if you want. Keep in mind that I'm just a regular
teacher and not a graphic artist. eZediaMX just makes it easy to turn
out something nice for you and your students.
Academic considerations:
I want you to think of the simplicity of this process and the power
of the logic in the drop-down menu. Now, think of your students who
might have some trouble with impulse control and planning behaviors.
Get them involved with short projects like this. It gives them a
genuine environment to acquire and polish organizational skills. The
software gives them instant feedback when they do the preview screen.
It either works or it doesn't. What's better yet is that the set-up on
the frame is highly visual. Students can even trace over the screen
with their finger to talk themselves through the logic to find an error
if it didn't quite work the first time. There's no programming or
complex code where a single typing mistake can foul them up.
This is such a simple way to bring in critical thinking and
problem-solving skills that will reinforce, in a tangible manner, what
we are trying to teach in other subjects. Students can also use this
environment in every subject area. Better yet, just about any child in
most of the grades in our
K-12 system can handle this.
At the same time, using simple pictures and just the tools in eZediaMX,
students can produce something of which they can be proud. We have a
lot of children who have never had that experience.
Other screen captures:
