《电子商务网页设计》课件项目九 使用Flash制作网页中的动画.ppt

1、Flash CS5的工作界面的工作界面1任务分析任务分析 通过对Flash软件的学习,了解Flash动画的应用领域、特点、创作流程,以及掌握启动和退出Flash CS5的方法,并认识Flash CS5的工作界面,用这个软件制作一些简单广告动画。相关知识相关知识1.Flash动画的应用领域Flash动画被广泛应用于网页设计、网页广告、网络动画、多媒体教学课件、游戏、企业宣传、产品展示和电子相册等领域。2.Flash动画的特点(1)制作简单:Flash动画的制作相对比较简单,拥有一台电脑、一套软件,并掌握一定的软件知识就可以制作出简单的动画。(2)存储容量小和缩放时不失真:Flash动画主要由矢量

2、图形组成,矢量图形具有存储容量小,并且在缩放时不失真的优点。(3)交互性强:可以使用ActionScript语言为Flash动画添加代码,使动画具有交互性。3.场景 如果将Flash CS5动画比作话剧,一个场景就是话剧的一幕,每一幕都有丰富的内容、精彩的表演,结合起来就形成了一个完整的话剧。同样,不同的场景结合起来也就形成了完整的Flash动画。我们可以根据需要设置多个场景,并调整场景的顺序。4.舞台 舞台是展示、播放和控制动画的地方。舞台上显示的内容是当前所选帧上的对象,可以在舞台上为当前帧创建所需要的内容。舞台的默认颜色为白色,因此动画的背景色也就是白色。如果需要改变舞台的背景颜色,可以

3、到“文档属性”对话框中修改。5.Flash CS5的工具箱任务实施任务实施(1)单击“开始”按钮,在弹出的菜单中选择“所有程序”“Adobe Flash Professional CS5”,或双击桌面上的图标,即可启动Flash CS5。(2)打开Flash CS5的欢迎屏幕,单击“ActionScript 3.0”或者“ActionScript 2.0”选项即可新建一个Flash文档,并进入Flash CS5的工作界面。(3)进入Flash CS5的工作界面后,可以看到其工作界面由标题栏、菜单栏、文档选项卡、工具箱、时间轴、舞台和多个控制面板组成。(4)单击“标题栏”右侧的“基本功能”下拉按

4、钮,可在展开的下拉列表中根据自己的需要选择工作界面的外观模式,例如切换到“传统”外观模式。(5)如果在默认的工作界面中找不到需要的面板,可以通过选择“窗口”“面板名称”菜单来打开它,例如打开“动作”面板。(6)Flash会将某些性质相似的面板放在同一面板组中,此时单击面板组上方该面板的名称标签,可在不同的面板之间切换。(7)要将不需要的面板关闭,只需右键单击该面板标题,在展开的快捷菜单中选择“关闭”选项即可;若选择“关闭组”选项,可关闭同组的所有面板。(8)在面板组处于图标状态时,单击某图标可展开相应面板,再次单击可折叠面板。Flash CS5基本操作介绍及使用实例基本操作介绍及使用实例2任务

5、分析任务分析 制作Flash动画时,首先需要新建一个Flash文档并设置文档属性。对于新手来说,要制作出Flash动画,还需要简单了解制作动画的基本原理。本任务将带领大家学习这些知识,并创建一个Flash动画作品。相关知识相关知识1.时间轴面板时间轴用于组织和控制文档内容在一定时间内播放的层数和帧数(就好比剧本),它决定了各个场景的切换及演员的出场、表演的时间顺序。在Flash CS5中,图层可以看成是透明胶片叠加在一起,并由此形成遮挡关系。上面图层的内容会遮挡下面图层的内容,只有通过其空白区域才能看到下面的图层内容。2.帧帧是动画制作中的一个重要概念。它是组成动画的基本单位,一个动画中可以包

6、含多个帧。在Flash中,一个动画可以由多个图层构成,每个图层都具有一个独立时间轴,并由多个帧构成,图层与帧共同决定了动画的播放形式与时间。Flash中的帧可以分为:关键帧、空白关键帧、普通帧、过渡帧。3.库面板库面板用于存放和组织可重复使用的Flash动画元件,包括在Flash中绘制的图形对象和导入的声音、位图等文件。4.元件与实例任务实施任务实施(1)执行“文件”“新建”菜单命令或按快捷键Ctrl+N,在弹出的“新建文档”对话框中,选择“ActionScript 3.0”选项,设置要创建的文档类型,然后单击“确定”按钮。(2)创建一个Flash文档并进入Flash CS5工作界面后,执行“

