Up and Running with Hype lynda.com
Stroh begins with a quick tour of the Hype user interface, from the Toolbar to the Timeline. He then demonstrates how to create your first animation, which is to move a rectangle on to the screen with a fade in effect, using the Record feature. He walks you through the process of setting the position and opacity property values for the beginning and ending keyframes.
Building on that simple example, Stroh next discusses what types of images can be animated in Hype and how to import them via the Elements menu. The imported sample image is an airplane and he demonstrates how to create an animation path for the plane to fly across the screen and how to convert that to a motion path. He finishes the second example by adding text to the scene, styling the text and keyframing a fade in effect.
In the next section, Stroh begins an in-depth discussion of how the html5 and css3 animations are created by the animator using the Timeline, Keyframes and the Record feature. He covers several examples of applying keyframes to element properties. He also discusses how to use some of the controls on the Timeline to make fine adjustments to your animation.
The next topic is easing and how to use six types of easing to add real-world physics to your animation. The example he discusses is how to achieve a bouncing ball animation by combining several easing effects. In the next few examples, Stroh demonstrates how to create transformation animation and how to use the Capo tool to refine the animation of a sequence of elements on the Timeline. He also discusses how to reuse animations in the same scene and how to work around the limitation that Hype has no anchor point tool for rotation animation. Finally, he discusses the use of masking, cropping and CSS filters in your animations.
The next section introduces interactivity. Stroh begins with a discussion of the types of built-in buttons and how to add actions to their stages. Next he covers how to add actions to images to work as buttons on the screen. He quickly moves on to controlling animations with multiple timelines and how to add buttons to the main timeline to control additional timelines. He also demonstrates how to create a looping timeline.
To create more complex animations, Stroh discusses how to work with relative timelines and action chaining. In the next few examples, he demonstrates how to work with audio files and control the playback with button actions. He also demonstrates the differences between using multiple timelines and just the main timeline to control an interactive image gallery slideshow.
Next the project example is a product gallery. Stroh discusses the pros and cons of two options, multiple timelines or scenes, for building this in Hype.
Now you are ready to put your project on the web. Stroh demonstrates how to export and embed your Hype project and the various options for a standalone website or adding the project into an existing website.
This isn't an in-depth learning course for Hype. However, this course will give you an idea of the types of animation that can be created using the Hype software. If you are familiar with movie clips in AdobeR FlashR, you will appreciate Stroh's discussion of nesting timelines, relative timelines and action chaining.
Disclosure: I was not financially compensated for this article. The opinions are completely my own based on my experience.
Editor's Picks Articles
Top Ten Articles
Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.