How to design a cool futuristic website interface — part 3

5. Creating the white shine for the spherical screen

5.1. I like tinkering around with various shiny effects and making a more complex visual composition in my Flash interfaces. That's why I added one last shiny overlay inside the screen core movie clip. Add another layer and call it soft shine.

5.2. Take the Oval tool (O):

1. Make a 142 by 132 pixel oval.
2. Align it horizontally with the registration point.
3. As for the vertical positioning, place it so that there is only a small gap (1 or 2 pixel) left between it and the ring's upper part (see below).

5.3. Fill the oval with a white linear gradient, vertically, top to bottom:

Here is the gradient with its Alpha values (remember, all three squares are white):

Hint: to add a third color square, just click between the two existing ones.

5.4. Click on the orb screen link above the layers to go back to the orb screen symbol's timeline.

5.5. Select the screen core movie clip that you have just exited. Give it the Instance name core_mc.

Top of page

6. Creating the inner black shiny ring

6.1. Add a third layer inside the orb screen movie clip symbol.

6.2. Select the Oval tool (O). In the Property inspector, set the following options for it:

1. Select a linear gradient for the Stroke (outline color) if you wish, but make it a very dark one, close to black. I chose a two-coloured linear gradient, going from #333333 to #536868.
2. Block the fill colour.
3. As for the line type, select Solid.
4. Set the thickness of the line to 2.

6.3. Draw a 170 by 170 pixel circle and center it with the aid of the Align panel.

Note that you can't see any other spherical screen elements on the screenshot below because I hid them to make it easier for you to see this part of the lesson.

6.4. Draw a bigger outline circle using the same properties as you did for the previous one. Make this one 185 by 185 pixels. Align it with the registration point.

6.5. Select the Paint Bucket tool (K):

1. Create a linear gradient with the values as shown below.
2. To make a flawless horizontal gradient, press and hold Shift on your keyboard.
3. While holding it, click on the left side of the ring (see the middle screenshot below) and start dragging your mouse to the right.
4. When you reach the other side, release your mouse. There! You have filled the ring nicely.

6.6. Select both outline rings and the fill with the Selection tool (V). Convert them to a movie clip symbol called inner ring.

6.7. Click the Filters tab and apply the following filter for this movie clip:

1. Select the Bevel filter.
2. The Blur X and Y options should be set to 13.
3. Set the Strength to 100% and Quality to High.
4. The Shadow color should be set to #000000.
5. The Highlight color should be set to #000033.
6. Set the Angle to 45.
7. Set the Distance to 5.

Note: Leave the Knockout option unchecked and the type set to Inner.

...and here's the final result — the finished spherical screen:

Here it is with the rotating part's alpha changed to 40%:

It looks cool, doesn't it? In the next part of this tutorial (coming soon) you will see how the create the part with the buttons, text and some other cool widgets! You can download the source fla file for this part of the interface below.

Download the source FLA file for the spherical screen

If you have found this tutorial useful, please consider donating to support lukamaras.com.

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!