Flash元件与实例PPT学习课件.ppt

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