http://madforit.blog.sohu.com/43493169.html
---------------------------------------------------
大家都喜欢XML，因为它省事，我平时做东西也尽可能的用XML，因为实在是日后更新修改太方便了，都不用动fla源文件。

本XML系列教程将分三部分发布，到最后一期我们将拥有一个功能全面，更加友好的XML菜单。本教程这个第一期涉及到了一些XML的基础知识。

这里我们要做的效果是一个纵向排列的动态XML的菜单，并且当鼠标滑动到菜单上显示相应的缩略图，这个我们在很多摄影作品展示flash网站经常见到的。在线展示：http://www.keyframe1.com/tute/xmlMenu/

第一步， 分析项目：
  > 组成部分
      - XML文件；
      - FLASH源文件；
      - 缩略图JPG文件，50px X 50px 存放在 thumb文件夹；
  > 步骤
      - 先写XML文件 （这个很简单，我们将不再讲怎么写XML文件）；
      - 在FLASH中建立所需元素；
      - actionscripting

第二步，开始建立我们需要的一些元素，并把它们摆到大概理想的位置：
  > 一个放所有缩略图的母影片剪辑，我们叫做container 50px宽，高尽量大些；
  > 一个遮罩影片剪辑，叫做mask 50px X 50 px；
  > 一个外框影片剪辑，只是为了美观，叫做br，尺寸比mask大一圈就可以了；
  > 把这三个影片剪辑在工作去摆到大概理想的位置，确定它们的X坐标，Y坐标无所谓因为下面我们要用AS来控制它们的Y坐标的；

（好了，主时间工作区的事情就是这些，现在我们建立一个代码的图层，把剩下所有的工作交给actionscript）

第三步，actionscripting

//先声明一些变量

复制内容到剪贴板

代码:

var menut:Number = 30; //菜单顶部Y坐标
var menul:Number = 300; //菜单左侧X坐标
var home:MovieClip = this;
var mlh:Number = 20; //菜单文字行距
var tlh:Number = 60; //缩略图行距
var speed:Number = 3; //缓动速度

//建立XML对象，提取XML数据，建立菜单的鼠标滑动触发的缩略图，遮罩影片剪辑的代码... 内容较多，尽量解释

复制内容到剪贴板

代码:

var myx:XML = new XML();
myx.ignoreWhite = true;
myx.onLoad = function()
{
    var nodes = this.firstChild.childNodes; //提取XML数据
    numMenu = nodes.length; //使用XML的关键，这个变量自动储存XML数据的节数，这样日后我们就可以只更新（添加／减少）XML文件 Flash就会自动更新
    for(var i=0; i<numMenu; i++)
    {
        //建立子影片剪辑载入缩略图
        var holder:MovieClip = container.createEmptyMovieClip("holder" + i, i); //在母影片剪辑里建立相等数量的字影片剪辑以载入缩略图
        container["holder" + i]._x = 0; //定位
        container["holder" + i]._y = tlh * i;
        container["holder" + i].loadMovie(nodes[i].attributes.thumb); //载入缩略图
        
        //建立遮罩
        container.setMask(mask);
        
        //建立菜单
        var menu = home.createEmptyMovieClip("menu" + i, i+40); //建立相等数量的空影片剪辑以存放菜单文字
        menu._x = menul;
        menu._y = menut + (mlh * i);
        menu.moveTo(menul, menut);
        menu.createTextField("btxt", 0, 0, 0, 150, 20); //建立动态文本存放文字
        menu.btxt.html = true;
        menu.btxt.wordWrap = true;
        menu.btxt.text = (nodes[i].attributes.nav); //载入文字
        
        //菜单文字样式
        btntf = new TextFormat();
        btntf.color = 0x666666;
        btntf.font = "verdana";
        btntf.leading = 10;
        btntf.size = 10;
        menu.btxt.setTextFormat(btntf);
        
        //储存i的值，这一步非常重要
        menu.i = i;
        
        //菜单鼠标滑入，滑出，点击时的代码
        menu.onRollOver = function()
        {
            var who:Number = this.i; //提取当前 i
            maskdy = menut + (mlh * who) - 15; //遮罩位置根据当前 i，即当前菜单按钮来计算
            containdy = maskdy - (tlh * who); //遮罩中缩略图的位置根据在遮罩位置的基础上再根据当前 i 计算出来
            speed = 3; //当鼠标滑入菜单是把速度提高 （speed值越小，速度越高，因为缓动函数中y的位移根speed是相除关系，这里我们的设置将使鼠标滑入菜单按钮时提高遮罩和缩略图的缓动速度，当然随便您啦，您当然也可以相反让他们变得更慢，完全是个人喜好
            menutf = new TextFormat();
            menutf.underline = true; //鼠标滑入时菜单上文字加下划线
            this.btxt.setTextFormat(menutf);
        }
        menu.onRollOut = function()
        {
            var who:Number = this.i; //提取当前 i
            var offy = Stage.height + 50;
            maskdy = offy; //当鼠标滑出菜单时把遮罩和缩略图移出舞台，我们选择移到舞台下方，当然您也可以把它们移到上方看不到的地方，或者自己编写透明度的缓动函数让它们的透明度缓动淡出
            containdy = offy - (tlh * who); //同样缩略图的缓动位置也相对其当前位置相应的移出舞台
            speed = 10; //设置缓动速度，使移出时速度变慢
            menutf = new TextFormat();
            menutf.underline = false;
            this.btxt.setTextFormat(menutf);
        }
        menu.onRelease = function()
        {
            var who:Number = this.i; //提取当前 i
            var link:String = nodes[who].attributes.url; //把XML中url储存到变量link中
            getURL(link, "_blank");
        }
    }
}
myx.load("xmlMenu.xml")

