计算机图形学实验指导书讲解课件

1、计算机图形学实验指导书讲解计算机图形学实验指导书讲解提纲基本概念与基本操作变形动画移动动画图层技术引导线技术遮蔽图层技术按钮制作与应用影片剪辑交互界面设计多场景技术综合应用动画发布提纲基本概念与基本操作按钮制作与应用预备知识 Macromedia flash MX影片是用于Web站点的图形、文本、动画和应用程序。它们主要是由矢量图形（ 压缩的矢量图形）组成。（矢图与位图特点举例） flash文档具有.fla文件扩展名的文件，它包含开发、设计和测试交互式内容所需的所有信息。 Flash文档并不是在flash player显示的影片，需将FLA文档发布为flash 影片，其扩展名为swf，其中只包

2、含显示影片所需的信息。1、动画原理视觉暂留：人眼特性，一般时间为1/12到期/16秒。电影放映速度1/24秒,flash 动画效果较电影和电视的要求低，放映速度系统缺省只有1/12秒。2、 flash MX中动画文件的结构 flash结构也分多层：flash MX文件（影片） 一个或多个场景 一帧或多帧 一个或多个图层 一个或多个实例。（举例说明）3、 舞台和工作区 创作影片中各个帧的内容的区域，可以在其中直接勾画插图或导入插图。预备知识 Macromedia flash MX影基本概念（1）时间线和关键帧（Keyframe）在Flash中，一般的动画都是依靠时间线和关键帧来实现的，用户只需要

3、给出一个对象的几个关键动作，在时间线中生成关键帧，系统即会根据需要在各个关键帧之间自动插入平滑的动画。(一幅静止的图片就是一帻，关键帧中是灰色的代表一般帧，由电脑自己形成的，一般帧上有一行箭头代表此图层中有渐变，帧中是白色的代表空白帧，和动画无关。）（2）层（Layer）Flash中使用了层的概念，不同角色的对象可以出现在不同的层面上，而互相之间并不干扰，这样便于用户对不同的对象作不同的修改。（3）场景（Scene）在Flash中，可以分成多个场景，在制作复杂动画时，可以借助多个场景，而且场景之间可以自由切换。基本概念（1）时间线和关键帧（Keyframe）时间线和关键帧时间线是用于组织和控制

4、影片内容在一定时间内播放的层数和帧数。其主要组件是图层、帧和播放头。关键帧：关键的画面，即此帧在整个动画中非常关键，如动画中的起始或终止帧。图层就像是相互重叠的透明纸一样，可以使各对象保持相对分离。注：帧是管理时间的，图层是管理空间的，一帧中可以有多个图层。时间线和关键帧时间线是用于组织和控制影片内容在一定时间内播放基本概念（4）组件（Symbol）与图库（Libery）在Flash中所有的动画都可以被抽象为组件，所有组件都被存放在图库中。图库中的组件可以是图像、声音或动画片段，可以被任何Flash动画文件无限制地重复调用。每个Flash文件都有自己的组件库，也可以使用其他Flash文件的组件

5、库。（5）按钮（Button）组件在Flash中，我们可以通过指定按钮的各种属性，包括正常按钮，鼠标掠过时画面，按下时画面，而非常容易的制作各种动态按钮。基本概念（4）组件（Symbol）与图库（Libery）基本概念矢量图是使用直线和曲线描述的图像，同时包括图形颜色和位置的属性。如矢量椭圆是通过描述椭圆的轮廓线来给出它的形状，而整体的颜色则是由轮廓边缘的颜色和轮廓内区域的颜色确定的。所以编辑矢量图时，尽管改变椭圆大小、位置和形状，而只要确定了椭圆的轮廓线及线内的对象，就不会影响最后浏览的效果。这意味着矢量图能够在任何分辨率的输出设备上清晰地显示。 位图是由像素组成的。使用像素来描述图像，计算

6、机必须精确地计算组成位图的每一个像素位置和颜色等信息。所以当编辑一个位图时，修改的是每一个像素，而不是直线和曲线，这样就会影响最后输出的质量。尤其当像素较低的图像被放大输出时，图像的边界会很粗糙。返回基本概念矢量图是使用直线和曲线描述的图像，同时包括图形颜色和Flash的基本操作矢量画图的基本要领：（1）工具栏和工具箱的使用（基本技能）（2）动画的编辑：掌握放大、缩小、拉伸、旋转等编辑方式（3）颜色填充：Flash中提供了透明色、梯度色的填充（4）变化功能的应用Flash的基本操作矢量画图的基本要领：变形动画变形动画是指图形或字体形状上变化过程的实现。注意事项：实现形变过程的多个图形，必须是导

7、入的矢量图格式文件或由FLASH工具箱中的工具绘制成的图形Enter 或Ctrl+Enter可查看动画效果变形动画变形动画是指图形或字体形状上变化过程的实现。基本变形动画逐祯动画：影片制作技术（exp1,exp2)基本几何变形动画：exp3 exp4 exp5 exp7文本变形动画：exp9 exp8 exp12图形组件的变形动画：exp10 exp11基本变形动画逐祯动画：影片制作技术（exp1,exp2)移动动画几何图形移动：exp13文本动画：exp14图形组件的移动动画：exp15 exp16移动动画几何图形移动：exp13图层技术图层与几何变形：延伸线1.FLA图层与图形组件： 4球

