My account
Shopping cart
Knowledge base
Support


Customizing themes for Accordion Panel V3 - tutorial



1. Open your Macromedia Flash software and create a new file (File/New/Flash Document). Drag an accordion panel on the stage from the Component palette.

2. Before you continue with this tutorial please read the Apply themes tutorial.

3. We will first customize the visual look of the accordion panel.

4. Double click the APGreenA2MainClip movie clip from your library (in the preview window). Choose a button state, double click it on the stage to change its looks as you desire. Iíve chosen the Vertical_Expanded_Over state instance and changed it to red:



5. If you followed my example this is how your swf file should look like:



6. Now letís change the way our text looks like. We will accomplish this by editing the xml file. Open the xml file and under the styles nodes, edit the properties of the text that is going to be displayed on your accordion panel. Iíve chosen the over state from level1_style :

<styles>
     <style1>
        …………….        …………….        …………….        …………….        …………….
          <states>
    …………….        …………….        …………….        …………….        …………….
               <expanded_over>
                    <mcLinkageId>AP_GreenA2_style1_true_over</mcLinkageId>
                    <textFormat>
                         <font>Verdana</font>
                         <size>11</size>
                         <color>FFFF00</color>
                         <bold>true</bold>
                         <align>right</align>
                    </textFormat>
               </expanded_over>
        …………….        …………….        …………….        …………….        …………….
          </states>
     </style1>
</styles>


7. If your chosen font is not a system default font, you need to embed that font in your Library. If you donít know how to embed fonts, please read the Embedding fonts tutorial.

8. Set the embedFonts parameter to true on Component Inspector (donít forget to select the accordion panel on the stage first) :



9. Ctrl+Enter to test your movie. This is how it should look like:



Download the source files for this tutorial