5.2　手机触屏交互设计

手机触屏交互的过程是通过UI界面驱动三维模型动画，手机模型的按键也支持手机交互的功能，通过两者的配合实现虚拟展示的过程。对于手机的材质，调整可以通过VRP软件中的金属/烤漆类型来实现，界面贴图和按钮图标的制作可以利用Photoshop软件进行编辑。同时，运用数字图像、数字音频、数字视频和数字动画动画技术相结合的手法，实现手机触屏体验艺术的交互设计，从而表达隔空成像的设计理念。

5.2.1　手机模型材质设计

（1）手机外壳材质设计　选择场景中的手机主体模型，在材质类型中选择Fx shader，选择材质为金属/烤漆，参数设置采用默认设置（图5-11），这样手机外壳模型在场景中就会有微弱的发射效果。

（2）地面反射材质设计　为了能够在地面上映射出手机模型的倒影，可以采用高级反射的材质类型来制作。为了实现其反射效果，首先选择场景中的所有物体，在物体编组中创建一个反射组（图5-12），在材质类型中选择Fx shader材质，然后在一般属性中选择高级反射（图5-13），切换到反射选项中，将刚才命名好的物体组添加到反射组中，并设置一定的模糊等级和深度因子（图5-14），这时手机在地面的反射就会有一定的衰减效果。

（3）手机按钮材质设计　对于功能键、锁屏键和音量键的材质设置，在材质属性中的动态光照卷展栏中，启用动态光照效果，可以增加按钮的立体视觉效果（图5-15），然后再适当调节画面的色彩和其他相关属性，直到感觉画面的整体感比较和谐为止（图5-16）

5.2.2　手机UI交互界面设计

（1）二维控件的创建　在高级界面的控件中，利用静态图片和图片按钮工具，分别在场景中创建相应的交互控件，分别设置UI底纹2个、功能按钮6个、音量控制按钮3个、弹出菜单4个（图5-17），后期的声音和视频在脚本中添加，因此不需要创建Flash控件。

（2）环形功能按键UI设计　6个功能按钮分别对应phone、message、music、video、images和internet。在控件属性的贴图设置中，分别选择对应的普通状态、鼠标经过和按下状态的贴图（图5-18），其中鼠标经过的状态设置为红色并比初始图标略大一些，以起到提示和警示的作用，按下状态设置为灰色，跟原始图像尺寸相等。

（3）底纹、音量与弹出菜单UI设计　利用静态图片，首先将设计好的底纹和描边效果加载到场景中，然后在图片按钮中将音量图标也加载进来，最后把弹出菜单的功能选项也按照相同的操作加载进来（图5-19），此时UI界面设计已经基本完成，在视图中可以调节其位置到合适的状态（图5-20）。

5.2.3　手机动画与脚本设计

（1）6个功能按钮脚本设计　为了实现二维面板中的交互功能，对于4个弹出菜单应该在场景初始化运用的时候隐藏，只有点击相应的图标按钮时才会弹出来，然后点击一下对应的弹出菜单，会在场景中消失，按照这个思路和逻辑顺序，就可以进行后期的脚本设计了。首先在控件面板中，将4个弹出菜单隐藏，然后在phone控件属性的脚本中添加鼠标单击事件：设置控件参数，拨号，0，1；在message控件属性的脚本中添加鼠标单击事件：设置控件参数，短信，0，1；在images控件属性的脚本中添加鼠标单击事件：设置控件参数，图片，0，1；在internet控件属性的脚本中添加鼠标单击事件：设置控件参数，网络，0，1。对应的弹出菜单为了能够实现鼠标点击即可隐藏的效果，可在设置控件参数中，将对象的显示与隐藏值改为0，其他参数保持跟对应按钮的脚本设置一致。在music鼠标单击事件中添加播放音乐的路径：播放音乐，E:\第5章　手机触屏体验艺术交互设计\源文件\谁主沉浮 - ost较完美版.mp3，0，1，0，在video鼠标单击事件中，利用悬浮窗口控制视频的播放（图5-21），具体脚本设计如下（图5-22）：

创建悬浮窗口，bad apple，0/0/528/352，1

设置悬浮窗口内容，badapple，E:\第5章　手机触屏体验艺术交互设计\源文件\bad apple.swf

