Getting Started

This guide will create a movie with a circle that will move across the screen.

Start a new movie by pressing 'New' on the toolbar or in the 'File' menu.

New

A new layer is added to the timeline. The red line on the timeline is at 0 and shows that the editor is
showing frame zero. The script layer can be ignored for now, it is used to add advanced
functionality.
The library and the editor are empty. The properties of the movie are displayed such as the width
and height and the background color.

Try changing the 'Back Color' to yellow. Click the button next to the 'Back Color' property and choose
yellow from the Color dialog.
The background color of the movie will now be yellow.

Other properties can be changed in this way.

Add a circle to the library by clicking 'Circle' from the toolbar or the 'Library' menu.
A blue circle is added to the library and its properties are displayed. Change the 'Border Type' to
'Solid' and the 'Border Color' to green.

Now that a circle is in the library it can be added to the layer in the timeline for animation. Drag the
circle from the library to the editor or click the button next to the circle in the library and choose 'Add
To Timeline'. If you need to edit the properties of the circle again click 'Edit' from the same menu.

The circle is added to the layer and a new frame of animation is automatically added at frame 0. It is
represented by a dot.
The circles new frame is selected, it can be moved around in the editor and its properties can be
edited.

Drag the circle in the editor to the left of the movie.

Now to add the next frame and animate the circle, right click or double click in the circles timeline at
twenty frames to create a new key frame, again represented by a dot.

Add Frame

The line between the two key frames shows that there is a transition between them. A dotted line
shows that there is no transition. Without a transition there will be no animation and the first key
frame will simply show until the next key frame.

The red line in the timeline is now at twenty and shows that the editor is displaying frame twenty.
This frame is now selected instead of frame zero. The editor and the properties show frame twenty.

Drag the circle in the editor to the right at frame twenty.

Single clicking at different frames in the timeframe will show the automatic animation frames. If you
single click at frame ten the circle should be in the middle.
To see the animation, click 'Play' on the toolbar or from the 'Movie' menu.

Play

The blue circle will animate from frame zero on the left to frame twenty on the right.
Save the movie by clicking 'Save' on the toolbar or from the 'File' menu.

Save

If you wish, you can export the movie to HTML by clicking 'Export' on the toolbar and following the
export dialog. The exported HTML page should look something like this.

Export
Click the link to view the movie without the test page.
 Flashing Triangle
This tutorial assumes you have already completed tutorial one.

Create a new movie, add a triangle to the library and then add the triangle to the timeline.
Double click at intervals along the timeline to create frames at five, ten, fifteen, twenty, twenty five
and thirty.

Select frame five in the timeline.

In the properties for the frame, turn off 'Visible'.

The frame on the timeline will now appear as an empty dot.

Do the same for the frames at fifteen, twenty five and thirty five.

The triangle should now be visible for the first five frames, invisible for the next five frames and so
on.

To see the animation that has been created, click 'Play' on the toolbar or from the 'Movie' menu.

The triangle should flash at five frame intervals.

Play
 Using Timelines
This tutorial shows how to use timelines. Timelines allow you to add animation that runs
independently from the main movie. Add a new timeline to the library.

Timeline
To edit the timeline, click the blank preview in the properties. The timeline editor is alot like the
normal movie editor, except many of the more complex features and objects are missing.

In this example, we will create an animation of a butterfly flapping it's wings. Import the images for
the wings and body.

Import
Drag all the parts of the butterfly from the library to the editor.
Arrange the butterfly in the top left corner of the editor.

Add additional frames for the butterfly wings at frame 10 and 20.
Select the wings at frame 10, and resize them to make it look like the wings are closed.

Press play to test the timeline. The butterfly should now flap its wings.

Play

To quickly view the timeline's properties, click the timeline icon at the top of the properties. Adjust the
size of the timeline, so that the butterfly fits neatly inside. Turn on 'Loop' so the butterfly keeps
flapping its wings.

Timeline
The finished timeline can now be added to the movie. It can be resized, rotated and animated like
normal.
 Adding Buttons
This tutorial assumes you have already completed tutorials one and two.

Create a new movie. In the properties of the movie, turn off 'Loop' and 'Auto Play'. In this movie the
timeline will be controlled by buttons.

Add two buttons to the library and set the Text of the buttons to Start and Return.

Button
Add the Start button to the timeline at frame zero and move it to the left of the editor.
Single click in the timeline at frame ten so the red line moves to frame ten.

Add the Return button to the timeline, a new frame will appear at frame ten. Move the button to the
right of the editor.
Unfortunately both buttons are now visible at frame ten. Create a new frame for the start button at
frame ten.

Then turn off visible in the properties.

Now only the Start button should be visible at frame zero and only the return button visible at frame
ten.

