×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 21458|回复: 45

AS3图片平移+发光+缩放效果

  [复制链接]
发表于 2011-2-23 11:54:50 | 显示全部楼层 |阅读模式
AS3图片平移+发光+缩放效果

应网友要求发教程

知识点:影片剪辑的嵌套,第三方类库的运用,循环遍历,滤镜的应用,物体的平移。

1、新建AS3 fla文档,名字随意。文档设置:宽 550 高 300 背景颜色:深色 帧频:24 。

2、把图片导入到库中,图片宽、高以 300 像素左右比较适合。本例用的是 8 张 240 X 320 的图片。可以根据自己的实际情况决定用图片的多少。

3、拖库中的图片到舞台中,右键单击转换为影片剪辑,注册点全居中对齐,命名任意。每张图片建一个影片剪辑。

4、新建名为" Content " 的影片剪辑,把库中的8个影片剪辑拖入,排列好,注册点左对齐。这样就形成了一个影片剪辑的嵌套,Content 为父,8个图片的影片剪辑为子。图-1


5、右键单击库中的 Content 影片剪辑, 选择"属性"命令。在弹出的元件属性面板中勾选" 为ActionScript 导出 ",按"确定"按钮。系统会在"类"输入栏中自动填入元件名和基类。图-2

  (这其实是系统自动生成了一个和元件名相同的类,继承自基类(默认是MovieClip)。然后这个类会和库元件绑定,生成这个类的对象并加入到显示列表。)

6、回到场景1,如果场景中有元件的话删除元件。因为我们要用代码把元件加入到舞台中。在图层1绘制一个同背景颜色和大小相同的 x、y 都为 0 的矩形,这是因为有的网站背景是透明的显示不出设定的背景色,加一个遮片。

7、添加动作层,按F9键打开动作面板。

首先我们需要导入 Twenlite 引擎,因为是第三方类库这一步是必需的。
  1. import com.greensock.TweenLite;
复制代码
8、定义需要的变量
  1. var speed:Number;
  2. var mc:MovieClip;
  3. var zoom:MovieClip;
  4. var content_mc:MovieClip;
  5. var glow:GlowFilter = new GlowFilter(0xffffff,1,2,2,3,255,false,false);
复制代码
9、生成一个新的 content_mc 影片剪辑实例,并把它放在舞台上。
  1. content_mc = new Content();
  2. content_mc.y = stage.stage.stageHeight / 2;
  3. addChild(content_mc);
复制代码
10、定义一个 init() 方法,循环遍历 " content_mc " 的所有的孩子,储存他们的初始 x 和 y 坐标。并注册鼠标事件侦听器。
  1. function init():void
  2. {
  3.         for (var i:int=0; i< content_mc.numChildren; i++)
  4.         {
  5.                 mc = content_mc.getChildAt(i) as MovieClip;
  6.                 //mc.buttonMode = true;//手形光标
  7.                 mc.posX = mc.x;
  8.                 mc.posY = mc.y;
  9.                 mc.addEventListener(MouseEvent.ROLL_OVER, onOver);
  10.                 mc.addEventListener(MouseEvent.ROLL_OUT, onOut);
  11.                 mc.addEventListener(Event.ENTER_FRAME, onFrame);
  12.         }

  13. }
复制代码
11、侦听器函数 onOver 增加一个发光滤镜,而且为 onOut 时我们移除它。当鼠标移入时增加发光滤镜,放大并置顶。鼠标移出时移除滤镜,缩小。
  1. function onOver(evt:MouseEvent)
  2. {
  3.         evt.target.filters = [glow];
  4.         mc = evt.target as MovieClip;
  5.         zoom = mc;
  6.         content_mc.setChildIndex(mc, content_mc.numChildren -1);
  7.         TweenLite.to(mc, 0.5,{scaleX:0.8,scaleY:0.8,x:zoom.posX,y:zoom.posY});
  8. }

  9. function onOut(evt:MouseEvent)
  10. {
  11.         evt.target.filters = [];
  12.         mc = evt.target as MovieClip;
  13.         TweenLite.to(mc, 0.5,{scaleX:0.4,scaleY:0.4,x:zoom.posX,y:zoom.posY});
  14.         zoom = null;
  15. }
复制代码
12、左右平移
  1. function onFrame(evt:Event):void {
  2.        
  3.         if (mouseX < stage.stageWidth / 2 && mouseX > 0) {
  4.                 speed = .5;
  5.         }
  6.         else{
  7.                 speed = -.5;
  8.         }
  9.         content_mc.x += speed;
  10.         if (content_mc.x < -content_mc.width + stage.stageWidth - 20)
  11.         {
  12.                 content_mc.x = -content_mc.width + stage.stageWidth - 20;
  13.         }else if (content_mc.x > 60)
  14.         {
  15.                 content_mc.x = 60;
  16.         }
  17. }
  18. // 最后不要忘记调用init()函数
  19. init();
