如何实现动画控制

1.用两个按钮控制动画播放

如下图,点击“文字”工具添加两个文字,分别输入“暂停”“播放”

为“暂停”文字设置编辑行为:“动画播放控制”→“暂停”→“触发条件”:“点击”

为“播放”文字设置编辑行为:“动画播放控制”→“播放”→“触发条件”:“点击”

在“动画”下拉菜单栏内点击勾选“循环”,使动画自动循环播放

  • 应注意:点击“动画”下拉菜单内的“循环”,作品中所有页面的动画都会循环播放


若要设置单独一页的动画可循环播放,其他页面的动画只播放一次。则先取消掉“循环”功能。新建第2页作参考,在第2页制作一个矩形移动的动画效果。在第1页新建一个图层,为其重命名为“循环播放”。

选中“循环播放”图层最后1帧“插入关键帧”,在舞台之外添加一个图形,例如下图添加一个多边形,添加行为:“动画播放控制”→“跳转到帧并播放”→“触发条件”:“出现”,点击“编辑”按钮

设置参数
“帧号”:“1”
点击“确认”,即在第1页设置动画循环播放的效果

“跳转到帧并停止”行为:删除多边形“跳转到帧并播放”的行为。重新添加行为:“动画播放控制”→“跳转到帧并停止” →“触发条件”:“出现”,点击“编辑”,设置参数“帧号”为“1”。可点击预览效果


2.如何制作一个按钮,实现“暂停”与“播放”的切换?

如下图,在新的作品编辑页面内,新建一个矩形,设置其从左往右移动的动画

在“元件”面板内点击“新建元件”按钮,新建一个元件

点击“文字”工具添加一个文字,输入“暂停”

选中第2帧,右键→“插入帧”→右键→“插入关键帧”

将第2帧上的文字改为“播放”

回到舞台,点击“新建图层”按钮新建一个图层,重命名为“按钮”,在“元件”面板下鼠标选中新建的元件,按住不放拖动至舞台

双击舞台上的元件进入元件编辑页面,点击元件第1帧上“暂停”文字,添加行为:“动画播放控制”→“暂停”→“触发条件”:“出现”

继续添加行为:“动画播放控制”→“暂停”→“触发条件”:“点击”

  • 注:为方便演示,可在“动画”下拉菜单下勾选“循环”功能

设置“参数”
“作用对象”:“舞台”
点击“确认”,即设置了“点击该元件,舞台上的动画即会停止”的行为效果,可点击预览观察效果

再为“暂停”文字添加一个行为:“动画播放控制”→“下一帧”→“触发条件”:“点击”

鼠标选中图层第2帧,点击“播放”文字为其添加行为:“动画播放控制”→“播放”→“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框,设置“参数”的“作用对象”为“舞台”

同时再添加行为:“动画播放控制”→“上一帧”→“触发条件”:“点击”,可点击预览观察效果


3.如何用舞台的“按钮”控制元件内的动画?

以上所述操作是用元件内的“按钮”控制舞台上的动画,接下来将阐述如何用舞台的“按钮”控制元件内的动画
如下图,新建一个作品编辑页面,在“元件”面板下点击“新建元件”按钮新建一个元件

在“素材库”中选择添加一张“铃铛”图片素材至舞台,如下图,为“铃铛”做一个左右摇摆的动画(具体参考相关教程)

回到舞台,在“元件”面板下找到新建的元件,鼠标点击不放将其拖动至舞台

为方便观察,可在舞台的“属性”面板下调整其颜色,使其与“铃铛”元件的颜色有明显差异

设置“点击舞台上的按钮播放元件动画”行为:如下图,双击“图层0”重命名为“元件铃铛”,点击“新建图层”按钮新建一个图层,重命名为“按钮”

点击“文字”工具在舞台上添加一个文字,输入“点击敲门”文字按钮

双击舞台上的“铃铛”元件进入元件编辑页面,点击“新建图层”按钮新建一个图层,并为其重命名为“暂停”,在“暂停”图层添加一个圆形形状,设置“暂停”行为:“动画播放控制”→“暂停”→“触发条件”:“出现”

删除“暂停”图层上第1帧之后的所有帧数

为使圆形不被看见,可直接将圆形拖动至舞台之外,也可在其“属性”面板下将其“透明度”设为“0”

回到舞台,选中“铃铛”元件,在其“属性”面板下为其命名为“铃铛”

