flash制作课件 拓展6 复杂运动、视听教育理论学习资料

复杂运动、视听教育理论

一、缓动(Easing)缓动－开始的速度快，然后逐渐慢下来，到达目标点后停止。算法：1.确定一个数字(<

1)作为缓冲系数；2.确定目标点；3.计算物体与目标点的距离；4.用距离乘以缓冲系数，得出速度向量；5.将速度向量加到当前物体坐标上；6.转3。package{importflash.display.Sprite;importflash.events.Event;publicclassEasing1extendsSprite{privatevarball:Ball;privatevareasing:Number=0.2;privatevartargetX:Number=stage.stageWidth/2;privatevartargetY:Number=stage.stageHeight/2;publicfunctionEasing1(){trace(targetX,targetY);init();}privatefunctioninit():void

{ball=newBall;addChild(ball);

addEventListener(Event.ENTER_FRAME,onEnterFrame);}privatefunctiononEnterFrame(event:Event):void{varvx:Number=(targetX-ball.x)*easing;varvy:Number=(targetY-ball.y)*easing;ball.x+=vx;ball.y+=vy;}}}文档类Easing1.as让小球变成可以拖拽的(文档类Easin2.as)package{importflash.display.Sprite;importflash.events.Event;importflash.events.MouseEvent;publicclassEasing2extendsSprite{privatevarball:Ball;privatevareasing:Number=0.2;privatevartargetX:Number=stage.stageWidth/2;privatevartargetY:Number=stage.stageHeight/2;publicfunctionEasing2()

{

init();}privatefunctioninit():void{ball=newBall;addChild(ball);ball.addEventListener(MouseEvent.MOUSE_DOWN,

onMouseDown);addEventListener(Event.ENTER_FRAME,onEnterFrame);}

privatefunctiononMouseDown(event:MouseEvent):void{

ball.startDrag();

removeEventListener(Event.ENTER_FRAME,onEnterFrame);

stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);

}

privatefunctiononMouseUp(event:MouseEvent):void{

ball.stopDrag();

addEventListener(Event.ENTER_FRAME,onEnterFrame);

stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);

}

privatefunctiononEnterFrame(event:Event):void

{varvx:Number=(targetX-ball.x)*easing;

varvy:Number=(targetY-ball.y)*easing;

ball.x+=vx;

ba.y+=vy;

}

}

}缓动何时停止?判断物体是否到达目标：if(ball.x==targetX&&ball.y==targetY) {//停止缓动的代码}设从0点到100，缓动系数为0.5：■经过1帧，到达50。■第2帧，到达75。■第3帧，剩下的距离是25。它的一半是12.5，所以新的距离就是87.5。■第20帧后，到达99.999809265。 永远无法准确地到达目标点

package{importflash.display.Sprite;importflash.events.Event;publicclassEasingOffextendsSprite{privatevarball:Ball;privatevareasing:Number=0.2;privatevartargetX:Number=stage.stageWidth/2;publicfunctionEasingOff(){init();}privatefunctioninit():void{ball=newBall();addChild(ball);ball.y=stage.stageHeight/2;addEventListener(Event.ENTER_FRAME,onEnterFrame);}privatefunctiononEnterFrame(event:Event):void{vardx:Number=targetX-ball.x;if(Math.abs(dx)<1){ball.x=targetX;trace("done");

removeEventListener(Event.ENTER_FRAME,onEnterFrame);}else{varvx:Number=dx*easing;ball.x+=vx;}}}}EasingOff.as缓动不仅限于运动透明度

alpha开始设置为0,目标设置为1：ball.alpha=0;vartargetAlpha:Number=1;在enterFrame函数中，使用缓动可以实现影片淡入效果：ball.alpha+=(targetAlpha-ball.alpha)*easing;若将0和1颠倒过来就可以实现影片的淡出效果。旋转arrow.rotation=90;vartargetRotation:Number=270;arrow.rotation+=(targetRotation-arrow.rotation)*easing;例设carMove.fla文档已有背景图及影夹元件：“小汽车”，希望实现效果：鼠标在某处单击时，汽车速度递减移至该处。varcar:Car=newCar();//创建Car对象，即实例化汽车元件car.x=150; car.y=280; //设置汽车的坐标addChild(car); //将汽车显示在舞台中vara:Number=0.1; //缓冲系数varvx:Number; //汽车速度varendx:Number; //鼠标光标的x坐标varcarR:Boolean=true;//判断汽车面向的方向，向右为真stage.addEventListener(MouseEvent.CLICK,start);

//侦听鼠标单击事件，调用start()函数functionstart(e:MouseEvent):void{endx=this.mouseX; //获取鼠标光标的x坐标

if(endx<car.x&&carR==true){//如果鼠标点击的位置在汽车的左面且汽车面向右

car.scaleX*=-1; //水平翻转汽车元件

carR=false; //设置汽车面向左

}elseif(endx>car.x&&carR==false){//如果鼠标点击的位置在汽车的右面且汽车面向左

car.scaleX*=-1; //水平翻转汽车元件

carR=true; //设置汽车面向右为真，即面向右

}car.addEventListener(Event.ENTER_FRAME,move);

//侦听enterFrame事件，调用move()函数实现汽车位移

}functionmove(e:Event):void{vardx:int=______________;//鼠标点击处与汽车的水平距离

vx=______________; //计算当前汽车的速度

car.x+=vx; //设置汽车新的x坐标，即实现位移

if(dx==0) //如果点击的位置与汽车的距离为0{car.removeEventListener(Event.ENTER_FRAME,move);}

//移除侦听汽车的enterFrame事件}二、弹性运动一维弹性privatevarspring:Number=0.1;//弹性系数privatevartargetX:Number=stage.stageWidth/2;

//目标：弹到中央privatevarvx:Number=0;//默认位置：x轴的0点vardx:Number=targetX-ball.x;//与目标点的距离varax:Number=dx*spring;//计算加速度vx+=ax;//把加速度加到速度向量中ball.x+=vx;package{importflash.display.Sprite;importflash.events.Event;publicclassSpring1extendsSprite{privatevarball:Ball;privatevarspring:Number=0.1;privatevartargetX:Number=stage.stageWidth/2;privatevarvx:Number=0;publicfunctionSpring1(){init();}privatefunctioninit():void{ball=newBall();addChild(ball);ball.y=stage.stageHeight/2;addEventListener(Event.ENTER_FRAME,onEnterFrame);}privatefunctiononEnterFrame(event:Event):void{vardx:Number=targetX-ball.x;varax:Number=dx*spring;vx+=ax;ball.x+=vx;}}}Spring1.as问题:永远不会停止需要引入摩擦力——只需加一个成员变量friction。privatevarfriction:Number=0.95;在enterFrame函数中，每次将vx乘以friction，就可以了。onEnterFrame方法如下：privatefunctiononEnterFrame(event:Event):void{vardx:Number=targetX-ball.x;varax:Number=dx*spring;vx+=ax;vx*=friction;ball.x+=vx;}Spring2.as2.二维弹性 与一维不同之处就是加入了y轴的运动。Spring3.aspackage{

importflash.display.Sprite;importflash.events.Event;

publicclassSpring3extendsSprite{

privatevarball:Ball;

privatevarspring:Number=0.1;

privatevartargetX:Number=stage.stageWidth/2;

privatevartargetY:Number=stage.stageHeight/2;

privatevarvx:Number=0;

privatevarvy:Number=0;

privatevarfriction:Number=0.95;

publicfunctionSpring3(){

init();}

privatefunctioninit():void{

ball=newBall();addChild(ball);

addEventListener(Event.ENTER_FRAME,onEnterFrame);

}

privatefunctiononEnterFrame(event:Event):void{

vardx:Number=targetX-ball.x;

vardy:Number=targetY-ball.y;

varax:Number=dx*spring;

varay:Number=dy*spring;

vx+=ax;

vy+=ay;

vx*=friction;

vy*=friction;

ball.x+=vx;

ball.y+=vy;

}

}

}

