静态网站建设课件全套教程.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,关于网站,什么是网站？,在网上看到的一个个网页页面的集合就是网站.网站可分为4类:门户网站、职能网站、专业网站和个人网站。门户网站：这是一种涉及领域最广的网站，比如搜索、论坛、聊天室等功能，国内常见的门户网站雅虎中国、新浪、网易等。职能网站：是一类具有专门功能的网站。如政府部门、商务网站等。例如阿里吧吧、卓越网、易趣网以及当当网上书店等。专业网站：专业性非常强，它只涉及生活中的某一领域，但内容却十分专业一般为专业人士服务，例如网页制作大宝库、黄金书屋、中央电视台等。个人网站：一般个人为了兴趣爱好或为了展示自己等目的建设的网站，因此风格内容样式可以形色各异包罗万象。,网页,网页的学名称作HTML文件，是一种可以在www(,万维网),上传输，并被浏览器认识和翻译成页面显示出来的文件,www是“world wide web”的缩写,HTML的意思则是“Hypertext Markup Language”,中文翻译为“超文本标记语言”。,“超文本”就是指页面内可以包含图片，链接，甚至音乐，程序等非文字的元素,网页组成及分类,网页的组成文本,：,文本是一个网页的最基本元素，是必不可少的。,图片,：,一个比较成功的网页，除了有文字信息外还需要一些图片为 网页增色，是它更加具有魅力。,多媒体,：,主要指文字、图形、图象声音、动画等人的器官能够直接感受到和理解的多种信息类型。,超链接,：,是WWW上的一种连接技巧，它通过已定义好的关键字和图形由当前标题或内容索引信息指想别的页面的连接点。有了超链接我们就可以任意遨游Internet了。,网页的分类,按网页的表现形式可将网页分为静态网页和动态网页。一般用户制作的都是静态网页，它是一切网页的基础。动态网页也是首先制作静态网页，然后再加上动态技术就可以制作出完美的动态网页了。,超文本标记语言 HTML(HyperText Markup Language),HTML 概述,超文本标记语言 HTML 中的 Markup 的意思就是“设置标记”。,HTML 定义了许多用于排版的命令（标签）。,HTML 把各种标签嵌入到万维网的页面中。这样就构成了所谓的 HTML 文档。HTML 文档是一种可以用任何文本编辑器创建的 ASCII 码文件。仅当 HTML 文档是以.html 或.htm 为后缀时，浏览器才对此 文档的各种标签进行解释。,当浏览器从服务器读取 HTML 文档后，就按照 HTML 文档中的各种标签，根据浏览器所使用的显示器的尺寸和分辨率大小，重新进行排版并恢复出所读取的页面。,HTML 的格式与标签,元素,(element)是 HTML 文档结构的基本组成部分。一个 HTML 文档本身就是一个元素。每个 HTML 文档由两个主要元素组成：,首部,(head)和,主体,(body)。,首部包含文档的,标题,(title)，以及系统用来标识文档的一些其他信息。标题相当于文件名。,文档的,主体,是 HTML 文档的最主要的部分。,主体部分往往又由若干个更小的元素组成，如,段落,(paragraph)、,表格,(table)、和,列表,(list)等。,HTML用一对标签（即一个开始标签和一个结束标签）或几对标签来标识一个元素。,开始标签由一个小于字符“”组成。,结束标签和开始标签的区别只是在小于字符的后面要加上一个斜杠字符“/”。,标签名并不区分大写和小写。,有一些标签可以将结束标签省略。,Tag,Description,声明这是用HTML写的万维网文档,定界页面的头部,定义页面的标题(不在浏览器的显示窗口中显示),定界页面的主体,定界一个n级标题,设置 为黑体字,设置 为斜体字,设置无序列表,设置编号列表,设置菜单,开始一个列表选项(可以没有),强制换行,一行的开始,画出一条水平线,设置为已排版的文本,浏览器显示时不再排版,插入一张图像,定义一个超链接,命令例子及显示效果,网站设计流程,1、网站定位：确定网站主题，如教育、宣传、个人,2、搜集和准备资料。,3、规划站点结构。,4、设计：创建本地站点、网页（风格、链接等）。,5、本地端测试：链接、浏览器兼容性等。,6、申请空间、发布（上传）。,7、后期维护。,网站制作工作流程,1、主题定位,2、资料搜集,3、结构设计,4、形象设计,5、主页设计,6、其他页面设计,7、站点规划,8、定义站点,9、主页制作,10、其他页面制作,11、测试,12、申请域名空间,13、上传,14、宣传,15、运行维护,前期准备,设计阶段,制作阶段,上传发布,测试阶段,网站制作工作流程,主 题 定 位,一、网站的题材,定位题材的几点建议：,1、主题最好是你最有兴趣且最擅长的东西。,2、主题一定要小而精。,3、题材不要太滥或太高。,4、体现自己的个性。,制作网站首先要考虑网站的主题。网站的内容是最重要的因素，空洞的网站对人没有任何吸引力。网站、网页主题定位时要注意，网站的主题和名称一定要清楚明了，以避免盲目建设。,资 料 搜 集,互连网的强大就是它丰富的资源，你可以在上面搜集尽可能多的资料，并根据一定规则进行整理。当然，仅仅有这些资料还不足以使你的网站与众不同，你还要需要精心设计一搜集一些互连网上没有的东西，也就是属于自己的东西。,资料搜集非常重要，它决定了做的网站是否有内容。就个人网站而言，针对喜欢的专题，可以到相关的网站上去浏览一下。,网页制作高手不是天生就有的，他们的基本功也都是从别人那里学来的。所以咱们也应该多去学习他们，学习他们更贴切的设计。,结 构 设 计,设计网站的结构首先把网站的内容和所要实现的功能列举出来，根据内容和功能列一个结构化的蓝图，要先考虑用户如何访问你的网站？,栏目和版块的设计,网站结构设计其实也就是合理的设计网站的栏目和版块；,对各个栏目进行更细的栏目规划。需要做的主要有设定栏目的名字、确定栏目所含页面内容与逻辑结构等；,画出网站的结构图。并对主要栏目用表格的形式做以文字说明；,确定导航的方式,；,形 象 设 计,网站的形象设计非常重要的，这就你一个人给大家留下的印象似的，是否恰当合体，是否让人感到亲切，有美感，是否让人能够接近。,1、设计网站的标志（LOGO）,2设计网站的标准色彩,3、设计网站的标准字体,4、设计网站的宣传标语,形象设计包括,一、设计网站的标志（LOGO）,在做网站的时候要给自己的网站设计一个标志（LOGO）。就如同商标一样，LOGO是站点特色和内涵的集中体现，是网站文化的浓缩，成功的网站标志让大家一看就能联想起你的站点。,二、设计网站的标准色彩,色彩是艺术表现的要素之一，它是光刺激眼睛再传导到大脑中枢而产生的一种感觉。而网站给人的第一印象来自视觉的冲击，确定网站的标准色彩是相当重要后的步。不同的色彩拾配产生不同的效果，并可能影响到访问者的情绪。,1、色彩的表示：,网页中的颜色通常采用6位16进制的数值来表示，每两位代表一种颜色，从左到右依次表示红色、绿色和蓝色。,2、色彩给人的感觉：,红色：,是一种激奋的色彩，给人以冲动、愤怒、热情和活力的感觉。,绿色：,介于冷暖两种色彩的中间，显得和睦、宁静、健康、安全。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。,橙色：,也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨和时尚的效果。,黄色：,充满快乐、希望、智慧和轻快，它也是最亮的一种颜色。,蓝色：,是最具凉爽、清新、专业的色彩。它和白色混合，能体现柔顺、淡雅、浪温的气氛（像天空的色彩）。,白色：,经人以洁白、明快、纯真和干净的感觉。,黑色：,通常是深沉、神秘、寂静、悲哀和压抑的代表。,灰色：,具有中庸、平凡、温和、谦让、中立和高雅的感觉，它可以和任何一种颜色进行搭配。,3、网站的主色调：,不同颜色以及不同颜色组合可以给人不同的感受，所以站点在配色的时候，首先应当依据站点的性质来选取站点主色调，以便让访问者首先在色彩的视觉效果上对站点、站点的公司或者站点所宣传的产品有一个较深的印象。,4、网页的色彩搭配：,在网页设中，应该考虑许多方面的色彩搭配问题，如背景色、文字颜色、表格颜色、插图颜色等等之间的相互搭配，往往一个细节也会影响整个网页的色彩均衡。网页的色彩搭配没有固定的模式与步骤，但是如果从整体到细节去搭配颜色，会使这项工作更轻松一些。,背景色；,标题栏的颜色；,导航条的颜色；,文字的颜色；,插图的颜色；,规划站点要注意的事项：,1、将不同的文件分类，分别放在不同的文件夹中以便管理。首先创建根目录然后再创建子文件夹。2、在对文件或文件夹命名时要注意：（1）使用英文或汉语拼音作为文件或文件夹的名字。（2）名字中不能包括空格等非法字符。（3）命名应有一定的规则以便日后管理。（4）文件名应该容易理解，看了就可以知道文件的内容，由于某些操作系统是区分文件名大小写，因此建议全部使用小写文件名。3、合理分配各种类型的文件，对于图像、多媒体都要分存到各个文件夹中。,主 页 设 计,像设计任何东西一样，我们首先应在草纸上画一个草图，我们可以尽可能地发挥我们的想象力，想象它的一种意境。我们可以多画几张。然后从中选择最佳的一个作为蓝本继续使用。,其 他 页 面 设 计,其他页面设计时要注意以下几点,：,1、和首面保持相同的风格；,2、要有返回主页面的链接；,3、目录结构不要超过四层；,分栏式网站：E！娱乐在线，二分栏在网络上十分常见（“T”结构），可依据内容形式的变化而灵活变动。,表格的使用,表格概念,表格是由一些线条分开的小格组成。线条即是表格的边框，被边框分割开来的区域成之为单元格，数据、文字、图形、图片等对象均可以放在相应的单元格中。位于水平方向上的一系列单元格称作一行，位于垂直方向上的一系列单元格称作一列。,表格的作用,表格最重要的功能是帮助网页上的元素实现准确的定位，以满足网页设计布局、排版的需要。这是在互联网上较为常见的网页设计方式。,超链接是网页中由一个地方跳转到另一个地方、网页、网站或文件的指针，跳转的起点称为源端点，跳转的终点称为目标端点。超链接指出了源端点到目标端点的路径即地址。超链接按照源端点可分为文本链接、图像链接、表单链接。按照目标端点可分为外部链接、内部链接、局部链接和Email 链接。超链接的路径有绝对路径和相对路径两种，一般外部链接要用绝对路径，内部链接和局部链接用相对路径。,超链接,超链接应用,一、本站点内,1、,同一页面不同位置间的跳转（创建锚记链接）,将光标定位在要跳转的目标位置，,“,插入,”,/,命名锚记（或常用选项卡），输入锚记名称（,mj1,）；选中文本或图像，打开属性面板，,“,链接,”,处输入,“,#,锚记名称,”,回车确认。,2、,不同页面文件链接：,选中文本（图片），打开属性面板，在链接和目标处设置。,二、与其他站点间链接：输入绝对地址,三、电子邮件链接：,选中文本,/,图片，属性面板,“,链接,”,输入,mailto:,四、空链接：,选中文本,/,图片，属性面板,“,链接,”,输入,”#”,网站相册,新建空白页面。选择菜单：“命令”“创建网站相册”，弹出“创建网站相册”对话框。在对话框中进行设置，设置完成后，单击“确定“按钮，系统自动调用Fireworks，当处理完成后，会出现提示对话框，单击“确定”按钮，在文档窗口中将出现相册页面。,插入flash动画：“插入/媒体/flash,插入/图像对象/鼠标经过图像,插入/媒体/图像查看器,背景色图片标题颜色、字体、大小边框颜色、粗细图片标题设置具体图片幻灯片播放延迟时间图像查看器题目过渡类型,Blinds:百叶窗,Fade:淡入,Fly:飞入,Iris:盒装展开,Photo:照片闪烁,Pixeldissolve:溶解,Rotate:旋转,Squeeze:切入,Wipe:擦除,Zoom:放大,Random:随机,表单,表单作用：和用户沟通的界面，得到浏览者的反馈信息，把来自用户的信息提交给服务器，是网站与浏览者之间的桥梁。,表单与服务器端脚本程序,掌握创建表单页面用于收集用户信息，表单元素的构成。,创建表单,插入表单:,(1)“,表单”工具栏点击表单按钮(2)插入菜单表单表单,注意点：在插入表单对象之前，必须先插入表单区域，红色虚线表示，在浏览器中不会显示。表单区域就像表单对象容器。,表单属性：表单名称Method：信息发送方法Get:把表单值添加给URL，并向服务器发送Get请求。Post:在消息正文中发送表单值（常用）,表单对象,文本字段：用于输入用户名、密码等类型：单行、多行、密码字符宽度、最大字符数,文本区域：即为多行文本域。一般用于输入个人介绍、留言信息等多文本,复选框：选择爱好等多项中不定项选择,单选按钮：多项中只能选一项,单选按钮组：与单选按钮类似,列表/菜单：下拉列表框或菜单，如省份、职业等,使用层,层和表格一样都是网页内容的容器，在层中可以放置文本、图像、表单、对象插件。,应用：利用时间轴面板为层创建动画。,目标：了解层的属性设置，掌握利用时间轴为层创建动画。,层的基本操作,创建层:“插入”/布局对象/层或“布局”工具栏/描绘层,认识层面板,选择层：层边框/Div#layer层标记/黄色层标记,插入层对象,移动层,对层相关属性的设置,制作时间轴动画是由于引入时间轴面板，它可以描述图层和图像随时间变化的属性，生成生动的动画效果。,一、曲线运动：添加层，选中层，,“,修改,”,/时间轴/录制层路径。,为层创建动画,图5-9 时间轴面板,行为通道动画条,时间轴下拉列表框,关键帧,动画通道,二、图像变换源文件：图像，属性面板“源文件”。,三、多条时间轴管理动画：层、图像,插入层，插入图像，拖拽层到时间轴，结束60帧。15、30、45分别增加关键帧，设置位置。,添加时间轴2，选中图片拖拽到时间轴，结束帧60帧，15、30、45分别增加关键帧，并在属性面板中“源文件”换图片。,走马灯效果,direction表示滚动的方向，默认为从右向左：可选的值有right、down、up。滚动方向分别为：right表示，up表示，down表示。,scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为13比较好。width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。,滚动文本 ,行为：实现javascript特效,1、弹出信息：,2、状态栏文本:设置文本,3、打开浏览器窗口,4、创建交换图：交换图像,5、显示弹出式菜单,Css样式,页面版式固定，方便统一更新。,新建样式：,一、类:类型、边框、背景,二、超链接效果,框架页面,新建空白页面，选择“左侧”框架。,光标定位在每个框架内设置网页。,选择框架集，保存全部。,在框架面板内可以选择框架，查看属性。,模板,1、创建页面，文件/另存为模板。,2、定义可编辑区域：选择区域，插入/模板对象/可编辑区域,保存文件。,3、应用模板：新建空白页面，资源面板，模板，拖拽模板文件到网页中，修改可编辑部分。,网络技术教研室 付冬,fd1997,网页前台设计,课程简介,该课程主要介绍网站建设的基本方法，掌握网页制作工具的使用方法和技巧，培养管理、设计网站的能力。,内容安排（三大模块）：Fireworks矢量图形处理,Flash 矢量动画,Dreamweaver网页设计,课程要求,课程实践性较强，上课要认真学习，不迟到、早退。对知识要学有所悟，学有所用。,课程考核：,出勤+平时成绩+期末上机考试,缺课1/3以上取消考试资格,迟到三次记一次旷课,课程性质,对WEB设计师的工作过程进行分解分析，确定该岗位的核心能力。,将核心能力整合提升为对应的课程，构建出以工作体系为基础的课程体系。,网站规划,网站制作,网站维护与管理,前导课程与后续课程,计算机应用,计算机网络,Photoshop cs,网页三剑客,动态网页设计,企业网站设计,网站的规划能力,网站风格设计能力,图片、动画和文字的编辑能力,课程能力目标,对网站设计所涵盖的岗位群进行工作任务的职业能力分析，归纳出课程能力目标：,稍微涉足网络的人一般都知道，世界著名软件公司Macromedia的软件产品Dream Team三剑客，即广大网友耳熟能详的,“,网页设计三剑客,”,Dreamweaver网页版式、Fireworks图像处理、Flash矢量动画。,网页设计工具,模块一 Fireworks 矢量图形处理,Fireworks 8是一个完全为网页制作者设计的图像处理软件。它在绘图方面结合了位图以及矢量图处理的特点，不仅具备复杂的图像处理功能，能够自由地导入各种图像，并且还能轻松地把图像输出到Flash、Dreamweaver 以及第三方的应用程序。,图像,基本概念,1、位图图像：,位图，是由像素点构成的。,可精确记录色调丰富的图像，逼真地表现自然界景象，且易于交换。,像素点的多少将决定图像的显示质量和文件大小，位图图像的分辨率越高，其显示越清晰，文件所占的空间也就越大。,但缩放会不清晰，产生失真,。对位图图像进行放大时，放大的只是像素点，图像的清晰度会降低，甚至出现马赛克和锯齿状。,无法制作真正的3D图像，文件大，对内存和硬盘空间要求高。,2、矢量图：,以数学的矢量方式记录图像，内容以线条和色块为主。例如一条线段的数据只需要记录两个端点的坐标、线段的粗细和色彩。矢量图的清晰度与分辨率无关，对矢量图进行缩放时，仍保持原有的清晰度和光滑度，不会影响图像的质量。,可任意缩放，不会失真，可制作3D图像。文件体积小。,但不易制作色彩变化丰富的图像，无法像照片一样描述自然景观。不易于交换。,矢量图与位图的比较,1.,矢量图的数据容量比位图小。,2.,矢量图的清晰度与分辨率无关，而位图的清晰度与分辨率密切相关。,3.,位图的色彩比矢量图丰富逼真。,1、图像分辨率：图像中存储的信息量，单位是ppi(像素/英寸)。图像分辨率和图像尺寸的值决定文件的大小及输出的质量。文件的大小与其图像分辨率的平方成正比。,3、分辨率：在单位长度内所含有的点（即像素）的多少。,分辨率分为图像分辨率、扫描分辨率、设备分辨率、图像位分辨率。,2、扫描分辨率：在扫描一幅图像之前所设定的分辨率。单位是Dpi 点/英寸。,3、设备分辨率：输出分辨率，指各类输出设备每英寸上可产生的点数。如显示器、打印机。Dpi点/英寸。,4、图像的位分辨率，又称位深（颜色深度）。是用来衡量每个像素储存信息的位数。这种分辨率决定图像可以标记为多少种色彩等级的可能性。一般常见的有8位、16位、24位或32位色彩。,位：2的平方次数。如8位，一幅8位色彩深度的图像，所能表现的色彩等级是256级。,层的概念,图层就好像是一层透明的玻璃纸，把不同的图形对象绘制在不同的玻璃纸上，然后再将所有玻璃纸叠放在一起就形成了幅完整的图案。,初识Flash,什么是Flash,Flash,是矢量图编辑和动画创作的专业软件，设计和开发人员可使用它来创建演示文稿、应用程序和其他允许用户交互的内容。,在,Flash,中，可以通过绘制图形、运用图片、添加声音、导入视频等手段，构建包含丰富媒体的各种动画。,Flash发展史,Flash的前身是Future splash，flash1.0版本诞生于1996年，Flash真正的火爆是从3.0开始的，1996年6月发布的4.0，其制作的动画开始大量的在网上传播，它改变了以往静态的网页形式，丰富了我们的网络生活，已经逐渐成为了网页交互多媒体动画设计软件的标准。2000年推出5.0后，2002年推出Flash MX。Flash MX 2004是Macromedia公司2004年推出的专业级网页动画制作软件，2005年8月升级为Flash8.0。,Flash应用,Flash基于矢量图的Web标准，可以制作Web导航、互动图片及动画效果。,1、网页素材：广告条、电子贺卡等支持娱乐部分。,2、用于网站的开发：能够生成HTML文件。,3、开发多媒体输出动画，支持导入音乐文件，支持交互内容等，可用于产品演示、Authorware课件（,教学光盘,）和MTV。,4、支持交互脚本，可用于制作游戏、开发游戏。,Flash的主要特点,1、矢量图形：采用矢量图像图像文件小，放大 和缩小都不会影响图像的质量，适合于卡通动画制作。,2、体积小，支持多种文件格式，大部分的位图图像格式和矢量图文件格式都可以导入，还有音乐文件和视频文件。,3、采用流式的播放技术：可以边下载边观看。,4、动画易于跨平台播放，任何操作系统和,浏览器支持。,动画原理,电影胶片上有许多按顺序串在一起的画面。胶片上每一个画面称为一帧。,“,视觉停留,”,产生运动视觉效果。,基础动画及制作技巧,动画分类：逐帧动画、补间动画（形状补间、运动补间）、遮罩动画。其中运动补间还包括实现旋转和引导层动画。,逐帧动画,逐帧动画是一帧帧地制作出来的动画。在时间轴面板上表现为一个个连续的关键帧。,逐帧动画的种类,1,.,图片逐帧动画：用导入,gif,文档的方式制作的动画。,2,.,文字逐帧动画：,3,.,鼠绘逐帧动画：用鼠标或压感笔一帧一帧地画成的动画。,帧的操作,普通帧：用于延长前边关键帧演员的显示时间。用一个中间有方形块表示，快捷键F5。经常用于背景。,关键帧：将前边帧中的演员复制到当前帧的舞台中。同一演员在不同时刻定义不同状态。用实心圈表示，快捷键F6。,空白关键帧：无内容的关键帧用空心圆圈表示。可创建演员，或者删除前面帧中的演员，换演员。快捷键F7。,Flash能生成两种类型的补间动画，一种是动作补间动画，另一种是形状补间。,这两类动画的共同特点是：创建动画时只需要完成起始帧和结束帧这两帧动画对象的编辑，,编辑相邻两个关键帧中的动画图像，,中间帧都是由Flash,在二者之间插值而,自动生成,创建的动画。,所不同的是：这两类动画中的动画对象的属性有所不同。,补间动画,形状补间动画,初识形状补间动画(演员是矢量图）,形状补间动画，是指在一个时间点（关键帧）绘制一个形状，然后在另一个时间点（关键帧）更改该形状,如：大小、形状、颜色、位置等,或绘制另一个形状，,再通过属性面板在两帧之间创建形状补间动画，从而在两帧之间产生动画效果。,形状补间动画,形状补间动画的创建方法,1,.,创建并编辑起始关键帧,2,.,创建并编辑终止关键帧,3,.,选中起始关键帧，在,“,属性,”,面板创建,补间,“,形状,”,4,.,在,“,属性,”,面板上设置形状补间动画的参数,注意：形状补间动画的生成，是Flash对相邻两个关键帧的图像进行分析，进而自动生成的补间图像。一般情况下，两个关键帧的图像最好是都是由线条勾画出来的，效果最佳。,如果各关键帧中的图像比较复杂，则Flash所生成的补间图像也相对复杂。如果关键帧中的图像是来自导入的位图图像，并且差别很大，那么，Flash也有可能生成不了补间图像。,动作补间动画,初识动作补间动画(演员是元件的实例),在,“,时间轴,”,面板上的一个时间点,（关键帧）,放置一个元件，然后在另一个时间点,（关键帧）改变这个元件的大小、颜色、位置、透明度、滤镜参数等，即生成补间动画的相邻两个关键帧必须是同一个对象。,Flash 根据二者之间帧的值创建的动画，被称为动作补间动画。,初识元件、实例和库,元件、实例和库的关系,如果把元件比喻成图章，那么库就是存放图章的抽屉，而实例就是用图章在纸面上盖下的图案。,元件和实例：演员与角色,初识元件、实例和库,元件的类型,元件分为图形元件、影片剪辑元件和按钮元件三类,元件的制作、编辑和管理,元件制作的初始操作新建各类元件的初始操作，都必须先调出,“,创建新元件,”,对话框,元件的制作、编辑和管理,图形元件的制作,1.制作图形元件使用的对象，可以是位图、矢量图、组合体、文本等等,2.要创建图形元件，必须,在,“,创建新元件,”,对话框的【类型】中选择【图形】,3.图形元件只须编辑第1帧,元件的制作、编辑和管理,把图形转换为元件,为了更容易确定对象大小和位置等原因，我们经常先在场景上画个图形，然后把它转换成元件。,动作补间动画,动作补间动画的创建方法,1,.,创建并编辑起始关键帧,2,.,在终止帧插入关键帧，并改变此帧中元件的位置和属性,3,.,选中起始关键帧，在,“,属性,”,面板上,创建补间,“动画,”,4,.,在,“,属性,”,面板上设置动作补间动画的参数,引导线动画,引导线动画的概念,所谓引导线动画，就是能使对象按照我们设定的曲线路径运动的动画。从本质来说，引导线动画就是由路径约束其运动轨迹的动作补间动画。,问题：自然界中更多的是曲线运动，能否制作按照指定的路径运动的动画？,引导线动画,引导线动画的创建方法,1.在被引导层上创建起始关键帧，并拖出一个元件到舞台上备用,2.在被引导层上方新建一个【引导层】,3.绘制引导线,4.编辑被引导层的起始关键帧和终止关键帧,5.选中被引导层的起始帧，在,“,属性,”,面板上创建补间,“,动画,”,创建补间动画。,6.,设置属性参数,遮罩动画遮罩动画的概念,遮罩动画，就是实现了遮罩效果的动画。,遮罩动画，至少应该具有两个图层，即,“,遮罩层,”,和,“,被遮罩层,”,。,遮罩就像个透明的窗口(遮罩的填充色块本身是不可见的)，只有从那里(遮罩层的填充色块之下)才可以看到被遮罩层上的内容。,创建基本交互动画,Flash还可以制作具有交互式效果的动画，可以响应用户的各种操作事件。所谓交互动画是指浏览者可以使用键盘、鼠标操作来控制动画的播放和停止，改变动画的显示效果和尺寸及执行其他的各种操作。交互动画是通过动作脚本语言（ActionScript）设置动作来产生的，ActionScript是Flash中内嵌的脚本程序。Flash提供了一个专门处理动作脚本的编辑环境,“,动作,”,面板。,动作脚本基础知识,什么是动作脚本,所谓脚本，是指一组指令或命令，供应用程序或操作系统在特定的时间调用，以执行一段指定的过程。,动作脚本是Flash的脚本语言。它的英文字面为,“,ActionScript,”,，是,“,Action,”,（动作）和,“,Script,”,（脚本）的组合。动作脚本的英文缩写为,“,AS,”,。,创建基本交互动画,动作的三要素：,1、动作：实现一个结果给用户,2、事件：一个动作产生的时机(什么时候）,3、作用动作的对象,事件的分类：,1、对象事件：具体对象,2、时间事件：影片播放的时间,作用动作的对象：,1、按钮实例影片剪辑实例,2、帧：关键帧、空白关键帧（几秒）,通常，把应用于关键帧上的动作脚本称为帧动作，把应用于按钮上的动作脚本称为按钮动作，把应用于影片剪辑上的动作脚本称为影片剪辑动作。,为帧添加动作的方法,1.选中要添加动作脚本的关键帧或空白关键帧,2.按下快捷键【F9】打开,“,动作,”,面板,3.在,“,动作,”,面板上添加动作脚本,停止、播放和跳转语句,1.play,命令时间轴上的播放头从当前帧开始播放。,2.stop,命令时间轴上的播放头停止在当前帧上。,3.gotoAndPlay,命令时间轴上的播放头跳至特定的帧上，并从该帧开始播放。,4.gotoAndStop,命令时间轴上的播放头跳至特定帧上停止。,用按钮动作控制影片,为按钮添加动作的方法,选中要添加动作脚本的按钮,按下【F9】键打开,“,动作,”,面板,添加触发事件关键字,“,on,”,添加指定触发动作的鼠标/键盘事件,添加执行的处理程序,关于按钮事件处理程序,on,1.,按钮处理程序,on,的语法,On(,鼠标,/,键盘事件,),事件发生时要执行的处理程序,2.鼠标/键盘事件（按钮事件）,1、press：鼠标在按钮上按下左键后，未放开按键时，触发动作。,2、release：鼠标在按钮上按下左键后，在按钮上放开按键时。,3、rollover：鼠标移到（未单击）按钮上时。,4、rollout：鼠标移出按钮。,5、keypress：按下键盘上的某个键。,Setproperty:设置影片剪辑属性，参数：(目标,属性,值）,Getproperty:获取影片剪辑属性值，,参数：(目标,属性）,常用属性：,_x和_y:影片剪辑的x和y位置（坐标值）。,_xscale和_yscale:影片剪辑的水平、垂直缩放比例。,影片剪辑控制,各个按钮动作：,向上按钮：,on(release),setProperty(_root.mm,_y,getProperty(_root.mm,_y)-10);,。,向下按钮：,on(release),setProperty(_root.mm,_y,getProperty(_root.mm,_y)+10);,向左按钮：,on(release),setProperty(_root.mm,_x,getProperty(_root.mm,_x)-10);,向右按钮：,on(release),setProperty(_root.mm,_x,getProperty(_root.mm,_x)+10);,放大按钮：,on(release),setProperty(_root.mm,_xscale,getProperty(_root.mm,_ xscale)+20);,setProperty(_root.mm,_yscale,getProperty(_root.mm,_ yscale)+20);,缩小按钮：,on(release),setProperty(_root.mm,_ xscale,getProperty(_root.mm,_xscale)-20);,setProperty(_root.mm,_ yscale,getProperty(_root.mm,_yscale)-20);,影片剪辑控制,startDrag（目标，锁定鼠标到元件中心）:开始拖拽,Duplicate Movieclip（目标，新名称，深度）：复制影片剪辑,第1,帧,:startDrag(_root.f,true);,n=1;,第2,帧,：if(n25),n=1;,duplicateMovieClip(_root.f,flower,n);,n=n+1;,第3,帧,：gotoAndPlay(2);,