如何用flash动画制作一个椭圆
在进行椭圆定义与性质教学时,我们一般可以用下面的这个填空题作为例子说明椭圆的性质:
已知动点P(x, y)满足 ,则点P的轨迹是 _。
我们都可看出上式的几何意义:它表示动点(x, y)到定点(1,2)和定直线3x+4y+12=0的距离之比为1/2。 由椭圆的第二定义可知其轨迹为椭圆,但如何能让学生能比较直观地看到动点P的运动轨迹呢?笔者运用Flash MX制作动画如下:
1、建立一个220×250象素的新文件,并保存;
2、把“图层1”重新命名为“坐标轴”,在这一图层里画上X-Y坐标系,其原点为(100,160),坐标轴的单位为20(以上单位都是象素);做好后锁定它。
3、新...全部
在进行椭圆定义与性质教学时,我们一般可以用下面的这个填空题作为例子说明椭圆的性质:
已知动点P(x, y)满足 ,则点P的轨迹是 _。
我们都可看出上式的几何意义:它表示动点(x, y)到定点(1,2)和定直线3x+4y+12=0的距离之比为1/2。
由椭圆的第二定义可知其轨迹为椭圆,但如何能让学生能比较直观地看到动点P的运动轨迹呢?笔者运用Flash MX制作动画如下:
1、建立一个220×250象素的新文件,并保存;
2、把“图层1”重新命名为“坐标轴”,在这一图层里画上X-Y坐标系,其原点为(100,160),坐标轴的单位为20(以上单位都是象素);做好后锁定它。
3、新建一图层,命名为“动点”。按Ctr+F8,创建名为dot的新电影剪辑,在其中舞台的中央,画一个10×10象素圆点;用同样的办法再创建名为P和Q的两个电影剪辑,在其舞台上分别输入P和Q两个字母;返回到主场景;按F11打开库,拖动刚才创建的dot元件到舞台上并再复制两个,位置任意,把它们的实例名分别命名为dot_1(代表动P点)、dot_2(代表定直线上的动点Q点)和dot_3(代表焦点F),同样也把P和Q两个元件把复制到主场景,实例名分别为p_dot、q_dot。
4、新建一图层,命名为“脚本”,此层为本动画最关键的一层。我们制作的思路是先画一个正轴椭圆,即椭圆的对称轴与坐标轴平行,其画法是使用椭圆的参数方程:x=acos(angle),y=bsin(angle),让angle变量循环,采用微分的原理画出正轴椭圆。
要得到斜轴的椭圆的方法我们要借助极坐标的思想:把坐标系的X轴看成极轴,把椭圆上的任一点与中心的连线看成极径,极角则为变量angle与椭圆长轴和X轴夹角的和。下面就开始程序的编写,按F9,打开动作脚本编写窗口。
动作脚本程序如下:
scale = 20;//坐标轴的单位
x0 = 100;
y0 = 160;//原点的坐标
tag=1//动画播放的标识,当它为1时动画播放,为0时暂停
angle_0=Math。
atan(4/3)//椭圆的长轴与坐标系X轴的夹角
lineStyle(2,0x0000,100)
moveTo(x0-5*scale,y0-3/4*scale)
lineTo(x0+scale,y0+15/4*scale)//画直线3x+4y+12=0的一部分
a = scale*46/15;
c = scale*23/15;
b = Math。
sqrt(a*a-c*c);//椭圆的a、b、c的大小
focus_x = x0+1*scale;
focus_y = y0-2*scale;//定点的坐标,实际是椭圆的一个焦点
dot_3。
_x= focus_x
dot_3。_y= focus_y//把dot_3作为椭圆的焦点标志
ellipse_centre_x = focus_x+c*Math。sin(angle_0)
ellipse_centre_y = focus_y-c*Math。
cos(angle_0)//椭圆的中心坐标
moveTo(ellipse_centre_x+a*Math。cos(angle_0), ellipse_centre_y-a*Math。sin(angle_0));//把画笔移到椭圆长轴右侧
lineStyle(2, 0xFFF00, 100);//线的粗细和色调及透明度的定义
angle = 0;//画椭圆时循环变量的初始值
ellipse = function () {
if(tag==1){
temp_x = a*Math。
cos(angle);
temp_y = b*Math。sin(angle);//正椭圆上的动点
dot_dot = Math。round(Math。sqrt(temp_y*temp_y
+(temp_x+c)*(temp_x+c))/20*100)/100;//动点P与焦点F两点之间的距离,精确到百分位
temp_distance = Math。
sqrt(temp_x*temp_x+temp_y*temp_y);//椭圆上点到中心的距离
if (temp_y>=0) {
temp_angle = Math。acos(temp_x/temp_distance);//
} else {
temp_angle = 2*Math。
PI-Math。acos(temp_x/temp_distance);
}//上面几句中temp_angle正椭圆上点与中心的连线与椭圆长轴的夹角,条件语句是让temp_angl能包括整个圆周角。
x = temp_distance*Math。cos(temp_angle-Math。atan(4/3))+ellipse_centre_x;
y = temp_distance*Math。
sin(temp_angle-Math。atan(4/3))+ellipse_centre_y;//极径在X轴和Y轴的投影
dot_1。_x = x;
dot_1。_y = y;//dot_1显示为椭圆上的动点,让其坐标随x,y变化
p_dot。
_x = x;
p_dot。_y = y;//字母P不断在椭圆上运动
dot_line_distance = Math。abs(3*(x-x0)+4*(y0-y)+12*scale)/5;//动点到定直线的距离。
dot_line = Math。round(dot_line_distance/20*100)/100;//动点P与定直线的距离
dot_2。_x = x-dot_line_distance*Math。
cos(angle_0);
dot_2。_y = y+dot_line_distance*Math。sin(angle_0);//dot_2显示为定直线上的动点,以上3条语句确定其坐标
q_dot。
_x = dot_2。_x;
q_dot。_y = dot_2。_y//Q点不断地在定直线上运动
angle = angle+。05;//循环进度
lineTo(x, y);//向点(x,y)画线,逐渐画出动点的轨迹
};
}
setInterval(ellipse, 50);//调用ellipse()函数,50ms一次。
按Ctr+Enter键运行程序可得到动点形成的椭圆,以及两个运动的点:一个在椭圆上,一个在直线上,但它不能体现出动点到定点和定直线的距离。我们能不能在以上的程序里加入画出这个线段的语句呢?答案是不能的,因为每一次循环都有两条线,那样我们可看到一系列的线条,而我们想要是最近画出的两条。
所以我们必需把这个内容做在另一个电影剪辑,在其中只显示最近一次的两个线段。
5、按Ctr+F8,创建line的新电影剪辑,在该剪辑的动作脚本的窗口加入以下语句:
line = function () {//定义line函数
clear();//清除上一循环所画内容
lineStyle(2, 0xff00, 100);
moveTo(_root。
focus_x, _root。focus_y);//把画笔移到焦点上
lineTo(_root。x, _root。y);//向椭圆上的动点画线
lineTo(_root。dot_2。
_x, _root。dot_2。_y);// 向定直线上的动点画线
};
setInterval(line, 50); //调用line()函数,50ms一次
返回到主场景,按F11打开库,把line元件拖到舞台上,其位置为(0,0),即舞台的左上角。
为了能动态看到动点与焦点和定直线的距离,在主场景的舞台适当的位置上建立两个动态文本框,打开它们的属性面板,定义其变量分别为dot_dot(代表PF)和dot_line(代表PQ)。另外为使实现动画的互动性,打开公用库中的按钮,复制两个到主场景上,让一个代表“播放”,实例为play_btn,一个代表“暂停”,实例名为pause_btn;下面的工作是让这两个按钮能控制动画的播放。
步骤是:选中“播放”按钮,按F9,在动作脚本的窗口中输入:
on (press) {
pause_btn。_visible=1
play_btn。_visible=0//按了“播放”后,“播放”看不到,“暂停”按钮出现
tag=1//代表可播放
}
同样选中“暂停”,按F9,在动作脚本的窗口中输入:
on (press) {
pause_btn。
_visible=0
play_btn。_visible=1//按了“暂停”后,“播放”看不到,“播放”按钮出现
tag=0//代表暂停播放
}
把“播放”与“暂停”按钮叠放在一起,这样播放时只可看到有效的按钮。
保存当前文件。
按Ctr+Enter键运行程序可看到完整的动画,并可得到swf动画文件。
从上可看出,用Flash制作我们数学中常用动画的思想并不复杂,它大致的步骤是:建立模型(本例中建立坐标系和形成描述动画的框架)——解释模型(运用动作脚本语言实现以上模型)——实现模型(通过交互控制和发布动画),但以上过程都建立在对Flash动作脚本的结构理解和灵活运用。
。收起