计算机网页与动画_公开课教案

第一篇：计算机网页与动画_公开课教案

计算机网页与动画_公开课教案

[教学课题]：第十五章 FLASH在网页中的应用实例制作

[教学课型]：实验课 [教学目的]： 知识目标——了解AS代码的作用，掌握应用外部文件到FLASH制作当中，熟练动画制作的界面和制作步骤。

2．能力目标——培养学生的自主学习能力，能够听老师演示一次就大致能够按课件的制作步骤说明制作出动画成品。

3．德育目标——培养学生制作动画的的创造性思维，探究能力。[教学重点和难点]：

教学重点：学生按照课件的步骤制作出动画作品 2

教学难点：动画的原件命名以及AS代码部分

教学关键：讲解步骤清晰，一步一步制作，教师巡堂解决疑难。[教学方法]：任务驱动法? 演示法

[实验及教具]：包含完整的硬软件资源的多媒体计算机 [教学课时]：1 [教学过程]：

课前准备

已制作了相应的网络版教学课件，内容完整，包括简介，教学设计，步骤，效果，感想等。可供学生任何时候学习。并准备了若干张本班级的JPG格式照片，供学生动画制作时使用。

做好了教学站点（http://192.16.9.254）的建设工作，包括课件的网络访问配置，文件上传模块的制作，自动生成动态网页观看学生作品模块的制作等。

学生学习的主页面快捷方式已经放在学生机桌面，名字是“06软件计机网页制作学习全记录” 双击打开即可学习。

引入新课：（_2_分钟）

1、讲述：FLASH动画设计是伴随着计算机互联网络的产生而形成的视听设计新课题，同时也是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，表面上看，它不过是关于版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。本次教学实例运用FLASH8设计制作了当今网络上十分流行的一些动画效果，采用ACTIONSCRIPT2.0和FLASH8的发布格式，最后以网页格式将案例集合到同一平台上（http://192.168.9.254）。观看时安装了FLASHPLAYER9.0或者以上版本以便在网页上显示。

2、讲述：本次课程我们将学习制作漂移效果的动画作品。并把做好后把动画文件作为作业上传到教师机上。

教学演示（__8_分钟）

1、讲述：学生可打开教学页面“点击开始学习”按照课件步骤进行制作！

2、演示步骤：打开多媒体教学系统，进行广播教学：

（1）<下载素材>打开教学页面，点击“素材下载”，选择保存，选择桌面，确定，在桌面上解压缩文件“picture”可得到动画制作的素材。

（2）<导入图片>打开FLASH8，创建新文档，设置属性大小为980×590，背景为黑色，ctrl＋L打开元件库，保存文档为自己学号如：48.fla，然后ctrl+f8新建图形元件命名为“1”，这时要求把给出的图片用PS改成自己选择的照片，覆盖掉给出的101至109.jpg图片。然后ctrl＋r导入桌面上的图片文件101.jpg，在弹出的窗口选择“否”，以此类推，把102至109.jpg一张一张分别导入到图形元件2至9当中。

（3）<制作影片> ctrl+f8新建图形元件命名为“b”，画一个无边白色矩形。ctrl+f8新建影片元件命名为“mcb”，拖元件b进舞台，分别在3，6，9，12帧处按f6，在属性里的ALPHA分别设置为80，60，30，0.在13帧处点击按f7，添加“stop()；”动作。

ctrl+f8新建影片元件命名为“mc1”，拖元件1进舞台，在第二帧按f5，插入图层二，在图层二的第二帧按f7，拖元件mcb进舞台，修改属性的大小与位置与元件1一样（即覆盖图片），插入图层三，在第一帧添加“stop()；”动作。

以此类推ctrl+f8新建影片元件命名为“mc2”，mc3至mc9，分别拖图形元件2，3至9到舞台当中。新建图层二，在图层二的第二帧按f7，拖元件mcb进舞台，修改属性的大小与位置与元件2，3至9一样，插入图层三，在第一帧添加“stop()；”动作。这时完成了所有影片的制作工作。

