计算机图形学实验指导书.ppt

计算机图形学实验指导,呛口小辣椒博客 呛口小辣椒,提纲,基本概念与基本操作 变形动画 移动动画 图层技术 引导线技术 遮蔽图层技术,按钮制作与应用 影片剪辑 交互界面设计 多场景技术 综合应用 动画发布,预备知识,Macromedia flash MX影片是用于Web站点的图形、文本、动画和应用程序。它们主要是由矢量图形（ 压缩的矢量图形）组成。（矢图与位图特点举例） flash文档具有.fla文件扩展名的文件，它包含开发、设计和测试交互式内容所需的所有信息。 Flash文档并不是在flash player显示的影片，需将FLA文档发布为flash 影片，其扩展名为swf，其中只包含显示影片所需的信息。,1、动画原理 视觉暂留：人眼特性，一般时间为1/12到期/16秒。电影放映速度1/24秒,flash 动画效果较电影和电视的要求低，放映速度系统缺省只有1/12秒。 2、 flash MX中动画文件的结构 flash结构也分多层： flash MX文件（影片） 一个或多个场景 一帧或多帧 一个或多个图层 一个或多个实例。（举例说明） 3、 舞台和工作区 创作影片中各个帧的内容的区域，可以在其中直接勾画插图或导入插图。,基本概念,（1）时间线和关键帧（Keyframe） 在Flash中，一般的动画都是依靠时间线和关键帧来实现的，用户只需要给出一个对象的几个关键动作，在时间线中生成关键帧，系统即会根据需要在各个关键帧之间自动插入平滑的动画。(一幅静止的图片就是一帻，关键帧中是灰色的代表一般帧，由电脑自己形成的，一般帧上有一行箭头代表此图层中有渐变，帧中是白色的代表空白帧，和动画无关。） （2）层（Layer） Flash中使用了层的概念，不同角色的对象可以出现在不同的层面上，而互相之间并不干扰，这样便于用户对不同的对象作不同的修改。 （3）场景（Scene） 在Flash中，可以分成多个场景，在制作复杂动画时，可以借助多个场景，而且场景之间可以自由切换。,时间线和关键帧,时间线是用于组织和控制影片内容在一定时间内播放的层数和帧数。其主要组件是图层、帧和播放头。 关键帧：关键的画面，即此帧在整个动画中非常关键，如动画中的起始或终止帧。 图层就像是相互重叠的透明纸一样，可以使各对象保持相对分离。 注：帧是管理时间的，图层是管理空间的，一帧中可以有多个图层。,基本概念,（4）组件（Symbol）与图库（Libery） 在Flash中所有的动画都可以被抽象为组件，所有组件都被存放在图库中。图库中的组件可以是图像、声音或动画片段，可以被任何Flash动画文件无限制地重复调用。每个Flash文件都有自己的组件库，也可以使用其他Flash文件的组件库。 （5）按钮（Button）组件 在Flash中，我们可以通过指定按钮的各种属性，包括正常按钮，鼠标掠过时画面，按下时画面，而非常容易的制作各种动态按钮。,基本概念,矢量图是使用直线和曲线描述的图像，同时包括图形颜色和位置的属性。如矢量椭圆是通过描述椭圆的轮廓线来给出它的形状，而整体的颜色则是由轮廓边缘的颜色和轮廓内区域的颜色确定的。所以编辑矢量图时，尽管改变椭圆大小、位置和形状，而只要确定了椭圆的轮廓线及线内的对象，就不会影响最后浏览的效果。这意味着矢量图能够在任何分辨率的输出设备上清晰地显示。 位图是由像素组成的。使用像素来描述图像，计算机必须精确地计算组成位图的每一个像素位置和颜色等信息。所以当编辑一个位图时，修改的是每一个像素，而不是直线和曲线，这样就会影响最后输出的质量。尤其当像素较低的图像被放大输出时，图像的边界会很粗糙。,返回,Flash的基本操作,矢量画图的基本要领： （1）工具栏和工具箱的使用（基本技能） （2）动画的编辑：掌握放大、缩小、拉伸、旋转等编辑方式 （3）颜色填充：Flash中提供了透明色、梯度色的填充 （4）变化功能的应用,变形动画,变形动画是指图形或字体形状上变化过程的实现。 注意事项：实现形变过程的多个图形，必须是导入的矢 量图格式文件或由FLASH工具箱中的工具绘制成的图形 Enter 或Ctrl+Enter可查看动画效果,基本变形动画,逐祯动画：影片制作技术（exp1,exp2) 基本几何变形动画：exp3 exp4 exp5 exp7 文本变形动画：exp9 exp8 exp12 图形组件的变形动画：exp10 exp11,移动动画,几何图形移动：exp13 文本动画：exp14 图形组件的移动动画：exp15 exp16,图层技术,图层与几何变形：延伸线1.FLA 图层与图形组件： 4球体移动.FLA 图层实现文字动画 文字飞入特效.fla,引导线技术,基本：5引导球体移动.FLA 高级：,注意：在拖动中一定要使小球的中心位置在曲线上，才能使小球 按指定的轨迹运动，运动的轨迹并不显示出来。,遮蔽图层技术,基本：6遮蔽.FLA 高级：放大镜.FLA,遮蔽就是在FLASH制作过程中相邻的两层或多层之间的屏蔽。,按钮制作与应用,基本按钮制作：按钮1.FLA 特殊按钮：1弹出框.FLA 按钮应用：按钮2.FLA 声音控制：声音控制.FLA,影片剪辑,基本按钮制作：拖拽.fla 综合：EGGPLANT.FLA,交互界面设计技术,基本：INPUT.FLA,多场景技术技术,基本：5多场景.FLA,综合技术,一个对象一个图层 只有一个时间轴 声音与时间同步 祯的切换 场景的切换,动画发布,发布 导出(GIF Avi Mov),RETURN,Dreamweaver mx 概述,Dreamweaver简介 站点建立与网页发布 文本的编辑与基本操作 初识HTML代码 图像的使用 表格 层的使用 交互式表单 行为,Dreamweaver简介,Dreamweaver是一个所见即所得的网页编辑器，并带有站 点管理功能，用户可方便地设计和管理多个站点。 1.FTP工具:用它,可将网页上传至服务器或将上传文件下载,以便更改 2.检查网页工具:先在本地站点对网页检查,如页面是否合适再上传 3.解锁/锁定功能:锁定是文件被独占 4.查找和替换工具 5.友好工作界面(上机介绍),站点建立与网页发布,站点建立与管理 1.建立本地站点: (1)建立一个新文件夹作为本地根文件夹 (2)站点-新建站点,站点建立与网页发布,站点资源管理: “资源”面板可让用户统一管理整个站点中的各种资源,如所有应用的图片、颜色、链接、Flash电影、视频、脚本语言、模板和库等都出现在这个面板中。,站点的上传,用Dreamweaver MX自带的FTP方法上传 用软件上传，如CuteFTP 4.0,站点的维修,编辑站点 复制站点 删除站点,RETURN,网页的组成元素,组成元素:文字、声音、图像、动画等多媒体元素，或Java、ActiveX控件等特殊效果及交互功能，另外与平面刊物不同的特点：超级链接,文字：,文字是网页的主体，主要用来传达信息。其占用空间非常小。 用在标题、可适当调整大小、层次和段落中 样式：粗体、斜体和下划线（最好不用，会误认为是超级链接） 颜色,图形,图形格式：大部分使用JPG和GIF两种格式，它们除了具有压缩比例高的优点外，还具有跨平台的特性。 JPG格式可支持全彩色和灰度格式的文件，而GIF最多只能支持256色的图片 图形几种应用： 背景、主图,超级链接,不论文字或图形，都可加上超级链接，一个完整网站，至少包括以下两种链接。 1、站内链接：若网站规划多个主题板块，必须在首页加入超级链接。 2、站外链接：外部链接到internet。,页面的创建和保存,创建新空白页面 打开一个已存在的HTML文件 注意：不能直接将WORD文档（.doc）导入Dreamweaver中，必须先在word中将文件保存为HTML文件格式，再在Dreamweaver中导入。 基于模板创建新页面 （1）文件新建，切换到“模板”选项卡 （2）在对话框中选择一个模板，单击“创建” 当基于模板创建文档时，文档某些部分可能被锁定，不许修改，以保证在站点中不同文档的一致性，文档可编辑区，输入所需要的内容。 保存文件 默认文件类型为.htm或.html,文本的插入和编辑,在页面文档中插入文本 在页面文档中粘贴文本 插入特殊字符（文本中其它字符） 插入日期 插入项目符号（文本中ol） 查找和替换功能（编辑）,插入文本列表和分隔线,插入项目列表(ul) 插入编号列表(ol) 插入分隔线 插入HTML水平线,网页属性设置,网页标题 网页的背景图片及背景颜色 为了照顾网页的下载速度，一般很少使用背景图片，而是给网页加上背景颜色。 网页的文字色彩 网页的边距 网页语种 网页蓝图 图片的透明度 默认为0，不透明度是100。,RETURN,初识HTML代码,HTML简介 HTML(Hyper Text Markup La