3.目标点变化的弹性例小球跟随鼠标。 只要将原来的targetX和targetY变成鼠标位置即可。将前面的程序做如下修改：vardx:Number=targetX-ball.x;vardy:Number=targetY-ball.y;改为：vardx:Number=mouseX-ball.x;vardy:Number=mouseY-ball.y;

设置完成后，将targetX和targetY这两个变量声明删除。例改进上例，看到小球在橡皮筋上运动的情况Spring5.as橡皮筋：用绘图API绘制一条线 在确定了小球的位置后，调用clear()将之前的线条擦除。然后重新设置lineStyle并绘制出小球与鼠标的连线。即在enterFrame函数中执行如下操作：graphics.clear();graphics.lineStyle(1);graphics.moveTo(ball.x,ball.y);graphics.lineTo(mouseX,mouseY);再加上重力：每帧的vy中加入重力加速度(gravity)。1.概念碰撞检测：判定一些对象是否接触到别的对象。两个物体碰撞检测方法：边界盒（boundingbox）：显示对象的外接矩形。图形是否重叠？距离是否足够近？三、碰撞检测2.hitTestObject函数格式：显示对象1.hitTestObject(显示对象2)功能：如果显示对象2和我(显示对象1)发生碰撞则返回true。下面几对图形中，哪两个相交了？例发生碰撞的物体不是矩形时

importflash.display.Sprite;importflash.events.Event;varball1:Ball=newBall();varball2:Ball=newBall(60,0x00ff00);addChild(ball1);ball1.x=stage.stageWidth/2;ball1.y=stage.stageHeight/2;addChild(ball2);ball2.startDrag(true);addEventListener(Event.ENTER_FRAME,onEnterFrame);functiononEnterFrame(event:Event):void{if(ball1.hitTestObject(ball2))trace("hit");}hitTestObject函数是根据边界盒来检测的。3.hitTestPoint

