《Flash元件与实例.ppt》由会员分享，可在线阅读，更多相关《Flash元件与实例.ppt（50页珍藏版）》请在三一办公上搜索。
1、元件与实例,元件与实例的概念,所谓“元件”也叫做“符号”，就是将某段FLash剪辑、导入的视频、动画或图片等作为一个整体存放在元件库中，事后可将其拖放到舞台被使用，并且可以多次使用，被拖放到舞台上的元件称为“实例”。元件可以看作是被封装起来的“控件”。元件一定是群组化对象，即使制作的元件中包含有打散的元素如形状渐变动画，一经制作成元件被包装后，也表现为群组特性。,使用元件（符 号）的优点,简化舞台界面：元件的使用将使本来一段复杂的影片剪辑，被简化压缩为一个关键帧点，从而使舞台变得简洁。简化电影编辑：把要多次使用的元素做成符号，当修改了符号以后，使其所有实例都会随之更新。缩减文件大小：应用元件可
2、以使电影文件的尺寸大大缩减。这是由于影片中的实例是对元件的链接，并非复制。功能间接实现：当有些在主场中不能实现的功能，可以考虑先做成元件，然后再在主场中调用元件，间接实现相应功能。如，遮罩层的遮罩体不能再加引导层，则可先做成元件，再用元件做遮罩层即可。,Flash,元件的种类,元件有三种：图像、影片剪辑和按钮。图像由外界导入，影片剪辑由用户创建，按钮可以制作或从按钮库调用。,Flash,元件的制作,创建元件：【插入】【新建元件】进入编辑界面后可进行“影片剪辑”、“按钮”和“图形”的制作。其编辑界面与主场编辑界面毫无二致，完全一样。编辑完成后将自动保留在元件库内备用。返回主场后即可进行调用。必须
3、明确，库中的元件是伴随着Flash文件的存在而存在的，打开其他文件或新建文件将重新建库，原库元件将不复存在。转换元件：可以将主场中某段动画转换成元件，一般做法是先选定动画片段复制或剪切到剪贴板，然后粘贴到新建元件中。其本质仍是创建新元件。说明：用【修改】【转换成元件】（F8）则形不成动画元件，转换出的仅为主场中的一帧静态画面。,Flash,元件与实例的关系,实例是指出现在舞台上的元件或者是嵌套在其他元件中的元件，它具有元件的一切特性，但是元件与其实例有本质上的不同：1.使用范围不同：实例在前台，元件在台后。2.编辑方式不同：舞台的实例用属性编辑，符号库的符号用工具编辑。3.修改效果不同：元件修
4、改后，舞台上的所有实例将同步被修改，实例修改后并不影响元件，也不影响其他实例。而且实例只能进行属性的修改，元件才能进行编辑修改。4.虚实关系：元件是实体，实例是元件的映像。元件之间可以相互调用，称为元件的“嵌套”。也就是说，按钮元件里也可以用图形元件或者电影剪辑元件，电影剪辑元件里面也可以用按钮等等。,按钮符号（元件）,按钮是符号的一个重要类型，当使用鼠标与它交互时，它会显示出不同的外观。在Flash 中，按钮有4种姿态：Up、Over、Down、Hit,Up：当鼠标指针结束按钮时，按钮处于一般状态,Over：当鼠标指针移动到了按钮上面，但没有按下时，按钮处于被触摸状态,Down：当鼠标左键按
5、下时，按钮处于被按下状态,Hit：在该状态下可以定义响应鼠标的区域。此区域在电影中是不可见的,Flash,影片剪辑（Movie clip）,影片剪辑是一段独立的动画，可以在动画中被调用，用户可以向动画片断中添加声效和设置交互等，而图形符号是不能的。-具体操作演示,Flash,影片剪辑示例,Flash,实例的播放,元件在主场摆放后形成的实例，用现场“播放”不能呈现元件动画效果，必须用“测试影片”或“测试场景”方可呈现，这是因为“播放”仅仅是在编辑现场上的行为，而“测试影片”才是文件运行时的效果，二者是有差别的。如遮罩层不加锁播放时，“播放”表现为遮挡，而“测试影片”也会表现遮罩效果，也是这个原因
6、。,Flash,综合举例：.引导遮罩.地球自转,什么是ActionScript,ActionScript中文翻译为“动作脚本”，它是Flash专用的一种程序语言，它采用面向对象编程的思想，采用Flash MX中的事件对程序进行驱动，以动画中的关键帧、按钮或电影片段作为对象，来对ActionScript进行定义和编写。,简单的说，添加脚本可分为两种：一是把脚本编写在时间轴上面的关键帧上面（注意，必须是关键帧上才可以添加脚本）。二是把脚本编写在对象身上，比如把脚本直接写在MC（影片剪辑元件的实例）上、按钮上面。,举例,举例,举例,举例,ActionScript的类型,1.在帧（Frame）中添加将
7、ActionScript添加在特定的帧上，添加或当动画播放到添加ActionScript脚本的那一帧时，相应的ActionScript程序就会被执行，典型的应用是控制动画的播放和结束时间。,2.在按钮（Button）中添加这种添加方式更加常用，例如常见的鼠标滑过按钮、按钮被按下或放开等。这样很容易完成交互式动画的制作。并且多个按钮同时被添加了ActionScript程序时，互相有自己独立的动作，不会相互影响。,3.在电影片段（Movie Clip）中添加使用该方式所添加的动作或程序往往是在该电影片段被载入或者是为了载入某些过程中获取相关信息才被执行的。这种方式在实际中应用较少，但使用起来会简化
8、很多制作工作。,按钮语句的添加,添加方法：选中按钮，F9打开action面板，选取添加按钮，选取全局函数/影片剪辑控制/on，选择press。选择全局函数/时间轴控制gotoandPlay、stop等语句。打开网页等。,ActionScript,1.flash是如何执行脚本 当你在时间周的关键桢上添加了脚本，那么当flash运行的时候，它会首先执行这个关键桢上的脚本，然后才会显示这个关键桢上的对象。2.AS中的对象都包括什么 它可以包含数据，也可以是舞台上的电影剪辑，也可以是舞台上的按钮等。既然包含了那么多对象，那么每种对象肯定有各自的属性！比如电影剪辑（Movieclip）对象，它的属性就有
9、：_height(高度)，_rotation(旋转)，等，这些属性不需要你去特意的记忆，当使用的时候可以随时翻阅脚本字典。,提高部分,编程举例,案例,1.场景切换帧动作stop按钮play stop包括对整体影片和影片剪辑的控制2.网页的链接getURL3.使用动态文本和输入文本文本变量的使用4.拖动蜡烛影片剪辑的拖动5.碰撞测试6.课件制作举例,案例1 播放控制,1.按ctrl+F8，新建立一个影片剪辑，并起名字为“动画”。做一个简单的影片剪辑。2.回到舞台工作区，按F11打开库，将动画影片剪辑拖放到舞台中。并给这个实例起个名字叫mc。（现在就可以按ctrl+回车测试效果，你可以看到动画在不
10、停播放。）3.添加脚本，现在要让这个mc在影片一开始不要自动播放。选中时间轴的第一桢，按F9打开动作面板，选择专家模式，输入：_root.mc.stop();（_root代表舞台，这个脚本的意思就是，舞台上名字叫mc的实例停止播放。）,案例1 播放控制,4.制作几个按钮，分别表示播放、暂停、前进、后退、停止。并摆放在舞台上。5.现在要添加控制影片的脚本。这次把脚本直接写在舞台上这些按钮的身上。选中播放按钮，打开动作面板，输入：on(release)_root.mc.play();如果要在按钮身上写脚本的话，必须使用on(事件)/脚本程序的格式来写！上面的脚本作用就是：当你在这个按钮上按一下鼠标
11、（release事件）的时候，就会执行下面的_root.mc.play();程序，它的意思是让舞台上的mc开始播放.,案例1 播放控制,6同理：选中舞台上的暂停按钮，在它上面输入：on(release)_root.mc.stop()然后依次在快退上输入：on(release)_();/prevFrame表示回到动画的上一桢在快进的按钮上输入：on(release)_();在停止的按钮上输入：on(release)_root.mc.gotoAndStop(1);/跳到mc影片的第一桢，并停止播放！,案例2打开网页,AS脚本编写可以写在时间轴的关键桢上，也可以写在对象本身上面。按钮也不例外，既可以
12、写在时间轴上，也可以写在按钮本身上面。实现效果：做一个按钮，这个按钮要实现的功能就是打开一个指定的网页。,方法一把AS写在按钮上,1.在舞台上绘制一个矩形，选中矩形并按F8，将这个矩形转换成按钮元件。2.编写动作脚本：选中按钮，按F9，打开动作面板，输入以下脚本：on(release)getURL(http:/,_blank)现在这个按钮就实现了一个打开网页的功能。,方法一把AS写在按钮上,按钮的AS书写规则就是：on(事件)/要执行的脚本程序，刚才的例子是用getURL来打开一个网页。你也可以使用脚本程序来执行其他功能，例如跳转到某一个桢，或载入外部一个动画文件。,按钮的AS编写规则,on语
13、句就是按钮的AS编写规则了。需要注意的是on里面的事件，这个事件你可以理解为是鼠标或键盘的动作。刚才的例子我们使用的事件是release（按一下鼠标）我现在把常用的按钮事件列出来：事件名字说明Press事件发生于鼠标在按钮上方，并按下鼠标Release发生在按钮上方按下鼠标，接着松开鼠标时。也就是“按一下”鼠标Releaseoutside发生于在按钮上方按下鼠标，接着把光标移动到按钮之外，然后松开鼠标Rollover当鼠标滑入按钮时Rollout当鼠标滑出按钮时Dragover发生于按着鼠标不放，光标滑入按钮Dragout发生于按着鼠标不放，光标滑出按钮Keypress发生于用户按下特定的键盘
14、按键时,方法二把AS写在时间轴上,1.选中按钮，在下面的属性面板中为按钮起一个名字，这里我起了一个botton1;2.选中时间轴的第一桢，按F9打开动作面板。输入如下脚本：botton1.onRelease=function()getURL(http:/,_blank);这种编写AS的方法要遵循的规则就是下面的公式而已：按钮实例的名字.事件名称=function()/要执行的脚本程序。大家只要记住这个公式就可以套用了。,案例3 AS实现的动画,1、新建立一个电影剪辑元件，里面你就随便画一个圆吧。之后把这个影片剪辑拖放到舞台之中（也就是创建一个此影片剪辑的实例）。2、现在开始编写脚本，选中这个M
15、C，按F9打开动作板，选择onClipEvent，之后在显示的事件中选择enterFrame，然后在里面编写脚本如下：this._x+=5 这个脚本编写之后应该是：onClipEvent(enterFrame)/enterFrame的意思是以影片帧频不断地触发此动作 this._x+=5;/this代表这个影片剪辑自身。_x表示影片剪辑的X轴坐标。每播放一帧，向右移动5个像素,影片剪辑的AS编写,从这个例子不难看出，如果把AS写在影片剪辑本身上，正确的书写格式就是：onClipEvent(事件)/需要执行的脚本程序这个可以看成是公式，你记住就行了，是写在影片剪辑身上的。括号里的“事件”其实是个
16、触发器，当事件发生时，执行该事件后面花括号中的语句,影片剪辑的AS编写,-load 影片剪辑一旦被实例化并出现在时间轴中时，即启动此动作。-unload 在从时间轴中删除影片剪辑之后，此动作在第一帧中启动。处理与 Unload 影片剪辑事件关联的动作之前，不向受影响的帧附加任何动作。-enterFrame 以影片帧频不断地触发此动作。-mouseMove 每次移动鼠标时启动此动作。_xmouse 和 _ymouse 属性用于确定当前鼠标位置。-mouseDown 当按下鼠标左键时启动此动作。-mouseUp 当释放鼠标左键时启动此动作。,影片剪辑的AS编写,-keyDown 当按下某个键时启动
17、此动作。使用 Key.getCode 方法获取最近按下的键的有关信息。-keyUp 当释放某个键时启动此动作。使用 Key.getCode 方法获取最近按下的键的有关信息。-data 当在 loadVariables 或 loadMovie 动作中接收数据时启动此动作。当与 loadVariables 动作一起指定时，data 事件只发生一次，即加载最后一个变量时。当与 loadMovie 动作一起指定时，获取数据的每一部分时，data 事件都重复发生。,在时间轴上添加语句,首先你把刚才的脚本去掉。然后需要为这个影片剪辑实例起一个名字mc选中时间轴的第一桢，打开动作面板，输入以下脚本：mc.o
18、nEnterFrame=function()this._x+=5;/也可以把这句为mc._x+=5 为什么？;显而易见，在时间轴上的写法就应该套用以下公式：实例名.事件名称=function()/脚本程序需要注意的是，这种写法的事件名称不要忘了在前面加一个on，比如，事件如果是EnterFrame的话，你就应该写成onEnterFrame,案例：改变实例属性,1.新建一个文件，导入一个电影剪辑符号。2.新建按钮符号，命名为“上”，绘制向上的箭头，并且导入一段声音。3.复制按钮，分别建立下，左，右，右转，左转，放大，缩小几个按钮。4.将所有的按钮都拖动到舞台上，对齐。5.单击“上”按钮，F9打开
19、语句面板，添加下面语句：,案例：改变实例属性,on(press)_root.a._y=_root.a._y-10;（_root.a._y-=10;）在“下”添加：_root.a._y=_root.a._y+10“左”添加：“右”添加：_root.a._x=_root.a._x+10“左旋转”添加：“右旋转”添加：_root.a._rotation=_root.a._rotation+30“放大”添加：_=_root.a._xscale+2;_=_root.a._yscale+2“缩小”添加：_=_root.a._xscale-2;_,动态文本,为动态文本赋值方法1 使用动态文本的实例名字来赋值
20、操作步骤：（1）在舞台上创建一个动态文本框，并为这个动态文本实例起一个名字，例如test（2）选中时间轴的第一桢，打开动作面板，输入以下脚本：test.text=为动态文本赋值 按下ctrl+回车就可进行测试了。从这个简单的例子可以知道，如果要用文本实例名字来进行赋值的话，必须使用以下格式：动态文本实例的名字.text=”需要赋值的内容”,动态文本的赋值,方法2：使用变量来赋值（1）在舞台上创建一个动态文本框，并为这个动态文本实例起一个变量名test。（2）选中时间轴的第一桢，打开动作面板，输入以下脚本：test=为动态文本赋值！不难看出，使用变量赋值更为简单实用！赋值格式为：变量名=“赋值的
21、内容”,案例：取得坐标值,_xmouse，就是鼠标的水平位置。_ymouse，就是鼠标的垂直位置1.Layer1命名为XY，在舞台上先产生两个一般文字 X：及Y：2.产生两个动态文字，分别在属性面版的将变量命名为“xpos”以及“ypos”，并且隐藏文字边框及背景，并取消可以选取的功能，这样可以避免误导误以为该文字可以被选取或是输入，3.Frame 1的Action窗口键入以下程序代码，xpos=_xmouse;/xpos显示的坐标ypos=_ymouse;/yos显示y坐标4.延长到第帧，这样的作用主要是要形成循环，反复执行Frame1的程序代码，让画面的动态文字的值，随时保持更新。属性。,
22、案例：取得坐标值,5.在舞台上画一条长度超过画面的垂直线，再将该线条转为Movie Clip并给实例命名为Vline6.在舞台上画一条长度超过画面的水平线，再将该线条转为Movie Clip并给实例命名为Hline 7.Frame1再增加以下Action_=_xmouse;/vline的坐标为当前鼠标的x坐标；_=_ymouse;/hline的坐标为当前鼠标的y坐标；,绘图及颜色的AS编写,绘图命令讲解在使用flash的过程中，难免会进行绘图的操作。除了用工具面板上的工具绘制图形之外，我们也可以使用ActionScript来绘制图形。lineStyle(粗细，颜色，透明度)/设置绘制图形的线条
23、粗细、颜色和透明度Moveto(坐标，坐标)/设置绘图线条的起点坐标lineto(坐标，坐标)/设置线条的结束坐标,案例：使用语言绘制矩形,、新建一个flash文件。、要绘制一个*大小的矩形，先确定矩形个顶点的坐标。（50，50）（350，50）（350，150）（50，150）、选中时间轴的第1桢，打开动作面板。现在已经确定了矩形的个顶点，那么我们就可以来编写脚本命令了，请输入以下脚本：_root.lineStyle(1,0 x000000,100);/设置线条的粗细，颜色和透明度_root.moveTo(50,50);/设置开始点的坐标。_root.lineTo(350,50);_root
24、.lineTo(350,150);_root.lineTo(50,150);_root.lineTo(50,50);/设置结束点坐标，整个矩形绘制完毕,案例：心连心,、新建立一个flash文檔，在舞台上绘制一个心，选中它并按转换成影片剪辑，起名为：心。、打开库面板，将影片剪辑“心”在舞台上再拖放一个实例，使舞台上存在两个心的实例。、现在为舞台上两个实例分别起名字为a和b、选中时间轴第一桢，打开动作面板，输入以下脚本：,案例：心连心,function draw()/自己定义一个函数，这个函数起名为draw（可自定），函数的功能是要实现以a实例的坐标为起点，向b实例绘制线条。_root.clear
25、();/清除舞台上绘制的线条。_root.lineStyle(1,0 x000000,90);/设置线条的粗细，颜色和透明度。_root.moveTo(a._x,a._y);/以a实例的坐标为起点开始绘制线条。_root.lineTo(b._x,b._y);/以b实例的坐标为绘制线条的结束点。draw();/执行函数draw，它将会在a与b之间绘制出一条黑色的线条。,案例：心连心,、现在创建拖动效果，选中舞台上的b实例，打开动作面板，输入以下脚本：on(press)/点击此实例，开始拖动this.startDrag(true);on(release)/释放鼠标，停止拖动this.stopDra
26、g();onClipEvent(mouseMove)/当鼠标移动，也就是这个b实例移动的时候，就执行里面的程序。_root.draw();/执行舞台上定义过的draw()函数，开始在a与b之间绘制线条。updateAfterEvent();/强制更新画面，是整个动画更加流畅。,流程控制与循环控制语句,一、流程控制语句所谓流程控制，无非就是我们想控制动画程序的执行顺序而已。我们可以让flash根据一些特定的条件，来决定要执行哪个程序。这样就好象给了程序一些判断的机制。if.else控制语句根据英文的意思，大家可以简单的理解上面的控制语句：如果.就.否则.就.下面来看看这个流程控制语句的书写格式。
27、if(条件)/条件成立的话，就执行这里的程序。else/条件不成立的话就执行这里的程序。,流程控制语句,if后面的条件：可以是一个固定的值，也可以是一个变量或表达式。如果条件成立的话，也就是条件为真（true），就会执行if后面的程序，如果条件不成立，也就是条件为假（false），就会执行else里的程序。,案例1：ifelse语句,、新建一个flash文檔，在舞台上绘制一个圆，选中圆并按转换成影片剪辑，起名为：圆，这样就在舞台上创建一个圆的实例。、选中舞台上的实例，按打开动作面板，输入如下脚本：onClipEvent(enterFrame)if(this.x400)/流程条件控制语句，如果这
28、个圆的实例的轴坐标小于，就执行后面的程序。this._x+=5;/让这个圆的坐标向右移动个象素 else this._x=0;/控制语句，如果刚才的条件不成立。也就是圆实例的坐标不小于，就让它的坐标为,循环控制语句,循环命令格式：for(初始变数；条件语句；迭加命令语句)/用户自己编写的脚本。首先强调一点，for语句的括号内有三个项目，必须要用分号间隔开！,案例2 for语句,、新建一个flash文檔，在舞台上绘制一个心，选中圆并按转换成影片剪辑，起名为：圆这样就在舞台上创建一个圆的实例。、为这个实例起名为：yuan、添加一个新的层，并选中新层的第一帧，按打开动作面板，输入如下脚本：for(i
29、=1;i5;i+)/我们定义一个变量i来控制程序的循环次数。条件语句为判断i是否小于，迭加命令就让每次程序执行之后，让i自己增加一，使程序循环次,案例2 for语句,duplicateMovieClip(yuan,yuan+i,i);/duplicateMovieClip是复制命令，用来复制舞台上名字叫yuan的实例，每次复制出来一个，就把新复制出来的实例改名为yuan+i。影片的深度也改为i_rootyuan+i._x=random(400);_rootyuan+i._y=random(300);/设置每次复制出来的新实例的、坐标，具体数值随机产生。_rootyuan+i._alpha=random(100);/设置每次复制出来的新实例的透明度，具体数值从里随机产生。,
