flash动态缓冲图片导航制作详解_flash教程
2008-04-03 01:44:24来源:互联网 阅读 ()
缓冲公式在制作特效中很有用,著名的三星导航菜单就用到了此公式。现在许多网站出尽风头,其中缓冲导航是其一大亮点。本文以一德国网站的导航为例,详解缓冲导航的制作。这个效果是我和溶剂一起完成的,他提供坐标的算法,我提供缩放的算法。
本例效果演示
鼠标划过的部分图片会变大
制作思路
- 图片缩放控制
利用缓冲公式配置图片的缩放比例,假如鼠标滑过某图片,放大1.8倍。假如其他图片的序号和此图片的序号相差1,就是此图片两边的图片,放大1.4倍,其他的为原始大小。 - 图片坐标控制
当某图片放大时,相邻的图片的坐标等于此图片的坐标加上这两张图片的宽度的一半,实现图片无间距排列。 - 线条和文字控制
线条用画线函数实现,文字的坐标和缩放比例和对应的图片相同。
制作过程
1、启动Flash,新建一个影片,配置影片大小为600px*200px。
准备好如图中的素材,图片的实例名分别为zjs0到zjs4,文字的实例名分别为z0到z4。
把中间的图片坐标设为(300,130),选中全部的图片,按CTRL+K调出排列面板,配置为顶部对齐,使图片的y坐标相同,图片的x坐标通过AS来控制。用同样的方法使方字的y坐标相同,并调整好文字和图片的间距。
2、在主场景中的第一帧上添加下列代码
//获取中间图片的x坐标
for (var i = 0; i<5; i ) {
this["zjs" i].n = i;
//每个图片MC下定义一个变量
this["zjs" i].onRollOver = function() {
control = true;
//鼠标滑过图片时为真
};
this["zjs" i].onRollOut = function() {
control = false;
//鼠标移出图片时为假
};
}
onEnterFrame = function () {
for (var k = 0; k<5; k ) {
this["z" k]._x = this["zjs" k]._x;
// 说明文字的x坐标等于本应图片的x坐标
this["z" k]._xscale = this["zjs" k]._xscale;
this["z" k]._yscale = this["zjs" k]._yscale;
// 说明文字的缩放比例和图片相同
}
if (control) {
mouse_in();
} else {
mouse_out();
}
// 条件真或假时调用函数
};
//坐标配置函数
function setX() {
for (var k = -2; k<3; k ) {
this["zjs" (k 2)]._x = myx this["zjs" 2]._width*k;
//以中间图片为准无间距排列
}
for (var k = Number(temp1) 1; k<5; k ) {
//temp1为缩放比例最大的图片下的变量值
var mc1 = this["zjs" k];
var mc2 = this["zjs" (k-1)];
//此图片右边的其他图片
mc1._x = mc2._x (mc2._width mc1._width)/2-1;
//配置这些图片的x坐标,1为消除图片间的空隙
}
for (var k = Number(temp1)-1; k>-1; k--) {
var mc1 = this["zjs" k];
var mc2 = this["zjs" (k 1)];
mc1._x = mc2._x-(mc2._width mc1._width)/2 1;
}
//缩放比例最大的图片的左边的图片的x坐标配置
myLine();
//图片下方的线条
}
//比例缩放函数
function move_scale(x, obj) {
speed = (x-obj._xscale)*.65 speed*0.6;
obj._xscale = speed;
obj._yscale = speed;
//缓冲公式,x为图片的缩放比例,obj为MC
}
//鼠标滑过图片时,图片的缩放、x坐标配置函数
function mouse_in() {
for (var i = 0; i<5; i ) {
var mc = this["zjs" i];
//获得实例名
if (mc.hitTest(_xmouse, _ymouse, true)) {
move_scale(180, mc);
//假如鼠标位于图片的上方,图片放大1.8倍
temp1 = mc.n;
//把此图片下的变量赋给变量temp1
} else if (Math.abs(mc.n-temp1) == 1) {
move_scale(140, mc);
//两侧的图片比例放大1.4倍
} else {
move_scale(100, mc);
//其他的图片为原始大小
}
}
setX();
//配置图片的x坐标
}
//鼠标移出图片时,图片的缩放、x坐标配置函数
function mouse_out() {
for (var i = 0; i<5; i ) {
move_scale(100, this["zjs" i]);
//缩放比例为1,恢复原始大小
}
setX();
//坐标复原
}
//线条函数
function myLine() {
createEmptyMovieClip("line", 1);
//创建一个空影片
with (line) {
lineStyle(0.1, 0xff9933, 100);
moveTo(zjs0._x-zjs0._width/2, zjs0._y 10);
lineTo(zjs4._x zjs4._width/2, zjs4._y 10);
//图片下方水平的直线
moveTo(zjs0._x-zjs0._width/2, zjs0._y 5);
lineTo(zjs0._x-zjs0._width/2, zjs0._y 15);
//右边垂直的直线
moveTo(zjs4._x zjs4._width/2, zjs4._y 5);
lineTo(zjs4._x zjs4._width/2, zjs4._y 15);
//左边垂直的直线
}
}
|
按CTRL ENTER测试,本例制作完成。掌控原理后,加上好的创意,相信您能做出更好的特效。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash
