夏日博客

A-A+

flash鼠标跟随变化的滤镜效果

2015年09月17日 前端设计 评论 1 条 阅读 145 views 次

滤镜的效果就是将一张图像进行风格化或者是高斯模糊，让这张图片呈现出艺术化，效果很有质感，通常制作这种效果，会有一张朦胧图作为背景，而另一张图片做质感效果，下面我们来看一下利用 flash 8 制作的一个跟随鼠标变化的滤镜效果，主要还是应用到 AS 的代码。

制作主要使用如下方法：

1、制作一个MC，拖入到舞台上，修改实例名为myMC

2、添加下列代码：

  1. import flash.filters.*;//载入滤镜类   
  2. // 定义初始斜角滤镜的偏移距离  
  3. var maxbeveldistance:Number = 5;   
  4. // 创建一个斜角滤镜  
  5. var bevel:BevelFilter = new BevelFilter();  
  6. // 定义初始斜角滤镜的强度  
  7. bevel.strength = .6;   
  8. // 创建一个投影滤镜  
  9. var dropshadowropShadowFilter = new DropShadowFilter();  
  10. //投影滤镜初始化  
  11. dropshadow.color = 0x000000;  
  12. dropshadow.alpha = .75;  
  13. dropshadow.blurX = 10;  
  14. dropshadow.blurY = 10;   
  15. // 跟随鼠标变化更新滤镜数据  
  16. onMouseMove = function(){  
  17.   
  18. // 计算当前鼠标与mc之间的距离差  
  19. var dx = _xmouse - myMC._x;  
  20. var dy = _ymouse - myMC._y;  
  21.   
  22. //计算距离  
  23. var distance = Math.sqrt(dx*dx + dy*dy);  
  24. // 计算偏移角  
  25. var angle = Math.atan2(dy, dx);  
  26.   
  27.   
  28. // 应用斜角发光的偏移距离和角度  
  29. bevel.distance = Math.min(maxbeveldistance, distance/50);  
  30. bevel.angle = 180 + angle * 180/Math.PI; // convert and rotat  
  31. e 180 degress  
  32.   
  33.   
  34. // 应用投影偏移距离和角度  
  35. dropshadow.distance = distance/20;  
  36. dropshadow.angle = 180 + angle * 180/Math.PI; // convert and rot  
  37. ate 180 degress  
  38.   
  39. // 在mc上增加滤镜～  
  40. myMC.filters = [bevel, dropshadow];  
  41. }   
  42. //初始化  
  43. onMouseMove();   

由于滤镜的效果很多，只是使用这几个，也可以使用不同的滤镜效果～

标签：

1 条留言  访客：1 条  博主：0 条

  1. 清风美文 2015年09月17日 下午 8:22  -199楼  回复

    也去试试，也喜欢折腾这些

给我留言