Now let's talk about changing the look or design of our components. That process is called skinning components. If you're following along, I'm working in 05_Skinning_Components.fla in the Chapter 07 folder in the Exercise Files folder. On the stage we have this simple form that we created in this chapter. What we're going to do is modify the graphics and some of the components in this Flash file. Let's test the movie to see what our the components look like by default. Command+Return on the Mac, Ctrl+Enter on the PC. If I click inside of the text field, I get a blue rectangle showing me which text field has focus.
If I click the Submit button, it has a blue rectangle for a focus outline, and it turns blue when I click it. So let's close the Preview window. Let's take a look at editing our button. In Flash CS3 editing components is just as simple as editing a movie clip. I'm going to double-click the Submit button on the stage and then you can choose which part of the component you'd like to modify. For example, if I wanted to modify the down state of the component or when my mouse is down, when I'm clicking the button, I could double-click the graphic next to the down text when I'm inside of the button component.
If I double-click the graphic next to the down text, I'm inside of a movie clip called button_downSkin. Noticed this movie clip has three layers: highlight, fill and border. So I can modify the graphic by modifying these layers. I'm going to press Z on my keyboard to select the Zoom tool. I'm going to click and drag an area around the button to zoom in. For the border of button I'm going to lock the highlight and fill layers and then press Command+A on my keyboard to select the entire border.
And now I'm going to modify the border of this button. In the Color Panel, I'm going to make sure Fill Color is selected, and I'm going to modify the darker side, or the left gradient handle by double-clicking it, and I'm going to change its color to a dark green. Notice the color updates on the stage. I'm going to double-click the right gradient handle in the color panel, and choose the same color that I chose for the dark green, and I'm going to click and drag the slider up in the right side of the Color Panel to create a lighter version of that same green.
And so you can see that I've modified the border. Now I'm going to lock the border layer and unlock the fill layer. I'm going to select the art in the fill layer by pressing Command+A on my keyboard. Here I'm going to create a green gradient as well. I'm going to modify the left gradient handle to be a light green color. Then I'm going to modify the light gray handle to be a lighter green color. I'm going to lock the fill layer, unlock the highlight layer, select the highlight layer, all the art on it by pressing Command+A keyboard, that's Ctrl+A on the PC.
The highlight layer is a gradient that fades from a transparent gray color to semi-transparent white color. I'm going to click the slider handle on the left and I'm going to change this from being gray color by dragging the slider on the right side of the Color panel to being white. I'm going to click away. And now I've changed the highlight of my button. Let's test the movie and see what this looks like on the component. Command+Return on the Mac. Ctrl+Enter on the PC. Roll over the button and click down and I get the green button.
You can modify the other states of the button in this exact same line. One thing, you may have a question about is these grid lines that are on the stage. These lines control the scaling of this movie clip. That way, if this movie clip changes in size, the corners of the movie clip retain their corner radius and the rest of the movie clip scales. If you need to change the art of a component, you can click and drag the guides to move them. That way if your component has rounded corners and you modify the components have a different shape.
You can tell Flash not to modify those corners. And there's a look at to skin components in Flash.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Your file was successfully uploaded.