14 DAY TRIAL // We live in an age where most of our daily activities revolve around entertainment. Being an important component of the Internet, entertainment comes in just too many forms to completely ignore it.
A common practice is to exemplify something or tell a tale through animations or videos. Some require as much effort as to just sit in front of a camera and talk, while others can take up to several days or weeks to create with special programs.
With Flash falling into a gray area of practicality, HTML takes the lead. As such, we’ve put together a few steps on how to easily create an HTML animation to use in your website.
Creating your own HTML animation
Step 1: Download, install, and run Hippo Animator.
Note: The Professional version is going to take some cash out of your pocket after a 30-day trial period. However, you’re free to use the standard edition that’s still packed with enough features for a simple task.
Step 2: Add preset objects to your library from the upper toolbar. In addition, you can import all sorts of images, sounds, and even YouTube videos.
Step 3: Drag objects from the library over the blank canvas.
Step 4: Use the right pane to change its shape and style.
Step 5: Place the object into position, right-click the timeline, and choose to Add Frame.
Step 6: Move the timeline slider to the right. The more you move it, the longer the next animation takes.
Step 7: Select the object you want to animate, and move it into a new position. Shape and style can also be adjusted.
Step 8: Right-click the timeline again to Add Frame.
Step 9: Keep doing this until all objects are animated the way you want.
Hint: Add a layer for each object and toggle visibility to easily work with individual objects.
Step 10: Hit Export and choose the desired format to export your animation.
