Creating a button in Giotto

In this tutorial we will show you how easy it is to create a button in Giotto. Buttons are everywhere in the digital world, most of the things you click on are buttons, they are basically event triggers. This tutorial will teach you the basic mechanics of creating a button, after that all you will need is a little creativity to design a button that suits your needs.

How to make a button in Giotto?

This is what you will get after finishing this tutorial: So, lets begin!
y

First create a new blank document in which you will make your animation by clicking File from the menu, then New (Ctrl+N).

y y

Change the document properties: Click Modify from the menu, then Document. This will open a Document Properties dialogue screen (shortcut Ctrl+J).

Change the color of the background to black.

Create a circle by using the Oval tool (O).

y y

Convert the drawn circle to a button by pressing F8. Convert to Symbol window will appear, type in the name of your button (The Button for instance), select Button, then click OK.

y y

Double-click on your movie clip in the Library to enter its timeline. You can now see that the timeline has changed considerably. You can now see only 4 frames: Up, Over, Down and Hit.

The button only needs these four conditions to function. In each frame you should specify what will the button look when in the specified condition: Up when there is no interaction between the user and the button; Over when the cursor hovers above the button; Down when button is pressed; Hit designated area where the button can be activated (can be larger or smaller than the drawn object). Change the brush of the circle to some shade of blue and from the brush window dropdown menu select Radial brush. For the second color we chose red.

y y y

Select Text Tool (T) and write The Button!!! with white font. With Selection tool (V) move the text on the button. Now right-click on the Over button timeline frame and from the context menu select Insert Keyframe.

y y y y y y y

The exact copy of the button you created will appear. Select the circle and change its two colors of its radial brush to be a little brighter. Also add new text with Text Tool (T) in the circle Hovering. Now right-click on the Down button timeline frame and from the context menu select Insert Keyframe. Select the circle and change its two colors of its radial brush to be darker than the original. Also, change the Hovering text with Clicked!. We will leave the Hit frame empty because we want our whole circle to act as a button. To make the click area smaller or larger just insert a new keyframe in the Hit frame and change the size of the circle to designate the click area. You can now test your button by clicking Ctrl+Enter.