Flash制作漂亮的翻书动画知识点:遮罩的运用
学习无脚本软翻书教材前请先看看遮罩的知识:
1、遮罩动画的概念(1)什么是遮罩?“遮罩”:顾名思义就是遮挡住下面的对象。在Flash8.0中,“遮罩动画”也确实是通过“遮罩层”来达到有选择地显示位于其下方的“被遮罩层”中的内容的目地,在一个遮罩动画中,“遮罩层”只有一个,“被遮罩层”可以有任意个。(2)遮罩有什么用?
在Flash8.0动画中,“遮罩”主要有2种用途,一个作用是用在整个场景或一个特定区域,使场景外的对象或特定区域外的对象不可见,另一个作用是用来遮罩住某一元件的一部分,从而实现一些特殊的效果。
2、创建遮罩的方法(1)创建遮罩
在Flash8.0中没有一个专门的按钮来创建遮罩层,遮罩层其实是由普通图层转化的。你只要在要某个图层上单击右键,在弹出菜单中把“遮罩”前打个勾,该图层就会生成遮罩层,“层图标”就会从普通层图标变为遮罩层图标,系统会自动把遮罩层下面的一层关联为“被遮罩层”,在缩进的同时图标变为,如果你想关联更多层被遮罩,只要把这些层拖到被遮罩层下面就行了。
(2)构成遮罩和被遮罩层的元素
遮罩层中的图形对象在播放时是看不到的,遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等,但不能使用线条,如果一定要用线条,可以将线条转化为“填充”。被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层,可以使用按钮,影片剪辑,图形,位图,文字,线条。下面开始本教程
打开FLASH文档,名称:《软翻书》文档属性大小:600*450其它默认。素材准备:
1、准备20张图片,用PS处理成:200*150像素。
2、准备1张背景图片,PS处理成:600*450像素。
3、以及兰花、荷花的动画。
4、字体:毛泽东字体、文鼎CS大隶书繁、方正小篆体。新建位图文件夹,将位图全部导入。第一部分:制作“页”影片剪辑元件
1、制作“封面”影片剪辑元件,插入新建元件影片剪辑名为“封面”。 1-1、在图层1上新建六个图层,自下至上分别是:背景、花边、边线、字框、字、动画(图片也行)、遮罩7个图层。
如图:
图层1(背景)第1帧用矩形工具,无笔触,画一矩形:240*300,颜色:#333300,全居中。 1-3、新建花边图案影片剪辑,图层第1帧画花边图案,(舞台放大)大小设为10.8*18.5,颜色:#666600,复制多枚排列成236*292如图
图层1(背景)第1帧用矩形工具,无笔触,画一矩形:240*300,颜色:#333300,全居中。 1-3、新建花边图案影片剪辑,图层第1帧画花边图案,(舞台放大)大小设为10.8*18.5,颜色:#666600,复制多枚排列成236*292如图
1-6、字框图层第1帧制作字框大小:205*45,X轴-102,Y轴-106.2。如图
1-7、字图层第1帧用文本工具写上鸟语花香(也可写其它)字体:方正小篆体,大小35。颜色#336600。
1-8、图片图层(动画)第1帧将库中准备好的荷花动画拖入,放在右下角的位置,调整后大小。
1-9、遮罩图层第1帧用矩形工具,笔触禁止,颜色随意,画一矩形宽190高162的遮罩片,放在右下角,遮罩片的右靠近右边线,遮罩片下边靠近下边线。右键遮罩层设为遮罩。这样
“封面”影片元剪辑件就完成了,最后效果如图:
2、制作“首页”影片剪辑元件,将库中“封面”直接复制改名为“首页”。
2-1、双击进入“首页”编辑场面,自下至上分别是:背景、花边、边线、
字、4个图层。删除字框、图片、遮罩图层。
2-2、打开字图层,用“毛体”书写两排诗词。
2-3、打开边线图层,选中右边线和下边线将颜色替换成#999900,选中左边线和上边线将颜色替换成#FFFFFF。将库中兰花图拖入场景,调整后大小、位置。点中第1帧,修改—组合,点图片转换为图片元件名为图片,将边线图层改为图片,最后效果如图:
3、制作“封底”影片剪辑元件,将库中“首页”直接复制改名为“封底”。
3-1、双击进入“封底”编辑场面,自下至上分别是:背景、花边、图片、字、4个图层。在图片层上增加签名图层,在字图层上增加遮片层、遮罩层。最后如下背景、花边、图片、签名、字、遮片、遮罩7个图层。
3-2、签名图层第一帧用文本工具写上自己的名字和制作日期。字体颜色#999900,字体大小20。
3-3、字图层第1帧用文本工具写上谢谢观赏(也可写其它),字体颜色#999900,字体大小35,点第一帧复制帧,点遮罩图层(第7层)第一帧粘贴帧。
3-4、遮片图层第1帧用矩形工具画一矩形,宽50高60,笔触无,线形填充左色标:#FFFFFF,Alpha值为0,中色标:#FFFFFF, Alpha值为100,右色标:#FFFFFF,Alpha值为0,打开变形面板旋转为25度。20帧插入关键帧,第一帧矩形放在字的左边,20帧放在字的右边,回到 1帧创建形状补间,所有图层延长到20帧。在遮罩图层右键设为遮罩。最后效果如图:
4、制作“页1”影片剪辑元件,将库中“首页”直接复制改名为“页1”。
4-1、双击进入“页1”编辑场面,自下至上分别是:背景、花边、边线、字、4个图层。 4-2、边线图层点第一帧修改—分离,分离两次,点场景释放鼠标,删除兰花图片,将库中准备好的位图拖入全居中。
4-3、字图层点第1帧,选中文字删除,最后用文本工具在边线下部中间位置写上“1”的页码,颜色#999900。如图:
接下来制作“页2”“页3”依此类推一直至“页20”,怎样所有的第一部分制作“页”影片剪辑元件就完成了,喜欢的朋友们可以先搜集素材,先把“页”影片剪辑元件完成,待我
继续写第二部分“翻书”影片剪辑元件。
第二部分:制作“翻书”影片剪辑元件
在制作“翻书”影片剪辑元件前先在库面板建“页”文件夹,将所有“页”影片剪辑元件放入文件夹,以便以后做动画时容易交换元件。
1、制作“翻封面”影片剪辑元件。
1-1、插入影片剪辑元件名为“翻封面”新建8个图层,自下而上分别是:页1、光1、封面、高光2、遮罩1、首页、遮罩2、高光3、高光3遮罩共9个图。如图:
图8
1-2、页1图层第1帧将库中“页1”影片剪辑元件拖入,左对齐、垂直中齐,x值:0,Y 值:-150,延长至55帧,上锁。
1-3、光1图层第1帧用矩形工具画一矩形,无笔触,填充为线性。打开颜色面板,中间添加一个色码:从左至右的色码依次为:#010101,Alpha值为0,#F9F9F9,Alpha值为25,#000000,Alpha值为0,矩形大小设为宽 240高300,X值为0,Y值为-150。设置如图:
1-4、封面图层第1帧将“封面”页影片剪辑元件放入,X值为0,Y值为-150。第28帧延长帧,第29帧插入空白关键帧,图层上锁。
1-5、高光2图层点高光1图片右键复制,点高光2后点场景右键粘贴到当前位置。第28帧延长帧,第29帧插入空白关键帧,图层上锁。
1-6、遮罩1图层第1帧用矩形工具,笔触无,填充色随意,画一矩形遮片宽240高300,X值为0,Y值为-150,右下角用线条划一斜线去掉小角。如图:
第10帧、第20帧、第28帧插入关键帧,在第10、20帧处用线条工具划一斜线后去掉右下部分及线条如图:
第28帧处用变形工具把遮片调成宽166.5高392.5,X值为0,Y值为-242.5,再用线条工具画二条斜线。去掉下部分和左上部分,选中遮罩1图层创建形状补间,第55帧延长帧,删除第28帧后的形状补间。如图:
1-7、首页图层第一帧将库中“首页”影片剪辑元件拖入,X值为225,Y值为135,打开变形工具把“首页”影片剪辑元件的注册点移到页的右下角,“首页”影片剪辑元件的左下角与“封面”影片剪辑元件的右下角交叉摆放,第10、20、40帧插入关键帧,第10帧移动“首页”影片剪辑元件右下角与“封面”影片剪辑元件的左下角对齐,X值为0,Y值为-90。第20帧移动“首页”影片剪辑元件左上角与“封面”影片剪辑元件的右上角对齐,X值为-52.1,Y值为-150,也可打开变形面板,约束打勾,旋转设为77.4。第40帧“首页”影片剪辑元件垂直中齐、右对齐,X值为 -240,Y值为-150,第55帧延长帧。如图:
图14
1-8、遮罩2图层打开标尺,在“页”的底部和“页”的左面各拖一标尺线,第1帧用矩形工具,笔触无,画一矩形,笔触无,填充颜色随意,画一正方矩形大小16*16,X值为224,Y值为134。放在封面页的右下角用线条工具斜角对斜角画一直线删除下半部并删除直线。也可用黑剪头选择工具放在矩形右下角,待鼠标出现小三角符号时向上推。如图:左图。
第10帧插入空白关键帧,用矩形工具,笔触无,画一矩形,笔触无,填充颜色随意,画一正方矩形大小240*240,X值为0,Y值为-90。用线条工具斜角对斜角画一直线删除下半部并删除直线。也可用黑剪头选择工具放在矩形右下角,待鼠标出现小三角符号时向上推。如图:右图。
第21帧插入关键帧,用黑剪头选择工具放在矩形上,待鼠标出现小三角符号时,调整矩形,如图:
第28帧插入关键帧,用黑剪头选择工具放在矩形上,待鼠标出现小三角符号时,调整矩形。第33帧插入关键帧,用黑剪头选择工具放在矩形上,待鼠标出现小三角符号时,调整矩形。第40帧插入空白关键帧,用矩形工具,笔触无,画一矩形,笔触无,填充颜色随意,画一正方矩形大小258*462,把矩形右下角移到“页1”页上左下角压在竖标尺与横标尺之间,用黑剪头选择工具放在矩形的右上角上,待鼠标出现小三角符号时,调整矩形。第55帧延长帧。如图:
1-10、高光3遮罩图层,做法与首页图层基本一样,第一帧用矩形工具,笔触无,画一矩形宽240,高300,X值为 225,Y值为135,打开变形工具把矩形的注册点移到右下角,矩形的左下角与“封面”影片剪辑元件的右下角交叉摆放,第10、20、40帧插入关键帧,第10帧移动矩形右下角与“页1”影片剪辑元件的左下角对齐,X值为0,Y值为-90。第20帧移动矩形左上角与“页1”影片剪辑元件的右上角对齐,X值为-52.1,Y值为-150,也可打开变形面板,约束打勾,旋转设为77.4。第40帧矩形垂直中齐、右对齐,X值为-240,Y 值为-150,第55 帧延长帧。参照例图在图层上设好遮罩。
2、制作“翻页3”影片剪辑元件,库中直接复制“翻封面”改名为“翻页3”,双击进入编辑场景。
2-1、增加和调整图层,从第1层开始,页1图层改为页3图层,在页3图层上增加首页图层,在光1图层上增加光1左、封面图层改为页1,首页图层改为页 2,自下而上分别是:页3、首页、光1、光1左、页1、高光2、遮罩1、页2、遮罩2、高光3、高光3遮罩共11个图。如图:
2-2、页3图层上(直接复制过来时是页1)增加首页图层,打开页3图层的锁,点第1帧后点场景中的图元件,点右键交换元件换成“页3”影片剪辑元件。点首页图层第1帧从库中拖入“首页”影片剪辑元件,设X值:-240,Y值:-150。第50帧延长帧。如图:
2-3、光1图层上增加光1左图层,点光1图层第一帧复制帧粘帖到光1左图层第1帧,修改—变形—水平翻转,最后移动到位置至X值:-240,Y值:-150。
2-4、页1图层(复制时是封面)点第1帧、点场景图元件,点右键交换元件换成“页1“,延长帧至28帧,29帧插入空白关键帧。
2-5、页2图层(复制时是首页)点第1帧、10帧、20帧、40帧,点场景图元件,点右键交换元件换成“页2“,延长帧至55。这样“翻页3”影片剪辑元件就完成了。
3、制作其它翻页影片剪辑元件,库中直接复制“翻页3”影片剪辑元件改名为“翻页5”,双击进入编辑,页3图层改为页5同时交换元件,首页图层改为页2同时交换元件,页1图层改为页3同时交换元件,页2图层改为页4图层同时交换元件。最后库中直接复制“翻页5”改为“翻页7”修改方法同上,依此类推制作“翻页9”、“翻页11”、“翻页13”、“翻页15”、“翻页
17”“翻页19”。只要掌握每图层交换元件时页数间隔1位,如页1交换页3、页2交换页4。 4、制作“翻封底”影片剪辑元件,从库中直接复制“翻页19”,双击进入编辑,按上面方法交换元件,所有图层延长到110帧。在最上面的图层(高光3遮罩层)的110帧上插入空白关键帧,点右键进入动作面板添加stop();代码。所有的“翻页”影片剪辑就完成了。
第三部分:场景组合
在库中新建翻页文件夹把所有“翻页”影片剪辑元件放了文件夹中。
1、进入场景编辑,新建5个图层自下而上分别是:背景、标题、翻书效果、音乐、按钮、AS共6个图层。如图:
图25
2、背景图层。插入新建元件名:背景,类型:影片剪辑,背景影片剪辑元件图层1第1帧用矩形工具,笔触无,填充放射状,颜色:左色标:#0033cc,右色标:#000000,在场景中画一矩形大小设为600*450,全居中,第20、40、60、80帧插入关键,第20帧改变填充颜色左色标:#FFFF99,右色标:#000000,第40帧改变填充颜色左色标:#CC0000,右色标:#000000,第60帧改变填充颜色左色标:#CCFFFF,右色标:#000000,第80帧改变填充颜色左色标:#0033CC,右色标:#000000(当然也可以根据个人爱好)。
3、选中图层插入形状补间。新建图层2把库中准备好的图片拖入大小设为600*450,全居中,第80帧插入延长帧。回到场景,背景图层第1帧将背景影片剪辑元件拖入,全居中,延长至660帧,上锁。
4、标题图层第1帧用文本工具写上自己喜欢的标题和签名,延长至660帧,上锁。
5、翻书效果图层第1帧将库中“翻封面”影片剪辑元件拖入场景把放至合适位置,(参考位置X:318,Y:68)实例名称写上fs,第55帧插上关键帧,右键点场景中元件交换元件换成“翻页3”,第110帧插入关键帧交换元件“翻页5”,依此类推在第165、220、275、330、385、440、 495、550插入关键帧,交换元件分别为“翻页7”“翻页9”“翻页11”“翻页13”“翻页15”“翻页17”“翻页19”“翻封底”。
6、音乐图层第1帧选中导入的音乐,同步:数据流、重复1次。延长帧至660帧,上锁。
7、按钮图层第1帧,从库中或自己新建按钮,把按钮放在合适位置,延长至660帧,点中按钮打开动作面板,输入语句:on (press) {
play ();
_root.fs.play(); }
8、AS图层第1帧打开动作面板,输入语句: stop (); _root.fs.stop();
上锁,保存。
《Flash基本操作及简单动画制作》实验教学指导书 一、实验目的 1. 了解Flash的基本界面组成及特点。 2. 掌握Flash的基本操作。 3. 应用Flash设计制作静态二维画面。 4. 应用Flash设计动画。 二、实验内容 1.制作情人节贺卡静态画面。 2.制作声情并茂的生日贺卡。 三、实验仪器、设备 多媒体计算机,Flash MX 2004。 四、实验原理 任务驱动法,Flash的基本操作,应用Flash设计制作主题明确的静态画面、声情并茂的生日贺卡。 五、实验步骤 声情并茂的生日贺卡制作 最终效果如下图所示:
第一部分:制作着火的火柴 1.打开flash MX 2004,界面如下: 2.在空白处点击右键,选择设置文档属性,设置如下: 3.设置背景颜色为非白色。 4.单击窗口-库命令打开库面板。单击文件-导入-库,把需要的图片background,cake,hua等导入库中。如下图所示:
5.单击文件菜单,将文件保存为“祝你生日快乐.fla”。 6.单击插入菜单,选择新建元件,创建名称为“花按钮”,行为为:按纽
7.从库中把花拖入舞台,在图片上单击右键,选择:转换为元件,在弹出的窗口中选择:图形,将其命名为:花。 8.使用任意变形工具,将其旋转一定角度,分别在指针经过和按下处插入关键帧。 9.点击指针经过帧使用任意变形工具将元件稍稍变大;点击按下帧,将元件稍稍变小。 10.在库中新建一个影片剪辑,命名为“火焰”。 11.使用钢笔工具,在舞台中绘制火焰的轮廓。打开混色器,将颜色设置为“放射状”,
在颜色条上新建三个颜色条块,将第一第二个颜色滑块设置为白色,第三和第四个颜色滑块设置为红:241,绿:251,蓝:27。第五个颜色滑块设置为红:254,绿:148,蓝:137。 设置 12.使用油漆桶工具在火焰轮廓中设置颜色,使用填充变形工具将渐变调整为火焰形状。然后使用选择工具将边线删除。 13.分别在第10帧和第20帧处插入关键帧。点击第10帧,使用任意变形工具调整好火焰的形状,使其看起来像被风吹过得效果。分别在第1帧和第10帧设置形状补间动画。
第7章 Flash 8基础与实例(2)—— 常见动画的制作 知识点: 1、逐帧动画的制作。 2、形状补间动画的制作。 3、动作补间动画的制作。 4、遮罩动画的制作。 5、引导路径动画的制作。 学时分配:2学时 教学内容: 1、逐帧动画的制作。 2、形状补间动画的制作。 3、动作补间动画的制作。 4、遮罩动画的制作。 5、引导路径动画的制作。 教学重点: 1、形状补间动画的制作。 2、动作补间动画的制作。 3、遮罩动画的制作。 4、引导路径动画的制作。 教学难点: 形状补间动画与动作补间动画的区别。 教学方法与手段:讲授法,多媒体展示 教学过程: (一)创设意境,导入新课(设疑法、提问法) 导入: 教师展示几个Flash实例,然后引导学生一个一个亲自动手制作。引入新课程: (二)新课教学(讲解法、提问法、示范法、实验法)
本次课开始学习用Flash制作动画效果,在Flash中共有5种动画形式:逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导路径动画。 逐帧动画的制作 逐帧动画是一种常见的动画手法,它的原理是在“连续的关键帧”中分解动画动作,也就是每一帧中的内容不同,连续播放而成的一种动画。 优点:与电影播放模式相似,适合于表演很细腻的动画,如3D动画、人物或动物急剧转身等效果。 缺点:每一帧的序列内容都不一样,增加制作负担,文件存储容量过大。 一、逐帧动画的概念和在时间帧上的表现形式 在时间帧上逐帧绘制帧内容称为逐帧动画,由于是一帧一帧的画,所以逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容。 逐帧动画在时间帧上表现为连续出现的关键帧,如图7-3-1所示。 图 7-3-1 逐帧动画 二、创建逐帧动画的几种方法 1.用导入的静态图片建立逐帧动画 用jpg、png等格式的静态图片连续导入Flash中,就会建立一段逐帧动画。 2.绘制矢量逐帧动画 用鼠标或压感笔在场景中一帧一帧地画出每一帧内容。 3. 文字逐帧动画 用文字作帧中的元件,实现文字跳跃、旋转等特效。 4. 导入序列图像 可以导入gif序列图像、swf动画文件或者利用第三方软件(如swish、swift 3D 等)产生的动画序列。 三、绘图纸功能 1.绘图纸的功能
第7章Flash 8基础与实例(2)—— 常见动画的制作 知识点: 1、逐帧动画的制作。 2、形状补间动画的制作。 3、动作补间动画的制作。 4、遮罩动画的制作。 5、引导路径动画的制作。 学时分配:2学时 教学内容: 1、逐帧动画的制作。 2、形状补间动画的制作。 3、动作补间动画的制作。 4、遮罩动画的制作。 5、引导路径动画的制作。 教学重点: 1、形状补间动画的制作。 2、动作补间动画的制作。 3、遮罩动画的制作。 4、引导路径动画的制作。 教学难点: 形状补间动画与动作补间动画的区别。 教学方法与手段:讲授法,多媒体展示 教学过程: (一)创设意境,导入新课(设疑法、提问法) 导入: 教师展示几个Flash实例,然后引导学生一个一个亲自动手制作。引入新课程: (二)新课教学(讲解法、提问法、示范法、实验法)
本次课开始学习用Flash制作动画效果,在Flash中共有5种动画形式:逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导路径动画。 逐帧动画的制作 逐帧动画是一种常见的动画手法,它的原理是在“连续的关键帧”中分解动画动作,也就是每一帧中的内容不同,连续播放而成的一种动画。 优点:与电影播放模式相似,适合于表演很细腻的动画,如3D动画、人物或动物急剧转身等效果。 缺点:每一帧的序列内容都不一样,增加制作负担,文件存储容量过大。 一、逐帧动画的概念和在时间帧上的表现形式 在时间帧上逐帧绘制帧内容称为逐帧动画,由于是一帧一帧的画,所以逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容。 逐帧动画在时间帧上表现为连续出现的关键帧,如图7-3-1所示。 图 7-3-1 逐帧动画 二、创建逐帧动画的几种方法 1.用导入的静态图片建立逐帧动画 用jpg、png等格式的静态图片连续导入Flash中,就会建立一段逐帧动画。 2.绘制矢量逐帧动画 用鼠标或压感笔在场景中一帧一帧地画出每一帧内容。 3. 文字逐帧动画 用文字作帧中的元件,实现文字跳跃、旋转等特效。 4. 导入序列图像 可以导入gif序列图像、swf动画文件或者利用第三方软件(如swish、swift 3D等)产生的动画序列。 三、绘图纸功能 1.绘图纸的功能
第7 章Flash 8 基础与实例( 2 ) 常见动画的制作 知识点: 1、逐帧动画的制作。 形状补间动画的制作。 2、 动作补间动画的制作。 3、 遮罩动画的制作。 4、 引导路径动画的制作。 5、 学时分配: 2 学时 教学内容: 逐帧动画的制作。 1、 形状补间动画的制作。 2、 动作补间动画的制作。 3、 遮罩动画的制作。 4、 引导路径动画的制作。 5、 教学重点: 形状补间动画的制作。 1、 动作补间动画的制作。 2、 遮罩动画的制作。 3、 引导路径动画的制作。 4、 教学难点: 形状补间动画与动作补间动画的区别。教学方法与手段:讲授法,多媒体展示教学过程: (一)创设意境,导入新课(设疑法、提问法) 导入: 教师展示几个Flash 实例,然后引导学生一个一个亲自动手制作。引入新课程: (二)新课教学(讲解法、提问法、示范法、实验法) 本次课开始学习用Flash制作动画效果,在Flash中共有5种动画形式:逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导路径动画。
逐帧动画的制作 逐帧动画是一种常见的动画手法,它的原理是在“连续的关键帧”中分解动画动作,也 就是每一帧中的内容不同,连续播放而成的一种动画。 优点:与电影播放模式相似,适合于表演很细腻的动画,如3D动画、人物或动物急剧 转身等效果。 缺点:每一帧的序列内容都不一样,增加制作负担,文件存储容量过大。 一、逐帧动画的概念和在时间帧上的表现形式 在时间帧上逐帧绘制帧内容称为逐帧动画,由于是一帧一帧的画,所以逐帧动画具有非 常大的灵活性,几乎可以表现任何想表现的内容。 逐帧动画在时间帧上表现为连续出现的关键帧,如图7-3-1所示。 图7-3-1 逐帧动画 二、创建逐帧动画的几种方法 1.用导入的静态图片建立逐帧动画 用jpg、png等格式的静态图片连续导入Flash中,就会建立一段逐帧动画。 2.绘制矢量逐帧动画 用鼠标或压感笔在场景中一帧一帧地画出每一帧内容。 3.文字逐帧动画 用文字作帧中的元件,实现文字跳跃、旋转等特效。 4.导入序列图像 可以导入gif序列图像、swf动画文件或者利用第三方软件(如swish、swift 3D 等)产生的动画序列。三、绘图纸功能1.绘图纸的功能 绘图纸是一个帮助定位和编辑动画的辅助功能,这个功能对制作逐帧动画特别有用。通常情况下,Flash在舞台中一次只能显示动画序列的单个帧。使用绘图纸功能后,你就可以在舞台中一次查看两个或多个帧了。 如下图所示是使用绘图纸功能后的场景,可以看出,当前帧中内容用全彩色显示,其它帧内容以半透明显示,它使我们看起来好像所有帧内容是画在一张半透明的绘图纸上,这些内容相互层叠在一起。当然,这时你只能编辑当前帧的内容。
《Flash动画制作》授课计划
2.Flash的历史与发展 3.Flash的特点 1.2 Flash应用领域 1.3 Flash动画原理 1.动画原理 2.Flash动画制作原理 1.4 Flash工作环境 1、舞台就是工作区,最主要的可编辑区域。在这里可以直接绘图,或者导入外部图形文 件进行安排编辑,再把各个独立的帧合成在一起,以生成电影作品。 2、时间轴窗口用它可以调整电影的播放速度,并把不同的图形作品放在不同图层的相应帧 里,以安排电影内容播放的顺序。 3、绘图工具栏放置了可供图形和文本编辑的各种工具,用这些工具可以绘图,选取,喷涂, 修改以及编排文字,还有些工具可以改变查看工作区的方式。在选择了某一工具时,其所对应的 修改器(Modifier)也会在工具条下面的位置出现,修改器的作用是改变相应工具对图形处理的效 果。 4、标准工具栏列出了大部分最常用的文件操作,打印,剪贴板,撤消和重做,修改器以及 控制舞台放大比例的图标和选项,便于进行更为快捷的操作。 5、图库窗口用以存放可以重复使用的称为符号的元素。符号的类型包括有图片(Graphics), 按钮(Button)和电影片断(Movie Clip)。其调用的快捷键为Ctrl-L。 6、控制器面板控制电影的播放操作的工具集合,一般不大常用,处于隐藏状态。 例1:使用工具制作一个“笑脸”或“哭脸” 思考:如何让“哭脸”变成“笑脸”? 引入层的概念,将“嘴”放在新建的图层上 引入简单动画制作步骤: a、绘制动作的开始状态与结束状态,即绘制两个关键帧,并注意两个关键帧在时间线上的 位置。 b、选择所有帧,创建动画。 例2:小球的直线运动。 步骤1:在舞台上画出小球。 步骤2:在第20 帧上插入关键帧。 步骤3:移动小球,使其开始位置与结束位置不同。 步骤4:选择所有帧,创建形状渐变动画。 例3:小球沿规定的轨迹运行。 步骤5:在前一个动画的基础上添加引导层 讲述层的概述时, 可结合前期学习 过的Photoshop 中层的概念,这样 学生头脑中就有 了印象。 请学生注意动画 制作的过程,并能 自己制作上述两 个动画。 注意flash的两种 不同格式的文件, 源文件和播放文 件分别的打开方 式
《F L A S H动画制作》课程教学大纲英文名称:Flash animation 学分/总学时:2/36(其中课堂: 32学时;课内实验: 0学时;课外实践: 4学时) 先修课程:《计算机基础》、《Photoshop》等 适用对象:展示设计专业、绘画专业 一、课程性质与目的 《Flash动画制作》是展示设计专业与绘画专业网页设计与制作类课程的专业选修课程之一,它以Flash 8为操作对象,介绍了制作Flash平面动画相关的技术和方法,将主要学习矢量绘图、基本动画和基本编程等动画技术。它的特点是涉及知识面广泛,对操作技能和实践性的要求较高,因此要求学生在全面掌握各个知识点的基础上,要特别勤于实际操作和不断积累经验。 本课程的目的是培养具有一定实践经验的网页设计人员。通过本课程的教学,使学生了解Flash的设计环境、制作流程,能独立绘制简单、复杂图形,学会导入图形、音频、视频等文件,制作逐帧动画、补间动画,制作引导层动画、遮罩层动画,并了解简单编程等。 二、教学内容及要求 第一章熟悉Flash8的设计环境( 2学时) 【基本内容】 1.熟悉Flash8的设计环境 动画制作流程 【基本要求】 1.熟悉Flash8的设计环境及流程 2.了解Flash8制作逐帧动画的方法 【重点及难点】 重点:Flash的一般制作流程 难点:Flash的操作界面 【教学活动与教学方式】 第1讲Flash 8动画制作基础 熟悉Flash 8的设计环境 知识点讲解 范例解析——Flash 8用户界面介绍 课堂练习——Flash 8用户基本操作 Flash 8动画制作流程 知识点讲解 范例解析——制作“过光文字” 课堂练习——制作“数字倒计时”
第一周FLASH的基本知识 教学目标: 1、熟悉FLASH的界面。 2、掌握几个基本工具的使用:选取工具、变形工具、填充工具、线条工具、椭圆工具、矩形工具、颜料筒工具、墨水瓶工具。 3、掌握几个基本术语:图层、元件 4、记住几个快捷键 5、完成四幅绘制图案 教学重点:应用工具画图 教学难点:复杂遮照的创建。 教学过程: 一、界面环境介绍 二、工具箱的介绍 工具箱提供了用于图形绘制和图形编辑的各种工具。工具箱内从上到下分为4个栏:“工具”栏、“查看”栏、“颜色”栏和“选项”栏,单击某个工具的按钮,即可激活相应的操作功能,以后把这一操作叫作使用某个工具。 (1)“工具”栏:工具箱之“工具”栏内的工具用来绘制图形、输入文字和编辑图形。 (2)“查看”栏:工具箱之“查看”栏内的工具是用来调整舞台编辑画面的观察位置和显示比例的。其中两个工具按钮的名称与作用如表1-1-3所示。 (3)“颜色”栏:工具箱之“颜色”栏的工具是用来确定绘制图形的线条和填充的颜色。其中各工具按钮的名称与作用如下。 (笔触颜色)按钮:用于给线着色,也叫作描绘颜色。 (填充色)按钮:用于给填充着色。 (从左到右分别是:黑白、没有颜色和交换颜色)按钮:单击“黑白”按钮,可使笔触颜色和填充色恢复到默认状态(笔触颜色为黑色,填充色为白色)。在选择了椭圆或矩形工具后,“没有颜色”按钮才有效,变为,单击它可以在没有颜色和有颜色之间切换。单击“交换颜色”按钮,可以使笔触颜色与填充色互换。(4)“选项”栏:工具箱之“选项”栏中放置了用于对当前激活的工具进行设置的一些属性和功能按钮等选项。这些选项是随着用户选用工具的改变而变化的,大多数工具都有自己相应的属性设置。在绘图、输入文字或编辑对象时,通常应当在选中绘图或编辑工具后,再对其属性和功能进行设置,才能顺利达到预期的效果。 三、动手用一下工具 1、使用工具制作一个“笑脸”或“哭脸” 2、渐变工具的使用:几个关键概念 颜色调板 填充变形工具的使用 3、用椭圆画个画环 操作步骤: 1、用填充色画圆,并设置笔触的粗细。 2、设置边线的填充色为“七彩色”。 3、将该线形圆环转换成填充色:修改--形状--将线条为填充。
第7章Flash 8基础及实例(2)—— 常见动画的制作 知识点: 1、逐帧动画的制作。 2、形状补间动画的制作。 3、动作补间动画的制作。 4、遮罩动画的制作。 5、引导路径动画的制作。 学时分配:2学时 教学内容: 1、逐帧动画的制作。 2、形状补间动画的制作。 3、动作补间动画的制作。 4、遮罩动画的制作。 5、引导路径动画的制作。 教学重点: 1、形状补间动画的制作。 2、动作补间动画的制作。 3、遮罩动画的制作。 4、引导路径动画的制作。 教学难点: 形状补间动画及动作补间动画的区别。
教学方法及手段:讲授法,多媒体展示 教学过程: (一)创设意境,导入新课(设疑法、提问法) 导入: 教师展示几个Flash实例,然后引导学生一个一个亲自动手制作。 引入新课程: (二)新课教学(讲解法、提问法、示范法、实验法) 本次课开始学习用Flash制作动画效果,在Flash中共有5种动画形式:逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导路径动画。 逐帧动画的制作 逐帧动画是一种常见的动画手法,它的原理是在“连续的关键帧”中分解动画动作,也就是每一帧中的内容不同,连续播放而成的一种动画。 优点:及电影播放模式相似,适合于表演很细腻的动画,如3D 动画、人物或动物急剧转身等效果。 缺点:每一帧的序列内容都不一样,增加制作负担,文件存储容量过大。 一、逐帧动画的概念和在时间帧上的表现形式
在时间帧上逐帧绘制帧内容称为逐帧动画,由于是一帧一帧的画,所以逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容。 逐帧动画在时间帧上表现为连续出现的关键帧,如图7-3-1所示。 图 7-3-1 逐帧动画 二、创建逐帧动画的几种方法 1.用导入的静态图片建立逐帧动画 用jpg、png等格式的静态图片连续导入Flash中,就会建立一段逐帧动画。 2.绘制矢量逐帧动画 用鼠标或压感笔在场景中一帧一帧地画出每一帧内容。 3. 文字逐帧动画 用文字作帧中的元件,实现文字跳跃、旋转等特效。 4. 导入序列图像 可以导入gif序列图像、swf动画文件或者利用第三方软件(如swish、swift 3D等)产生的动画序列。 三、绘图纸功能 1.绘图纸的功能
《Flash基本操作及简单动画制作》实验教学指 导书 一、实验目的 1. 了解Flash的基本界面组成及特点。 2. 掌握Flash的基本操作。 3. 掌握Flash四类基本动画。 4. 学会制作简易Flash课件。 二、实验内容 1. 制作简易Flash课件。 2. 制作简易电子相册。 三、实验仪器、设备 多媒体计算机,Flash CS3。 四、实验原理 任务驱动法,Flash的基本操作,应用Flash设计制作主题明确的动态贺卡、简单的Flash课件。 五、实验步骤 (一)制作简易Flash课件 1.新建一个flash(ActionScript 2.0) 文档,并设置文档大小为800*600。 2. 选择“文件|导入|导入到库”,将“课件背景.jpg”导入到当前库。
3. 创建课件背景:从库中拖动“课件背景 .jpg”到舞台,使其 与舞台边界对齐。选中图层1,单击鼠标右键,在弹出的快捷菜单中选择“属性”,通过图层属性对话框,修改图层1名称为“背景”。单击背景图层,在60帧处按F5,插入普通帧,锁定背景图层。如图1所示。 4.制作按钮元件:选择“插入|新建元件”,新建“第一章”按钮元件,并进入按钮元件编辑窗口。 1)单击“弹起”帧,使用文本工具创建文本“第一章”,并调整文本的大小及颜色。 2) 选择“弹起”帧,单击鼠标右键,在弹出的快捷菜单中选择“复制帧”,再分别在“指针经过”、“按下”帧上粘贴。将“指针经过”、“按下”两帧对应的文本修改成不同的颜色。 3)单击“点击”帧,按F7插入空白关键帧。选择工具箱中的“矩形工具”,在舞台中央绘制一矩形,大小刚好覆盖文本框即可。最终“第一章”按钮元件制作效果如图2所示。 图1 创建课件背景图层图2 制作按钮元件
Flash基本操作及简单动画制作 第一部分实验指导书 《Flash基本操作及简单动画制作》实验教学指导书一、实验目的 1. 了解Flash的基本界面组成及特点。 2. 掌握Flash的基本操作。 3. 应用Flash设计制作静态二维画面。 4. 应用Flash设计动画。 二、实验内容 1.制作情人节贺卡静态画面。 2.制作声情并茂的生日贺卡。 三、实验仪器、设备 多媒体计算机,Flash MX 2004。 四、实验原理 任务驱动法,Flash的基本操作,应用Flash设计制作主题明确的静态画面、声情并茂的生日贺卡。 五、实验步骤 声情并茂的生日贺卡制作 最终效果如下图所示:
- 1 - 教育传播技术学院教育技术专业 第一部分实验指导书第一部分:制作着火的火柴 1(打开flash MX 2004,界面如下: 2(在空白处点击右键,选择设置文档属性,设置如下:
3(设置背景颜色为非白色。 4(单击窗口-库命令打开库面板。单击文件-导入-库,把需要的图片background,cake, hua等导入库中。如下图所示: - 2 - 教育传播技术学院教育技术专业 第一部分实验指导书 5(单击文件菜单,将文件保存为“祝你生日快乐.fla”。
6(单击插入菜单,选择新建元件,创建名称为“花按钮”,行为为:按纽 - 3 - 教育传播技术学院教育技术专业 第一部分实验指导书 7(从库中把花拖入舞台,在图片上单击右键,选择:转换为元件,在弹出的窗口中选 择:图形,将其命名为:花。 8(使用任意变形工具,将其旋转一定角度,分别在指针经过和按下处插入关键帧。
Flash四种动画的基本步骤 Flash 动画包括逐帧动画、动作补间动画、形状补间动画、遮罩动画、引导线动画等。(一)逐帧动画 逐帧动画是一种常见的动画形式,其原理是在“连续的关键帧”中分解动画动作,即在时间轴的每个关键帧上逐帧绘制不同的内容,使其连续播放而成动画。 逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,很适合于表演细腻的动画。但因每个关键帧上的内容不一样,增加了动画制作负担,且使最终输出的文件体积很大。 实例:打字效果 (1)新建一个 Flash 文件,展开 Flash 窗口下端的文档属性面板或在舞台上单击右键,在右键菜单中选择“文档属性”,设置舞台的宽 500 像素、高 200 像素,背景色为黑色。(2)选中第一帧,选取文本工具,在属性面板上设置字体为“楷体” 、字号“ 72 ”、颜色“白色”、粗体,键入“教育技术学”六个字;并设置它的位置相对于舞台居中对齐(选择“窗口”主菜单的“设计面板”,调出“对齐”面板。在“对齐”面板上先把“相对于舞台”五字下方的按钮单击成白色,再分别单击“水平中齐”和“垂直中齐”)。 (3)选中文本,在按住 Ctrl 键的同时,单击 B 键,把组合在一起的文字分解,并分别在第 10 、 20 、 30 、 40 、 50 帧插入一个关键帧。若连续单击 B 键两次,则把文字打散。 (4)选中第 1 帧,将五个文字全部删除。 (5)选中第 10 帧,将后四个文字删除,留下一个“教”字。选中第 20 帧,将后三个文字删除,留下“教育”两字。选中第 30 帧,将后二个文字删除,留下“教育技” 三字。选中第 40 帧,将后一个文字删除,留下“教育技术”四字。 (6)在第 60 帧插入普通帧。测试效果,观看效果。 (二)补间动画 Flash 中的补间动画有两种:一种是动作补间动画;另一种是形状补间动画。 动作补间动画的制作流程一般是:先在一个关键帧中定义实例的大小、颜色、位置、透明度等参数,然后创建出另一个关键帧并修改这些参数,最后创建补间动画,让 Flash 自动生成中间的过渡状态。过渡帧在帧面板上的标志是在浅篮色的背景下有一个向右的长箭头。 实例:属性变化的矩形 (1)新建 Flash 文件,用矩形工具在舞台左边画一个无边框的红色矩形。选中矩形,右击,执行“转换为元件”命令。在“创建新元件”对话框中选择类型为“图形”,确定。 (2)在第 30 帧插入关键帧,并把矩形拖到右边。 (3)用任意变形工具将其放大,并旋转。 (4)在属性面板中将矩形的“填充色”属性改为蓝色。 (5)用选择工具选中第 1 帧,单击属性面板“补间”里的“动作”即可创建补间动画。
制作简单的Flash动画教学设计 一、教学内容分析 1、课程标准内容 学会使用一种动画制作软件尝试制作简单的动画,了解动画生成的基本原理。 2、教材作用与地位 本节是江苏科学技术出版社2007年出版的《信息技术》(初中下册第 8单元动画制作中Flash部分的开端,设计为2课时,《制作简单的Flash动画》是第2课时。这部分内容主要是让学生体验Flash动画制作的一般步骤,初步理解Flash 动画制作中的一些基本概念,学会创建和调用图形元件。通过对制作过程的了解, 让学生消除动画制作的神秘感,激发学生学习Flash动画制作的求知欲。 在尝试制作的过程中理解基本概念,形成正确、规范的制 作习惯,为后续的深层次的学习打下坚实的基础。 二、学情分析 学生对Flash概念的认识是基于网络上流行广泛的各种动漫作品和Flash 小游戏,因此,体验活动仅仅是欣赏和娱乐。 大多数学生没有去主动创作动画的意识,对动画的制作有神秘感和距离感, 对动画制作的过程知之甚少,甚至一无所知。通过上节课对源程序的分析 学习,学生对一些基本概念比如:关键帧、图层、图形元件等已经有了一定的了解。学生产生了很强的实践欲望,希望通过这节课亲手制作, 在制作过程中加深对基本概念的理解,亲历制作的全过程。 三、教学目标 1、知识与技能 (1体验Flash动画制作的一般步骤;
(2初步理解Flash动画制作中的一些基本概念; (3学会创建和调用图形元件; (4常用图形工具、文本工具的使用方法; (5制作简单的补间动画; (6了解Flash动画制作的基本方法; 2、过程与方法 通过制作《打地鼠》简单动画,让学生了解通过导入位图制作动画的方法;通过制作《撞球》补间动画,让学生了解利用绘图工具制作图形元件, 重复调用元件的方法。通过对 《撞球》中两个运动元素的动画制作,让学生学会分析和分解运动过程, 并学会用已有的操作技能来恰当地表现这些运动。 让学生体验了较为复杂动画制作的设计、制作过程,初步领会Flash 动画的基本设计、制作思路。 3、情感态度 排除学生的畏难情绪,激发学生学习动画制作的兴趣;培养学生规范的制作习惯和积极探究新知识的精神。 四、教学重点 (1体验Flash动画制作的一般步骤 (2了解Flash动画制作的基本方法 五、教学难点 (1理解Flash动画制作中的一些基本概念