（4）<添加代码>ctrl+f8新建影片元件命名为“mcall”，分别拖影片元件“mc1”至“mc9”进舞台，分别把属性栏里的“实例名称”改为“m1”至“m9”，各个影片元件稍微相连在一起。插入图层二，点击第一帧，把桌面上的文本文件“课件AS代码.txt”里面的文本全部复制粘帖到这一帧的动作里面。

（5）<保存上交> 返回场景一，拖影片元件“mcall”进舞台，插入图层二，用文字工具写上“06软件班（学号）如48号（姓名）如姚明”，大小为36，白色。『选作这一步：插入图层三，ctrl＋f8新建影片元件命名mc，ctrl＋r导入音乐mp3文件，在图层三第一帧拖音乐mc进舞台。』 文档保存到桌面如48.fla，ctrl＋enter运行得到48.swf生成目标文件。重新打开教学主页面，点击“浏览”选择48.swf，点击“上传”，等待15秒完成。

课堂练习（_25_分钟）

题目：按照课件步骤动手制作自己的照片的漂移动画效果。

要求：用自己的照片，加上名字学号，声音模块选做，做好上交作品。

这时教师巡堂与学生互动，解决学生的与提问疑难。

课堂小结（_5_分钟）

评讲：这时大部分同学已经做好作品上交了，教师打开教学主页面，点击进入“06软件FLASH动画作品欣赏”页面，这时可以看见页面内有1至36号的矩形区域，点击某一个号码可打开该学号的学生上交的动画作品观看效果，点击“返回”回到欣赏主页面。这时选择几个作品重点讲解评论。： [制作步骤流程图]

第二篇：计算机网页教案

五年级上册计算机教案(一课时)学习目标：

1、了解Frontpage2003的主要作用，了解网页的初步知识，对网页制作页面工具的作用具有初步了解；

2、学会将搜集的图片文本素材存放相关文件夹，并了解设计网页的基本理念，学会做网页制作规划图；

3、学会根据规划创建网站，能够根据规划设计简单首页并进行保存。

德育目标：

通过学习网页制作理解网络设计工作者的辛苦劳动，在设计规划时学生可以了解到做事前需要提前准备的重要性。

新课讲授：

1、导入：多媒体展示部分设计新颖的网页页面，点击超级链接转换不同页面带起学生的兴趣，提问学生对网页的个人了解，之后引入网页制作的概念，进入主题。

2、新授：

(1)多媒体展示网页制作的相关知识，并由学生讨论设计网页需要哪些内容。总结并补充学生回答，引导学生打开Frontpage2003，介绍网页制作页面相关工具，并由学生自主操作试验它们的作用；

(2)展示多媒体，使学生了解需要准备各类素材并存入相应文件夹。由学生搜集并存入个人设置文件夹内，通过自己构思的设计形式绘制网页设计规划图，并由学生分享他们的规划；

（3）讲解如何创建一个网站，指导学生创建网站，并个人保存相应路径。之后引导学生设计自我规划的特色首页，进行简单自我设计后保存页面，师生共同评价部分首页设计。

3、总结作业： 总结本课知识点，提问学生本课主要内容检查目标达成情况。布置学生准备其他页面资料，并在其他渠道了解网页设计方面知识。

反思总结：

第三篇：计算机公开课教案

公开课教案

课程：《计算机硬件组装》 地点：多媒体教室 教者：沙述海 班级：12微机3 教学目标： A知识目标

1、掌握组装一台计算机所需要哪些计算机配件；

2、掌握各计算机配件的安装顺序；

3、掌握组装过程所要注意的事项； B情感目标

培养学生的观察、思考和分析能力，以及增强学生学习计算机的兴趣 C能力目标 培养学生敢于动手，会动手去接触硬件、组装计算机。

教学重点：让学生掌握组装一台计算机程序及对学生在组装过程中进行指导

教学难点：

1、CPU与风扇的安装

2、数据线的安装

