基于Flash ActionScript3.0的光栅光路动画实现

摘要：随着Flash编程技术的发展，其在物理实验原理动画方面的作用和优势日渐明显。Flash内置的Action编程功能以其丰富的交互特性，可应用于课件动画的智能交互设计。该文以光栅光路动画为例，具体实现了可控制输入变量的交互动画等。

关键词：光栅；光路动画；Flash；ActionScript3.0

中图分类号：TP37文献标识码：A文章编号：1009-3044(2011)13-3125-03

Animation Making of Light Path of Grating Based on Flash ActionScript3.0

QIN Jing-liang, WEI Wen-shan, NONG Zheng

(College of Physics and Electronic Engineering of Guangxi University for Nationalities, Nanning 530006 ,China)

Abstract: Flash programming technology is developing quickly and the effect and advantages of it are obvious gradually in animation demo of Physics experiment theory. The Action programming function in Flash can beapplied in the intelligent nteractive design of software-flash for its rich interaction . This paper take the animation of light path of grating for an example to implement interactive animation of controllable output variable.

Key words: grating; animation of light path; flash; ActionScript3.0

在众多的Flash教学课件中，动画能否具有交互性历来是教师所追求的一个目标。具有交互性的课件，在教学上往往受学生所喜爱，也往往在各种课件比赛上获得更好的成绩。在物理实验教学中，往往有一些用文字和静态图片不能很好表述的原理，若能用动画来表示则能提高学生对物理规律的认知效率。

以往用Flash制作的教学动画多数是以演示类型为主，Flash的交互功能通常只用于导航和按钮选择的菜单上面。一般而言，虚拟演示动画能够用于展示难以用言语说明的现象或

原理，但其不足常常是不能随输入变量的改变而改变。为了解决这一困难，应使用计算机程序设定好动画预置参数，由使用者进行参数设定，动画也因此展示出不同的现象。本文以Flash为技术实现平台，运用其内置的ActionScript3.0脚本编程语言来解决这一难点。

1 Flash ActionScript3.0和开发环境概述

作为Flash的脚本编程语言，和ActionScript2.0和1.0有本质的不同，ActionScript3.0在Adobe公司在2006年正式推出之时，已是一门功能强大、面向对象的标准编程语言。它象征着Flash播放器Flash Player运行时功能发展中的重要里程碑，也是快速构建丰富互联网程序（RIA）的理想语言。ActionScript3.0要运行在Flash Player9.0版本以上，由其新一代的虚拟机AVM2进行解码。相比以前的ActionScript2.0，据测试ActionScript3.0在代码执行效率上要快10倍以上。

在本文的技术开发平台上，由于ActionScript3.0在面向对象编程方面已经达到Java，C#的水平，能使代码编写更规范和方便，因而本文动画的智能化交互实现上主要采用Flash CS3为编写和测试环境。因为Flash是向下兼容的，使用Flash CS3能够打开以前版本制作的源文件，但测试播放器必须是Flash Player9.0以上。

2 动画实现过程

2.1 光栅光路原理分析

在“光栅衍射原理”中，主要涉及光栅方程的原理。其物理规律是：衍射光经过透镜会聚后，在焦平面上形成一系列对称的且相隔较远的明条纹。明条纹对应的衍射角φ满足光栅方程：dsinφ=kλ，k=0, ±1, ±2,L，其中d为光栅常数，λ为光波波长，k为明条纹级数。光栅方程表明，光栅常数d一定时，光波波长λ不同，第k级明纹的衍射角φ不同，即第k级明纹成像位置的不同；光波波长λ一定时，光栅常数d不同，第 级明纹的衍射角φ不同，也就是第k级明纹成像位置的不同。如何用动画去演示这一规律呢？对Flash来说，一般的补间动画只能做出对该现象的虚拟演示，并有重放的功能。但是如果入射光的角度不是垂直入射，或是衍射角度和光栅常数d不是预先固定好某一各数值的，那么对于补间动画而言这是做不出来的。也就是要使动画现象随参数的改变而改变，只有通过编程才能实现这种比较智能的动画。因此，动画要与ActionScript3.0编程和物理规律相结合。

2.2 程序概况

程序主要利用ActionScript3.0的组件、侦听器、自定义函数、绘图API、类和包等。程序先建立两个类文件，一个命名为board类，board类里面定义有各种方法，专门负责实验场景的绘制，包括光栅，背景底色，凸透镜，聚光屏。另一个命名为ray类，负责光路的绘制。这两个类构成两个AS文件并放在Flash源文件的同一目录下。主场景上使用下拉式菜单组件来进行参数的选择，多个组件同时运用，包括光源，入射角，光栅常数的选择。主场景的帧上则构造侦听器和调用类的方法，侦听事件的发生并传递变量参数给类的方法以改变影片剪辑的属性，使物理现象能随参数的改变而改变，如图1、图2、图3所示。

2.3 代码实现

1) 代码实现―board类

board类就相当于构造的一个实验环境，其中自定义的各种方法用于构造实验环境中的各要素，比如想要显示的由线条组合构成的仪器示意图。

