创建翻转效果

了解如何使用“鼠标悬停”效果创建多个状态。我们通过将图像补丁转换为点热点来做到这一点。

此鼠标悬停效果使用色片来创建场景的多个状态。

在我们的示例中，我们展示了一个门关闭的场景，当鼠标滚动到这些门上时，它们会显示门打开的图像。为此，我们创建了 2 个版本的全景图，并仅使用应该更改的全景图部分。在我们的例子中，门。这样，你就不需要使用多个节点来创建这种效果，从而保持项目的亮度。

有多种方法可以创建悬停效果。这里解释的方式是使用外部图像加载器 ，这是在移动设备上查看的良好解决方案，尤其是在有多个翻转图像的情况下。这样，它们只在需要时加载，从而防止移动浏览器崩溃。

使用项目文件查看最终项目的外观，或继续作。

1. 创建鼠标悬停效果

1. 拍摄一个场景的两张全景图。例如，一个门打开 （Garden_roll），另一个门关闭 （Garden_up）。其中一张图像将用作供体以提取交互性区域。
2. 将它们都添加到 Pano2VR。确定哪张图像将成为主场景，以及从哪张图像中提取。我们的示例将使用门关闭的全景图作为主场景，我们将从另一个全景图中提取打开的门。
   

   

   

3. 选择要从中提取的节点（供体全景图）。我们正在使用 Doors Open。
4. 在检视器中打开 Patch。在要提取的区域上添加一个补丁。使贴片比要提取的区域大一点。
   

   

5. 对于补丁的图像格式，请选择 PNG，因为这是一种 Web 友好格式。
6. 打开列表视图 。右键单击修补程序，然后选择复制 。
7. 选择起始场景（门关闭）并将补丁粘贴到此全景图的列表视图中。在列表视图中单击鼠标右键，然后选择 “粘贴 ”。
8. 从导览浏览器中删除打开的门场景，因为不再需要它。
9. 选择 Patch，然后在 Patch 设置中，选择 Point Hotspot for Convert。这就是我们创建交互性的方式。
   

   

   ★ 提示： 在查看器的上下文菜单中，选择 “重新加载图像 ”，这会删除修补程序。但是当您选择热点时，它会再次显示。

10. 添加 Web 输出并生成输出。现在敞开的大门将显现出来。但我们仍然必须让它具有互动性。

2. 添加交互性

1. 在“皮肤编辑器”中，添加“热点模板”。
2. 单击热点模板参数中的添加自定义图像元素 。这是将显示点热点图像的内容，并作为热点模板的子项添加。
   

   

3. 将 Alpha 设置为 .01。0 将隐藏且处于非活动状态， 而 .01 仍不可见但处于活动状态。
4. 添加逻辑块。触发→鼠标悬停;比较 → = ;值→ true;阿尔法→ 1.启用到 5 秒的过渡。
5. 选择手形光标。
6. 保存皮肤。

3. 混合贴片

就像现在的项目一样，补丁接缝是可见的。这可以在您的图像编辑工具中修复。在编辑器中打开补丁图像，然后添加图层蒙版并对边缘进行羽化蒙版。保存图像，它将在 Pano2VR 中更新。

4. 保持门开着

目前，当鼠标进入时，门会打开，当鼠标离开时，门会关闭。但是，例如，您可能希望保持门打开并添加游览节点以进入内部。

1. 删除在第 2 部分中添加到外部图像加载器元素的 Alpha 逻辑块。
2. 添加作。源 = 鼠标单击;动作 = 阿尔法;类型 = 切换元素 alpha;Alpha = 1，过渡时间 = .5。
3. 保存输出。

5. 添加打开和关闭门的按钮

1. 添加文本框。给它一些文本，比如“ 全部打开”。
2. 添加变量。vis_image;键入→ true/false;初始化值→ false。
3. 将 alpha 逻辑块添加到外部图像加载器。触发→ vis_image;比较→=;值→ true;阿尔法→ 1.启用转换→.5。
4. 向文本框添加作。源 = 鼠标点击;action = 设置变量值;vis_image;⌐ 不是。

另请参阅...

• 网络研讨会：利用热点做更多事情

• 皮肤编辑器

• 添加补丁