分享
 
 
 

精彩动态导航菜单制作详解

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

公式在制作特效中非常有用,著名的三星导航菜单就用到了此公式。现在许多韩国网站出尽风头,其中缓冲导航是其一大亮点。本文以一德国网站的导航为例,详解缓冲导航的制作。感谢溶剂提供的坐标算法。

本例效果预览:

制作思路

1、图片缩放控制

利用缓冲公式设置图片的缩放比例,如果鼠标滑过某图片,放大1.8倍。如果其它图片的序号与此图片的序号相差1,就是此图片两边的图片,放大1.4倍,其它的为原始大小。

2、图片坐标控制

当某图片放大时,相邻的图片的坐标等于此图片的坐标加上这两张图片的宽度的一半,实现图片无间距排列。

3、线条和文字控制

线条用画线函数实现,文字的坐标和缩放比例与对应的图片相同。

制作过程

1、启动Flash,新建一个影片,设置影片大小为600px*200px。

准备好如图中的素材,图片的实例名分别为zjs0到zjs4,文字的实例名分别为z0到z4。

把中间的图片坐标设为(300,130),选中全部的图片,按CTRL+K调出排列面板,设置为顶部对齐,使图片的y坐标相同,图片的x坐标通过AS来控制。用同样的方法使方字的y坐标相同,并调整好文字和图片的间距。

2、在主场景中的第一帧上加上下列代码

var myx = this["zjs"+2]._x;

//获取中间图片的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测试,本例制作完成。掌握原理后,加上好的创意,相信你能做出更好的特效。

源码下载

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有