Daniel Morgan walks through how to build an HTML5 banner that works on all web browsers, without using any code
The web is changing. Now that all modern desktop and mobile browsers support HTML5 and Adobe has discontinued Flash for mobile browsers, it’s time to think about which delivery method to choose – and certainly for mobile platforms, HTML5 is the best option for interactive content.
Hype (available from the Mac App Store) creates animated and interactive HTML5 content, without requiring you to write a single line of code. In this tutorial, we’re going to create an animated HTML5 banner using Hype’s simple, yet powerful, scene editor and keyframe-based animation system. By the end, you’ll know how to build and animate a scene, and how to respond to scene and user events.
01 To start, first add your assets to the scene by dragging your images into a new Hype scene. Arrange the photos from nearest to furthest away using the Arrange menu, which has several different ways to arrange and resize objects.
02 Turn on recording by clicking the Record button on the right-hand side of the Animation controls. Advance the time cursor to three seconds and move the sky, mountains, hills and grass to the left. Moving each image further than the one behind it creates an engaging parallax effect. Finally, move the soccer ball from the left edge of the scene to the right. Click the Record button again to turn off recording and click Play to preview.
03 Select the soccer ball element in Hype’s Elements list and click on the Properties menu that appears. Select the Rotation Angle property and click the soccer ball’s disclosure triangle to reveal its properties. Select the new property and reset the time cursor to the beginning. Click the KeyFrame button to add a starting key frame. Advance the timeline to three seconds and click the Key Frame button again to create an ending key frame. Rotate the soccer ball by switching to Hype’s Metrics Inspector and changing its Z-axis rotation value to 1080 degrees.
04 Changing the soccer ball’s animation timing functions will make it move more naturally across the skyline. To change the timing function for its horizontal movement, double-click the animation for Origin (Left) and select the Linear timing function. Perform the same action on the soccer ball’s other animations to create a very natural-looking effect.
05 When this scene has finished playing, we need to automatically transition to our banner’s final scene. Switch to the Scene Inspector to see Hype’s scene-specific actions. Click the Action menu associated with the On Animation Complete action and select ‘Jump to Scene…’ This adds Scene and Transition menus that are automatically set to instantly transition to the next scene.
