Editing items in your Resource Library is a whole new experience in Hype 4. You can select any resource and click ‘Edit’ at the bottom of the resource library to make any adjustments in external applications and save those changes back to your Hype document.
This video shows the basic workflow for how to edit images, CSS, JavaScript files (and Hype functions) in your resource library, and how to edit Head HTML in an external editor as well:
A little background: Resources like images, JavaScript, and CSS added to Tumult Hype are stored in the .hype file, but they will also pickup any changes made to the originally file. For example if you drag a resource into Hype from your desktop, and then later edit that same file on your desktop, you’ll be asked if you wanted to update the file in Hype.
In Hype 4, you can directly select that file in your resource library, and you’ll see a new ‘Edit’ button at the bottom of the resource library. If you select an image, all your applications capable of editing that file will appear:
Editing Images
To Edit an image, select it in the resource library and click Edit at the bottom of the resource library. Once you’ve made edits, save it in your image editor to update the file in Hype. Make sure you save it back as the same file format. (For example, don’t save as a PSD after making edits to a JPG).
Editing CSS
You can edit any CSS file dropped into the Resource Library by selecting it and clicking ‘Edit’ at the bottom of the resource library, or control + clicking the file.
Any .css file added to Hype will load in the ‘head’ of the exported HTML document at export time by default, and will also load during preview. You can disable this by checking Include in document <head>.
For some CSS changes, you may need to uncheck ‘Protect from External Styles’ in the Document inspector. Or, you may need to prepend !important to your CSS property to override default styling. For example, if you are attempting to set a font for text, you will need !important to override the inline default styles added by Hype since Hype tries to use the font you choose in the Text Inspector.
Edit JavaScript Functions
You can easily edit functions created in Hype, or files in your resource library with the .js extension in your JavaScript editor of choice.
- Select the Function in the Resource Library
- Select Edit at the bottom of the Resource library of control + click on the file and then select a CSS or Plain Text editor.
Any .js file added to Hype will by default load in the ‘head’ of the exported HTML document at export time, and will also load during preview.
Functions created in Hype can be linked to actions in the Action inspector or elsewhere in Hype’s interface. Learn more about the JavaScript function lifecycle.
Edit the Head HTML
To edit the <head> of your Hype document:
- Control + Click on ‘Edit Head HTML’
- Choose a Text editor
- Make any changes or additions you’d like to make to the
<head>and save the file. - Switch back to Hype and you’ll see your changes reflected.
Things to Note
- Keep your Hype document open while you make any edits to files in your resource library. If you close Hype, you’ll need to click ‘Edit’ again at the bottom of the resource library to recreate the link.
- For ‘Edits’ to work, you’ll need to save directly back to the file. Most Video or Audio editors like ‘Quicktime’ re-encode and output an additional file – these types of edits are not going to be picked up by Hype.
- If you want to replace a file in your resource library with something completely different, control + click on your file, then click ‘Replace…’
- You can also control + click on files in the resource library to show the ‘Edit In’ options available to you instead of clicking ‘Edit’ at the bottom of the Resource Library.
- Changes will be immediately visible on the scene area, but edits made in programs will not affect any current Previews. You’ll need to re-preview your Hype document to see your changes. It will affect any live ‘Mirror Mode’ previews currently occurring in Hype Reflect.
- If you drag a a resource from your desktop into Hype, then edit the file on your desktop (and save), Hype will ask if you want to update the file. This link between Hype and the dragged-in-file will be retained as long as the file is not moved from its original location when it was added to Hype.