智慧城市让生活更美好!
物联网  >   传感器  >  正文

自制传感器教具:第三篇 Flash动画基础

  经过了前两篇,我们已经能够用自制的无线位移传感器来进行实验研究了,但是每次都要将数据复制到excel里进行研究毕竟太过于麻烦,所以有必要制作电脑端的软件,用来显示和处理Arduino发送过来的数据。当然几乎所有的软件都能实现这个功能,但是它们大多太过于专业,非计算机专业的我们很难学会,而且做出来的软件也太过于死板。

  大家应该都使用过Flash动画,它是平面动画里效果较好又容易制作。所以接下去我们就开始来学习使用Flash动画来作为显示数据的软件(如果用动画来作为软件,那么显示数据的形式就不仅仅是表格和图线了......)

  flash动画基础

  制作Flash动画的软件为Adobe Flash Professional CS,具体是CS几没关系,关于软件大家自行百度下载。

  打开软件,如下图:

  

 

  在新建里选择第一个“ActionScript3.0”,然后会打开如下界面:

  

 

  大家可能有做过flash动画的,但是大多是采用补间动画的方式来做的,我们这里使用ActionScript3.0程序语言来驱动动画,关于基本的使用补间动画来进行Flash动画制作这里就不再介绍了。下面我们使用程序来驱动一个简单的动画。

  首先点击菜单栏的“插入”,插入一个“新建元件”:

  

 

  随便取个名称,中英文都可以,例如我取名为“object”,然后类型选择“影片剪辑”,点击确定,就进入了"object"这个影片剪辑的编辑界面,下面在里面画一个方块,注意页面中间的十字号是这个影片剪辑的中心,我们就把方块放在中心处。

  

 

  画好后你可以在右侧“库”里面找到我们刚绘制的“object”影片剪辑。然后点击主界面左上方的“场景1”,进入到影片的主场景中,之后点击右侧的“库”菜单,打开库,里面可以看到刚才建好的object影片剪辑,然后用鼠标左键点中库中的object影片剪辑,按住左键将其移到主场景中:

  

 

  软件中的一些工具菜单以及库菜单等等都可以在上方“窗口”菜单栏内打开。在object影片剪辑拖入主场景后,选择工具菜单中的黑色箭头,然后再点击场景中刚拖入的影片剪辑。到这里为之,可能做过Flash动画的老师都很熟悉这个过程,下面我们就正式开始用程序来驱动动画。接下去,打开右侧的“属性”菜单,给影片剪辑取个名字,这里我叫它“box”,这个名字最好不要与之前库中的名字重名。

  

 

  在取好名字后,可以设定方块的位置和大小,x,y的值就是二维平面的坐标,最左上角为(0,0)。之后打开动作栏

  

 

  点击场景中的任意地方,就可以在动作栏内编写驱动动画的程序了。

  

 

  首先先了解一下制作动画的大概思路。动画其实是由一幅幅图片依次播放形成的,在右侧关于场景的属性内可以看到“FPS:24.00”,这表明每秒中播放24幅画面。所以如果要制作动画,虽然物体是连续移动的,但是其实并不是连续的,而是每1/24秒移动一下位置。当然为了使物体移动看起来流畅一些,你可以提高FPS的值。

  了解了这个后,我们用程序来控制动画的大概思路也就有了,在每次加载帧(每一幅画面称为一帧)时计算一下物体的位置,然后控制它移动到这个位置,下面让场景中的方块移动起来吧:

  在动作栏内写入下列程序:

  *****下面为程序**********

  addEventListener(Event.ENTER_FRAME, onEnterFrame);

  function onEnterFrame(event:Event):void {

  box.x+=1;

  }

  *****上面为程序**********

  不要被这一长串代码吓到哦,其实你没有必要一个字一个字自己打出来的,你完全可以从我这里复制过去的,我们只需要了解其中的一些代码就够了。

  先来看第一句:

  addEventListener(Event.ENTER_FRAME, onEnterFrame);

  这一句的实现了每当新的帧加载时,也就是呈现新的画面时,就执行“onEnterFrame"函数,具体名字其实可以随便取的,不过为了以后能看懂程序,最好取个有含义的名字,例如这里的这个onEnterFrame,英文意思就是在进入帧时,当然你也可以用拼音字母来写(如果和我一样英语不好的话),

  下面的程序:

  function onEnterFrame(event:Event):void {

  ..........

  }

  就是在定义这个onEnterFrame函数的,具体在每一帧要做什么事情就写在这个函数的两个大括号中间,每一句用”;“(注意所有的标点符号都要用英文输入法里的哦)结尾。

  最后我们在这个函数里写了:

  box.x+=1;

  "box"就是我们刚才命名的那个方块的名字,".x"就是他在场景中的横坐标,场景的最左边为x=0,向右x增加。最上边为y=0,向下y增加。”box.x+=1“的意思是每次执行的时候box.x就会增加1,例如一开始box.x=100,运行后box.x就等于101了,也就是方块向右移动了一个坐标。总场景坐标大小可以在主场景的属性内的大小内定义,默认大小为550*400。

  下面,来运行一下这个程序吧,按下键盘上的“Ctrl”键加上回车键,软件就会自动将影片导出成Flash动画:

  

 

  可以看到这个动画中的方块会向右移动。

  这就是用代码驱动的Flash动画的大概制作过程,当然除了位置可以由程序控制,大小,旋转,颜色等等都可以由程序来控制,我们只需要将物体如何动作的代码写在每一帧的代码内,也就是function onEnterFrame(event:Event):void { ..........}这个大括号内。

  下面我们来做一个匀加速直线运动的动画:

  对于从零开始匀加速直线运动,每相等时间间隔的位移之比为1:3:5:(2n-1),所以可以令box.x的值按照这个方式增加,不过首先需要先设置一个变量来记录n的值,变量的定义方式" var n:Number=1;",这样就定义了一个Number类型(数字类型)的变量,名字为n,初始值为1。下面为具体代码:

  ***************下面为程序***************

  var n:Number=1;

  addEventListener(Event.ENTER_FRAME, onEnterFrame);

  function onEnterFrame(event:Event):void {

  box.x+=n;

  n+=2;

  }

  ***************上面为程序***************

  第一次box.x会增加1,也就是向右移动了1,第二次就会增加3......这样方块就会向右做匀加速直线运动了,运行程序后会看到,方块很快的滑出了右边。

  好了,这一节就讲到这里吧,关于使用代码来驱动Flash大家可以百度各种教程来学习,现在使用的语言是ActionScript3.0。

  不过有个坏消息得提早告诉大家,原来制作的Flash动画不仅可以在计算机上播放,而且还可以放到网络上播放,甚至在手机上播放,也就是说我们使用Flash制作的DIS实验的软件可以直接用浏览器远程访问,或者用手机访问。很可惜,随着Html5技术的逐渐成熟,以及Flash动画在安全性方面的弊端,很多浏览器开始不再支持Flash,特别是苹果的手机早就停止支持Flash了,最近安卓手机也开始停止支持了......在网络上,Flash将逐渐被淘汰。不过由于这里我们仅仅用它来制作DIS实验的软件,那倒不存在短期内淘汰的问题。当然,后期我也会推出使用Html5技术制作的网页来作为DIS实验的软件的教程。

  下篇预告

  在下篇中,我们要学习如何让Flash动画来接收来自无线位移传感器的数据,并且用动画的形式呈现出来。

上一篇:测量土壤湿度传感器的模拟值

下一篇:可雅学苑项目之: 分子生物传感器设计