//到这里基本上完成了，下面只需要把用到一些缓动函数加上就可以了；

复制内容到剪贴板

代码:

//遮罩影片剪辑的缓动函数
mask.onEnterFrame = function()
{
    maskoldy = this._y;
    this._y += (maskdy - maskoldy) / 7;
}
//缩略图母影片剪辑的缓动函数
container.onEnterFrame = function()
{
    containoldy = this._y;
    this._y += (containdy - containoldy) / 7;
}
//缩略图外框的缓动函数
br.onEnterFrame = function()
{
    brdy = maskdy;
    broldy = this._y;
    this._y += (brdy - broldy) / 7;
}
//初始化遮罩缩略图位置
maskdy = menut + (mlh * 0) - 15;
containdy = maskdy - (tlh * 0);

// 这个是这里我们用到的XML文件

复制内容到剪贴板

代码:

<?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>

现在可以试着修改，删除或者添加我们的XML，你会发现我们的swf文件自动更新数据了。在未来的XML菜单系列教程中，我们会在这个教程的基础上继续丰富这个XML菜单的功能。

[ 本帖最后由 markmaoji 于 2007-4-25 16:35 编辑 ]

最近正在学XML与ASP,LZ能不能提供一下这个教程的ASP修改,增加,删除XML的节点功能,谢谢

不错啊

不错

呵呵，多谢各路神仙们夸奖。   有时间会尽快补上后面的XML菜单教程，增加新的功能。

[ 本帖最后由 markmaoji 于 2006-12-26 14:26 编辑 ]

收藏了。

请教，如何改变图片大小，如http://designblack.com/jungle/sl ... 34_slideBanner.html

yadan，能说的更具体些吗？

我想改变图片的大小，做成类似我给的例子那样的。

我的代码中改变这个缩略图行距+高度变量就可以了：

复制内容到剪贴板

代码:

var tlh = ??? //改成你的图片中的高度加你想要的行间距高度

很不错,又学到东西了~

不错...学习中

我知道抄袭很普遍，不过看到还是很恶心。

http://www.springparker.cn/blog/article.asp?id=24

引用:

原帖由 markmaoji 于 2007-1-13 23:11 发表
我知道抄袭很普遍，不过看到还是很恶心。

http://www.springparker.cn/blog/article.asp?id=24

呵呵,别气,有可能博主忘记写作者了

那个博主到没忘，只不过写的是他自己。 好了，此事到此为止。去水区玩喽。

[ 本帖最后由 markmaoji 于 2007-1-14 08:09 编辑 ]

现在网络文章很多都是抄袭的，楼主就不要和他们生气了，还是很感谢楼主的奉献精神，谢谢了

markmaoji 实在对不起, 我摘抄你的教程,不是故意的,这个私人博客,是个人学习的地方.忘记写了您的大名, 实在深表歉意.不过对您的奉献精神,作为初学者的我们,是非常景仰的.

在此,我向markmaoji 道歉.马上撤帖!

[ 本帖最后由 springparker25 于 2007-1-14 16:56 编辑 ]

我想问下，如将AS代码写在外部的as文件中呢？Flash加载外部的AS文件，这样便于日后的维护，是吧？！
如写成AS文件，建议用AS2.0

[ 本帖最后由 rock1518 于 2007-1-14 17:04 编辑 ]

可以把.as当作一个类,当你需要的时候就调用.as这个文件.
说白一点,就是在.as里面 你已经写好了这个功能了

引用:

原帖由 springparker25 于 2007-1-14 16:45 发表
markmaoji 实在对不起, 我摘抄你的教程,不是故意的,这个私人博客,是个人学习的地方.忘记写了您的大名, 实在深表歉意.不过对您的奉献精神,作为初学者的我们,是非常景仰的.

在此,我向markmaoji 道歉.马上撤帖!

没有那么严重了其实，呵呵。

[ 本帖最后由 markmaoji 于 2007-1-14 17:27 编辑 ]

谢谢,支持,强烈支持

谢谢，做个广告，还有个XML小教程在这里：

http://bbs.blueidea.com/thread-2707711-1-1.html

不错，我看看

谢谢分享
收藏了

//建立菜单
        var menu = home.createEmptyMovieClip("menu" + i, i+40); //建立相等数量的空影片剪辑以存放菜单文字
        menu._x = menul;
        menu._y = menut + (mlh * i);
        menu.moveTo(menul, menut);
        menu.createTextField("btxt", 0, 0, 0, 150, 20); //建立动态文本存放文字
        menu.btxt.html = true;
        menu.btxt.wordWrap = true;
        menu.btxt.text = (nodes[i].attributes.nav); //载入文字

这段代码的 menu.moveTo(menul, menut); 是没用的吧，去掉也没有变化阿，其他人没发现吗？
还有，解压后的script 文件夹里的js文件是干吗用的阿？

[ 本帖最后由 lostfire98 于 2007-1-26 00:45 编辑 ]

呵呵，没错。那个是没用的。多谢lostfire98了。

script里的js文件是flash免激活代码。

good

声明这个的用处是什么 ~？~
我用输出它显示是："level0"
var home:MovieClip = this;

效果不错~
暂且不用理会是否抄袭！

好,顶一个.这无所谓抄袭不抄袭的.好东西要大家分享,使用的时候在心里感激一下原创作者就好了.......