Hype

Hype中文官网 > 新手入门 > Hype用户界面详细解读(上)

Hype用户界面详细解读(上)

发布时间:2020/05/21

Hype 4.0(Mac系统)是一款专业的HTML5制作软件,可实现优秀的视觉效果,并带来更流畅的动画播放效果。Hype 4对新手用户相当友好,即使大家从未接触过编码式的HTML5制作方法,也可以运用Hype 4的可视化操作功能构建HTML5的动画内容。

另外,Hype 4可定制性的操作界面功能,允许用户自行创建符合自身使用习惯的操作界面,提高了软件使用的灵活性。接下来,本文将详细介绍Hype 4的场景、播放控制、时间线以及元素面板。想要一同进行了解的小伙伴们可以在下载页进行Hype下载安装。

Hype 4界面
图1:Hype 4界面
  1. 一、场景面板

Hype 4的场景面板是用户进行场景管理的功能面板,包含了创建、复制、删除等功能。场景是Hype 4进行HTML5制作的基础,如同演示文稿中的幻灯片一样,为用户提供作品的创作场所。

如图2所示,场景面板的左侧为各个场景的缩略图,而右侧就是用户进行内容制作的地方。用户可为场景导入各种元素,如图片、文字、形状等。

场景面板
图2:场景面板
  1. 二、播放控制面板

Hype 4的播放控制面板位于场景的下方,用以控制场景内的动画播放。播放控制面板依次包含了转到开头、上一帧、播放/暂停、下一帧、循环播放以及记录六个按钮,用户可通过单击这些按钮来控制动画的预览。

位于播放控制面板右侧的时间刻度,标注的是当前播放动画的时间刻度。用户可自行输入时间刻度,来快速定位动画。

播放控制面板
图3:播放控制面板
  1. 三、时间线面板

Hype 4的时间线面板,是用于装载动画的重要工具。时间线面板与场景密切相关,是依附于场景而存在的,因此每个场景都会包含一条或多条的时间线。

用户可以为时间线添加操作,如跳转到下一个场景、触发行为等,从而为HTML5的制作添加动画效果。

时间线面板
图4:时间线面板
  1. 四、元素面板

Hype 4的元素面板展示的是当前场景中所包含的所有元素,这些元素可能是文字、图片、音频、视频等。

单击元素右侧的“眼睛”按钮,可以隐藏或显示当前元素;而单击“眼睛”按钮右侧的“锁”按钮,则可以控制元素编辑的锁定与否。

元素面板
图5:元素面板

场景、元素两个面板是Hype 4进行HTML5制作的基础面板,而时间线面板以及播放控制面板能为HTML5的制作增添更多动画的内容。在接下来的Hype用户界面详细解读(下)中小编将为大家介绍其他内容。

如果您还需要其他的功能介绍,或者希望学习其他使用技巧,请访问Hype 4中文网站。

作者:Noel

标签:界面场景元素

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