关注后获取最新教程
做课小助手

实例教程:互动微课 by 做课小助手

您是第2044位浏览者/目前有0条评论   2018.08.23

返回列表 +发布教程

H5微课的互动形式,就是员工可以去点击微课上的某个元素,然后显示某个页面,我们今天就教大家如果做点击某个元素的操作。

                      gif



第一步:打开炫课专业版,在场景中单击鼠标左键,选择图片或纹理填充--选择图片(我们可以在提供的素材中选择背景图片,或

者插入自己本地准备好的背景图片)

1e13ca2c91b94b64af2545f5b103f5a3

3fa63a8697ec4c5e9893897084a37252



第二步:点击插入图片-普通图片,将已经准备好的素材放置到相应位置,先把最后点击了解详细说明后出现的图片移到场景外侧,

方便给其他场景内的元素添加动画。

图片2



第三步:通过右侧选择窗格,给每个部件进行命名,方便后 期添加动画别识部件。

图片3



第四步:确定元素的依次进入顺序,依次选中每个元素,点击交互动画--添加动画,并且所有动画都设置为与上一动画同时。PS:这

边的所动画一定是都需要设置成与上一动画同时的,因为我们后面会有无限循环动画,如果设置成上一动画之后,那么无限循环

画之后的动画是永远不会执行的,然后可以通过延迟时间来控制动画的先后顺序。

图片4

图片4-1



第五步:选中右侧的动画列表,飞入动画的效果选项设置为从自底部,其余动画有方向设置的也是点击动画后从选项设置中设置,

并且选中动画,给动画做相应的延迟时间和持续时间。

图片5

图片5-1



第六步:点击了解详细说明--选中右侧的鼠标单击,然后点击交互动画--+动画,选中显示/隐藏,除了手机画面这个元素需要隐藏,

其余的元素在点击这个元素的时候,全部显示。

图片6

图片6-1

图片6-2



第七步:同样的操作步骤,选中显示的这张图片,选中右侧的鼠标点击,然后点击交互动画--+动画,选中显示/隐藏,除了这个展

示出来的页面需要隐藏,其余的元素在点击这个元素的时候,全部显示。

图片7

图片7-1



第八步:选中弹出的页面,点击右侧选择窗格--元素后面的小眼睛,点击影藏这个元素。

图片8



整个页面的动画就完成了。需要元素的可以下载链接拿走:https://pan.baidu.com/s/1pyf9TozEXZqhwM8vNqlizg


共 0 个回复
还未有人评论!

发表评论: 有价值的评论,不仅可以提高自己,也可以造福大家(评论需审核)

发表评论

Member service

showMod:0
回到顶部
机构Code:xuanyes