Flash制作關于光的折射和全反射規律的動畫教程

2020-07-17 13:10:50

字體：大中小

來源：轉載

供稿：網友

　　這是一個反映光的折射和反射規律的flash動畫，其效果主要是用編程實現的，教程介紹的很詳細，希望對大家有所幫助！

　　大家可以看得出，整個flash動畫大致由三部分組成：

　　一、基本元件：反射光線、折射光線、法線（與分界面垂值的那一條）、光源、分界面
　　二、各個角度的顯示
　　三、動畫的實現

　　這三部分中，教程將把重點放在第三部分上，將把整個的編程思路作詳細講解，好了廢話少說，現在開始吧

　　一、基本元件的制作

　　這一步主要是用flash的繪圖工具完成的反射光線、折射光線、法線、分界面的畫法是一樣的，所以只舉一個例子足矣，如畫分界面：

　　1、選取工具區的線條工具，線條粗細默認，在主場景按住Shifi鍵向下畫一條適當長度的線段。

　　2、選中線段，右鍵—轉化為元件－影片剪輯，其參數按圖中設置，把它轉化為影片剪輯

Flash制作關于光的折射和全反射教程

　　3、雙擊分界面元件，進入編輯狀態，選取工具欄中的文本工具，在分界面元件的適當位置加入文字說明如圖

Flash制作關于光的折射和全反射教程

　　其他的畫法是一致的，不同的是：

　　1、法線按物理的畫法是用虛線的，這可以在場景的下方屬性欄設置，在筆觸樣式處選擇如圖

Flash制作關于光的折射和全反射教程

　　2、折射光線和反射光線的注冊點選在左中間位置如何，各元件都畫好了嗎？下面就給各個元件命名吧，這個命名和轉換為元件時的命名作用不一樣，這次的命名將在腳本里用上。把各元件拖到場景中，分別選中元件，然后選擇場景下方的屬性－剪輯名稱處命名，按中文拼音習慣命名吧，如分界面命名為fjm如圖

Flash制作關于光的折射和全反射教程

　　其他的同樣命名，反射光線命名fs，折射光線命名為zs，法線命名為fx，至于那個發光的光源，我是用工具欄的矩形工具畫的，太丑了，各位應該畫得比我好，同樣，畫好后，選中它，右鍵—轉化為元件－影片剪輯，命名為jg（激光）。也許大家會問，入射光線呢，別急，這條光線是用腳本實現得

　　二、顯示文本的制作

　　這一步牽涉到了文本工具里的動態文本和靜態文本的用法

　　1、選中文本工具，此時的文本工具默認下是靜態文本的，點擊場景中的右上角，在點擊處出現一個文本框、在其中輸入“入射角”三字

　　2、同樣選擇文本工具，選擇場景下方的屬性對話框，點擊文本類型下拉菜單，會出現三選項，靜態文本、動態文本、輸入文本，這里選擇動態文本，用來動態顯示入射角得數值，在上一步的文本“入射角”后按住左鍵拉出一個文本框，選中文本框，選擇下方的屬性，在變量處命名rsj（入射角）如圖

Flash制作關于光的折射和全反射教程

　　最后在動態文本后用靜態文本輸入單位“度”，基本作法就如此，，之后依次完成折射角(zsj)、反射角(fsj)、臨界角(ljj)的顯示文本的制作，效果如圖

Flash制作關于光的折射和全反射教程

　　三、動畫的實現

　　1、理論分析

