axure如何取消动态面板

大家好，欢迎来到我的 x 交互分享频道，上一期介绍了动态面板的各项属性，接下来我就用动态面板来制作一个简单的轮播图效果。首先还是创建一个动态面板，命名为轮播图，然后双击动态面板 见几个状态。这边建议还是把状态的名称重新命名一下，然后选中第一个状态，也就是第一张，在画布里面放入第一张图片，然后在第二张、第三张 以至于第二张都放入你想用的图片，然后就关闭动态面板的编辑页面，我这里就用按钮的点击事件为案例，用按钮的点击事件来触发轮播图的轮播效果。选中按钮，点按钮创建一个点击事件，这里选择设置动态面板，状态选。 在交互设置页面中选择轮播图这个动态面板，把状态选项中的默认选项改为选择 next。 选择 next 后，这里会出现一个选项，意思就是是否要重复轮播。下面的交互动画选项就根据自己的需要进行调整， 这里的选项是每一页停留多少秒，以及首次播放时第一页是否需要延迟相同的时间。这里把两个选项都需要都选上，点击确认后，轮播图的效果就完成了。当然这是最简单的版本， 不过现在的轮播图都会有这种定位按钮作为高保真原型图，怎么能不去实现呢？哈哈哈，下一期我会讲一下带定位按钮轮播图效果的制作方法，喜欢的家人们可以关注一下哦！这一期的视频就先到这里，我们下期见。

在讲动态面板时候，讲漏了一个知识点，就是这个动态面板里面的状态怎么跟每个页面进行关联起来。比如这个页面，那我要显示首页的状态，科技这个页面就显示科技的状态。我们先进到动态面板里面， 这是每个动态面板里面的状态页面是什么样的？首页是这样，科技这样摄影，那我先把它这个状态扎出，变成红色吧，这样比较明显一点。 好，这个动态面板的颜色已经改好了，科技页面怎么让他显示是科技的状态呢？我们在每个页面点空白处，点空白处你再看这边有个交互，他这里有一个动作，叫做页面载入时，把这个动态面板设 制成相应的动态就可以了。我先删掉吧，先删掉这个，然后再做一遍， 那我点空白处就是这个页面的状态，我再点一下，新建一个交互，他上面往下拉，会看到一个页面，载入时 就打开这个页面，然后执行什么动作。然后我们再点到这个设置面板状态，再看一下，再选到这个动态面板，这状态就选择对应的状态就行了， 其他二级栏目进行相应的设置就行了。再保存预览一下，这样就比较明显了。我点首页，按到首页状态，点这个按到这个状态。好，这就是关于这个动态面板的一些补充。

我们常常需要对动态面板设置滚动条，但是设置的滚动条总是会一直出现，该怎么办？单击动态面板右键，将该动态面板再设置为动态面板。拖 固定面板宽度，双击面板，将里面的动态面板的宽度加宽，以隐藏滚动条。预览。

先看最终效果，可以点击展开和收起教程开始准备五个矩形，打好字，外加两个图标，选中矩形和图标转换为动态面板，剪切下面几个矩形， 双击动态面板，点加号添加 sit。 二，粘贴刚剪切的内容，挪到左上角，开始做交互，双击动态面板，再双击 ct。 一，给绿色举行来个交互双击，鼠标单击时设置面板状态，勾选动态面板， 这里选 ctrl， 再勾选推动元件保存，再改 ctrl， 设置与刚才基本相同 gate。 二，给绿色矩形加，点击交互，设置动态面板状态，选他，再选他，保存复制几个拼接起来。 ok 了，一分钟到了，收工。

