▶ 1.1 动态面板简介

       把动态面板放到画布中，看上去它是一个半透明的形状。但是，如果在浏览器中查看原型，是看不到动态面板的存在的。也就是说，动态面板本身是个透明的元件（如下图）。

      接下来，介绍动态面板的结构和特点。
      对于一个陌生的元件，可以双击试试看。双击动态面板，弹出一个窗口，这个窗口的标题是“面板状态管理”。可以单击【+】按钮，添加新的状态。也可以单击上下箭头按钮，调整状态的顺序。还可以选中一个状态，然后单击【复制】按钮，复制一个状态。还有【删除】按钮，可以删除状态（如下图）。

      但是，状态又是什么呢？如果要做一个比喻的话，可以将动态面板想象成幻灯片的放映机。而状态就是幻灯片。幻灯片里面可以放置内容，状态也一样可以编辑。可以单击编辑状态的按钮，或者直接双击某个状态的名称，打开状态的编辑界面。状态的编辑区域和页面的编辑区域一样，可以放置各种各样的元件，组成内容（如下图）。

    动态面板的样式设置中，可以单独为各个状态设置背景颜色或图片（如下图）。

▶ 1.2 动态面板特性——循环 

案例——使用循环实现图片轮播

步骤1 把一个图片元件放到画布中，双击图片元件导入第一张宣传图片。

步骤2 在图片上单击鼠标右键，在弹出的快捷菜单中选择【转换为动态面板】命令。

步骤3 双击动态面板，在弹出的编辑界面中将动态面板命名为“ImagePanel”，然后选中第一个状态，将其复制5 次。

步骤4 修改状态“State2~State6”的图片为其他几张宣传图片。比较快捷的方法是双击两次概要中相应的图片，即可进行导入。

步骤5 页面打开时，图片就会自动循环切换播放，切换时为渐变效果，所以，为动态面板“ImagePanel”添加【载入时】的用例，设置动作为【设置面板状态】，勾选“当前元件”或“ImagePanel”，{ 选择状态} 为【Next】；勾选【向后循环】和【循环间隔】复选框，设置间隔时间为“3000”毫秒；勾选【首个状态延时3000毫秒后切换】复选框；{进入动画}选择【逐渐】，{ 时间} 为“500”毫秒；{ 退出动画} 也选择【逐渐】，{ 时间} 为“500”毫秒。用例动作如图所示。

交互事件如图所示。

▶ 1.3 动态面板特性——适应宽度

案例——横向铺满屏幕的背景条

步骤1 放入一个动态面板到画布中；在动态面板的样式设置中，设置动态面板的高度为背景图片的原始高度“160”；然后，为状态“State1”【导入】背景图片，设置图片【填充】动态面板的状态。

步骤2 勾选动态面板属性中的【100%宽度】复选框。

▶ 1.4 动态面板特性——相对固定

案例——导航菜单顶部固定的效果

步骤1 放入两个图片元件，分别双击并导入代替导航菜单与页面内容的图片，将它们摆放在合适的位置（图10-55）。

步骤2 在代替导航菜单内容的图片上方单击鼠标右键，在弹出的快捷菜单中选择【转换为动态面板】命令。

步骤3 在动态面板属性中单击【固定到浏览器】，在弹出的对话框中勾选【固定到浏览器窗口】复选框，{ 水平固定} 选择【居中】，{垂直固定} 选择【上】。

更多内容：http://www.ui.cn/detail/257312.html