In this lesson, we’re going to learn how to build the graphics for the skin of your player. The ‘skin’ of the player is all the look & feel pieces and parts of the final player.  However, after deliberating with myself I asked, “Self, this should be two parts.” Due to the length of this post and without arguing with the smarter half of my brain any further, I concur.  Part I will cover building the skin’s interface, and Part II we’ll cover building all graphics for the buttons.

In review of Lesson I we talked about the project and setting up the tools needed. In this lesson, we’ll be building all the graphic elements from scratch using Flash. If you’re not comfortable building graphics from the ground up don’t worry, it’s simple and I’ll walk you through every step. However, if you’re more comfortable using existing graphic elements such as pre-made buttons, I’ll show you how to import those into this project in Part II as well. In the end, as long as the buttons work it doesn’t matter if you built them in Flash or not, right!

Note: I’m using Windows. I’m saving my pennies for a Mac but in the meantime when I refer to ‘right-click’ you Mac users will press the CTRL key + click.

I.    Setting up the Layers in Flash

By default, a new Flash document will have one layer named “Layer 1.” Most of the time you won’t know how many layers you will eventually need, but in this project we know. First, let’s add five (5) more layers for a total of six (6).

Add the layers by clicking the layer icon (first one on the left in the group with the trash can icon) at the bottom of the Timeline, or from the menu bar select: Insert > Timeline > Layer.

Next, we’ll give the layers new names. Again, with most projects I add and name the layers as I need them. The first layer is always the Actions layer. This is where all of our ActionScript will go when we get to Lesson III. The remaining layers will hold all of our graphic elements.

To change the name of a layer, simply double-click the default name and it will become editable. Or you can right-click and open the Layer Properties panel. Name your layers similar to the image below.

Okay, layers are all set up. Let’s get to the graphics! According to how we have the layers set up, we’ll be working from bottom to top.

II.    Top graphic bar

Before we get started, you may want to turn on the Grid. It makes it easier to line things up. In the file menu, select View > Grid > Show Grid to turn it on. Then select View > Grid > Edit Grid and set the squares to 20px by 20px.

Select the Rectangle Tool

Set the shape color to #996600 and No line color 

Draw a rectangle shape across the stage from the left edge to the right edge. Don’t worry about the dimensions as we’ll set the exact width and height in the properties panel.

Speaking of the Properties Panel, ensure the newly created shape is selected and set the following:

• X: 0.0
• Y: 0.0
• Width – W: 980.0px
• Height – H: 40.0px

Remember in Lesson I, we set our stage to 980 x 640. Setting the width of this graphic ensures it spans the entire stage.

In a mere simple way, that’s it! But if you’re like me you’ll want to jazz it up a bit. Select the current shape and Copy & Paste it on the stage. Again, doesn’t matter where at this point. Ensure the newly copied shape is selected and in the Properties Panel set the height to 20.0px. You should have two rectangle shapes on the stage now – one 40.0px in height and the other 20.0px in height.