7、修改”“文档”菜单命令,在“尺寸”编辑框中设置文档的宽度和高度均为400像素,然后单击“背景颜色”右侧的色块,在弹出的“拾色器”面板中单击黄色,其他选项保持默认设置不变,单击“确定”按钮。(3)按住工具箱中的“矩形”工具不放,在展开的工具列表中单击选择“椭圆”工具,按快捷键Shift+Alt+F9打开“颜色”面板,设置颜色类型为径向渐变,第一个色块为#FFFFFF,第二个色块为#00FF00。按住Shift键的同时,按住鼠标左键并拖动,绘制出一个白色到绿色径向渐变的正圆形。(4)单击“图层1”的第1帧以选中舞台中的圆形,然后按快捷键F8,在打开的“转换为元件”对话框中,输入元件名称为“小球”,

8、元件类型设置为“图形”,设置完毕后单击“确定”按钮。同时库面板中也保存该图形元件。(5)单击“时间轴”面板的第50帧处选中该帧,然后按F5键在该处插入一个普通帧。(6)右键单击舞台中的小球元件实例,从弹出的快捷菜单中选择“创建补间动画”,为该元件实例创建补间动画。(7)选中“时间轴”面板第1帧,将播放头转到该帧,然后单击工具箱中的“选择”工具,将光标移到舞台中的小球元件实例上,按住鼠标左键不动并向左上方拖动,将小球元件实例拖到舞台外左侧偏上的位置。(8)单击“时间轴”面板第25帧,将播放头转到该帧,然后使用“选择”工具将小球元件实例移动到舞台下方。(9)用以上的方法设置第50帧上的元件实例。(

9、10)在制作动画过程中,按下Enter键可以测试动画在时间轴上的播放效果,反复按Enter键可在暂停测试和继续测试之间切换。执行“控制”“测试影片”菜单命令,或按快捷键Ctrl+Enter,则可以在Flash Player播放器中预览动画。(11)制作好小球跳动动画后,按快捷键Ctrl+S,在弹出的“另存为”对话框中将文档保存,文件名为“第一个Flash动画.fla”。(12)在文档选项卡中单击文件名右侧的“关闭”按钮关闭文档。如果要打开以前保存的文档进行再次编辑,在工作界面执行“文件”“打开”菜单命令,或按快捷键Ctrl+O,在“打开”对话框中选择要打开的文档,单击“打开”按钮。使用使用Fl

10、ash CS5制作简单动画制作简单动画3相关知识相关知识1.按钮元件 按钮是人机进行信息交互的基础,它对鼠标单击事件进行响应。按钮可对按钮静止、将鼠标指针移到按钮上、按下鼠标左键三种事件做出响应。这三种事件对应着按钮的四种状态:弹起(按钮静止)、指针经过(将鼠标指针移动到按钮上)、按下(按下按钮)、点击(定义按钮响应区域)。2.按钮的创建(1)执行“插入”“新建元件”菜单命令,弹出“创建新元件”对话框。(2)单击“确定”按钮进入按钮编辑区,时间轴中将出现按钮的四个状态帧。3.动作脚本基本知识 动作脚本就是Flash为我们提供的各种命令、运算符及对象。使用动作脚本时必须将其附加在按钮、影片剪辑或

11、者帧上,从而使单击按钮和按下键盘之类的事件发生时触发这些脚本,以便实现所需的交互性。4.动画的基本类型(1)逐帧动画。(2)补间动画。(3)运动引导层动画。(4)遮罩层动画。5.图层制作图片轮播控制动画制作图片轮播控制动画(1)运行Flash CS5,执行“文件”“新建”菜单命令,在弹出的“新建文档”对话框中,选择“常规”选项卡下面的“ActionScript 2.0”,然后单击“确定”按钮。(2)执行“修改”“文档”菜单命令,在弹出的“文档设置”对话框中,将尺寸设置为520280像素。(3)按快捷键Ctrl+L打开“库”面板,单击“新建元件”按钮,在弹出的“创建新元件”对话框中,设置名称为“

