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.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.3. With the Oval tool selected, go to the Colors section of the Tools panel and block the outline color:
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.5. Ok. You want to make this circle a specific size now, so:
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:
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.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:
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.
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):
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:
2.7. Using the Paint Bucket tool (K), fill up the circle with your newly made fill, by clicking on its centre.
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.