大家都喜欢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); //载入缩略图
复制本页网址和标题,发送给你QQ/Msn的好友一起分享
上一篇:
雅虎、网易ajax标签导航效果实现
下一篇:
AJAX基础教程及初步使用