动态面板应用（一）

一、显示/隐藏/切换
1）制作网站原型时，对于按钮的切换，鼠标移入、移出或点击后显示不同效果的形式、屡见不鲜。这种效果制作起来非常简单。
2）从元件库拖拽两个矩形元件，分别命名“A”“B”。
2. 将 A 和 B 重叠放在一起。
选择 A 元件，添加命令——鼠标单击时——显示 / 隐藏——勾选 A——隐藏 A——勾选 B——显示 B。

3.选择 B 元件，添加命令——鼠标单击时——显示 / 隐藏——勾选 B——隐藏 B——勾选 A——显示 A。

4.预览后即可点击 A 切换至 B，点击 B 切换至 A。也可拓展至，A 按钮控制 B 按钮的显示 / 隐藏。

二、尺寸
1）在 WEB 交互中，鼠标移入移出，模块发生尺寸等变化，我们可以利用用例编辑窗口中的设置尺寸方法进行制作。

1. 从元件库拖拽矩形元件，选择矩形元件，可以看到其左上角出现黄色倒立三角形，鼠标长按滑动三角形，将其调整为圆角最大的矩形（圆形）。

2. 选择调整好矩形后，双击鼠标移入时，打开用例编辑窗口，选择设置尺寸——勾选矩形——将宽度设置为 300，高度不变，锚点左上角，动画线性 / 弹跳。

3. 预览后，鼠标移入时，圆角矩形宽度会增加到 300。

4. 接着开始制作鼠标移出时的效果，双击鼠标移出时，打开用例编辑窗口，选择设置尺寸——
   勾选矩形——宽高不变——锚点不变——动画线性 / 弹跳。
5. 预览后，鼠标移出时，圆角矩形会还原到初始状态。
   注意：此处我们可以利用该方法，做出多种效果，也可使用鼠标单击时等命令进行设置。

三、用动态面板制作页面的切换
1）在移动端 APP 界面中，经常可看到标签式导航，切换页面的效果，这种效果出现的频率非常高，但制作方法很简单。

1. 在页面中拖拽出 3 个矩形，分别命名页面 1、页面 2、页面 3，再拖拽出 3 个占位符，分别命名按钮 1、按钮 2、按钮 3。

2. 将页面 1/2/3，重叠摆放，并把按钮对齐与页面。

3. 选择页面 1、右键将其转换为动态面板。

4. 此时概要：页面将如下，可以看到页面 1，已经出现在动态面板状态 1 内，只需将页面 2置入状态 2，页面 3 置入状态 3。

5. 鼠标选择动态面板，在其右侧点击加号，添加状态。

6. 选择页面 2，剪切后，双击进入状态 2，粘贴于舞台坐标 0.0 点位置。
7. 选择页面 3，剪切后，双击进入状态 3，粘贴于舞台坐标 0.0 点位置。

. 回到 index 页面，选择按钮 1，鼠标单击时——设置动态面板状态——勾选动态面板——选择状态 1——动画都设置为无。

9. 选择按钮 2，鼠标单击时——设置动态面板状态——勾选动态面板——选择状态 2——动画
都设置为无。
10. 选择按钮 3，鼠标单击时——设置动态面板状态——勾选动态面板——选择状态 3——动
画都设置为无。
预览时，即可分别点击按钮 1 切换至页面 1，点击按钮 2 切换至页面 2，点击按钮 3 切换至
页面 3。