3、内存条的安装 教学过程：

一、复习导入 1.计算机组成

2.通过投影仪显示计算机各配件,让学生来回答它们的名称。

二、讲授新课

1、安装前的准备：

1）从各包装盒中取出各配件； 2）释放一下身上的静电；

3）准备好工具（主要是螺丝刀，当然还有尖嘴钳子、万用表、手电筒等）。讲授时并展示各实物

2、组装计算机硬件的顺序

示范安装同时讲解照投影仪所显示的和安装过程要注意事项 1）安 装 主 板

2）安装CPU和散热风扇 3）安 装 内 存

4）安装显卡、声卡与网卡（由于所用的是3IN1主板，无需安装显卡、声卡）5）安 装 硬 盘 6）安 装 电 源

7）连接其它连线（比较复杂，本节课略讲）8）连接键盘和鼠标

9）连接显示器（太简单了，略实习）10）盖上机箱盖

3、注意事项：

长时间显示在投影仪上，让学生在实习中随看注意到 1）安装之前要释放身上的静电

2）安装CPU要特别细心，注意固定拉杆位置、CPU安装方向（轻轻地放下），还要记得在CPU顶部中间均匀抹上导热硅胶。

3）安装内存条时要把内存上的缺口与内存插糟上的缺口对准后再插。

4）数据线注意有颜色标记的边线对准主板和硬盘、软驱、光驱的接口的第一针。（现在的硬盘接口针脚都没有标记，因此要掌握数据线有颜色标记的边线应靠近电源接口的位置来插的原则）

5）键盘和鼠标安装时要注意各自位置和方向。

6）在整个安装过程中要先看清后再做，做到细心，拨插配件时要均匀，不能过大。

三、学生分组实习

把全班分成二组，以小组为单位进行计算机组装实习，同时填写实习报告，教师巡视指导学生。

四、展示部分组实习成果，并指出错误之处。（时间足够的情况下）

五、本堂小结

见幻灯片中安装顺序和注意事项

六、作业布置 课后整理好实习报告

第四篇：《动画及网页制作》课程教案

《动画及网页制作》课程教案

课程名称：动画及网页制作 任课班级：美术学院2005级动画班

任课时间：2007年5月28日 至 2007年6月28日 周数：5周 教学目的及要求：

《动画及网页制作》是多媒体专业学生重要的必修基础课。通过对本课程的学习，学生能够使用Flash，制作网页动画，课件。了解网络动画的制作过程，游戏的制作过程，制作出有趣的游戏和精彩的动画片。

教学方法：

以教师的实例演示与学生的上机练习相结合的方法为主，同时组织学生观看优秀的flash动画和网页，辅导学生独立完成一个完整的flash动画或网页制作。

教学重点及难点：

教学重点：掌握并理解flash的操作界面，熟练使用flash中几种实现动画的基本方式来制作flash动画，学会并理解flash中的各种链接方式和AS语言来，学会编写动画应用脚本，利用flash及相关辅助软件制作网页动画。

教学难点：flash中的各种链接方式和flash的AS语言，独立编写动画应用脚本，网页的制作和链接。

教学内容：

第（1）章 认识FLASH 多媒体简介及其多种相关软件，初步把握用FLASH进行设计的一般方法和思路；了解FLASH动画的基本特点，以及Flash5.0的基本工作环境。

第（2）章 窗口介绍

本章简单介绍FLASH的基本界面组成，包括标题栏、菜单栏、工具栏、工具箱、舞台、层选择、和时间轴。

1、舞台(Stage)就是工作区，最主要的可编辑区域。在这里可以直接绘图，或者导入外部图形文件进行安排编辑，再把各个独立的帧合成在一起，以生成电影作品。

2、时间轴窗口(Timeline)用它可以调整电影的播放速度，并把不同的图形作品放在不同图层的相应帧里，以安排电影内容播放的顺序。

