从交互设计到硬件创业 Interaction Design & Hardware Startup
January 31st, 2008

艺术系的互动入门-11-Flash实例:吹个球-D:代码详解

吹球可真是一个简陋的范例呐。

虽然用传感器,Flash做创作没用多高超的互动技术,但想想看技术也不是决定作品成功与否的关键因素。写实派画家和抽象派画家就没有比较的意义嘛(其实可以比比收入)。而用不同的传感器可以搞出很多花样:用红外传感实现定点跟踪,使用超声波测量距离,压力传感器感受力度等等。有了它们做形式上的辅助技术再差也不怕了。

接下来要对Flash范例中的代码做做说明,看看运作原理,再动动手尝试。理论而言这一节需要基础的Flash绘画和代码写作经验,如果没有也OK。因为这里有两种弥补办法:1,请查看在前几节里推荐的那套又有趣又简单的台湾Flash教程。2,请身边的Flash使用者帮忙写代码完成(这些代码即使是Flash初学者也会觉得毫无挑战性)。

————————————————————————————————————————–
本节范例下载: arduinoVSflash_1.fla(使用Flash 8.0或更高版本打开)

代码详解
下载文件后用Flash 8.0或更高版本打开,在菜单栏中依次选择”窗口”,”动作”调出显示代码的窗口。鼠标点选code图层后代码出现。
这一陀代码中只需要注意中文标注的地方,如下:

//实例演示开始—————————————————-
//以下为两个实例,1为改变ball的透明度,2为改变ball的大小
_global.ArduinoInt = data;
//首先把从arduino传来的数据赋予ArduinoInt

ball._alpha = ArduinoInt;
//1,改变ball的透明度。它的透明度由ArduinoInt的数值大小决定。

ball._xscale = ball._yscale=_global.ArduinoInt;
//2,改变ball的大小。它的大小由ArduinoInt的数值大小决定。
//实例演示结束—————————————————-

看到在一大陀代码中需要关注的只有短短3行是不是大舒一口气?更开心的在下面,我们来一行一行解释.

第1行:
_global.ArduinoInt = data;
传感器的作用就是采集环境变化转化成我们需要的数值,也就是本行里的data。超声波传感器传来的远近是data,湿度传感器感受到的湿度变化也是data,所有传感器送过来的都是data,而我们的互动正是由data开始。

第2行:
ball._alpha = ArduinoInt;
读过初中英语就能看懂上面的单词,ball就是球了,视觉窗口上黑糊糊的那个;alpha是透明;ArduinoInt就是数据data。
结合在一起读读看:“球透明等于数值”。是不是很不通顺?动用情商理顺语句后就是:“球的透明度等于传感器的数值”。通了。
也就是说,在你用手捏湿度传感器时,手上的湿度越高,传感器采集的数值越高,球的透明度数值就越高。如果希望透明度不要改变的太快,可以这么写代码:
ball._alpha = ArduinoInt/2;
ArduinoInt变成了ArduinoInt/2,即是说数值减半,想要获得之前的透明度就要让自己变的更加湿润才行。。。。

第3行:
ball._xscale = ball._yscale=_global.ArduinoInt;
ball当然还是球;scale是管拉伸缩小的;合在一起读:“小球x方向的拉伸范围与y方向的拉伸范围都由传感器的数值决定”。在初中数学课上我们就学过,x代表横向y代表竖向。是不是又通了?
试试看把代码改写成以下是什么效果:
ball._xscale = ball._yscale=_global.ArduinoInt/2;

第4行:
ball._x= ball._y=_global.ArduinoInt;
完成上面的3行学习就有奖励,把这行特别赠送的代码复制进去看看效果吧。

把声音和更丰富的动画与传感器数值结合起来的例子?
看你的了,,,

—————————————————————————————————————————

了解了Arduino与Flash的沟通方法后,接下来要做的就是开学Flash动画制作和Flash代码(Action Script)编写,掌握了它们才能让灵感变为作品,在初学互动的此时不必计较更高级的技术,请多多发挥更加珍贵的灵感吧。

“Flash实例:吹个球的讲解”也到此结束,文章不通顺的地方要靠大家留言指出了,谢谢~

^_^

湿度传感器+Arduino+Flash+水

by Whale | Posted in Arduino | 2 Comments » |
January 28th, 2008

艺术系的互动入门-10-Flash实例:吹个球-C:互动开始

湿度传感器+Arduino+Flash+吹气

一直在看教学的C小姐按照章节A指示接好电路插上电脑;用章节B写的方法配置Arduino和Flash通讯用的鹊桥,把从章节B下载来的Flash文件打开,互动开始喽。
咦,没反应,,,苦恼的C小姐看着章节A检查电路是不是没有接对,还换了新的传感器,一切照旧。难道是鹊桥问题?原来在配置Serial Server时把RXTXcomm.jar和rxtxSerial.dll放错了位置。
但是纠正完毕后Flash依然巍然不动,人品出了问题吗?

nonono,此次失败的责任全在我,经常写着写着就跑神的半吊子作者。

其实Arduino这台小小的裸体电脑主机,一直在安安静静的等着我们告诉它:你好啊,可爱的Arduino,请从标有0的模拟输入端口读取传感器数据好吗,再把它发给Flash,我们需要用这个数字做互动,谢谢。

那么就请把下面的代码复制到Arduino烧写程序中上传给Arduino吧:

int firstSensor = 0;
void setup()
{
Serial.begin(9600);
}
void loop()
{
firstSensor = analogRead(0)/4;
delay(10);
Serial.print(firstSensor, DEC);
Serial.print(0, BYTE);
delay (50);
}

