How to Make an Accordion Menu in Flash
An accordion menu is an animated menu bar where each menu item slides either horizontally or vertically to display additional text and images. In Flash, accordion menus are made with XML Action Scripts. The easiest way to make an accordion menu is to download a free XML action script and customize it with your own text and graphics. When you download a free action script file, just trade out the placeholder images and text with your own content. Once you've made the accordion menu look the way you want, upload it to your website.
Other People Are Reading
Instructions
-
-
1
Locate an accordion menu script that suits your needs. Three websites that offer free XML action scripts include The Tech Labs, Free Action Script and Actionscript.org. Links are found in the Resources section. If you don't find a design you like at one of these sources, search "Flash Accordion Menu" in a Web browser for more options.
-
2
Download the Flash files; they're usually in a .zip or .rar archive format. Only download files from design sites you trust. Never open an .exe file from an unknown website, as it could be a virus. The file type will be .fla, .zip or .rar.
-
-
3
Double-click the downloaded file to unzip the contents. You'll see a file folder with an .fla file inside. That's the accordion menu file.
-
4
Launch Flash, and go to "File" and then "Open." Navigate to the .fla file you just opened. The accordion menu script file opens. Click on the timeline to view the menu components.
-
5
Go to "View" then "Library" to open the Library Properties Box and view all the graphic elements. To add your own graphics, click the small white paper icon with a plus sign next to it in the bottom left hand corner of the Library Properties Box. A dialog box opens, choose the graphic files you want to import into the project.
-
6
Click in the main window and select the existing graphics. Click the delete button to delete them. Drag and drop the graphics you want from the Library Properties Box into the main window. Don't change any actions in the timeline, the code is already set to perform the accordion movements when you upload the finished file to your website.
-
7
Select the Type tool to add text if you want. Make sure you're on the right layer when you type. Each menu item will be on its own layer in the timeline. Most accordion menu files clearly label each layer so you'll know where you're typing.
-
8
Save the file by clicking Control + S or go to "File" then "Save" then upload the Flash file to your website using FTP or whatever method you usually use when updating your website.
-
1
Tips & Warnings
If you're comfortable hand-coding XML, the full accordion menu action code is located at several websites online including The Tech Labs article, Build a Dynamic Accordion Menu in Flash CS4.
Make sure the custom images you use are the same size as the images you're replacing. If your custom images are too big or small, they don't automatically adjust to fit the pre-made menu. Edit your images to size in Photoshop or another graphics program before you add them to your Library.
Resources
- Photo Credit Ciaran Griffin/Lifesize/Getty Images