Now let’s change the shorter rectangle shape’s color and give it a gradient fill. Ensure the shape is selected and in the Color Panel change the Type from Solid to Linear. A gradient bar will appear in the Color Panel with the base color (#996600) on the left. There may already be a second color on the right. Change the second color to #CC6600. Or you can use the slider and select any color you choose. I like to keep with Web Safe colors just so there are no problems. I have no idea how users’ computer graphic cards will render the color on screen.

At this point your shape should have a gradient fill from left to right with the darker color on the left. Only, we don’t want a left to right gradient, we want a top to bottom gradient. In the Tools Panel, there are several tools with a small arrow (or triangle pointed down) next to it. This indicates there are more tools in that group. In Flash CS4 the Gradient Tool is grouped with the Transform Tool. Click and hold while selecting the Transform Tool and the Gradient Tool will appear. In Flash 8, the Gradient Tool is a stand alone tool and sits next to the Transform Tool in the panel.

With the Gradient Tool, select the smaller rectangle shape. A new set of handlebars will appear: center dot, square arrow, and a circle in the upper right corner of the shape. The center dot is…well, the center of the gradient. The arrow is to widen or narrow the intensity of the gradient fill, and the circle-shaped handlebar is to rotate the gradient’s angle.

To get the gradient fill to go from top to bottom (darker color on top), I created a smaller shape with the same colors to demonstrate. In the first image the shape is selected with the Gradient Tool. In the second image, rotate the Gradient Tool by clicking and dragging the circle shape (mouse pointer will change to a rotation symbol) down so that the circle is now in the lower right. Finally, select the little square arrow and drag the blue guidelines up so they match the top and bottom of the shape’s edge. Walla!

The last thing to do is simply set the Y coordinate to 0.0 and the new gradient shape will fit right on top of the original shape.

Of course there are an unlimited number of ways to do this. Be creative!

III.    Bottom Graphic Bar

The bottom graphic has more going on but we’ll be copying a lot of what we did in building the top graphic.

Remember the two shapes for the top bar? We’re going to use both of them for the bottom bar.

1. Select the lower darker shape (both shapes in the top graphic are 20px) from the Top Graphic layer. Copy it. Before you paste it though, select the blank keyframe in the bottom graphics layer. Now paste it in that layer. With the shape selected, in the Properties Panel set the Y coordinate to 620px. The stage height is 640px minus the height of the shape at 20px places the shape on the bottom edge of the stage.
2. Select the upper lighter shape from the Top Graphic layer. Repeat the same step by copying it, selecting the bottom graphics layer and clicking on the first keyframe  and pasting it in that layer.  With the shape selected, in the Properties Panel change the height to 40px and the Y coordinate to 580px. This will place it just above the other shape and set the overall height of the bottom graphic to 60px.

Your stage should look similar to this (shown smaller scale without grid lines)

Again, this if fine with a simple top and bottom graphic framing the main content area. We can easily begin adding navigation buttons. Or, we can stylize it a bit more…

Ensure the bottom graphic layer is still selected. In Flash CS4, Select the Rectangle Tool and in the Properties Panel set the Rectangle Options to 20.00 to give it a 20px curve. Draw an oval shape anywhere on the stage. We’ll position it and set the Width and Height next.

In Flash 8, select the Rectangle Settings sub-tool in the Tool panel and a small dialog box will appear. Enter 20 and click OK.

Next, position the new oval shape just over the bottom graphic at X: 40 and Y: 560. Set the Height (H:) at 40px and the Width (W:) at 180px. For some reason mine snapped a width of 179.9 but it doesn’t really matter.

With the shape selected, Copy and Paste a duplicate. Place the copied shape on the other side at X: 760 and Y: 560.

(shown smaller scale)

When you deselect the new oval shapes, you’ll notice the gradient fill doesn’t line up the same as the bottom graphic. Although that doesn’t look half bad, let’s blend the gradient so the bottom bar and these two new ovals have same fluid gradient fill.

With the Selection Tool, select one of the oval shapes. Hold the Shift key down and select the other oval shape and the bottom gradient bar graphic. With all three shapes highlighted, select the eyedropper tool. Click anywhere on the bottom graphic gradient bar.

The tool will auto change to the paint bucket tool. Now, click on one of the new oval shapes. All three shapes will now share the same gradient fill and become one single shape! Cool, huh?

(shown at smaller scale)

At a very simple state we can call this done. However, let’s jazz it up just a bit more. The last thing we’ll do is build a couple container graphics for our buttons we’ll build in Lesson II, Part II.  Ensure both the top and bottom graphics layers are locked by clicking the second dot in the layer name. A small padlock will appear indicating the layer is locked. This is a good practice once your done with a particular layer as you don’t want to inadvertantly mess up all the work you just did.

IV.    Navigation Graphics

Select the navigation graphics layer.

Repeat the same steps above for creating the oval shape. Only this time set the radius to 10px instead of 20px. Select the darker brown #663300 for its fill color. Using the Position and Size in the Properties panel, set the width to W: 160 and the height to H: 40. Position the shape at X: 50 and Y: 570

Finally, copy and paste this shape. With the second shape selected, set the position to X: 770 and Y: 570.

V.    Converting Graphic Elements to Symbols

One final tip before we move on to the next lesson creating the buttons. It’s good practice to covert graphics on the main timeline to symbols. This will prevent the actual graphic elements from getting mistakenly edited or deleted.

In the Timeline, select the keyframe in Frame 1.  This will select all graphics on that layer. Select the F8 key (or in the file menu: Modify > Convert to Symbol) to convert the shapes to a symbol. Give your symbol a name and select Type: Graphic. This will now create a symbol in the library where you can edit it at any time without interfering with other elements on the stage.

That’s it! The basic layout of the player graphics are in place.

As mentioned at the beginning of this tutorial, I decided to break Lesson II into two parts. Part I is what we just completed which covers the main interface. Part II will cover all the buttons.

If you found yourself lost or I misled the instruction in anyway, please let me know so I can get it corrected immediately.

Moving on to Lesson II, Part II…