Since I started messing around with HTML back in the 90s, I’ve had a long-standing hatred of WYSIWYG editors. (It probably stems from too many late nights yelling at early versions of Dreamweaver and its terrible, terrible output.) To this day, I prefer to manually code almost everything I do. But hand-coding HTML5 animation today is about as fun as hand-coding image maps in the 90s—you don’t really want to spend your day neck-deep in CSS and number-transforms if you can get away with it.
Hype 1.0 was the first program to make this breathlessly simple and cross-browser friendly, and I loved the app for it. Hype 2 is a huge upgrade to an already-fantastic program, packing in ten new features (and more than a few tiny ones). I took Hype’s new version for a spin; here are some observations. The glory of instant preview One of Hype’s coolest new features is actually another app altogether—Hype Reflect, a free program for iOS devices that lets you instantly preview your work on an iPhone, iPad, or iPod touch. Hype Reflect lets you preview any project on your iOS device.
Online Html5 Editor
The app works flawlessly, with no iBooks Author-esque tethering required—all you need is to be connected to the same Wi-Fi network as your Mac running Hype. My iPad popped up instantly, and loaded my project in seconds. Hype Reflect also supports Mirror mode, which automatically reflects any changes you make to your document in real time; viewing individual Scenes from your timelines; opening the developer console; and sending your preview to mobile Safari.
I had no hitches, hiccups, or other problems with this handy little companion app—everything worked like a charm. All about mobile Hype has placed a lot of emphasis on mobile development in its second version, and Hype Reflect is only one part of a much, much larger strategy.
Hype 2 offers new viewport settings so that you can build animations designed for specific mobile screens; it now allows user scaling and touch events, and can highlight taps; and you can even design a project to be a home screen web app. Better still, you can play the entire project offline if you enable the new offline application cache feature, which saves all resources locally so that you can load it anytime—whether you're connected to the Internet or just looking to pass some time on the plane. Swipe, touch, and click Hype’s animations just got a lot more touchable: You can now program swipe and touch events for gestures like swipe left, swipe right, swipe up, swipe down, and drag.
By default, mouse events will automatically translate to touch events on a mobile device. You can also use swiping and dragging to control timeline playback—say, if you want to create a gallery or carousel. I made a carousel of recent roller derby pictures in about ten minutes with Hype's new drag actions. I had a lot of fun building a simple gallery with timeline swiping—Hype’s keyframe tools make this a breeze. (If you’re not sure how to use Hype’s keyframes,.) Noise, noise, noise While no one, it’s sometimes useful to be able to play a sound clip or music for your website.
To that end, Hype now has support for audio actions, which let you play sound in response to an action. Audio actions support MP3, OGG, and WAV, and files can be dragged and dropped into your documents library like you would an image file or font. You can even disable preloading for large files.
I only toyed around briefly with audio, but it seems to be as simple to set up as most other Hype interactions. Audio can be triggered on scene-load or with a specific action, like a tap. I will note (and Hype does too in its documentation) that iOS devices won’t automatically play sound unless your webpage is coming from a native app or home screen Web app; instead, users must tap or perform other actions to trigger audio. On the curved motion coaster If you’re looking to expand your animation beyond linear transitions, Hype 2 also offers support for curved motion paths. All elements begin with left and top origins, but you can click the Bezier curve to the left of either path in the properties section of the timeline to switch to Motion Path mode.
Once enabled, you can click the animation line and add Bezier curves much like you would in any other graphics program. Hype can even automate rotation of your element as it follows your path.
Building curved motion paths in Hype is much like making Bezier curves in Adobe Illustrator. Motion Path mode works and renders fabulously, though I occasionally found myself creating crazy loops that the program had trouble smoothing out. (Turns out doing a 360-degree turn in a small space is not recommended.) Free your fonts Google has a bunch of free fonts available for you to embed into your projects. Over the last year or so, custom fonts have become much more prominent throughout the Web; Hype now offers full integration with Google’s Web font library in addition to support for any custom font you wish to embed. (All Google’s fonts are free to use, but if you plan to upload a custom font, you should make sure you have a license for displaying said font on the Web.) Picking a Google font is easy: Just go to the text inspector and click Add More Fonts, then choose Google Fonts as the source and pick your favorite. You can see previews of each font, type in custom preview text, and even change the size and color to get an accurate idea of the font; once you’ve found one, just click Add Font to bring it into your project. It’s slightly more difficult to add a custom font: If you’re using a third-party service like Typekit, you can add in the relevant CSS and Hype will load the font from Typekit’s servers; otherwise, you have to add CSS and upload the font to your Hype resource library.
(Thankfully, Tumult for this on its website.) New shapes and better previews Even Hype’s smaller improvements, like new CSS-created shapes and better previewing, are welcome features. If you prefer using CSS-built shapes over images of circles and rounded rectangles, Hype now lets you do so from its Insert menu. You can resize and rotate these shapes at will; Internet Explorer has a few quibbles about opacity and rounded shapes, but all other browsers support these combinations just fine. Seeing these new shapes in your browser of choice is as simple as clicking Hype’s Preview button in the toolbar. Safari is selected by default, but clicking the arrow to the right of the button displays a dropdown menu with all your available browsers, along with the iPhone simulator and any devices connected via Hype Reflect. Choose a different browser or device, and it becomes the default Preview button until you select something else—a great way to test browser by browser. You can also preview just the current scene in your browser, rather than the whole animation.
Search everywhere (even on OS X) and make it full screen It may not be the flashiest feature, but full-text search is a great way for people to find your content online—and Hype now supports it for any project. This means that if you’re bent on creating your entire website in Hype, it’ll still be fully searchable via major search engines. View your first scene's animation, right from Spotlight or Quick Look on the desktop. Full-text search is also supported right on OS X for your project files; you can type any phrase or words from your Hype file into Spotlight to find it, and the Quick Look preview even displays your first scene’s animation. If you’re struggling with screen real estate, you can additionally pop into full screen mode for a more comfortable working experience. Though I don’t often use full screen for apps, I find it incredibly useful for creative endeavors and am glad to see it integrated into Hype 2.
Mac Html5 Editor
Time to play If you want to check out Hype 2—and if you’ve ever wanted to build HTML5 galleries, animations, or games, I suggest you do—Tumult offers on its website. You can also pick up Hype 2 at its $30 upgrade pricing until September 10 on either or; after that, it returns to its regular $60 price.
This story, 'Hands-on: Hype 2's ten new features' was originally published.
Additionally, support for third-party project extensions like Animoto, Shutterfly, ifolor, WhiteWall, and Wix, will give users the ability to print and publish their favorite pictures directly within Photos. Fire-21820 add metal 2 for mac. In High Sierra, Photos will support external editors, so other apps like Photoshop and Pixelmator can be launched directly within Apple's Photos app, and any edits made will be saved back to the user's Photos library.