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

2016-03-18 19:45 38 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享Flash制作关于光的折射和全反射教程吧。

【 tulaoshi.com - FLASH 】

  这是一个反映光的折射和反射规律的flash动画,其效果主要是用编程实现的,大家可以先看一下效果:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/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)的显示文本的制作,效果如图

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/flash/)

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 (x250) {
                r = A-Math.PI/2;
                if (rC) {
                        i = Math.asin(n*Math.sin(r));
                        zs._rotation = -90+i*180/Math.PI;
                        zs._alpha = 100-i*60;
                } else {
                        zs._alpha = 0;
                }
        } else if (x250) {
                r = Math.PI/2-A;
                if (rC) {
                        i =&nbs

[1] 200610/3386_2.html'>[2] 200610/3386_2.html'>下一页

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 (rC) {
                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 (x250) {
                r = A-Math.PI/2;
                if (rC) {
                        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制作关于光的折射和全反射教程

  对应代码如下

 } else if (x250) {
         &nb图老师sp;      r = Math.PI/2-A;
                if (rC) {
                        i = 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;

200610/3386.html'>上一页  200610/3386.html'>[1] [2] 

来源:https://www.tulaoshi.com/n/20160318/1895650.html

延伸阅读
标签: FLASH flash教程
跟随鼠标移动flash教程,本例教朋友用Flash制作鼠标跟随效果。用鼠标拖动萝卜,兔兔眼睛总盯住萝卜,很可爱噢... 效果演示: 制作方法: 一、做三个元件 1、插入新元件,行为电影剪辑,命名为兔子。画出兔子的外形,也可以画其他动物,只是眼珠不画。如果要兔子耳朵、嘴巴、手动的话,要分层用逐帧改变形状。如图所示: 2、插入新...
标签: 电脑应用
《Flash相册制作大师》让您将喜爱的照片在一分钟之内转换成精彩的Flash动画。整个过程操作简单,只要选择好我们给您提供的模板,添加您的照片即可导出SWF文件。您完全不用懂得烦琐的Flash制作和照片的处理过程,一切由Flash相册制作大师帮您轻松解决。 1、 如果您已经安装了Flash相册制作软件,请双击桌面上的快...
标签: flash教程
本文由 中国 清风掠影 原创,转载请保留此信息! 先看下效果: [next] 一、新建一个空白的FLASH文档,把背景色设为黑色,其它默认。 二、点选文本工具,选择好字体,字号,把填充色设为红色,然后在舞台打上“FLASH”,调整好位置。 三、单击下舞台上的字,然后按两次Ctrl+B取消字体组合,记住...
标签: flash教程
本文由 中国 aaawer 原创,转载请保留此信息! 效果演示: [next] 制作过程:  1.打开FLASH,新建一个空白文档(550, 400) 选择文件,导入,导入到库导入事先准备好的图片(我这里导入了8张图) 然后把各图转换成图形元件 具体方法是Ctrl+l打开库用鼠标按住要转换的图拖到舞台中再按F8 转换成图形...
标签: flash教程
本文由 中国 txwh2006(踏雪无痕)   原创,转载请保留此信息! 旋转相册上有,但他写得比较简单。刚接触FLASH时,很想做一个,但教程看不懂,源文件的代码,更是不懂,只得作罢。现在根据自己掌握的一点微薄知识,按自己的设想也作了一个旋转相册。外貌、效果一样,但内核完全不同,高手的那个是靠AS代码来指挥的,我做的只是用了...

经验教程

563

收藏

6
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部