Stunning Colorful Balloon Buttons

We are going to make three eye-catching stunning colorful buttons in flash, which you can use for your website, flash games and misc.

You can click the link below to view the final work

Click here to view the swf.

INTRODUCTION

This tutorial was done in Flash 8, but it would be compatible with all other versions of flash, because we are not going to use action script.

Step 1 – Setting Up Your Document

Create a new flash document and save it as balloonbuttons.fla

Then press Ctrl + J to set the page properties.

Use the properties as shown in the screenshot below.

Then insert two (1) extra layers plus the default layer 1, and rename them as shown in the screenshot below.

Step 2 – Making Your Buttons

Click on the buttons layer.

Double click on the Rectangle Tool (R) and type in the corner radius value as shown below.

Then click on ok.

Draw a 369.7 x 101.3 rectangle on the stage. Make sure it is strokeless.

After drawing your rectangle, select it and press Shift + F9 to open the color mixers panel.

While your rectangle is still select choose the following options on the color mixers panel.

Note: The left fill should have this colour-#00CCFF and the right fill this-#0033FF

After you’ve finish doing this, click on the gradient transform tool (F)

Then click on your rectangle

This is how your rectangle will look like when you click on it.

Drag the arrow in the right to the center.

After dragging it to the center.

Rotate the circle also the bottom.

Now you should have this.

Duplicating your buttons

We are now going to duplicate our button, we only need three buttons so make two more duplicates by selecting the first one and then press Ctrl + D two times.

Note: Make sure you place them in this position.

Changing the Colour of the Duplicates

Click on the second button and then open the Color Mixers Panel.

For the left fill give it this colour-#FF0000 and for the right this-#990000

for the third button

left fill – #00FF00 and right fill - #003300

Converting Your Rectangle into Buttons

Click on your firs rectangle and then press F8 to convert it to a symbol.

Choose button as the behavior, registration point center, name-button1 finally press Ok.

Do the same thing to the other two buttons but change the name to button2, and the third one button3.

Let’s put some interactivity in our buttons.

Double click on the first button and then on the timeline click on the over frame and then press f6.

Using the color mixers change the color of the first button to this.

Left fill-#0066FF

Right fill-#000099

Then click on Scene 1 to go back to the main stage.

For the second button

Left fill-#FF3300

Right fill-#FF0033

For the third button

Left fill-#33FF00

Right fill-#66CC00

That’s all for our buttons. Let’s make the buttons label.

Step 3 – Making the Buttons Label

Click on the text layer and then take the text tool and make a static text on the stage with this label “stunning colorful balloon buttons” then select it and give it the following properties.

That’s for the first button. Drag it and place in the position.

Then make two duplicates of the text but change the colours as shown below

Fill Color for the second button – #FFCC00

Fill Color for the third buttons - #000000

Step 4- Drawing the Balloon Head

Normally in a balloon we always have the head that is used to blow some air inside of the balloon. So let’s draw the head.

Take the Pencil Tool (Y) and then draw something like shown below. To your buttons.

Step 5 – Rotating Your Buttons

Click on the selection tool and then select all your buttons, after selecting your buttons click on the free transform tool use the free transform tool to rotate all your buttons to this positions.

Download the source file here