网页制作技术与案例精解9

《网页制作技术与案例精解9》由会员分享，可在线阅读，更多相关《网页制作技术与案例精解9（26页珍藏版）》请在金锄头文库上搜索。

1、教材：网页制作技术与案例精解 主编：赖步英 清华大学出版社(2009.8),网页制作技术与案例精解,2,第9章 Flash CS3让网页动起来,在网页设计中，除了在网页中插入文字、图片、表格、层等元素外，动画也是不可少的一种网页元素。网页设计中的动画设计，一般采用Flash动画制作软件来制作。利用包含Flash创作工具、渲染引擎，我们可以制作出各式各样的Flash动画来为网页增添动态美感。 主要内容: 任务1 Flash动画原理 任务2 Flash基础 任务3 制作一个按钮元件 任务4 制作一个逐帧动画 任务5 制作一个补间动画 任务6 创建遮罩动画 任务7 创建交互动画 任务8 声音 任务9

2、 Flash影片的发布,3,任务1 Flash动画原理,知识点：Flash CS3动画原理、功能和应用 1传统动画、实时动画和电脑动画 传统动画（Conventional Animation）是连续画面（Frame By Frame）的动画。 实时动画（Realtime Animation）是电脑应用于动画制作之后产生的一个全新概念。 电脑动画（Computer Animation）是指使用计算机产生动画效果。2Flash CS3的特点与主要功能 Flash CS3（CS就是Creative Suite的意思）是两个媒体设计界巨头合并后于2007年开发的新版Flash动画制作软件，它的特点与主

3、要功能见教材 3Flash CS3应用领域 在现阶段，Flash CS3应用的领域主要有以下。 娱乐短片;片头;广告;MTV;导航条;小游戏：应用程序开发的界面;开发网络应用程序等.,返回目录,4,知识点：认识Flash CS3工作窗口 1Flash CS3的工作窗口 Flash CS3工作窗口一般包括标题栏、菜单栏、时间轴、工具栏、工作区、填充色、帧动作面板、属性面板和浮动面板等。 1）工具栏:工具栏分为工具、查看、颜色和选项4个区域。 2）浮动面板:浮动面板位于工作窗口的右侧，可以根据用户的需要任意关闭或打开。 3）属性面板:“属性”面板位于视图的最下方，在工作区中编辑的每个对象，在其选中

4、状态下，都将在“属性”面板中显示其常规信息，并且可以在属性面板中对其信息进行修改。 4）菜单栏:动画制作所需要的所有操作选项均保存在菜单栏中。 5）舞台、工作区、场景:工作窗口下半部分的灰色区域是工作区，工作区中的白色区域称为舞台，它是绘制静态画面的区域。 6）时间轴窗口:时间轴位于工作区的上方。,任务2 Flash基础,返回目录,5,知识点：创建元件和转换为元件 1元件的创建 执行下面的步骤可创建元件。 （1）选择“插入”|“新建元件”命令，弹出“创建新元件”对话框。 （2）在“名称”文本框中为新元件命名。 “类型”选项组中包括以下3种选项。 影片剪辑：使用影片剪辑元件可以创建可重用的动画片

5、段。 图形：图形元件可用于静态图像，并可用于创建连接到主时间轴的可重用的动画片段。 按钮：使用按钮元件可以创建响应鼠标点击、滑过或其他动作的交互，可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。 2转换元件,转换方法如下： （1）选中需要转换的图像。 （2）选择“修改”|“转换为元件”命令，在“转换为元件”对话框中选择新元件的类型.,任务3 制作一个按钮元件,返回目录,6,操作步骤： （1）启动Flash CS3，新建一个Flash文档，利用 “椭圆”工具在场景1中绘制一个椭圆，设置椭圆线条粗细为5.75，填充色为无。 （2）利用“橡皮”工具在椭圆顶端和底端擦出一个缺口。 （3）利

6、用“铅笔”工具在椭圆形顶端画一条根茎。 （4）利用“选择”工具将“苹果”选中，把苹果转换为按钮。 （5）在时间轴的“指针经过”下方的空格处右击，选择“插入关键帧”。选中“苹果”，利用“变形”工具将“苹果”的大小设置为高为130，宽为130。 （6）利用“文字工具”在“苹果”图形上面输入“APPLE”。 （7）在时间轴上的“按下”下方的空格处右击，选择“插入关键帧”。选中文字“APPLE”并将它删除，利用“橡皮”工具将“红苹果”擦成如图9-7所示的形状。 （8）在时间轴“点击”下方的空格处右击，选择“插入关键帧”。单击“场景1”，选择“控制”|“测试影片”命令测试“动感红苹果”。 （9）保存文件