函数格式：显示对象.hitTestPoint(x，y，shapeFlag=false)功能：如果显示对象与点（x,y）发生碰撞则返回true。例文档类PointHitTest.aspackage{importflash.display.Sprite;importflash.events.Event;publicclassPointHitTestextendsSprite{privatevarball:Ball;publicfunctionPointHitTest(){ball=newBall();addChild(ball);

ball.x=stage.stageWidth/2;ball.y=stage.stageHeight/2;

addEventListener(Event.ENTER_FRAME,onEnterFrame);}privatefunctiononEnterFrame(event:Event):void{if(ball.hitTestPoint(mouseX,mouseY))trace("hit");}}}

hitTestPoint(x，y，shapeFlag=false)shapeFlag为true：碰撞检测时根据对象的实际图形，而不是边界盒ACBshapeFlagtruefalseAfalsetrueBtruetrueCfalsefalse4.应用距离碰撞检测考虑两个圆形，圆的注册点在中心点上。importflash.display.Sprite;importflash.events.Event;varball1:Ball=newBall();varball2:Ball=newBall(60,0x00ff00);addChild(ball1);ball1.x=stage.stageWidth/2;ball1.y=stage.stageHeight/2;addChild(ball2);ball2.startDrag(true);addEventListener(Event.ENTER_FRAME,onEnterFrame);functiononEnterFrame(event:Event):void{vardx:Number=ball2.x-ball1.x;vardy:Number=ball2.y-ball1.y;vardist:Number=Math.sqrt(dx*dx+dy*dy);if(dist<ball1.radius+ball2.radius)trace("hit");}例弹性碰撞(文档类Bubbles.as)minDistdxdy(tx,ty)四、视听教育理论1.概念

视听教育理论研究如何利用视觉、听觉感官的特点和功能，提高教育信息传递的效果。它的心理学基础是以行为主义心理学为背景的视感知规律、听感知规律和“经验之塔”理论。1957年美国掀起一场长达10年之久的大规模的教育改革运动。这场运动对学校教育的课程内容进行修订，对教学方法作相应的改革。课程改革强调应用布鲁纳的发现教学法，提出学生的学习程序应始于直接经验逐渐向图象经验和抽象经验展开。布鲁纳的发现学习法组织教材的模式与戴尔的视听教学理论中媒体的分类模型相吻合所以课程改革运动对视听教学有很大的促进作用。2.视感知规律

人眼的亮度感觉随环境亮度的变化而变化，所以在教学中，为提高电视、投影画面的亮度，就需要遮挡门窗以降低室内环境的照度。观察静止和运动物体时人眼的分辨力也不相同，运动速度越高，分辨力越低。电视技术中，就是根据这一特性来决定扫描行数的。人眼分辨彩色细节的能力较差。教学中黑板上应尽量书写白字或白板上书写黑字，以提高字体的清晰度，便于学生观看学习。视觉心理是画面构图的基础，构图中必须考虑人的视觉心理。在摄像构图中，可以利用光线的明暗表现特定的时间、环境，或出被摄主体，增强立体感，影响人们的情绪。在教育电视节目中，一般以光线明快、自然、明暗配置整齐的高调画面为主，让学生处于良好的学习气氛中，并对学生有强烈的感染力，激发学生学习的兴趣。色彩的心理效应色彩类型联想物象征意义蓝色天空、海洋崇高和深远绿色田野、春天生命与和平红色血、火革命、危险与暴力黄色丰收的金秋富有、高贵与欢乐白色白云纯洁线条结构例子心理效应横线结构地平线、海平线给人以广阔、寂静、平衡和安定的感觉垂直结构林立的楼群、庄严的人民英雄纪念碑经常代表生命永恒和权力给人以庄严、宏伟、尊严和刚强的感觉斜线结构倾斜的地平线给人以运动、变化、跳跃和不安定的感觉曲线结构人们的舞姿、山脉给人以柔和、优美、和谐和韵律的感觉圆形结构一轮圆月、飞驰的车轮给人以完整、圆满和圆润的感觉放射结构光芒四射的太阳给人以活泼、奔放的感觉线条的心理效应：●横幅（BANNER）构图基本原则字体――确信你的广告被第一时间读到。

减小大号文字的间距，越小的文字需要越大的间距。

让浏览者从一个方向上看文字不要让文字排列成这样这样的排列也可以，仍是从左向右按钮要放在右边

内容与边缘保持适当距离人们不喜欢读长句，长句在排版上应该让它变得令人喜欢。满是吸引点只会被注意，而不会有点击。把美女放在BANNER的左边面孔的局部图片会对女性浏览者更有效值得花时间去修整图片

3.戴尔的经验之塔“经验之塔”理论主要观点：（1）塔的最底层的经验最具体，学习时最容易理解，也便于记忆；越往上越抽象，越易获得概念，便于应用。各种教学活动可以依其经验的具体--抽象程度，排成一个序列。（2）教学活动应从具体经验入手，逐步进入抽象经验。（3）在学校教学中使用各种媒体，可以使教学活动更具体，也能为抽象概括创造条件。（4）位于“塔”的中部层（5个层次）的那些视听教材和视听经验，比顶部层的言语和视觉符号具体、形象，又能突破时间和空间限的制，弥补下层各种直接经验方式之不足。“经验之塔”理论的启示：“经验之塔”理论所阐述的是经验抽象程度的关系，符合人们认识事物由具