您的位置:寻梦网首页编程乐园Flash>用Flash实现几种镜头效果
用Flash实现几种镜头效果
作者:柳叶吹风  来源:5d

影片中为了表现山水风景的怡人, 或者人物眩晕的感觉时, 总会用到一些特殊的镜头效果来表达, 譬如旋转镜头, 或者一会儿把镜头拉近, 一会儿又拉远。 其实, 这些镜头效果已经被一些"闪友"用在了自己的作品里。 不过很多朋友还不会使用这些效果。 今天, 我就把这些镜头效果的实现方法教给大家。

一、 元件的设计

首先, 我们先进行场景图片的设计
  作用:所有的镜头效果靠它来体现

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 Clip影片。 按快捷键"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.单击时间轴里的"InsertLayer"按钮新增一层, 命名为"按钮层"。 把刚才设计好的透明按钮"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, 高为240px的区域。 移动这个矩形, 使这个矩形中间的空白区域正好可以显示"button"按钮遮挡的图片(如图4, 此时的场景缩放比为25%)。

五、标签层的设计

1. 新增一层, 命名为"标签层"。

2.按住鼠标左键选取场景所有层的15帧?ㄈ缤?), 按下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。 大家只要把这个效果的设计方法和代码吃透, 然后融会贯通到自己的作品里, 就一定可以设计出不错的作品来。