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