Working With The Accordion UI Component

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

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

Get listed in Yahoo! search. $25 bonus.

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.

Having created the outlines for FlashNewz and FLADownloads, John has become a strong voice in the Flash Community. His reviews and tutorials give great insight and knowledge to readers around the world. He has a keen eye for what’s hot and what’s not in the Flash world. He has also developed and continues to run his own flash portal as a side project to keep his mind on the Flash community

Being a key designer for advertising creative, he’s got style when it comes to grabbing readers attention. With a proven track record, there isn’t much this guy can’t handle.