My account
Shopping cart
Knowledge base
Support


Customizing themes for Accordion Tree Menu V3 - tutorial



1. Open your Macromedia Flash software and create a new file (File/New/Flash Document). Drag an accordion tree menu 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 tree menu.

4. Double click the DDMThemeBlueA1MainClip 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 Expanded Over 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 menu. I’ve chosen the over state from level1_style :

<styles>
      ………….      ………….      ………….      ………….      ………….
     <level2_style>
    ………….      ………….      ………….      ………….      ………….
          <states>
      ………….      ………….      ………….      ………….      ………….
               <over>
                    <textFormat>
                         <font>Verdana</font>
                         <size>11</size>
                         <bold>true</bold>
                         <color>336600</color>
                         <underline>true</underline>
                         <align>right</align>
                         <rightMargin>4</rightMargin>
                    </textFormat>
                    <mcLinkageId>DDM_BlueA1_style1_down</mcLinkageId>
               </over>
      ………….      ………….      ………….      ………….      ………….
          </states>
     </level2_style>
</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 tree menu 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