Flash放大镜效果深入改进(2)

2016-01-29 13:35 7 1 收藏

Flash放大镜效果深入改进(2),Flash放大镜效果深入改进(2)

【 tulaoshi.com - Flash 】


  下面是具体的制作过程

  1.导入一张图片。并以这张图片为基础建立一个MovieClip,起名叫“pic”。

  2.在场景的第一个图层“pic-small”中摆出这个“pic”的一个实例,大小与场景一样,作为小图。

  3.新建一个图层“pic-big”,再摆出“pic”的一个实例,在Instance中输入“gback”。这张图将作为大图。现在先不用管它的大小和位置,因为我们将在影片播放时动态地用ActionScript来改变它。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

  4.再新建一个图层“mask”,在上面画一个大小合适的圆。将其转变为影片剪辑元件。并将其Instance改为“zoom”。这个圆就是你的“放大镜”了。在层上点右键,选择“遮蔽”(mask),将这一图层转化成为遮罩。

  最后的结果如下图:

  现在开始写我们的代码

  1、点击“pic-small”,为其加入以下代码:

onClipEvent(load)
{
  scale=2; //初始化放大倍数
}

onClipEvent(mouseMove)  //鼠标移动时实时计算和改变大图的位置
{
  _root.gback._x=_xmouse-_xmouse*scale;
  _root.gback._y=._ymouse-_ymouse*scale;
}

on(keyPress "")   //按下PAGEDOWN时减少放大倍数
{
  scale-=0.1;
  if(scale<1) scale=1;

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

  //倍数改变后应该重置图片大小和位置
  _root.gback._xscale=50*scale;
  _root.gback._yscale=50*scale;
  _root.gback._x=_root._xmouse-_xmouse*scale;
  _root.gback._y=_root._ymouse-_ymouse*scale;
}

on(keyPress "")   //按下PAGEUP键时加大放大倍数
{
  scale+=0.1;
  if(scale4) scale=4;

  //倍数改变后应该重置图片大小和位置
  _root.gback._xscale=50*scale;
  _root.gback._yscale=50*scale;
  _root.gback._x=_root._xmouse-_xmouse*scale;
  _root.gback._y=_root._ymouse-_ymouse*scale;
}

  2、再在影片的第一帧加入以下代码:

startDrag(zoom,true);   //拖动“放大镜”,并将鼠标锁定在其中心。

  好了,现在可以按“Ctrl+Enter”测试下我们的影片了。你还可以加入一些创意让影片更完善。源代码下载

 

来源:http://www.tulaoshi.com/n/20160129/1490765.html

延伸阅读
标签: Web开发
head     titleCSS Fisheye/title     style type="text/css"     span {font-size: x-small}     /style     script language="JavaScript" type="text/javascript"     !--       function convertPreBlocks() {} var ...
标签: flash教程
一、原文件下载 二、建立四个层,如下图所示 详细说明:在该教程中,要想通过下面的AS语句实现预览中的效果,需要设置四处坐标为(0,0)。 图1 [next] (1)分别设置圆、四倍图像在本元件(mask,large)中的X、Y坐标为(0,0)。如图:  [next] (2)将大小两个图片在场景上的位置坐标设定为(0,0),如图: [next] 三...
标签: PS PS基础
最终效果 1、新建一个1000 * 700像素,分辨率为72的画布,背景填充黄褐色:#C1AE84。 新建一个组,先来制作玻璃镜框部分。在组里新建一个图层,按Ctrl + R 调出标尺,在左侧位置拉两条相交的参照线。然后以参照线的焦点为圆心,用椭圆选框工具,按住Alt + Shift拉出下图所示的正圆选区。 2、用油漆桶把选区填充任意颜色,取消选区后效...
标签: 浏览器
360图片放大镜怎么开?   首先,我们需要保证360浏览器版本为7.1以上,开启360浏览器之后同时按住Ctrl+Shift+A就可以关闭或者开启哦。
最终效果 1:首先绘制下面图形: 2:继续绘制: 3:设置渐变效果: 4:继续绘制: 5:最后把柄制作出来: 6:设置图层样式: 7:绘制镜面: 8:图层样式: 9:增加立体效果: 10:图层样式: 11:为了更好的效果: ...

经验教程

419

收藏

80
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部