Click the button the Start button in the library to edit its properties.

In the properties for the button, edit 'On Click'. Either choose the 'Goto and Stop' script function from
the 'Script Functions' menu and change the Frame:Number value to 10, or simply type
GotoAndStop(10).
GotoAndStop(Frame:Number);

GotoAndStop(10);

Edit the Return button and set its 'On Click' value to GotoAndStop(0).

GotoAndStop(0);

To see the buttons in action click 'Play' on the toolbar or from the 'Movie' menu.

Play

Click the Start button to go to frame ten, then click the Return button to back to frame zero.
 Image Buttons
Hippo Animator includes a wide variety of button options. However, sometimes that's not enough.
This tutorial demonstrates how to use images as buttons. First import these 3 crab images into the
library.

Import

CrabOver.png

CrabPress.png

Add a button to the library.

Button
In the button's properties, change the 'Fill Type' to 'Image'. The preview of the button will disappear,
as there is no image to display.

Set the value of 'Image' to Crab and 'Press Image' to CrabPress.

You can test the button by clicking the preview or by adding the button to a movie.

It is also possible to add an image that is shown when the mouse moves over the button. However,
this image will not be shown on touchscreen devices. By default, it is turned off. To use this feature,
turn on 'Use Mouse Over'.

Set the value of 'Over Image' to CrabOver.

 Script in the Timeline
This tutorial demonstrates how to add script to the timeline. To begin, recreate the basic animation
from the getting started tutorial, where the circle moves from left to right.

Click at frame 10 in the timeline. Right click or double click the script line to add a new script frame.

The script frame is represented by a square.

The script for this frame can be edited in the properties

To stop the animation at frame 10. Add the script:

Stop();

Add a new button, set it's text to Play and it's 'On Click' script to:
Play();

Add the button to the editor at frame 10.

Press play to test the movie. The animation will start, but stop playing at frame 10. Press the button
to start playing again.
 Play in Reverse
This tutorial demonstrates how to slow down the timeline and play in reverse. Start a new movie and
recreate the circle animation from the 'Getting Started' tutorial.

Add a new script frame at 10.

Add the following script to this frame.

SetSpeed(0.5);

Play

This will make the timeline play at half speed when it reaches frame 10. Add another script frame at
frame 20.
SetSpeed(-1);

When the movie reaches frame 20, if will start playing in reverse. Notice that when it gets to frame
10, it moves forward at half speed again. It's possible to make this script run only when the movie is
running forwards. Select the script at frame 10 and change it.

if(GetSpeed()>0){
SetSpeed(0.5);
}

If you like you can place another script frame at 0, to start the movie playing normally again.

if(GetSpeed()<0){
SetSpeed(1);
}

The speed can also be changed for timelines, image sequences and the image viewer. Speed has a
cumulative effect. If the speed of the movie is 0.5 and the speed of an image sequence is 0.5, the
image sequence will play at 0.5 x 0.5 = 0.25.
 Adding More Scenes
This tutorial demonstrates how to add more scenes to your movie. This stops the timeline becoming
cluttered and unmanagable. Start a new movie and recreate the circle animation from the 'Getting
Started' tutorial.

\Click scenes on the toolbar or the movie menu, to open a list of the scenes.

Scenes
Add a new scene. Scenes can be duplicated, rearranged and deleted from this list. Your new scene
should be selected. Close the list. You can now create a whole new scene fro your movie.

Create a new animation in your new scene. We've created something similar to the first scene, a star
moving across the movie.
You can quickly jump between scenes using the drop down menu in the timeline.

Press play to test the move. The first scene will play and then the second.
 Opening Web Pages
This tutorial demonstrates how open new web pages from a movie. Create a new movie and add a
button.

Add the following script to the 'On Click' event of the button. You can use any URL you like.

GetUrl("http://www.Hippani.com");
Export the movie to HTML.

Export

Press the button to open the web page.

The web page replaces the movie. If you want the web page top replace the test page you need to
use the function GetTopUrl.

GetTopUrl("http://www.Hippani.com");
Add a 'Web Page' object to your movie, and set it's script Id to WebPage.

Change the script in the button so the web page opens inside the 'Web Page'.

OpenPage("WebPage","http://www.Hippani.com");

Export
Other functions are available for opening web pages in new windows and other iframes.
 Joining Two Movies
One way to join two movies, is to have two scenes. However, sometimes your movie might be large,
or the page you want to join to is not a Hippo Animator movie. This tutorial shows how to load a new
movie when the first movie is finished.
Turn off Loop in the movie properties.

When loop is turned off, a new script event appears called 'On End'. This event runs when the movie
finishes. If loop is turned on, the movie will never finish playing.
Add this script to the 'On End'. This assumes you have create a movie called Movie2 and exported it
to HTML. The URL can be relative or absolute.

