deluxeflash: May 2010

Deluxe Iphone Buttons

-BY OTO

In this tutorial I will show you how to make some eye catching Iphone like buttons in flash. With this technique you will be able to apply same to your flash games, websites etc.

Click here to view the final swf

SETTING UP YOUR LAYOUT

Open flash and create a new flash document Ctrl + N.

After creating a new document press Ctrl + J to set your page properties.

Use the same properties as shown in the screenshot above.

Background color: 100% Black.

Rename the current layer to (buttons).

MAKING YOUR BUTTONS

Double click on the rectangle tool and type in 9 for the corner radius value and press ok or enter.

Now draw a medium size rectangle on the stage.

Now take the selection tool (v), click and drag to select the top half of the rectangle as shown in the screenshot below.

make a duplicate of it by pressing ctrl + d on your keyboard. Now this is what you should have.

While the half top is still selected open the color mixers tab (shift + f9)

Type choose, linear.

While your rectangle is still selected, click on the first key fill on the color mixers panel and type in these (#0000FF), click on the right key and type in the same thing.

Now double click on the middle but type in #000000 as the fill color.

Now on the toolbar, take the Gradient Transform Tool.

Click only once on your top half rectangle.

Now rotate the right top white circle until you have this.

Finally move the white circle in the center down, you now have this.

Good.

Let’s move over to the remaining half rectangle (the bottom one)

Click on the bottom rectangle and then on the color mixers tab choose linear. Now following the same procedure with the top half rectangle set the linear to this.

If you notice we have only two keys. With the fill colors

Left Key-#0000FF

Right Key-#000000

Now take the Gradient Transform Tool and rotate the white circle from

To this

Now remember the other top half rectangle we duplicated.

Click on it and convert it to a movie clip symbol.

After converting it to a movie clip symbol, on the properties tab, color, choose alpha and type in 35% for the alpha value.

Now drag it to where it was.

(see screenshot below)

Finally you have this.

isn’t it cute?.

Take the text tool and make a static text with the label Op. give the text the following properties.

Fill Color-#0066FF

Font-Segoe Script

Font Size-45

Bold.

Then drag the text and place in the center of the rectangle

Now let’s get started by duplicating our rectangles and changing the colors.

DUPLICATING THE RECTANGLE

Click on the selection tool (v), click and drag across the rectangle to select it.

Press Ctrl + D to duplicate it.

Make 8 duplicates and then arrange them as shown in the screenshot below.

now use the zoom tool (z) to zoom inside the 2nd op.

a. Click on the bottom rectangle of the 2nd op and change the left fill key on the color mixers panel to – #FF0000

b. Click on the text also and change it to #FF0000.

c. Right click on the top half rectangle that was converted into a movie clip and select duplicate movie clip. After duplicating it double click on it to go inside of it. Change the fill color to this - #FF0000.

Now click on scene 1 to go back to the main stage.

d. Click on the other top half rectangle that wasn’t converted into to a movie clip and on the color mixers tab. Change the properties as follows;

Left Key-#FF0000

Center Key-#000000

Right Key-#FF0000

Now you should have this.

What am going to do now is to give you the values for the rest of the buttons.

VALUES

FOR THE 3rd OP BUTTON

Step a-#00FF00

Step b-#00FF00

Step c-#00FF00

Step d- left key-#00FF00 center key-#000000 right key-#00FF00

FOR THE 4th OP BUTTON

Step a-#FF00FF

Step b- #FF00FF

Step c- #FF00FF

Step d- left key- #FF00FFcenter key-#000000 right key- #FF00FF

FOR THE 5th OP BUTTON

Step a- #FFFF00

Step b- #FFFF00

Step c- #FFFF00

Step d- left key- #FFFF00 center key-#000000 right key- #FFFF00

FOR THE 6th OP BUTTON

Step a- #00FFFF

Step b- #00FFFF

Step c- #00FFFF

Step d- left key- #00FFFFcenter key-#000000 right key- #00FFFF

FOR THE 7th OP BUTTON

Step a- #666600

Step b- #666600

Step c- #666600

Step d- left key- #666600 center key-#000000 right key- #666600

FOR THE 8th OP BUTTON

Step a- #CCFF66

Step b- #CCFF66

Step c- #CCFF66

Step d- left key- #CCFF66 center key-#000000 right key- #CCFF66

FOR THE 9th OP BUTTON

Step a- #993300

Step b- #993300

Step c- #993300

Step d- left key- #993300 center key-#000000 right key- #993300

You will finally have this.

CONVERTING THEM INTO BUTTONS

A1. Using the selection tool (V) drag and select the 1st op, after select it press f8 to convert it to a symbol. Select button as the behavior and registration point center, change the name to op1, finally click ok.