Making Waves Loop the Loop

Creating Masks

Masks are not supported by many web browsers, so Hippani Animator doesn't include them. Instead, here is one of a few creative ways you can work around this problem.

Creating Masks 1

We've created a very simple animation. The sun rises from the bottom of the movie at frame 0, to the top of the movie at frame 20. We're going to make it look like the sun is in a window. When the sun overlaps the blue box, we want it do disappear. To achieve this, a mask would be preferable.

Instead, we are going to us a drawing. Add a new drawing to the library.

Drawing Drawing

Creating Masks 2

Edit the drawing and change the fill color of the layer to white.

Creating Masks 3

Make sure trace is turned on, so the movie can be seen in the background. Choose the 'Box' tool.

Rectangle Shape

Draw a box that completely covers the sun animation.

Creating Masks 4

Add four more smaller boxes. Cut out a window.

Creating Masks 5

Add your drawing to the original sun animation, at exactly the same position you drew it in.

Creating Masks 6

The mask effect is complete. Press 'Play' to test the animation. Because the drawing is the same color as the background, it will appear as if a window mask has been added to the animation. More complex masks can be created by using images or multiple layers.

Play Play

Creating Masks 7

Making Waves Loop the Loop