12、pic01”、类型为“影片剪辑”的元件。(4)执行“文件”“导入”“导入到舞台”菜单命令,在弹出的“导入”对话框中,选择图片文件11.jpg,然后单击“打开”按钮,这时会弹出消息对话框,单击“否”按钮。再按快捷键Ctrl+K,打开“对齐”面板,选择单击“水平中齐”和“垂直中齐”按钮。元件创建完毕后,切换回到场景1中。(5)按照上述同样的方法,创建其余的5个影片剪辑元件。(6)在“时间轴”面板中,双击“图层1”,重命名为“图片01”。然后在“库”面板中,按住鼠标左键不动,将“pic01”影片剪辑元件拖到舞台中并对齐舞台。(7)在“图片01”图层中,分别选择第15帧和第45帧,按F6键插入关键帧,

13、然后选中第45帧,按住Shift键将舞台中的元件沿着水平方向移到舞台的左侧,最后右键单击第15帧到第45帧之间的任意位置,创建“传统补间”动画。(8)在“时间轴”面板中,建立新图层,并将该图层重命名为“图片02”,选中该图层的第15帧,按F7键插入空白关键帧,然后从“库”面板中把“pic02”影片剪辑元件拖到舞台右侧并与舞台底部对齐。然后选择第45帧,按F6键插入关键帧,再将“pic02”影片剪辑元件移到舞台正中,右键单击第15帧到第45帧之间的任意位置,创建“传统补间”动画。(9)在“图片02”图层中,分别选择第60帧和第90帧插入关键帧,右键单击第60帧到第90帧之间的任意位置,创建“传统

14、补间”动画,然后选中第90帧,把“pic02”影片剪辑元件移到舞台左侧并与舞台底部对齐。(10)利用上述同样的方法,创建并设置“图片03”、“图片04”、“图片05”、“图片06”图层,“时间轴”面板。为了使图片能顺畅播放,继续创建“图片07”图层,选择该图层的第240帧插入空白关键帧,从“库”面板中把“pic01”影片剪辑元件拖到舞台右侧并与舞台底部对齐,然后选择第270帧插入关键帧,把“pic01”影片剪辑元件移到舞台正中。(11)在“库”面板中,创建按钮元件,命名为“按钮1”,选择工具箱中的“矩形”工具,设置笔触颜色为“无”,填充颜色为红色,在舞台中绘制出一个大小适中的矩形,并用“文本”

15、工具输入数字“1”。再用同样的方法制作其他按钮元件。(12)在“时间轴”面板中,建立新图层,并重命名为“按钮”图层,从“库”面板中把“按钮1”、“按钮2”等6个按钮元件拖到舞台右下方,并设置它们能在同一水平方向上平均间隔分布(13)在场景1中,按F9键打开“动作”面板,选择舞台上的“按钮1”元件,给该按钮元件添加鼠标动作代码:on(release)gotoAndPlay(1);。相应地,也分别给其他按钮元件添加代码:on(release)gotoAndPlay(45);,on(release)gotoAndPlay(90);,on(release)gotoAndPlay(135);,on(re

16、lease)gotoAndPlay(180);,on(release)gotoAndPlay(225);。制作探照灯效果制作探照灯效果(1)运行Flash CS5,执行“文件”“新建”菜单命令,在弹出的“新建文档”对话框中,选择“常规”选项卡下面的“ActionScript 2.0”,然后单击“确定”按钮。(2)执行“文件”“导入”“导入到舞台”菜单命令,在“导入”对话框中,打开图片文件“21.jpg”,按快捷键Ctrl+F3打开“属性”面板,修改图片大小为550400像素。完成设置后,按快捷键Ctrl+K打开“对齐”面板,将图片置于舞台正中央。(3)在“时间轴”面板中,建立新图层,选择“图层

17、2”的第1帧,执行“文件”“导入”“导入到舞台”菜单命令,在“导入”对话框中,打开图片文件“22.jpg”,图片大小与位置的设置与步骤(2)相同。(4)新建图层3,单击工具箱中的“椭圆”工具,按住Shift键在舞台中绘制出一个圆形。单击“移动”工具,选中圆形,按F8键打开“转换为元件”对话框,设置元件名称为“圆形”,“类型”为图形元件,并设置中心对齐。(5)在图层3中,分别选择第15帧、第30帧、第45帧、第60帧、第75帧和第90帧,按F6键插入关键帧,并适当调整这些关键帧的圆形元件的位置。然后在第1和第15帧、第15和第30帧、第30和第45帧、第45和第60帧、第60和第75帧、第75和

