网页设计与制作项目五

1、网页设计与制作项目五利用Flash CS6制作网页动画利用Flash CS6绘制简单图形1制作基本动画2设计网站的动态按钮3在Flash中插入音频和视频4利用Flash发布和保存作品5任务1利用Flash CS6绘制简单图形一、理解Flash动画产生的原理在Flash中，每一个画面称为一个帧。一个Flash动画包括许多独立的帧，每一个帧都与前一个帧略有不同。其中，关键帧定义了动画在哪儿发生改变。例如，何时移动或旋转对象、改变对象大小、增加对象、减少对象等。每一个关键帧都包含了任意数量的符号和图形。当Flash动画到达时间轴上的关键帧时，它可以做一些常规电影所不能做的事情帧动作。通过设置帧动作来

2、完成一些任务，如暂停在某个帧、跳到其他帧、在浏览器里打开URL地址等。任务1利用Flash CS6绘制简单图形二、认识Flash CS6的工作界面“开始页”窗口Flash CS6的工作界面任务1利用Flash CS6绘制简单图形二、认识Flash CS6的工作界面Flash CS6的工作界面一般分为以下五大部分:菜单工具栏舞台时间轴工具箱浮动面板任务1利用Flash CS6绘制简单图形三、文字对象的编辑(一)文字的处理在Flash CS6中可以按多种方式使用文字:创建静态文本，指定其内容和显示外观;创建动态文本或可输人的文本域，从文本域中输人动态文本;使用各种文本的编排方式，如右对齐、左对齐、

3、横排、竖排;设置文字的字体、字号、样式、间距、颜色和对齐方式等。任务1利用Flash CS6绘制简单图形三、文字对象的编辑(二)创建文本Flash CS6提供的文本工具位于工具箱中，当用户单击选择工具箱中的文本工具后，在舞台中单击鼠标，在单击位置处就会出现一个空白的字符输人框，此时用户可以在输入框中输入文字。拖动调整柄改变文本块的宽度任务1利用Flash CS6绘制简单图形三、文字对象的编辑(三)文本的属性设置文本的属性设置设置文本的位置和大小设置文本的字符属性设置文本的段落属性设置文本链接滤镜任务1利用Flash CS6绘制简单图形三、文字对象的编辑(四)文本的类型静态文本动态文本输入文本任

4、务1利用Flash CS6绘制简单图形三、文字对象的编辑(五)分离文字并进行编辑用户输入的文字都是文字对象，不能作为图形处理。要想将文字作为图形处理，必须先把文字分离。分离文字的操作是:先选中文字对象，然后执行菜单命令“修改”一“分离”，或选中文字对象后直接按Ctrl+B组合键，按一次分离成单个字，再按一次分离成图块。任务1利用Flash CS6绘制简单图形四、图形对象的编辑(一)选择对象选择矢量图形的一部分进行编辑操作任务1利用Flash CS6绘制简单图形四、图形对象的编辑(二)删除、移动和复制对象删除对象移动对象复制对象任务1利用Flash CS6绘制简单图形四、图形对象的编辑(三)使用

5、橡皮工具擦除图形对象橡皮工具及五个擦除模式按钮标准擦除擦除填色擦除线条擦除所选填充内部擦除任务1利用Flash CS6绘制简单图形四、图形对象的编辑(四)对图形对象的常用编辑1.对图形对象的大小进行缩放2.改变图形对象的中心点位置3.旋转图形对象4.使图形对象发生切变任务1利用Flash CS6绘制简单图形四、图形对象的编辑(五)对多个图形对象的编辑组合多个对象的层次对齐对象多个对象分配到层调整多个对象的位置任务1利用Flash CS6绘制简单图形五、使用Flash CS6绘制简单图形实例新建图形元件绘制树叶图形给绘制好的树叶上色创建树叶组图形元件创建树枝并合成树形状12345任务2制作基本动

6、画一、认识形状补间动画(一)形状补间动画的概念在Flash的“时间轴”面板上，在一个时间点(关键帧)绘制一个形状，然后在另一个时间点(关键帧)更改该形状或绘制另一个形状，Flash根据两者之间帧的值或形状来创建的动画被称为形状补间动画。这是Flash制作动画的一般方法。任务2制作基本动画一、认识形状补间动画(二)构成形状补间动画的元素形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，使用的元素多为用鼠标绘制出的形状。如果使用图形元件、按钮、文字，则必须先分离对象然后再进行变形。任务2制作基本动画一、认识形状补间动画(三)创建形状补间动画的方法在“时间轴”面板上动画开始播放的地方

