Hype

Hype中文官网 > 新手入门 > 基础教程:交互动效制作软件 Hype 4 添加元素(三)

基础教程:交互动效制作软件 Hype 4 添加元素(三)

发布时间:2020/08/12

上两小节小编详细介绍了在Hype4交互动效制作软件中添加形状文本和按钮元素,本章节小编重点介绍Hype 4 HMTL6创作工具中的两个特殊元素:Sprite表元素和HTML小组件。

  1. 一、Sprite表元素

Sprite表元素是Hype 4新增的一个元素。Hype 4中的Sprite表元素,更像GIF图,它将多张具有连续动作的图片按照先后次序放在一张表格中,在时间线上调用这些图片,就像播放电影一样,把这些图片组合成一个在浏览器上自动播放的动画。

  1. 在“元素”工具中点击“Sprite表”,在弹窗中选择插入到Sprite表中的文件。(小编在这里选择了一个GIF图,因为一个GIF图包含了多张图片,能很好模拟Sprite表的作用。)
选择插入Sprite表的文件
图1:选择插入Sprite表的文件
  1. 点击“打开”后,Hype弹出“Sprite表”界面。GIF图里的每张图都放置在Sprite表格里。
Sprite表界面
图2:Sprite表界面
  1. 由于GIF图的时间长度和帧速率都是设置好的,其他的如表边距、Sprite间距如果没有特殊要求,就不要修改参数。点击“插入Sprite表”,返回到Hype工作台主界面。

图3:返回工作台主界面

  1. 点击“缩放”工具选择25%,使场景窗口缩小,能够看到整个Sprite表元素。调整Sprite表元素大小,以适合场景画布,避免Sprite表元素超出画布的部分不能显示。
调整Sprite表元素的大小
图4:调整Sprite表元素的大小
  1. “缩放”工具选择100%显示场景画布,检查Sprite表元素在画布的位置,确保Sprite表都在画布上,没有超出画布。然后点击“预览”工具,在Chrome浏览器中自动播放Sprite表元素。
Chrome播放Sprite表元素
图5:Chrome播放Sprite表元素
  1. 二、HTML小组件

HTML小组件就是在场景中,显示使用HTML语言编写的,具有一定功能的嵌入式HTML,或者在场景中嵌入某个网页内容。

  1. 在图6中,小编使用“HTML小组件”添加了一个H2标题和一个按钮。在浏览器中能够正常地显示嵌入的内容。
使用HTML小组件添加元素
图6:使用HTML小组件添加元素
  1. 在图7中,小编通过HTML小组件嵌入了百度首页www.baidu.com。在浏览器中,可以在场景中看到嵌入了百度首页,并且还可以在首页中进行搜索等功能。
使用HTML小组件嵌入网页
图7:使用HTML小组件嵌入网页
  1. 三、小结

Sprite表元素和HTML小组件是Hype的特殊元素,Hype软件通过使用Sprite表元素提供了有别于时间线和关键帧的另一种创作动画的方案;而HTML小组件又提供了另一种添加Hype元素的方法,直接使用HTML语言创建元素。

但要注意的是,HTML小组件创建的元素不能使用Hype面板改变其属性。这些元素的属性必须在HTML元素命令行中使用行内样式进行修改。

作者:东佛

标签:Sprite精灵图表HTML小组件

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
400-8765-888 kefu@makeding.com
热门文章
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
Hype制作矢量形状动态变形的动画效果
相信大家都看过一些网页动画,就是从一个矢量图形慢慢变成另外一个矢量图形。其实这个效果利用Hype可以非常简单地实现,下面小编就利用Hype 4版本,教大家如何快速简单地实现这一功能。
2020-06-09
UI动效设计工具Hype的响应式布局及设置
响应式布局可以使用户的网页在各种尺寸的屏幕上都能够较好地兼容,不会因为屏幕尺寸大小变化导致网页拉伸变形。Hype就支持这种响应式布局,它允许设计者为单个场景创建多个布局,当用户在浏览器中显示页面时,Hype将根据设备的当前宽度动态加载合适的布局。
2020-05-21
Hype中触发事件的使用
一个优秀的网页绝不仅仅是一个静态的页面,在网页当中,还应该存在着一些点击或者触摸等主动触发事件,当用户点击页面上某处的时候,页面会相应的发生一些动态变化,这就是网页的触发事件。Hype作为一款专业的Mac端网页制作软件,同样支持触发事件功能。
2020-06-08
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21