### Hype Reflect Preview and Connection Source: https://github.com/tumult/hype-documentation/blob/main/README.md Guides users on connecting Tumult Hype projects to Hype Reflect on iOS devices for live previewing. Covers initial setup, network requirements, and the preview process. ```APIDOC Hype Reflect Connection and Preview: Purpose: To preview Tumult Hype documents on iOS devices in real-time. Steps: 1. Download Hype Reflect from the iOS App Store. 2. Ensure your Mac and iOS device are on the same Wi-Fi network. 3. In Tumult Hype, navigate to the Preview menu in the toolbar. 4. Select your iOS device from the list to initiate the preview. Requirements: - Tumult Hype installed on Mac. - Hype Reflect app installed on iOS device. - Both devices connected to the same Wi-Fi network. Behavior: - The Hype document will appear on your iOS device in Hype Reflect. - The preview closes if Tumult Hype is closed or the Wi-Fi connection is lost. Related Features: - Mirror Mode - Preview Mode - Responsive Preview Mode ``` -------------------------------- ### Tumult Hype Scene and Element Guides Source: https://github.com/tumult/hype-documentation/blob/main/README.md Commands for managing visual guides and rulers in Tumult Hype to assist with element placement and alignment. Includes showing/hiding rulers, adding manual guides, and managing automatic guides. ```APIDOC View > Show Ruler - Displays the scene ruler. View > Hide Ruler - Hides the scene ruler. View > Guides > Add Horizontal Guide - Adds a new horizontal guide to the scene. View > Guides > Add Vertical Guide - Adds a new vertical guide to the scene. View > Guides > Add Multiple Guides - Opens a dialog to create multiple evenly-spaced guides based on count or spacing. View > Guides > Show Guides - Makes all guides visible. View > Guides > Hide Guides - Makes all guides invisible. View > Guides > Lock Guides - Prevents guides from being moved or deleted. View > Guides > Unlock Guides - Allows guides to be moved or deleted. View > Guides > Copy Guides - Copies all guides to the clipboard. View > Guides > Paste Guides - Pastes guides from the clipboard. Arrange > Snap to Guides - Enables or disables elements snapping to nearby guides. Note: Elements automatically generate guides for their center and edges. Scene edges and center also generate automatic guides. ``` -------------------------------- ### Tumult Hype Element Arrangement and Guides Source: https://github.com/tumult/hype-documentation/blob/main/README.md Covers the tools and features within Tumult Hype for arranging, distributing, and sizing elements on the scene. It highlights automatic guides and snapping behavior for precise placement. ```APIDOC APIDOC: // Element Positioning and Sizing Scene Editor - Primary interface for rearranging and resizing elements. // Automatic Guides Scene Border Guides - Guides appear based on the scene's boundaries. Element Guides - Guides appear based on the positions of other existing elements. // Snapping Behavior Resizing Snapping - Elements snap to match the width or height of other elements. // Advanced Placement Control Guides System - Refer to the [guides](#guides) section for more details. Grid System - Refer to the [grid system](#grid-system) section for more details. ``` -------------------------------- ### Tumult Hype Export Script Management Source: https://github.com/tumult/hype-documentation/blob/main/README.md Details on how to install, name, and manage Tumult Hype export scripts, including Python script requirements and permissions. This covers script naming conventions, installation directories based on Hype distribution, and the necessity of executable permissions. ```APIDOC Export Script Naming Convention: - Must have a recognizable script extension (.sh, .py, .rb, etc.). - Must include "hype-export" within the filename (e.g., "DoubleClickStudio.hype-export.py"). Installation Paths (User's Library/Application Scripts): - Tumult Store & Mac App Store: "~/Library/Application Scripts/com.tumult.Hype4/" - Setapp: "~/Library/Application Scripts/com.tumult.hype-setapp/" - Beta: "~/Library/Application Scripts/com.tumult.Beta.Hype4/" Permissions: - Export Scripts must have executable permissions. - Command: chmod 755 [filename] Python Export Script Enabler: - Required for macOS 12.3+ (Monterey) due to Python removal. - Download and install: "PythonExportScriptEnabler.pkg" - Note: This is now included with individual Export Script installations from Tumult's website. ``` -------------------------------- ### JavaScript Audio Control Examples Source: https://github.com/tumult/hype-documentation/blob/main/README.md References to advanced techniques for controlling audio using JavaScript, including playing and controlling audio externally and detecting when audio has ended. These are typically implemented via Hype's JavaScript API. ```APIDOC JavaScript Audio Control: - **Playing and Controlling Audio with JavaScript**: For advanced control, including referencing audio files hosted externally or complex playback logic, refer to Hype's JavaScript API. This often involves using functions like `hypeDocument.playAudio()` or `hypeDocument.stopAudio()` with specific audio group names. - **Detecting Audio End**: Implement JavaScript to run code when an audio element finishes playing. This can be achieved by listening for specific events or using Hype's timeline/animation event listeners in conjunction with audio playback. **Example (Conceptual JavaScript for playing an audio group)**: ```javascript // Assuming 'myAudioGroup' is the name of your audio group in Hype hypeDocument.playAudio('myAudioGroup'); ``` **Example (Conceptual JavaScript for stopping an audio group)**: ```javascript // Assuming 'myAudioGroup' is the name of your audio group in Hype hypeDocument.stopAudio('myAudioGroup'); ``` **Note**: Consult the Tumult Hype JavaScript documentation for precise function signatures and usage. ``` -------------------------------- ### Hype Vector Shape Line Cap Example Source: https://github.com/tumult/hype-documentation/blob/main/README.md This snippet embeds an interactive example demonstrating the 'Line Cap' property for vector shapes in Tumult Hype. It illustrates how different line cap styles (Butt, Round, Square) affect the appearance of open paths. ```JavaScript
``` -------------------------------- ### Identity Inspector HTML Export Example Source: https://github.com/tumult/hype-documentation/blob/main/README.md Demonstrates how setting various attributes in the Identity Inspector, such as Alternate Text, Tab Index, Unique Element ID, Class Name, and Additional HTML Attributes, translates into the final exported HTML for an element. ```html
Next Scene
``` -------------------------------- ### Hype Export Script Preferences Source: https://github.com/tumult/hype-documentation/blob/main/README.md Visual representation of how export scripts appear in Tumult Hype's preferences pane after successful installation and recognition. ```APIDOC Image: Hype Exports in Preferences - Source: https://raw.githubusercontent.com/tumult/hype-documentation/refs/heads/main/images/ExportScriptsPreferences.png - Alt Text: Hype Exports in Preferences - Dimensions: width="482" ``` -------------------------------- ### Video Playback Controls Source: https://github.com/tumult/hype-documentation/blob/main/README.md Describes common attributes used to control video playback behavior in web browsers, often configured via Hype's Element inspector. These attributes influence how videos start, display controls, loop, and handle audio on different devices. ```APIDOC Video Element Attributes: Autoplay: Description: Video will play automatically when the element is displayed. Compatibility Note: Often requires the 'Muted' attribute to be enabled for autoplay to function, especially on mobile devices. Controls: Description: Displays standard video playback controls (play/pause, volume, seek bar) to the user. Inline (iOS): Description: Adds the `playsinline` attribute, preventing videos from automatically entering fullscreen mode on iOS devices. Essential for autoplaying video with audio on iOS. Loop: Description: The video will restart from the beginning once it reaches the end. Muted (needed for iOS Autoplay): Description: Suppresses the audio output of the video. This is often a requirement for videos to autoplay, particularly on iOS and some desktop browsers. ``` -------------------------------- ### Load jQuery in HTML Head Source: https://github.com/tumult/hype-documentation/blob/main/README.md Example of how to include the jQuery library in the section of an exported HTML document. This is often a prerequisite for using jQuery functions to manipulate Hype elements. ```html ``` -------------------------------- ### Timeline Control Functions Source: https://github.com/tumult/hype-documentation/blob/main/README.md Functions for controlling the playback of timelines within Tumult Hype scenes, including starting, pausing, continuing, and seeking within timelines. ```javascript hypeDocument.startTimelineNamed(timelineName, direction) // Description: Starts the specified timeline at the beginning for the current scene. // Parameters: // timelineName: The name of the timeline to start. // direction: The direction to play the timeline. Use hypeDocument.kDirectionForward or hypeDocument.kDirectionReverse. // Note: Timelines are user-defined and uniqueness is not enforced. Ensure timeline names are unique within a scene. ``` ```javascript hypeDocument.pauseTimelineNamed(timelineName) // Description: Pauses the specified timeline for the current scene. // Parameters: // timelineName: The name of the timeline to pause. ``` ```javascript hypeDocument.continueTimelineNamed(timelineName, direction, canRestartTimeline) // Description: Continues the specified timeline where it left off for the current scene. // Parameters: // timelineName: The name of the timeline to continue. // direction: The direction to play the timeline. Use hypeDocument.kDirectionForward or hypeDocument.kDirectionReverse. // canRestartTimeline: (Optional) If true, the timeline will restart from the beginning if it has already reached the end. Defaults to false. // Example: hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, true) ``` ```javascript hypeDocument.goToTimeInTimelineNamed(timeInSeconds, timelineName) // Description: Jumps to a specific time in the specified timeline for the current scene. // Parameters: // timeInSeconds: The time in seconds to jump to. // timelineName: The name of the timeline to seek within. ``` ```javascript hypeDocument.currentTimeInTimelineNamed(timelineName) // Description: Returns the current time of the specified timeline in seconds. // Parameters: // timelineName: The name of the timeline. // Returns: The current playback time in seconds. ``` ```javascript hypeDocument.durationForTimelineNamed(timelineName) // Description: Returns the duration of the specified timeline in seconds. // Parameters: // timelineName: The name of the timeline. // Returns: The total duration of the timeline in seconds. ``` ```javascript hypeDocument.currentDirectionForTimelineNamed(timelineName) // Description: Returns the current playback direction of the specified timeline. // Parameters: // timelineName: The name of the timeline. // Returns: The current direction (e.g., hypeDocument.kDirectionForward or hypeDocument.kDirectionReverse) as a number. ``` -------------------------------- ### Control Scene Transitions with JavaScript API Source: https://github.com/tumult/hype-documentation/blob/main/README.md These examples show how to use the Tumult Hype JavaScript API to trigger scene transitions from HTML elements. They utilize inline onclick handlers to call methods like `showSceneNamed` and `showNextScene`, passing scene names and transition constants. ```html ``` ```html Go to the Red Scene. ``` ```html Crossfade to next Scene. ``` -------------------------------- ### Tumult Hype Document API Source: https://github.com/tumult/hype-documentation/blob/main/README.md Provides access to document-level information and element manipulation within Tumult Hype projects. Includes methods for getting document names, IDs, resource URLs, functions, custom data, and interacting with DOM elements via their unique IDs. ```APIDOC hypeDocument.documentName() - Returns the name of the document. - Can be used to access the document via `HYPE.documents[documentName]`. hypeDocument.documentId() - Returns the ID of the container div for the document. - Useful for retrieving the DOM element using `document.getElementById()`. hypeDocument.resourcesFolderURL() - Returns the URL string for the document's resources folder. - Use this to reference assets added via the Resource Library. hypeDocument.functions() - Returns an array of all user-defined JavaScript functions within the Tumult Hype Document. hypeDocument.customData - An object for storing user-defined data associated with the Tumult Hype Document. - Example: `hypeDocument.customData.myVariable = 'some value';` hypeDocument.getElementById(id) - Searches the current document for an element with the specified unique ID. - Returns the DOM HTML Element. - Recommended over `document.getElementById()` as Hype may reassign IDs to prevent collisions. - Parameters: - id: The unique element ID (string). - Returns: The DOM HTML Element or null if not found. hypeDocument.getElementProperty(element, propertyName) - Retrieves a specific property of a given DOM element based on Hype's runtime knowledge. - Parameters: - element: The DOM element (obtained via `hypeDocument.getElementById()`). - propertyName: The name of the property to retrieve (string). - Valid property names (quotes required): - 'top', 'left', 'width', 'height', 'rotateZ', 'scaleX', 'scaleY', 'opacity', 'z-index', 'background-image' - Physics property names (Hype Professional only): - 'physics-engine': A Matter.js Engine object. - 'physics-body': A Matter.js Body object. - 'physics-bounce', 'physics-friction', 'physics-air-drag', 'physics-density' - 'physics-body-type': Can be `hypeDocument.kPhysicsBodyTypeDead`, `hypeDocument.kPhysicsBodyTypeStatic`, or `hypeDocument.kPhysicsBodyTypeDynamic`. - Returns: The value of the specified property. hypeDocument.setElementProperty(element, propertyName, value, optionalDuration, optionalTimingFunctionName) - Sets a property of a DOM element in a manner compatible with the Hype runtime. - If `optionalDuration` is provided, it animates the property change. - Parameters: - element: The DOM element (obtained via `hypeDocument.getElementById()`). - propertyName: The name of the property to set (string). - value: The new value for the property. - optionalDuration: The duration of the transition in seconds (defaults to 0 for instant change). - optionalTimingFunctionName: The timing function for the animation (string, defaults to 'easeinout'). - Valid property names (quotes required): - 'top', 'left', 'width', 'height', 'rotateZ', 'scaleX', 'scaleY', 'opacity', 'z-index', 'background-image' - Physics property names (pro only): - 'physics-bounce', 'physics-friction', 'physics-air-drag', 'physics-density' - 'physics-body-type': Can be `hypeDocument.kPhysicsBodyTypeDead`, `hypeDocument.kPhysicsBodyTypeStatic`, or `hypeDocument.kPhysicsBodyTypeDynamic`. - Valid timing function names (quotes required): - 'easeinout', 'easein', 'easeout', 'linear' - Custom timing functions can be provided as a JavaScript function `function(t, start, dur) { /* return percent complete */ }`. - Example: ```javascript var towerHeight = hypeDocument.getElementProperty(tower, 'height'); hypeDocument.setElementProperty(tree, 'height', towerHeight, 2.0, 'easeout'); ``` - Example with custom timing function: ```javascript function NewTimingFunction (t, start, dur) { return Math.cos(t) * Math.sin(t); } hypeDocument.setElementProperty(element, 'left', 100, 5.0, NewTimingFunction); ``` hypeDocument.relayoutIfNecessary() - Explicitly triggers a relayout of all elements and groups for the current scene. - Use this when the bounding size of the main container has been changed externally, especially with flexible layouts. ``` -------------------------------- ### Physics Simulation Tips and Techniques Source: https://github.com/tumult/hype-documentation/blob/main/README.md Offers practical advice for implementing and optimizing physics simulations in Tumult Hype. It covers aspects like simulating top-down views, applying forces via keyframes, and creating invisible boundaries. ```APIDOC Physics Simulation Tips: - Top-Down Simulation: Set scene gravity to 0 and use the 'Air Drag' property as surface friction. - Applying Forces: Use traditional keyframe animations for 'top' and 'left' properties. Ensure the timing function is linear to maintain consistent velocity, as eased-out animations can incorrectly reduce speed. - Invisible Boundaries: Create a rectangle, set its physics type to 'static', and make its opacity 0 to form an impassable edge for dynamic elements. ``` -------------------------------- ### HTML for Site Icons and Startup Images Source: https://github.com/tumult/hype-documentation/blob/main/README.md This HTML snippet configures various site icons (favicon, Apple Touch Icons, Safari pinned tab icon) and startup images for web applications. It uses the `${resourcesFolderName}` variable to reference image assets located within the exported project's resources folder. ```html ``` -------------------------------- ### Tumult Hype Element Snapping Source: https://github.com/tumult/hype-documentation/blob/main/README.md Controls for element snapping behavior in Tumult Hype, allowing elements to align to guides, grids, and scene edges. ```APIDOC Arrange > Snap Elements - Toggles the global snapping behavior for elements to guides and grids. Temporary Snapping Override: - Hold the Command key while dragging an element to temporarily disable snapping. ``` -------------------------------- ### Image Element Creation and Manipulation Source: https://github.com/tumult/hype-documentation/blob/main/README.md Details how to import and manage image elements, including aspect ratio constraints, restoring original size, and converting images to vector shapes. Mentions background properties for tiling. ```text Import Image via Menu: Insert > Image Import Image via Toolbar: Elements toolbar button Drag-and-Drop Import: Drag from file system or Media Browser Copy/Paste Import: Paste from other applications Disable Constrain Proportions: Deselect 'Constrain Proportions' in Metrics inspector Restore Original Size: Click 'Original Size' button in Metrics inspector Convert to Vector Shape: Select image, then Edit > Convert to Vector Shape Configure Tiling: Element inspector’s Background section ``` -------------------------------- ### Hype Reflect Preview Modes Source: https://github.com/tumult/hype-documentation/blob/main/README.md Details the different modes available in Hype Reflect for previewing and testing Tumult Hype documents, including Mirror Mode, standard Preview Mode, and Responsive Preview Mode. ```APIDOC Hype Reflect Preview Modes: 1. Mirror Mode: - Functionality: Instantly mirrors every change made in Tumult Hype. - Enable: Tap the icon. - Use Case: Ideal for real-time design iteration on iOS content. 2. Preview Mode: - Functionality: Document behaves similarly to viewing in Mobile Safari. - Scene Switching: Tap the Scenes icon (upper left) to switch scenes. - Reloading: Tap the reload button to refresh with the most recent changes. 3. Responsive Preview Mode (HYPE PRO ONLY): - Functionality: Tests Responsive Layouts and Flexible Layouts. - Enable: Tap the responsive preview icon. - Behavior: Device icons appear at the bottom for switching widths; drag handles appear for resizing. - Requirements: Hype Professional, iPhone 6 or larger device for previewing. - Benefit: Allows testing across various iOS device widths, with iPad recommended for broader coverage. ``` -------------------------------- ### Animation Timing Functions Overview Source: https://github.com/tumult/hype-documentation/blob/main/README.md Details the various animation timing functions supported by Tumult Hype, explaining their behavior and how they affect animation smoothness and dynamics. Includes default settings and methods for changing easing. ```APIDOC Timing Functions: - Instant: Property jumps to the ending keyframe value at the ending keyframe time. - Linear: Constant, steady change between start and end keyframe values. - Ease In: Accelerates from the start towards the end value. - Ease Out: Decelerates from the start towards the end value. - Ease In Ease Out (Default): Accelerates in the first half, decelerates in the second. - Bounce: Quickly changes towards the end value, then bounces off it twice. - Back: Slightly overshoots the target value and then returns. Changing Easing: - Select an animation bar between keyframes. - Choose a timing function from the Easing menu in the Timeline view's inspector. - Alternatively, double-click an animation bar to open a pop-up with the Easing menu. ``` -------------------------------- ### Hype Gesture Event Phases Source: https://github.com/tumult/hype-documentation/blob/main/README.md Accesses the phase of a drag gesture within Hype's event object. Useful for determining if a drag has started, moved, ended, or been canceled. ```javascript hypeDocument.kHypeGesturePhaseStart hypeDocument.kHypeGesturePhaseMove hypeDocument.kHypeGesturePhaseEnd hypeDocument.kHypeGesturePhaseCancel ``` -------------------------------- ### Tumult Hype Layout Grid System (Pro) Source: https://github.com/tumult/hype-documentation/blob/main/README.md Commands for creating, managing, and editing layout grids in Tumult Hype Pro, which aids in arranging content using columns and gutters. Elements snap to the grid overlay. ```APIDOC View > Layout Grid > Create Grid - Opens the Layout Grid Editor to define grid properties (width, columns, gutter). - Adds a grid overlay to the current scene. Arrange > Layout Grid > Edit Grid - Opens the Layout Grid Editor to modify the settings of the existing grid. Arrange > Layout Grid > Show Grid - Makes the layout grid overlay visible if it was hidden. Arrange > Layout Grid > Hide Grid - Makes the layout grid overlay invisible. Arrange > Layout Grid > Remove Grid - Deletes the current layout grid from the scene. Note: Elements snap to the grid. Snapping can be temporarily disabled by holding the Command key while dragging, or permanently disabled via Arrange > Snap Elements. ``` -------------------------------- ### Tumult Hype Runtime JavaScript Files Source: https://github.com/tumult/hype-documentation/blob/main/README.md These are the core JavaScript files that power Tumult Hype documents. The `.full.min.js` version includes all necessary JavaScript for broad browser compatibility, including older versions of Internet Explorer. The `.thin.min.js` version is optimized for modern browsers. The `.waypoints.min.js` file is included specifically when using viewport-based actions. ```javascript HYPE-###.full.min.js - The main runtime for Tumult Hype documents. Contains entire runtime including JavaScript required by IE6–8 for compatibility. ``` ```javascript HYPE-###.thin.min.js - The main runtime for Tumult Hype documents used by modern browsers. ``` ```javascript HYPE-###.waypoints.min.js - Included when using Viewport actions. ``` -------------------------------- ### Tumult Hype Managing Custom Slice Configurations Source: https://github.com/tumult/hype-documentation/blob/main/README.md Actions for managing custom export configurations (slices) within Tumult Hype's Advanced Export panel, including creation, deletion, and setting default options. ```APIDOC Custom Slice Configuration Management: Tools for creating, deleting, and managing default settings for export slices. - Creating a configuration (slice): Action: Click the '+' button located at the bottom left-hand corner of the Advanced Export panel. Purpose: Adds a new, distinct export configuration to the list. - Deleting a configuration (slice): Action: Select the slice to be removed from the list and click the '-' button. Purpose: Removes the selected export configuration. - Saving a default configuration: Action: Select the desired slice configuration and choose an option from the 'Default Options' dropdown menu. Purpose: Sets the selected slice's options as the default for any new slices created subsequently. ``` -------------------------------- ### Tumult Hype Z-Ordering and Pointer Events Source: https://github.com/tumult/hype-documentation/blob/main/README.md Explains how to manage the stacking order (Z-order) of elements and control how elements interact with pointer events (mouse clicks, touches). ```APIDOC Z-Ordering and Pointer Events: Element stack order can be modified via: - Arrange menu: Bring Forward, Bring to Front, Send Backward, Send to Back. - Toolbar buttons: Front, Back. - Element List: Dragging and dropping elements or groups to reorder. To pass clicks or touches through an element: - Select the element. - In the Actions inspector, check the 'Ignore all pointer events' option. ``` -------------------------------- ### Reference Poster Image in HTML Source: https://github.com/tumult/hype-documentation/blob/main/README.md Poster images can be referenced in HTML using the `${resourcesFolderName}` variable combined with the poster image's export name. For example, to reference a poster named 'poster@2x.jpg', use the variable. If the poster is named 'poster.jpg', use that name instead. ```html ``` -------------------------------- ### Audio Source Grouping Source: https://github.com/tumult/hype-documentation/blob/main/README.md Demonstrates the convention for creating audio groups in Tumult Hype by using identically named files with different audio formats. This allows the browser to select the most compatible format automatically. ```Media Formats whalesounds.mp3 whalesounds.ogg ``` -------------------------------- ### Tumult Hype Keyframe Types: Absolute vs. Relative Source: https://github.com/tumult/hype-documentation/blob/main/README.md Explains the distinction between absolute and relative keyframes in Tumult Hype timelines. Absolute keyframes set specific property values, while relative keyframes use the element's current values as the starting point for animation. ```APIDOC Keyframe Types in Tumult Hype Timelines: 1. **Absolute Keyframes (Default):** - **Behavior:** When triggered, elements animated by these keyframes have their properties set to the values defined by the starting keyframes. The animation then proceeds to the ending keyframe values. - **Use Case:** Useful for effects like looping, where elements need to return to a predefined initial state. - **Visual Indicator:** Drawn as a diamond shape in the Scene Inspector. 2. **Relative Keyframes:** - **Behavior:** When triggered, elements animated by these keyframes use their current property values as the starting point. The animation then proceeds to the values set by the ending keyframes. - **Use Case:** Handy for complex animations where elements should animate from their current state, regardless of a predefined initial state. Can be used to create smooth animations across timelines. - **Visual Indicator:** Drawn as a circle shape in the Scene Inspector. - **Uncertainty Indicator:** If a relative animation's start and end values are the same, the animation bar is drawn slightly transparent, indicating it might not have an effect unless the element's current value differs from the start value. **How to Make a Timeline Relative or Absolute:** - Open the Scene inspector. - Select the 'Relative' checkbox in the timeline's entry within the Animation Timelines table. ``` -------------------------------- ### Tumult Hype Arrange Menu Commands Source: https://github.com/tumult/hype-documentation/blob/main/README.md Provides a comprehensive list of commands available in the Arrange menu for manipulating element positioning, distribution, alignment, and sizing. These commands facilitate precise layout control and organization of elements on the scene. ```APIDOC Arrange Menu Commands: - Bring Forward: Moves the selected element one layer up in the stacking order. - Bring to Front: Moves the selected element to the topmost layer. - Send Backward: Moves the selected element one layer down in the stacking order. - Send to Back: Moves the selected element to the bottommost layer. - Distribute > Horizontally: Evenly spaces selected elements horizontally. - Distribute > Vertically: Evenly spaces selected elements vertically. - Distribute > Horizontally Within Selection: Distributes elements horizontally within the bounds of the selection. - Distribute > Vertically Within Selection: Distributes elements vertically within the bounds of the selection. - Align > Left: Aligns the left edges of selected elements. - Align > Center: Centers selected elements horizontally. - Align > Right: Aligns the right edges of selected elements. - Align > Top: Aligns the top edges of selected elements. - Align > Middle: Centers selected elements vertically. - Align > Bottom: Aligns the bottom edges of selected elements. - Size > Make Same Width: Sets the width of all selected elements to match the first selected element. - Size > Make Same Height: Sets the height of all selected elements to match the first selected element. - Size > Make Same Size: Sets the width and height of all selected elements to match the first selected element. ``` -------------------------------- ### Hype Scene and Timeline Management Source: https://github.com/tumult/hype-documentation/blob/main/README.md Provides functions to control scene navigation and timeline playback. Allows for programmatic control over the Hype presentation flow. ```javascript hypeDocument.showSceneNamed(sceneName: string, transitionType?: string) hypeDocument.playTimelineNamed(timelineName: string) ``` -------------------------------- ### Sprite Sheet Creation - Overview Source: https://github.com/tumult/hype-documentation/blob/main/README.md Tumult Hype Pro allows creation of frame animations (sprite sheets) from sequences of images, pre-built sprite sheets, or animated GIFs. Hype uses these sources to generate a controllable animation within your scene. ```documentation Use any of the following source files to generate a sprite sheet: a numbered (or alphanumeric) sequence of images, a grid of images arranged from top left to bottom right, or an animated GIF. Hype will use these source images to create a sprite sheet you may control as regular animation in your scene. ``` -------------------------------- ### Tumult Hype Custom Behaviors Source: https://github.com/tumult/hype-documentation/blob/main/README.md Custom behaviors in Tumult Hype allow users to define reusable sequences of actions. They can be triggered like built-in handlers, simplifying complex workflows and reducing repetitive setup. This feature is particularly useful for controlling symbols or managing timeline states across different parts of a project. Behaviors are a Hype Pro feature. ```APIDOC Custom Behaviors: Purpose: Create custom action handlers to trigger sequences of actions. Benefit: Avoids repetition, simplifies complex animations, and allows for centralized management of actions. Availability: Hype Pro feature. Creating a New Behavior: 1. Location: Bottom of Scene or Action inspector. 2. Action: Click 'Add New Behavior'. 3. Naming: Assign a unique name to the behavior. 4. Actions: Add any number of Hype actions within the behavior. Invoking a Behavior: 1. Action: Use the 'Trigger Custom Behavior' action. 2. Selection: Choose the name of the created behavior. Use Cases: - Simultaneously starting multiple timelines on scene load and button click. - Controlling a Symbol's main timeline from outside the symbol (e.g., via a button in the main scene). - Triggering a main scene behavior from within a symbol. Example: Controlling a Symbol's Main Timeline from a Button 1. Enter the Symbol (double-click). 2. In the 'Symbol' inspector, click 'Add New Behavior'. 3. Name the behavior (e.g., 'PlaySymbolTimeline'). 4. Add action: Select 'Start Timeline...' and choose 'Main Timeline' (this refers to the Symbol's Main Timeline). 5. Exit the Symbol. 6. Select the button element in the main scene. 7. Add action: Select 'Trigger Custom Behavior...' and choose 'PlaySymbolTimeline'. Related Actions: - Start Timeline... - Trigger Custom Behavior... ``` -------------------------------- ### Migrate Hype Export Scripts Source: https://github.com/tumult/hype-documentation/blob/main/README.md Manual steps to copy export scripts from Hype v2-3 to Hype v4 using Finder. This process involves navigating to specific application support directories and copying files. ```applescript tell application "Finder" -- Go to the source folder for Hype v2-3 scripts set sourceFolder to (path to application support folder from user domain as text) & "com.tumult.Hype2:Application Scripts:" -- Go to the destination folder for Hype v4 scripts set destinationFolder to (path to application support folder from user domain as text) & "com.tumult.Hype4:Application Scripts:" -- Check if source folder exists if not (exists folder sourceFolder) then display dialog "Hype v2-3 scripts not found at: " & sourceFolder buttons {"OK"} default button "OK" return end if -- Check if destination folder exists, create if not if not (exists folder destinationFolder) then make new folder at (file destinationFolder) with properties {name:"Application Scripts"} end if -- Copy files from source to destination set theFiles to files of folder sourceFolder repeat with aFile in theFiles copy aFile to folder destinationFolder end repeat display dialog "Export scripts copied successfully." buttons {"OK"} default button "OK" end tell ``` -------------------------------- ### Controlling Audio with Hype Actions Source: https://github.com/tumult/hype-documentation/blob/main/README.md Demonstrates how to control audio playback (Play Sound, Stop Sound) using various Tumult Hype action handlers. These actions can be triggered by scene events, user interactions, or timeline events. ```APIDOC Action Handlers for Audio Control: 1. **On Scene Load**: - **Action**: Play Sound - **Description**: Starts audio playback when a scene begins. Note: May require user interaction on some mobile browsers (e.g., iOS). 2. **On Mouse Click (Tap)**: - **Action**: Play Sound - **Description**: Starts audio playback when an element is clicked or tapped. This is a reliable method for initiating audio on mobile devices. 3. **Timeline Action**: - **Action**: Play Sound - **Description**: Starts audio playback at a specific point on a timeline. Can be used for timed audio cues. 4. **On Scene Unload**: - **Action**: Stop Sound - **Description**: Stops audio playback when a scene is exited. **Looping**: The 'Loop' option within the Play Sound action enables continuous playback. **Preload**: The 'Preload' option determines if audio files download before animation playback. ``` -------------------------------- ### Tumult Hype Physics API Integration Source: https://github.com/tumult/hype-documentation/blob/main/README.md Explains how Tumult Hype's physics system is built upon the matter.js library. It highlights that developers can leverage any module from matter.js directly through the Hype API, providing access to advanced physics functionalities like collision events and constraint definitions. ```APIDOC Matter.js Integration: Hype's physics engine is powered by the JavaScript library matter.js. Users can interact with the physics system by directly calling matter.js API functions. Key Modules and Functions: - Matter.Contact: Provides access to collision events and data. - Matter.Constraint: Used to define relationships between physics bodies, such as setting a maximum distance between two elements to create a chain effect. Refer to the [Matter.js documentation](http://brm.io/matter-js/docs/) for a comprehensive list of available functions and their usage. ``` -------------------------------- ### Tumult Hype Runtime File Structure Source: https://github.com/tumult/hype-documentation/blob/main/README.md When hosting the Tumult Hype runtime files on a CDN or server, a specific set of files is required. These files are generated by exporting a blank Hype document or by pulling from the official Hype Runtime repository. ```APIDOC Hype Runtime Files: blank.gif - A blank GIF image. HYPE-###.full.min.js - The complete Hype JavaScript runtime. HYPE-###.thin.min.js - A thinner version of the Hype JavaScript runtime. HYPE-###.waypoints.min.js - JavaScript file for waypoints functionality. PIE.htc - HTC behavior file for Internet Explorer compatibility. ``` -------------------------------- ### Video Embedding Source: https://github.com/tumult/hype-documentation/blob/main/README.md Explains how Tumult Hype embeds video content using standard HTML5 video tags, with a fallback mechanism for older browsers. Refers to external documentation for playback control. ```html ``` ```text Fallback for IE 6-8: QuickTime plug-in ``` -------------------------------- ### Sprite Sheet Creation - From Pre-Existing Sprite Sheet Source: https://github.com/tumult/hype-documentation/blob/main/README.md Import a single image containing a grid of animation frames to create a sprite sheet. Each frame within the image must be the same size. You can specify the number of rows and columns to match the grid layout. ```documentation To create a sprite sheet from a single image, select Insert > Sprite Sheet... and select the image. Modify the rows and columns to match the layout of the sprite sheet, and optionally adjust the margins, spacing, or padding as needed. ``` -------------------------------- ### Tumult Hype Pencil Tool Usage Source: https://github.com/tumult/hype-documentation/blob/main/README.md Describes the Pencil tool for creating freehand vector lines. It explains how to activate the tool and the nature of the vector shapes it creates, referencing further documentation for detailed usage. ```APIDOC APIDOC: // Activating the Pencil Tool Elements > Pencil - Selects the Pencil tool from the menu. Keyboard Shortcut p - Activates the Pencil tool. // Creating Freehand Lines Clicking and Drawing - Creates a freehand line on the scene. Vector Shape Creation - Each new line is a separate, editable vector shape. // Further Information [Creating Pencil Lines](#creating-pencil-lines) - Detailed guide on using the Pencil tool. [Vector Shapes](#vector-shapes) - Information on modifying generated vector paths. ``` -------------------------------- ### Layout Management Functions Source: https://github.com/tumult/hype-documentation/blob/main/README.md Functions for managing responsive layouts within a Tumult Hype scene, including retrieving layout information and switching between layouts. ```javascript hypeDocument.layoutsForSceneNamed(sceneName) // Description: Returns a list of layout info for the given scene. // Parameters: // sceneName: The name of the scene for which to retrieve layout information. // Returns: An array of objects, where each object contains layout info with keys: 'name', 'breakpoint', 'width', 'height'. ``` ```javascript hypeDocument.currentLayoutName() // Description: Returns the string value for the name of the currently shown layout. // Returns: The name of the current layout as a string. ``` ```javascript hypeDocument.showLayoutNamed(layoutName) // Description: Changes instantly to the specified layout in the current scene. // Parameters: // layoutName: The name of the layout to switch to. // Note: The layout may change back on a resize event, scene change, or relayoutIfNecessary() call. To force specific layouts, use HYPE_eventListeners for 'HypeLayoutRequest'. ``` -------------------------------- ### Poster Image Naming Convention Source: https://github.com/tumult/hype-documentation/blob/main/README.md Illustrates the naming convention for poster images based on their size and format, crucial for correct export and retina display compatibility. ```text poster.jpg (1x size, jpg format) poster@2x.jpg (2x size, jpg format) ``` -------------------------------- ### Hype HTML Attributes for HTML Widgets Source: https://github.com/tumult/hype-documentation/blob/main/README.md Illustrates how to add attributes to HTML Widgets (iframes) in Hype, such as specifying permissions for camera and microphone access. ```APIDOC HTML Attribute for HTML Widgets: allow Purpose: Specifies permissions for features like camera or microphone. Usage: Add the 'allow' attribute to an HTML Widget. Example Value: `allow="camera; microphone"` ```