论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Flash教程
Tag:flash cs,flash 8,鼠绘,as,手绘,工具,文字,loading,入门,初学,mc,影片剪辑,声音,mtv,游戏,引导,遮罩,菜单,补间,广告条,时钟,视频教程

FLASH+xml构建图片轮播效果

文章类别:Flash | 发表日期:2008-9-21 20:10:49

  网上很多类似的FLASH文件,但一些FLASH基本上是直接搞在了FLASH里面,不太方便更新啊。这里把如何加载XML,解析XML里面的图片,然后生成动态效果写一下。希望能给大家带来一定的帮助。



演示地址:
http://www.taoshaw.com/taoshaw/study/text_dong/index.htm

这种效果,大部分采用遮照,遮照其实不是很难。这里有一个难点主要是加载图片,以及解析XML。其他的都比较简单。
OK,看看过程吧。
1、将FLASH文件大小设为800*230,这里主要是根据你想让FLASH占多大的广告来决定的。比如你FLASH希望大一点,就可以大一些。相反呢,就可以设小一点。把背景设成黑色,然后把帧频改为60。这里就不多说了,主要是考虑动画的流畅性。
2、创建一个新元件“my_mc”,然后设成可以在AS中导入的。即在AS链接处打上勾。



3、然后在这里面添加代码。为的是在这里面解析外部XML,并加载XML里面的图片。



4、代码如下:
//统一编码
System.useCodepage = true;
//定义XML
var my_xml:XML = new XML();
//消除空格
my_xml.ignoreWhite = true;
//定义图片数组
var my_Arr:Array = new Array();
//加载图片类
var myCL:MovieClipLoader = new MovieClipLoader();
//设置开始位置
var begin_x:Number = 0;
var begin_y:Number = 0;
//定义变量,用于显示图片
var next_x:Number = begin_x;
var next_y:Number = begin_y;
//设置图片大小
var pic_width:Number = 670;
var pic_heigth:Number = 230;
//定义每行数量
var my_num:Number = 2;
//加载XML
my_xml.load("http://www.taoshaw.com/taoshaw/study/text_dong/MyPhoto.xml");
my_xml.onLoad = function(ok:Boolean):Void  {
if (ok) {
  loadStart();
} else {
}
};
//当前影片剪辑创建一个mc
this.createEmptyMovieClip("mc", this.getNextHighestDepth());
function loadStart():Void {
//定义XML长度
var my_Len:Number = my_xml.firstChild.childNodes.length;
for (var i:Number = 0; i<my_Len; i++) {
  //将接收的对象写进数组
  my_Arr.push(my_xml.firstChild.childNodes.attributes.src);
  duplicateMovieClip(mc, "mc"+i, 3+i);
  this["mc"+i]._x = next_x;
  //此处是要害,用于显示加载图片后,图片在舞台中的排列
  next_x += pic_width;
  this["mc"+i]._y = next_y;
  //此处也是要害,用于多行显示
  if (((i+1)%my_num) == 0) {
   next_x = begin_x;
   next_y += pic_heigth;
  }
  myCL.loadClip(my_Arr, this["mc"+i]);
}
}
这里主要用到了MovieClipLoader类,以及XML类。根据根据XML来解析。再利用前面一个来加载多幅图片。这里,让加载到场景中的元件会在不同位置处显示的方法主要用到让_x座标用一个变量代替,而这个变量呢,则不变递加来确定。而让加载的图片分多行显示,则是利用了。当XML的长度除以设定的值。假如这个值为0呢,则另外换行。另外换行的方法。就是重新设定_y的值。让_y的值再叠加。
5、再新建一个script元件。然后用于在里面添加代码。用于控制场景中MC的位置移动等。



6、然后添加代码:


7、回到场景中,在第一层中。将库中的"my_mc"元件拖到舞台中。


8、然后设置实例名称为"strip"。然后设置_x座标为130。这里我们是为了让MC元件只显示在右边。注重一下哦,这里开始就很复杂了哟。要看清楚哈。。。



9、然后再新建一图层。再拖一个"my_mc"到场景中,并设置实例名为"strip3"。位置跟前面一个一样。



10、再新建一遮照层。在其中用椭圆工具绘制一些圆圈效果。这里的效果中以随便绘制。只要不是完全遮住画布即可。因为完全遮住了画布。会让场景中的MC达不到遮照效果的。



11、这里,这个意思跟大家说一下。主要是用到了先在场景中显示一部分内容。然后我们可以通过鼠标移动按钮来对另一层中的MC进行控制。达到交替显示MC的目的。
12、在这个图层上击右键,选遮照。这样即是:用步骤九中新建的图层中的元件去遮照strip3。
13、新建六个按钮吧。因为这里只做了六幅图。而在XML里面的图片呢,也只有六张。所以只做了六个按钮。至于建立按钮的过程,我也不再缀述。这个应该很简单的吧。


14、新建一AS层,这个时候有两个部分需要注重一下。首页一点。将刚才步骤五中所建立的元件拖到场景中,并设置实例名为“script”。
15、选择要害帧,添加代码:
//================版权声明开始================//
//★淘沙网:http://www.taoshaw.com
//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//
//创建新右键菜单
myMenu = new ContextMenu();
//隐藏右键菜单
myMenu.hideBuiltInItems();
myMenu.customItems.push(new ContextMenuItem("淘沙网:http://www.taoshaw.com", PR));
Stage.scaleMode = ’noScale’;
function PR(obj, item) {
getURL("http://www.taoshaw.com", "_blank");
}
//将新菜单赋予给场景
_root.menu = myMenu;
stop();
my_btn1.onRollOver = function():Void {
script.targetx = 130;
script.targety = 0;
script.baseRate = 2;
script.gotoAndPlay(5);
};
my_btn2.onRollOver = function():Void {
script.targetx = 130;
script.targety = -230;
script.baseRate = 2;
script.gotoAndPlay(5);
};
my_btn3.onRollOver = function():Void {
script.targetx = 130;
script.targety = -460;
script.baseRate = 2;
script.gotoAndPlay(5);
};
my_btn4.onRollOver = function():Void {
script.targetx = -540;
script.targety = 0;
script.baseRate = 2;
script.gotoAndPlay(5);
};
my_btn5.onRollOver = function():Void {
script.targetx = -540;
script.targety = -230;
script.baseRate = 2;
script.gotoAndPlay(5);
};
my_btn6.onRollOver = function():Void {
script.targetx = -540;
script.targety = -460;
script.baseRate = 2;
script.gotoAndPlay(5);
};
至此,此动画制作完毕。由于这里主要讲解,如何解析,以及如何加载图片,所以其他功能暂略。大家可以试一下,在图片上添加链接,并通过XML里添加链接
目标等。

附件: yuandongguiji.rar
视频教程列表
文章教程搜索
 
Flash推荐教程
Flash热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058