1、网页设计与制作项目五利用项目五利用Flash CS6Flash CS6制作网页动画制作网页动画利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形1制作基本动画制作基本动画2设计网站的动态按钮设计网站的动态按钮3在在FlashFlash中插入音频和视频中插入音频和视频4利用利用FlashFlash发布和保存作品发布和保存作品5任务任务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形在Flash中，每一个画面称为一个帧。一个Flash动画包括许多独立的帧，每一个帧都与前一个帧略有不同。其中，关键帧定义了动画在哪儿发生改变。例如，何时移动或旋转对象、改变对
2、象大小、增加对象、减少对象等。每一个关键帧都包含了任意数量的符号和图形。当Flash动画到达时间轴上的关键帧时，它可以做一些常规电影所不能做的事情帧动作。通过设置帧动作来完成一些任务，如暂停在某个帧、跳到其他帧、在浏览器里打开URL地址等。任务任务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形“开始页”窗口Flash CS6的工作界面任务任务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形Flash CS6的工作界面一般分为以下五大部分的工作界面一般分为以下五大部分:浮动浮动面板面板工具箱工具箱时间轴时间轴舞台舞台菜单菜单工具栏工具栏任务任
3、务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形(一一)文字的处理文字的处理在Flash CS6中可以按多种方式使用文字:创建静态文本，指定其内容和显示外观;创建动态文本或可输人的文本域，从文本域中输人动态文本;使用各种文本的编排方式，如右对齐、左对齐、横排、竖排;设置文字的字体、字号、样式、间距、颜色和对齐方式等。任务任务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形(二二)创建文本创建文本Flash CS6提供的文本工具位于工具箱中，当用户单击选择工具箱中的文本工具后，在舞台中单击鼠标，在单击位置处就会出现一个空白的字符输人框，此时用
4、户可以在输入框中输入文字。拖动调整柄改变文本块的宽度任务任务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形(三三)文本的属性设置文本的属性设置文本的属性设置设置文本的位置和大小设置文本的字符属性设置文本的段落属性设置文本链接滤镜任务任务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形(四四)文本的类型文本的类型静态文本静态文本动态文本动态文本输入文本输入文本任务任务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形(五五)分离文字并进行编辑分离文字并进行编辑用户输入的文字都是文字对象，不能作为图形处理。要想将文字作为
5、图形处理，必须先把文字分离。分离文字的操作是:先选中文字对象，然后执行菜单命令“修改”一“分离”，或选中文字对象后直接按Ctrl+B组合键，按一次分离成单个字，再按一次分离成图块。任务任务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形(一一)选择对象选择对象选择矢量图形的一部分进行编辑操作任务任务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形(二二)删除、移动和复制对象删除、移动和复制对象删除对象删除对象移动对象移动对象复制对象复制对象任务任务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形(三三)使用橡皮工具擦
6、除图形对象使用橡皮工具擦除图形对象橡皮工具及五个擦除模式按钮标准擦除擦除填色擦除线条擦除所选填充内部擦除任务任务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形(四四)对图形对象的常用编辑对图形对象的常用编辑1.对图形对象的大小进行缩放2.改变图形对象的中心点位置3.旋转图形对象4.使图形对象发生切变任务任务1 1利用利用Flash CS6Flash CS6绘制简单图形绘制简单图形(五五)对多个图形对象的编辑对多个图形对象的编辑组合组合多个对象的多个对象的层次层次对齐对象对齐对象多个对象分多个对象分配到层配到层调整多个对调整多个对象的位置象的位置任务任务1 1利用利用
7、Flash CS6Flash CS6绘制简单图形绘制简单图形新建图形元件新建图形元件绘制树叶图形绘制树叶图形给绘制好的树叶上色给绘制好的树叶上色创建树叶组图形元件创建树叶组图形元件创建树枝并合成树形状创建树枝并合成树形状12345任务任务2 2制作基本动画制作基本动画(一一)形状补间动画的概念形状补间动画的概念在Flash的“时间轴”面板上，在一个时间点(关键帧)绘制一个形状，然后在另一个时间点(关键帧)更改该形状或绘制另一个形状，Flash根据两者之间帧的值或形状来创建的动画被称为形状补间动画。这是Flash制作动画的一般方法。任务任务2 2制作基本动画制作基本动画(二二)构成形状补间动画的
8、元素构成形状补间动画的元素形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，使用的元素多为用鼠标绘制出的形状。如果使用图形元件、按钮、文字，则必须先分离对象然后再进行变形。任务任务2 2制作基本动画制作基本动画(三三)创建形状补间动画的方法创建形状补间动画的方法在“时间轴”面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，多个对象可以通过增加层来解决。在动画结束处创建或选择一个关键帧并设置要变成的形状，右键单击开始帧，选择“创建补间形状”，此时，“时间轴”面板上的变化如图所示，一个形状补间动画即创建完毕。形状补间动画任务任务2 2制作
9、基本动画制作基本动画(四四)认识形状补间动画的认识形状补间动画的“属性属性”面板面板Flash的“属性”面板随鼠标选定的对象不同而发生相应的变化。当建立了一个形状补间动画后，单击时间帧，弹出“属性”面板，如图所示。形状补间动画的“属性”面板任务任务2 2制作基本动画制作基本动画创建新文档创建新文档输入文字并打散输入文字并打散测试并保存动画测试并保存动画任务任务2 2制作基本动画制作基本动画形状提示的作用形状提示的作用添加形状提示的方法添加形状提示的方法添加形状提示的技巧添加形状提示的技巧任务任务2 2制作基本动画制作基本动画(一一)动作补间动画的概念动作补间动画的概念(二二)构成动作补间动画的
10、元素构成动作补间动画的元素(三三)形状补间动画和动作补间动画的区别形状补间动画和动作补间动画的区别(四四)创建动作补间动画的方法创建动作补间动画的方法(五五)认识动作补间动画的认识动作补间动画的“属性属性”面板面板任务任务2 2制作基本动画制作基本动画(一)创建新文档(二)创建小球元件(三)测试并保存动画(四)小球运动的变化1渐隐渐显(五)小球运动的变化2变小变大(六)小球运动的变化3按指定路径运动任务任务2 2制作基本动画制作基本动画1 遮罩的概念2 构成遮罩层和被遮罩层的元素3 创建遮罩的方法4 遮罩中可以使用的动画形式5 应用遮罩时的技巧任务任务2 2制作基本动画制作基本动画(一一)创建
11、影片文档创建影片文档 选择菜单中的“文件”“新建”命令，在弹出的面板中选择“常规”“ActionScript 3.0”选项，新建一个文件大小为400 X 400像素的Flash文件，背景颜色设为黑色，如图所示。任务任务2 2制作基本动画制作基本动画(二二)创建元件创建元件1.创建“线条”元件任务任务2 2制作基本动画制作基本动画(二二)创建元件创建元件2.创建“线条组”元件任务任务2 2制作基本动画制作基本动画(二二)创建元件创建元件3.创建“闪光”元件任务任务2 2制作基本动画制作基本动画(二二)创建元件创建元件4.创建“红星”元件任务任务2 2制作基本动画制作基本动画(二二)创建元件创建元
12、件5.创建动画动画最终效果任务任务2 2制作基本动画制作基本动画步骤：步骤：使用骨骼工具将多个元件实例进行骨骼绑定使用骨骼工具将多个元件实例进行骨骼绑定在某帧处移动一个骨骼带动相邻骨骼运动在某帧处移动一个骨骼带动相邻骨骼运动重复第重复第2步，直到动画设置完成步，直到动画设置完成任务任务2 2制作基本动画制作基本动画(一)创建影片文档(二)创建元件(三)创建骨架(四)创建骨骼动画(五)测试并保存动画任务任务2 2制作基本动画制作基本动画创建影片文档创建形状测试并保存动画任务任务3 3设计网站的动态按钮设计网站的动态按钮“创建新元件”对话框按钮的四个帧任务任务3 3设计网站的动态按钮设计网站的动态
13、按钮(1)常用法:第1,2,3帧颜色不同，中心点要对齐，第4帧的颜色可任意选择，面积大小就是鼠标的反应区域大小。(2)隐藏按钮:第1帧是空白的关键帧，第2帧是要显示的内容，第3,4帧可与第2帧相同。(3)透明按钮(也称隐形按钮):只有第4帧显示反应区域，第1,2,3帧为空白帧。(4)按钮的第2,3,4帧可以放声音文件，被触发的时候，声音就会播放。(5)按钮里不能放置按钮元件，但可以放置影片剪辑。(6)文字按钮是含有文字的按钮，最好是分两层:一层放文字，一层放反应区域。任务任务3 3设计网站的动态按钮设计网站的动态按钮基本按钮的制作基本按钮的制作文字按钮的制作文字按钮的制作任务任务3 3设计网站
14、的动态按钮设计网站的动态按钮认识“动作”面板动作脚本的分类帧动作脚本按钮动作脚本任务任务4 4在在FlashFlash中插入音频和视频中插入音频和视频(一)将声音导入Flash(二)引用声音(三)声音属性的设置和编辑任务任务4 4在在FlashFlash中插入音频和视频中插入音频和视频(一)Flash支持的视频类型(二)导入视频(三)视频特效任务任务5 5利用利用FlashFlash发布和保存作品发布和保存作品(一一)在制作静态元素时进行优化在制作静态元素时进行优化(二二)在制作动画时进行优化在制作动画时进行优化任务任务5 5利用利用FlashFlash发布和保存作品发布和保存作品(一)发布设置选择菜单中的“文件”“发布设置”命令，在弹出的对话框中可以根据需要一次性选择多种发布方式，如图所示。选中后的每一种发布方式可以进入选项卡中进行进一步的设置。发布设置任务任务5 5利用利用FlashFlash发布和保存作品发布和保存作品(二)Flash(.swf)”选项高级高级脚本脚本目标目标END.