好，本节课呢，我们将开始啊动态面板的一个学习，那动态面板呢，是按说中一个比较重要的一个组件，所以说我们本节课呢啊，这个建议学习时长呢是五到十分钟，重要程度呢是三颗星啊，学习难度呢是三颗星。 那么关于动态面板呢，我们一块来看一下本节课的学习内容。首先呢，我们还是把目光啊移到左侧这个位置，我们会发现有动态面板四个字，但是呢我还是什么都看不到啊，说明动态面板呢，他和那个热区啊是同样的，也是一个透明的一个状态。 那么动态面板在实际工作中的使用场景都有哪些呢？啊，我归纳了一下，大致呢是有这种三种场景，场景一呢就是说啊，内容过多啊，一屏展示不完的时候，我们可能会用动态面板呢来做这个，呃，更多内容的 一个显示啊，场景二的是同页面的一个切换产品等啊这样的一个效果啊。场景三呢，就是说啊，会结合动态面板特性的一些特殊用法，如果手风景菜单啊，搬砖切换啊以及拖动效果啊等等。 好，我们来打开。 sorry 一块来看一下动态面板，打开 apple 之后呢，我们发现这个位置呢，这就是一个动态面板啊，他本身也没有特别，就是说啊，特殊的地方啊。 好，然后呢，我们来啊，从每个场景中呢就是来做一种效果，来一块来看一下动态面板的这些特性。嗯， 长江一是内容过多啊，一屏展示不完。好，我们来看一下啊，我们首先呢，我们拖一个句型进来， 拖一个矩形进来，然后我把他的那个啊，我首先把这个视图调一下啊，把这个钥匙工具调出来，好，然后我们这个矩形呢，我给他调一个高度啊，比如说调到二百二百的高度，然后我拖入一个啊 文本的一个空间啊，都好，文本这个时候就是说啊内容当有这么多的话，他刚好就是说把这个呃剧情给填充满，但是当我就是说内容再多一点的时候啊，内容再多一点的时候。 好，我的内容有这么多的时候，我们看一下这个效果会怎么样子呢？我们来看一下，我们发现这个内容就会超出了这个啊巨型的一个 展示范围，那如果我想让这个多出来的文本也展示在剧情内，我应该怎么做呢？啊？这时候呢我就需要用到这个动态面板， 我们找到这个动态面板，他和热区是挨着的，好找到这个动态面板，然后呢我把它的大小呢和这个矩形就是设置的是一样大小。 这时候呢我把这个文本空间呢，我给他康图 x 给他剪切一下，然后呢我鼠标左键双击这个动态面板，然后进入这个动态面板的这个内部，然后这时候我在 ctrlv 把它给复制过来。 大家这时候注意，我需要把这个这里有一个四周有有这个虚线的这个位置，这个是呃代表这个动态面板的这个范围，我们一定要把内容就是放到这个动态面板的这个范围内。好，这时候呢我把这个呃 内容已经放在动态面板的范围内了，然后我们关闭，我们会发现啊在前方显示的时候所有的内容都在这个剧情上啊展示出来的，这时候我们再预览一下，看一下效果。 哎，我们看一下这个下方似乎有文字，但是我们看不到了啊，这是因为啊下方的文字他被遮挡住了，我们想看到的话，我们需要设置一下动态面板的一个啊属性，这里有一个滚动条，我们给他按一个 啊垂直滚动，这时候我们会发现在右侧会多了一个滚动条出来，我们再看一下效果 啊，这时候我们就可以往下拉，就是看到所有的这样一个文本的内容，这就是动态面板，就是说在啊当你的页面内容过多的时候，会起到 这样一个作用。好，然后我们看一下场景二，同页面切换啊，弹屏啊等，这里呢，我们就是呃做一个那个啊同页面切换的效果， 我们还用这个矩形来做啊，我们呢我们就是给他放两个按钮， 两个按钮呢，我们就是随意一点啊，比如说这个叫做啊蓝色，然后这个叫做绿色， 当我点蓝色的时候呢，这个句型他是蓝色啊，当我点绿色的时候呢这个句型他是啊绿色。这时候呢我可以怎么做呢？可能大家都有很多的办法啊，现在呢 我们用动态面板来做的话，应该这样做，首先呢我们右键这个句型呢，嗯，把它给转化成一个动态面板，动态面板，然后我们可以给他命一个名字，比如说命名叫地 好，这时候呢我们双击这个动态面板，我们会发现啊，在这个上方呢是有一个啊动态面板的这个状态这样一个东西，这时候呢我们再给他，他默认的有一个状态，我们再给他添加一个状态，第一个状态呢，我们给他命名为啊蓝色， 然后第二个状态呢，我给他命名为绿色。好，命名完成之后呢，我们 这时候呢单击状态，我们可以进入这个状态的啊，状态面板的一个页面啊，第一个啊状态呢，我们可以给他设置一下他的底色，设置成蓝色， 然后这时候我们可以 ctrl c 一下，然后我们再选中啊这个绿色这个状态，然后我们 ctrl v， 然后我们把它给设置成绿色。 好，设置完成之后，这时候我们来看一下这两个状态，选中蓝色他是蓝色，选中绿色他是绿色。好，这是我们设置完了，设置完了，然后我们来设置一下按钮的一个效果， 当我点击这个蓝色按钮的时候啊，单击的时候呢？怎么样呢？我需要设置面板的状态，因为刚才我们建了两个状态，对吧？一个蓝色的 状态，一个绿色状态。我所以我这里用的这个动作就是设置面板状态。设置面板状态，设置哪一个面板？我们这里有三个面板，我们设置的是什么面板？我刚才命名是 d， 对吧？ d， 然后他的状态是什么呢？状态是哺乳，对吧？蓝色，好。那么 到绿色按钮的话，同样我们单击时，我们设置这个面板状态，然后还是 d， 然后他的那个状态什么呢？绿色，好，确定这时候呢，我们可以预览看一下效果 啊，默认他是蓝色的，对吧？然后我们安静一下啊，他变成绿色，然后再单击 啊，这个就是同页面的一个切换，他主要其实就是用到了啊动态面板状态之间的一个切换，那至于弹屏的话，他主要是用到了动态面板的一个显示隐藏的一个效果啊，这个大家就是啊自己私下里可以去试一下啊。 那么第三个场景呢，是结合动态面板的特性啊的一些特殊用法啊，比如说是首付明太单 啊啊，搬砖切换啊和拖动效果等等。那么本节课呢，我们就啊简单的演示一下拖动效果啊啊，剩下的我们到后面就是说啊，讲动态面板试卷的时候，我们再详细的去讲。 好，我们来首先我们再先拉进来一个东台面板，先拉进来东台面板之后呢，我们给他啊双击，然后进到内部，我们给他放入一个 组件啊，句型组件。好，放入进来之后呢，我们来关闭返回，然后我们给这个登台面板呢，加上这个拖动效果， 我们可以点击交互面板。进入交互面板之后呢，我们会发现啊，这里有一个时间叫做拖动时。好，我们选中一下拖动时怎么样呢？拖动时我们 设置一个移动，移动，移动谁呢？移动这个动态密码，对吧？这个动态密码我给你们先给他命一个名字， 方便去做实践，我的命名叫第一。好，然后我们继续做这个交互效果，选择第一移动什么移动呢？我们给他选择一个，呃，跟随拖动， 就说我拖动的时候呢，这个动态面板是跟随我啊进行这个移动的。好，我们来看一下预览效果， 这时候呢，我们看到有这样一个啊句型，也就是我们在动态面板这个状态中化的句型，然后我们来拖动他试试，我们鼠标左键按着，然后进行拖动，我们会发现我们在拖动的时候呢，这个句型是跟随我们的拖动进行这个移动的啊，这个呢就是 啊动态面板的一个拖动效果好，那本节课呢，我们就啊学到这里，主要是带着大家啊认识了一下动态面板以及动态面板的一个简单属性的一个应用。那么到下节课呢，我们将会啊一块来学习一下啊内联框架的一个使用。

