《4.1 海上灯塔ppt课件.pptx》由会员分享,可在线阅读,更多相关《4.1 海上灯塔ppt课件.pptx(53页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、4.1 海上灯塔Flash CC 基础与案例教程Flash CC 基础与案例教程第 3 页Flash CC 基础与案例教程海上灯塔一小雨沙沙二竹林听风三Flash CC 基础与案例教程第 4 页第一部分Flash CC 基础与案例教程Flash CC 基础与案例教程第 5 页4.1.1 知技准备一.基本知识 (1)、什么是补间动画? 在制作Flash二维动画时,在两个关键帧中间需要做“补间动画”,才能实现图画的运动,插入补间动画后两个关键帧之间的过渡帧是由计算机自动运算得到的。Flash二维动画制作中补间动画分两类,一类是形状补间用于形状的动画;另一类是动画补间用于图形及元件的动画,即形状补间
2、动画与动画补间动画。Flash CC 基础与案例教程第 6 页4.1.1 知技准备(2)、什么是动画补间动画? 动画补间动画是指在Flash的时间帧面板上,在一个关键帧上放置一个元件,然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等,Flash 将自动根据二者之间的帧的值中间动画。构成动画补间动画的元素是元件,包括影片剪辑、图形元件、按钮、文字、位图、组合等等,但不能是形状,只有把形状组合(Ctrl+G)或者转换成元件后才可以做动画补间动画。Flash CC 基础与案例教程第 7 页4.1.1 知技准备(3)、构成动画补间动画的元素有哪些? 构成动画补间动画的元素是元件,包括影片剪辑
3、、图形元件、按钮等等,除了元件,其他元素包括文本都不能创建补间动画的,其他的位图、文本等等都必须要转换成元件才行,只有把形状“组合”或者转换成“元件”后才可以做“动画补间动画”。Flash CC 基础与案例教程第 8 页4.1.1 知技准备二、基本操作 1.如何创建传统动画补间? 传统补间动画需要两个关键帧,首先在第一个关键帧中制作内容,然后转化为元件,再在时间轴上按下快捷键F6创建第二个关键帧,修改第二个关键帧中的元件位置等信息,最后在两个关键帧中间的任意一帧上右击选择“创建传统补间”就大功告成了,时间轴层淡蓝色并且显示长箭头,如果出现虚线,则表示该动画创建失败。Flash CC 基础与案例
4、教程第 9 页4.1.1 知技准备2.如何在Flash CS4及以上版本创建动画补间? Flash CS4及以上版本使用基于对象的动画对个别动画属性实现全面控制, 它将补间直接应用于对象而不是关键帧。补间动画不再是通过设置开始帧和结束帧设置动画,而是只需要设置开始帧就可以做动画了。要正确创建动画补间,包括以下4个步骤:Flash CC 基础与案例教程第 10 页4.1.1 知技准备(1)将需要做动画的元件置于关键帧中,如图4-1-1所示。图4-1-1布置元件Flash CC 基础与案例教程第 11 页4.1.1 知技准备(2)在要创建补间的这一层右击选择“创建补间动画”,这时图层变成淡蓝色,如
5、图4-1-2所示。图4-1-2创建补间动画Flash CC 基础与案例教程第 12 页4.1.1 知技准备图4-1-3时间轴(3)观察时间轴,此时该图层已经具有补间动画了,如图4-1-3所示。Flash CC 基础与案例教程第 13 页4.1.1 知技准备(4)选择第24帧,移动元件,即完成了方形由左到右运动的动画,如图4-1-4所示。图4-1-4移动元件对象Flash CC 基础与案例教程第 14 页案例分析 补间动画是一种在最大程度地减小文件大小的同时创建随时间移动和变化的动画的有效方法,它也是Flash中非常重要的表现手段之一,它是在一个关键帧上放置一个元件,然后在另一个关键帧改变这个元
6、件的大小、颜色、位置、透明度等,Flash 将自动根据二者之间的帧的值自动创建中间动画。该项目综合运用文字、图像、音乐等多媒体元素,动画效果为:在茫茫的大海上,灯塔之光微明微亮,为迷茫的航行者指明方向,如图4-1-5所示。图4-1-5海上灯塔Flash CC 基础与案例教程第 15 页案例分析 在具体技术层面,该任务利用素材图片,使用图像处理软件制作成黄昏或者夜景效果作为动画背景,使用Flash软件绘制灯塔上的单个灯光图形,并制作灯光扫过茫茫大海的动画效果,然后通过不断复制形成灯光循环不断的动画。在文字处理方面,利用逐帧动画制作文字逐个出现效果,再利用补间动画制作跳动光晕效果覆盖文字之上,两个
7、动画同步进行,使文字动画更具动感。Flash CC 基础与案例教程第 16 页案例分析【知识技能点】补间动画;动画补间动画;元件。【训练目标】1.能够综合运用绘图工具正确绘制光晕效果的图形轮廓,并通过颜色的巧妙设置实现光晕效果。2.能够熟练创建和编辑动画补间动画。3.通过画面设计和动画制作,审美能力得到进一步提升,沟通能力、制定方案和解决问题的能力进一步加强。Flash CC 基础与案例教程第 17 页制作过程一、制作背景1.打开Photoshop软件,打开背景素材图片,大小为800PX*600PX,如图4-1-6所示。图4-1-6背景图片Flash CC 基础与案例教程第 18 页制作过程图
8、4-1-7调整曲线 图4-1-8曲线调整效果2.按下快捷键Ctrl+M打开“曲线”面板,调整曲线以改变图像明暗度,如图4-1-7所示,调整后图像效果为暗部变亮,亮部变暗,以营造画面总体灰暗的效果,如图4-1-8所示。Flash CC 基础与案例教程第 19 页制作过程3.按下快捷键Ctrl+U打开“色相/饱和度”面板,降低图像明度和饱和度,如图4-1-9所示,调整后图像效果为黑夜效果,如图4-1-10所示。图4-1-9调整明度图4-1-10明度调整效果Flash CC 基础与案例教程第 20 页制作过程4.新建Flash文档,大小为800PX*600PX。5.图层1重命名为“背景”,按下快捷键
9、Ctrl+R导入调整好的背景图片,并调整图片位置使之与舞台相匹配。Flash CC 基础与案例教程第 21 页制作过程二、制作灯光动画1.按下快捷键Ctrl+J打开文档属性面板,设置背景为黑色,如图4-1-11所示。图4-1-11修改文档背景颜色Flash CC 基础与案例教程第 22 页制作过程2.按下快捷键Ctrl+F8新建影片剪辑元件,命名“灯光单个”,按下快捷键N切换为线条工具,绘制灯光轮廓,如图4-1-12所示。图4-1-12灯光轮廓Flash CC 基础与案例教程第 23 页制作过程3.打开颜色面板,设置白色渐渐透明的线性渐变,为灯光轮廓填充颜色,按下快捷键F切换为渐变色调整工具微
10、调渐变色,最删掉轮廓线,如图4-1-13所示。图4-1-13灯光填色Flash CC 基础与案例教程第 24 页制作过程4.按下快捷键Q切换为任意变形工具,将灯光元件的注册点移动到左端,这样在制作动画时元件以左端为轴心进行运动,第1帧效果如图4-1-14所示。图4-1-14修改元件注册点Flash CC 基础与案例教程第 25 页制作过程5.在第25帧按下快捷键F6创建关键帧,创建第1帧到第25帧的传统补间动画,选中第25帧,按下快捷键Ctrl+T打开变形面板,取消锁定比例,将灯光横向缩放至1.2%,第25帧效果如图4-1-15所示。图4-1-15灯光缩放效果Flash CC 基础与案例教程第
11、 26 页制作过程6.在第26帧、第27帧分别按下快捷键F6创建关键帧,选中第26帧,按下Delete键将灯光删除,该帧变为空关键帧,在第27帧上按下快捷键Ctrl+T打开变形面板,设置“垂直倾斜”180度,灯光即水平翻转180度,第27帧效果如图4-1-16所示。 图4-1-16灯光翻转效果Flash CC 基础与案例教程第 27 页制作过程7.在第55帧上按下快捷键F6插入关键帧,创建第27到第55帧的传统补间动画,选中第55帧,打开变形面板将灯光横向缩放至100%,第55帧效果如图4-1-17所示。图4-1-17灯光放大效果Flash CC 基础与案例教程第 28 页制作过程三、制作灯塔
12、动画1.按下快捷键Ctrl+F8新建影片剪辑元件命名为“灯光一组”,图层1重命名为“灯光1”。2.按下快捷键Ctrl+L打开库,拖动元件“灯光单个”到舞台上,在第115帧按下快捷键F5,以延长该元件停留时间。3.选中该实例,按下快捷键Ctrl+I打开信息面板,记录下该实例的X和Y坐标值。4.新建图层命名为“灯光2”,在第10帧下快捷键F6,拖动元件“灯光单个”到舞台中,选中该实例,打开信息面板,设置相同的坐标值,使之与“灯光1”图层中的元件实例位置对齐。Flash CC 基础与案例教程第 29 页制作过程5.同理,新建图层,分别命名为“灯光3”“灯光4”“灯光5”“灯光6”“灯光7”,每个图层
13、均放置元件“灯光单个”,利用信息面板将图形对齐。后一个灯光出现比前一个灯光出现的时间依次延时10帧,如图4-1-18所示。图4-1-18“灯光一组”时间轴设置Flash CC 基础与案例教程第 30 页制作过程6.按下快捷键Ctrl+Alt+Enter预览影片剪辑元件动画,此时动画效果为一组灯光依次从右到左扫过。7.回到场景,新建图层命名“灯光”,从库中拖动“灯光一组”元件到场景中,按下快捷键Q切换为任意变形工具,根据灯塔调整好灯光的大小和位置,如图4-1-19所示。图4-1-19调整灯光Flash CC 基础与案例教程第 31 页制作过程四、制作文字动画1.回到场景,新建图层命名“文字”,按
14、下快捷键 T 切换为文字工具,输入文字“海上灯塔”,打开属性面板,设置好字号、字体、颜色等信息,调整好文字大小和位置,如图4-1-20所示。图4-1-20输入文字2.按下快捷键Ctrl+B打散文字,按下快捷键F8将打散文字转换为影片剪辑元件,命名为“文字”,双击文字进入该元件层级制作文字动画。Flash CC 基础与案例教程第 32 页制作过程3.分别在第5、10、15帧按下快捷键F6插入关键帧,第1帧删除“海”、“无”、“边”三个字,只保留 “大”字,如图4-1-21所示。第5帧保留“大海”两个字,如图4-1-22所示。第10帧保留“大海无”三个字,如图4-1-23所示。第15帧保留“大海无
15、边”四个字,第40帧按下快捷键F5创建普通帧,如图4-1-24所示。按下快捷键Ctrl+Enter预览影片,动画效果为四个字依次逐个出现。Flash CC 基础与案例教程第 33 页制作过程图4-1-23文字动画第10帧设置图4-1-24文字动画第15帧设置图4-1-21文字动画第1帧设置图4-1-22文字动画第5帧设置Flash CC 基础与案例教程第 34 页制作过程4.新建图层命名为“光晕”,按下快捷键O切换为圆形工具,绘制一个正圆,打开颜色面板,设置中间为白色,外圈为黄色并渐渐透明的径向渐变,按下快捷键K切换为颜料桶工具,为圆形光晕填充渐变色,按下快捷键F切换为渐变色调整工具,调整渐变
16、色,如图4-1-25所示。图4-1-25绘制光晕Flash CC 基础与案例教程第 35 页制作过程5.按下快捷键Q切换为任意变形工具,横向缩放光晕使之由圆形变为椭圆形,调整好光晕位置和大小,使之与“海”字对齐。6.选中光晕,按下快捷键F8转换为影片剪辑元件,命名为“光晕动画”,双击光晕进入该元件层级编辑动画。在第5帧按下快捷键F6插入关键帧,创建第1帧到第5帧的传统补间动画,第1帧设置如图4-1-26所示。图4-1-26光晕动画第1帧Flash CC 基础与案例教程第 36 页制作过程7.选中第5帧上的光晕,按下快捷键Ctrl+T打开变形面板,将光晕等比例缩放至10%,打开属性面板,设置“色
17、彩效果”选项中“样式”的Alpha值为0,第5帧设置如图4-1-27所示。图4-1-27光晕动画第5帧Flash CC 基础与案例教程第 37 页制作过程8.返回“文字”元件层级,在“光晕”图层,分别在第5帧、第10帧、第15帧创建关键帧,调整“光晕动画”元件各实例的位置,使之分别与文字对齐,选中第20帧,按下快捷键F5延长最后一个元件实例的显示时间,时间轴设置如图4-1-28所示。图4-1-28时间轴设置Flash CC 基础与案例教程第 38 页制作过程图4-1-29导入音乐9.按下快捷键Ctrl+Enter预览动画效果,并进行微调。10.按下Ctrl+F8快捷键新建影片剪辑元件命名为“音
18、乐”,按下快捷键Ctrl+R导入音乐素材,从库中拖动音乐素材到舞台上,根据音乐时间长度创建普通帧播放音乐,时间轴及属性设置如图4-1-29所示。Flash CC 基础与案例教程第 39 页制作过程11.返回场景,新建图层命名为“音乐”,按下快捷键Ctrl+L打开库,拖动“音乐”元件到场景中,如图4-1-30所示。图4-1-30时间轴设置12.按下快捷键Ctrl+Enter测试影片。Flash CC 基础与案例教程第 40 页能力拓展 在动画制作过程中,文字必不可少,标题文字、内容文字、字幕文字等等,运用补间动画可以制作出各种形式的文字特效,文字动画千变万化、多采多姿,以下是典型案例。典型案例一
19、:风吹字文字动画效果为:文字散落一地,清风吹拂,文字随风而逝。Flash CC 基础与案例教程第 41 页能力拓展图4-1-31 设置背景1.新建Flash文档,大小为800PX*600PX。2.图层1重命名为“背景”,按下快捷键Ctrl+R导入背景图片,按下快捷键Q切换为任意变形工具,调整背景图片大小使之与舞台大小相当。在第15帧上按下快捷键F5创建关键帧,以延长画面停留时间,制作完毕锁定背景图层,如图4-1-31所示。Flash CC 基础与案例教程第 42 页能力拓展3.新建图层命名为“梦”,按下快捷键T切换为文字工具,输入文本“梦”。调整好文字位置,打开属性面板,设置好字体、字号、样式
20、、颜色等参数。4.选中文字,按下快捷键F8将文字转化为图形元件,命名为“梦”。5.在场景时间轴上,在“梦”图层第15帧上按下快捷键F6创建关键帧,创建第1帧到第15帧的传统补间动画,选中第1帧,将“梦”文字移动到场景左上角,按下回车键观察动画并进一步调整好位置。图4-1-32 动画属性设置Flash CC 基础与案例教程第 43 页能力拓展7.按下Ctrl+Enter键预览文字飞入的动画效果,并根据预览效果微调动画。8.新建图层命名为“久”,在第5帧上按下快捷键F6创建关键帧,按下快捷键T输入文字“久”,调整好文字位置,参数设置同“梦”。Flash CC 基础与案例教程第 44 页能力拓展9.
21、将文字“久”转化为图形元件命名为“久”,在场景时间轴上,在“久”图层第20帧按下快捷键F6创建关键帧,创建第5帧到第20帧的补间动画,选中第5帧,将“久”文字移动到场景左上角,选中第5帧到第20帧之间的任意一帧,打开属性面板,设置“缓动”为100,设置“旋转”为“顺时针”旋转一圈,如图4-1-33所示。图4-1-33 编排文字Flash CC 基础与案例教程第 45 页能力拓展10.同理,制作其它文字动画,重复步骤3、4、5、6、7,分别新建图层,依次制作“已”、“忘”、“身”、“是”、“蝶”文字的飞入动画,注意后一个文字飞入时间比前一个文字飞入时间延迟5帧,每个文字动画时长均为15帧,时间轴
22、设置如图4-1-34所示。图4-1-34 时间轴Flash CC 基础与案例教程第 46 页能力拓展图4-1-35 旋转设置11.选中“梦”图层,创建第70帧到第80帧的补间动画。12.选中第80帧,按下快捷键Ctrl+T打开变形面板,设置文字旋转20度,如图4-1-35所示。Flash CC 基础与案例教程第 47 页能力拓展13.按下快捷键V切换为选择工具,将文字“梦”向右上方移动一段距离。打开属性面板,设置“Alpha”值为0。14.按下Ctrl+Enter键预览文字旋转并渐渐消失的动画效果,并根据预览效果微调动画,营造清风吹拂,文字散落的感觉。Flash CC 基础与案例教程第 48
23、页能力拓展15.同理,制作其它文字被风吹散的动画。分别选择各个文字图层,重复步骤1、步骤2、步骤3、步骤4,重复步骤3,注意后一个文字消失时间比前一个文字消失时间延迟5帧,每个风吹文字动画时长均为15帧,时间轴设置如图4-1-36所示。图4-1-36 时间轴设置16.按下Ctrl+Enter键预览动画效果。Flash CC 基础与案例教程第 49 页能力拓展典型案例二:叠加字文字动画效果为:逐个出现文字,在上一个文字即将飞走的同时出现下一个文字,最后所有文字并排为一行,关键步骤及画面效果如图4-1-37至4-1-42所示。图4-1-37 第1帧设置图4-1-38 第10帧设置Flash CC 基础与案例教程第 50 页能力拓展图4-1-40 第30帧设置图4-1-41 第40帧设置图4-1-42 第50帧设置图4-1-39 第20帧设置Flash CC 基础与案例教程第 51 页能力拓展典型案例三:跳跃字 文字动画效果为:夜色如雾,完全把草坪染成了墨色,可爱的萤火虫闪闪发亮,金黄色的文字犹如其中一份子随之跳动,仿佛带着音乐一般,文字动画与萤火虫动画相得益彰,关键画面效果如图4-1-43所示。Flash CC 基础与案例教程第 52 页能力拓展图4-1-43 文字动画关键画面Flash CC 基础与案例教程
限制150内