×

关注微信公众号

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

[AS] AS3.0动态遮罩效果实例

  [复制链接]
发表于 2010-1-18 09:41:43 | 显示全部楼层 |阅读模式
AS3.0动态遮罩效果实例

这是一个创建遮罩效果的教程,将学习如何在一个图像上创建多个大小不同的运动遮罩。

演示:

1、新建Flash文件,导入所需的图片到舞台,设置舞台属性的宽、高同图片相同大小。

2、将图片设置为左对齐、上对齐。右键单击图片转换成影片剪辑,命名为“Background”,设置注册点为居中。图1

3、将图层1改名为背景,在属性面板中输入实例名称:“backgroundImage” 锁定。图2

4、新建一个图层,用椭圆工具画一个禁止笔触的50*50的圆,填充色任意。

5、把圆转换成影片剪辑,设置如下。图3

6、删除舞台上的圆,图层改名为as。至此fla的美工已全部完成。

7、新建ActionScript文件,编写一个外部的MyMask.as文件。在编译器中输入代码:
  1. package {

  2.         import flash.display.MovieClip;

  3.         public class MyMask extends MovieClip {

  4.                 //Mask's x and y speed
  5.                 public var speedX:Number;
  6.                 public var speedY:Number;

  7.                 //Set the given scale for this mask, when we create a new
  8.                 //mask object
  9.                 public function MyMask(scale:Number) {
  10.                         this.scaleX = scale;
  11.                         this.scaleY = scale;
  12.                 }
  13.         }
  14. }
复制代码
这是一个名为MyMask.as的遮罩类,保存在fla文件的同一目录下。

8、切换到fla,在as层输入代码:
  1. //We use an array to hold all our masks.
  2. //(Except the mask that follows our cursor)
  3. var masks:Array = new Array();

  4. //We add all of the masks to a container
  5. var maskContainer:Sprite = new Sprite();

  6. //Set the maskContainer to be the image's mask
  7. backgroundImage.mask = maskContainer;

  8. //Add the container on the stage
  9. addChild(maskContainer);

  10. //Create the mask which follows cursor movement (master mask)
  11. var masterMask:MyMask = new MyMask(1);

  12. //Set the master masks's coordinates to match cursor's coordinates
  13. masterMask.x = mouseX;
  14. masterMask.y = mouseY;

  15. //Add the master mask to a container
  16. maskContainer.addChild(masterMask);

  17. //Cache the image and container as bitmap, so we
  18. //can animate the alpha of the masks
  19. maskContainer.cacheAsBitmap=true;
  20. backgroundImage.cacheAsBitmap=true;

  21. //Create a timer that is called every 0.2 seconds
  22. var timer:Timer = new Timer(200,0);
  23. timer.addEventListener(TimerEvent.TIMER, timerEvent);
  24. timer.start();

  25. //This function is called every 0.2 seconds.
  26. //We create a new mask in this function.
  27. function timerEvent(e:TimerEvent):void {

  28.         //Calculate a random scale for the new mask (0 to 1.5)
  29.         var scale:Number = Math.random() * 1.5 + 0.5;

  30.         //Create a new mask with random scale
  31.         var newMask:MyMask = new MyMask(scale);

  32.         //Set the position for the new mask
  33.         newMask.x = mouseX;
  34.         newMask.y = mouseY;

  35.         //Assign a random x and y speed for the mask
  36.         newMask.speedX = Math.random() * 20 - 10;
  37.         newMask.speedY = Math.random() * 20 - 10;

  38.         //Add the mask to the container
  39.         maskContainer.addChild(newMask);

  40.         //Add the mask to the array
  41.         masks.push(newMask);
  42. }

  43. //We need ENTER_FRAME to animate the masks
  44. addEventListener(Event.ENTER_FRAME, enterFrameHandler);

  45. //This function is called in each frame
  46. function enterFrameHandler(e:Event):void {

  47.         //Loop through the mask array
  48.         for (var i:uint = 0; i < masks.length; i++) {

  49.                 //Save a mask to a local variable
  50.                 var myMask:MyMask = (MyMask)(masks[i]);

  51.                 //Update the x and y position
  52.                 myMask.x += myMask.speedX;
  53.                 myMask.y += myMask.speedY;

  54.                 //Increase the scale
  55.                 myMask.scaleX += 0.1;
  56.                 myMask.scaleY += 0.1;

  57.                 //Reduce the alpha
  58.                 myMask.alpha -= 0.01;

  59.                 //If the alpha is below 0, remove the mask
  60.                 //from the container and from the array
  61.                 if (myMask.alpha < 0) {
  62.                         masks.splice(i,1);
  63.                         maskContainer.removeChild(myMask);
  64.                 }
  65.         }

  66.         //Update the master mask position
  67.         masterMask.x = mouseX;
  68.         masterMask.y = mouseY;
  69. }
