日历
| |||||||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
| 1 | 2 | 3 | 4 | ||||||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 | |||
| 12 | 13 | 14 | 15 | 16 | 17 | 18 | |||
| 19 | 20 | 21 | 22 | 23 | 24 | 25 | |||
| 26 | 27 | 28 | 29 | 30 | 31 | ||||
搜索标题
最新评论
统计信息
- 访问量: 4593
- 日志数: 5
- flash数: 1
- 建立时间: 2008-03-04
- 更新时间: 2008-06-03
RSS订阅
我的最新日志
-
快速导航
2008-6-03
-
广告类图片切换（二）
2008-6-03
-
广告类图片切换（一）
2008-5-27
广告类图片切换（一）
在网页中时常可以见到这样的广告的效果：广告主体由几张不同内容的图片构成，当鼠标移动到不同的标题上时，会随之显示不同的图片，关伴有切换效果，各图片均有相关链接。在闪吧首页，新浪体育首页等都有这样的广告条。其优点是可以在有限的版块内投入更多的广告，同时生动的切换效果不会让人觉得单调，相比不动的图片更具有欣赏性。本文选择一个比较有体表性的作为分析，希望抛砖引玉，带动大家的交流。
一、 制作思路：
鼠标移动到某标题上时（如1,2,3,4,5）,用num计下其位置，设该图片的tAction属性为true,并显示该图，同时淡隐该图的标题，并控制其余几个标题移动。
当鼠标移动到另一标题上时，num的值改变，原图片淡隐，标题浮现，同时其余的图片各自走位。
当鼠标没有监控到鼠标时，按时间间隔自动循环播放。
二、 制作过程：
１，准备五张图片，大小300*60,转换为影片剪辑，命名为p1~p5,对齐位置（0,0）.
2，Ctrl+F8 新建MC名为pic,在图层１上分五帧放置p1~p5,在图层二上添加代码：
this.gotoAndStop(_parent.num);
３，制作标题，Ctrl+F8新建MC名为title, 在title 中画一圆边矩形，大小为36*60,对齐位置（2,0）； //不以原点以齐是为了能显示圆角，以便美观
新建MC名为title5,在第一层分五帧放置五个title,调整它们的色调使之显不同颜色（如果不嫌麻烦，分别画五个不同颜色的title也可以）。在第二层放置五个文本，分别输入1,2,3,4,5如图：
图１
图２
（图2是为便于理解将五张放在一起的效果，实际是不会出现这样的效果的）
４，制作主动画。新建MC名为movie，在图层一放置影片剪辑pic,实例名为img；在图层二放置影片剪辑title5,实例名为title；在图层三放置一按钮btn，实例名也为btn,尺寸为600*60；以上三元件对齐位置均为（0,0）。图层四添加代码：
wImg = 300;
wSpc = 2;
wSA = 42;
x1 = 0;
x2 = 42;
x3 = 84;
x4 = 126;
x5 = 168;
x0 = 0;
xa = 302;
xb = 344;
xc = 386;
xd = 428;
num = this._name.charAt(this._name.length-1);
this.img.gotoAndStop(num);
this.title.gotoAndStop(num);
this.btn.onRollOver = function() {
_root["movie"+num] = true;
_root.code = num;
_root.tAction = true;
_root.dTime = _root.timer;
};
this.btn.onRollOut = function() {
_root.tAction = false;
};
this.btn.onRelease = function() {
getURL(_root.urlArray[num], _root.window);
};
this.onEnterFrame = function() {
if (_root.code == 1) {
xpos = [0, 0, xa, xb, xc, xd];
ap = [0, 0, 100, 100, 100, 100];
xp = [0, 100, 0, 0, 0, 0];
} else if (_root.code == 2) {
xpos = [0, 0, x2, xb, xc, xd];
ap = [0, 100, 0, 100, 100, 100];
xp = [0, 0, 100, 0, 0, 0];
} else if (_root.code == 3) {
xpos = [0, 0, x2, x3, xc, xd];
ap = [0, 100, 100, 0, 100, 100];
xp = [0, 0, 0, 100, 0, 0];
} else if (_root.code == 4) {
xpos = [0, 0, x2, x3, x4, xd];
ap = [0, 100, 100, 100, 0, 100];
xp = [0, 0, 0, 0, 100, 0];
} else if (_root.code == 5) {
xpos = [0, 0, x2, x3, x4, x5];
ap = [0, 100, 100, 100, 100, 0];
xp = [0, 0, 0, 0, 0, 100];
}
this._x = this._x+(xpos[num]-this._x)*_root.speed;
this.title._alpha = this.title._alpha+(ap[num]-this.title._alpha)*_root.speed;
this.img._alpha = this.img._alpha+(xp[num]-this.img._alpha)*_root.speed;
};效果图：
5, 最后到主舞台。
分别在五个图层的第二帧添加五个影片剪辑movie,实例名分别为movie1~movie5；
在第六图层加入一个空影片剪辑，选中该空影片剪辑，添加代码：
onClipEvent (enterFrame) {
if (_root.tAction == false) {
if (_root.dTime<=1) {
if (_root.code == _root.menuNum) {
_root.code = 1;
} else {
_root.code++;
_root["movie"+_root.code] = true;
}
_root.dTime = _root.timer;
}
_root.dTime--;
}
最后新建一层作为AS层，在第一帧添加：
Stage.scaleMode = "noScale";
menuNum = 5;
url01 = "";
url02 = ""
url03 = "";
url04 = "";
url05 = "";
window = "_blank";
第二帧添加：
allMenuNum = 5;
numArray = new Array(allMenuNum);
for (i=1; i<=menuNum; i++) {
numArray[i] = true;
}
code = 1;
speed = 0.200000;
timer = 50;
dTime = timer;
urlArray = new Array(0, url01, url02, url03, url04, url05);
第五帧添加：
this.stop();
_root.tAction = false;
效果图：
Ctrl+Enter 测试效果。
Flash: http://space.flash8.net/bbs/attachment.php?aid=340943 全屏浏览