为“点击敲门”文本框的添加行为:“动画播放控制”→“播放元件片段”→“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框

设置“参数”
“元件实例名称”:“铃铛(元件实例)”
“是否循环”:“循环”
“起始帧号”:“2”
“结束帧号”:“20”
点击“确认”,即设置了“点击‘点击敲门’按钮,播放‘铃铛’元件第2到20帧的动画”行为

如要设置点击“点击敲门”按钮,“铃铛”即跳转至其中的某一帧(假设为第10帧),则可以将参数改为:
“起始帧号”:“10”
“结束帧号”:“10” ,其他不变

还有另外一种方法如下:
删除前面设置的“播放元件片段”行为

重新设置行为:“动画播放控制”→“跳转到帧并停止” →“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框

设置“参数”:
“帧号”:“10”
“作用对象”:“铃铛”
点击“确认”,即设置了“点击‘点击敲门’按钮,‘铃铛’元件即跳转至第10帧”

设置“点击舞台上的按钮暂停元件动画”行为:双击舞台上的“铃铛”元件进入元件编辑页面,删除“暂停”图层

删除“点击敲门”文本框原先设置的行为

将“点击敲门”文本框内容改为“安静一下”

为“安静一下”文本框的添加编辑行为:“动画播放控制”→“暂停”→“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框,设置“参数”的“作用对象”:“铃铛”(若“参数”中的“作用对象”选择“舞台”,则行为控制的是舞台上动画,对元件本身的动画并不能控制)

4.“上一页”“下一页”行为

新建一个作品编辑页面,如下图,新建三页,为明显区分观察,在每一页上分别添加文字“第一页”“第二页”“第三页”

选中第1页,点击新建一个图层,重命名为“禁止翻页”,在舞台之外添加一个矩形

为矩形添加行为:“动画播放控制”→“禁止翻页”→“触发条件”:“出现”

点击新建一个图层,重命名为“按钮”,在“按钮”图层添加一个矩形,为矩形添加行为:“动画播放控制”→“下一页”→“触发条件”:“点击”

复制矩形粘贴进第2、3页

在第3页中,修改矩形行为,如下图,删除“下一页”行为

重新添加行为:“动画播放控制”→“上一页”→“触发条件”:“点击”

在“翻页”面板下,可选择“翻页效果”,如下图,选择“淡入”

单独设置某一页的翻页效果:如下图,回到第1页,在矩形“编辑行为”对话框中,点击删除“下一页”行为

重新添加行为:“动画播放控制”→“跳转到页” →“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框,在“参数”中设置跳转页号和翻页方式

  • 注:“禁止翻页”只针对系统默认的翻页效果,而不针对设置的翻页行为

如何在某一页恢复翻页:如下图,点击选中第2页,在舞台之外添加一个矩形,为矩形添加行为:“动画播放控制”→“恢复翻页”→“触发条件”:“出现”

翻页时间的设置:可在“翻页”面板下设置所有页面的翻页时间

设置跳转到页的动画时间:如下图,点击回到第1页,删除矩形按钮的“跳转到页”的行为

选中所有图层的第3秒(即第37帧)插入帧,新建图层,重命名为“暂停”,同时在舞台上添加一个多边形

设置多边形的行为 “动画播放控制”→“暂停”→“触发条件”:“出现”

删除“暂停”图层第1帧之后的所有帧数

点击新建一个图层,重命名为“跳转到页第二页”,在“跳转到页第二页”最后一帧“插入关键帧”

在舞台上添加一个圆形,为方便区分可在其“属性”面板下调整圆形的颜色,点击圆形添加行为:“动画播放控制”→“跳转到页” →“触发条件”:“出现”,点击“编辑”进入“参数”对话框

设置“参数”:
“页号”:“2”
“翻页方式”:“淡入”

设置矩形按钮行为:“动画播放控制”→“播放”→“触发条件”:“点击”,即设置了点击矩形按钮3秒之后页面跳转的行为。可点击预览观察效果

控制帧号或页号的相关行为:
如下图,新建一个作品编辑页面,在舞台上添加一个矩形

选中第10帧,右键→“插入帧”→“插入关键帧”,在舞台上添加一个圆形

同理,在第20帧添加一个五角星形状

点击选中第1帧,如下图,为关键帧命名为“方块”,命名成功后可发现第1帧上方有一个黄色的小三角形,同理,分别为第10帧、第20帧关键帧命名为“圆”“五角星”