复制代码
9、好了,工作全部完成,测试你的影片。
本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=290882
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论

本帖子中包含更多资源

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

x

评分

参与人数 1金币 +8 热心度 +2 收起 理由
zctmh0336 + 8 + 2 好教程

查看全部评分

发表于 2010-1-18 10:06:20 | 显示全部楼层
酷素材
交作业了。

本帖子中包含更多资源

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

x

评分

参与人数 1金币 +3 收起 理由
zctmh0336 + 3 支持支持

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2010-1-18 17:29:15 | 显示全部楼层
本帖最后由 emucrazy 于 2010-1-18 18:52 编辑

真是个好教程,多谢多谢!最近刚好打算学习AS3,就从这个开始了,哈哈!等下交作业~

本帖子中包含更多资源

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

x

评分

参与人数 1金币 +3 收起 理由
zctmh0336 + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2010-1-31 13:07:08 | 显示全部楼层
jc:han做不出来 第八步能不能说详细点  发个源文件出来也好
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-2-1 08:55:21 | 显示全部楼层
酷素材
4# w159ww357
首先创建了一个fla文件,后又创建了一个类文件,切换回fla文件就是返回到fla文件,只要在未命名1上点一下鼠标就切换回去了。

fla源文件.rar就是源文件。

本帖子中包含更多资源

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

x
回复 支持 反对

使用道具 举报

发表于 2010-2-13 10:30:14 | 显示全部楼层
酷素材
var myMask:MyMask = (MyMask)(masks[i]);
这句什么意思。。。~~~!!!
回复 支持 反对

使用道具 举报

发表于 2010-12-7 22:04:35 | 显示全部楼层
不错,可惜我还不会做,先学习了。
回复 支持 反对

使用道具 举报

发表于 2010-12-9 13:52:03 | 显示全部楼层
本帖最后由 llaaoo 于 2010-12-9 13:53 编辑

试做作业,请指正。

本帖子中包含更多资源

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

x

评分

参与人数 1金币 +3 收起 理由
sanbos + 3 做得不错

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2010-12-10 16:38:24 | 显示全部楼层
jc:yiwen  附件太大 jc:cry
回复 支持 反对

使用道具 举报

发表于 2010-12-11 20:51:39 | 显示全部楼层
9# 27481716


可分卷压缩后传上来,不超过2M就行。
回复 支持 反对

使用道具 举报

发表于 2010-12-23 23:27:38 | 显示全部楼层
顶,顶,顶
回复 支持 反对

使用道具 举报

发表于 2010-12-25 09:09:04 | 显示全部楼层
交作业了

本帖子中包含更多资源

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

x
回复 支持 反对

使用道具 举报

发表于 2010-12-25 11:32:39 | 显示全部楼层

本帖子中包含更多资源

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

x
回复 支持 反对

使用道具 举报

发表于 2010-12-25 13:19:38 | 显示全部楼层
交作业。

本帖子中包含更多资源

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

x
回复 支持 反对

使用道具 举报

发表于 2010-12-25 13:27:14 | 显示全部楼层
交作业。
[local]1[/local]
回复 支持 反对

使用道具 举报

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

本版积分规则

2345