3、绘图工具栏(Drawing Toolbar)放置了可供图形和文本编辑的各种工具，用这些工具可以绘图，选取，喷涂，修改以及编排文字，还有些工具可以改变查看工作区的方式。在选择了某一工具时，其所对应的修改器(Modifier)也会在工具条下面的位置出现，修改器的作用是改变相应工具对图形处理的效果。

4、标准工具栏(Standard Toolbar)列出了大部分最常用的文件操作，打印，剪贴板，撤消和重做，修改器以及控制舞台放大比例的图标和选项，便于进行更为快捷的操作。

5、控制器面板(Controller)控制电影的播放操作的工具集合，一般不大常用，处于隐藏状态。

第（3）章 工具箱

了解工具箱的作用，掌握铅笔工具、钢笔工具、墨水瓶工具、橡皮工具、两种箭头工具、笔刷工具、吸管工具的用法。图形和文字是Flash动画的基础，所以掌握绘图工具的使用对于制作好的Flash作品是至关重要的。由于Flash的绘图工具种类比较多，其相应的修改器也各不相同。和画线条一样，按住SHIFT键时，用椭圆工具可以画出正圆，用矩形工具可以画出正方形来。掌握椭圆和矩形工具的使用方法，可以用不同颜色的边框，填充色，不同线宽线型作出各种各样的圆和矩形来。

第（4）章 时间轴

时间轴是FLASH中最重要的概念，时间轴(Timeline)是Flash中最重要的工具之一。他决定了动画的组织形式。所有的设计都是围绕着时间轴展开的。熟悉和充分利用好这四种模式，会给开发和调试工作带来许多便利。熟练掌握层的分类以及各种操作。会制作遮罩动画、按轨迹移动动画，简单的MOTION动画，逐帧动画。了解洋葱皮的作用，在制作动画的过程中，会使用洋葱皮。用它可以查看每一帧的情况，调整动画播放的速度，安排帧的内容，改变帧与帧之间的关系，从而实现不同效果的动画。

第（5）章 几种重要窗口设置

Flash中动画设置的过程，主要就是各种属性设置的过程。本章重点介绍了几个最常见窗口的意义，掌握帧、库窗口、动画、场景、符号、实例等属性的设置。符号的分类以及各种符号的制作与用法，性质。我们学习了有关图符和图库的一些基本知识，而创建图符的目的是要在动画制作的过程中运用它生成相同或不同的实例，创建图符的方法有两种：可以从工作区中选取对象转换成图符，或者先创建一个空的图符，然后在图符编模式下添加内容。实例创建好后，可以通过属性菜单对实例进行裁剪，粘贴，缩放，旋转。

第（6）章 ACTION初步

ActionScript是Flash的脚本语言,使用ActionScript可以给Flash动画添加交互性。可以说掌握了该语言，你的Flash技术将上一个台阶,多加运用后，当可成为Flash高手。Flash 5的ActionScript为创建包含复杂游戏、表单、调查表和实时交互性的网站提供了许多新的特性。可以对自己制作的动画进行设置，让用户事件（如按钮单击和按钮）触发脚本，告诉动画执行什么动作。

第（7）章 发布与输出

FLASH的动画的主要优势是在广域网上发行，本章主要介绍了这种发布技术。掌握优化动画的一些小技巧，测试动画下载技能，会根据需要将FLASH源文件发布成网页文件，各种图像文件，以及可执行文件。

第（8）章 基本技巧实例

本章详细介绍了几个有代表性的FLASH动画设计的例子，基本上涉及了所有基本技能和技巧。制作片头的LOADING效果，可结合ACTION中的ifframeloaded（）命令使用，鼠标属性和对象属性的同步变化，可结合ACTION中的startdrag()命令和stopdrag()命令，Setproperty()命令使用,文本滚动窗口可结合ACTION中的loadvariablesnum()和telltarget()命令使用。详细介绍文本框的用法。随鼠标飘落的雪花，了解隐形按钮的用法。

第（9）章 ACTION高级应用实例

本章主要介绍应用一些程序设计技巧，利用RADIO,CHECKBOX,COMBOBOX成MOVECLICP,并且具有通用性。