　　這部分主要是腳本了，我們先熟悉一些折射定律吧，高中物理告訴我們，當一束光線從光密介質到光疏介質（如從水或玻璃進入空氣），有可能發生全反射(此時只有反射光線)，條件就是光線在光密介質中的入射角大于臨界角，（如果不是很清楚，可看一下物理課本哦,，我這里基本上只是給出結論），臨界的計算公式sinC＝1/n(n為折射率)，即C＝arcsin(1/n)，而光線在空氣中與法線的夾角i和光線在介質中與法線的夾角r滿足折射定律公式n＝sin(i )/sin(r),所以有i＝arcsin(n*sin(r),至于另外的一條反射光線就簡單了，入射角等于反射角，根據能量守恒，入射光的總能量＝折射光的能量+反射光的能量，這一點將用他們的透明度（alpha值）反映出來。

　　2、代碼分析

　　完整的代碼如下

復制代碼

代碼如下:

fjm._y=200;
fx._x=250;
zs._x=250;
zs._y=200;
fs._x=250;
fs._y=200;
n=1.5;
onEnterFrame=function(){
jg.onMouseDown=function(){
this.startDrag(true,0,200,500,500);
};
jg.onMouseUp=function(){
this.stopDrag();
};
this.createEmptyMovieClip("mc",100);
mc.lineStyle(2,0xff0000,100);
mc.moveTo(250,200);
x=jg._x;
y=jg._y;
mc.lineTo(x,y);
A=Math.atan2(y-200,x-250);
jg._rotation=A*180/Math.PI+180;
C=Math.asin(1/n);
ljj=Math.round(C*180*10/Math.PI)/10;
if(x<250){
r=A-Math.PI/2;
if(r<C){
i=Math.asin(n*Math.sin(r));
zs._rotation=-90+i*180/Math.PI;
zs._alpha=100-i*60;
}else{
zs._alpha=0;
}
}elseif(x>250){
r=Math.PI/2-A;
if(r<C){
i=&nbs</p>p;Math.asin(n*Math.sin(r));
zs._rotation=-90-i*180/Math.PI;
zs._alpha=100-i*60;
}else{
zs._alpha=0;
}
}
fs._rotation=180-A*180/Math.PI;
rsj=Math.round(r*180*10/Math.PI)/10;
if(r<C){
zsj=Math.round(i*180*10/Math.PI)/10;
}else{
zsj="已全反射";
}
fsj=Math.round(r*180*10/Math.PI)/10;
fs._alpha=i*60;
};

　　好了下面開始分析代碼如何寫的了，先看一個圖

Flash制作關于光的折射和全反射教程

　　看得出，我是用分界面和法線把場景分成了4個區域，相當于數學里的第一到第四象限，在代碼中先作了如下的初始化

復制代碼

代碼如下:

fjm._y=200;
fx._x=250;
//以上可知交點相當于坐標原點為（250，200）
//折射光線、反射光線的x、y坐標分別在250，200（即坐標原點）
zs._x=250;
zs._y=200;
fs._x=250;
fs._y=200;

　　由以上的初始化可知，折射光線、反射光線的注冊點必須在左邊（看元件制作）同時由圖可知，入射光線只能在3、4象限，意味著光源只能在3、4象限移動，所以光源（激光jg）元件只能在平面以下拖動，左右最好不要出場景，代碼為

復制代碼

代碼如下:

this.startDrag(true,0,200,500,500);

　　接下來就要解決入射角和折射角的關系，還是再看一個圖

Flash制作關于光的折射和全反射教程

　　這個截圖中入射光線是在第三象限，對應的折射光線在第一象限，而flash的旋轉用其屬性_rotation實現，這個屬性表示的是指定影片剪輯相對于其原始方向的旋轉程度，以度為單位。從 0 到 180 的值表示順時針方向旋轉；從 0 到 -180 的值表示逆時針方向旋轉。所以首先要獲得入射光線的旋轉角A，可我們上面的元件中沒有入射光線呀，怎么來的，實際上是用以下代碼畫的

復制代碼

代碼如下:

this.createEmptyMovieClip("mc",100);
mc.lineStyle(2,0xff0000,100);
mc.moveTo(250,200);
x=jg._x;
y=jg._y;
mc.lineTo(x,y);

　　那么，A就可以用反三角函數獲得代碼為

復制代碼

代碼如下:

A=Math.atan2(y-200,x-250);

從圖中可知，其真正的入射角為r=A-Math.PI/2;其折射角i=Math.asin(1.5*Math.sin(r))從圖中可知折射光線旋轉的角度應該為-90+i*180/Math.PI，相應代碼為

復制代碼

代碼如下:

if(x<250){
r=A-Math.PI/2;
if(r<C){
i=Math.asin(n*Math.sin(r));
zs._rotation=-90+i*180/Math.PI;
zs._alpha=100-i*60;
}else{
zs._alpha=0;
}

　　大家可能會問，zs._alpha = 100-i*60;這一句的算法是如何的，根據物理規律，當折射角越大，其能量越小，當折射為90度時發生全反射，對應的折射光線能量為零，在動畫中反映為其_alpha值越來越小，按實際計算為zs._alpha = 100-i*63.7的，但考慮實際效果，算了，就這樣吧。反之反射光線能量越來越大，當發生全反射時，能量最大，等于入射光的強度，用代碼fs._alpha = i*60實現，怎么樣，清楚嗎？

　　剩下的是當入射光線在第四象限時的了，也看一下類似的圖

Flash制作關于光的折射和全反射教程