18、第90帧之间创建“传统补间”动画,再分别选择图层1和图层2的第90帧,按F5键插入普通帧。(6)右键单击图层3,在弹出的快捷菜单中选择“遮罩层”,把图层2设置为“遮罩层”,图层3设置为“被遮罩层”。(7)新建图层4,按F7键在第30帧插入空白关键帧,选择工具箱中的“文本”工具,按快捷键Ctrl+F3打开“属性”面板,设置字体类型为华文楷体、大小为36点、颜色为#FF9900,设置完成后,输入“突破科技启迪未来”,按F8键将文本转换为影片剪辑元件,命名为“广告语”示。(8)在图层4中,按F6键分别在第45帧、第60帧、第75帧和第90帧插入关键帧,选择第1帧,将“广告语”元件移到舞台上方,再选择

19、第45帧,单击工具箱中的“任意变形”工具,当光标变成,按住Alt键向左拖动变形,当光标变成,按住Alt键向下拖动变形。选择第75帧,改变“广告语”元件的位置和大小,并按快捷键Ctrl+F3打开“属性”面板,降低Alpha值为50%。选择第90帧,将“广告语”元件水平右移。最后创建“传统补间动画”。(9)新建图层5,在第90帧插入空白关键帧,按F9键打开“动作”面板,输入代码“stop();”。按快捷键Ctrl+Enter测试动画,时间轴面板。制作店铺公告打字效果制作店铺公告打字效果(1)运行Flash CS5,执行“文件”“新建”菜单命令,在弹出的“新建文档”对话框中,选择“常规”选项卡下面的

20、“ActionScript 2.0”,然后单击“确定”按钮。(2)执行“文件”“导入”“导入到舞台”菜单命令,在“导入”对话框中,打开图片文件“31.jpg”,按快捷键Ctrl+F3打开“属性”面板,修改图片大小为550400像素,如图955所示。完成设置后,按快捷键Ctrl+K打开“对齐”面板,将图片置于舞台正中央,并将“图层1”重命名为“背景”层。(3)执行“文件”“导入”“导入到库”菜单命令,在“导入”对话框中,打开图片文件“枫叶.png”,按快捷键Ctrl+L打开“库”面板,可以看到自动生成名字为“枫叶”的图形元件。(4)在“时间轴”面板中,新建图层并命名为“标题”层,选中该图层的第1

21、帧,单击工具箱中的“文本”工具,按快捷键Ctrl+F3打开“字符属性”面板,设置字体类型为华文楷体、大小为36点、颜色为#FF0000,在舞台中输入标题文本“店铺公告”。(5)在“时间轴”面板中,新建图层并命名为“内容”层,选中该图层的第1帧,单击工具箱中的“文本”工具,按快捷键Ctrl+F3打开“字符属性”面板,设置字体类型为宋体、大小为18点、颜色为#000000,字符行距为5点。然后在舞台中输入公告内容:“您好,亲,欢迎光临!本店与多家国内知名品牌(好孩子、小龙哈彼、迪士尼等生产商)合作,全场所有宝贝均为正品(有防伪码可查询)”。(6)在“内容”图层中,选择第1帧,按快捷键Ctrl+B将

22、文本打散。全选该图层的第2帧到第61帧,然后右键单击第2帧到第61帧之间的任意位置,选择“转换为关键帧”,再按F5键在“标题”层和“背景”层的第61帧都插入普通帧,时间轴面板。(7)在“内容”图层中,选择第1帧,按Delete键删除后面的60个文本,只留下“您”。继续选择第2帧,按Delete键删除后面的59个文本,只留下“您好”。按照同样的方法继续操作,最后可以实现动态打字的效果。(8)在“时间轴”面板中,新建图层并命名为“曲线”层,选中该图层的第1帧,单击工具箱中的“铅笔”工具,并设置铅笔模式为“平滑”,用“铅笔”工具在舞台中绘制出一条曲线。(9)在“曲线”层的下方新建“枫叶”图层,选择“

