How to design a cool futuristic website interface — part 2

3. Creating the white shine for the spherical screen

3.1. To be able to achieve cool effects and take advantage of the powerful blending filters available in Flash, you will have to make a new movie clip symbol:

• Select the newly filled dark green circle.
• Select Modify > Convert to Symbol.
• Just like before, the Movie clip type should be selected, along with the central registration point. Just call it screen core this time and click OK.

3.2. Enter inside the screen core movie clip by double clicking on it with the Selection tool (V):

• Call the layer the dark green circle is on green fill.
• Make a new layer and call it white glow.

3.3. By using the techniques that I have explained up to this point, make a:

• Borderless circle, 146 by 146 pixel,
• Align it with the registration point (i.e. center it in relation to the existing ones),
• Fill it with a linear gradient colour fill. Both gradient colour values should be set to white (#FFFFFF), but the alpha (transparency) of the left one should be 70%, while the right one should be 0%. You should fill the circle vertically, from top to bottom.

3.4. Select the circle. Convert it to a movie clip symbol but do not enter inside it. You won't need to go any deeper than this. Call this new symbol white shine.

3.5. While the newly made symbol is selected, apply some cool filters to it, like this:

1. Select the Filters tab in the Property inspector.
2. Click the blue plus icon to open the filters menu and select the Blur filter.
3. Set both blur values to 18.
4. Select the Low quality from the menu.

OK, the next filter is optional. You may apply it if you think it will make your spherical screen look better. The great thing about Flash is that you can add more filters to the existing ones, but they don't have to affect your final result (you can turn them off). Let me show you how to do this.

3.6. Click the little plus icon once more, but this time, select the Glow filter and set its options like this:

1. Both Blur values should be set to 5.
2. Enter 120% as the value for the Strength option.
3. Set the Quality to Low.
4. Choose white (#FFFFFF) for the filter colour.

3.7. Click and drag the Glow filter so that it is above the Blur filter.

NOTE The stacking order of the blending filters in Flash is important, much like in Photoshop or any other graphic application. Depending on the order the filters are applied to a symbol or an object, you can obtain completely different effects and visual appearance.

3.8. To turn off the Glow blending filter, just click the green check mark next to it. It will turn into a red cross.

Why is this so practical? Well, because you don't have to erase the filter completely. It is here, with all its characteristics and options. They won't disappear once you turn the filter off, the effects just won't be applied to your object.

And now, here are the differences — the look of the interface's spherical screen with and without the Glow filter applied to it:

In the case where the Glow filter wasn't applied, the spherical screen perhaps looks more realistic, while after turning the said filter on, it has a definitely shiny and more spherical, bubble-like look. Again, the one isn't necessairly better then the other. Everything depends on what you need for your website and what you think looks better.

I will continue this tutorial with the Glow filter turned off, but you may retain it if you wish. All it requires is one simple click, so it really doesn't matter that much.

3.9. Click on the Properties tab (next to the Filters tab in the Property inspector panel). On the right side of the panel, you'll see the Color menu. Select the Alpha option and turn it down to 79%. This will make your spherical screen even more realistic.

Top of page

4. Creating the rotating part of the spherical screen

You'll make a small but important element that will add to the overall coolness of your interface. This one will move! It will be a nice rotating element.

4.1. Add a new layer inside the screen core symbol and call it rotator.

4.2. Using the Oval tool (O), make a circle. It should have the following properties:

1. The circle must be borderless.
2. The fill color should be a pale green flat one. I used #C7E2E2. Pay attention: maybe the alpha stayed on 0% or 70% from the previous fill. If so, change it to full opacity (100%).
3. The dimensions of the circle are 161x161 pixel.
4. After you have created it, align the circle, like the ones before it. Here's how it should look like:

4.3. But, this rotating part will be a ring. So you need to make one (when will they introduce this option in Flash? Arrrgh...). In order to create a ring, you will have to make a second, smaller circle, with a different color, and then use it to cut out a portion of the first one. Make this circle outside the existing one and then center it later:

1. So, make a 153 by 153 pixel borderless circle, with some other flat color.
2. Align it horizontally...
3. And then vertically.

Note: to be able to pull this off, you should have the Object drawing option disabled. I told that in the very first step of this tutorial.

4.4. To make a ring by cutting out a shape, do this with the Selection tool (V):

1. Click once on an empty part of the stage to deselect the smaller circle.
2. Select the smaller circle again.
3. Press Delete on your keyboard. You should have a ring now, like this:

4.5. Now, to cut this ring into three parts, you need another vector shape to assist you:

1. Select the Rectangle tool (R).
2. Make a borderless rectangle (no outline color, exactly like you did for all the circles).
3. The important thing is that the rectangle should be 4 pixels wide and a little bit higher than the circle.

Why would you want to cut the ring up into separate parts? Well, if you don't do it, the rotation wouldn't be visible at all. There must be an interruption in it, otherwise the animation cannot be seen (even if it's there).

4.6. Place the rectangle like it is shown below, unselect it, then select it again and delete it.

4.7. After that, you can make two other rectangles at 120 degrees, to cut up the ring into three equal parts. If you have a steady hand and are precise, you can just use the Eraser tool (E) to delete a couple of bits more. Personally, I like to be as precise as possible, and that's why I use rotation, the align panel and other shapes to this kind of work.

Regardless of the method that you use, try achieving the following result:

4.8. Select all 3 segments of the ring and convert them to a movie clip symbol. Call the new symbol rotating ring and click OK.

4.9. Go to the Property inspector and assign an Instance name to this smybol: call it rotator_mc.

If you wish so, you can change the Alpha property for this element if you find it too bright (just like you did for the white shine a few steps before).

Fine. Please do continue onto the next page of this lesson to see how to add a soft shine to the screen.