XML dynamic menu flash Tutorial

We all like XML, because it saves time and I try to use XML for my daily work, because it is too convenient to update and modify the fla source file in the future.

This XML series of tutorials will be released in three parts. In the last phase, we will have a comprehensive and more friendly XML menu. The first phase of this tutorial involves some basic XML knowledge.

The effect we need to do here is a vertically arranged Dynamic XML menu, and when the mouse slides to the menu to display the corresponding thumbnail, this we often see in many photography works. Online presentation: http://www.keyframe1.com/tute/xmlMenu/

Step 1: analyze the project:
> Components
-XML file;
-FLASH source file;
-The thumbnail JPG file is saved in the thumb folder with 50px X 50px;
> Steps
-Write the XML file first (this is very simple and we will not talk about how to write the XML file );
-Create required elements in FLASH;
-Actionscripting

Step 2: Create the elements we need and place them in the ideal position:
> A clip of the parent video with all thumbnails is called the container 50px width, which is as big as possible;
> A masked video clip is called mask 50px X 50 px;
> An external frame video clip, called a br for the sake of appearance, can be larger than the size of mask;
> Place the three clips at work to an ideal position and determine their X coordinates. Y coordinates do not matter because we will use AS to control their Y coordinates;

(Well, this is what happens in the master time workspace. Now we create a code layer and hand over all the remaining work to actionscript)

Step 3: actionscripting

// Declare some variables first

[Copy to clipboard]
CODE:
Var menut: Number = 30; // Y coordinate at the top of the menu
Var menul: Number = 300; // X coordinate on the left of the menu
Var home: MovieClip = this;
Var mlh: Number = 20; // the text line spacing of the menu
Var tlh: Number = 60; // Thumbnail line spacing
Var speed: Number = 7; // slow speed

// Create an XML object, extract XML data, create a thumbnail triggered by mouse sliding of the menu, and mask the code of video editing... the content is large, so try to explain it as much as possible.

[Copy to clipboard]
CODE:
Var myx: XML = new XML ();
Myx. ignoreWhite = true;
Myx. onLoad = function ()
{
Var nodes = this. firstChild. childNodes; // Extract XML data
NumMenu = nodes. length; // The key to using XML. This variable automatically stores the number of XML data segments, so that we can update (add/remove) the XML file Flash automatically.
For (var I = 0; I <numMenu; I ++)
    {
// Create a sub-video clip to load the thumbnail
Var holder: MovieClip = container. createEmptyMovieClip ("holder" + I, I); // create an equal number of word clip in the parent video clip to load the thumbnail
Container ["holder" + I]. _ x = 0; // locate
Container ["holder" + I]. _ y = tlh * I;
Container ["holder" + I]. loadMovie (nodes [I]. attributes. thumb); // load the thumbnail
       
// Create a mask
Container. setMask (mask );
       
// Create a menu
Var menu = home. createEmptyMovieClip ("menu" + I, I + 40); // create an equal number of empty video clips to store the menu text
Menu. _ x = menul;
Menu. _ y = menut + (mlh * I );
Menu. moveTo (menul, menut );
Menu. createTextField ("btxt", 0, 0, 0,150, 20); // create dynamic text to store text
Menu.btxt.html = true;
Menu. btxt. wordWrap = true;
Menu. btxt. text = (nodes [I]. attributes. nav); // load text
       
// Menu text style
Btntf = new TextFormat ();
Btntf. color = 0x666666;
Btntf. font = "verdana ";
Btntf. leading = 10;
Btntf. size = 10;
Menu. btxt. setTextFormat (btntf );
       
// Store the I value. This step is very important.
Menu. I = I;
       
// Move the menu mouse in and slide out the code
Menu. Onrolover = function ()
        {
Var who: Number = this. I; // The variable extracts the value of I.
Maskdy = menut + (mlh * who)-15; // these equations need to be calculated by the brain.
Containdy = maskdy-(tlh * who );
Br. _ visible = true;
Mask. _ visible = true;
Container. _ visible = true;
           
Menutf = new TextFormat ();
Menutf. underline = true; // The underline is displayed when the mouse slides in.
This. btxt. setTextFormat (menutf );
        }
Menu. Onrolout = function ()
        {
Br. _ visible = false;
Mask. _ visible = false;
Container. _ visible = false;
           
Menutf = new TextFormat ();
Menutf. underline = false;
This. btxt. setTextFormat (menutf );
        }
    }
}

Myx. load ("xmlMenu. xml ")