In the previous XML menu tutorial, we made a simple vertical XML text menu, and attached a thumbnail following the mouse in flash. Thumbnail data is also extracted from XML.
In the second phase of our XML menu tutorial, we will solve another problem.
We all know that XML is easy to modify, delete, and add data at will. Please note that modification and deletion are fine. If it is added, there will be an interface layout and user problems. We used the last XML menu for demonstration. I added several dozen pieces of content to our XML file. The result is that our XML menu is like this:
Http://www.keyframe1.com/tute/xmlMenu2/index2.htm
The menu below cannot be seen, and many people may have come up with a solution to this problem. Yes! We want our users to scroll through our XML menu like this:
Http://www.keyframe1.com/tute/xmlMenu2/
Now you can see that the dozens of records in the XML file are all on the stage, and users can scroll through it. No matter how you modify the XML file, the mouse is always placed at the top of the menu and will stay at the first one. When you move the mouse to the bottom of the menu, it will stay at the last one, regardless of the number of records in the XML file, if it is very short, the scroll will naturally not exist. If it exceeds the specified menu height, it will scroll like what we just mentioned, this is true even if there are 1000 records in XML.
Because it is based on the previous tutorial, some code that has been repeatedly used in the previous tutorial will not be explained. Link to the previous XML menu Tutorial: XML dynamic menu (1)
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
-To make the XML menu scroll, the simplest way is to put all video clips with XML menus in a parent video clip;
-Calculate the correct equation;
Step 2: Create the elements we need and place them in the ideal position:
> A video clip containing all video clips with XML menus is called mcontainer 150px width and 340px height;
> The two up and down arrows are used only for the sake of appearance;
> Place the mcontainer video clip at work (310, 30 );
Step 3: actionscripting
Copy codeThe Code is as follows: // this time, we have added some new variables for convenience of calculation.
Var menut: Number = 30;
Var menul: Number = 300;
Var menub: Number = 370; // coordinates at the bottom of the menu
Var menuw: Number = 150; // menu width
Var menuh: Number = menub-menut; // The height of the menu displayed on the stage (that is, the mask height)
Var home: MovieClip = this;
Var mlh: Number = 20;
Var tlh: Number = 60;
Var speed: Number = 2;
// We will not explain how to read XML. Please refer to the previous tutorial. Let's go directly to the core code of this tutorial: Scroll the mouse to calculate the equation:
Mcontainer. onEnterFrame = function ()
{
If (_ root. _ xmouse> menul & _ root. _ xmouse <(menul + menuw) // The sliding code is activated when the mouse slides to the stage display area of the menu. We do not want the mouse to move anywhere on the stage, and the menu will scroll.
{
Var per: Number = (_ root. _ ymouse-menut)/menuh; // calculates how much the mouse slides down from the top of the menu? And draw the percentage of mouse movement from the menu height.
Var menuth: Number = mlh * numMenu; // calculate the actual menu height using the text line spacing and the total Number of XML records.
// The scroll menu principle is as follows: if the mouse slides down from the top of the menu, the menu will move up to of its actual height, and then add the actual number of rows that move the mouse down. Well, it's not hard to understand it. There is no simple way to explain it. It's just a simple thing.
Mcontaindy = menut-menuth * per + menuh * per;
Mcontainoldy = this. _ y;
This. _ y + = (mcontaindy-mcontainoldy)/speed;
If (_ root. _ ymouse <menut) mcontainer. _ y = menut; // if the cursor is smaller than the top coordinate of the menu, write the menu coordinate to the top coordinate;
If (_ root. _ ymouse> menub) mcontainer. _ y = menut-menuth + menuh; // if the cursor is greater than the coordinates at the bottom of the menu, write the menu coordinates to the coordinates at the bottom;
}
}
This is the most important code of this issue. Others believe that the annotations of the source files can be understood after reading the previous tutorial.
Now we can modify, delete, and add our XML files at will. Our XML menus can be used for normal browsing. Try to add 500 records. If you are creating an album with hundreds of photos, this can be a good choice. It should be friendly to use the scrolling simple text title and thumbnail.
The next XML menu tutorial will be available as soon as possible. Thank you for reading!
