Flash5培训教程

上海市绿川学校信息技术与课程整合培训课程1Flash5培训教程主讲：杜波2004.3.20第1章初识Flash1.1Flash的发展简介Flash是Macromedia公司出品的动画制作软件，有人把它和Dreamweaver、Fireworks一起称为网页设计三剑客。在网络高速发展的今天，越来越多的人们已经不再满意图文并茂的静态网页格式，动态网页应运而生，但是一般的动态图片和网站的背景音乐应用并不合拍。什么时候可以把多媒体应用在网站上呢？Flash正是在这一网络发展的大背景下应运而生的，前身是FutureSplash。Flash1.0版本诞生于1996年，由于当时的网络大背景，Flash在出道之时并没有得到计算机行业应有的重视，Flash真正的火爆是从Flash3.0版本开始的，到了1999年6月发布的Flash4.0版本，其制作的动画开始大量的在网上传播，已经逐渐成为了网页交互多媒体动画设计软件的标准。现在，Flash5.0以其特有的ActionScript脚本编程，正在以极快的速度追赶HTML网页标准。它改变了以往静态的、枯燥的、网页形式，利用它短小精悍的文件体积和插件，利用它简单易学的操作方式，利用它的“流”式播放形式丰富我们的网络生活。试想，如果它真的超过HTML成为未来的网页设计软件的主流，那也将是网络的一场革命，也是网络生活的福音。Flash是网络时代的产物。它不仅用于网络动画，还可以用来编写课件，大有取代多媒体集成软件authorware之势。Flash的流行版本是Flash5，最新版是FlashMX。若无特殊说明，本教程中内容均是以Flash5中文版为例进行介绍。1.2Flash的特点Flash到底具有什么样的特点，使得它成为了众多多媒体设计师和网页设计师的选择呢？Flash具有很多的特点，包括：1.2.1矢量动画Flash是一种基于矢量图形的动画制作软件。生成的动画文件体积小、质量好。关于矢量图与位图的说明：矢量图是计算机利用点和线的属性方式来表达的，可以通过对图像中的点进行移动和达到修改图像的目的。矢量图的特点在于图像文件小，而且对于图像的放大和缩小均不会影响图像的质量。矢量图的制作软件一般有FreeHand、Illustrator、和CorelDRAW。矢量图形文件存储的是绘图指令。位图是以像素的点作为存储图像的，这些像素点在图像中会显得异常绚丽。但是，当图像放大时会出现马赛克现象。而且由于位图是用像素点方式存储，所以一般来说位图图像会比矢量图较大。当然，并不是说所有的矢量图都比位图小，如果是线条特别复杂，图像色彩内容也特别复杂的话，有时完全相同的图像矢量图也会比位图大，但这样的情况并上海市绿川学校信息技术与课程整合培训课程2不常发生。位图常见的制作软件是PhotoShop。位图文件存储的是像素点的颜色信息。Flash动画（.swf）与GIF动画（.gif）的比较由于Flash动画采用的是矢量图像，所以在输出动画方面更加适合于卡通动画制作，如今网络上的动画演示也以卡通动画为主。用Flash动画来比较GIF动画，Flash动画则具有明显的优势，一是因为Flash动画使用矢量图像，相应的文件大小要比GIF动画小的多，再加上GIF动画只能输出256色，已经远远不能满足大众对动画图像的要求。而Flash输出动画图像为真彩，具有真正的多媒体意义。如：支持导入音乐文件，支持交互内容等等，再也不是一般的动画制作软件所能比拟，所以在图像方面，Flash动画依然强出一马。1.2.2、“流”式播放Flash动画采用如今先进的“流”式播放技术，以及简单的操作和插件播放形式。即用户可以边下载边观看，完全适应了当今网络的带宽问题，使得用户观看动画再也不用等待。同时，也可以在Flash独有的ActionScript脚本中加入等待程序，使动画在下载完毕以后再观看，结束了网络动画的速度隐患。另外Flash由于插件和文件的短小尤其适于网络传播。1.2.3、支持多种格式文件Flash支持导入的文件格式，大部份的位图图像格式和矢量图文件格式都可以在Flash中导入，还有音乐文件，Flash5.0版本已经支持MP3的导入和输出。制作影音俱佳的多媒体动画从此不再犯难。导入：图像：.bmp、.jpg、.gif、.wmf等，以及freehand、AutoCAD生成的矢量图声音：.wav、.mp3视频：.mov导出：图像：.bmp、.jpg、.gif、.wmf等，以及freehand、AutoCAD生成的矢量图声音：.wav、.mp3动画和视频：不仅可以输出.fla动画格式，还可以输出avi、.gif、.html、.mov、.smil、和.exe等多种格式的文件。即便用户不会使用这些相关软件的制作也一样可以用Flash解决。1.2.4、强大的Action功能ActionScript脚本语言可能是Flash5.0版本最伟大的改进，ActionScript脚本的简单易学和易用性，对初学者也是体贴倍至。使用全新的脚本开发功能，交互性的多媒体更加强劲，面向对象的脚本编程使Flash更像是一个强大的程序开发软件，从此以后，Flash已经不再是一个设计软件，它朝着集编程、美工、设计众多强势于一身的方向大步迈进。ActionScript是一种脚本语言，它为设计者提供了一种通过编程方式来控制动画过程和实现交互的手段。在Flash中有两种编辑动画方式：一种是在时间轴上直接编辑动画，多用于设计演示型的动画；另一种是通过ActionScript编程实现的动画，多用于设计交互型动画。所谓交互型动画也就是说使用者不仅可以观看、而且还可以进行控制的动画。上海市绿川学校信息技术与课程整合培训课程31.3Flash5中文版的安装与卸载解压缩、安装、汉化1.4Flash5中文版的基本工作环境图1.4-1Flash5中文版的基本工作环境1舞台(Stage)就是工作区，最主要的可编辑区域。在这里可以直接绘图，或者导入外部图形文件进行安排编辑，再把各个独立的帧合成在一起，以生成电影作品。2时间轴窗口(Timeline)用它可以调整电影的播放速度，并把不同的图形作品放在不同图层的相应帧里，以安排电影内容播放的顺序。3绘图工具栏(DrawingToolbar)放置了可供图形和文本编辑的各种工具，用这些工具可以绘图，选取，喷涂，修改以及编排文字，还有些工具可以改变查看工作区的方式。在选择了某一工具时，其所对应的修改器(Modifier)也会在工具条下面的位置出现，修改器的作用是改变相应工具对图形处理的效果。上海市绿川学校信息技术与课程整合培训课程4图1.4-2符号库窗口4符号库窗口(LibraryWindow)用以存放可以重复使用的称为符号的元素。符号的类型包括有图片(Graphics)，按钮(Button)和电影片断(MovieClip)。其调用的快捷键为Ctrl-L。图1.4-3各种面板1.5一个简单的Flash动画制作示例【例1.5-1】变形动画——圆形变正方形1、在第1帧画一正圆形（注：按住Shift键可画正圆、正方、直线等）2、在第40帧插入一空白关键帧，并画一正方形3、在帧控制面板中选择动画类型为形状变形动画。4、按Ctrl+Enter键观看效果。5、修改动画的播放速度：拖动时间轴上的关键帧到第20帧，观看动画效果。1.6学习Flash的方法一要多听、多看、多练，二要掌握一定的方法、技巧。能干加巧干，才能事倍功半。不要过多的理论，最好是能够剖析实例，举一反三。1.6.1上网搜索Flash教程的方法上海市绿川学校信息技术与课程整合培训课程51.进入任一搜索引擎网站，如sina、sohu、google等；新浪网：搜狐网：：在搜索栏中输入“Flash5教程”或“Flash5教程下载”等字样；3.然后点击“搜索”按钮；4.在搜索结果中选取一个超级链接，进入相应网站浏览或下载教程。1.6.2Flash酷站推荐下面网站提供了Flash5教程下载、在线教程等内容：闪客堡互动教学中国千龙网科技频道常用的Flash工具软件SWFBrowser软件简介：浏览Flash文件的好帮手,不但可以快速的浏览您电脑中现有的Flash文件(SWF)、将SWF文件便成您的屏幕保护程序外，当然，也可以将这些SWF文件变成可执行文件,能将Flash文件中的元件拆解出来：这一部份的功能在您注册过后才可以使用，如果您是Flash的设计师或者有兴趣参与Flash的作品开发者呢？如果是的话那绝对不可以错过SWFBrowser这个实用的小工具喔！Swish是专门制作文字特效的小软件本章练习：1、试仿照示例，做一个简单Flash动画。2、上网收集关于Flash5特点资料，查阅Flash最新发展信息。3、上网收集Flash5教程，并下载自学。第2章基本绘图2.1绘图工具表2.1-1Flash5绘图工具名称：绘图工具作用：用来画出动画中的各种元素说明：包括两大部分：工具、各个工具的修正区；每种工具的修正区都有所不同。上海市绿川学校信息技术与课程整合培训课程6名称：箭头工具作用：1.选择、移动线条、色块、符号等；2.对线条进行整形；例子注意：选择的同时按住Shift键可以选择多个对象名称：选择工具作用：直接编辑对象的关键点以得到理准确的图形名称：直线工具作用：画直线；按住Shift键可作出水平、竖直、45度的直线名称：套索工具作用：自由选取不规则区域；通常用于去掉图形的背景使之透明。注意：三个修正项；名称：贝赛尔曲线工具作用：创建路径、不规则形状注意：可以创建/删除节点名称：文本工具作用：创建和修饰文字名称：椭圆工具作用：画圆/椭圆名称：矩形工具作用：画矩形/正方形名称：铅笔工具作用：画任意形状线条注意：三种模式；名称：刷子工具作用：模仿多种笔的效果；填色。注意：五种填色模式；名称：墨水瓶工具作用：修改线条属性名称：油漆桶工具作用：填充封闭区域名称：吸管工具作用：获取线条/色块属性名称：橡皮工具作用：擦除线条/色块2.2绘图2.2.1画直线1、画任意角度的直线。方法：使用工具。2、画固定角度的（水平、垂直、45°角）直线。方法：按住Shift键同时画线。3、改变直线的位置。方法一：使用工具，选中直线并拖动到新位置上，释放鼠标。方法二：使用工具，选中直线，然后在“信息”面板中输入X、Y坐标值，并按回车键确认。此方法常用于精确定位。上海市绿川学校信息技术与课程整合培训课程7图2.2-1A信息面板图2.2-1B转换面板4、改变直线的角度。方法一：使用工具，直接拖动直线的某一端。方法二：使用工具，选中直线，然后在“转换”面板中输入旋转角度值，并按回车键确认。此方法常用于精确定位。5、变直线的线型、线宽、颜色。使用工具，选中直线，然后在“描绘”面板中选取一种线型，并调整线宽和颜色。图2.2-1C描绘面板6、直线变曲线。方法：选取工具，将鼠标移到直线附近，当鼠标指针变成带弧线箭头形状时，按住并拖动鼠标，直线将变成曲线，释放鼠标。7、直线变折线。方法：选取工具，将鼠标移到直线附近，当鼠标指针变成带弧线箭头形状时，按住Ctrl键并拖动鼠标，直线将变成折线，释放鼠标。【例2.2-1】综合运用：利用画线工具画一个如图所示的立方体。要求：1、练习直线画法。2、学会用标尺、网格来确定位置。3、按Shift键同时选择多条直线。4、改变线型。上海市绿川学校信息技术与课程整合培训课程8【例2.2-2】综合运用：利用画线工具画一个如图所示的三角形。要求：1、练习直线画