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.测试你的影片,效果如下:

  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.测试你的影片,效果如下:

点击这里下载源文件

时间: 2024-10-16 04:13:20

Flash+Photoshop实现图片模糊效果动画的相关文章

Flash制作移动时的模糊效果动画

下载源文件(右击另存为) 首先选择一张图片 用PS抽出主要部分 然后把边缘模糊一下 接下来复制图片到一新图层 然后用动感模糊工具模糊图片 选择一个角度我选的28度 距离是65 把动感模糊的图层复制两个 调整透明度和位置 然后把他们分别保存成PNG格式 准备放在FLASH里用 打开FLASH面板 把图片都导进库中,每个图片都转换成元件 单独放在一个层里,转成时间线动画 然后图片依次出现调整位置和透明度 具体请看原文件.

PhotoShop制作滚动图片GIF动画效果图文教程

教程利用PhotoShop制作滚动图片GIF动画效果,考虑制作滚动图像多样性效果,我分别介绍三种不同的方法来制作有差异的动画效果,分别是:平行单向滚动动态效果,往复式滚动动画效果和开关门式滚动动画. 大家可以根据自已已经掌握的动画制作知识进行选择性练习,同时,根据教程思路创作出另一种不同风格的动画效果. 先上几个效果: 分类: PS入门教程

PhotoShop CS6制作循五滚动的图片GIF动画教程

次PS教程教大家制作循环滚动的图片GIF动画效果.建议使用Photoshop CS6 或者 AE,因为用时间轴会很简单很多 教程效果图: 这是素材.用来控制大小的,我们需要制作五张大小一样的 制作步骤如下: 分类: PS入门教程

Photoshop制作魔术师GIF动画

用时间轴制作帧数较多的动画是非常合适的,制作之前先构思好动画的展示流程,然后绘制出所需的图形,后期在时间轴按自己的想法设置动画即可. 最终效果 先来认识一下时间轴及常用图层放入后时间轴中出现的一些属性栏. 1.画出主体:画的时候部分需要先想好,但有时候做到一半时,有更好的灵感就可以加上,所有不需要太严谨(点这里下载作者画好的素材). 2.为盒子添加动画,过程如下图. 3.头副本动画制作,过程如下图. 盖子飞起动画制作如下图. 4.画出一只兔子,然后添加动画. 5.盒子动画第二部分制作. 为魔术师

用Flash MX制作荷花倒影动画

倒影 孩提时代,每到夏天炎热的时候,总要和儿时的好友来到村南的荷花湾里,游泳嬉闹.淡淡的荷花清香沁人心脾,香脆可口的莲子使人垂涎欲滴:鱼戏莲叶东,鱼戏莲叶西的美景,使人仿佛置身于人间仙境:微风吹过,荷叶.荷花随风摆动,水波荡漾.每当想起这一美景,心情就无比惬意,就情不自禁地陶醉在儿时的美景和欢乐中.笔者不敢独享这一美景.这一快乐,在此用Flash MX制作"荷花"倒影动画,让大家分享一下我的快乐,使大家也成为快乐的人. 一.制作荷花的水中倒影动画 1. 选中荷花图片,如图1所示.按F8

Photoshop CC如何制作动画里萦绕美女身边的光线

  在网上我们可以看到许多图片上人物身上都会有光圈环绕,这个效果怎么做出来呢,其实在pscc中能够很简单的通过路径和者画笔做出这种效果,下面小编就给大家详细的讲解一下在Photoshop CC如何制作动画里萦绕美女身边的光线. 1.首先打开PHOTOSHOP CC软件,单击菜单[文件]-[打开]命令,打开一张美女图片.     2.点击左侧工具栏中的钢笔工具,在图片上画出一条螺旋的曲线,慢慢调整好后如图.   3.点击图层面板的新建按钮,新建一个图层,选择画笔工具,笔尖选择最小,点击路径选择工具

Photoshop制作逼真卷轴动画

  本例介绍运用Photoshop制作逼真卷轴动画的几种方法,教程讲解比较详细,从处理图片素材,绘制卷轴,用画布大小工具裁剪图片到如何制作动画都讲解的比较全面,希望能给对PS制作动画的朋友带来帮助~~ 先来看有轴.底纹背景动画的效果: 制作方法: 一. 素材准备 1.1 打开要制作的图片,编辑好画布大小(注意宽度和高度不要过大,因为制作出的动画帧数很多,文件会非常大的).按"Ctrl+A"全选,"Ctrl+C"复制. 1.2 新建文件,宽度要比刚编辑好的图片大两倍以

怎么把图片生成动画?

问题描述 我看见许多网站的首页 都有最新上传的图片制作成的动画 图片来回切换 不知道这图片是怎么生成的 谁能给小弟解答? 谢谢问题补充:剑 事 可不可以说详细点 解决方案 这种代码网上有好多,一般有两种,一种是采用js实现图片切换并带有切换时的效果,另外一种有采用flash做的.又一款FLASH图片切换效果代码<HTML><HEAD><TITLE>又一款FLASH图片切换效果代码 www.qpsh.com</TITLE><center><s

《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 导读

前言 网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通 网络技术的日益成熟,给人们带来了诸多方便.如今,网络正在各个领域发挥着巨大的作用,成为人们日常生活中不可或缺的部分.人们可以足不出户网上购物,随时查询股票信息,在自己的博客上尽情发表言论--以上这些都离不开最基本的网页设计.制作与维护. 制作一个网站需要很多技术,包括图像设计和处理.网页动画的制作和网页版面的布局编辑等.随着网页制作技术的不断发展和完善,产生了众