building flash templates

Inserting buttons into Flash

7. Inserting Buttons

Create a new layer and call it "buttons." Remember to lock your title layer, as we won’t be using it again.

(Putting everything on its own layer not only helps to organize your project, it also makes it possible to find and select things. Having too many elements on one layer makes it difficult to find or select objects when they overlap each other.)

Now grab each of the button1_up.jpg, button2_up.jpg, button3_up.jpg and drag them to the right side of the stage one at a time, so they are stacked vertically.

You can space the images out evenly by selecting all of them and using the align pane. This time we are not aligning them to the stage but, rather, to each other. So we turn off the To stage: option.

Align with no to stage option

You can use the middle Distribute option or the left Space button to space out the three buttons. You can also align each button to their left or right edge. In order for this to work, all three buttons have to be selected (you will see a grey strip surrounding them).

Sample with button images

The next step is to convert the three images into button symbols.

8. Converting to Symbols

The idea of "symbols" is by far the most confusing part in the process of learning Flash. It is best to think of symbols as containers that hold things. In this tutorial, we will primarily be using the button symbol.

Click on only ONE of your three button images, making sure only one is selected. Then in the top menu click on Modify then choose Convert To Symbol.

Don’t be fooled, this wording is a little deceptive. You are not actually converting the image into a symbol, rather you are placing it inside a symbol container.

converting to symbols in Flash

Choose button for the symbol type, and give your symbol a relevant name. This name is for your reference only.

You might have noticed a new addition to your Library: the button symbol you just created. It might seem redundant to keep the button1_up.jpg image in your Library now that you have converted it to a symbol, but deleting the image from your Library will only remove the image from the symbol container, and you’ll be left with an empty button symbol!

You will know you have successfully converted your button to a symbol when you see a blue line surrounding your image and a small circle in the center. Repeat the steps above for each image, converting each one to a button symbol.

Blue symbol outline in Flash