复制代码
完整代码:
  1. import com.greensock.TweenLite;

  2. var speed:Number;
  3. var mc:MovieClip;
  4. var glow:GlowFilter = new GlowFilter(0xffffff,1,2,2,3,255,false,false);
  5. var zoom:MovieClip;
  6. var content_mc:MovieClip;

  7. content_mc = new Content();
  8. content_mc.y = stage.stage.stageHeight / 2;
  9. addChild(content_mc);

  10. function init():void
  11. {
  12.         for (var i:int=0; i< content_mc.numChildren; i++)
  13.         {
  14.                 mc = content_mc.getChildAt(i) as MovieClip;
  15.                 //mc.buttonMode = true;//手形光标
  16.                 mc.posX = mc.x;
  17.                 mc.posY = mc.y;
  18.                 mc.addEventListener(MouseEvent.ROLL_OVER, onOver);
  19.                 mc.addEventListener(MouseEvent.ROLL_OUT, onOut);
  20.                 mc.addEventListener(Event.ENTER_FRAME, onFrame);
  21.         }

  22. }

  23. function onOver(evt:MouseEvent)
  24. {
  25.         evt.target.filters = [glow];
  26.         mc = evt.target as MovieClip;
  27.         zoom = mc;
  28.         content_mc.setChildIndex(mc, content_mc.numChildren -1);
  29.         TweenLite.to(mc, 0.5,{scaleX:0.8,scaleY:0.8,x:zoom.posX,y:zoom.posY});
  30. }

  31. function onOut(evt:MouseEvent)
  32. {
  33.         evt.target.filters = [];
  34.         mc = evt.target as MovieClip;
  35.         TweenLite.to(mc, 0.5,{scaleX:0.4,scaleY:0.4,x:zoom.posX,y:zoom.posY});
  36.         zoom = null;
  37. }

  38. function onFrame(evt:Event):void {
  39.        
  40.         if (mouseX < stage.stageWidth / 2 && mouseX > 0) {
  41.                 speed = .5;
  42.         }
  43.         else{
  44.                 speed = -.5;
  45.         }
  46.         content_mc.x += speed;
  47.         if (content_mc.x < -content_mc.width + stage.stageWidth - 20)
  48.         {
  49.                 content_mc.x = -content_mc.width + stage.stageWidth - 20;
  50.         }else if (content_mc.x > 60)
  51.         {
  52.                 content_mc.x = 60;
  53.         }
  54. }

  55. init();
复制代码
全部完成后就可以测试了,有什么问题可以回帖,我会尽力解答。祝大家顺利!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x

评分

参与人数 1 +8 +2 收起 理由
sanbos + 8 + 2 多谢教程,辛苦了。

查看全部评分

发表于 2011-2-23 12:08:29 | 显示全部楼层
学习了     
回复 支持 反对

使用道具 举报

发表于 2011-2-23 12:51:43 | 显示全部楼层
感谢老师无私的奉献。
回复 支持 反对

使用道具 举报

发表于 2011-2-23 14:22:35 | 显示全部楼层
很不错的教程。
回复 支持 反对

使用道具 举报

发表于 2011-2-23 15:42:53 | 显示全部楼层
本帖最后由 nxasd 于 2011-2-24 17:35 编辑




修电灯的来了,一会儿再做作业。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x
回复 支持 反对

使用道具 举报

发表于 2011-2-23 17:55:05 | 显示全部楼层
求解!~ 有错误

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x
回复 支持 反对

使用道具 举报

发表于 2011-2-23 18:51:43 | 显示全部楼层
回复 daytostorm 的帖子

将附件中的“类库”下载后解压到你的fla所在的文件夹中。
回复 支持 反对

使用道具 举报

发表于 2011-2-23 19:04:14 | 显示全部楼层
回复 sanbos 的帖子

感谢版主
回复 支持 反对

使用道具 举报

发表于 2011-2-24 02:28:04 | 显示全部楼层

不知为何,cao 老师的图片我这里总是不能显示,我抓图上来请你们各位老师帮忙看看,是否是我的电脑那里出错了?

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x
回复 支持 反对

使用道具 举报

发表于 2011-2-24 16:45:51 | 显示全部楼层
本帖最后由 27481716 于 2011-2-25 09:25 编辑


jc:sweat    终于改好了

评分

参与人数 1 +3 收起 理由
sanbos + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2011-3-1 22:18:01 | 显示全部楼层
本帖最后由 zbz777 于 2011-3-1 22:27 编辑

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x
回复 支持 反对

使用道具 举报

发表于 2011-3-1 22:33:25 | 显示全部楼层
Cao老师,为什么我做的不一样呢?起始显示的是大图片,而后才是小图片,我搞不明白那里不对了?
回复 支持 反对

使用道具 举报

发表于 2011-3-1 22:34:24 | 显示全部楼层
Cao老师,为什么我做的不一样呢?起始显示的是大图片,而后才是小图片,我搞不明白那里不对了?
回复 支持 反对

使用道具 举报

发表于 2011-3-3 08:13:48 | 显示全部楼层
把每张图片元件放到    Content 元件后   再把图片改小 再排列好 应该没问题了
回复 支持 反对

使用道具 举报

发表于 2011-3-7 01:12:04 | 显示全部楼层
本帖最后由 zbz777 于 2011-3-7 01:16 编辑


谢谢27481716 老师的指点。我按照你说的,重做了一遍。改好了。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x

评分

参与人数 1 +3 收起 理由
sanbos + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [免费注册]

本版积分规则