Flash+Photoshop实现图片模糊效果动画
转载请联系:http://www.webstudio.com.cn/
1.打开photoshop.选择一副图片,如下图为原图。将其命名为blurnormal.jpg.
2.在PHOTOSHOP中将原图,在PHOTOSHOP中使用滤镜高斯模糊,方式为滤镜―模糊―高斯模糊,半径设为15.当然你可以使用其它的值,然后另存为web图片,命名为blured.jpg 效果如下:
3.打开FLASH,新建一文档,保存命名为blur.fla.将blurnomal.jpg和blured.jpg导入至库中。 在不同的层上摆放图片。如下图所示:
在blurred层上放置blured.jpg.在normal层上放置blurnormal.jpg.最上层为AS编写代码层。选中blurred层上图片。按下F8将其转变为movieclip,同时在属性面板上将其实例名命名为blurred.
4.在as层上加入代码如下:
代码:
//定义颜色实例对象 var myColor:Color = new Color(blurred); //初始化颜色对象 var white:Object = {ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:255}; //设置颜色 myColor.setTransform(white); //执行函数 setc(); //定义函数 function setc(){ onEnterFrame = function(){ //颜色偏移值递减。 white.rb-=5; white.gb-=5; white.bb-=5; white.ab-=5; myColor.setTransform(white); //假如偏移中的ab<-255,则还原为初值。 if(white.ab<-255 ){ white.rb=255; white.gb=255; white.bb=255; white.ab=255; //这里是为了演示方便,假如你想只实现一次播放效果把下面这行的注解去除即可。 //delete this.onEnterFrame; } } }
5.测试你的影片,效果如下:
« Full Screen »
6.假如你想做出其它的一些特别颜色效果。可以对代码做些改动。为了说明问题。本人对三个色彩偏移值加入了输入文本。你可改变它的值。来达到不同的效果。 代码如下:
代码:
var myColor:Color = new Color(blurred); var white:Object = {ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:255}; myColor.setTransform(white); setc(); function setc(){ onEnterFrame = function(){ //三个文本框的变量设置分别为x,y,z. x=mytext1.text; y=mytext2.text; z=mytext.text; white.rb-=5; white.gb-=5; white.bb-=5; white.ab-=5; myColor.setTransform(white); if(white.ab<-255 ){ white.rb=z; white.gb=x; white.bb=y; white.ab=255; //delete this.onEnterFrame; } } }
7.测试你的影片,效果如下:
« Full Screen »
点击这里下载源文件
返回类别: Flash教程 上一教程: Flash制作湖光山色精美动画 下一教程: Flash制作漂亮的蜻蜓飞舞效果动画
您可以阅读与"Flash+Photoshop实现图片模糊效果动画"相关的教程: · Flash制作移动时的模糊效果动画 · Flash与Photoshop结合实现镜头推拉效果动画 · Flash轻松实现QQ翻滚效果动画 · Flash AS进阶教程:实现动态模糊效果 · Flash制作切片式图片效果动画
|