My account
Shopping cart
Knowledge base
Support


Apply themes to Accordion Menu V3 - tutorial



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

2. If you can’t find the accordion component, please see the How to install a MXP file tutorial. If you have trouble configuring your accordion 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 menu tutorial.

4. Open the SkinAssets.fla file from the Demo folder that came with the Accordion. Move back to your accordion 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 assets file. From this library drag the AccTreeMenuAssets movie clip to your accordion file.



6. Now you don’t need anymore the SkinAsstes library panel. You need to define your new styles in the xml file like this (or you can simply use the edited xml file):
In order to read about every style tag, please read the style help page.

<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>
                    <textFormat />
                    <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>
</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" itemHeight="22"childStyle="level2_style" >
               <item title="Jumpeye website" itemHeight="30" />
               <item title="Subtitle 2" itemHeight="20" />
               <item title="Subtitle 3" itemHeight="20" />
          </item>
          <item title="About us" itemHeight="22" childStyle="level2_style">
               <item title="Subtitle 1" itemHeight="20" />
               <item title="Subtitle 2" itemHeight="20" />
               <item title="Subtitle 3" itemHeight="20"/>
          </item>
          <item title="Contact us"itemHeight="22" childStyle="level2_style">
               <item title="Subtitle 1" itemHeight="20" />
               <item title="Subtitle 2" itemHeight="20" />
               <item title="Subtitle 3" itemHeight="20" />
          </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