Tumult Hype文档
如果你对于Tumult Hype不熟悉,我们的文档将是您学习所有的Hype的不可思议的功能的最好的方式。
你的学习渠道
- 加入讨论
- 去YouTube上查看教程和视频
- 去画廊下载例子
- 查看教程
- 下载有例子文件的离线文档(57MB)和没有例子的文档(11MB)
简单的提纲
概述
Tumult Hype 3 是OS X平台上用于创建HTML5的一款程序。由Hype创建的互动式内容和动画可以在PC,智能手机和iPad上使用。
场景
场景是用来将内容分开组织的非常有用的方式。他们相当于PPT或者Keynote中的侧边栏。
元素
元素是场景里的对象。他们可以是形状,文字,按钮,有纹理的按钮,图像,视频,或者HTML 插件。
动画
Tumult Hype 使用的是基于帧的动画系统,来对元素进行移动和变换。它的记录功能使得创建动画十分容易。
时间线
时间线包括了动画。每个场景至少拥有一条时间线,场景也可以同时包含多条时间线。通过使用操作中的开始,暂停,继续时间线可以创建出复杂多样的文件出来。
操作
场景,时间线和动画是所有的Tumult Hype文件的基础。操作则将这些基础联系在一起,使得文件是可以交互的。
响应式布局
响应式布局使得我们可以对于同样的一个场景创建多种不同的布局,从而达到可以在不同的特定的视图中展现不同的布局的效果。
可变换的布局
一个强大的可以用来调整文档和元素尺寸大小的布局系统,可变换的布局使得我们的Hype的动画可以根据浏览器窗口和设备窗口的改变而改变。
物理量
物理量使得我们可以控制一个元素的物理属性:弹性,摩擦力,空气阻力,密度,以及场景重力物理量。
符号
符号是一个能够使你可以简单的重复利用元素,时间线以及动画的强大工具。
字体
文字大小和布局的控制,支持谷歌字体和自定义字体。
音频和视频
Tumult Hype 支持通过最新的HTML5的音频和视频的API,来创造还有丰富的多媒体内容的文档。
接触和移动
Tumult Hype提供了多种可以产生友好互动的选择。
Hype Reflect
Hype Reflect是使得你可以在任何的iOS设备上快速预览和查看你的Tumult Hype文件的iOS软件。
预览和导出
在本地浏览器上预览你的Tumult Hype文档,以及将您的文档导出为web支持的格式。
资源库
资源库包含了所有的被添加至Tumult Hype文档的图像,视频,javascript函数以及其他文件。
JavaScript
Tumult Hype中的JavaScript函数大都是为了响应用户操作而运行的。
模版
模版是“冻干“的Hype文档——打开一个Hype的模版就是创建时一个基于打开的模版的新文档。
检查器
Tumult Hype的九个检查器提供了方便的修改文档,场景,元素属性的方式,同时还提供了一系列的其他的控制方式。
快捷键
探索Tumult Hype的大量的键盘快捷键来使得我们更高效的工作。
版本历史
历数我们自2011年3月20日以来发布的所有的版本。
正文部分
概述
Tumult Hype是一个OS X上的创建HTML5的软件。由其创建的交互式的内容和动画可以在笔记本,智能手机和iPad上播放。
用Tumult Hype创建出美丽的动画内容,来使你的网页浏览者们惊叹吧!
Tumult Hype是一款HTML5创作工具。我们常提到的HTML5其实是一个包含了最新的HTML标签,CSS格式和改进的Javascript体验的一个技术平台。HTML5可以给你带来极好的视觉体验以及舒畅的动画,但是前提是,你需要复杂的编程
Tumult Hype的强大的基于帧的动画的技术,使得你的创作内容活起来了,我们的产出的可以称得上艺术的HTML5的内容可以在几乎所有的现代的浏览器和移动终端(例如iPad和iPhone)上使用。不需要编程。
Tumult 专业版
Tumult Hype 专业版可以通过内嵌购买得到,拥有许多的相对应于Hype3的升级功能。
- 响应式的布局
- 物理量
- 创建可重复使用的符号
- 主要内容的持久符号
- 黑色的交互主题
- 可编辑的时间函数
- 网格线
- 可重新布局的交互页面
- 模版
- 自定义行为
Tumult Hype 专业版的交互
![Interface pro][pro]
[pro]: http://tumult.com/hype/documentation/3.0/images/[email protected] "Hype Professional Interface"
使用者指南会带你完整的了解整个产品,同时给出详细有深度的关于Tumult Hype及其专业版的工作细节。为了帮助您区别标准版本和专业版本的功能,所有的文档内的章节中包含专业版本功能的将会标示上以下的标签:任何没有这个标签的章节部分则为在专业版和普通版中都共有的功能。
HYPE PRO ONLY
Tumult Hype的交互
![Interface][base]
[base]:http://tumult.com/hype/documentation/3.0/images/[email protected] "Hype Interface"
Tumult Hype还提供了大量的检查器来操作我们的文档,场景,元素等。我们将会在检查器的章节着重讨论这个内容。
Tumult Hype专业版的交互
在Tumult Hype专业版中,两个功能被解锁了:专业黑色版本和自定义用户行为。
![dark][dark]
[dark]:http://tumult.com/hype/documentation/3.0/images/[email protected] "Theme"
如果你愿意,你可以在用户偏好设置里将主题改回标准版本。
点击并且拖曳检查器,场景,布局检查器或者时间线部分的自定义检查器手柄,来将各部分调至你想要的尺寸。
![drag][drag]
[drag]:http://tumult.com/hype/documentation/3.0/images/[email protected] "drag"
自定义视图手柄
当你拖动视图的时候,Tumult Hype会高亮显示附近的可放置区域。
关键术语
使用Tumult Hype我们需要知道7个专业术语:场景,元素,属性,关键帧,动画,时间线,操作。下面我们会逐一的解读这些术语。与此同时,熟练的掌握这些术语,你将会与其他的Tumult Hype使用者无障碍的交流。
场景
每个Tumult Hype文档都是由一个或者多个场景组成。这里的场景类似于Keynote或者PPt的侧边栏。场景包含了元素和时间线。操作用于不同的场景之间的切换。
元素
元素是指的场景中的可以操作的对象。他们可以是形状,文本,按钮,有纹理的按钮,图像,视频,或者HTML小组件。
属性
属性是指的那些定义元素的格式,位置以及辅助信息的值。大多的属性是可以动画化的。属性是通过操作场景编辑器中的元素来定义或者改变,也可以通过改变检查器中的值来改变。对于绝大多数元素,属性可以定义元素的位置,大小,颜色,边框,或者是应用在这个元素上的一些作用。
关键帧
关键帧是用来定义时间线上某一特定时间的属性值的。
动画
动画在一段时间里改变某一属性的值。他们通过两个关键帧来定义,这个两个关键帧是用来设定动画的开始和结束时候的属性值的。Tumult Hype将会自动在任何的拥有不同的值的关键帧之间创建动画。动画还拥有不同的进出的效果,不同的转变的速度,比如说:渐入,渐入,渐入渐出,立即,弹性,线性。进一步的,通过使用移动路径,元素可以沿着任意的复杂的曲线动作。
时间线
时间线包含动画。每个场景有一个主时间线,将会在该场景出现的时候,自动开始。场景可以拥有不同的时间线,这些时间线可以与主时间线平行的播放,同时我们可以通过操作来控制时间线的播放。
操作
操作可以使得你的文档互动起来。在这些概念中,操作是用来改变场景,控制时间线播放,开始或者停止声音,运行自定义的JavaScript程序。操作通过用户的行为触发,比如说点击鼠标或者触控手势;也可以是场景行为,比如说场景加载,或者时间线播放完成等。操作也可以被放置在某一时间线中,在某个特定的时间触发。
符号
符号是用来让你方便的重复利用元素,时间线,以及动画的强大的工具。你可以将符号理解为场景内的场景:符号包含自己的元素,时间线,操作,以及可以独立于场景被单独触发的行为。因为编辑某一个符号可以改变所有的符号内容,所以符号可以用在不同的场景间分享同一相同元素,或者在同一场景内不同位置分享同一元素。
行为
自定义行为使得你可以像Hype内置的可以触发的操作手柄一样创建属于你自己的操作手柄。和Hype的内置的操作手柄一样,你自己的自定义行为可以出发一系列的操作。行为保证了你在创建和使用复杂的操作的时候不需要重复性工作。
场景
场景是用来区分和组织内容的有效方式。他们类似于Keynote和PPt的侧边栏。场景包括了元素和时间线。操作用来进行不同的场景之间的转换。每个场景包含了一组独有的元素和时间线;修改某个场景内的元素或者时间线不会影响到别的场景里的时间线或者元素。
场景操作
每一个Tumult Hype 文档都是默认由一个场景开始。场景菜单有以下几个选项可以让我们用来进行场景操作。
- 新场景-创建新的场景并且选择新场景进行编辑。
- 复制场景-创造一个与当前场景完全一致的场景,复制当前场景的所有的元素,时间线和动画。
- 复制场景(不包括动画)-创建一个与当前场景完全一样的场景,复制当前场景的所有的元素,但是不包括当前场景的时间线和动画。这个命令十分的有用,常常用来创建那些复杂的需要跨越多个场景的动画。
- 删除场景-删除当前场景,去除所有的相关的元素,时间线和动画。
- 转到场景-提供了一个子菜单,包含了所有的当前文档的场景,选择其中一个,然后编辑这个场景。
Tumult Hype的场景检查器——由工具栏的显示场景按钮切换——提供了另外一种对于场景的控制。创建新的场景使用增加场景按钮+,重新对场景进行排序可以拖动放置,而重命名场景则可以双击名称。同样的,场景可以通过在场景检查器部分被选择,然后选择编辑>复制,然后选择编辑>粘贴。
默认的,所有的文档里的场景都是一样的尺寸的,而且,选择别的默认尺寸或者改变场景的长宽会改变所有的场景。为了仅仅改变现有的场景的大小,我们可以将场景检查器里的“应用到所有场景”不勾选。
正在活跃的场景的背景颜色的设定是通过场景检查器里颜色选择中的背景颜色来实现的。为了使得当前的文档透明,同时保证其他的文档不会因此改变他们的背景颜色,打开文档检查器,取消选中选项部分的将选择应用至所有场景。
改变场景
操作用于不同场景之间的切换。Tumult Hype有很多种的触发操作的方式,比如说鼠标操作里的单击鼠标,场景事件里的时间线完成,或者是在时间线里的某一特定时间。所有的这些触发操作都可以引发通过不同的场景切换方式转到另一个场景。操作章节会有更多的关于Tumult Hype的操作触发的内容,以及不同的操作,比如说转到另一场景。
标尺
通过选择查看>显示标尺来现实场景标尺,通过相应的查看>隐藏标尺命令可以隐藏标尺。Tumult Hype通过标尺可以显示目前所选中的元素的边界。
指南
视图指南在元素在场景上被移动的时候出现和消失。指南帮助元素的排队——对应其他的元素,相对于整个场景的位置。默认的,元素自动对齐至附近的指南,这一行为可以通过取消选中视图菜单中的对齐至指南命令来关闭。
场景和所有的元素都自动的定义了他们的视图指南。场景的自动指南定义了它的边缘和中心,类似的,每个元素的自动指南也自动的定义了他的中心和边缘。
我们也可以向场景添加手动的指南。通过选中视图>指南>添加水平指南或者添加垂直指南。手动创建的指南可以被拖动至场景的任意位置,也可以把他们拖动出创建来删除它们。视图>指南菜单功能里包括了显示,隐藏,锁定,复制和粘贴指南等功能。
在视图>指南菜单中有一个十分有用的功能——添加布局指南命令。选择这个指令会出现一个选择创建哪个指南的对话菜单。从这个菜单中,你可以创建指定数目的行或者列,或者两个指南之间的距离。布局指南可以安排内容行列对齐。
网格系统
HYPE PRO ONLY
为了帮助大家能够很好的排布我们的内容,Hype Pro支持布局网格。Hype Pro的布局网格采用最流行的960网格系统的精神,来帮助你方便的创建列,以及排布列间距,使得你可以很好的排布内容。
想要创建布局网格,请选择视图>布局网格>创建网格命令。在布局网格编辑器中,你可以设定布局网格的宽度,也可以定义列的数量,还可以设置两列之间的距离。
单击创建网格将添加一个覆盖到当前场景,同时定义了网格的栏和栏间距。元素对齐到网格,使得你可以很好的对应着网格安排你的内容。同时,因为有用户指南和智能指南,我们可以通过拖动的时候按下命令键,来禁用元素对齐功能。类似的,对齐功能可以通过选择禁用视图>对齐元素菜单来永久禁用这个功能。如果你想要通过网格功能来视图元素,但是不想覆盖在场景上,选择视图>布局网格>隐藏网格;重新显示网格则选择视图>布局网格>显示网格。
改变目前的布局网格的设置:选择视图>布局网络>编辑网格,而取消网格则是视图>布局网格>去除网格。
元素
元素是指在场景上的对象。他们可以是形状,文字,按钮,有纹理的按钮,图像,视频,音频或者HTML小组件
文字
通过插入>文字菜单选项,向目前的场景中添加文字,或者通过使用元素工具栏按钮。文字检查器可以允许你更改选中元素的字形,大小,颜色,格式,阴影,间隔等。