How to design a cool futuristic website interface

In this easy Flash 8 professional lesson I will explain you how to design a great interface for your Flash website. You will learn to make the following:

• How to create a spherical, circular orb-like screen for the interface, encased in a black matte frame,
• How to animate a part of the spherical screen with some extremely simple ActionScript code,
• How to use the blending effects & filters in Flash 8 professional to achieve cutting-edge effects on your interface,
• How to create the interactive part of the interface, with hi-tech menu buttons,
• How to make blinking buttons that connect to the sphere,
• How to use pixel and bitmap fonts for a cooler look,
• How to make a sonar-like animation on a map (more coolness),
• How to make a simple but cool glowing digital clock and a lot more.

You can see the result of what you're going to learn in this lesson below. Ain't it cool? Of course, you can always expand on it.

1. Creating the matte black frame

1.1. Open a new Flash document. Save it immediately, because you'll want to just press Ctrl+S later to be able to save it again, because there is going to be a lot of work here. And you surely don't want to bang your head against the wall if your computer crashes down, the power goes down, etc. Make your life easier!

1.2. Select the Oval tool (O). In the Options section of the Tools panel:

1. turn off the Object drawing (1) and also the
2. Snap to objects (2) options.

1.3. With the Oval tool selected, go to the Colors section of the Tools panel and block the outline color:

1. Select the outline color first,
2. Click the No color icon,
3. Select any color for the fill.

You want to make a borderless circle, that's why you did this.

1.4. Draw a circle (and not an ellipse) by doing the following:

1. Hold down Shift on your keyboard,
2. Click anywhere on the stage and
3. Start dragging your mouse to draw a circle.

1.5. Ok. You want to make this circle a specific size now, so:

1. Select it by clicking it with the Selection tool (V). In the Property inspector panel, you should see the word "Shape" appear, indicating the selected vector circle shape.
2. Below that , click the padlock icon. This will lock the width and height of your circle together. Remember, you want it to stay a circle, you don't want an ellipse.
3. Type in 195 (that's a pixel value) in either the W or H field and hit Enter— the other one will assume the same value.

Here's the result:

1.6. You will give a nice gradient color fill to your circle now. Before doing that, you must unselect it. Unselect your circle by clicking on an empty spot of the working area with the Selection tool (V).

1.7. Select the Paint Bucket tool (K). Go to the Color Mixer panel (it should by open by default in the top right part of your Flash working space). Set up linear gradient fill by following these easy steps:

1. Select the fill colour (click the little paint bucket icon),
2. Choose the Linear fill type in the menu in the top right corner,
3. Select the left-end colour of the gradient (click the little square) and
4. Enter the hexadecimal colour code for this end of the gradient — type it inside the field above the gradient strip: #404040.
5. Click the colour square on the right edge of the gradient and enter its code in the field above it: #000000.

The alpha (degree of transparency) for both colours should stay at 100%. Why the two different shades of black, so close to one another? You will see that this makes the matte frame look more real. A single colour would make it too flat and unrealistic. Trust me, this can be felt, even if not seen by the eye at the first glance.

1.8. Pick up the Paint bucket tool (K) to apply the gradient colour fill to the circle:

1. Press and hold Shift on your keyboard and click with your mouse somewhere on the upper left part of the circle.
2. Drag your mouse diagonally down and to the right, until you reach the other side.
3. Release your mouse button and voila', the circle is filled.

1.9. Select the circle now, after you have filled it with the colour gradient, and then choose Modify > Convert to Symbol to create a movie clip symbol. The Convert to Symbol window will appear. Select these:

1. Call the new symbol orb screen.
2. Select Movie clip as symbol type.
3. Pay attention now: select the middle central registration point for the new symbol. It is clearly marked with a red arrow in the screenshot below (the little black square among the other, empty ones).

Click OK and you're done.

NOTE This specific registration point that you chose will make your remaining work on this part of your interface much easier, because you will need to align all of its elements around that same central point.

Top of page

2. Creating the dark green core for the spherical screen

2.1. Now you have your new movie clip symbol on the stage. Double click it with the Selection tool (V) to go inside it.

2.2. You're inside the orb screen movie clip symbol (clearly seen on the screenshot below). Name the first layer in it outer ring. Lock it by clicking on the little dot beneath the padlock icon.

Make a new layer above it and call it core. It's here that you'll create the circular screen for your interface. You'll see, at the end, it will look like a sonar or radar from a sci-fi movie.

2.3. Use the Oval tool (O) again to draw a borderless circle of any size. This new circle will of course be drawn in the new core layer. You can use any fill color that you want. Select it and set both of its dimensions to 170 pixels in the Property inspector.

2.4. You will now align it with the existing circle (outer ring, the black one):

• Select the circle (click it with the Selection tool (V)).
• Go to the Align panel (select Window > Align if you don't see it in any of the panels yet).
• Make this to align the circle with the registration point of your orb screen movie clip:

1. The Align/Distribute to Stage option must be enabled.
2. Click the Align horizontal center button.
3. Click the Align vertical center button.

Here's the result after the alignment has been done:

2.5. Deselect the circle by clicking once outside it (don't do it twice because you will exit the movie clip).

2.6. Select the Paint Bucket tool (K). You'll do some more gradient colour filling, albeit with a radial fill this time. Return to the Color Mixer panel. To create a nice radial colour fill, do this:

1. Just like the previous time, be sure that the fill colour is selected.
2. Set the Type menu to Radial.
3. Click and drag the left colour square a little bit inside, to the right (see 3 on screenshot below).
4. Enter the square's colour code in the hex code field: make it #339999, a nice turquoise green.
5. Select the other square and make it's colour code #154040.

2.7. Using the Paint Bucket tool (K), fill up the circle with your newly made fill, by clicking on its centre.

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).

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

Copyright by : lukamaras.com