1、1,Flash动画制作,主讲:刘萱 教育科学学院,2,课程学习内容,Flash基础知识 Flash动画中的元件 创建及管理 几种类型动画的制作 逐幁 移动 变形 遮罩 路径 Flash动作脚本 Actionscipt语句：播放控制 跳转、调用 循环 条件 影片控制语句等 Flash作品中声音的编辑 Flash作品中视频文件的编辑与处理 Flash导出与发布,3,学习目标与方法,目标： 熟练掌握基本知识 创作简单的作品 方法： 操作、练习为主,4,第一讲 Flash基础知识,Flash简介 Flash设计软件的特点 Flash文件格式 Flash应用领域 熟悉界面和软件工作环境 用Flash 的
2、良好的习惯,5,学习目标： 熟悉flash软件及工作环境 绘制和编辑Flash对象使用图层、面板等,6,Flash 简介,Flash是美国的MACROMEDIA公司于1999年6月推出的优秀矢量动画设计软件，适用于网页、mtv及教学课件中。 本课程主要应用Flash 8.0设计软件进行flash制作动画知识的讲解。,7,网络、动漫和多媒体技术的发展，音乐、动漫和文学互相穿插为一种发展的趋势。Flash就是这几种技术的一个接口，一个大型的Flash动画，可以应用Html、JavaScript、Php、Asp、CGI等技术，结合图像处理的3DMAX、CorelDraw、Photoshop等技术共同
3、完成的。,8,Flash 8.0设计软件是一种交互式动画设计工具，用它可以将音乐，声效，动画以及富有新意的界面融合在一起，以制作出高品质的动态效果。 虽然软件还在不断的升级，不过掌握了基本的操作方法，其他的版本也是大同小异。,9,Flash 设计软件特点,1. 使用矢量图形和流式播放技术。与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦急等待的情绪。,10,矢量图和位图 观察过报纸上的图片么,那上面的图片是不是由一个小点点组成的?位图是这样的,它把一幅图象划分成无数个小格子,这些小格子上的每一点就是图象的像素,小格子划
4、分的越多图象的分辨率就越高,越清晰,.矢量图是使用一组线段,造型描述一副图象,图象里面的线段由指令来描述的.矢量图文件远远小于位图文件体积,而且,无论放大或缩小都不会出现失真,位图一经放大会出现锯齿状.位图在表现照片等图形时比较真实, 如果图象的色彩比较丰富,最好用位图表现.,11,利用Flash可以制作出一种后缀名为SWF（Shockwave Format）的动画，这种格式的动画图像能够用比较小的体积来表现丰富的多媒体形式。在传输方面，不必等到文件全部下载才能观看，而是可以边下载边看,特别适合网络传输，特别是在传输速率不佳的情况下，也能取得较好的效果。此外，SWF动画是其于矢量技术制作的，因
5、此不管将画面放大多少倍，画面不会因此而有任何损害。,12,2. 通过使用关键帧和图符元件可以使得所生成的动画(.swf)文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。,13,3. 把音乐，动画，声效，交互方式融合在一起，越来越多的人已经把Flash作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画(电影)效果。而且在Flash4.0的版本中已经可以支持MP3的音乐格式，这使得加入音乐的动画文件也能保持小巧的身材。,14,4. 强大的动画编辑功能使得设计者可以
6、随心所欲地设计出高品质的动画，通过ACTION和FS COMMAND可以实现交互性，使Flash具有更大的设计自由度，另外，它与当今最流行的网页设计工具Dreamweaver配合默契，可以直接嵌入网页的任一位置，非常方便。,15,Flash 的文件格式,1,*.fla 是flash 的源程序文件格式，保存成此格式的文档能被重新修改。2,*.swf是flash的导出的影片格式，这种格式只能在动画播放器Flash Player中播放，不能对动画编辑或修改。,16,Flash的应用领域,基于Web的动画制作(banner,网页修饰性动画)；(网页中应用) 基于Web的多媒体课件开发；(教育教学) 互
7、动游戏制作，MTV,FMTV,基于Web的2D动画艺术创作；(娱乐) 多媒体光盘片头曲，甚至一些简单的三维动画。,17,单击“开始”“程序” “Macromedia”“Macromedia Flash Professional 8.0”，启动Flash程序，打开起始页。,Flash基础知识 认识Flash界面,18,熟悉Flash 8.0界面,19,Flash 8.0工作环境,20,21,Flash界面认识,舞台：工作界面中间的一块白色矩形区域 菜单栏：通过下拉菜单可执行命令 工具条：集中了一些最常用的命令 工具栏：绘图工具栏、调色板、选项板 时间轴：在不同层中控制动画的帧数及每帧的效果,22
8、,熟悉界面,舞台：也称为场景或工作区，在屏幕中央的空白处。所有的画图和操作都在这个白色的区域中实现，也只有这个区域的图像才能在动画中播放出来。打开“场景属性”对话框，可以修改场景的名字。选择“插入”菜单栏的“场景”命令，可以插入一个新的场景,23,舞台属性的设置 设置动画属性 播放速度每秒播放的帧数fps，默认12fps 画面大小横向像素纵向像素如300300 背景颜色调色板设置背景色,24,菜单栏：包含了 Flash 的所有功能，通过点击菜单可执行相应的命令，有文件、编辑、视图、插入、修改、文本、命令、控制、窗口和帮助。 工具条：集中了一些最常用的命令，而且是用图标来表示的，便于形象记忆。工
9、具栏：绘图工具栏、调色板、选项板,25,时间轴：上面的每个格子代表一帧，整数的帧上有数字序号，而且颜色也深一些，一帧可以放一幅图片，动画就是由许许多多帧组成的。帧上面有一个红色的线，这是时间指针，表示当前的帧位置，同时下面的时间轴状态栏也有一个数字表示第几帧。,26,图层栏：自动有一个黑色的“图层1”，黑色上面有三个按钮：一个眼睛一个小锁和一个方框，图层栏用来控制图层的添加、删除、选中等操作。图层都是透明的，上一层中没有图形，就可以很清楚地看到下面几层的图像。一影片在一图层很难完成，同一层不能同时控制多个对象。 帧:关键帧(时间轴上的实心圆点),在时间轴上插入任一关键帧,则会将前一关键帧的内容
10、复制到新的一帧中,空白关键帧(时间轴上的空心圆点),27,熟悉工具栏,在工作区的左边是工具箱，里面有许多的绘图和修改工具，跟Windows中的画图差不多。 黑“箭头”工具：用于选择图形； 工具箱里面还有两个瓶子，要区分开。左边的“墨水瓶”工具是用来给铅笔和直线喷颜色，右边的“油漆桶”工具用来给圆和框内部填充颜色（封闭图形），也可以给刷子喷色，注意区别。 工具下边还有放大镜和手形，双击手可以自动调整工作区。,28,29,Flash基础知识 对象的绘制与编辑,1使用线条工具方法：在工具箱单击“线条工具”打开属性面板在属性面板中设置线型、颜色、粗细在工作区中画线。绘制时按下shift键可沿水平、垂直
11、或45度方向画线。 2使用铅笔工具方法：单击“铅笔工具”属性面板中设置线型、颜色、粗细在工作区中画线。绘制时按下shift键可沿水平、垂直方向画线条。,30,3使用刷子工具刷子工具又称为笔刷工具，绘制的对象实际上是没有边线的填充区域。它可以更改工作区中任意区域的颜色，可以制作书法效果，可以将导入的位图作为笔刷来绘画，还可以调整刷子的压力来控制线条的粗细和效果。,31,Flash基础知识 对象的绘制与编辑,4使用椭圆工具和矩形工具单击“椭圆工具或矩形工具”在属性面板中设置边线的线型、颜色、粗细设置填充颜色在场景中拖动鼠标画出一个单色圆或矩形。 5使用墨水瓶工具墨水瓶工具 用来更改线条的颜色和样式
12、，不管线条是否处于选中状态，都可以用墨水瓶工具改变线条的颜色和类型。 6使用油漆桶工具油漆桶工具 用来更改或填充区域颜色，能自动使颜料按照闭合方式填充。,32,7使用橡皮工具橡皮工具用来擦除对象，有5种模式。 8使用滴管工具滴管工具又称为滴管，使用滴管工具时鼠标变为一个滴管形状，用滴管单击对象，能从已有的图形或字符中获取颜色、图案、字符大小等属性，并将这些属性通过绘图工具赋予其他处理对象。 9使用选择工具选择工具按钮 在工具箱左上角，用于选取对象，也用来改变图形形状，拉长或缩短线条长度。,33,Flash基础知识 对象的绘制与编辑,10使用“部分选取工具”“部分选取工具”按钮 位于工具箱右上角
13、，以贝赛尔曲线方式编辑图形。拖动轮廓的节点或节点切线可改变轮廓形状，拖动整个轮廓可移动图形。 11使用套索工具使用套索工具 可以选取任意形状的区域。在场景中拖动鼠标画出一个区域，区域内的对象即被选中。双击鼠标可闭合选择区域。 12使用钢笔工具钢笔工具 的作用是：让轮廓显示节点、给轮廓增加一个节点、删除一个节点、使平滑点变为角点。可以用钢笔工具绘制曲线，方法为：单击起始点，在每个所需位置单击可绘出折线，拖动鼠标经过所需位置可绘出曲线。,34,Flash基础知识 对象的绘制与编辑,13使用文本工具文本工具用于在场景中输入文字。方法：选取“文本工具”按钮在属性面板中定义字体、字号、颜色等在场景中拖出
14、一个区域输入文字用“选择工具”双击场景中的文字编辑文字内容。 14对象的剪切、复制和粘贴在不同图层、不同场景、不同Flash文件中移动或复制对象，要用剪切、复制和粘贴命令，剪切或复制的对象在Windows剪贴板上，保持原有的属性，粘贴到场景中的对象将放置在当前层的当前帧中。,35,Flash基础知识 时间轴窗口,时间轴窗口 是组织动画不同图层和不同帧的窗口，移动时间轴上的播放头，动画中的内容就随着所在帧的不同而发生相应的变化，连续播放就产生了动画。,36,Flash基础知识图层（Layer),形象地说，图层可以看成是叠放在一起的透明的胶片，如果层上没有任何东西的话，你就可以透过它直接看到下一层
15、。图层是时间轴的一部分，它是按所谓的堆叠顺序一参层一层相互叠加在一起的。 我们可以根据需要，在不同层上编辑不同的动画而互不影响，并在放映时得到合成的效果。使用图层并不会增加动画文件的大小，相反它可以更好帮助我们安排和组织图形、文字和动画。图层是Flash中最基本而且重要的内容，因而需要很好地掌握。,37,Flash基础知识帧及分类,如果我们把帧形象比喻的话，它就是电影胶片上的其中一张，整个动画的播放原理是和放电影一样，它同样是利用人的视觉暂留原理。如果把图片以一定的速度一张张地从眼前经过的话，看上去就好象是一个运动的画面。制作动画的过程也就是将这些静态的图像一张张的连续地变化，从而形成动画。1
16、、关键帧 ：关键帧在制作动画的过程中是非常关键的，只有定义了关键帧和动画的属性，才能让FLASH自动完成动画过程。关键帧就是定义动画的起始点和终结点，也就是说：动画的起始点和终结点都是关键帧。,38,2、过渡帧 ：在定义了FLASH的起始关键帧和终结关键帧之后，在起始和终结关键帧之内的帧被称为过渡帧，过渡帧是具体动画的实现的详细过程图，它能具体体现动画变化过程。当鼠标点击在过渡上时，工作区将预览这一帧的动画情况。 3、空白关键帧 ：在一个关键帧里面，什么对象也没有添加，这种关键帧称为空白关键帧。关键帧和空白关键帧的影格表示方法是不同的，关键帧中是黑色实心圆点，而空白关键帧中则是空心的圆点。,3
17、9,FLASH的帧：帧的操作,1、插入帧 ：使用“插入帧 ”功能，将在选定的帧后插入一个和这个选定帧完全一样的帧，在绘图过程中我们也经常使用键盘上的快捷键F5。 2、删除帧 ：选定一个或多个帧后，单击右键，选择删除帧功能。当一个帧被删除后，后面的帧将自动向前移动。,40,3、插入关键帧 ：将鼠标移动到帧的方格位置，用鼠标左键单击要定义为关键帧的方格，方格变为反亮显示，单击鼠标右键,选择插入关键帧（或在选好方格后，直接按下键盘上的F6键），,41,4、清除关键帧 ：选中这些帧，单击右键，选择“清除关键帧 ”就删除掉了。5、插入空白关键帧 ：同“插入关键帧” 的操作。 6、选择全部帧 ：在影格编辑
18、区单击鼠标右键，在弹出的菜单中选择“选择全部帧”，可以将所有的有效影格选定，从而再进行其他操作。这里指的是在影格编辑区的任意一个位置都可以使用(单击鼠标右键)，选定后的帧将作反亮显示。 7、复制帧 ：在影格编辑区中选中一帧或多帧，选中的帧将做反亮显示，然后单击右键，选择“复制帧 ”。,42,8、粘贴帧 ：复制好帧后，选择时间轴上任意时间帧位置，单击右键选择“粘贴帧 ”，这样刚才复制的帧被粘贴到这个位置上来了，原被选中的那一帧被覆盖了。 9、移动帧 ：选中一帧或多帧后，被选中的帧反亮显示，当鼠标悬浮在被选的帧上时，鼠标出现了变化，鼠标的指针上跟随了一个方框一样的“小尾巴”。这样按下左键，拖动鼠标
19、至任意位置，松开鼠标，这样刚才被选的帧被移动到刚才所定的位置来了。 10、翻转帧 ：当选中任意两关键帧或空白关键帧之间(包括这两个关键帧或空白关键帧)，这样单击右键，选择“翻转帧 ”，这样被选中的两个关键帧相互翻转帧，而且FLASH也同步更新了这两个关键帧之间的过渡帧。,43,Flash基础知识 Flash常用面板,Flash常用面板有“浮动”和“可停靠”特性 。 1信息面板信息面板提供操作过程中相关信息。 2对齐面板对齐面板用于设置所选对象的对齐方式、分布方式、匹配方式和间隔距离。按住Shift键不松手单击各个对象，可以将多个对象同时选中。 3变形面板变形面板设置对象的各种变型，如缩放、旋转
20、、扭曲，还可以用来复制所产生的变型体。,返回目录,44,4.1 Flash基础知识 Flash常用面板,4. 颜色样本面板颜色样本面板实际是颜色库，显示系统默认提供的实色和渐变。单击面板右上方下拉按钮，用显示的菜单选项为面板增加色样或减少色样。 5 混色器面板混色器面板用于设置图形边框色、填充色和透明度，改变渐变填充的油漆桶颜色。 6 历史记录面板历史记录面板可以撤消对文档所做的一系列更改。默认情况下，Flash 可以撤消 100 次更改，按倒序的顺序撤消所执行的操作。,返回目录,45,Flash基础知识 Flash常用面板,7影片浏览器面板影片浏览器面板用于排列、定位和编辑媒体。影片浏览器面
21、板通过树型结构提供文档的结构信息和流的信息。 8属性面板属性面板用于对图形、图像、文档等对象做相应设置，对象的动作设置也在属性面板中进行。属性面板的内容随所选对象的不同而变化。,返回目录,46,设置坐标,选择“视图”/“标尺”命令，按住鼠标左键向右或向下拉动，就可以拉出垂直或水平参考线。网格：选择“视图”/“网格”/“显示网格”命令，可以在场景中打开网格，可以使动画元素的制作更加精准。,47,48,编辑线型,打开工具栏：选择“窗口”/“工具栏”/“主工具栏”。 在工具箱中选择线条工具，在舞台中某个点按住鼠标左键任意拖动，就画出一条直线。同时选择磁铁图标，则画线时鼠标指针变为大圆圈，可以确保画出
22、的线条是水平或垂直的。取消对磁铁图标的选中，画线的同时按住Shift键，可以画出水平、垂直或45度角的直线。,49,编辑图形,首先，在工具栏中选择矩形工具右下角的多角星形工具，在舞台中拖动鼠标，划出所需的多角形。 画出五角星：在“属性”面板上单击“选项”按钮打开“工具设置”对话框，在“样式”下拉列表框中可以选定星形，其它参数默认，就可以在舞台中划出五角星了。,50,51,制作渐变文字,选择文本工具，设置字体为Arial Black，字号为96磅。在舞台中单击，输入所需字体。例如：FLASH。可以按住Ctrl键将文本拖动到合适的位置。 选择“修改”/“分离”命令，将文字打散成单个字符，重复该操作
23、，进一步将字符打散成图形。（也可以快捷键Ctrl+B将所输入的文字打散） 在工具箱中选择颜料桶工具，打开颜色库选择光谱色。这时所有文字仍处于选种状态，将颜料桶从左侧的F开始向右至H结束拉出水平渐变线。可以看到，文字被填充上了光谱渐变色了。（用颜料桶在字符上拉出垂直的渐变线，文字就将从上到下填充渐变色。） 按住Ctrl键，单击文字图形以外的地方，取消选中。可以用颜料桶工具对单个文字拉出不同的渐变线。,52,编辑文字,在工具箱中选择文本工具。对属性面板中的各项进行设置。 首先，文本类型：静态文本、动态文本、输入文本这三类按需要选择。我们先选择静态文本。选择“黑体”，字号为32磅，颜色为光谱色。 输
24、入所需文字后，对文本进行编辑。一般，如果不是另起一段，不提倡使用硬回车换行。可以按住鼠标文本输入框右上角的圆点，拖动到所需的文本宽度。此时，该圆点变为方点，这是段落文本的标志。 使用“属性”面板上的各种图标对文本进行大小、方向、格式等命令的编辑。,53,符号、实体,符号 符号是可以重复利用的图像、动画、或者按钮。在动画作品中可以多次引用符号，缩减文件的大小，加快网络传输速度，因为同一个符号下载到浏览器只需一次就可以了，同时简化编辑过程。 图形符号 电影片断 按钮,54,实体 当建立了符号以后，编辑动画文件的时候就可以拖动符号的“分身”到工作区中。这些“分身”叫做实体，当修改实体的大小、颜色的时
25、候，都不会影响符号的“本身”。而修改符号将改变实体，多个实体的同样的修改只需修改符号一次。,55,Flash MX 元件（Symbol）,元件是所有Flash项目中的一个关键组件，指的是一个可重复使用的图像、电影或按钮。它的作用就是“一个元件，多次使用”。设计元件就是为了帮助用户创建动态且占空间很小的电影。 按照Symbol（元件）在电影文件中的表现形式，可以分为三种类型： 1、影片剪辑（ Movie Clips ） 2、按钮（ Buttons ） 3、图像（ Graphics ）,56,图形与图形元件,图形与图形元件在制作Flash中大量使用，他们的外表几乎没有差别，但本质完全不同。形状是元
26、件的内容和基础。 首先，学会区分图形与图形元件。1，选择“修改”/“转换为元件”命令就可以将已画出的图形转换为图形元件；2，单击选中原图形，该图形表面出现网纹，而单击选中图形元件，出现蓝色边框和中心圆点；3，选择黑箭头或白箭头工具，可以编辑改变图形的形状，但是无法改变图形元件的形状。4，当变形编辑时，图形和图形元件的中心点是不同。5，二者在进行颜色编辑和属性设置时也不同。,57,图形元件的调用与编辑,将形状转换为元件是Flash中经常需要进行的操作步骤。通过下面这个例子，希望大家能熟悉转换的过程，能够自己熟练的进行转换。 将花朵图形转换为图形元件。 首先，我们需要在舞台中央画出一朵花。那么第一
27、步就先得画出一个花瓣。并且将花瓣转换为元件。 然后，选择变形工具，移动花瓣元件的中心。再选择“控制”/“设计面板”菜单里的“变形”（或按快捷键Ctrl+T），打开变形面板，将“旋转”的角度设定为30度，连续单击面板右下角的“复制并应用变形”图标，就可以画出一个花朵。 最后再将整个花朵选定，将其转换为元件。并对其进行编辑。,58,建立影片剪辑元件,首先，建立一个多帧的图形元件： 1,选择“插入”/“新建元件”命令（或者直接按Ctrl+F8),在弹出的面板中选择“图形”，将其定名为“跳动的球”，单击确定按钮退出。 2，现在，就进入了“跳动的球”这个元件的编辑场景。我们先画一个绿色的圆球。（按住Sh
28、ift键可以划出一个很圆的圆形）。按住Ctrl键单击画好的圆球将其选中，按F8键将圆球转换成图形元件，并将其命名为“球”。 3，分别在时间轴上当前层第10帧和第20帧上单击并插入关键帧（快捷键是F6)。单击选中第10帧，选中黑箭头工具，将舞台中的绿色小球向上方移动。,59,4，在第1帧和第10帧这两个关键帧之间右击，选择“创建补间动画”命令，在这两个关键帧之间创建运动动画。用同样的方法将后面两个关键帧之间也建立运动动画。按回车键就可以看到动画了。 5，单击“场景1”回到场景编辑舞台，按F11键打开元件库，可以看见有两个元件，其中一个“跳动的球”的显示框中右上角有播放按钮。这表示这个元件有不止一
29、帧。 6，将这个多帧元件拖到舞台中央，按Ctrl+Enter键测试动画，发现这个绿球就不动。这是因为，整个文件只有1帧，而这个元件有20帧。因此，只需要在场景中的第20帧上插入一个空白关键帧就可以了。,60,然后，再建立一个多帧的影片剪辑元件： 1， 1,选择“插入”/“新建元件”命令（或者直接按Ctrl+F8),在弹出的面板中选择“影片剪辑”，将其定名为“跳动的球1”，单击确定按钮退出。 2，其余步骤与建立图形元件基本相同。 当从元件库将影片剪辑拖到舞台中按Ctrl+Enter键测试动画时却可以看到小球的动画。,61,制作按钮元件,详见教学网的讲解 制作按钮点击特效 1，创建一个按钮元件。
30、2，在“指针经过”帧上单击，按F6键插入一个空白关键帧。 3，在舞台中画一个圆，关闭填充色，任意选择边线色，大小任意。选择黑箭头工具，单击画好的圆圈，在属性面板将图形的宽和高的数值都设定为100，X和Y的坐标值都是-50，圆圈就自动居中了。,62,4，在时间轴上单击“点击”帧，按F6键或按F5键都可以。（因为建立点击热区，所以复制前一个关键帧和延长前一个关键帧是一样的。） 5，回到场景1中，将元件库中的按钮拖到舞台中。按钮时蓝色的，因为它是个隐形按钮。 6，选择“任意变形”工具，将变形的中心点移到变形框的左下角。按Ctrl+T键打开“变形”面板，将其中宽和高的比率改为105%，并且选择约束命令。连续单击“复制并应用变形”图标，不断复制放大这个隐形按钮，直到圆圈的中间完全被覆盖。,63,用Flash 的良好的习惯,1、给每个元件起一个便于记忆的文件名。 2、每增加一个层，起一个便于记忆的文件名。 3、每增加一个元件把它放到一个新层上，不进行深加工时要锁定层。 4、做的各种元件中没有用的东西一定要删除。 5、声音文件在使用时单独放在一个层上。 6、在开始做动画之前，先设计好工作区的大小和背景颜色。 7、尽可能多使用元件和补间动画，这样可以减小文件的体积。,
