[WireFusion] 【转】基础教程之按钮交互制作

[复制链接]

晃晃

1023 主题	3 听众	359 积分

设计实习生

Rank: 2

纳金币: 335582
精华: 0

电梯直达

楼主

发表于 2011-8-8 08:48:59 |只看该作者 |倒序浏览

一、WireFusion 基础教程之按钮制作，首先我们需要准备一下的素材；

1、

交互按钮的初始和鼠标按下两种状态图片，共计8张，复位按钮初始状态和按钮按下两种状态图片共计2张。

2、

一个用于交互的三维数据对象，此处我们使用Max自带茶壶（本节教程重在表现功能，所以就不提供复杂的模型了）这个茶壶模型我们在max里已经预定义了一个摄像机camera01用以做复位的默认相机。

3、打包下载

4、查看效果Demo

二、WireFusion中设置按钮控制交互

1、打开WireFusion 添加设置场景的属性 Project>properties;设置参数如下图；

2、添加一个三维对象；Objects>3D>3D Scene 或者你也可以通过右侧的库里面直接拖拽3D Scene到场景内，还可以通过在场景内右键选择3D Scene等多种方式，如图

3、对3D Scene的一些基本设置如图；

4、添加一个Image对象作为三维场景的背景图，Objects>Multimedia>Image 在层级面板（Layers）下把Image层级拖拽到3D Scene下层做为背景层存在。如图；

5、添加一个向上的交互按钮，Objects>Widgets>Button; 勾选Advanced Mode，在Up选项下选择Change Graphics 选择up1.png图片在Down选项下勾选Enable 选项，选择Change Graphics 选择up2.png作为鼠标按下状态图片选择Ok按钮设置完毕，调整按钮的位置与背景层上的对应按钮位置重合，其他三个方向上的按钮以及复位（reset）按钮做法相同，请一一完成。

6、对按钮进行命名，一次是

“up”“down”“left”“right”“reset”把五个按钮的Repeat rate参数设置成50或其他的数值，用来调节点击控制三维对象的速度。

7、设置按钮与3D Scene之间的通信链接，

l

“Up”>Out-ports>Button Cliched

到 “3D Scene 1”>In-ports>Navigation>Rotate> －X

l

“down”>Out-ports>Button Cliched

到 “3D Scene 1”>In-ports>Navigation>Rotate> X

l

“left”>Out-ports>Button Cliched

到 “3D Scene 1”>In-ports>Navigation>Rotate> －Y

l

“right”>Out-ports>Button Cliched

到 “3D Scene 1”>In-ports>Navigation>Rotate> Y

l

“reset”>Out-ports>Button Cliched

到 “3D Scene 1”>In-ports>Camera>Set Camera01

8、到这里一个基本的按钮交互控制WireFusion三维对象的教程就介绍到这，其他的更多内容，操作方式和原理一样，只要对应不同的接口事件就可以实现对应的鼠标交互效果。