接着上篇轮播效果开始优化，单击上篇作的动态面板，双击绿色的文字区域，增加一个进入动画，我们选向左滑动 保存，再预览一下，有向左滑动的效果，看着好一些了，自动播放 ok 了，开始做手动滑动。回到软件，再次单击动态面板，双击向左拖动，结束时，鼠标点击面板状态，勾选当前原件 状态，选 next， 勾选向后循环和循环间隔手割状态，这个取消勾选动画，选向左滑动，然后保存 复制刚做的向左拖动，交互粘贴到向右拖动，双击粘贴的内容，把 next 改为 previous， 动画改为向右滑动保存，预览拖动。体验一下，下篇继续完善。

好，本节课呢，我们将开始啊动态面板的一个学习，那动态面板呢，是按住中一个比较重要的一个组件，所以说我们本节课呢啊，这个建议学习时长呢是五到十分钟，重要程度呢是三颗星啊，学习难度呢是三颗星。 那么关于动态面板呢，我们一块来看一下本节课的学习内容。首先呢，我们还是把目光啊移到左侧这个位置，我们会发现有动态面板四个字，但是呢我还是什么都看不到啊，说明动态面板呢，他和那个热区啊是同样的，也是一个透明的一个状态。 那么动态面板在实际工作中的使用场景的哪些呢？啊，我归纳了一下，大致呢是有这种三种场景，场景一呢就是说啊，内容过多啊，一瓶展示不完的时候，我们可能会用动态面板呢来做这个，呃，更多内容的一个显示啊，场景二的是同页面的一个切换，弹屏等啊这样的一个效果啊。场景三呢， 就是说啊，会结合动态面板特性的一些特殊用法，如果手风景菜单啊，搬那切换啊以及拖动效果啊等等。好，我们来打开 x 数一块来看一下动态面板， 打开 apple 之后呢，我们发现这个位置呢，这就是一个动态面板啊，它本身也没有特别，就是说啊特殊的地方啊。 好，然后呢我们来，嗯，从每个场景中呢就是来做一种效果，来一块来看一下动态面板的这些特性，嗯，场景一是内容过多啊，音频展示不完。好，我们来看一下啊，我们首先呢我们拖一个句型进来， 拖一个矩形进来，然后我把它的那个啊，我首先把这个视图调一下啊，把这个钥匙工具调出来，好，然后我们 这个句型呢，我给他调一个高度啊，比如说调到二百个二百的高度，然后我拖入一个啊 文本的一个空间啊多行文本，这个时候就是说啊内容，当有这么多的话，他刚好就是说把这个呃句型给填充满，但是当我就是说内容再多一点的时候啊，内容再多一点的时候。 好，我的内容有这么多的时候，我们看一下这个效果会怎么样子呢？我们来看一下， 我发现这个内容就会超出了这个啊句型的一个展示范围，那如果我想让这个多出来的文本也展示在句型内，我应该怎么做呢？啊？这时候呢我就需要用到这个动态面板，我们找到这个动态面板，他和热区是挨着的，好找到这个动态面板，然后呢 把它的大小呢和这个矩形就是设置的是一样大小。这时候呢我把这个呃无门空间呢，我给它 ctrl x 给它剪切一下，然后呢我鼠标左键啊单击呃双击这个动态面板，然后进入这个动态面板的这个内部，然后这时候我在 ctrl v 把它给复制过来。 大家这时候注意，我需要把这个这里有一个呃呃四周有有这个虚线的这个位置，这个是代表这个动态面板的这个范围，我们一定要把内容就是放到这个动态面板的这个范围内。 好，这时候呢我把这个呃内容已经放在动态面板的范围内了，然后我们关闭，我们会发现啊在前方显示的时候，所有的内容都在这个剧情上啊展示出来的，这时候我们再预览一下，看一下效果。哎，我们看一下这个下方似乎有文字，但是我们看不到了 啊，这是因为啊下方的文字他被遮挡住了，我们想看到他的话，我们需要设置一下动态面板的一个啊属性，这里有一个滚动条，我们给他按一个啊垂直滚动，这时候我们会发现在右侧会多了一个滚动条出来，我们再看一下效果 啊，这时候我们就可以往下拉，就是看到所有的这样一个文本的内容啊，这就是动态面板，就是说在啊当你的页面内容过多的时候，会起到这样一个作用。 好，然后我们看一下场景二，同页面切换啊，弹屏啊等，这里呢，我们就是啊做一个那个啊同页面切换的效果，我们还用这个啊矩矩形来做啊，这里的话，嗯，我们那我们就是 是给他放两个按钮，两个按钮呢，我们就是随意一点啊，比如说这个叫做啊蓝色，然后这个叫做绿色， 当我点蓝色的时候呢，这个句型他是蓝色啊，当我点绿色的时候呢，这个句型他是啊绿色。这时候呢我可以怎么做呢？可能大家都有很多的办法啊，现在呢我们用动态面板来做的话，应该这样做，首先呢我们右键这个句型呢， 把它给转化成一个动态面板，动态面板，然后我们可以给他命一个名字，比如说命名叫 d 啊，这时候呢我们双击这个动态面板，我们会发现啊在这个上方呢是有一个啊动态面板的这个状态这样一个东西，这时候呢，我们再给他添 它默认的有一个状态，我们再给它添加一个状态，第一个状态呢，我们给它命名为啊蓝色，然后第二个状态呢，我给它命名为绿色。 好，命名完成之后呢，我们这时候呢双击状态，我们可以单击状态，我们可以进入这个状态的啊，状态面板的一个页面啊，第一个啊状态呢，我们可以给他设置一下他的底色啊，设置成蓝色， 然后这时候我们可以 ctrl c 一下，然后我们再选中啊这个绿色这个状态，然后我们 ctrl v， 然后我们把它给设置成绿色。 好，设置完成之后，这时候我们来看一下这两个状态，选中蓝色他是蓝色，选中绿色他是绿色。好，这是我们设置完了，设置完了，然后我们来设置一下按钮的一个效果，当我点击这个蓝色按钮的时候 啊，单击的时候呢？怎么样呢？我需要设置面板的状态，因为刚才我们建了两个状态，对吧？一个蓝色的状态，一个绿色状态。我，所以我这里用的这个动作就是设置面板状态。设置面板状态，设置哪一个面板？我们这里有三个面板，我们设置的是什么面板？我刚才命名是 d， 对吧？ d， 然后他的状态是什么呢？状态是 blue， 对吧？蓝色。好，那么到绿色按钮的话，同样我们单击时，我们设置这个面板状态，然后还是 d， 然后他的那个状态什么呢？绿色。好，确定这时候呢，我们可以预览看一下效果 啊，默认它是蓝色的，对吧？然后我们单击一下啊，它变成绿色，然后再单击啊，这个就是同页面的一个切换，它主要其实就是用到了啊动态面板啊状态之间的一个切换。那至于弹屏的话， 它主要是用到了动态面板的一个显示隐藏的一个效果啊，这个大家就是啊自己私下里可以去试一下啊。 那么第三个场景呢，是结合动态面板的特性啊的一些特殊用法啊，比如说是首付，您菜单啊啊半张切换啊和拖动效果等等。那么本节课呢，我们就啊简单的演示一下拖动效果啊啊，剩下的我们到后面就是说啊，讲动态面板试卷的时候我们再详细的去讲。 好，我们来首先我们再新拉进来一个动态面板，新拉进来动态面板之后呢，我们给他啊双击，然后进到内部，我们给他放入一个 组件啊，剧情组件好，放入进来之后呢，我们来关闭返回，然后我们给这个安排面板呢，加上这个拖动效果， 我们可以点击交互面板。进入交互面板之后呢，我们会发现啊，这里有一个事件叫做拖动时。好，我们选中一下拖动时怎么样呢？拖动时我们设置一个移动，移动，移动谁呢？移动这个动态面板，对吧？这个动态面板我给你们先给他命一个名字， 方便去做实践，我的命名叫第一。好，然后我们继续做这个交互效果，选择第一移动，什么移动呢？我们给他选择一个，呃，跟随拖动，就说我拖动的时候呢，这个动态面板是跟随我啊进行这个移动的。好，我们来看一下预览效果， 这时候呢，我们看到有这样一个啊句型，也就是我们在动态面板这个状态融化的句型，然后我们来拖动它试试，我们鼠标做 按着，然后进行拖动，我们会发现我们在拖动的时候呢，这个矩形是跟随我们的拖动进行这个移动的啊，这个呢就是啊动态面板的一个拖动效果 好。那本节课呢，我们就啊学到这里，主要是带着大家啊认识了一下动态面板以及动态面板的一个简单属性的一个应用。那么到下节课呢，我们将会啊一块来学习一下啊内联框架的一个使用。

