成为VIP
一、界面布局
1、水平滑杆
（1）添加一个灰色无边矩形，长宽为300*45，调整圆角为28
（2）添加个圆形拖动完成上方拼图，调整大小为54*54，放置到矩形左侧，选中，右键转换为动态面板，命名为button
完成后的效果图如下：
2、图片部分
我们使用一个矩形框代替图片，使用多个形状的合并与去除来生成拼图
（1）在水平滑杆上方添加一个灰色矩形，大小为330*170
（2）添加一个矩形50*50，两个圆形20*20
（3）选择正方形和其中一个圆形，在右侧的样式里选择合并操作
（4）继续选择合并后的图片，再选择另外一个小圆形，在右侧的样式里选择去除操作
完成后的图形如下，用它作为拼图：
（5）选择这个拼图，命名为src，复制/粘贴一份，命名为dest，作为目标拼图，将src顺序设置为最顶层，这样移动过去时可以覆盖dest，为了模拟缺失效果，设置它的有内阴影效果：
（6）移动两个拼图到指定位置
将第一个拼图移动到和滑杆上的圆形按钮起始位置一致的地方拖动完成上方拼图，第二个拼图保持和第一个拼图的高度位置一致即可，将两个拼图和矩形选中，转成动态面板，命名为image，右键设置为隐藏。
添加个文本标签，命名为tips，显示当前拖动状态。
现在的界面布局如下：
二、事件处理
1、鼠标移入移出事件
鼠标经过圆形按钮时显示上方动态面板image，鼠标移出时隐藏image：
2、添加拖动事件
拖动按钮时，只沿水平方向移动按钮，并限制移动的边界：
(1)选中圆形按钮动态面板
(2)添加拖动时事件
(3)添加移动动作
(4)选择当前元件（圆形按钮动态面板）
(5)移动方式为“水平拖动”
(6)添加边界限制，左侧>=20，右侧
限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
htebazile