新建图层,为其重命名为“按钮”,在工具栏内分别点击“矩形”“椭圆”“多边形”工具在舞台上绘制一个小矩形、小圆以及小五角星

新建图层,为新图层重命名为“暂停”,点击“矩形”工具在舞台之外添加一个矩形,添加“出现即暂停”行为:“动画播放控制”→“暂停”→“触发条件”:“出现”

为舞台底端小矩形添加行为:“动画播放控制”→“跳转到帧并停止” →“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框

设置“参数”:
“帧名称”:“方块”
点击“确认”

同理,分别为小圆、五角星添加“跳转到帧并停止”行为,其中分别跳转到帧名称为“圆”“五角星”上,可点击预览观察效果

  • 注:若在以上的“参数”设置内,既填了“帧号”又填了“帧名称”,系统会自动以排在上面的“帧号”为准,因此应注意在选择了“帧名称”时不应再填不同的“帧号”;同帧的设置不一样的地方是,在“跳转到页”的“参数”设置中,若同时填写了不同“页号”和“页名称”,系统会自动按照“页名称”跳转,而不是排在前面的“页号”

5.如何设置点击一个按钮即跳转到某页的某帧上?

如下图,新建一个作品编辑页面,新建三个页面,为方便辨认,分别在各页舞台上添加三个文字,输入“第一页”“第二页”“第三页”文字内容

点击回到第1页,添加两个文字,分别输入内容为“到第三页的第1帧”“到第三页的第10帧”

点击来到第3页,点击新建“图层1”,在舞台上添加一个文字,输入“1帧”

选中所有图层的第10帧“插入帧”,选中“图层1” 第10帧“插入关键帧”,在舞台上添加一个文字,输入“10”

点击新建“图层2”,在舞台上添加一个矩形,设置“出现即暂停”行为:“动画播放控制”→“暂停”→“触发条件”:“出现”

新建图层“判断”,在舞台上添加一个文字,输入“0”,为方便区分,可在其“属性”面板下调整数字的颜色,为其命名为“判断数”

设置该文字行为:“动画播放控制”→“跳转到帧并停止”→“触发条件”:“属性改变”,点击“编辑”按钮进入“参数”对话框

设置“参数”:
“帧号”:“1”
“作用对象”:“舞台”
“执行条件”:“检查元素状态”
“元素名称”:“判断数”
“考察属性”:“文本取值”
“逻辑条件”:“等于”
“参考值”:“1”

同理添加下一个“跳转到帧并停止”行为

设置“参数”:
“帧号”:“10”
“作用对象”:“舞台”
“执行条件”:“检查元素状态”
“元素名称”:“判断数”
“考察属性”:“文本取值”
“逻辑条件”:“等于”
“参考值”:“10”

回到第1页,设置“到第三页的第1帧”文字行为:“属性控制”→“改变元素属性”→“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框

设置“参数”:
“元素名称”:“判断数”
“元素属性”:“文本取值”
“赋值方式”:“用设置的值替换现有值”
“取值”:“1”
点击“确认”,即设置了“当点击‘到第三页的第1帧’文字,第三页的‘判断数’值会变成1”的行为

同理,为“到第三页的第10帧”文字添加“改变元素属性”行为

设置“参数”:
“元素名称”:“判断数”
“元素属性”:“文本取值”
“赋值方式”:“用设置的值替换现有值”
“取值”:“10”
点击“确认”,即设置了“当点击‘到第三页的第10帧’文字,第三页的‘判断数’值会变成10”的行为

回到“到第三页的第1帧”文字的“编辑行为”对话框中,添加行为:“动画播放控制”→“跳转到页”→“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框,设置跳转“页号”为“3”

同理,回到“到第三页的第10帧”文字的“编辑行为”对话框中,添加“跳转到页”行为,在“参数”对话框中设置跳转“页号”为“3”

  • 注1:若出现跳转有问题的情况,可回到第三页,进入“判断数”文字“编辑行为”对话框,检查行为的“触发条件”,之前设置的为“属性改变(正常情况下)”,由于系统更新等问题可将其都调整为“出现”即可,点击预览观察效果

  • 注2:在“编辑行为”对话框中,系统的执行步骤是按照行为的上下顺序依次执行。

观看本节视频教程:
http://cdn1.mugeda.com/course/3/3.3/3.3.14.mp4