大家好，今天来给大家讲解一下我们的动态面板，那我们的动态面板呢？它主要就是它可以添加不同的状态，所以它就可以里面装载很多职业面， 这样的话在我们绘制我们的标签页面的切换的时候，就会用到我们的动态面板， 我们可以看到类似我们的后台网站，比如这边是同个页面，它里面可以点击访问量还有销售额的时候 去切换我们下面的内容，那这时候我们我们就可以用到动态面板，把下面的内容放在动态面板的两个状态，通过 切换他的标签导航去控制里面内容的切换。那他的第二个作用就是我们的 banana 图的轮毂， 因为他就是可以添加多个状态，这样的话我们就可以把 ben 的图放在不同的状态去添加自动轮播的效果，这样的话他就可以去展示我们的效果。 你看像我们页面上的这种轮廓效果啊，我们的 banana 图啊，这种都可以采用动态面板来制作， 那他有一个属性，我们把动态面板拉出来看一下，你看我们拉出来的时候，我们看到他的样式， 这是四字滚动的样式，那这样的话他具有滚动的样式，那当我们的内容我们想在一个区域去查看的时候，我们就可以采用动态面板来实现。 我们比如我们现在来一段文本， 假如我们只只想看到一半，让他去滚动，那我们就可以右键把它转为动态面板，然后我们再去我们的样式面板这边从不滚动，把它改为垂直滚动， 改完以后因为他这边勾选的自适应内容，所以我们要把它去掉，当然我们也可以去拖拽我们这边的 高度，这样的话我们遇难的时候，他就可以在这个区域去滚动查看我们的内容，那他就是滚动查看的效果， 然后我们再看他还有什么属性，看到没有，他这边有一个叫做百分之百的宽度，仅浏览器中有效，这个是用来干嘛呢？这般， 呃效果一般是用来我们顶部导航或者我们的背景式。 假如我们拉一个状态面板，我们给他填充个颜颜色，让色面板这边有个颜色，我们给他个颜色，你看啊。假如我们现在把它勾选出，我们去 预览看一下效果，看到没有他的宽度，这是因屏幕宽度的，所以这就我们可以不用再去通过写代码去把它去铺满屏幕，通过动态面板这个属性就可以实现了。 那我们再看看另外的属性，动态面板他这边还有一个特殊的属性，就是他可以固定到浏览器， 那这个有什么作用呢？假如我们现在给这个内容 固定到浏览器这边，把它勾选完以后，我们就可以去设置，假如我们这边设置固定在中间位置，特别是我们的弹船 一般都是居中上下，居中点击确定，那我们看我们现在我们实现把它拉到最底部，我们再去越南看他会不会跑到屏幕中间，越南一下 看到没有，他自己就跑到我们屏幕的中间了。那这样的话就是我们实现弹窗的时候，我们就可以把弹窗移到任何的位置，当我们点击显示这个弹窗的时候，他会自动跑到屏幕中间， 那这就是他集中屏幕的作用。 那我们动态面板他的 band 图 你可以看到他，你看你可以看到他的缩略图，是不是像很多楼层我们拉出来， 那我们是双击他的时候，我们可以看到这边是关闭掉这个动态面板，那这个隔离呢？就是隔离到我们动态面板外面的元素，那个是对一，就是他默认的，我们看盖要面板， 我们先把其他的把它删掉，这样不会干了。我们可以看到他默认有一个 style 状态，那我们双击他，他就进入到 style 这个状态，我们给这里面去添加东西。 假如我们添加一张图片吧 的时候，我们去看我们的盖面板，这个是对于里面就有一张图片， 那我们想要再添加一个状态，可以怎么添加呢？第一个方，第一种方式可以点展开这个 c e， 看到没有？这里有个重复状态，重复完以后他相当于复制的这个状态，这样的话他把图片一起复制过来。 那还有一种方式就是点击底部的添加状态，这样他就只是添加一个状态，他没有把里面的东西复制过来。同样的我们要删除就直接点击悬浮的时候可以点击删除掉， 那除了在这边操作完以后，我们其实也可以在我们的盖腰面板这边去操作。同样的我们鼠标悬浮的时候，这边有个重复状态，我们重复在 重复，那我们看到这个结构会不会很像我们的楼层，这是这是我们的，假如这是我们的一楼、二楼、三楼，那我们切换楼层的时候， 我们用用个矩形吧，这样用他的不同颜色来代表，现在我们现在来一个矩形， 搅到第一层是黄色的，布置一下 粘贴，第二层我们给他个绿色，第三层给他个层次， 看到没有我们鼠标，我们可以通过鼠标去悬浮看查看就可以，一楼是黄色，二楼是绿色， 三楼是青的，青绿色。 这样的话就类似我们的动态面板里面的那个班的图的不同图片， 那我们就可以添加轮毂，让它去切换至不同的矩形，所以这就是动态面板应用到 banana 图的一个效果的制作。 同样的他在页面的切换也是一样，我们不同的状态里面去放不同的页面的元素， 这样的话他就可以去展示我们不同太浅里面的页面内容。 后期的课程我们会详细教大家如何去实现我们的班的图的轮廓，还有我们特标签的切换。好了这节课动态面板我们就讲到这里，谢谢大家。

