Hype Interface

This book isn't about onboarding or first steps but rather about tips & tricks, extensions and advanced features. That said, a brief section about the interface is needed to establish a shared terminology. For an extensive onboarding and introduction to Hype, please buy and read the excellent tangible "A Book About Hype" by Photics.

---

Default interface explained with bullet points.

1. Toggles for the scene sidebar and the layout sidebar
2. Elements dropdown for elements supported in Hype. Choosing on will spawn it on the Stage
   • Text, Button, Textured Button, Image Video, Audio, Sprite Sheet, HTML Widget, Rectangle, Rounded Rectangle, Ellipse, Polygon, Vector Shape and Pencil
3. Symbol dropdown to create new symbols and persistent symbols. This dropdown also includes options to convert selected elements on the stage to either of the symbol types
4. Shortcuts to manipulate elements. This includes grouping, ungrouping and layer ordering
5. Scale dropdown to set the scale of the stage
6. Preview button and dropdown that allows to either click selected browser icon or on the little triangle to choose another target to preview your project in. The dropdown also allows to enable an export script to be applied on previews
7. Toggles for the inspector panel and the resource panel
8. The scene panel mentioned in (1.) contains thumbnails of your scene content
9. This is the Hype stage and the area to select, edit and animate elements
10. The inspector panel has current eight (8) tabs containing settings for the project. The tabs are sorted by context and are in cases sensitive to elements selected on the stage.
    • Document, Scene, Metrics, Element, Typography, Actions, Physics and Identity
11. Controls bar allow you to control the animation playback to preview scene in the application. This bar also contains a time index comprised of Minutes:Seconds,Frames and a timeline scale slider
12. Timeline panel that displays a list of the elements on stage and associated animations across the timeline
13. Property panel displays default and additional properties of an animation and the associated key frames across the timeline

---

Expanded interface explained with bullet points

1. Icon for a scene with multiple layouts
2. Layout panel with different layout stages associated to the selected scene
3. Rectangle element (<div>) currently being animated
4. Motion path animation using a Bézier curve for the selected element
5. Activated record button that enables automatic creation of key frames
6. Play head indicating the position in the timeline
7. Animation for the element called "Rectangle"
8. Key frames for the current animation (filled diamond shapes that are outlined if selected)
9. "Tween" indicating that between two key frames a value change occurs
10. Easing functions dropdown showing the ease "Ease In Out". The dropdown allows to choose an easing function and additionally to create custom easing functions based on a Bézier curve or on a math function
11. List of default properties and the ones that are being animated. Properties can be toggled off and on individually or in default groups with this small down arrow attached to the panel
12. Expanded resource panel with a type dropdown filter and a search function
13. Icon of an image resource with unassigned retina fallback slot
14. Options for the selected resource and a dropdown for external editors associated with the resource type by the operating system