FLASH

制作

第五篇：flash动画公开课

阜阳农业学校 Flash CS5教程

实例5 旋转的弧线

——引导路径动画与遮罩动画综合应用

教学时间：2013年12月12日(星期四)3、4节

教学课时： 2课时 教学班级：12级农电班

教学目标：  知识与技能目标

1.明确运动引导层和引导线的作用，学会使用引导层，掌握引导层的使用要点，并能在实际中灵活的运用，能正确应用引导层制作任意轨迹运动的动画；

2.能正确绘制引导线，能增加、删除、选择、修改图层，进一步熟练对各种类型帧的操作。

3.通过讨论、模仿以及对实例的操作，培养对动画层次及制作方法的分析能力、在动画制作过程中遇到问题的处理能力以及探求新知的能力。 情感目标

1.教师通过不断的提问来激发学生思考；学生通过观察思考，交流合作，探索操作完成对知识的理解和掌握；增强学生的观察能力、总结能力和语言表达能力。

2.能在制作动画的过程中体验动画制作的乐趣，养成自主学习的习惯，感受动画制作的奇妙；在学习过程中能主动帮助有困难的同学，能主动参与到小组合作学习中去；培养学生认真学习的态度和探索新知识的兴趣。重点与难点

重点：引导层及引导线的作用，使用引导层创建任意轨迹运动动画的方法。

阜阳农业学校 Flash CS5教程

难点：运用引导层，制作曲线运动动画；运动对象与引导线的吸附操作。

方法与手段

主要采用“任务驱动法”和“实践法”组织教学；小组合作、自主学习探究法 教学流程

一、情境导入、提升兴趣

展示三个动画（引导层动画、遮罩层动画、引导层和遮罩层综合应用动画），学生仔细观察找出其中使用的动画方法。用我们学习过的知识分析动画是如何实现的？能简要的叙述一下实现的过程吗？

学生动手操作尝试实现动画。（三个动画的区别还是比较明显的，其中一个做的是引导线运动，一个虽是线性轨迹却只能用遮罩的方法才能实现，第三个动画看似引导层动画，却难以用引导层动画的方法实现，通过仔细观察能够发现遮罩的方法运用于其中，而遮罩层位置的变换却又是引导层在起作用。）

要实现曲线动画效果就是我们今天的学习任务。

【设计意图】实物演示使学生有了感性认识，对抽象的遮罩概念更容易理解，有利于难点的突破，达成目标3中“理解遮罩的概念”这一目标。

二、要点讲解、探究学习

探索一：动画1是什么动画（引导路径）？ 学生按照自己对动画分析的结果，尝试制作动画1。

添加引导层的方法是：单击图层编辑区左下角的“添加运动引导层”按钮，为对象添加一个引导层。（1）制作小球创建传统补间动画。

（2）绘制引导线：使用工具栏中椭圆工具在引导层中绘制引导线。提示：如果使用铅笔工具绘制引导线的时候，为了使物体的运动轨迹比较的自然，我们需要将引导线画的平滑一些，在我们选择铅笔工具之后，可以在选项中将线形设置为平滑。（3）调整对象到路径

阜阳农业学校 Flash CS5教程

原因是运动对象还不知道有这样一条路可以走，它知道两点间直线最短，所以它走直线，可实际需要它进行曲线运动，这时候我们必须帮助它才可以，我们将它引导到这条路径上来。

引导的方法：将补间动画第一帧中的对象的中心和路径的起点对齐，将最后一帧中的对象和路径的终点对齐。这样再看一下动画效果。设计意图：学生在教师的引导下，学生边听边做，边观察，在实践当中理解知识，及时地发现问题。

思考：1.引导层的内容在播放画面中有没有显示？ 2.引导层和被引导的顺序可不可以交换？

3.一个引导层中能否有多条引导线来分别引导不同的对象运动？

