Building Data-Driven Flash Movies - What's On The Menu? (
Page 6 of 8 )
Another,
more advanced example involves constructing a Flash menu dynamically, from the
information in a database. This allows you to build menus that can grow and
shrink automatically, as the information in the database changes, and it's a
guaranteed entry into Flash geekdom.
The process is fairly complicated,
so let me run you through a quick theoretical overview before we get started.
Most of the work here happens via an ActionScript function named
duplicateMovieClip(), which makes it possible to programmatically clone a Flash
movie clip symbol. So, if you had a single movie clip symbol, representing a
single menu item, you could combine the duplicateMovieClip() function with a
loop to spawn numerous copies of that single menu item, and thereby build an
entire menu dynamically.
This might seem a little far-fetched, but it
works pretty well...as you'll see very shortly. First, though, let's get all the
pieces together.
Let's assume that the data to be used for the menu is
stored in a MySQL database table named "menu", and that it looks like this:
+-------------------------------------+--------------+
| link | label |
+-------------------------------------+--------------+
| http://www.melonfire.com/services/ | Services |
| http://www.melonfire.com/company/ | Company |
| http://www.melonfire.com/mcenter/ | Media Center |
| http://www.melonfire.com/account/ | Your Account |
| http://www.melonfire.com/community/ | Community |
+-------------------------------------+--------------+
Pop open Flash, create a new movie, and create a couple of
new symbols. The first one is a graphic symbol containing a single-line dynamic
text box - name the symbol "text" and the data variable "label".
At
a later stage, I'll be using ActionScript to set a value for this "label"
variable.
Next, create a button symbol, one which includes keyframes for
up, over and down states. Here's what mine looks like:
Name this button symbol "circle".
In case you're
wondering how I created this, it's fairly simple. In the Symbol Editor, use the
Oval tool to create a hollow circle (remember to make the fill colour
transparent to achieve the hollowed-out effect) for the Up state.
Next,
insert a new keyframe for the Over state, and place a smaller inner circle
within the outer one. Make sure that this one has a fill colour (I've used
red).
Finally,
create a movie clip symbol named "item".
This symbol is what I'll be
using to generate the menu items in my dynamic Flash menu. It should contain
both a button (which the user can click to go to a specific URL) and a label
(which describes the menu item). You've already created both these components;
all you need to do is drag and drop them from the Library into the movie clip
Symbol Editor.
Yes,
that's right - your movie clip symbol is made up of two other symbols. No, I'm
not smoking a controlled substance - all will become clear shortly.
Now,
right-click the "circle" symbol in this movie clip and insert some ActionScript:
on (release) {
getURL (url);
}
At a later stage, I'll be using ActionScript to set a value
for this "url" variable.