8、体移动.FLA图层实现文字动画 文字飞入特效.fla图层技术图层与几何变形：延伸线1.FLA引导线技术基本：5引导球体移动.FLA高级：注意：在拖动中一定要使小球的中心位置在曲线上，才能使小球按指定的轨迹运动，运动的轨迹并不显示出来。引导线技术基本：5引导球体移动.FLA注意：在拖动中一定要使遮蔽图层技术基本：6遮蔽.FLA高级：放大镜.FLA遮蔽就是在FLASH制作过程中相邻的两层或多层之间的屏蔽。遮蔽图层技术基本：6遮蔽.FLA遮蔽就是在FLASH制作过程按钮制作与应用基本按钮制作：按钮1.FLA特殊按钮：1弹出框.FLA按钮应用：按钮2.FLA声音控制：声音控制.FLA按钮制作与应用基本

9、按钮制作：按钮1.FLA影片剪辑基本按钮制作：拖拽.fla综合：EGGPLANT.FLA影片剪辑基本按钮制作：拖拽.fla交互界面设计技术基本：INPUT.FLA交互界面设计技术基本：INPUT.FLA多场景技术技术基本：5多场景.FLA多场景技术技术基本：5多场景.FLA综合技术一个对象一个图层只有一个时间轴声音与时间同步祯的切换场景的切换综合技术一个对象一个图层动画发布发布导出(GIF Avi Mov)RETURN动画发布发布RETURNDreamweaver mx 概述Dreamweaver简介站点建立与网页发布文本的编辑与基本操作初识HTML代码图像的使用表格层的使用交互式表单行为Dr

10、eamweaver mx 概述Dreamweaver简介Dreamweaver简介Dreamweaver是一个所见即所得的网页编辑器，并带有站点管理功能，用户可方便地设计和管理多个站点。1.FTP工具:用它,可将网页上传至服务器或将上传文件下载,以便更改2.检查网页工具:先在本地站点对网页检查,如页面是否合适再上传3.解锁/锁定功能:锁定是文件被独占4.查找和替换工具5.友好工作界面(上机介绍)Dreamweaver简介Dreamweaver是一个所见即站点建立与网页发布站点建立与管理1.建立本地站点:(1)建立一个新文件夹作为本地根文件夹(2)站点-新建站点站点建立与网页发布站点建立与管理站

11、点建立与网页发布站点资源管理: “资源”面板可让用户统一管理整个站点中的各种资源,如所有应用的图片、颜色、链接、Flash电影、视频、脚本语言、模板和库等都出现在这个面板中。站点建立与网页发布站点资源管理:站点的上传用Dreamweaver MX自带的FTP方法上传用软件上传，如CuteFTP 4.0 站点的上传用Dreamweaver MX自带的FTP方法上传站点的维修编辑站点复制站点删除站点RETURN站点的维修编辑站点RETURN网页的组成元素组成元素:文字、声音、图像、动画等多媒体元素，或Java、ActiveX控件等特殊效果及交互功能，另外与平面刊物不同的特点：超级链接网页的组成元素

12、组成元素:文字、声音、图像、动画等多媒体元素，文字：文字是网页的主体，主要用来传达信息。其占用空间非常小。用在标题、可适当调整大小、层次和段落中样式：粗体、斜体和下划线（最好不用，会误认为是超级链接）颜色文字：文字是网页的主体，主要用来传达信息。其占用空间非常小。图形图形格式：大部分使用JPG和GIF两种格式，它们除了具有压缩比例高的优点外，还具有跨平台的特性。 JPG格式可支持全彩色和灰度格式的文件，而GIF最多只能支持256色的图片图形几种应用： 背景、主图图形图形格式：大部分使用JPG和GIF两种格式，它们除了具有超级链接不论文字或图形，都可加上超级链接，一个完整网站，至少包括以下两种链

13、接。 1、站内链接：若网站规划多个主题板块，必须在首页加入超级链接。 2、站外链接：外部链接到internet。超级链接不论文字或图形，都可加上超级链接，一个完整网站，至少页面的创建和保存创建新空白页面打开一个已存在的HTML文件注意：不能直接将WORD文档（.doc）导入Dreamweaver中，必须先在word中将文件保存为HTML文件格式，再在Dreamweaver中导入。基于模板创建新页面 （1）文件新建，切换到“模板”选项卡 （2）在对话框中选择一个模板，单击“创建” 当基于模板创建文档时，文档某些部分可能被锁定，不许修改，以保证在站点中不同文档的一致性，文档可编辑区，输入所需要的内

14、容。保存文件 默认文件类型为.htm或.html页面的创建和保存创建新空白页面文本的插入和编辑在页面文档中插入文本在页面文档中粘贴文本插入特殊字符（文本中其它字符）插入日期插入项目符号（文本中ol）查找和替换功能（编辑）文本的插入和编辑在页面文档中插入文本插入文本列表和分隔线插入项目列表(ul)插入编号列表(ol)插入分隔线 插入HTML水平线插入文本列表和分隔线插入项目列表(ul)网页属性设置网页标题网页的背景图片及背景颜色 为了照顾网页的下载速度，一般很少使用背景图片，而是给网页加上背景颜色。网页的文字色彩网页的边距网页语种网页蓝图图片的透明度 默认为0，不透明度是100。RETURN网页属性设置网页标题RETURN初识HTML代码HTML简介 HTML(Hyper Tex