设计意图：教师在此环节，不断的进行询问，主要是引导和激励学生的探索学习，让学生通过观察、比较、探究等一系列学习活动，归纳出引导层与引导线的用法，加深对所学的引导层和引导线知识的理解，从而掌握曲线运动的本质。

探索二：路径是闭合的怎么引导？

教师查看学生的动画，根据学生情况，进行启发性的指导，就存在的问题进行详细的讲解。（如何绘制圆形的运动轨迹）

三、制作任务：原子模型

学生依照展示案例分析并完成任务： 1.绘制径向渐变小球。提示：小球要转化为图形元件。2.为小球创建传统补间动画。提示：要先转化为影片剪辑元件。3.添加运动引导层，并绘制引导线。

4.将补间动画的两关键帧分别放在引导线的两端点。5.制作运动轨迹线。

提示：要将该层放于小球下层。

6.将该影片剪辑放于场景中并旋转120o复制两份。探索：如何实现小球不同步运动？ 7.保存，测试。

阜阳农业学校 Flash CS5教程

设计意图：在练习中深化学生对知识的理解与记忆，以便及时发现问题，并及早解决问题。培养学生的自主探究学习能力；提出思考题，进行层次拓展练习，满足各个层级学生的要求。

四、小结

引导层动画的创建流程：创建运动补间动画→添加引导层→编辑引导线→调整对象到路径。

注意事项：

①引导层必须在被引导图层的上方。②引导线必须绘制在引导层中。

③被引导的运动对象必须吸附在引导线上。

五、作品展示与点评，总结

选择部分有代表性的作品进行展示，分别从（1）动画创意；（2）使用技术；（3）动画效果等方面给予评价。充分肯定学生的创新精神、动画中使用的方法和技巧，对优秀作品给予表扬，对不足的作品给予鼓励。

动画如果失败，让学生判断和分析是否是以下原因造成。

1、引导线不能是封闭的曲线，引导线必须有起点和终点。

2、起点和终点之间的线条必须是连续的，不能间断，可以是任何形状。

3、引导线转折处的线条弯转不宜过急、过多，否则Flash无法准确判定对象的运动路径。

4、被引导对象必须准确吸附到引导线上，也就是元件编辑区中心必须位于引导线上，否则被引导对象将无法沿引导路径运动。

5、被引导层必须是传统补间动画，不能是形状补间。„„

六、自主探索——旋转曲线

分组讨论：实现“旋转曲线”的方法。

学生按照自己对动画分析的结果，尝试制作动画。

七、作品展示与点评

选择部分有代表性的作品进行展示，分别从（1）动画创意；（2）使

阜阳农业学校 Flash CS5教程

用技术；（3）动画示例效果相似度给予评价。充分肯定学生的创新精神、动画中使用的方法和技巧，对优秀作品给予表扬，对不足的作品给予鼓励。

八、演示“旋转曲线”的制作并指出关键点

1、先画一矩形。

2、在矩形中绘制一椭圆并将椭圆转换为图形元件，命名为“椭圆”。

3、再将镂空的矩形转换为图形元件，命名为“矩形”。

4、在场景中选中矩形元件，再次转换为影片剪辑元件，命名为“运动矩形”。

5、双击该元件进入编辑状态。

6、在矩形中心位置绘制小椭圆引导线创建引导动画。（注意:○1中心点视为矩形镂空部分的中心点；2作为引导线的小椭圆用极细线条；3○○作为引导线的小椭圆建议尺寸：12╳10像素。○4小椭圆不能是封闭的曲线，引导线必须有起点和终点，通过放大镜放大为其切出缺口。）

7、返回场景，将当前影片剪辑元件再次转换为影片剪辑元件，命名为“运动曲线”，双击并进入编辑状态。

8、将图形元件“椭圆”放于遮罩层，稍与镂空处向右错位，并设置遮罩。

9、在场景中将“运动曲线”旋转120o，并复制两份。

10、测试动画效果。评价反思：（学生）

1、为什么没有达到示例效果。

2、你学到了什么？ 巩固与提高：

绘制自己的“运动曲线”