GetUrl("Movie2.html");

Text values can be passed from one movie to the next. For example, in the first movie you might
choose a location France, and need to pass this to the second movie.

var Location="France";

GetUrl("Movie2.html?Location="+Location);

The value of the location can be retrieved in Movie2.

var ChosenLocation=GetQueryString("Location");

Multiple values can be passed like this.

GetUrl("Movie2.html?Name=Jane&Age=27&Hair=Brown");
 Text Shadows
This tutorial assumes you have already completed tutorials one and three.

Create a new movie. Add a new 'Text' item to the library.

Change the content to Text Shadow. Set some properties for the text. In the example, the 'Color' is
changed to red, 'Font Type' changed to 'Standard', the 'Standard Font' set to Impact and the 'Font
Size' changed to 16. If you are exporting to HTML then you may want to choose 'Convert To Image'
to make sure the font you choose is available on all computers.

Click the button next to the text once you are happy with the style and choose 'Duplicate'.

Duplicate
Drag the black text on to the editor or click 'Add To Timeline' from the library menu. Arrange the text
in the middle of the editor so it can be seen clearly.

Duplicate the item in the timeline. This will make sure the two items have the same dimensions.

Duplicate
Swap the top item for the red text.

Click the dot for frame 0 of the black text.

Move the black text 2 pixels to the right and 2 pixels down. Either use the arrow keys or change the
'Location' values of the frame.

Finally change the 'Opacity' property of the frame to 50%.

 Reflection
From this point it is also possible to create a reflection effect.
Right click the text and choose 'Flip Vertical'.
Move the black text under the red text.
 Image Shadows
This tutorial assumes you have already completed tutorial five. It uses many of the same steps,
except with images.

Create a new movie. Add an image to the library.

Import

This tutorial works best when the image has transparent elements, this example uses an image of a
cat. Create a duplicate of the image in the library and click 'Edit' in the properties for one of the
images to open the image editor.
 Click 'Shadow' to convert the image into a shadow.

Shadow
Click 'Blur' and choose the amount of blur you desire.

Blur

Follow the steps from the text shadow tutorial to create the final shadow effect.
 Blur Transitions
This tutorial demonstrates how to smoothly transition from a normal image to a blurred image. This
technique will work with any kind of image effect. Add an image to the library.

Import

Click to save this image to your computer.

MonaLisa.png
Duplicate the image and rename the new image.

Open the new image in the image editor.

Blur the image.

Return to the movie and add the original image to the editor.
Add additional frames for the image at 20 and 40.

Duplicate the image and the three frames in the timeline.

Swap the top image for the blurred image.

Select the first frame of the blurred image and set it's opacity to 0.

Select the last frame of the blurred image at time 40 and set it's opacity to 0. The frame at time 20
remains at opacity 100.
Press 'Play' to test the movie. The image will start as normal, blur, and then go back to normal. The
blurred image has 0 opacity at the start and the end. At frame 20, it covers the normal image.

Play
 Cutting out Images
This tutorial demonstrates how to cut images out, so they can be used as sprites. In this example we
have an image of two pirates. However, we only want the pirate on the right and we also want a
transparent background.

Import

Import the image of the two pirates and open the image editor.
 Use the 'Crop' tool to cut out the pirate on the right. Click and drag a rectangle over the pirate to
select it.

Crop

Select the 'Fill' tool.

Fill

Set the color of the fill to transparent. To do this, set the 'Opacity' of the color to 0 in the advanced
settings of the color window.

Set the 'Tolerance' to 50. This means any colors similar to the color we replace, will also be filled.
Select the white area around the pirate. It will be replaced by the transparent color.

If you are using a different image and you still have small bits of image you need to make
transparent, try using the 'Erase' tool or the 'Cut Out' tool.

You now have a sprite with a transparent background that can be used in your animation.
 Making Waves
This tutorial assumes you have a basic understanding of this software.

Create a new movie. Start a new drawing and select the 'Line' tool.

Line
Draw a new shape like the one below by clicking the points.

Right click to close the shape.

Use the 'Adjust' tool to drag the lines and make curves.

Adjust

The finished wave shape should look something like this.

The layer you have drawn on is a shape layer, it can have as many shapes as you like on this layer,
but they all have to have the same fill and border. Add a new line layer to your drawing. Set the
border color for this layer to white and the border width to 3.

Draw Lines

Turn off the 'Snap To Grid' feature. The 'Grid' settings are in the 'View' menu.
Add some detail to your drawing using the 'Draw' tool. You can use the 'Adjust' tool to make it
perfect.

Draw

The drawing can now be animated like normal in the movie editor.
 Creating Masks
