Falsh在网页设计中的应用.doc

Falsh在网页设计中的应用摘要本次毕业设计的课题是“flash在网页设计中的应用”。该设计是在Windows xp的环境下，用Macromedia Dreamweaver 8跟Macromedia Flash 8完成的，本设计意阐明flash使网页更加生动，更加有吸引力，增加与浏览者的互动性。关键词Flash； 网页设计；应用；生动；吸引力；互动性 Abstractflash in the web design application The graduation project is the subject of flash in the web design application. The design is in Windows xp environment, with Macromedia Dreamweaver 8 with Macromedia Flash 8 completed, the design of web pages is intended to clarify the flash more vivid, more attractive, increasing the interaction between the viewer. KeywordsFlash； Web design；application；vivid；attractive；interactivity 一 引 言 Flash当初是mecromedia公司旗下的一款在业界知名度级高的适量动画制作软件，而后被adobe公司收购，flash最初仅用于网页简单动画设计，当时的互联网现状是整个网络充斥了华丽的flash动画，因为时髦，但常常华而不实，当时的flash给网络带去很多升级与活力同时也带来很多问题，而后flash不断壮大，转到adobe旗下以后adobe很快将action script升级，使其成为健壮的oop语言，从此flash编程逐渐流行并形成不可阻挡之势，在过去的几年以及现在由flash构建完整的网站以及富客户端应用程序已不在话下，同时由于flash编程客观存在的难度与其特点使得flash编程成为一门相当枪手的职业。 以下将对“flash在网页设计中的应用”的设计思路和方法作详细说明。目录一 引言2二 Flash概述4三 Flash 的基本操作5四 Flash实例10五 flash与网页设计的结合59总结61致谢62参考文献63二 Flash概述随着以计算机技术、通信技术为代表的现代化信息技术的飞速发展，人类社会正从工业时代阔步迈向信息时代，人们越来越重视信息技术对传统产业的改造以及对信息资源的开发和利用。 而网页就是这一时代的工作平台，单纯的网页往往给人带来枯燥的感觉，在网页中添加一幅幅生动的flash动画使枯燥的网页变的生动起来，使网页更加有吸引力，更增加了与浏览者的互动性。三 Flash 的基本操作一、flash的简述Flash是Macromedia公司出品的软件，对于Flash是什么很多的描述，大致是“交互性矢量多媒体制作软件”的意思！首先，它是一种多媒体制作软件，Flash的产品往往都是一些“有声有色”给人视觉冲击的动画。其次，Flash是以矢量图为基础的，矢量图最大的特点就是它能无限的缩放，不会因为图像的缩放而改变其显示的质量。最后，Flash的发展与网络是紧密相连的，其大量的特性是与网络相关的。可以说，没有与网络的结合，Flash绝对不能取得现在的成功。与此同时adobe的收购，也给flash添加了新鲜血液，是flash的功能更加强大，使flash编程由开始的流行发展到势不可挡，同时由于flash编程客观存在的难度与其特点使得flash编程成为一门相当枪手的职业。但同时flash离开了网页这一平台也不会有今天的发展，网页作为一个平台给flash提供了强大的舞台，使得flash势头可以快速在全球蔓延，同时各大媒体对它的宣传，设计界和市场也开始对这样一种新的宣传和表达方式重视起来，Flash动画的价值也开始以秒来计算，大大的刺激了更多的Flash迷的创作热情。他们汇聚在自己的网络空间里，以始终如一的热情，创作出一个又一个的Flash精品，吸引着成千上万双眼睛的关注！二、flash基本的运算单位和快捷键运算单位：Flash是以“帧”为运算单位的，“帧”就像电影拍摄中胶片的一幅幅画面一样，电影是由连续的画面组成的，通常一个镜头由24幅画面组成，现在高的还有。FLASH中的帧其实你可以把它认为就是这样一幅幅小画面，几个连续的帧就组成一个连续的画面。默认的FLASH里面12帧为1秒。你也可以设置成24帧甚至更高。几种类型帧的小结：（关键帧、空白关键帧、普通帧） 1. 特点 帧是进行flash动画制作的最基本的单位，每一个精彩的flash动画都是由很多个精心雕琢的帧构成的，在时间轴上的每一帧都可以包含需要显示的所有内容，包括图形、声音、各种素材和其他多种对象。 关键帧顾名思义，有关键内容的帧。用来定义动画变化、更改状态的帧，即编辑舞台上存在实例对象并可对其进行编辑的帧。 空白关键帧空白关键帧是没有包含舞台上的实例内容的关键帧。 普通帧在时间轴上能显示实例对象，但不能对实例对象进行编辑操作的帧。 2. 区别 1） 关键帧在时间轴上显示为实心的圆点，空白关键帧在时间轴上显示为空心的圆点，普通帧在时间轴上显示为灰色填充的小方格 2） 同一层中，在前一个关键帧的后面任一帧处插入关键帧，是复制前一个关键帧上的对象，并可对其进行编辑操作；如果插入普通帧，是延续前一个关键帧上的内容，不可对其进行编辑操作；插入空白关键帧，可清除该帧后面的延续内容，可以在空白关键帧上添加新的实例对象。 3）关键帧和空白关键帧上都可以添加帧动作脚本，普通帧上则不能。 3. 应用中需注意的问题 1） 应尽可能的节约关键帧的使用，以减小动画文件的体积； 2） 尽量避免在同一帧处过多的使用关键帧，以减小动画运行的负担，使画面播放流畅。快捷键：Undo 取消 Ctrl+ZRedo 重来 Ctrl+YDelete 删除 DeleteCut 剪切 Ctrl+XCopy 拷贝 Ctrl+CPaste 粘贴 Ctrl+VDuplicate 复制 Ctrl+DGroup 群组 Ctrl+GUngroup 取消群组 Ctrl+Shift+ZBreak Apart 打散 Ctrl+BSelect 选择 点击鼠标左键Select 选择 点击鼠标左键增减一个选择 Shift键+鼠标左键Select All 全部选择 Ctrl+ADeselete All 取消选择 Ctrl+Shift+AZoom In 放大视图 Ctrl+ =Zoom Out 缩小视图 Ctrl+ -开/关浮动面板 Tab键EditSymbol 编辑Symbol Ctrl+EModifyMovie 更改影片 Ctrl+MTestMovie 测试影片 Ctrl+EnterTestScene 测试场景 Ctrl+Alt+EnterDreamweaver 基本操作Dreamweaver 基本操作跟world基本相同，下就dreameaver基本特性进行说明：一、输入和修改文本1、Dreamweaver中的回车键相当于分段，行间空隙比较大；“Shift+回车键”相当于分行，行间空隙比较小。2、文字属性设置3、层叠样式表（CSS）（1）样式表的创建单击机板右上角向右的箭头，在弹出的菜单中选择“New Style”；Name：样式表的名字，点号表示这是一个样式类标记，而不是HTML标记符号，名字可以另起。Type：样式表类型，共三种，分别是：自定义样式表，重新定义HTML标记，使用CSS选择器。（2）样式表的应用二、图片与超链接1、图片：Align属性2、超链接：（1）超链接的建立：链接文件如果是网页文件，浏览器就会打开该网页并进行显示；如果是浏览器本身不能显示的文件，则会弹出提示框让你决定是否进行下载。（2）打开方式的设置3、图片的热区映射区4、网页文件的内部链接（1）在被连接的部分前面加上一个位置标识（锚点），以便被指定连接。 Insert/Invisible Tags/Named Archor（2）链接的指定（Link栏中输入：#name）四 Flash 实例实例1雄鹰动画：效果图：新建一个动画文档1 设置动画文档属性 输入一个动画文档 设置尺寸 设置背景颜色2 创建动画背景 导入图片 调整图像大小及位置 在第110帧处添加普通帧创建图形元件1 创建雄鹰元件 执行【插入】|【新建元件】命令，输入【名称】为“雄鹰”，选择【类型】为【图形】，单击【确定】。 选择第1帧，执行【文件】|【导入】|【导入到舞台】命令，将名为“雄鹰.png”的图片导入到场景中。2 创建云朵元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“云朵”。 选择第1帧，执行【文件】|【导入】|【导入到舞台】命令，将名为“云朵.png”的图片导入到场景中。开始创建动画运动的效果1 创建雄鹰俯冲的效果 转换到主场景1，新建一个图层2。 把名为“雄鹰”的元件拖到场景的左上角。 设置雄鹰方向、透明度、大小、坐标等。 选中图层2的第110帧，添加关键帧。 设置雄鹰透明度、大小、坐标。 右键单击【图层2】的第1帧，选择【创建补间动画】。 选中图层2的第110帧，添加关键帧。 设置雄鹰透明度、大小、坐标。右键单击【图层2】的第1帧，选择【创建补间动画】。2 创建云朵飘动的效果新建一个图层（图层3）。将名为“云朵”的元件拖动到舞台上，放置在背景图的右侧处，并设置参数。选中第110帧，按F6键添加一个关键帧。把元件移到场景的左上方，并设置参数。用鼠标右键单击图层3的第1帧，然后选择【创建补间动画】。实例2 鼠绘葡萄：新建 FLASH 文档。保存为“葡萄”，设置背景为灰色，其它默认。一、制作葡萄 1 元件。 1、新建元件命令，在创建新元件面板中输入名称：“葡萄1”，行为选择图形，点确定进入葡萄1元件舞台。用椭圆工具画一个无填充色，大小为9480葡萄外形.居中对齐。选颜料桶工具，放射性渐变从左至右色标分别为：#D98CAB #940E51 #65123D #804080 （见图）二、制作高光1、插入新建元件命令，在创建新元件面板中输入名称：“高光”，选笔触颜色为黑色，填充色无。把场景比例放大到 400，用椭圆工具画一个椭圆。用选择工具调整椭圆的形状，（见图）2、填充颜色：打开混色器，选放射性填充。左色标为#FFFFFF，透明度为80%，右色标为# FFFFFF，透明度为 0，用颜料桶工具填充变形椭圆。用填充变形工具调整颜色的位置，用选择工具点选黑边线并删除。然后，选定变形椭圆，执行修改形状柔化填充边缘在弹出的对话框里选距离10、步骤数 5、方向插入，点确定，然后点修改、组合。（见图）三、打开葡萄 1元件，增加图层2，把高光拖出来几个放到葡萄上边。效果图如下：四、制作葡萄2元件、葡萄 3元件1、新建“葡萄2”元件、“葡萄3”元件，分别进入葡萄2、3的编辑场景，图层1的第一帧把库中葡萄1拖入，全居中，选中场景中的葡萄元件，在属性面板中选颜色高级设置，我们可以制作几个不同颜色的葡萄，然后得葡萄见下图所示：五、画葡萄叶子1、新建元件命令，在创建新元件面板中输入名称：葡萄叶子，行为选择图形，点确定进入葡萄叶子元件场景。 选椭圆工具画一个345293的椭圆。用直线工具调整。打上若干个节点，调整叶子边。增加一个图层，用直线工具画上叶子梗。再用刷子工具和直线工具画上叶叶脉。（见图）2、填充色：放射状：#003300 #339900。（见图）六、制作葡萄串元件1、新建元件命令，在创建新元件面板中输入名称“葡萄串”，类型影片剪辑。 2、图层1从库中拖出 N个葡萄 1元件摆放到场景中。 3、新建图层 2，置于图层 1 下面，使用刷子工具画出梗的形状，用部分选择工具修改调整，填充为线性左边014321，右边666600。（见图）七、组织场景1、返回场景， 新建 3个图层，自上而下分别取名为：“文字”、“叶子”“葡萄”、“背景”。 2、打开库，把葡萄串元件拖入到葡萄层，调整大小位置. 点滤镜投影模糊 17强度 30%品质是低颜色是黑角度 221距离-27。 3、打开库，把叶子元件拖入到叶子岐，调整大小位置。 4、在文字图层打上标题。 5、在背景图层放入自己喜欢的图片。 6、测试影片，保存。实例三 鼠标扇子跟随：效果预览一、建立新文档点修改文档，在文档属性里把背景颜色改为黑色，其它默认。二、绘制扇片元件1、点插入新建元件，名称：扇片，元件类型：影片剪辑，确定。 2、在羽毛元件的编辑区，改图层名称为羽毛。 3、在工具箱中选择“直线工具”，笔触颜色任意，在场景画一竖线，然后选择“选择工具”在线条的中间把线条拉弯，在拉弯的线上再画一条竖线同样拉弯形成封闭状的月牙形，如图1：4、用放射状填充颜色，颜色可自己选择，我这里选择左色标：#0000FF、右色标：#000000，填充好颜色后把笔触删除，按着Ait键向右复制三个共四个形成一组，然后全部选中，按着Ait键向左复制四个，中间间隔要有一定距离做到可以单独选择一组，宽高比上锁，高设为：60，然后选择每组改变填充颜色，右色标：#000000不变，左色标可以选择自己喜欢的颜色。如图2：5、选中每一组用方向键向第一组靠拢，形成一个整体。用选择工具在羽毛的顶部拉成一个球形，然后按着Ait键调节形状，如图3：6、选中羽毛图层第1帧在全部选中元件的情况下右键元件转换为元件，在弹出框中选择影片剪辑名为“羽毛”，选项中羽毛元件在属性面板点开滤镜来给羽毛做个模糊效果，点滤镜点加号点模糊，模糊度35。如图4：7、新插入图层二，改名称为扇柄，利用矩形工具画出一个填充色为线型，左右色标：#CC6600，中色标：#FEA64E，把矩形调整成合适的形状，再放置在羽毛的合适位置，到此扇片就制作完毕。如图5：三、绘制扇子1、插入新建元件 名称：扇子 类型：影片剪辑 2、图层一，改名称为扇片，打开库，把扇片元件拉入扇子的影片剪辑编辑区，在对齐面板执行垂直中齐、右对齐，选择任意变形工具，将变形点移至元件的十字处。如图6：3、选中该元件，按“Ctrl+T”键，打开变形面板，按图7所示操作：4、复制后如图8所示：5、图层 1 的18 帧处插入关键帧，选中第1帧至第18帧的所有帧，按F6键插入关键帧。如图9：6、点选扇片图层第1帧，把左边第二片扇片元件按Delete删除，然后用选择工具框选除左边第一片以外的所有扇片元件，保留左边第一片扇片元件，选中第2帧方法同上不同处是保留左边的第一、第二片扇片元件，依此类推，第18帧保留所有的扇片元件。如图10：7、点选扇片图层第1帧，按着Shift键点第18帧全选所有帧的情况下鼠标轻轻移到第1帧处，按着Ait键向右移到至第30帧处松开鼠标，这样把第1至第18帧复制到第30帧至47帧处，在第30帧至第47帧全选中的情况下点右键翻转帧，第60帧插入帧。如图11：8、新插入图层二，改名称为扇坠，从网上找一幅GIF扇坠的图片（也可用我提供的）选中第1帧把扇坠放在合适的位置，第5、10、18、30、35、40、47帧插入关键帧，在每关键处稍稍调整一下扇坠的位置。 9、点选图层二插入图层三，改名称为扇钉，用椭圆工具，笔触无，放射状填充画一正圆大小略小于扇柄，同上面扇坠的制作方法，把扇钉放到合适位置。这样扇子就绘制完成了。下面来组装场景。 四、组装场景1、增加四个图层，自下而上分别是：背景、星、扇子、标题或签名、AS，图层上锁。 2、打开背景把自己喜欢的图片导入，设置大小550*400，全居中。 3、打开星图层把星元件拖入复制若干个摆好位置。 4、打开扇子图层，从库中拖入扇子影片剪辑元件，在属性面板输入实例名：mc_mc 。 5、打开标题或签名图层写上自己喜欢的文字和大名。 6、打开AS图层点第1帧右键动作，打开动作面板，输入如下语句： onEnterFrame = function () mc_mc._x = mc_mc._x + (_xmouse - mc_mc._x) / 5; mc_mc._y = mc_mc._y + (_ymouse - mc_mc._y) / 5; ; 7、保存、测试实例四佛光效果：1、将背景改为黑色，点击插入菜单-选择插入元件-效果如下图：2、操作步骤如下图：3、操作如下图：4、操作如下图：5、多次再制后得到如下效果：6、操作如下图：（提示：只有将线条转换后才能上渐变色，不然只能填单色）7、操作如下图：8、回到场景。9、将图层1命令为佛光01，如下图：10、操作如下图：11、操作如下图：12、操作如下图：13、将两个图层在40帧的位置插入关键帧，下面操作如下图：14、选择图层中间的帧，在上面单击右键，选择创建补间动画，如下图：15、在遮罩层上面单击右键选择遮罩，如下图：实例五flash光晕移动：效果预览：代码：/一开始要导入一个Tweener包, /这个包在网上下载import caurina.transitions.*; /定义2个变量,分别代表场景的宽和高 var stageWidth:int = stage.stageWidth; var stageHeight:int = stage.stageHeight; /加载一个跟场景一般大小的位图 var bmd:BitmapData = new BitmapData(stageWidth,stageHeight,true,0x000000); var bm:Bitmap = new Bitmap(bmd); addChild(bm); /从库里加载logo,这个是在库里面先定义好的 var logo:myLogo = new myLogo(); addChild(logo); /这里使用了Tweener类,可以读解为: /对logo添加动画,使其在1秒钟内(x,y)坐标移动至场景内的随机一点,并随机旋转(0360)度。默认缓冲动画效果。 /当动画结束后，自动加载loop方法（即再次执行loop） function loop():void Tweener.addTween(logo, x:Math.random()*stageWidth,y:Math.random()*stageHeight, rotation:Math.random()*360,time:1,onComplete:loop); loop(); /效果的关键： /每一帧都将当前的场景描绘为位图，并加载模糊滤镜。 addEventListener(Event.ENTER_FRAME, burnLogo); function burnLogo(e:Event):void bmd.draw(this); bmd.applyFilter(bmd,bmd.rect,new Point(0,0),new BlurFilter(8,8,3); 实例六3D方格制作：1.创建图形元件。 2.制作按纽元件，在点击帧建立响应热区，建立图形元件与按纽元件的关联。 3.创建影片剪辑元件。建立图形的动画效果，并与按纽关联。 有两个图层 图层一：第一帧和最后一帧加stop()语句，阻止不停播放帧 图层二：从库中拖出按纽元件，点中元件，输入语句 on(rollover)play: 使图形与按纽重合元件 4.创建组合的影片剪辑元件，将拖入进行组合。 5.将影片剪辑元件，拖入场景。实例七 Flash实现动画影片中图片缓冲放大和缩小效果：效果预览： 导入几张图片分别转为影片元件，拖到主场景，实例名分别为pic0_mc、pic1_mc、pic2_mc在帧上写如下代码：for (var d:Number = 0; d=200) delete this.onEnterFrame; ; ; thispic+d+_mc.onRelease = function() stopDrag(); this.onEnterFrame = function() this._xscale -= (this._xscale-100)/4;/缓冲缩小 this._yscale -= (this._yscale-100)/4; if (this._xscale=100) delete this.onEnterFrame; ; ; 实例8 星星写字特效 ：1、启动Flash，选择文件-新建 命令，新建一个 Flash 文档，并将舞台背景颜色设为黑色。2、新建一个图形文件，命名为light。在编辑区中绘制出如图1所示的图形。3、新建一个名为starlight的图形文件，进入元件编辑窗口，从“库”面板中将元件light拖曳到当前元件编辑区中心处。按CtrlT组合键打开“变形”面板，在其中设置各项参数，如图所示；然后单击复制并应用变形按钮三次，即可得到“星星”图形元件。 4、新建一个名为star的影片剪辑元件，进入元件编辑窗口，将元件starlight从“库”面板中拖入到当前元件编辑区，使其中心与元件编辑区中心对齐。分别选中第10帧和第20帧，并按F6键插入关键帧。5、单击第1帧，选中starlight元件实例，在“属性”面板中设置Alpha值为10% ，并修改其尺寸为原来的50% ，如图所示。选中第10帧，利用“变形”面板使元件旋转10度。再选中第20帧，设置其Alpha值为20% ，其尺寸为原来的50% 。6、选中“图层1”的第1帧，在“属性”面板中设置“补间”为“动作”，“旋转”为“逆时针”。选中第10帧，在其“属性”面板中设置“补间”为“动作”，“旋转”为“顺时针”。7、返回“场景1”编辑窗口，从“库”面板中将元件star拖入舞台。在“图层1”上面添加一个动作引导图层，锁定“图层1”。8、选择“文本工具”，在引导层上输入文本Flash178，文本属性设置如图5所示。9、连续两次按CtrlB组合键将文本打散。选择“墨水瓶工具”，设置“笔触高度”为1，单击各个字母得到轮廓线，删去多余的部分，并使用“橡皮擦工具”在字母a、8顶端擦出一个小缺口，如图6所示。10、选中引导层的第159帧，按F5键插入普通帧。 11、选中“图层1”第1帧，在工具箱下方的“选项”选项区中单击“对齐对象”按钮，将元件star移动到字母F上方端点处，如图7所示。在“属性”面板中设置元件的实例名称为star，如图8所示。12、选中“图层1”的第9帧，并按F6键插入关键帧，将元件star移动到字母F上方右侧端点处，这样就完成了一个字母动画的制作。同样，分别在第28、41、42、59、60、76、77、97、98、115、116、136、137、159帧按F6键插入关键帧。13、单击“图层1”，在“属性”面板中设置“补间”为“动作”，完成整个字母动画。14、新建一个名为“动作”的影片剪辑元件，进入元件编辑窗口，选中第1帧，按F9键打开“动作-帧”面板，添加如图9所示的动作语句。15、在第2帧添加动作语句“gotoAndPlay(1)”，表示循环播放第1帧。16、返回“场景1”，新建“图层3”，在“库”面板中将元件“动作”拖曳到舞台中，然后删除第159帧，使动作语句对该帧不起作用。17、选中“场景1”的第97帧，添加动作语句：stop()；，此时的“时间轴”面板如图10所示。18、按CtrlEnter组合键测试影片，观看动画效果。 实例九 遮照及文字：遮照（MASK），也被被称为蒙版，是FLASH中和补间动画，引导图层等技巧一样也是FLASH的重要功能，灵活地应用他，可以使作品更丰富和精彩。遮照（MASK），显示遮照的部分，隐藏其他部分的技巧。原理就是，在2个图层重叠时，把上面图形设为遮照，下面的图层（被遮照层）的图形只显示没有被遮照的地方。遮照层不管是什么颜色，只显示被遮照层的颜色。不管是形状，图形，MC等，只要有面积就可以当遮照层。被遮照层可以是1层，也可以是几层。例如，手电筒，探照灯等，就很形象的说明遮照。 文字遮照，一般的静态文本，作为遮照层时，就好象文字被烙空的感觉，看到下面的被遮层，经常有一些闪光的文字呀等就是文字遮照；静态文本如果是应用了一些特效，如投影等，就变成了图形，遮照层将是整个图形，今天的一个朋友发的帖子就要实现他的文字的滤光效果，就是我讲得闪光文字，结果他一直把有特效的文字当遮照层，就没有办法实现了。后面和他在QQ里沟通了一下，最后解决了问题。 一个文字遮照的步骤： 1 新建一个文档，550X400PIX，背景白色，12针/秒 2 建图层1，双击图层左边，改名为底层文字，再建图层2，改名为棒，后再建一层，改名为文字层 3 先做底层文字，第一针打入静态文本“闪闪”2字，隶书，76号字，黑色， 4 复制底层文字到最上面的图层，方法是选择底层文字，按ALT不放，鼠标拖到文字层的第1针，注意鼠标要有出现“+”才有用。 5 在底层文字层的30针处按F6建关键针，同样文字层的30层也建关键针 6 先锁定文字层和底层文字，在棒层，第1针建一个有白色线性渐变效果的棒，复制一个，CTRL+A全选，调到同一个水平。在30针处建关键针，全选所有针，点右键建补间，适当调整1针和30针的文字的位置。分别在闪闪2字的2边 7 右击图层文字层，选择遮照。就可以CTRL+ENTER测试了 另外你可以试看如果把文字设定一个特效以后，如投影，动画的效果；还可以，设定没有底层文字情况下的动画效果，以加深对遮照的理解。希望起到抛砖引玉的作用。在实际中能举一反三.附上源文件。 当然遮照都可以有非常复杂的变化。也可以通过AS来编程 照镜子效果： 新建fla文件 1.设置如下 ：大小55X400，黑色背景。12FPS 2图片层设置如下，导入一幅和场景一样大小的图片。转为MC1 3在镜子层，新建一个无边框的圆，颜色自己定，转为MC 4最后在MC1上写如下代码： Stage.scaleMode = noScale; Mouse.hide(); MC1.onEnterFrame = function() this._x += (_xmouse-this._x)*0.5; this._y += (_ymouse-this._y)*0.5; ;实例十 按钮制作 ：一：制作名为“弹起”的影片剪辑 创建一个Flash文档，设置舞台的宽高为150150。 创建一个影片剪辑，名为：弹起。 编辑这个元件，在其上创建 4 个层，从上到下分别为：action、外框、图形、底纹。 在“图形”层的第 1 帧绘制一个圆角无边正方形，宽高皆为 100。然后通过“复制帧”复制这一帧到“外框”层的第 1 帧； 选中“外框”层的第 1 帧的圆角无边正方形应用以前介绍过的柔化填充边缘方法，应用中取距离为 1、步骤数（或帧数）为 2、方向为扩散。 删除“柔化填充边缘”后的圆角正方形的内部，并将新生成的细框设置为黑色。选中它再应用一次“柔化填充边缘”，这次取“距离”为4、“步骤数（或帧数）”为 10、“方向”为扩散。结果如下图第（1）图所示。 在“底纹”层的第1帧绘制一个黑色圆角无边正方形，宽高皆为80。应用“柔化填充边缘”，这次取“距离”为35、“步骤数（或帧数）”为 20、“方向”为扩散。结果如下图第（2）图所示。它的目的就是在按钮外加羽化边框如下图第（3）图所示。 将“图形”层的第 1 帧的圆角无边正方形，按下图所示的“调色板”设置径向渐变填充，结果如上图（4）图所示。 在“图形”层的第 5 帧按 F6 插入关键帧，然后选中第5帧舞台上的圆角无边正方形，旋转 180后如下图的左图所示。 在“action”层的第 5 帧按 F6 插入关键帧，添加 Action Script 语句：Stop(); 在“图形”层的第1帧设置形状渐变，并在“外框”和“底纹”层的第5帧插入普通帧，完成后的时间轴如上图的右图所示。 二：制作名为“鼠标经过”的影片剪辑在元件库面板中复制刚才完成的影片剪辑“弹起”，然后将名称“弹起 副本”的新元件更名为“鼠标经过”。 编辑这个“鼠标经过”影片剪辑，选中在“图形”层的前 5 帧； 鼠标右击弹出菜单，选择“翻转帧”项以实现与上一大步所制作的相反的运动效果，这样便完成本影片剪辑的制作。 三：制作按钮1选择菜单“插入/新建元件”来建立一个名为“动态按钮”的按钮元件； 在“弹起(UP)”帧和“按下(Down)”帧插入“弹起”影片剪辑元件实体，相对舞台居中对齐； 在“鼠标经过(OVER)”帧插入“鼠标经过”影片剪辑元件实体，相对舞台居中对齐； 选中“按下(Down)”帧的元件实体，通过属性检查器上设置“颜色”为“高级”，在“高级效果”对话框中设置如下图所示，使实体呈红色。 四：完成影片制作将“动态按钮”按钮元件从库中拖拽到场景舞台的中央，就可以看到最后的效果。五 lash与网页设计的结合Flash在今天的中国成为了一种潮流和时尚，它之所以能被广大的爱好者、企业、市场、设计者接受并欣赏，其实也是因为这种数字化设计本身就是当今视觉传达设计发展的趋势。进入20世纪90年代以来，艺术表现形式趋向于综合，对设计者的综合素质的要求也越来越高，伴随着娱乐文化、流行文化的发展和数码新媒体交流的普及，人们开始对交互式、影像化和视觉交流方式进行探索，更多的人则沉迷于虚拟空间当中寻找和塑造自我理想的角色和形象。我们已经不能再把设计理解为一个狭隘的概念，视觉设计也渐渐的超越了其原先的范畴，走向越来越广阔的领域。 20世纪末期，数字化媒体出现，社会环境也发生了质的变化，就在网络技术、数码艺术设计、数字电影电视、多