教学软件设计与开发-第五章-flash教学软件的交互设计与开发课件

教学教学软件设计软件设计与与开发开发第第五五章章 教学教学软件的交互软件的交互设计与开发设计与开发教学软件设计与开发第五章本章内容一、按钮交互二、文本交互三、拖拽交互本章内容一、按钮交互二、文本交互三、拖拽交互三、拖拽交互三、拖拽交互（一）教学软件中拖拽交互的应用（一）教学软件中拖拽交互的应用v 幼儿软件：幼儿软件：拼图拼图、画图画图、分类分类等等v 匹配练习题匹配练习题v 仪器设备组装仪器设备组装，演示对象之间的关系演示对象之间的关系v 教育游戏教育游戏三、拖拽交互（一）教学软件中拖拽交互的应用 三、拖拽交互三、拖拽交互（二）主要方法、函数、属性、事件（二）主要方法、函数、属性、事件1 1.主要的主要的函数、函数、方法方法v拖拽对象拖拽对象 影片影片剪辑实例剪辑实例v拖拽对象拖拽对象函数函数 startDrag()：影片剪辑实例可以拖拽影片剪辑实例可以拖拽；stopDrag():停止影片剪辑实例的拖拽停止影片剪辑实例的拖拽1.主要的函数、方法 三、拖拽交互三、拖拽交互（二）主要方法、函数、属性、事件（二）主要方法、函数、属性、事件1 1.主要的主要的函数、函数、方法方法vstartDrag(target，lock,left,top,right,bottom)target：要拖拽影片剪辑的目标路径和实例，要拖拽影片剪辑的目标路径和实例，“”“”默认影片默认影片剪辑实例本身剪辑实例本身lock:布尔值布尔值，可选参数，不选默认为可选参数，不选默认为flaseflase。指定拖拽的影片剪辑指定拖拽的影片剪辑是锁定到鼠标指针位置是锁定到鼠标指针位置中央（中央（true）锁定到鼠标第一次单击该显示象所在的点上（锁定到鼠标第一次单击该显示象所在的点上（false）Left,top,right,bottom：用来用来设定矩形设定矩形区域（区域（l lock值为值为true）startDrag(“my_mc”，true,100,200,400,300);1.主要的函数、方法 startDrag(“my_mc 三、拖拽交互三、拖拽交互（二）主要方法、函数、属性、事件（二）主要方法、函数、属性、事件1 1.主要的主要的函数、函数、方法方法vstopDrag(target)target：要拖拽影片剪辑的目标路径和实例，经常省略要拖拽影片剪辑的目标路径和实例，经常省略1.主要的函数、方法 三、拖拽交互三、拖拽交互（二）主要方法、函数、属性、事件（二）主要方法、函数、属性、事件1 1.主要的主要的函数、函数、方法方法v碰撞碰撞检测函数检测函数hitTest()检查影片检查影片剪辑剪辑相与某点是否相与某点是否与与交交 movieClip.hitTest(x,y,truefalse);true指指影片剪辑的整个影片剪辑的整个形状，形状，falsefalse指包括影片剪辑边框指包括影片剪辑边框检查检查影片剪辑影片剪辑相与另一影片剪辑是否相与另一影片剪辑是否与与交交 movieClip.hitTest(target)；target指另一个影片剪辑实例指另一个影片剪辑实例1.主要的函数、方法 三、拖拽交互三、拖拽交互（二）主要方法、函数、属性、事件（二）主要方法、函数、属性、事件1 1.主要的主要的函数、函数、方法方法v影片剪辑的事件处理函数影片剪辑的事件处理函数movieClip.onPress=function()movieClip.onRelease=function()movieClip.onMouseMove=function()movieClip.onReleaseOutside=movieClip.onRelease;1.主要的函数、方法 三、拖拽交互三、拖拽交互（二）主要方法、函数、属性、事件（二）主要方法、函数、属性、事件2 2.movieClip对象的属性对象的属性 v x 坐坐 标：标：movieClip._x v y 坐坐 标：标：movieClip._y v 宽宽 度：度：movieClip._width v 透透 明明 度度：movieClip._Alpha(0-1)v 水平缩放比例水平缩放比例：movieClip._scaleX()v 垂直缩放比例垂直缩放比例：movieClip._scaleY()2.movieClip对象的属性 三、拖拽交互三、拖拽交互（二）主要方法、函数、属性、事件（二）主要方法、函数、属性、事件2 2.movieClip对象的属性对象的属性 v父类影片剪辑父类影片剪辑 :movieClip._parentv是否是否隐藏隐藏：movieClip._visiblev旋转旋转角度角度：movieClip._rotationv总总的帧数的帧数：movieClip._totalFramesv是否是否活动：活动：movieClip.enbaled2.movieClip对象的属性 三、拖拽交互三、拖拽交互（二）主要方法、函数、属性、事件（二）主要方法、函数、属性、事件3.3.主要事件主要事件von(press)：开始拖拽事件：开始拖拽事件von(release)：停止拖拽事件：停止拖拽事件von(dragOver)v说明：说明：AS2.0中，拖拽交互的鼠标事件大多动作语句中，拖拽交互的鼠标事件大多动作语句加在被拖拽的影片剪辑实例上加在被拖拽的影片剪辑实例上3.主要事件 三、拖拽交互三、拖拽交互（二）主要方法、函数、属性、事件（二）主要方法、函数、属性、事件4.4.对象对象的引用问题的引用问题v用用this表示影片剪表示影片剪实例实例对象对象本身本身 this._x this._y this.hitTest()v使用父级实例、变量时用使用父级实例、变量时用_parent _parent.xx_mc _parent.x _parent.yv使用父级实例、变量也使用父级实例、变量也可以使用可以使用_root _root.xx_mc _root.x _root.y4.对象的引用问题三、拖拽交互三、拖拽交互（三三）实例分析）实例分析v化学实验仪器组装化学实验仪器组装v鼠标拖动控制播放鼠标拖动控制播放v圆与圆的位置关系圆与圆的位置关系v凹透镜成像凹透镜成像三、拖拽交互（三）实例分析三、拖拽交互三、拖拽交互v实例实例1：化学实验仪器组装化学实验仪器组装被拖动的对象被拖动的对象:drag_mc开始拖开始拖拽：拽：startDrag()停止拖停止拖拽：拽：stopDrag()目标位置目标位置 :jiance_mc拖拽对象拖拽对象事件事件:on(press)on(release)三、拖拽交互实例1：化学实验仪器组装三、拖拽交互三、拖拽交互v实例实例1：化学实验仪器组装化学实验仪器组装是否到达位置是否到达位置(与目标影片剪辑相交）：与目标影片剪辑相交）：if(this.hitTest(_parent.jiance_mc)=true)与目标影片剪辑重合：与目标影片剪辑重合：this._x=_parent.jiance_mc._x;this._y=_parent.jiance_mc._y;是否能拖动是否能拖动 this.enabled=false三、拖拽交互实例1：化学实验仪器组装三、拖拽交互三、拖拽交互v实例实例1：化学实验仪器组装化学实验仪器组装记录初始位置：记录初始位置：oldx=drag_mc._x;oldy=drag_mc._y;返回初始位置返回初始位置：this._x=_parent.oldx;this._y=_parent.oldy;三、拖拽交互实例1：化学实验仪器组装三、拖拽交互三、拖拽交互实例实例1：化学实验仪器组装化学实验仪器组装-事件处理函数事件处理函数使用事件处理函数使用事件处理函数as语句写语句写在时间轴在时间轴上上 drag_mc.onPress=function()drag_mc.onRelease=function()引用引用对象对象时时，同级同级直接用名称直接用名称可以可以用用this替代事件处理函数的的替代事件处理函数的的对象对象三、拖拽交互实例1：化学实验仪器组装-事件处理函数三、拖拽交互三、拖拽交互实例实例1：化学实验仪器组装化学实验仪器组装-事件处理函数事件处理函数var oldx=drag_mc._x;var oldy=drag_mc._y;drag_mc.onPress=function()drag_mc.startDrag();this.三、拖拽交互实例1：化学实验仪器组装-事件处理函数var o三、拖拽交互三、拖拽交互实例实例1：化学实验仪器组装化学实验仪器组装-事件处理函数事件处理函数drag_mc.onRelease=function()drag_mc.stopDrag();if(drag_mc.hitTest(jiance_mc)=true)drag_mc._x=jiance_mc._x;drag_mc._y=jiance_mc._y;drag_mc.enabled=false else drag_mc._x=oldx;drag_mc._y=oldy;this.this.this.this.this.this.this三、拖拽交互实例1：化学实验仪器组装-事件处理函数drag_三、拖拽交互v实例实例2：鼠标拖拽影片播放鼠标拖拽影片播放被拖动的对象被拖动的对象 silder_mc 播放的对象：播放的对象：biao_mc 影片剪辑的帧数：影片剪辑的帧数：biao_mc._totalframes拖动路径拖动路径:bar_mc bar_mc._x bar_mc._y bar_mc._width startDrag(,true,_root.left,_root.top,_root.right,_root.bottom);三、拖拽交互实例2：鼠标拖拽影片播放startDrag(三、拖拽交互v实例实例2：鼠标拖拽影片播放鼠标拖拽影片播放拖拖拽对象事件拽对象事件on(press)on(release,releaseOutside)on(dragOver)拖动的对象在一定的范围内移动拖动的对象在一定的范围内移动startDrag(“”，true,left,top,right,bottom);场景第一帧添加：场景第一帧添加：var left=bar_mc._x;var right=bar_mc._x+bar_mc._width;var bottom=top=bar_mc._y;startDrag(,true,_root.left,_root.top,_root.right,_root.bottom);三、拖拽交互实例2：鼠标拖拽影片播放场景第一帧添加：star三、拖拽交互三、拖拽交互v实例实例2：鼠标鼠标拖拽拖拽影片播放影片播放电流表移动帧电流表移动帧数：数：length=_root.bar_mc._width;per=(this._x-_root.bar_mc._x)/length;frm=Math.round(_root.biao_mc._totalframes*per);_root.biao_mc.gotoAndStop(frm);三、拖拽交互实例2：鼠标拖拽影片播放 length=_三、拖拽交互v实例实例2：鼠标拖拽影片鼠标拖拽影片播放播放-事件处理函数事件处理函数asas语句写在时间轴语句写在时间轴上上事件处理函数事件处理函数 slider_mc.onPress=function()slider_mc.onRelease=function()slider_mc.onMouseMove=function()引用对象时，同级直接用名称引用对象时，同级直接用名称可以用可以用thisthis替代事件处理函数的的对象替代事件处理函数的的对象 三、拖拽交互实例2：鼠标拖拽影片播放-事件处理函数三、拖拽交互三、拖拽交互v实例实例3：圆与圆的位置关系圆与圆的位置关系d:d:两圆之间的距离；两圆之间的距离；m:m:两圆半径之和；两圆半径之和；n:n:两圆两圆半径之差半径之差 m=r1+r2 n=r1-r2m=r1+r2 n=r1-r2 d=m d=m 两圆外切两圆外切 ndm ndm dm 两圆外割两圆外割 d=n d=n 两圆内切两圆内切 dn d=m-2)&(dn+2)&(dm-2):ndm):dmif(d=n-1)&(d=n+1):d=nif(dn):d=-1&d=1):d=0三、拖拽交互实例3：圆与圆的位置关系三、拖拽交互v实例实例3：圆与圆的位置关系圆与圆的位置关系对象事件处理函数对象事件处理函数 bigcircle_mc.onPress=function()bigcircle_mc.onRelease=function()smallcircle_mc.onPress=function()smallcircle_mc.onRelease=function()_root.onMouseMove=function()三、拖拽交互实例3：圆与圆的位置关系小结小结v拖拽对象拖拽对象v拖拽对象函数拖拽对象函数 v碰撞检测函数碰撞检测函数hitTest()hitTest()vmovieClipmovieClip对象的属性对象的属性 v对象的引用对象的引用问题：问题：_root _parent_root _parent小结拖拽对象小结小结v事件添加方法：事件添加方法：在在对象上添加对象上添加事件事件 on(press);使用使用事件处理函数事件处理函数:写在帧写在帧上上 实例实例.onRelease=function()小结事件添加方法：