How Hype 3 for mac HTML5 animation production

Tumult Hype 3 for Mac is a very powerful HTML5 animation tool, easy to use keyframe-based animation system, so you do not know the code, you can create a network on their own style of animation, great!

Tumult Hype 3 for Mac Operating Instructions

Scene, timeline and animation are the basis of all Tumult Hype document. This action underlying link together and document interaction. Action trigger with five different ways:

1. response to mouse or touch events.

2. Response scene events.

3. respond to keyboard events.

4. a specific time on the time axis.

5. using JavaScript.

# Mouse and touch operation
of any element can respond to mouse and touch operation. By selecting elements, open the "actions" to check, and then click any action "plus" button next to the treatment program, the elements set the behavior. If the "touch event" is enabled in the "Documents" inspector, the event will be mapped to click operation brackets. You can detect the following six actions:
1. click (click) - complete click (mouse down and mouse up) has been completed.
2. Press the mouse (touch begin) - the pointing device is pressed on the element.
3. mouse up (touch end) - after releasing the mouse button is pressed.
4. Hover - cursor has entered the boundary element.
The output of the mouse - cursor is no longer within range of elements.
6. As you drag - has started to drag on the element indicated.
Position of control element  - a drag control element position.
Control the timeline  - the selected element in the horizontal or vertical drag the selected control playback timeline. Axis dropdown list defines whether horizontal or vertical drag the timeline control. Timeline drop-down list definition indicates the direction of forward or backward. The use of "speed" setting defines how the gesture to playing speed. Select "continue to drag the" Timeline in order to maintain momentum after the release of the player.

28145454_b3dbc89a51.png

Most mouse operation is converted to a touch operation on the logic. For example, click on the element will call touchstart of that element. For more information about touch support, see Touch & Mobile section. By default, clicking on the mobile device will trigger the start of the A
touchstart event. To change this behavior, disable the "touch event" in the "Documents" inspector.
To trigger the right mouse operations, elements may not have other elements above or overlaps.
By selecting the button to activate the mouse inspector, and then click On next to Mouse Click the plus sign button operation, setting operation on the button:

28145931_fd5b79316f.png

Action # viewport
viewport start operation is generally used to delay the movie until the scroll into view an element or elements in the outer scroll to view the animation reset.
The input viewport - this element has been scrolled into the viewport vertically.
On the "Exit Viewport" - the element has a vertical scroll beyond the viewport.
Each time a rolling element into or out of view, will trigger these operations. If the element is visible when the page is loaded, the operation will trigger immediately after the "Scene load" operation.

Action scenes #

场景动作触发以响应场景事件,并且对于场景特定的交互性非常有用。可以触发以下场景动作:
在场景加载  - 进入场景时触发。
On Scene Unload  - 离开场景时触发。
在布局加载 - 当前选定的布局加载时触发。
在布局卸载时 - 在当前选定的布局卸载时触发。
按键按下  - 按下并释放字符键时触发。
按键按下  - 按键盘键时触发。
On Key Up  - 键盘键释放时触发。
向左滑动  - 从右向左滑动场景时触发。
在向右滑动时  - 从左向右滑动场景时触发。
On On Swipe Up  - 从底部到顶部滑动场景时触发。
向下滑动  - 从上到下滑动场景时触发。
拖动  - 拖动场景区域时触发。
控制时间轴 - 在场景中水平或垂直拖动可控制所选时间轴的播放。
要深入控制拖动的元素,请参阅 文档的  JavaScript Drag API部分。
自定义行为 - 自定义行为是一组可重复使用的指令,可以从场景中的操作触发。查看“ 行为”部分以获取更多信息。

时间表行动#
时间轴操作在时间轴中的某个点触发,仅在导出或预览文档时触发。通过单击时间轴操作装订线中的加号按钮,或双击时间轴操作时间轴上的任意位置,在播放头的当前位置添加新的时间轴操作。可以通过双击关联的关键帧来编辑现有时间轴操作。

28150152_6a06b8b2df.png


通过双击其关联的关键帧来编辑现有的时间轴操作,以打开“时间轴操作”弹出窗口:

28150212_05bc741869.png


示例时间轴操作#

以下是时间轴操作可用于的几个示例:
循环  播放动画 - 要循环动画,您可以将时间轴操作设置为时间轴中的“开始时间轴”或“转到时间”,以获取相同的时间轴。
跳转到场景或运行备用时间轴  - 创建导航到场景和时间线中特定点的交互性。您可以在一个时间轴上创建多个动画,并使用“暂停”和“继续”操作在它们之间移动。

行动类型#
场景,鼠标或基于时间的事件可能的动作类型是相同的。整个Tumult Hype的动作菜单提供了对八种不同动作和一个命令的快速访问。

28150328_c561da7ffa.png

跳转到场景  - 使用以下七个场景转换之一切换到上一个,下一个或任意指定的场景:
瞬间
交叉淡入淡出
交换
推(从左到右)
推(从右到左)
推(从下到上)
推(从上到下)
注意:Swap转换仅在基于WebKit的浏览器,Firefox和Internet Explorer 10中显示。
运行JavaScript  - 调用JavaScript函数。
转到URL  - 加载URL。
撰写电子邮件  - 撰写包含可选主题行和正文字段的电子邮件。
播放声音  - 开始选定的声音。
停止声音  - 停止选定的声音。
开始时间轴  - 开始播放当前场景中的任何时间轴。
暂停时间轴  - 暂停当前场景中任何时间轴的播放。
继续时间轴  - 恢复当前场景中任何时间轴的播放。
转到时间轴中的时间  - 跳转到当前场景中任何时间轴中的指定时间。
删除  - 删除关联的操作。

链接行动#
可以触发多个动作以响应事件。例如,单击按钮可以按顺序执行以下两个操作:
转到时间轴中的时间
继续时间表
单击任何操作处理程序部分中的加号按钮会将新操作附加到操作链的末尾。

28150533_735c5c9846.png


Guess you like

Origin blog.51cto.com/14370425/2421074