7、创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，多个对象可以通过增加层来解决。在动画结束处创建或选择一个关键帧并设置要变成的形状，右键单击开始帧，选择“创建补间形状”，此时，“时间轴”面板上的变化如图所示，一个形状补间动画即创建完毕。形状补间动画任务2制作基本动画一、认识形状补间动画(四)认识形状补间动画的“属性”面板Flash的“属性”面板随鼠标选定的对象不同而发生相应的变化。当建立了一个形状补间动画后，单击时间帧，弹出“属性”面板，如图所示。形状补间动画的“属性”面板任务2制作基本动画二、使用形状补间动画创建文字变形动画创建新文档输入文字并打散测试并保存动画任务2制作

8、基本动画三、添加形状提示的文字动画形状提示的作用添加形状提示的方法添加形状提示的技巧任务2制作基本动画四、认识动作补间动画(一)动作补间动画的概念(二)构成动作补间动画的元素(三)形状补间动画和动作补间动画的区别(四)创建动作补间动画的方法(五)认识动作补间动画的“属性”面板任务2制作基本动画五、使用动作补间动画创建小球运动动画(一)创建新文档(二)创建小球元件(三)测试并保存动画(四)小球运动的变化1渐隐渐显(五)小球运动的变化2变小变大(六)小球运动的变化3按指定路径运动任务2制作基本动画六、认识遮罩动画1遮罩的概念2构成遮罩层和被遮罩层的元素3创建遮罩的方法4遮罩中可以使用的动画形式5应

9、用遮罩时的技巧任务2制作基本动画七、使用遮罩创建动画 (一)创建影片文档 选择菜单中的“文件”“新建”命令，在弹出的面板中选择“常规”“ActionScript 3. 0”选项，新建一个文件大小为400 X 400像素的Flash文件，背景颜色设为黑色，如图所示。任务2制作基本动画七、使用遮罩创建动画(二)创建元件1.创建“线条”元件任务2制作基本动画七、使用遮罩创建动画(二)创建元件2.创建“线条组”元件任务2制作基本动画七、使用遮罩创建动画(二)创建元件3.创建“闪光”元件任务2制作基本动画七、使用遮罩创建动画(二)创建元件4.创建“红星”元件任务2制作基本动画七、使用遮罩创建动画(二)创

10、建元件5.创建动画动画最终效果任务2制作基本动画八、认识骨骼动画步骤：使用骨骼工具将多个元件实例进行骨骼绑定在某帧处移动一个骨骼带动相邻骨骼运动重复第2步，直到动画设置完成任务2制作基本动画九、创建骨骼动画(一)创建影片文档(二)创建元件(三)创建骨架(四)创建骨骼动画(五)测试并保存动画任务2制作基本动画十、创建形状骨骼动画创建影片文档创建形状测试并保存动画任务3设计网站的动态按钮一、认识Flash CS6的按钮“创建新元件”对话框按钮的四个帧任务3设计网站的动态按钮二、按钮的使用方法(1)常用法:第1,2,3帧颜色不同，中心点要对齐，第4帧的颜色可任意选择，面积大小就是鼠标的反应区域大小。

11、(2)隐藏按钮:第1帧是空白的关键帧，第2帧是要显示的内容，第3,4帧可与第2帧相同。(3)透明按钮(也称隐形按钮):只有第4帧显示反应区域，第1,2,3帧为空白帧。(4)按钮的第2,3,4帧可以放声音文件，被触发的时候，声音就会播放。(5)按钮里不能放置按钮元件，但可以放置影片剪辑。(6)文字按钮是含有文字的按钮，最好是分两层:一层放文字，一层放反应区域。任务3设计网站的动态按钮三、按钮制作实例基本按钮的制作文字按钮的制作任务3设计网站的动态按钮四、使用按钮来控制影片的播放认识“动作”面板动作脚本的分类帧动作脚本按钮动作脚本任务4在Flash中插入音频和视频一、在Flash中应用声音(一)将声音导入Flash(二)引用声音(三)声音属性的设置和编辑任务4在Flash中插入音频和视频二、在Flash中应用视频(一)Flash支持的视频类型(二)导入视频(三)视频特效任务5利用Flash发布和保存作品一、Flash作品的优化(一)在制作静态元素时进行优化(二)在制作动