What's On The Menu? - Flash

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.

>>> More Flash Articles          >>> More By The Disenchanted Developer, (c) Melonfire

blog comments powered by Disqus