This technical recipe gives you a method for designing a stylish MP3 player. Everyone's sense of style is different. The overall goal with this is to keep it unobtrusive and sleek while still looking cool. Depending on the amount of time and your skill level, you can absolutely make a simpler version or something much more involved. There are people who spend their entire corporate workday creating gradients on top of gradients next to gradients to make buttons and player applications of all kinds look as shiny, sleek, and realistic as possible. Here, you will learn a little trick and use just two gradients. This design also incorporates a dynamic text field that is optional. The design dimensions can be changed to eliminate the text field if it is unnecessary. The basic design is shown below. The text field, if you choose to incorporate it, will be centered inside the player.
How to do it...
1. In Flash, create a new file by going to File | New (Ctrl/Cmd N). Select Flash File (ActionScript 3.0), and hit OK.
2. Go to Modify | Document (Ctrl/Cmd J), and change the Dimensions to
350 px x 120 px. Change the Background color to black, like the following example:
3. Rename layer 1 to base panel.
4. Use the Rectangle Primitive tool to create a rectangle that is 318 x 90 px.
5. In the Properties panel, under Rectangle Options, round the corners as much as possible. The demo is approximately 39 for each corner.
6. Center align the shape to the stage. Go to Window > Align. Click the To Stage button.
Click the buttons to center align vertically and horizontally.
7. In the Color panel, apply no stroke and a black and white radial gradient for the fill.
Then, adjust the gradient so that the white color stop is light grey. Click on the white color stop, and input #8C8C8C in the hexadecimal code text field. Use the Gradient Transform tool to alter the gradient like so:
8. With the shape still selected, go to Edit | Copy (Ctrl/Cmd C).
9. Now, lock this layer.
10. Make a new layer in the timeline by clicking on the new layer button at the bottom left of the panel. Name this layer top panel.
11. Go to Edit | Paste in Place to make an exact copy of the panel in the exact same location.
12. In the color panel, change the light grey color stop on the gradient bar to white:
#FFFFFF.
13. With the shape still selected, convert it into a symbol so that a blending mode can be applied. Modify | Convert to Symbol (F8).
14. Name it mc_sheen, and for Type choose Movie clip. Hit OK..
15. In the Properties panel, under Display, change Blending to Multiply.
At any point, you can double click on the symbol instance and adjust the position and/or color the gradient to better suit your style needs.
16. Lock this layer.
17. Create a new layer called text box, and position it between base panel and top panel in the timeline layer hierarchy.
18. Grab the Type tool, and create a text box that is 160 x 56 px. In the Properties panel, under Character, change the font to Bauhaus. If you do not have that font, choose a different font. Set the Size to 14.0 pt and the Color to white #FFFFFF. At the top of the panel, name this songDetails, and change it to Dynamic Text, as we see in the example below:
19. Also, under Paragraph, make sure that Behavior is multi-line. Center align your text.
20. Type a few lines into the text field to see the effect of the top panel on the type. Save the file first, and then test it (Ctrl/Cmd Return).
21. Lock this layer for now.
22. Create a new layer at the top of the timeline, and name it buttons.
23. Use Flash's type and drawing tools on this layer to create elements that will be converted into buttons. A boomerang shape created by clicking at desired corner points was created for the previous and next buttons. The play and pause buttons are text with these settings:
Bauhaus
White #FFFFFF
12 pts
Letter Spacing: 1.0.
24. The previous and pause buttons are positioned on the left side of the player. The next and play buttons are positioned on the right side of the player. This is to make the player look symmetrical. All the buttons are centered vertically to the stage.
25. Select the previous button, and go to Modify | Convert to Symbol (F8). Name it b_prev, and for Type choose Button. Hit OK. In the Properties panel, name the instance prev_btn. Double click on the instance. For a bare minimum, give this a Hit state. Select the frame for Hit, and press F6 to create a new key frame. Create a rectangle that is slightly larger than the graphic. If you want Over and/or Down states, create key frames for those states, and alter the graphic or add another element to it.
The demo is minimal.
26. Select the next button, and go to Modify | Convert to Symbol (F8). Name it b_next, and for Type choose Button. Hit OK. In the Properties panel, name the instance next_btn. Double click on the instance. Make this button's states match the look and sizing of b_previous. All buttons should have the same look for each state—and a good-sized Hit state.
27. Select the pause button, and go to Modify | Convert to Symbol (F8). Name it b_pause, and for Type choose Button. Hit OK. In the Properties panel, name the instance pause_btn. Double click on the instance. Make this button's states match the look and sizing of b_previous. All buttons should have the same look for each state—and good-sized Hit state.
28. Select the play button, and go to Modify | Convert to Symbol (F8). Name it b_play, and for Type choose Button. Hit OK. In the Properties panel, name the instance play_btn. Double click on the instance. Make this button's states match the look and sizing of b_previous. All buttons should have the same look for each state—and good-sized Hit state.
29. Select each button in turn, and adjust the transparency of each to different settings so that the shading change seems to affect them also. Go to the Properties panel:
Color Effects: Style: Alpha to do this. The demo uses the following settings:
prev_btn: 24%
pause_btn: 34%
play_btn: 54%
next_btn: 38%
30. Unlock the text box layer, and line it up vertically as best you can so that the baseline of the middle line of text lines up with the baseline for the play and pause buttons.
You can go to View | Rulers and drag a guide down from inside the top ruler to help you in your efforts.
31. Save!
How it works...
Flash has a fair number of drawing tools to help you in your efforts as a designer of cool Flash apps and animations. Applying gradients over the top of one another and changing the blending modes and/or transparency settings on the top elements helps to make your design look more complex and dimensional. In order to apply a blending mode or transparency setting, you must have an element of text, a movie clip, or a button. Transparency and
blending modes apply to the element they are placed on and allow the look of that element to be affected by the color and tints/shades of the elements below it. The elements on top will not be affected by the transparency and blending mode changes.
This means that the blending mode change on the top panel layer only affects the text box and the base panel layers. The buttons layer must be above the top panel layer in the timeline so that you can still click on the buttons! To compensate for the loss of the gradient's effect, you change the transparency of each button to a different setting to give the illusion of its being affected by the shade shift.
See also
f Designing your own button
f Creating a complex button