i 所中全局变量不仅可以作用于不同页面的内容，也可以作用于同一页面的不同内容。首先让我们来预览一下要实现的效果。点击黄色按钮时，跳转到了一个新的页面，并且有一个黄色的矩形。 点击红色按钮时，跳转到了一个新的页面，并且矩形变为了红色。下面我们来制作内容。在第一页制作一个黄色按钮和一个红色按钮。 添加一个新页面，命名为动态面板。制作动态面板的两个状态分别命名为黄色和红色。黄色状态，放置黄色矩形，红色状态，放置红色矩形。 选中红色按钮，点击按钮设置。单击时将默认的全局变量设为 red， 并且跳转到动态面板页。选中黄色按钮，点击单击时将默认的全局变量设为 yellow， 并且跳转到动态面板页。 在动态面板页设置页面载入时的交互 添加条件。 如果全局变量值等于 yellow， 则将动态面板的状态设置为黄色。 如果全局变量值等于 red， 则将动态面板的状态设置为红色。 最后添加一个返回上一页的按钮， 添加交互设置，单击时返回上一页。 设置完成后预览原形，点击黄色按钮，进入到了一个有黄色巨型的页面。点击红色按钮，进入到了一个有红色巨型的页面。

好，大家好，欢迎回到阿克硕石入门坛的第八节，这节呢我们继续学习动态面板，学习动态面板的一个叫做拖动特性，并且利用这个特性呢我们开发一个小游戏，那么除了拖动命令以外呢，我们还会学到移动命令，就是我拖动的时候呢，让他去移动一个物体， 然后呢移动的时候呢，我们可以去学习如何限制他的范围，以及如何让他移动时让另外一个原件呢跟着他一起移动， 然后我们可以学习到动态面板的可视范围，这样一个特点，就是看到动态面板是可以遮挡一些物体的， 然后呢我们可以去学习一下利用如何利用原件范围来作为条件，那来实现我们的一些交互，以及呢我去了解一下啊，这个原件的样式效果的使用啊， x 给我们提供了很多的原 件的样式效果啊，本节呢内容较长，大家呢耐心观看。首先呢我们来看一下案例一，案例一呢是一个这样的个滑动控制器页面，载入之后呢，我能看到这个滑动控制器拖动中间的这个圆形滑块的时候呢， 滑块可以跟着我的鼠标呢进行移动，同时呢这个背景的轨道呢会被填充成绿色，那么这是我们的第一个案例啊，我们到 x 数里面去看一下。 好，我们来到 x 十这个界面，我们来实现一下刚才我们看到的这个案例。首先呢我们拖出一个巨型， 我们把这个矩形呢调整一下他的位置，幺八零八零，宽度三百，高度呢，我们给他解锁一下高度，我们给他调成多少？调成十六啊？形成我们刚才看到 这个轨道样式，我们再调整一下，给他给他调一个圆角二十， 然后呢我们复制一个拖动一下，复制一个，我们上面这个是三百十六，下面我们把它调小一点，调成二九八和十四， 上面这个呢我们命名成轨道，让他置于顶层填充呢给他填充成透明，只要他这个边框里边呢是透明的，然后把这个小下边这个呢给他移动上去，我们把它放大小看一下，把这个边呢给他对齐， 这边呢也是对齐的，我们把里边这个小的句型呢给他命名成为小绿， 然后呢我们把它填充成绿色，它的边框呢我们也给它填充成绿色，这个时候呢我们把它两个选择在一起，右键动态面板起名呢叫做轨道。 好，这两个群众演员呢我们已经招来了，接下来呢我们再拿一个圆形，把这圆形呢大小给他调整一下， 好把它放到这个轨道的最前边，然后给他起名呢叫滑块啊，里边呢我们再给他加点纹理，打上三个字母 i， 他这三个字母的填充呢稍微灰一点，这个就是滑块原件，现在呢我们的群众演员都到齐了，接下来呢我们开始做交互， 我们把这个三个原件都选中，再只是转化为动态面板，起名叫什么呢？案例一， 选中二零一动态面板新建交互，这个时候我们就找到我们今天要讲的这个拖动命令，当我拖动他的时候呢，我要移动谁呢？要移动一下里边的这个滑块，那么在什么方向上移动呢？沿 x o 去移动，这就是水平移动，我们来看一下效果， 现在这个滑块你看我去拖动他，他是不可以移动了，但是呢他会超出这个边界，这个不行啊，我们要让他在轨道内部，对吧？也就是从这开始移动到这，那么这和这可以看到这是不是动态面板的边界啊？ 也就是动态面板的内部坐标，从零开始到动态面板的最大坐标，这个宽度是三百，所以我们在移动的时候呢，我们要给这个小滑块限定一下范围，点这个更多选择添加限制范围，左侧让他怎么样呢？大于等于零，再添一个 右侧，让他小于等于。我们这个东西的宽度是三百，那么就让他宽度呢限制在三百，好，再看一下效果。 哎，往这边拖拖不动了，这边却也拖不动了，正好在这个范围之内，那么接下来呢，我们让里边的绿色背景呢，正常的时候看不见的，只有 拖动的时候才能跟着我走，对吧？才能跟着我走，好，那我们怎么来实现这个绿色轨道的填充呢？我们选中我们这个里边的动态面板 轨道的这个动态面板，我们先来调整一下它的样式，我们先呢把这个适应内容这个勾呢给它去掉，这个时候它就形成了一个窗口，那么不在这个窗口范围之内的原件是看不见的，只有呢在这窗口之内的原件我们才能看到它。那么按照这个思路来呢，我们去 选中里边的小绿，让小绿的坐标变成什么呢？变成负的二九零，这时候呢小绿呢就跑到这个屏幕的最右左侧来了，这时候我们关闭面板，其实我们是看不见的，为什么呢？因为小绿呢，他不在这个动态面板的可视窗口范围之内， 然后我们刚才在选中这个滑块，我们知道这个滑块是我们拖动动态面板的时候，他会移动，我们知道他会动，那么给他呢添加交互，就是当他 移动的时候啊，再去移动谁呢？移动小绿，让小绿呢跟随就行了，在里面没有翻译过来，这就是 vs disease， 就跟着他啊，这时候确定就可以了，我们再来看一下效果， 陌生人小绿呢，并没有填到这个轨道里来，只有我拖动他的时候呢，小绿呢才会跟着我的滑块走。那这个时候有个小问题，这前面长出两个小尖尖，看看见了吗？为什么呢？因为这动态面板是方形的，我们这个轨道呢是圆的，那这种他遮挡不住了。 那么回到这个案例里面来，我们选择这个轨道动态面板，再去看一下样式，那么动态面板呢，也可以被设置圆角，我们把这个圆角呢也设为二十，让他跟那个小绿还有那个轨道是一样的，我们再来看下效果啊，这样前面这两个小尖都没有了拖动滑块，滑墩可以移动，并且 被限制在轨道范围之内，小绿呢会跟着他一起出现。好，这个案例呢，我们就实现了， 接下来我们来看一下案例二，案例二呢是动态面板拖动特效的一个进阶，叫做小汽车出车库游戏， 挺无聊的个游戏要求是什么呢？当页面载入之后呢，我们可以看到这个场地拖动鼠标的时候呢，这小汽车呢就跟着我们鼠标移动，但小汽车呢不能接触墙壁，一旦接触墙壁呢，游戏就终止了，小汽车呢还要变成红色，并且无法再移动，点击重生按钮， 小汽车呢可以恢复颜色并返回到起点。好吧，我们来实现这样一个这个效果。好，我们新建一个页面啊，在这页面里面呢，我们再拖出一个矩形，把这个矩形呢 设到零零，然后大小呢把它设成六百乘六百啊，这个大小呢刚好我们可以看到，比较方便我们编辑。然后呢我们得新建一些墙壁啊，我们就用这个句型呢来给他建墙壁， 呃，我们就不一定见得一模一样了啊，随我们心意吧。 好到这呢，就算他成功出口出来，我们在这给他写上一个出口 啊，我们还缺什么呢？还缺一个重生按钮，重生还缺辆小汽车，我们的原件库里面选择 accounts 图标，找到一个小汽车，这车有点太大了，我们调整下大小， 把它放到这个位置上来，它的位置呢，我们给它设成二十二十五 啊，这是起始位置。好，我们的群众演员呢都找齐了，现在我们给他命名小汽车呢，把命名成为小强。 然后呢给这些墙壁呢都命上名字啊，就用数字代替就行了，一二 三四五六七 八九，这个呢面屏是出口文字重生按钮 啊。接下来呢还有一个要求，小汽车撞墙之后要变成红色，这个时候呢我们就要用到什么呢？就要用到样式效果，我们选中小汽车右键， 这呢有一个样式效果，那么这里边一共呢现在的 x 十呢，有六种样式啊，新增了一个错误，那这分别是什么？鼠标经过鼠标按一下，选中禁用，获取焦点和错误时，我们呢 利用一个禁用这个效果，当他撞墙的时候，我们就让小汽车禁用，禁用的时候呢，我们在这选一个填充颜色，让他变成啥呢？变成红色，这时候不就红了吗？对吧？确定。 呃，为了给大家演示呢，我把重生按钮呢也设一些这个样式效果，那么鼠标经过这个时候呢，我们让重生按钮呢变成橙色， 鼠标按一下的时候呢，让重生按钮呢变成白色吧，然后文字这个文字的颜色呢要变成黑色。 我们设好了样式效果，一会我们再来使用。接下来呢我们要想了，我们要拖动，是不是要用到动态面板，就是要拖动的时候移动小汽车，那我们就把我们这些群众 演员呢都选中啊，右键动态面板，然后给他起名叫案例二，选中这个动态面板，那么我们在交互这里呢，选择新建交互， 我们今天新学的拖动命令，当拖动的时候呢要移动，移动谁呢？小强，那这时候呢是任意方向上下左右都可以移动，那要不要给他添加范围限制呢？要的， 我们要限制他的上下左右都在停车场的范围之内，对吧？顶部底部左右， 那顶部线多少呢？是不是大于？从这开始算，往下是不是大于零了，对吧？这坐标从这是零到下面是二百三百，对吧？大于零就可以，底部呢底部呢这是六百，因为我们这个 矩形呢是一个正方形，是一个六百大的正方形，他小于六百是不是就被限制在这个范围之内了？那我们把底部呢变成小于六百啊，看一下，别填错了，变成六千就错了，左侧也是大于零，右侧小于还是六百， 这样小汽车的范围呢就被限制在这里。那可是这里还有条件啊，就是说一旦他碰墙，这小汽车就不能移动了，现在我们是让他在这里随便移动的，那我们把他思路反过来想， 那么只有不碰墙的时候他才能移动，碰墙就不能移动了，是不是这个道理？所以呢，我们在这个拖动前面呢添加一些条件，这是 k c 一用力一添加什么条件呢？ 以前我们用过这个面板状态，今天我们换一个叫做原件范围。什么原件范围？原件呢？是小强的范围，这里呢翻译的有问题啊，他是经过和未经过，其实接触和未接触，那我们让小强呢？未接触 你只有不接触墙的时候你才能移动，接触墙就不能动，那墙是谁的墙？刚才我命名了一堆，对吧？最大是九个墙，我们把这第一个先选中，墙一，然后加，加上谁呢？加墙二继续加，我把我们这些墙啊都选进来， 六七 八九。好，这九个墙壁都选进来了，这个时候我们用的是符合 全部，也就是他不能接触任何一个墙，你才能移动，接触了任何一个墙都不能动了，所以就是暗的，所有的都在这 确定好，这个就是我们用了一个叫做原件范围来做条件，你必须不接触他们的时候呢，才能被拖动，任意方向拖动，并且被限制在六百六百之内， 那么再添加一个用力，就是你接触了呢？啊，这个不用添加任何细节了，就是 ifls， 如果不是刚才这个用力的话怎么办？ 那就是也意味着他就是碰墙了，对吧？碰墙的话，首先我是不是让他变红了，那我要去设置一下他的禁用，因为刚才我们怎么我们把小强的禁用这个效果，是不是设置了设置他一旦禁用的是红色，对吧？那我就选择如果你碰了墙，那我就禁用，你确定 他这没有，这下面没有任何拖动动作了，对吧？那也就意味着他不能被拖动了，那他被禁用了怎么才能恢复呢？那我们就要用重生按钮，对吧？重生按钮，接下来呢，我们来设置重生这个按钮的交互，我们新建交互 单机重生按钮。首先我们是不是要解除小强的禁用状态啊？那么我们就还是这启用禁用，把小强呢启用了，然后呢我们得把小强移动到这个初始位置去，他的初始位置呢是二十二十五， 所以我们这呢还要添加一个移动移动谁的小强？ to 指定一个坐标 to 二十二十五这个坐标，然后给他添加个动画，线性动画五百毫秒。确定好，我们的游戏 开发完了，我们来看一下我们的效果吧，小强拖动他可以走，哎，这个游戏的难度呢，你要想加多加高难度，你就把这个通道变窄一点， 然后呀，碰墙了之后变红，不能够再被拖动了，不能移动了，点击重生按钮，回到初始位置，哎，又可以移动了，哎，这个这个还是有点难度的，我跟你讲 出口，噔噔噔噔成功，我们来小结一下，这节我们弹了什么？我们弹了动态面板，一个非常核心的交互动作叫做拖动，在 extra 里边只有动态面板呢可以有这个拖动命令，其他的软件是没有的，这是它独享的一个交互。那么 在拖动的时候，我们还移动了一个就是滑块的原件，那也就是我们学习了一个叫做移动原件，这么个角度让一个原件呢能够去移动，并且呢我们还限制了这个原件的范围。滑块呢？那什么限制了他轨道的左侧和右侧，那小强的小汽车呢？我们限制了他的上下，就顶部，底部，左边和右边。 然后我们学习了跟随命令，我们让那个小绿啊作为一个原件呢，跟随着滑块呢进行移动来填充我们的轨道，这样的话我们就不用再给小绿设置任何的限制了，对吧？我们已经限制了滑块，那么这个小绿呢只要跟着他动就行了，那么他的限制条件就被继承了。 然后我们了解了动态面板的可视范围，我们让小绿呢实现了个副坐标，并且让他的动态面板呢是不随着原件呢自适应的，这样的话他就形成了个窗口，不在这个窗口里面的副坐标的小绿呢就看不见了，只有他被拖 进来的时候，我们才能看到他，这就是动态面板的可视范围的应用。之后呢，我们在第二个案例里边呢，用到了一个叫什么原件范围作为条件的使用，也就是小墙小车不能碰到墙壁，一旦他们的原件范围接触了， 小车就不能移动了，只有在未接触的时候呢，小车呢才可以去移动，这作为他的一个条件。呃，然后我们使用了个叫做原件样式效果， 一旦他接触了以后呢，我们使用这个禁用效果，而且让禁用效果变成填充成红色，同时我们那个重生按钮我们也做了一个效果，就鼠标移动上去，这样变成橙色点的时候呢，让他变成白色， 这就是我们这节呢主要讲的一个内容，其实内容呢还是挺多的，大家注意理解和吸收。下一节呢，我们要谈一谈在 x 数当中的使用变量，好喜欢的朋友呢，请素质删联，谢谢，大家再见！

