Flash交互动画

交互动画,交互动画,交互动画概述,交互动画是指在动画播放时支持事件响应和交互功能的一种动画，也就是说，动画播放时可以接受某种控制。这种控制可以是用户的某种操作，也可以是在动画制作时预先设置的操作。这种交互性提供了观众参与和控制动画播放的手段，使观众由被动接受变为主动选择。,交互动画，是通过对帧或按钮设置一定动作来实现的。所谓的“动作”指的是一套命令语句，当条件满足时就会发出命令来执行特定的动作。而用来触发这些动作的“事件”，无非就是播放指针指到某一帧，或者用户单击某个按钮或按某个键。当这些事件发生时，动画就会执行事先已经设定好的动作。,FLS,从一个逐页浏览器说起,ActionScript概述,交互动画都是通过Flash内置的脚本语言ActionScript完成的。下面主要介绍关于AS的一些基础知识和编程方法。简单的说，添加脚本可分为两种：一是把脚本编写在时间轴上面的关键帧上（注意，必须是关键帧）。二是把脚本编写在具体对象上，比如把直接写在MC（影片剪辑元件的实例）上或者按钮上。,FLS,ActionScript的类型,1.在关键帧上添加将AS添加在特定的帧上，当动画播放到该帧时，相应的AS程序就会被执行，典型的应用是控制动画的播放和结束。,2.在按钮上添加这种添加方式更加常用，例如常见的有鼠标滑过按钮、按钮被按下或弹起等，这样很容易完成交互式动画的制作。并且多个AS程序被添加在同一按钮时，各自具有独立的动作，不会相互影响。,3.在电影剪辑中添加使用该方式所添加的AS往往是在该电影片段被载入或是为了载入某些过程中获取相关信息才被执行的。这种方式在实际中应用较少，但使用起来会简化很多制作工作。,FLS,按钮的创建,单击“插入”“新建元件”菜单命令，弹出“创建新元件”对话框。在该对话框内，输入元件的名称（例如“图像按钮”），选择“按钮”类型。单击“确定”按钮，切换到按钮元件编辑状态，时间轴的“图层1”图层中显示4个连续的帧，如图所示。,用户需要在这4个帧中分别创建相应的按钮外观，可以导入图形、图像、文字、图形元件实例、影片剪辑元件实例（制作动画按钮）和声音等，但不能在一个按钮中再使用按钮元件。最好将按钮图形精确定位，使图形的中心与十字标记对齐。按钮的每一帧可以由多个图层组成。,测试按钮：测试按钮就是将鼠标指针移到按钮之上和单击按钮，然后观察它的动作效果（应该像播放影片时一样按照指定的方式响应鼠标事件)。测试按钮以前要进行下述4种操作中的一种。,工具箱分门别类列出脚本语句元素,脚本导航器列出与脚本相关联的帧位置和对象。单击选项将显示相应脚本。,脚本编辑窗口编辑修改脚本代码的区域。,编辑工具栏给出常用编辑工具，最常用的是，可调出语句、属性等。,状态栏给出当前脚本所对应的图层位置等。,gotoAndPlay();,“收/展”按钮,快捷菜单,认识动作面板,动作脚本是在动作面板中编写的，动作面板如下图所示：,程序（动作脚本）的编写：,语句格式与C语言相仿，句尾需加分号“;”结束。,交互动画的播放,一旦添加了脚本，其控制功能只在“测试影片”方式下方可表现，而在“播放”方式下所表现的是无控播放，与不加控制脚本的情况完全一样。,常用函数的意义,一、在关键帧上编写：直接在关键帧上写语句。格式：语句；如：stop；到此关键帧中断播放,脚本的编写格式,说明：语句必须写在关键帧上，否则无效。动画用stop暂停后，在“影片测试”方式下，按回车键将继续运行，但不明确，最好使用按钮，点击按钮使之继续运行。,说明：控制按钮一般应放在被控动画上面的独立图层中。同一按钮在不同画段所编程序表现为独立性，互不影响，相当于在不同画段内摆放了同一按钮的多个实例，但要在不同画段的开始处添加关键帧，这类似于同一局部变量在不同的过程中相互独立的效果。对按钮添加脚本时需要先选中按钮层的非关键帧处，并单击选中按钮，则所编程序就是面对该按钮的程序。切记万不可选在关键帧上，否则将视为面对关键帧编程。,二、对按钮编写AS：,如：on(release)gotoAndPlay(31);点击按钮转到31帧并播放,格式：on(事件)语句组；,法一：写在按钮上,常见事件,双击,事件说明：(1)press(按):当鼠标移到按钮上，单击按下鼠标左键时触发此事件。(2)release(释放):当鼠标移到按钮上，单击鼠标左键，并松开时触发此事件。(3)releaseOutside(外部释放):当鼠标移到按钮上，单击按下鼠标左键，并将鼠标移出按钮范围，再松开鼠标左键时触发此事件。(4)rollOver(滑过):当鼠标由按钮外面，移到按钮内部时触发事件。(5)rollOut(滑离):当鼠标由按钮内部，移到按钮外边时触发此事件。(6)dragOver(拖过):当鼠标掠过按钮时触发此事件。(7)dragOut(拖离):当鼠标移到按钮上，并按下鼠标并把鼠标拖出按钮范围时触发此事件。(8)keyPress“”(按键):当键盘的指定按键被按下时，触发此事件。,应用举例：,打开网页：,脚本程序：on(release)getURL(,_blank);,画册翻页：演示,法二：写在时间轴上,1.选中按钮，在下面的属性面板中为按钮起一个名字，这里称作botton1。2.选中时间轴按钮层的关键帧，按F9打开动作面板进行编程。,如打开网页：botton1.onRelease=function()getURL(,_blank)；,需要明确，这种写法应在事件名称前面加一个on，比如，事件如果是Release的话，应该写成onRelease，否则将会报错。,翻页动画分为两种：第一种，直接在主场内逐次制作分页；第二种，间接制作，先将各分页制作成影片剪辑元件，再将元件放回主场。前者直接明了，但界面杂乱；后者界面整洁，但不够明了。为了使画面更加丰富多彩，尽可能利用制作动画的各种手段和方法，比如，形状渐变、运动渐变、引导动画、遮罩动画等。一、直接制作.先行分段制作动画页，在各画段末端关键祯写入暂停语句stop。注意：新起画段时，要将上一画段延续下来的内容清除掉，以免重叠。.在动画层之上添加按钮层，并对按钮统一命名如B1，并将按钮层延续到所有画段尾端。.对按钮层，在与动画层各画段起始祯对应位置处插入关键祯，将按钮层与相应画面对应分段。.注意最好不要对按钮层先分段再放按钮，以免使按钮不能公用和统一命名。,翻页画册的制作要领,翻页画册的制作要领,二、间接制作分页动画往往涉及不同的动画形式，这势必会增加动画层次，使舞台界面趋于杂乱，为此，最好将各画页先行制作成元件，然后再将其拖放到舞台，用集成的原件实例构造分页动画，占据少量的关键帧，达到简化界面的目的，使舞台更加清晰整洁。,.制作影片剪辑元件：“插入”新建元件”影片剪辑”进入元件制作环境，为影片剪辑命名并制作动画。,翻页画册的制作要领,二、间接制作（续）.在主场中摆放实例：返回主场（场景），将所建元件摆放到位，则实例仅占一个关键祯位置。.在主场中控制元件实例暂停播放的方法：一般在实例上暂停即可，但对于无需循环播放的实例，除了主场中进行暂停外，同时制作元件时也要有暂停，否则将会反复播放。.主场中的暂停脚本的编写：既可以写在另外加的关键祯上，也可以在实例的本祯上，只是翻页按钮的程序不同，对于前者既可以写在按钮上（要留出非关键祯点），也可以写在时间轴（关键祯）上，而后者只能写在时间轴（关键祯）上，因为没有非关键祯点。要注意二者的编程格式不同。,三、制作技巧.命令按钮上文字的修改与添加：双击主场中按钮实例或双击按钮元件，进入元件编辑状态，按下文字工具按钮A，在按钮上进行文字书写或修改，返回主场即可。但要注意，若元件被加锁，编辑文本时要将其开锁。.按钮字体的着色：借助选中文本的属性栏实现。,翻页画册的制作要领,三、制作技巧（续）.关闭动画脚本的编写：格式：on(release)fscommand(quit);说明：作用：点击按钮关闭动画并退出。运行：必须在独立运行（运行可执行文件）时方可表现，“测试影片”方式下不可。fscommand指令位置：在“全局函数”“浏览器网络”目录下。编写方式：一般“关闭”脚本应在按钮层未分段时统一编写或将按钮置于独立图层中单独编写，以便在各画段中都适用。,翻页画册的制作要领,三、制作技巧（续）.命令按钮事件框架的构建：用鼠标双击“动作”面板“全局函数”“影片剪辑控制”目录下的on命令，将在程序编辑区自动构造程序结构并列出事件列表以供选择。,翻页画册的制作要领,也可借助动作面板“脚本助手”直接添加语句构成程序框架。,三、制作技巧（续）.将主场动画转换成元件：按下鼠标左键选中包括关键祯动画片断复制选中区域右击选中区域，在快捷菜单中“复制祯”右击关键祯在快捷菜单中“粘贴祯”,翻页画册的制作要领,按钮脚本程序的编写格式,写在按钮上on(release)gotoAndPlay(31);写在时间轴B1.onRelease=function()gotoAndPlay(31);,Press事件发生于鼠标在按钮上方，并按下鼠标。Release发生在按钮上方按下鼠标并松开。也就是“按一下”鼠标。Releaseoutside发生于在按钮上方按下鼠标，接着把光标移动到按钮之外，然后松开鼠标。Rollover当鼠标滑入按钮时。Rollout当鼠标滑出按钮时。Dragover发生于按着鼠标不放，光标滑入按钮。Dragout发生于按着鼠标不放，光标滑出按钮。Keypress发生于用户按下特定的键盘按键时。,按钮常见事件,三、对影片剪辑编写：两种情况：AS写在影片剪辑（实例）上、写在时间轴（关键帧）上。,写在影片剪辑上（点击实例）格式：onClipEvent（事件）语句组；,例：onClipEvent(keyUp)_root.P1.stop();停止本场景内名为P1实例的动作。_root代表本场景。(功能键不起作用，其他键可以),应用举例：小球移动动画,制作元件：画一个圆作影片剪辑，将其拖放到舞台创建实例。编写脚本：单击选中该实例，按F9打开动作面板。选择onClipEvent之后在显示的事件中选择EnterFrame，然后在里面编写脚本：this._x+=5；脚本编写后应为：onClipEvent(EnterFrame)this._x+=5;/EnterFrame的意思是以影片帧频不断地触发此动作。/this代表这个影片剪辑自身。_x表示影片剪辑的x轴坐标。,写在时间轴上（点击关键帧）,格式：实例名.事件名称=function()语句组；,说明：需要注意的是，与按钮相仿，这种格式也需要在事件名称前面加一个on。,-load影片剪辑一旦被实例化并出现在时间轴中时，即启动此动作。-unload在从时间轴中删除影片剪辑之后，此动作在第一帧中启动。处理与Unload影片剪辑事件关联的动作之前，不向受影响的帧附加任何动作。-enterFrame以影片帧频不断地触发此动作。-mouseMove每次移动鼠标时启动此动作。_xmouse和_ymouse属性用于确定当前鼠标位置。-mouseDown当按下鼠标左键时启动此动作。-mouseUp当释放鼠标左键时启动此动作。-keyDown当按下某个键时启动此动作。使用Key.getCode方法获取最近按下的键的有关信息。-keyUp当释放某个键时启动此动作。使用Key.getCode方法获取最近按下的键的有关信息。-data当在loadVariables或loadMovie动作中接收数据时启动此动作。当与loadVariables动作一起指定时，data事件只发生一次，即加载最后一个变量时。当与loadMovie动作一起指定时，获取数据的每一部分时，data事件都重复发生。,影片剪辑常见事件,举例：小球移动动画,/该句可改为mc._x+=mc._x+5；,特别提请注意：事件字头该大写的一定要大写，否则不予执行。如：onEnterFrame不能写作onenterframe,首先需要为影片剪辑实例起一个名字，比如mc，再选中时间轴的第一帧，打开动作面板，输入以下脚本：mc.onEnterFrame=function()this._x+=5;,法一：拖放法用鼠标将“动作”面板左边命令列表区内“全局函数”“影片剪辑控制”目录下的onClipEvent命令拖放到程序编辑区内。,命令按钮或影片剪辑事件程序框架的构建：,法二：菜单法利用动作面板上的“脚本助手”直接添加onClipEvent构成程序框架。,案例1播放控制,1.按ctrl+F8，新建立一个影片剪辑，并起名字为“动画”。做一个简单的影片剪辑。2.回到舞台工作区，按F11打开库，将动画影片剪辑拖放到舞台中。并给这个实例起个名字叫mc。（按Ctrl+回车测试效果，动画将会不停地播放）3.添加脚本，让该MC在影片一开始不要自动播放。选中时间轴的第一帧，按F9打开动作面板，选择专家模式，输入：_root.mc.stop();（_root代表舞台，这个脚本的意思就是，舞台上名字叫MC的实例停止播放。）,FLS,4.制作几个按钮，分别表示播放、暂停、前进、后退、停止。并摆放在舞台上。5.现在要添加控制影片的脚本。这次把脚本直接写在舞台上这些按钮的身上。选中播放按钮，打开动作面板，输入：on(release)_root.mc.play();如果要在按钮身上写脚本的话，必须使用：on(事件)/脚本程序的格式来写！上面的脚本作用就是：当在该按钮上按一下鼠标，则触发release事件，就会执行下面的_root.mc.play();程序，意思是让舞台上的mc开始播放。,FLS,6.同理：选中舞台上的暂停按钮，在它上面输入：on(release)_root.mc.stop()然后依次在快退上输入：on(release)_root.mc.prevFrame();/prevFrame表示回到动画的上一帧。在快进的按钮上输入：on(release)_root.mc.nextFrame();在停止的按钮上输入：on(release)_root.mc.gotoAndStop(1);表示跳到mc影片的第一帧，并停止播放！,FLS,案例2打开网页,AS脚本编写可以写在时间轴的关键帧上，也可以写在对象本身上面。按钮也不例外，既可以写在时间轴上，也可以写在按钮本身上面。实现效果：做一个按钮，这个按钮要实现的功能就是打开一个指定的网页。,FLS,方法一把AS写在按钮上,1.在舞台上绘制一个矩形，选中矩形并按F8，将这个矩形转换成按钮元件。2.编写动作脚本：选中按钮，按F9，打开动作面板，输入以下脚本：on(release)getURL(,_blank)则该按钮就实现了一个打开网页的功能。,FLS,按钮的AS编写规则,on语句就是按钮的AS编写规则了。需要注意的是on里面的事件，这个事件你可以理解为是鼠标或键盘的动作。刚才的例子我们使用的事件是release（按一下鼠标）现在把常用的按钮事件列出事件名字说明Press事件发生于鼠标在按钮上方，并按下鼠标Release发生在按钮上方按下鼠标并松开。也就是“按一下”鼠标Releaseoutside发生于在按钮上方按下鼠标，接着把光标移动到按钮之外，然后松开鼠标Rollover当鼠标滑入按钮时Rollout当鼠标滑出按钮时Dragover发生于按着鼠标不放，光标滑入按钮Dragout发生于按着鼠标不放，光标滑出按钮Keypress发生于用户按下特定的键盘按键时,FLS,方法二把AS写在时间轴上,1.选中按钮，在下面的属性面板中为按钮起一个名字，这里我起了一个botton1;2.选中时间轴的第一帧，按F9打开动作面板。输入如下脚本：botton1.onRelease=function()getURL(,_blank);,FLS,案例3AS实现的动画,1、新建立一个电影剪辑元件，里面你就随便画一个圆吧。之后把这个影片剪辑拖放到舞台之中（也就是创建一个此影片剪辑的实例）。2、现在开始编写脚本，选中这个MC，按F9打开动作板，选择onClipEvent，之后在显示的事件中选择enterFrame，然后在里面编写脚本如下：this._x+=5这个脚本编写之后应该是：onClipEvent(enterFrame)/enterFrame的意思是以影片帧频不断地触发此动作this._x+=5;/this代表这个影片剪辑自身。_x表示影片剪辑的X轴坐标。每播放一帧，向右移动5个像素,FLS,影片剪辑的AS编写格式,从这个例子不难看出，如果把AS写在影片剪辑本身上，正确的书写格式就是：onClipEvent(事件)/需要执行的脚本程序这个可以看成是公式，你记住就行了，是写在影片剪辑身上的。括号里的“事件”其实是个触发器，当事件发生时，执行该事件后面花括号中的语句。,FLS,影片剪辑的AS编写,-load影片剪辑一旦被实例化并出现在时间轴中时，即启动此动作。-unload在从时间轴中删除影片剪辑之后，此动作在第一帧中启动。处理与Unload影片剪辑事件关联的动作之前，不向受影响的帧附加任何动作。-enterFrame以影片帧频不断地触发此动作。-mouseMove每次移动鼠标时启动此动作。_xmouse和_ymouse属性用于确定当前鼠标位置。-mouseDown当按下鼠标左键时启动此动作。-mouseUp当释放鼠标左键时启动此动作。,FLS,-keyDown当按下某个键时启动此动作。使用Key.getCode方法获取最近按下的键的有关信息。-keyUp当释放某个键时启动此动作。使用Key.getCode方法获取最近按下的键的有关信息。-data当在loadVariables或loadMovie动作中接收数据时启动此动作。当与loadVariables动作一起指定时，data事件只发生一次，即加载最后一个变量时。当与loadMovie动作一起指定时，获取数据的每一部分时，data事件都重复发生。,FLS,在时间轴上添加语句,首先你把刚才的脚本去掉。然后需要为这个影片剪辑实例起一个名字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.Frame1的Action窗口键入以下程序代码，xpos=_xmouse;/xpos显示的坐标ypos=_ymouse;/yos显示y坐标4.延长到第帧，这样的作用主要是要形成循环，反复执行Frame1的程序代码，让画面的动态文字的值，随时保持更新。属性。,案例：取得坐标值,5.在舞台上画一条长度超过画面的垂直线，再将该线条转为MovieClip并给实例命名为Vline6.在舞台上画一条长度超过画面的水平线，再将该线条转为MovieClip并给实例命名为Hline7.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、选中时间轴第一桢，打开动作面板，输入以下脚本：,案例：心连心,functiondraw()/自己定义一个函数，这个函数起名为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后面的