xml| Menu | news
Everyone likes XML, because it is convenient, I usually do things as much as possible with XML, because it is too convenient to update the changes in the future, do not move the FLA source file.
This XML series tutorial will be published in three parts, and in the final issue we will have a full-featured, more user-friendly XML menu. This first issue of this tutorial involves some basic knowledge of XML.
What we're going to do here is a vertically-arranged dynamic XML menu, and when the mouse slides to the menu to display the corresponding thumbnail, this is something we often see on the flash site in many photographic works. Online Show: http://www.keyframe1.com/tute/xmlMenu/
The first step is to analyze the project :
Part:
-XML file;
-Flash source files;
-Thumbnail jpg files, 50px X 50px stored in the Thumb folder;
Steps:
-Write the XML file first (this is very simple, we will not talk about how to write XML file);
-Create the required elements in flash;
-Actionscripting
The second step is to start building some of the elements that we need and put them in the approximate ideal location :
- A parent movie clip that puts all the thumbnails, we call the container 50px wide and the height as large as possible;
- A mask movie clip called mask 50px X px;
- A frame film clip, just for the sake of beauty, called BR, size than mask a large circle on it;
- Put these three movie clips in the work to the approximate ideal location, to determine their x-coordinate, y-coordinate does not matter because we want to use as to control their y-coordinate;
(Well, that's what the main time workspace is all about, now we're building a layer of code, leaving all the work left to ActionScript)
Step three, actionscripting.
Declare some variables first
var menut:number = 30; Top y-coordinate of menu
var menul:number = 300; Left x coordinates of menu
var home:movieclip = this;
var mlh:number = 20; Menu Text Spacing
var tlh:number = 60; Thumbnail spacing
var speed:number = 3; Ease of movement speed
Create an XML object, extract the XML data, create a menu mouse slide trigger thumbnail, mask the movie clip code ... More content, try to explain.
var myx:xml = new XML ();
Myx.ignorewhite = true;
Myx.onload = function ()
{
var nodes = This.firstChild.childNodes; Extracting XML data
Nummenu = Nodes.length; The key to using XML, this variable automatically stores the number of sections of XML data so that later we can update only (Add/decrease) XML files flash will automatically update
for (var i=0; i<nummenu; i++)
{
Create a child movie clip to load thumbnails
var holder:movieclip = Container.createemptymovieclip ("Holder" + I, I); Create an equal number of word movie clips in a parent movie clip to load thumbnails
container["Holder" + i]._x = 0; Positioning
container["Holder" + i]._y = TLH * i;
container["Holder" + i].loadmovie (NODES[I].ATTRIBUTES.THUMB); Load thumbnails
Create a mask
Container.setmask (mask);
Create a Menu
var menu = home.createemptymovieclip ("menu" + I, i+40); Create an equal number of empty movie clips to store 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 storage 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);
Storing the value of I, this step is very important
MENU.I = i;
Menu mouse slide in, slide out, click on the code
Menu.onrollover = function ()
{
var who:number = this.i; Extract Current I
Maskdy = Menut + (MLH * who)-15; The mask position is calculated based on the current I, which is the current menu button.
Containdy = Maskdy-(TLH * WHO); The position of the thumbnail in the mask is calculated according to the current I based on the mask position
Speed = 3; When the mouse slides into the menu is to increase the speed (the speed value is smaller, the higher the speed, because the displacement root speed of y in the easing function is the division relationship, here Our settings will make the mouse slide into the menu button to improve the mask and thumbnail speed, of course, you can, of course, you may also be to the contrary to make them slower, It's a complete personal hobby.
Menutf = new TextFormat ();
Menutf.underline = true; When the mouse slides, the text on the menu is underlined
This.btxt.setTextFormat (MENUTF);
}
Menu.onrollout = function ()
{
var who:number = this.i; Extract Current I
var offy = stage.height + 50;
Maskdy = Offy; When you move the mask and thumbnail out of the stage while the mouse is sliding out of the menu, we choose to move below the stage, and of course you can either move them to the top of the screen or write their own transparency easing function to let their transparency fade out
Containdy = Offy-(TLH * WHO); The easing position of the same thumbnail is also moved out of the stage relative to its current position.
Speed = 10; Set the ease speed so that the speed of the move slows down
Menutf = new TextFormat ();
Menutf.underline = false;
This.btxt.setTextFormat (MENUTF);
}
Menu.onrelease = function ()
{
var who:number = this.i; Extract Current I
var link:string = Nodes[who].attributes.url; Store URLs in XML in variable link
GetURL (link, "_blank");
}
}
}
Myx.load ("Xmlmenu.xml")
Here is basically done, the following only need to use a number of easing functions added to it;
Matte Movie clip's easing function
Mask.onenterframe = function ()
{
Maskoldy = this._y;
This._y + + = (maskdy-maskoldy)/7;
}
Ease function for thumbnail master movie clips
Container.onenterframe = function ()
{
Containoldy = this._y;
This._y + + = (containdy-containoldy)/7;
}
Easing function for thumbnails outer frame
Br.onenterframe = function ()
{
Brdy = Maskdy;
Broldy = this._y;
This._y + + = (brdy-broldy)/7;
}
Initialize mask thumbnail position
Maskdy = Menut + (MLH * 0)-15;
Containdy = Maskdy-(TLH * 0);
This is the XML file we used here.
<?xml version= "1.0" encoding= "Iso-8859-1"?>
<xmeMenu>
<menu nav= "Volkswagen phaeton" url= "http://www.keyframe1.com/kf1/work/phaeton/" thumb= "Thumb/1.jpg"/>
<menu nav= "Volkswagen Touareg" url= "http://www.keyframe1.com/kf1/work/touareg/" thumb= "Thumb/2.jpg"/>
<menu nav= "KeyFrame1 Digital" url= "http://www.keyframe1.com" thumb= "Thumb/3.jpg"/>
<menu nav= "I-jar Layout" url= "http://www.keyframe1.com" thumb= "Thumb/4.jpg"/>
<menu nav= "Cgrn e-Learning" url= "http://www.cgrn.cn" thumb= "Thumb/5.jpg"/>
<menu nav= "Wild Product" url= "http://www.keyframe1.com" thumb= "Thumb/6.jpg"/>
<menu nav= "Chinese Made Easy" url= "http://www.chinesemadeeasy.net" thumb= "Thumb/7.jpg"/>
<menu nav= "Jin Shun Jin Da" url= "http://www.keyframe1.com/kf1/work/jinshun/" thumb= "Thumb/8.jpg"/>
<menu nav= "KeyFrame1 Flash beta" url= "http://beta.keyframe1.com" thumb= "Thumb/9.jpg"/>
<menu nav= "Volkswagen New beetle" url= "http://www.keyframe1.com/kf1/work/nb/" thumb= "Thumb/10.jpg"/>
<menu nav= "Volkswagen revamp" url= "http://www.volkswagen.com.cn" thumb= "Thumb/11.jpg"/>
<menu nav= "VW New Beetle Cabriolet" url= "http://www.keyframe1.com/kf1/work/nbc/" thumb= "Thumb/12.jpg"/>
<menu nav= "KeyFrame1 Flash beta" url= "http://beta.keyframe1.com" thumb= "Thumb/9.jpg"/>
<menu nav= "Volkswagen New beetle" url= "http://www.keyframe1.com/kf1/work/nb/" thumb= "Thumb/10.jpg"/>
<menu nav= "Volkswagen revamp" url= "http://www.volkswagen.com.cn" thumb= "Thumb/11.jpg"/>
<menu nav= "VW New Beetle Cabriolet" url= "http://www.keyframe1.com/kf1/work/nbc/" thumb= "Thumb/12.jpg"/>
</xmeMenu>
Now you can try to modify, delete or add our XML, and you will find that our SWF file automatically updates the data. In the future of the XML menu series tutorial, we will continue to enrich the functionality of this XML menu on the basis of this tutorial.