package {

//导入相关类和所有滤镜

import flash.display.MovieClip;

import flash.display.Shape;

import flash.filters.*;

public class board extends MovieClip {

//自定义光栅绘制方法

public function raster_paint(temp:Number):void {

//以下六行为参数预置，N为光路缝数，d为主场景选取的光栅常数变量；

//incidence_y为入射光经过的光程；

//convexity为各缝间宽度，beeline为绘制这些仪器的线的样式；

var N:uint=7;

var d:Number=temp;

var incidence_y:Number=100;

var convexity:Number=20;

var beeline:Shape=new Shape;

beeline.graphics.lineStyle(4,0x000000);

//以下几行给线条运用模糊和投影滤镜

var blur:BlurFilter=new BlurFilter;

var shadow:DropShadowFilter=new DropShadowFilter;

shadow.distance=5;

shadow.angle=45;

shadow.blurX=12;

shadow.blurY=12;

blur.blurX=1;

blur.blurY=1;

beeline.filters=[blur];

beeline.filters=[shadow];

//根据参数绘制虚线

for (var i=1,k=20; i

beeline.graphics.moveTo(0 + k,incidence_y);

beeline.graphics.lineTo(convexity + k,incidence_y);

}

//调用显示

addChild(beeline);

}

//背景幕布和遮罩层绘制

public function backdrop():void {

var shelter:Shape=new Shape;

shelter.graphics.beginFill(0xffffff,1);

shelter.graphics.drawRoundRect(0,0,540,360,10);

addChild(shelter);

var square:Shape=new Shape;

square.graphics.beginFill(0x4270c6,0.4);

square.graphics.drawRoundRect(0,0,540,360,10);

addChild(square);

}

}

}

实际在该类中还定义有更多方法来完成其他动画的绘制，此例子只作为典型。

2) 代码实现―ray类

package {

import flash.display.MovieClip;

import flash.display.Shape;

import flash.filters.*;

public class ray extends MovieClip {

public function line_paint(Ang1:uint,Ang2:uint,

temp:Number,temp2:Number):void {

var incidence_y:Number=100;

var N:uint=7;

var d:Number=temp;

var line:Shape=new Shape;

var beeline_x:Number=0;

//给光线运用发光滤镜

line.graphics.lineStyle(2,0xFFFF00);

var glow:GlowFilter=new GlowFilter;

glow.color=0xffff00;

glow.alpha=1;

glow.blurX=10;

glow.blurY=10;

glow.strength=1;

glow.quality=1;

line.filters=[glow];

//根据入射角度Ang1，衍射角度Ang2和光线经过的距离利用三角函数推导出画线目的坐标

for (var i=1,k=20; i

line.graphics.moveTo(d + k,incidence_y);line.graphics.lineTo(d-Math.tan(Ang1*Math.PI/180)*(incidence_y-20)+k, 20);

line.graphics.moveTo(d + k,incidence_y);

line.graphics.lineTo(d+Math.tan(Ang2*Math.PI/180)*60+k, incidence_y + 60);

line.graphics.moveTo(d+Math.tan(Ang2*Math.PI/180)*60+k, incidence_y + 60);

}

for (var t=k,j=1; j

t-=d;

if (temp2!=0) {

line.graphics.lineTo(temp2, incidence_y + 220);

} else {

line.graphics.lineTo(20+3*k/4, incidence_y + 220);

}

line.graphics.moveTo(d+Math.tan(Ang2*Math.PI/180)*60+t, incidence_y + 60);

}

//添加到显示列表

addChild(line);

}

}

}

这段代码是实现效果的核心部分，即ray类中的line_paint（）方法实现了根据用户选择需要绘制光路现象的效果。首先要清楚Flash内的座标，与我们平时用的迪卡尔坐标不同的是，Flash内的座标，在纵方向（y方向）越向上值越小，越向下值越大。其次，AS的三角函数使用弧度，而不是角度作为参数，因此在计算时要把角度转换成弧度。因为1o=π/180,所以公式为：弧度=角度*（π/180）。

3) 主场景

类的方法定义完毕后，作为前台与用户直接进行交互的主场景画面就可以制作了，这里主要是下拉组件的组合使用，由用户先进行菜单选择，程序再根据选择结果把参数传递到后台的处理函数中。基本思路是给每个组件和相关控制按钮注册侦听器，一旦相关鼠标事件触发，程序按编排顺序调用以上自定义相关类中的方法，结果返回到主场景中，最后添加进显示列表来显示。不过这时绘制的光路图像是一下子绘制完成的，即是静止的。要使光路图像从无到有那样出现，可以给它添加一个运动的遮罩。

图4 实现效果

4) 附加功能的设计与制作

动画页面由“上一步”和“下一步”箭头按钮来控制跳转，在当前页面的动画还未播发时，若不小心单击了“下一步”按钮，就会直接到下页动画，使学习有所遗漏。为此，可以增添一个提示动画，用来进一步判断操作。

3 结论

本光栅动画用ActionScript3.0编程语言来实现，具有良好的智能互交性和可靠性。而且动画可随参数输入的不同而产生相异的实验现象，能够让相关理论的教与学拥有自定义的预置模式，提升动画教学的自由度。在此基础上，通过编写共用类，可以进一步很快实现其他光路动画的效果。实际试用结果表明，该动画能较好解决对光栅实验原理学习的需求。

参考文献：

[1] 杨述武.普通物理实验(三、光学部分)[M].北京:高等教育出版社,2002.

[2] 孙颖.Flash ActionScript 3殿堂之路[M].北京:电子工业出版社,2007.

[3] 赵英杰.Flash ActionScript高级编程艺术[M].北京:电子工业出版社,2006.