7、，选择“文件”|“导出”|“导出影片”命令。,【案例9-1】 创建动感“红苹果”按钮,返回目录,7,知识点：帧、关键帧和逐帧动画 1帧和关键帧 动画是由若干张连续播放动画的画面组成的，帧正是组成动画的单一画面，是动画中最小的时间单位。关键帧可定义在动画中的变化的帧。创建逐帧动画时，每个帧都是关键帧。在补间动画中，可以在动画的重要位置定义关键帧，让Flash创建关键帧之间的其他帧。关键帧在时间轴中有明显的标志：有内容的关键帧以该帧前面的实心圆表示；空白关键帧之间的其他帧则以该帧前面的空心圆表示，以后添加到同一层的帧的内容将和关键帧相同。 2制作逐帧动画 创建逐帧动画，需要将每个帧都定义为关键帧，

8、然后给每个帧创建不同的图像。每个新关键帧最初包含的内容与它前面的关键帧一样，因此可以递增地修改动画中的帧。,任务4 制作一个逐帧动画,返回目录,8,操作步骤： （1）选择“文件”|“新建”命令，设置场景尺寸宽为550像素、高为200像素，背景颜色为黑色。 （2）在图层1中创建一个橘红色矩形（宽550，高150），作为主画面。在时间轴上的第45帧处右击选择“插入帧”。 （3）新建图层即“图层2”，在此层的时间轴上单击第1帧，选取“文本”工具，输入第一个文字“广”。设置文字为宋体，白色，字号为50。 （4）在“图层2”的时间轴中第5帧上右击，在弹出的快捷菜单中选择“插入关键帧”，选取“文本”工具在

9、“广”后面输入文字“州”。 （5）按步骤（4）相同的方法，依次在第10、15、20、25、30、35、40、45等帧处右击选择“插入关键帧”，并依次输入文字“外”、“语”、“艺”、“术”、“职”、“业”、“学”、“院”，如图9-10所示。 （6）测试影片按组合键Shift+Enter，可以看见文字的打印效果。 （7）保存文件，选择“文件”|“导出”|“导出影片”命令，以dazi.swf文件名保存在,【案例9-2】 逐帧动画打字效果,返回目录,9,【案例9-3】 逐渐消失的“爱”,操作步骤： （1）启动Flash CS3，新建文档，将文档属性设置为：高为400像素，宽为400像素，背景颜色为白色

10、。 （2）选取“文本”工具，在舞台中输入“爱”字（字体为华文楷体，字号为96，颜色为红色），并使用“变形”工具放大为宽200高197.5，如图9-11所示。 （3）用“选择”工具选中“爱”字，选择“修改”|“分离”命令，将“爱”字打散，在图层一时间轴上的第5帧处右击并在弹出的快捷菜单中选择“插入关键帧”。 （4）单击第5帧处的关键帧，选取“橡皮”工具，擦掉“爱”字底部的小部分，同样在第10帧处右击并在弹出的快捷菜单中选择“插入关键帧”，再选取“橡皮”工具，擦掉“爱”字的下半部分，依次类推，直到第30帧，把“爱”字从下往上逐渐擦掉，如图9-12所示为第5帧和第15帧“爱”字被擦除的效果。 （5）

11、以ai.fla保存在“chap9案例9-3”文件夹中。 （6）测试并导出影片，选择“文件”|“导出”|“导出影片”命令，以ai.swf文件名保存在“chap9案例9-3”文件夹中。,返回目录,10,【案例9-4】 夜晚天空上闪烁的星星,返回目录,11,客户端,服务器端,【案例9-4】 夜晚天空上闪烁的星星 操作步骤： （1）新建一个Flash文档，设置文档大小为550像素宽、400像素高，背景色设置为黑色。 （2）在“图层1”中选取“椭圆形”工具，并在“属性”面板中设置填充色为“白色”，描边颜色为“无”，在舞台中绘制一个椭圆形。 （3）选中整个椭圆，选择“编辑”|“复制”命令，选择“编辑”|“