设置悬浮窗口边框，bad apple，1

显示悬浮窗口，bad apple，1

按F5运行测试，按下视频按钮会在窗口左上角弹出视频播放窗口（图5-23），并可以自由调整其位置。其他功能的设计也可以通过按下对应的按钮测试脚本的设计是否正确。通过以上的操作设置，功能按钮的脚本设计就制作完成了。

（2）音量控制脚本设计　此设计中要实现点击音量+按钮，场景中的音量会慢慢递增，点击音量−按钮，场景中的音量会慢慢递减，点击音量×按钮，场景中的音量会变为静音，同时可以关闭视频播放窗口，按照这个设计思路和方法，对于音量递增和递减，可以利用变量的脚本来实现，在初始化函数中进行如下设置（图5-24）：

定义变量，音量，

变量赋值，音量，50

在音量+（图5-25）和音量−（图5-26）的鼠标单击事件中添加变量递增的脚本，并把音量实时变化的值保存在定义的变量名称中。实时保存的方法是在变量的名称前加“$”符号，这样运行场景打开音乐，按下音量按钮，音量就会相应地增强和减弱了。

音量×脚本设计要实现的效果是点击该按钮场景静音，并关掉视频播放窗口，因此可以在脚本设计中设置停止所有音乐和删除悬浮窗口的脚本（图5-27）。

（3）按钮注释设计　为了实现在场景交互过程中的按钮的功能提示，可在物体的对应属性中设置注释，这样在运行窗口中，当鼠标经过相应的图片按钮，会弹出相应的操作提示，从而让操作者更加轻松地体验交互的过程，例如对于phone的按钮注释，可以设置其标题为点击拨打电话（图5-28），其他按钮的注释可以根据功能自由命名。若在运行场景的时候，发现模型周围有绿色的提示框，可以在初始化函数中对鼠标触发框进行脚本设置：显示/隐藏鼠标触发框，0。

（4）三维模型脚本设计　为了实现隔空成像的动画效果，接下来需要制作场景动画的交互设计。切换到创建对象的天空盒面板，在左侧天空盒列表中选择一个蓝灰渐变，然后切换到三维模型面板，开始制作进入到手机界面的过程，首先需要制作通过点击开机键和唤醒键进入到手机屏幕的首页，然后再进入到功能菜单进行交互设计，因此模拟打开屏幕的操作设置可以运用物体的显示与隐藏脚本，以控制待机屏幕的开启（图5-29），模拟关闭屏幕的操作跟待机屏幕的脚本正好相反，按照这个思路制作即可实现其效果（图5-30）。

为了能够实现单击主屏按钮，进入到二级菜单的目录下，同时6个功能模型会在界面中显示，可以在控件中通过添加“显示与隐藏物体”的脚本来显示（图5-31）。

2个声音按键的脚本设计，可以直接把二维面板中的脚本直接复制过来，这样在模型中点击音量+和音量−按钮，同样可以实现音量的递增和递减。

（5）三维场景动画设计　为了实现场景的良好交互功能，首先在模型面板将三维模型的6个交互按钮设置为隐藏状态，以phone模型为例，在动作面板中的鼠标事件中，为左键按下事件添加“播放刚体動画”命令（图5-32），在模型物体的脚本添加反向动画播放命令（图5-33），同理其他模型也分别在对应的鼠标单击事件中，添加对应的刚体动画播放命令，设置完成就可以实现隔空成像的动画展示效果了。为了丰富动画效果，还可以配合时间轴做出更加丰富的动画效果，只要有足够的想象力和创造力，一切创意皆有可能实现。

5.2.4　编译与输出

按键盘上的F4，打开项目设置对话框，在启动窗口中设置启动窗口的标题文字和介绍图片（图5-34）；在运行窗口设置标题文字，窗口大小改为全屏（图5-35）。在文件菜单中点击“编译独立执行Exe”文件命令，设置输出路径，点击编译按钮，弹出脚本资源收集对话框，全部选择单击确定，等待一段时间程序编译完成后，单击“测试”按钮弹出运行界面（图5-36），点击运行就可以测试程序最终编译的效果，此时便可以体验手机触屏隔空成像的三维动画。