This week we are going to make a simple site using the new accordion UI component in Flash MX 2004 Professional. In this tutorial I will assume that you have basic knowledge of Flash MX 2004 Professional and can get around the interface pretty easily.

Here is an example of a site that uses the accordion menu system: http://www.metadesign.com/index2.html

First thing you want to do is open Flash. Now, instead of creating a new "Flash Document," we are going to create a new "Flash Form Application."

Depending on how many sections you will need for your site, you can create a new form for each section. For this example, I'm going to make four sections. To add a new screen to your application, simply click the blue plus button located on the left above your application screen. When you mouse over the blue plus button, it will give you a tool tip that says "Insert Screen." I named each of my sections to correspond with each section of my site: Home, About, Portfolio, Contact.

Now here's where the fun begins. Click on your first screen below the application. For testing purposes, simply create some text that represents this section. Now, with your first screen selected go down to the properties panel and click on the Parameters tab. Where it says "visible" you want to change that to "false." This way you don't have all of your content appearing when you first load your new site up.

Repeat this process for each of your screens.

Now it's time to add our accordion UI component. Click on the Application screen and open your components window. Under the UI Components section drag the accordion onto your application screen. You can then resize the accordion to the size you need for your project.

With the accordion selected in your application screen, click on the properties tab and then on parameters tab. This is where you will be telling our accordion menu to get it's screens from. Under the Child Label section you will add the labels for each accordion tab. This is what the accordion will show on the actual tabs.

Next we are going to name our child names. For each of these, you will name them exactly what you named each screen with instance added to it. So, mine would look like this: homeinstance, aboutinstance... You get the point. Under the childSymbols section name them again the same as you named them before without the added instance.

Now if we have everything labeled correctly we should be able to hit F12 and test our movie. I had a little trouble with content orientation in perspective to my accordian, but you'll have the basic idea of where things need to go.

I hope everyone enjoyed this tutorial on using Macromedia UI Components.