Masks are not supported by many web browsers, so Hippo Animator doesn't include them. Instead,
here is one of a few creative ways you can work around this problem.

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

Edit the drawing and change the fill color of the layer to white.
Make sure trace is turned on, so the movie can be seen in the background. Choose the 'Box' tool.

Box

Draw a box that completely covers the sun animation.

Add four more smaller boxes. Cut out a window.

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

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
 Loop the Loop
This tutorial demonstrates how to make an aeroplane loop the loop, by following a curved path.
Import an image of an aeroplane into the library.

Import

Click to save this image to your computer.

Aeroplane.png

Add the aeroplane to the bottom of the editor at frame 0.

Add another frame for the aeroplane at frame 20. This frame will be exactly the same as frame 0, the
end of the loop.

Add the mid point of the loop at frame 10. Rotate the aeroplane 180 degrees and move it to the top.
Select frame 0, set the curve to -100 and the rotation direction to anticlockwise.
In the editor the curve is show by a dotted red line.

Select frame 10 and again set the curve to -100 and the rotation direction to anticlockwise.
Press play to see the aeroplane loop the loop.
 Using Pivot Points
This tutorial demonstrates how to make characters with arms and legs that rotate correctly. This is
done by changing the center of rotation, or pivot point. Import all the robot images into the library.

Import

Click to save this image to your computer.

RobotHead.png

RobotBody.png

RobotLeftArm.png

RobotRightArm.png
RobotLeg.png

Arrange all the parts of the robot in the editor and then select the right arm.
In the center of the selected arm is a + symbol. Grab the + with your mouse and drag the arm. This
allows the arm to be moved, without the center of rotation moving. You should now be able to see
two + symbols. A larger + that you are dragging and a smaller +, this is the center of rotation. Move
the arm until the smaller + is over the shoulder of the arm.

Next, move the arm back into position. To move the arm normally, grab anywhere except the +. The
arm now has a pivot point on it's shoulder.
Create an animation where the arm rotates. The arm will rotate around the pivot point.

Pivot points can be tricky. When things go wrong, right-click an item in the editor and choose 'Reset'.
 Working with Layers
This tutorial assumes you have a basic understanding of this software.

Create a new movie. Add a new 'Star' shape to the library and change its 'Color' to yellow.

Drag the star to the editor and resize it so that it is bigger than the size of the movie. You may need
to zoom out to do this.
You may notice that the points of the triangle are darker when they are outside the bounds of the
movie. Often the size of the movie is different from the available space in the web browser. When
this happens, these parts of the star will be clipped when the movie is exported to HTML.

In the properties for the movie, choose 'Clip'.

The points of the star will no longer be clipped when exporting to HTML.
From the menu for the current layer choose 'Lock'.

The layer is now locked in place. No items in this layer can be selected or edited. It is now safe to
work on the rest of your movie without fear of this layer changing or interfering with your editing.

Create a new layer by clicking the 'Layer' icon on the 'Timeline' or by choosing 'Layer' from the
'Movie' menu.

Layer

A new layer is created above the locked layer. The new layer is not locked.

Try adding items to this new layer. Notice how the new items can be edited without disrupting the
yellow star.
 Adding YouTube Video
This tutorial assumes you have a basic understanding of this software.

Create a new movie. Add a new YouTube video to the library. Video can be displayed at any point in
the timeline, it can be resized and hidden but it can't be rotated.

In this tutorial we will use will use Hippo Animator Showreel Sept 2011 video from YouTube.

The web page is http://www.youtube.com/watch?v=PSs-aXeNKzQ.

This means the 'Video ID' is PSs-aXeNKzQ. Set the 'Video ID' in the properties and turn on 'Auto
Play'.

PSs-aXeNKzQ
Drag the YouTube video from the library to the editor.

If you like, you can test the movie now by pressing play.

Play
You may notice the video has a test image, this is so YouTube doesn't have to load every time you
test. Turn on 'Show Video Player' in preferences.

We are now going to control the video using script. In the timeline choose the first frame of the
YouTube video. In the frame properties, 'Script ID' is the name that will be used to reference the
YouTube video, it must be unique. Set the 'Script ID' to TutorialVideo or any other name you like.
The new 'Script ID' is displayed in the timeline.

Add a new button to the timeline and change the text to Tutorial 1.

Set the script value for 'On Click' to will open a new video 0vn0sb_8yAc in TutorialVideo. This is a
Hippo Animator tutorial video. 'Loop' is off, 'Auto Play' is on and 'Show Controls' is on.

OpenYouTube("TutorialVideo","0vn0sb_8yAc",false,true,true);
Drag the button from the library to the editor.

To test the movie press play. Hippo Animator Show reel Sept 2011 will play automatically. Press
Tutorial 1 to open the second video.

Play