您好!欢迎您光临图片双向收缩切换的制作原理与方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>实例教程>>>图片双向收缩切换的制作原理与方法
图片双向收缩切换的制作原理与方法
发表日期:2012/9/19 9:00:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 3177

 图片双向收缩切换的制作原理与方法

   

    教学目的:通过本节教学了解和掌握多重遮罩制作与应用,元件交换的方法。以此创作出图片切换双重收缩的动画效果。

  教学对象:本教材是针对有一定动画制作基础和对属性面板、工具箱和相关界面有所了解的朋友们编制的,因此省略了一些步骤,还望谅解。

    教学要点:多重遮罩、元件交换。

 

    

    作前准备

    准备两张规格约550*400的图片,经过制图软件(ps、fw)处理后,放到指定的文件夹待用。

    制作步骤

    1.启动FLASH8 软件

    2.确立文档属性

    设置动画尺寸为550*400,背景颜色随意,其它默认,点击确定,进入场景1工作区。如图1所示:



图1

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

    4.编辑制作场景

    返回场景1,添加10个图层,共11个图层。自下而上命名为,如图2所示:

图2

    (1)选择图1图层第一帧,从库中拖出图片1到舞台,规格550*400,全居中。右键将其转换为图形元件,名称为:“图片1”。在第80帧插入帧,上锁。如图3所示:


图3

    (2)选择图2-1图层第41帧插入空白关键帧,从库中拖出图片2到舞台,规格550*400,全居中。右键将其转换为图形元件,名称为:“图片2”。在第80帧插入帧,上锁。如图4所示:


图4

右键第41帧,复制帧,然后,分别在图2-2,图2-3,图2-4,图2-5的第41帧,右键-粘贴帧。关闭以上各图层的眼睛。

    (3)选择遮罩1图层第41帧插入空白关键帧,用矩形工具在舞台拖一个比图片实例高和宽都大的,红色无边线的矩形,将其放置在图片1左侧(和图片拉开一定距离),垂直中齐。如图5所示:


图5

在第80帧插入关键帧,将该矩形平移到覆盖图片1处,其左边和图片1的左边对齐。右键第41帧,创建本区域间的动画补间。上锁。如图6所示:

图6

    (4)选择图2-2图层第41帧,打开本图层的眼睛,改该帧舞台上的图片2规格为550*420,全居中。在第80帧插入帧,上锁。

    (5选择遮罩2层第41帧插入空白关键帧,用矩形工具在舞台拖一个规格为15*550的,红色无边线的矩形,将其放置在红色大矩形的右侧,二者之间无空隙,垂直中齐。将其转换为图形元件,名称为“矩形条”。如图7所示:


图7

在第80帧插入关键帧,将该实例向右平移到大矩形的右侧,无空隙。创建本区域间的动画补间。上锁。如图8所示:

图8

    (6)选择图2-3图层第41帧,打开本图层的眼睛,改该帧舞台上的图片2规格为550*440,全居中。在第80帧插入帧,上锁。

    (7)选择遮罩3图层第41帧插入空白关键帧,从库中拖出“矩形条”图形元件到舞台,将其放置在上一个矩形条的右侧,二者之间无空隙,垂直中齐。如图9所示:


图9

第80帧插入关键帧,将该实例向右平移到上一个矩形条的右侧,无空隙。创建本区域间的动画补间。上锁。如图10所示:

图10

    (8)选择图2-4图层第41帧,打开本图层的眼睛,改该帧舞台上的图片2规格为550*460,全居中。在第80帧插入帧,上锁。

    (9)选择遮罩4图层第41帧插入空白关键帧,从库中拖出“矩形条”图形元件到舞台,将其放置在上一个矩形条的右侧,二者之间无空隙,垂直中齐。如图11所示:


图11

第80帧插入关键帧,将该实例向右平移到上一个矩形条的右侧,无空隙。创建本区域间的动画补间。上锁。如图12所示:


图12

    (10)选择图2-5图层第41帧,打开本图层的眼睛,改该帧舞台上的图片2规格为550*480,全居中。在第80帧插入帧,上锁。

    (11)选择遮罩5图层第41帧插入空白关键帧,从库中拖出“矩形条”图形元件到舞台,将其放置在上一个矩形条的右侧,二者之间无空隙,垂直中齐。如图13所示:



图13

第80帧插入关键帧,将该实例向右平移到上一个矩形条的右侧,无空隙。创建本区域间的动画补间。上锁。如图14所示:


图14

    (12)分别依次将遮罩1-遮罩5,五个图层设置为遮罩层。

    至此,图片2和图片1的切换已完成。下边我们进行图片3和图片2的切换,为节省空间,我这里将图片3换为图片1,也就是图片1和图片2的切换:

    (13)用鼠标将各图层的第41-80帧刮黑,如图15所示:

图15

右键刮黑处-复制帧,再在最上层的第121帧处,用鼠标往下拉,使各图层的第121帧变蓝,如图16所示:


图16

右键蓝色帧-粘贴帧。各图层尾帧结束在第160帧。下边我们更换图片

    (14)首先打开个图1图层的锁,并关闭所有图层的眼睛。打开图1图层的眼睛。在第121帧插入关键帧,点击舞台上的图片1,在属性面板点击“交换”按钮,如图17所示:


图17

打开“交换元件”界面,选择“图片2”图形元件,点击确定。完成了图片2替换图片1的操作。上锁。如图18所示:


图18

    打开图2-1图层的眼睛,点击该图层第121帧上的图片2,在属性面板点击“交换”按钮,打开“交换元件”界面,选择“图片1”图形元件,点击确定。完成了图片1替换图片2的操作。上锁。如图19所示:




图19

同理同种方法,在第160帧上也完成图片1替换图片2的操作。如此,在其它各图片图层的第121帧和第160帧上,完成图片1替换图片2的操作。锁定各个图层。

    5.本作业完成后的时间轴,如图12所示:



图20

    6.测试存盘。

 
    说明:
 
    多个图片的切换,其原理方法有如图片1替换图片2的操作一样,如此循环。
 
最终效果显示:


http://hsb345.16789.net/domName/hsb345/20104110472249786.swf

 

全屏下载

 

祝你成功!

 

进入更多教程

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



qianqian.
(2011/9/9 8:43:00) [60.162.158.]

这教程很好


细雨
(2010/4/10 9:43:00) [218.64.147.]

老师的自编教程真好,我在这学习了很多,由衷的说声谢谢您,您辛苦了。


812379368
(2010/4/2 12:13:00)

谢谢恩师辛苦您了!

 发表评论:共有 3 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

迎客松B站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:翠柏

琼icp备09005167