My account
Shopping cart
Knowledge base
Support


Apply themes to 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. If you can’t find the accordion tree menu component, please see the How to install a MXP file tutorial. If you have trouble configuring your accoridion tree menu please see the How to find Help for Jumpeye components.

3. Before you continue with this tutorial please read the Create a Simple Accordion Tree menu tutorial.

4. Open the SkinAssetsAccordionTreeMenuV3.fla file from the Demo folder that came with the Accordion menu. Move back to your fla file file that you created and click the little button on the upper right corner of your library for adding a new library panel.



5. Click the dropdown button from one of the library panels and chose the SkinAssetsAccordionTreeMenuV3 file. From this library drag the DDMThemeBlueA1MainClip movie clip to your accordion tree menu file.



6. Now you don’t need anymore the SkinAssetsAccordionTreeMenuV3 library panel. You need to define your new styles in the xml file like this (or you can simply use the edited xml file you’ve received together with the assets fla file):

In order to read about every style tag, please read the styles documentation file.

<styles>
     <level1_style>
          <folderCollapsedIconId>ATM_BlueA1_style1_collapsed_icon
          </folderCollapsedIconId>
          <folderExpandedIconId>ATM_BlueA1_style1_expanded_icon</folderExpandedIconId>
          <spacing>5</spacing>
          <itemNextSpacing>2</itemNextSpacing>
          <textFormat>
               <font>Tahoma</font>
               <size>11</size>
               <color>0xFFFFFF</color>
               <underline>false</underline>
               <align>left</align>
               <rightMargin>4</rightMargin>
          </textFormat>

          <states>
               <up>
                    <mcLinkageId>ATM_BlueA1_style1_false_up</mcLinkageId>
               </up>
               <over>
                    <textFormat>
                         <underline>false</underline>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style1_false_over</mcLinkageId>
               </over>
               <down>
                    <textFormat>
                         <underline>true</underline>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style1_false_down</mcLinkageId>
               </down>
               <selected>
                    <mcLinkageId>ATM_BlueA1_style1_false_selected</mcLinkageId>
               </selected>
               <expanded_up>
                    <textFormat>
                         <underline>false</underline>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style1_true_up</mcLinkageId>
               </expanded_up>
               <expanded_over>
                    <textFormat>
                         <underline>false</underline>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style1_true_over</mcLinkageId>
               </expanded_over>
               <expanded_down>
                    <mcLinkageId>ATM_BlueA1_style1_true_down</mcLinkageId>
               </expanded_down>
               <expanded_selected>
                    <mcLinkageId>ATM_BlueA1_style1_true_selected</mcLinkageId>
               </expanded_selected>
               <disabled>
                    <textFormat>
                         <color>0x666666</color>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style1_false_disabled</mcLinkageId>
               </disabled>
          </states>
     </level1_style>

     <level2_style>
          <folderCollapsedIconId>ATM_BlueA1_style1_collapsed_icon
          </folderCollapsedIconId>
          <folderExpandedIconId>ATM_BlueA1_style1_expanded_icon</folderExpandedIconId>
          <spacing>3</spacing>
          <itemNextSpacing>1</itemNextSpacing>
          <textFormat>
               <font>Tahoma</font>
               <size>11</size>
               <color>0x016080</color>
               <underline>false</underline>
          </textFormat>

          <states>
               <up>
                    <mcLinkageId>ATM_BlueA1_style2_false_up</mcLinkageId>
               </up>
               <over>
                    <textFormat>
                         <underline>false</underline>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style2_false_over</mcLinkageId>
               </over>
               <down>
                    <textFormat>
                         <underline>false</underline>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style2_false_over</mcLinkageId>
               </down>
               <selected>
                    <mcLinkageId>ATM_BlueA1_style2_false_selected</mcLinkageId>
               </selected>
               <expanded_up>
                    <mcLinkageId>ATM_BlueA1_style2_true_up</mcLinkageId>
               </expanded_up>
               <expanded_over>
                    <textFormat>
                         <underline>false</underline>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style2_true_over</mcLinkageId>
               </expanded_over>
               <expanded_down>
                    <mcLinkageId>ATM_BlueA1_style2_true_down</mcLinkageId>
               </expanded_down>
               <expanded_selected>
                    <mcLinkageId>ATM_BlueA1_style2_true_selected</mcLinkageId>
               </expanded_selected>
               <disabled>
                    <textFormat>
                         <color>0xFDFDFD</color>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style2_false_disabled</mcLinkageId>
               </disabled>
          </states>
     </level2_style>

     <level3_style>
          <folderCollapsedIconId>ATM_BlueA1_style1_collapsed_icon
          </folderCollapsedIconId>
          <folderExpandedIconId>ATM_BlueA1_style1_expanded_icon</folderExpandedIconId>
          <spacing>3</spacing>
          <itemNextSpacing>1</itemNextSpacing>
          <textFormat>
               <font>Tahoma</font>
               <size>11</size>
               <color>0x016080</color>
               <underline>false</underline>
          </textFormat>

          <states>
               <up>
                    <mcLinkageId>ATM_BlueA1_style3_false_up</mcLinkageId>
               </up>
               <over>
                    <textFormat>
                         <underline>false</underline>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style3_false_over</mcLinkageId>
               </over>
               <down>
                    <textFormat>
                         <underline>false</underline>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style3_false_over</mcLinkageId>
               </down>
               <selected>
                    <mcLinkageId>ATM_BlueA1_style3_false_selected</mcLinkageId>
               </selected>
               <expanded_up>
                    <mcLinkageId>ATM_BlueA1_style3_true_up</mcLinkageId>
               </expanded_up>
               <expanded_over>
                    <textFormat>
                         <underline>false</underline>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style3_true_over</mcLinkageId>
               </expanded_over>
               <expanded_down>
                    <mcLinkageId>ATM_BlueA1_style3_true_down</mcLinkageId>
               </expanded_down>
               <expanded_selected>
                    <mcLinkageId>ATM_BlueA1_style3_true_selected</mcLinkageId>
               </expanded_selected>
               <disabled>
                    <textFormat>
                         <color>0x666666</color>
                    </textFormat>
                    <mcLinkageId>ATM_BlueA1_style3_false_disabled</mcLinkageId>
               </disabled>
          </states>
     </level3_style>
      ………….      ………….      ………….      ………….      ………….      ………….      ………….
    ………….      ………….      ………….      ………….      ………….      ………….      ………….