大家好，欢迎回来，在这段视频中，我将向您展示如何快速的制作全屏原型。假设您制作了原型，可能会发现，如果不加入足够多的空间，或把图片和背景拉的足够大，发布原型或预览之后，页面宽和高方向会出现大量空白。那么我要告诉你怎么做，避免出现那种现象，以及如何制作一个全屏原型。 这种方法适合所有人使用。首先将图片选中，转化为动态面板，然后命名为 b g。 你应该很清楚你将要展示的终端 p c 大屏 app 的最大分辨率。将动态面板大小调整到大于终端最大分辨率，然后按着 shift 键将图片等比例拉大，直到充满动态面板。这时候点击预览， 看到图片溢出了，当前屏幕出现了滑动现象，这可能不是我们想要的最终效果。那么怎么做才能让图片刚好和当前屏幕大小一致？我们重新打开 liker， 将鼠标放置在 空白处，然后点击右侧的交互事件，选中页面，载入时设置页面，载入时改变 b g 的大小，宽为 window with 即屏幕宽度，高度为 windowhide 即屏幕高度。为了效果好看， 我们选中文字，转化为动态面板，命名为 tex。 右键设置固定到浏览器中部。这时我们再点击预览，发现图片刚好充满屏幕，文字也如期显示在浏览器中部位置。我是神耐川零零，关注我，下期更精彩！