看不懂没有关系的,知道这些代码是在帮助我们和Arduino做沟通就好。

上传完毕再打开Flash还是有问题需要解决。
事实上当你第一次打开下载来的那个Flash时就会有一个弹出窗口请你进行安全设置,点击“设置(S)”后弹出安全设置网页。看图先:

点击“设置(S)”后弹出安全设置网页,依次点击A进入安全设置页面,勾选B处的始终信任,点击C处开始编辑位置,如果你的Flash文件在D盘,就选中整个D盘。当D处出现了你的硬盘盘符后设置完毕,此时可以关闭网页喽。

现在关闭刚刚打开的Flash文件,再打开,世界应该恢复了原貌,Flash中会有一个黑色球随传感器的数值变化而变大变小。互动成功。

这就是互动??吹个球就是互动?天呐!这是哪门子江湖医生教的互动啊。

by Whale | Posted in Arduino | 1 Comment » |
January 25th, 2008

艺术系的互动入门-9-Flash实例:吹个球-B:Arduino与Flash通讯程序

搞定硬件之后本节开讲Arduino与Flash通讯程序Serial Server和Tinkerproxy的使用方法。
如果Arduino是牛郎,Flash是织女,那么Serial Server或者Tinkerproxy就是鹊桥;接下来就开始搭建鹊桥帮助牛郎织女相会的拉皮条之旅。
理论上使用Serial Server或者Tinkerproxy任一程序就能让Arduino与Flash完成通讯,但它们在不同操作系统下表现不一,为了兼顾Windows和Mac用户就介绍两个喽。

Serial Server配置
Dan O’SullivanSerial Server程序需要运行在JAVA环境,所以无论Windows或Mac,都要先构建JAVA运行环境(JRE)。

Windows XP

    1,下载并安装JAVA运行环境(JRE)。听起来很复杂,实际上只用下载程序后点击安装。
    点击下载JRE
    2,下载Serial Server程序压缩包并解压,其中的ss6.jar就是Serial Server应用程序,暂不可用。
    >>点击下载Serial Server.zip
    3,在解压后的文件夹里依次点击进入serialserver/rxtx_drivers/Windows/,可以看到RXTXcomm.jar和rxtxSerial.dll文件。
    a,把RXTXcomm.jar放入C:\Program Files\Java\j2re1.4.2_04\lib\ext
    b,把rxtxSerial.dll放入C:\Program Files\Java\j2re1.4.2_04\bin
    4,点击运行ss6.jar。修改Socket左方数字为9001,修改Serial为你的Arduino对应COM端口,修改OK右方数字为9600。如图:

怎么才知道Arduino对应COM端口是哪一个呢?先连接Arduino到电脑,然后在“我的电脑”图标上点击鼠标右键,在弹出菜单里选择“属性”-“硬件”-“设备管理器”-“端口(COM和LPT)”,其中的“USB Serial Port()”括号中的就是对应端口。
现在配置完毕,打开对应的Flash就可以开始通信喽(在文章结尾处提供)。

Mac OS X

    1,Mac系统通常自带JAVA程序无需下载。
    2,与Windows XP下相同。
    3,在解压后的文件夹里依次点击进入serialserver/rxtx_drivers/mac/,可以看到librxtxSerial.jnilib和RXTXcomm.jar文件。把它们全部放入/Library/Java/Extensions/
    4,点击运行ss6.jar。修改Socket左方数字为9001,Serial为你的Arduino对应COM端口,OK右方数字为9600。
    怎么才知道Arduino对应COM端口是哪一个呢?在连接Arduino到电脑后运行ss6.jar,Serial右边下拉框出现的第一个就是,名字格式大概为/dev/tty.usbserial-A4001bKo之类,不尽相同。如图:

现在配置完毕,打开对应的Flash就可以开始通信喽(在文章结尾处提供)。
怎么?在Mac里不能通信?瞧瞧图里Serial的下面显示为Bad,看来这个程序在Mac系统中又出了状况。我们可以用另外一个程序Tinkerproxy做替补。
—————————————————————————————————————————-
Tinkerproxy
虽然Tinkerproxy在Mac平台中表现完美,但Tinkerproxy的Windows版本在有些电脑上会有数据传输延迟问题,在作者要求下还是两个版本都做介绍,说不定你就刚好适合用它。^_^

Windows

    1,点击下载tinkerproxy.zip for Win
    2,连接Arduino到电脑,解压tinkerproxy.zip后打开程序(不要删除文件夹中的MFC71.dll),修改Network Port为9001,Serial Port为你的Arduino对应端口,Speed为9600,点击Start开始运行程序,此时如果勾选Debug选项,信息框中将连续显示数值。如图:

Mac OS X

    1,点击下载Tinkerproxy for Mac
    2,连接Arduino到电脑,解压Tinkerproxy.zip后打开程序,修改Network Port为9001,Serial Port为你的Arduino对应端口,Speed为9600,点击Start开始运行程序。如图:


—————————————————————————————————————————
小小的尝试
Try before buy,通过A,B两小节你完成了对软硬件的配置。下面的Flash文件可以帮忙做成果测试:Flash文件的详细讲解下一节开始。
SensorTest0.1.swf

下载之后你会遇到一个简单的Flash文件安全设置问题,试试自己解决,当然下一节也会对它做讲解。
(*^__^*)

by Whale | Posted in Arduino | 3 Comments » |













Powered by Wordpress using the theme bbv1