23、枫叶”层的第1帧,将“库”面板的“枫叶”图形元件拖到舞台中曲线的左端,适当缩小“枫叶”元件,并保证该元件的中心点对准曲线的起点。按F6键在第61帧插入关键帧,把“枫叶”元件移到曲线的右端,保证该元件的中心点对准曲线的终点。然后在第1帧与第61帧之间创建传统补间动画。(10)右键单击“曲线”层,在弹出的快捷菜单中,设置其图层类型为“引导层”。再按住鼠标左键不动,把“枫叶”层拖进“曲线”层中,“枫叶”层即成为“被引导”层。(11)按快捷键Ctrl+Enter测试动画。时间轴面板。制作促销广告动画制作促销广告动画(1)运行Flash CS5,执行“文件”“新建”菜单命令,在弹出的“新建文档”对话框中

24、,选择“常规”选项卡下面的“ActionScript 2.0”,然后单击“确定”按钮。(2)执行“修改”“文档”菜单命令,在弹出的“文档设置”对话框中,设置背景颜色为#003300。(3)执行“文件”“导入”“导入到库”菜单命令,在“导入”对话框中,选择本任务中所有的图片素材文件导入到“库”面板中。(4)按快捷键Ctrl+F8打开“创建新元件”对话框,命名为“绝招”,类型为“影片剪辑”,然后单击“确定”按钮。在“库”面板中,将图片“绝招.png”拖放到“绝招”影片剪辑元件的编辑模式中,按快捷键Ctrl+K打开“对齐”面板,勾选“与舞台对齐”选项复选框,单击“水平中齐”按钮和“垂直中齐”按钮。用

25、同样的方法,创建“猫女”、“猫女的诱惑”、“满就送”等影片剪辑元件。(5)切换到场景1,将“绝招”影片剪辑元件拖到舞台,按Ctrl+F3打开“属性”面板,然后改变其宽度为550。设置该元件与舞台左对齐且底部对齐。(6)选中图层1,重命名为“绝招”,单击该图层的第1帧,按快捷键Ctrl+C复制第1帧的内容,按快捷键Ctrl+Shift+V在当前位置粘贴后,再将刚才粘贴的内容沿水平方向移到舞台右侧。(7)在“绝招”图层中,按F6键在第90帧插入关键帧,按住Shift键,将第90帧中的元件沿水平方向往左移并与舞台右对齐。再右键单击第1帧与第90帧之间的任意位置,创建“传统补间”动画。(8)在时间轴面

26、板中,新建图层并命名为“猫女”,从“库”面板中将“猫女”影片剪辑元件拖放到舞台,按Ctrl+F3打开“属性”面板,改变其高度为400。设置该元件与舞台左对齐且底部对齐,然后将“猫女”图层往下移一层。(9)在“猫女”图层中,按F6键在第45帧和第90帧插入关键帧,分别选择第1帧和第90帧,按快捷键Ctrl+F3打开“属性”面板,在色彩效果选项中,设置“猫女”元件的Alpha值为0%。然后在第1到第45帧、第45到第90帧之间创建“传统补间”动画。(10)在“猫女”图层的上方新建图层并重命名为“猫女的诱惑”,选择该图层的第1帧,将“猫女的诱惑”影片剪辑元件拖到舞台适当的位置,单击工具箱中的“任意变

27、形”工具,等比例缩小该元件,并将其中心点移到正下方的控制方格中。(11)在“猫女的诱惑”图层中,按F6键分别在第30帧、第60帧和第90帧插入关键帧,先逆时针旋转该图层中第30帧的“猫女的诱惑”元件,再顺时针旋转第60帧的“猫女的诱惑”元件。然后在第1帧到第30帧、第30帧到第60帧、第60帧到第90帧之间创建“传统补间”动画。(12)在时间轴面板中,新建图层并重命名为“文字”,在该图层的第1帧,单击工具箱中的“文本”工具,按快捷键Ctrl+F3打开“字符属性”面板,设置字体类型为华文隶书、大小为40、颜色为#FF6900,输入“喜迎38妇女节”。按F6键在第90帧插入关键帧,改变文本字体类型为华文行楷,字体大小为24,然后分别选择第1帧和第90帧,按两次快捷键Ctrl+B将文本进行分离,最后创建“补间形状”动画。(13)完成上面的操作后,按Ctrl+Enter测试动画。