注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

 
 
 

日志

 
 

flash制作水波遮罩效果  

2014-02-20 11:13:54|  分类: 〖F--S教程〗 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

支你一招:让flash地址永远有效 - 迎春 -

迎春博客:http://ycyx88888.blog.163.com

flash制作水波遮罩效果   

作前准备:

    准备两张规格为565*420的人物或风光图片,经过制图软件(ps、fw)处理后,保存到指定的文件夹待用。

  制作步骤

    1.启动FLASH8 软件。

    2.确立文档属性 设置动画尺寸为550*400,背景颜色深绿,其它默认,点击确定,进入场景1。 如图1所示:

flash制作水波遮罩效果 - 迎春 -

图1

    3.首先将准备好的素材图片素材导入库中,待用。

flash制作水波遮罩效果 - 迎春 -

flash制作水波遮罩效果 - 迎春 -

素材图

    4.创建图形元件

   (1)选择“插入-新建元件”,创建一个名为“正圆”的图形元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第1帧,用椭圆形工具打开混色器,设置其参数,如图2所示:

flash制作水波遮罩效果 - 迎春 -

图2

(其它色码块Alpha均为100%)

在舞台拖一个规格为30*30的,无边线的正圆,全居中。如图3所示:

flash制作水波遮罩效果 - 迎春 -

图3

   (2)选择“插入-新建元件”,创建一个名为“矩形”的图形元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第1帧,用矩形工具在舞台拖一个,规格为565*420的,无边线的矩形,颜色随意,全居中。如图4所示:

flash制作水波遮罩效果 - 迎春 -

图4

    5.创建影片剪辑元件

   (1)选择“插入-新建元件”,创建一个名为“影片1”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。

    A.选择图层1第1帧,从库中拖出“正圆”图形元件到舞台,规格不变,全居中。如图5所示:

flash制作水波遮罩效果 - 迎春 -

图5

在第50帧插入关键帧,点击第50帧上的舞台实例,设置其规格为800*800,全居中,创建本区域间的动画补间;在第25帧插入关键帧,该帧上的舞台实例,如图6所示:

flash制作水波遮罩效果 - 迎春 -

图6

选中第一帧上的舞台实例,在属性面板设置其Alpha0%flash制作水波遮罩效果 - 迎春 - ,完成后的舞台实例变化,如图7所示:

flash制作水波遮罩效果 - 迎春 -

图7

选中第50帧上的舞台实例,在属性面板设置其Alpha0%flash制作水波遮罩效果 - 迎春 - ,完成后的舞台实例变化,如图8所示:

flash制作水波遮罩效果 - 迎春 -

图8

(此图为原图的一半)

在第80帧插入帧。

    B.本环节完成后的时间轴,如图9所示:

flash制作水波遮罩效果 - 迎春 -

图9

   (2)选择“插入-新建元件”,创建一个名为“影片2”的影片剪辑元件,点击确定,进入元件编辑区。添加两个图层,共三个图层。自下而上命名为图片1、图片2、遮罩。

    A.选择图片1图层第1帧,从库中拖出素材图片1到舞台,规格为565*420,全居中。如图10所示:

flash制作水波遮罩效果 - 迎春 -

图10

在第81帧插入空白关键帧,从库中拖出素材图片2到舞台,规格为565*420,全居中。如图11所示:

flash制作水波遮罩效果 - 迎春 -

图11

在第160帧插入帧,上锁。

    B.选择图片2图层第1帧,从库中拖出素材图片2到舞台,规格为565*420,全居中。如图12所示:

flash制作水波遮罩效果 - 迎春 -

图12

在第81帧插入空白关键帧,从库中拖出素材图片1到舞台,规格为565*420,全居中。如图13所示:

flash制作水波遮罩效果 - 迎春 -

图13

在第160帧插入帧,上锁。

    C.选择遮罩图层第1帧,从库中拖出”影片1“影片剪辑元件到舞台,规格不变,全居中。如图14所示:

flash制作水波遮罩效果 - 迎春 -

图14

