操作系统 程序设计 图形图像 媒体动画 机械电子 WEB开发 数据库 办公软件 路由技术 网络原理 网络架设 网络管理 认证培训
您的位置:计算机资讯网 >> 媒体动画 >> Flash >> 实例技巧 -> 82.用Flash实现几种镜头效果
82.用Flash实现几种镜头效果
2004-10-14 08:22:46
>

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

  一、 元件的设计

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

  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. 单击时间轴里的"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. 新增一层,命名为“代码层”。分别选中第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 (y1>=t+y0) {
    y1 =t+y0;
  }
  if (y1<= b-y0) {
    y1 = b-y0;
  } //以上两个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。大家只要把这个效果的设计方法和代码吃透,然后融会贯通到自己的作品里,就一定可以设计出不错的作品来。


转自:不详 作者:未知 关闭
加入收藏 推荐给好友 打印本文
内容为网上收集,并不代表本站同意或者赞同其观点,如果有任何版权,内容问题,请联系本站,我们将在第一时间处理.
查询
关键字
搜索范围
热点专题
服务
计算机资讯网 | 联系方式 | 广告服务 | 意见留言 | 友情链接 | 网站地图 | 设为首页