</styles>


7. After you defined you styles, you have to call them up in the data node like this :

<data>
     <main childStyle="level1_style">
          <item title="Home " childStyle="level2_style" itemHeight="22">
               <item title="Subtitle 1" childStyle="level3_style" itemHeight="20" >
                    <item title="Subtitle 1" />
                    <item title="Subtitle 2" />
                    <item title="Subtitle 3" />  
               </item>

               <item title="News" childStyle="level3_style" itemHeight="20">
                    <item title="Subtitle 1" />
                    <item title="Subtitle 2" />
                    <item title="Subtitle 3" />  
               </item>

               <item title="Products" childStyle="level3_style" itemHeight="20">
                    <item title="Subtitle 1" />
                    <item title="Subtitle 2" />
                    <item title="Subtitle 3" />
               </item>
          </item>

          <item title="About us " childStyle="level2_style" itemHeight="22">
               <item title="Our Stuff" childStyle="level3_style" itemHeight="20">
                    <item title="Subtitle 1" />
                    <item title="Subtitle 2" />
                    <item title="Subtitle 3" />
               </item>

               <item title="Portfolio" childStyle="level3_style" itemHeight="20">
                    <item title="Subtitle 1" childStyle="level2_style">
                         <item title="Subtitle 1" />
                         <item title="Subtitle 1" />
                         <item title="Subtitle 1" />
                    </item>
                    <item title="Subtitle 2" />
                    <item title="Subtitle 3" />
               </item>

               <item title="History" childStyle="level3_style" itemHeight="20">
                    <item title="Subtitle 1" />
                    <item title="Subtitle 2" />
                    <item title="Subtitle 3" />
               </item>
          </item>

          <item title="Contact us " childStyle="level2_style" itemHeight="22">
               <item title="Our Adress" childStyle="level3_style" itemHeight="20">
                    <item title="Subtitle 1" />
                    <item title="Subtitle 2" />
                    <item title="Subtitle 3" />
               </item>

               <item title="Support E-mail" childStyle="level3_style" itemHeight="20">
                    <item title="Subtitle 1" />
                    <item title="Subtitle 2" />
                    <item title="Subtitle 3" />
               </item>

               <item title="Other Info" childStyle="level3_style" itemHeight="20">
                    <item title="Subtitle 1" />
                    <item title="Subtitle 2" />
                    <item title="Subtitle 3" />
               </item>
          </item>
     </main>
</data>


8. Save your xml file and hit Ctrl + Enter to test your movie. This is how your swf should look like :



Download the source files for this tutorial