在第81帧插入关键帧,在第160帧插入帧。设置该图层为遮罩层。

    D.本环节完成后的时间轴,如图15所示:

flash制作水波遮罩效果 - 迎春 -

flash制作水波遮罩效果 - 迎春 -

flash制作水波遮罩效果 - 迎春 -

图15

   (3)选择“插入-新建元件”,创建一个名为“影片3”的影片剪辑元件,点击确定,进入元件编辑区。添加一个图层,共两个图层。下层命名为矩形,上层命名为影片1

    A.选择矩形图层第1帧,从库中拖出“矩形”图形元件到舞台,规格为565*620,左对齐-上对齐。上锁。如图16所示:

 flash制作水波遮罩效果 - 迎春 -

图16

    B.选择影片1图层第1帧,从库中拖出“影片1”影片剪辑元件到舞台,规格不变,将其放置在矩形的中间。上锁。如图17所示:

flash制作水波遮罩效果 - 迎春 -

图17

    C.本环节完成后的时间轴,如图18所示:

flash制作水波遮罩效果 - 迎春 -

图18

    6.编辑制作场景

    返回场景1,添加两个图层,共三个图层。自下而上分别命名为影片2、影片3和as。

    (1)选择影片2图层第一帧,从库中拖出“影片2”影片剪辑元件到舞台,规格为565*420,全居中。如图19所示:

flash制作水波遮罩效果 - 迎春 -

图19

点击该实例,在属性面板填写其实例名称为:b 。上锁。如图20所示:

flash制作水波遮罩效果 - 迎春 -  

图20

    (2)选择影片3图层第一帧,从库中拖出“影片3”影片剪辑元件到舞台,规格为565*420,全居中。如图21所示:

flash制作水波遮罩效果 - 迎春 -

图21

点击该实例,在属性面板设置其Alpha0%flash制作水波遮罩效果 - 迎春 - 。填写其实例名称为:a 。如图22所示:

flash制作水波遮罩效果 - 迎春 -

图22

    (3)选择as图层第一帧,按f9,打开动作面板,在as编辑区输入,如下帧语句:

Stage.scaleMode = "noScale";
var bit = new flash.display.BitmapData(a._width, a._height, true);
var zjx = 1;
var zjy = 2;
var sfx = 10;
var sfy = 20;
this.onEnterFrame = function ()
{
    bit.draw(a);
    var _loc1 = new flash.filters.DisplacementMapFilter(bit, new flash.geom.Point(), zjx, zjy, sfx, sfy, "color", 0, 0);
    b.filters = [_loc1];

};

锁定该图层。

    7.本作业完成后时间轴显示如图23所示:

flash制作水波遮罩效果 - 迎春 -

图23

  8.测试存盘

    *说明:

    1.为节省空间本教程演示作品只用了两张图片切换,多张图片的切换,其原理方法一样,动动脑筋。

    2.“影片2”影片剪辑元件遮罩图层中的实例所占帧数,在每张图片的切换中,必须和“影片1”影片剪辑元件中所用帧数相同。

最后效果:

   

 东方标致美女欣赏- 迎春-

点击进入动画制作天地点击进入电脑技术学堂  

图片、文章/编辑、整理:迎春

加强交流 增进友谊

http://ycyx88888.blog.163.com/

文章导读
http://ycyx88888.blog.163.com/
经典收藏 F-S制作 博客知识 P-S制作 U-5制作
在线制作 P-S滤镜 常用工具 兴趣爱好 人体世界
制作软件 电脑知识 精品素材 醒世读物 小品相声
超级题库 视频录制 音乐录制 国学故事 创意网站
透明F-S 姓氏起源 有声读物 靓丽欣赏 动画实战
装饰素材 阅读欣赏 幽默笑话 兴趣客栈 迷人音乐
中科教程 pCS5全集 U-5教程 会声会影 成语故事
古代诗词 有待添加 有待添加 有待添加 有待添加
http://ycyx88888.blog.163.com/


  评论这张
 
阅读(596)| 评论(15)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017