12、粘贴到中心位置”命令，则复制一个相同的椭圆形。将复制的椭圆形旋转45，并与椭圆形中心点对齐，同理再复制两个相同的椭圆形，得到了一个星形。 （4）选择“编辑”|“全选”命令，将“星形”全部选中，选择“修改”|“转换元件”命令，设置类型为图形，把星形转换为图形元件1。 （5）将留在场景中的星形元件全部删除，在场景中利用“椭圆工具”绘制一个圆形，改变颜色，使圆形变为光晕效果。然后，选择“修改”|“转换为元件”命令，设置类型为图形，转换为元件2。,任务5 制作一个补间动画,返回目录,12,（6）将留在场景中的圆形元件全部删除，选择“插入”|“新建元件”命令，在打开的对话框中设置类型为“影片剪辑”，新建

13、一个“影片剪辑”元件3，进入元件3的编辑模式，打开“库”面板，分别把“星形”元件1和“光晕”元件2拖拽到元件3场景中，使得“光晕”和“星形”元件中心点重合。 （7）在元件3“图层1”的时间轴上，分别在20、40、60帧处插入关键帧。利用“选择”工具，分别在第1、20、40、60帧中单击元件1或元件2（星形或圆），设置“颜色”为“色调”，设置第1帧为白色。设置第20帧的RGB为204、153、0。 （8）在元件3的“图层1”的时间轴中，选取“任意变形”工具，分别对第20帧、第40帧和第60帧处的“星形”元件1进行缩放、旋转。然后，在第80帧处右击，选择“插入关键帧”。 （9）单击“场景1”，回到

14、“场景1”中，打开“库”面板，将“影片剪辑”元件3拖拽到场景中，选取“任意变形”工具，将在场景中的“元件3”缩放、旋转到适当大小。 （10）用“选择”工具选中场景中的“元件3”，选择“编辑”|“复制”命令，选择“编辑”|“粘贴到中心位置”命令， （11）测试影片，保存文件,选择“文件”|“导出”|“导出影片”命令。,返回目录,13,【案例9-5】 创建位置和旋转动画,操作步骤： （1）新建一个Flash文档，设置文档宽为500、高为395，背景色为白色， （2）选择“文件”|“导入”|“导入到库” ，选择图像文件（涡1.jpg），将“涡1.jpg”拖放到舞台中作为背景，在时间轴上第40帧右击，

15、选择“插入关键帧”。 （3）新建“图层2”，使用“文字”工具，输入文字“Flash CS3” ，选中文字，选择“修改”|“转换为元件”命令，将类型设置为图形。 （4）在“图层2”的第1帧处选取“任意变形”工具，单击“Flash CS3”文字，将其缩小并拖放到背景画面底部，并在“属性”面板中设置其颜色和色调。 （5）在第10帧处右击并选择“插入关键帧”命令，选取“任意变形”工具，在舞台上将该帧“Flash CS3”文字放大并移动到画面中央，并设置其颜色为红色。 （6）在第15帧处右击并选择“插入关键帧”命令，用“变形”工具将“Flash CS3”文字缩小并旋转，并设置其颜色为白色。 （7）在第2

16、0帧处右击并选择“插入关键帧”命令，使用“变形”工具使文字旋转倒置并放大，设置其颜色为粉红色. （8）在第30帧处右击并选择“插入关键帧”命令，使用“变形”工具使文字旋转正放并放大，设置其颜色为白色。 （9）在第40帧处，右击并选择“插入关键帧”命令，使用“变形”工具使文字旋转正放并放大，设置其颜色为白色。 （10）选中第1、15、20、30帧，右击并选择“创建补间动画”命令。 （11）测试影片。选择“文件”|“导出”|“导出影片”命令，保存动画。,返回目录,14,知识点：网站开发流程,知识点：遮罩动画 遮盖项目可以是填充的形状、文字对象、图形元件的实例或影片剪辑。可以将多个图层组织在一个遮罩之中，以创建复杂的效果。 创建遮罩层时，可以将遮罩项目放置在需要用作遮罩的层上。与填充或笔触不同，遮罩项目好像是个窗口，透过它可以看到位于它下面的链接层区域。除了透过遮罩项目显示的内容之外，其余的所有内容都被遮罩层的其余部分隐藏起来。一个遮罩层只能包含一个遮罩项目。按钮内部不能有遮罩层，也不能将一个遮罩层应用于另一个遮罩层。,任务6 创建遮罩动画,返回目录,15,（1