How to design a cool futuristic website interface — part 1

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:

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.

The oval tool set to draw freely.

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.

Setting up the oval tool for borderless circle drawing.

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.

Sizing the circle.

Here's the result:

The 195x195 pixel circle.

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.

Setting up the options for a linear color gradient in Flash.

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.

Filling up the vector circle with the linear gradient colour fill.

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.

The making of the orb symbol, the left part of the interface.

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.

A new layer made inside the new movie clips symbol.

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.

A new circle and its dimensions.

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

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

Aligning a symbol in Adobe Flash with the aid of the Align panel.

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

The new inner circle in its place.

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.

A cool green radial colour fill.

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

Filling up the circle with a radial colour fill simply makes it cool!

OK! This was done easily. Now, on to the next page where I'll show you how to add more details to your circular screen to make it look more real, with more depth added.