今天和大家分享竖切换动态面板的圆形模板，我们可以点击不同的员工查看对应的信息， 也可以点击箭头展开或者收起自己。 左边的数是用中计器制作的，所以使用也很方便。我们只需要在中计器表格里面填写对应内容，即可自动生成数结构。例如我们想在人力资源部下方增加一个人力总监的岗位，按照上面表格的格式填写即可。 填写完成之后，我们在该岗位下再增加人力总监 vigo， 同样也是按照格式填写就可以了。 这里是填写动态面板对应的状态名， 右边就是动态面板的内容。我们把事先准备好的内容复制一下，在动态面板里新建一个状态，名称要和前面表格填写的一致， 然后粘贴刚刚复制的页面内容，这样就可以看到刚刚人力总监的岗位以及 vigo 职员。 而且还是自带交互效果的，包括展开收棋子节点，以及打开对应的面板页面。 那这个圆形模板我已上传到 圆形分享群，需要的小伙伴们可以在群里自行下载，没有进群的同学也欢迎你加入。在群里可以免费使用我所有的圆形模板。上面的这些都是在群里免费分享的高保真圆形模板。 另外群里也有很多高保真圆形的视频教程，也是可以免费观看学习的。后续更新的内容也会免费上传到圆形分享群里，而且更新的频率还很高哦。 有不懂的问题都可以在群里讨论，我懂的都会解答。而且群里有几百名产品人，都是互相帮助，共同进步的。 最后，欢迎你加入我们互助的大家庭。