final image will look like this
by Geoff Sheridan, from www.premonition.co.uk | Flash source code at www.retrocool.org.uk (where you can download the tutorial source FLA free)
Please note that if you are using Explorer for Windows the images have an ugly white background. Sadly IE Win does not fully support the PNG file format - I would have to go to ludicrous lengths to get them to work in IE Win and as PNG is a recognised standard, this is a personal site AND it would break in IE Mac I've decided not to.
final image will look like this
1. Choose the oval tool, click on the colour for the fill and select none (the
white square with a red slash through it). Drag a circle, holding the shift
key to keep it circular. Select it.
2-4, How to set the gradient
2. In the Fill palate select Linear Gradient. Click on the left colour slider
to select it.
3. In the mixer palate, mix a colour: R=0, G=0, B=102, Alpha=100%
4. Click on the right colour slider and use the mixer to create a colour: R=0,
G=153, B=255, Alpha=100%
5. Selecting Transform Fill in paintbucket option
6. Transforming the fill
7 ...to get this
5. Choose the paintbucket and select the Transform Fill option. (pic 5) Select
the circle.
6. Click and drag the top right rotation handle, holding shift to constain (pic
6)
7. Rotate the fill 'til you get this with the dark blue at the top (pic 7)
8. Create a new layer above the current one, and draw a slightly smaller circle
on it
9. Show the align palate by pressing apple-k (ctrl-k for PC)
10. Select both circles and align their centres. Lock the bottom layer.
11. Select the smaller circle and change the colours of it's gradient using
the Fill palate and the mixer palate as before. Choose R=255, G=255, B=255,
Alpha=100% (Solid white) for the left hand side and R=255, G=255, B=255, Alpha=0%
(Transparent) for the right side
12 Transform the gradient
13. Change the gradient
14 ...to get this
12 Using the Paintbucket tool and the Transform gradient modifier as before,
rotate the gradient so the solid white is at the top (pic 12)
13. Drag the right hand colour slider halfway (see pic 13) You'll get this (pic
14)
14 Soften the edges
15. Change the symbol's Alpha
16 ...to get this
14. Select the small circle again. Select the menu item: Modify=>Shape=>Soften
Fill Edges (pic 14)
15. Convert to graphic symbol (F8, call it 'highlight') and in the Effect palate
set the Alpha to 40%
16. It should now look like pic 16
17 Draw your Icon
20. Final Image
17. Make a new layer above the existing ones. Draw your Icon in black.
So that the Icon looks like it is inside the gel button, add another highlight
on the top.
18. Make a new layer above the existing three.
19. Select and copy the highlight symbol. Select the new layer.
20. Press Apple-Shift-v (ctrl-shift-v PC) to paste a copy in exactly the same
place but on the new layer.
final image will look like this
If you liked this Aqua Buttons in Flash Tutorial please .
© premonition February 2002
[valid xhtml 1.0 transitional]