Create a simple Accordion Panel tutorial
home » flash components » user interface » accordion panel v3 » create a simple accordion panel tutorial »
1. First you need to make sure that your Accordion Panel V3 is installed. Open Macromedia Flash, create a new file (File/New/Flash Document) and look for the Accordion Panel component in the Components window (Ctrl+F7 on Windows; Command+F7 on Mac) on the V3 Components - Jumpeye. If you can't find the component, you need to install it (see How to install a MXP file tutorial).
2. You will need an xml file for this component to work. You can create your own xml file or you can use this file that I've used.
3. Set your Flash document to 400px width and 300 px height and 28 fps frame rate as in the image below.
4. Click OK and save the file in the same directory with the xml.
5. Save the images that you want to use with this panel in the same directory with the fla, swf and xml files (I've placed all images inside a directory called images because I didn't want to mix the fla and swf file with the images).
6. Drag the Accordion Panel on stage from the Components palette (Ctrl+F7 or Command+F7 on Mac).
7. If you have any troubles configuring this component press F1 for Help (see How to find Help for Jumpeye components for further reference)
8. With the component selected, set the size and position of the Accordion Panel component as below.
Insert the instance name (accordionPanel), because you will need it if you want to add action script to it.
9. Open the Component Inspector window (the component must be selected; if it is not selected, click on the component again then open the Component Inspector) by pressing Alt+F7 (Option+F7 on Mac) or choose in the Flash's menu Window>Component Inspector and set up the component as in the image you have below.
10. Set up your xml file or you can download the xml file I've used. Below you have an example.
<?xml version="1.0" encoding="UTF-8"?>
<component name="Accordion Panel v3">
<item title="Chocolate" contentPath="images/img1.jpg"/>
<item title="8Ball" contentPath="images/img2.jpg"/>
.......... .......... .......... .......... ..........
Item Title - the title that is displayed on the main title bars or child bars
contentPath - the path to the image, swf or movieclip (in my example the images are in the images folder to load external image files. If you want to load movieclips you have in your Library you must enter here the Linkage Id of the movie you want to load)
In order to see the entire list of parameters that can be used in the xml file, please see the xml help page
11. After you have created the xml file hit Ctrl+Enter to test your movie (or Command+Enter on Mac). Before make sure that your path to the xml file is correctly written in Component Inspector panel, inside the xmlPath parameter. This is how your swf file should look like :
Download the source files for this tutorial