復雜運動、視聽教育理論

一、緩動(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個層次）的那些視聽教材和視聽經驗，比頂部層的言語和視覺符號具體、形象，又能突破時間和空間限的制，彌補下層各種直接經驗方式之不足。“經驗之塔”理論的啟示：“經驗之塔”理論所闡述的是經驗抽象程度的關系，符合人們認識事物由具