g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Up and Running with Hype

In this video training course from entitled Up and Running with Hype, the instructor Jake Stroh, covers the Hype basics. When you have finished this 1 hour and 37 minute course, you will have the foundation for creating simple animation in Hype.

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.

Join us in the Animation forum. | Join us in the Digital Art forum.


Add Up+and+Running+with+Hype+lynda%2Ecom to Twitter Add Up+and+Running+with+Hype+lynda%2Ecom to Facebook Add Up+and+Running+with+Hype+lynda%2Ecom to MySpace Add Up+and+Running+with+Hype+lynda%2Ecom to Digg Up+and+Running+with+Hype+lynda%2Ecom Add Up+and+Running+with+Hype+lynda%2Ecom to Yahoo My Web Add Up+and+Running+with+Hype+lynda%2Ecom to Google Bookmarks Add Up+and+Running+with+Hype+lynda%2Ecom to Stumbleupon Add Up+and+Running+with+Hype+lynda%2Ecom to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

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.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor