荔园在线
荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀
[回到开始]
[上一篇][下一篇]
发信人: hellrock (魔岩), 信区: Multimedia
标 题: 用Flash实现几种镜头效果
发信站: 荔园晨风BBS站 (Fri Apr 12 08:24:53 2002), 转信
用Flash实现几种镜头效果
原作者：柳叶吹风 出处：5D多媒体
发表时间：2002-4-8 关键词：flash
阅读次数：1097 次 发表信息 ：
版权信息：传统媒体及商业网站禁止擅自转载；个人网站转载请署名作者和出处。
用Flash实现几种镜头效果
影片中为了表现山水风景的怡人，或者人物眩晕的感觉时，总会用到一些特殊的镜头效
果来表达，譬如旋转镜头，或者一会儿把镜头拉近，一会儿又拉远。其实，这些镜头效
果已经被一些"闪友"用在了自己的作品里。不过很多朋友还不会使用这些效果。今天，
我就把这些镜头效果的实现方法教给大家。
一、 元件的设计
首先，我们先进行场景图片的设计
作用：所有的镜头效果靠它来体现
1. 打开Flash 5。按快捷键"Ctrl+M"打开Movie Properties面板并把场景设置成500 px
×300 px，15fps，黑色。为了操作的方便，我们先把工作界面左下角的场景缩放比例设
为50%。
2. 按快捷键"Ctrl+F8"打开Symbol Properties面板新建一个名为"image0"的Graphic符
号。在"image0"符号的场景里按快捷键"Ctrl+R"打开Import面板导入一幅背景图。为了
效果能够更炫一点，导入图片的长度要大于场景的长度。
3. 按快捷键"Ctrl+F8"打开Symbol Properties面板新建一个名为"image1"的Movie Cli
p影片。按快捷键"Ctrl+L"打开库。把库中的Graphic符号"image0"拖拽到影片"image1"
的场景中，然后再复制出一个Graphic符号"image0"，把这两个图片整合成一幅大图，如
图0。
注意点：两幅图片重合的线段应该穿过影片"image1"场景中的小"+"字。
两幅图片的中心点应该和影片"image1"场景中的小"+"字在同一水平线上。
把两幅图片加工一下，让它们尽量重合的象一幅整图，这一点很重要。
接着，我们进行动画中所用按钮的设计。
作用：当鼠标移动到"button"按钮的"身上"或离开时就跳转到指定帧，执行相应的代码
，借以实现镜头的旋转效果。当鼠标点击"scalel"按钮或"scales"时跳转到指定帧，执
行相应的代码，借以实现镜头的拉近和拉远效果。
1. 按快捷键"Ctrl+F8"打开Symbol Properties面板新建一个名为"button"的Button符号
。选择矩形工具（不要边线），在"button"按钮的场景里拉出一个矩形，打开Info面板
并进行如图1的设置。打开Mixer面板，把这个矩形颜色的Alpha值设置为0%（使按钮透明
）。
2. 按快捷键"Ctrl+F8"打开Symbol Properties面板新建 "scalel"按钮和"scales"按钮
。按钮的设计可以很简单，就画一个带加号和减号的圆圈就可以了，你也可以根据你自
己的个性设计，我这里就不浪费时间了。
所有的元件见图2。
二、 图片与按钮层的设计
回到主场景，双击第一层，把该层的名字"Layer 1"改为"背景层"。把影片"image1"拖到
场景中，影片在场景中的X轴值为0，Y轴的值为150（以场景的中心为原点）。
打开Instance面板把影片"image1"命名为"image"。
最后锁住该层。
三、 按钮层的设计
作用：当鼠标移动到按钮上图片就开始旋转，鼠标离开按钮时则图片禁止。
1. 单击时间轴里的"Insert Layer"按钮新增一层，命名为"按钮层"。把刚才设计好的透
明按钮"button"拖入到场景中，影片在场景中的X轴值为250，Y轴的值为150。最后把该
层锁住。
2. 右键单击"button"按钮选择Actions命令并输入如下代码：
on (rollOver) { //当鼠标移动到按钮上就执行下面的代码
gotoAndPlay ("n"); //跳转并执行标签为"n"的帧
}
on (rollOut) { //当鼠标移动出按钮就执行下面的代码
gotoAndStop ("p");
}
3. 把"scalel"按钮和"scales"按钮拖拽到场景的右下角。
4. 右键单击"scalel"按钮选择Actions命令并输入如下代码：
on (rollOver) {
gotoAndPlay ("s1");
}
on (rollOut) {
gotoAndPlay ("p");
}
5. 右键单击"scales"按钮选择Actions命令并输入如下代码：
on (rollOver) {
gotoAndPlay ("s2");
}
on (rollOut) {
gotoAndPlay ("p");
}
6. 输入代码后锁住该层。
四、遮挡层的设计
作用：把图片的显示范围固定在一个区域里，使效果看上去更加逼真。
1. 新增一层，命名为"遮挡层"。选择矩形工具（不要边线），在场景里拉出一个矩形（
矩形为黑色），接着打开Info面板并进行如图3的设置。
2. 在这个矩形的中间挖除一个长为500 px，高为240 px的区域。移动这个矩形，使这个
矩形中间的空白区域正好可以显示"button"按钮遮挡的图片（如图4，此时的场景缩放比
为25%）。
五、标签层的设计
1. 新增一层，命名为"标签层"。
2. 按住鼠标左键选取场景所有层的15帧（如图5），按下F5键。
3. 选取第5、8、11、14帧，按F7键插入空白帧。打开Frame面板，在Label文本框里把这
四帧分别命名为"p"、"n"、"s1"、"s2"。
4. 锁住该层。
六、代码层的设计
1. 新增一层，命名?quot;代码层"。分别选中第1，5，8，9，11，12，14，15帧，然后
按下F7键插入空白帧。
2. 双击第1帧，输入如下代码：
l = 500; //"l"是场景的长度
h = 300; //"h"是场景的高度
t = 50; //"t"可见区域顶部坐标
b = 250; //"b"可见区域底部坐标
p = 0.1; //"p"为旋转系数，p的值越大，影片旋转的就越快，反之越慢
v = 220; //"v"是水平线坐标，这个参数保证了图片在放大缩小后能正常显示
si = 100*(b-t)/getProperty(image, _height); // si是图片的缩放比例
3. 双击第5帧，输入命令"stop ();"。
4. 双击第8帧，输入如下代码：
x = _root._xmouse; //把鼠标当前在场景中的X坐标值附值给变量x
y = _root._ymouse; //把鼠标当前在场景中的Y坐标值附值给变量y
x1 = getProperty(image, _x)-(x-l/2)*p;
//"（x-l/2）"中的"l"是场景的长度，不是数字1
//把影片新的坐标值附值给变量x1，每个坐标之间的差值为"(x-l/2)*p"
if (x1<0) {
x1 = x1+getProperty(image, _width)/2;
//由于实体"image"是由两个图片合并的，所以x1<0时，也就是实体"image"中的第2个图
片开始移动出场景时，我们就让它跳转到第一个图片相同的地方显示，以达到图片的流
畅且无限旋转运动
}
if (x1>getProperty(image, _width)/2) {
x1 = x1-getProperty(image, _width)/2; //原理同上
}
setProperty (image, _x, x1); //把影片的x轴新坐标x1附值给影片
y1 = getProperty(image, _y)-(y-h/2)*p; //使影片可以上下移动
y0 = getProperty(image, _height)/2; //把影片高度值的一半附值给变量y0
if (y1>=t+y0) {
y1 =t+y0;
}
if (y1<= b-y0) {
y1 = b-y0;
} //以上两个if语句的作用是让影片始终在可见区域里显示
setProperty (image, _y, y1); //把影片的y轴新坐标y1附值给影片
5. 双击第9帧，输入语句"gotoAndPlay ("n");"。
6. 双击第11帧，输入如下代码：
sx = getProperty(image, _xscale)*103/100; //设影片在X轴上的放大比例为1.03
sy = getProperty(image, _yscale)*103/100;
//设影片在Y轴上的放大比例也为1.03
x2 = getProperty(image, _x);
xx = x2+(x2-l/2)*3/100; //使影片的新X轴坐标xx也按这个比例变化
y0 = getProperty(image, _height)/2;
y2 = getProperty(image, _y);
yy = y2+(y2-v)*3/100; //控制影片在可见区域里显示
setProperty (image, _xscale, sx); //使影片在X轴方向上以参数sx为比例缩放
setProperty (image, _yscale, sy); //使影片在Y轴方向上以参数sy为比例缩放
setProperty (image, _x, xx); //把影片的x轴新坐标xx附值给影片
setProperty (image, _y, yy); //把影片的y轴新坐标yy附值给影片
7. 双击第12帧，输入语句"gotoAndPlay ("s1");"。
8. 双击第14帧，输入如下代码：
sx = getProperty(image, _xscale)*97/100; //设影片在X轴上的缩小比例为97%
sy = getProperty(image, _yscale)*97/100; //设影片在Y轴上的缩小比例为97%
x2 = getProperty(image, _x); //以下代码含义参照上面
xx = x2+(l/2-x2)*3/100;
y0 = getProperty(image, _height)/2;
y2 = getProperty(image, _y);
yy = y2+(v-y2)*3/100;
if (sx<si) {
sx = si;
xx = x2;
yy = y2;
}
if (sy<si) {
sy = si;
} //以上两个if语句的作用是让影片只能缩小到自身的大小
setProperty (image, _xscale, sx);
setProperty (image, _yscale, sy);
if (xx<0) {
xx = xx+getProperty(image, _width)/2;
}
if (xx>getProperty(image, _width)/2) {
xx = xx-getProperty(image, _width)/2;
}
setProperty (image, _x, xx);
setProperty (image, _y, yy);
9. 双击第15帧，输入语句"gotoAndPlay ("s2");"。
好了，效果到这里就写好了，层与帧的最终分布如图6。大家只要把这个效果的设计方法
和代码吃透，然后融会贯通到自己的作品里，就一定可以设计出不错的作品来。
本例原代码下载
http://www.5dmedia.com/conimages/web/2002-04/candy-8-0.fla
江苏 陈高林
--
————————————————————————————————————
● _ _
○ /○\ ( ˇ )
/■\/▲\ ╲╱ 如果一份真挚的爱情摆在我面前，我定会珍惜......
≡//≡//≡〓≡
————————————————————————————————————
※ 来源:·荔园晨风BBS站 bbs.szu.edu.cn·[FROM: 202.192.157.41]
[回到开始]
[上一篇][下一篇]
荔园在线首页 友情链接：深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店