In this easy lesson made for Flash 8 professional I will show you how to create a set of cool, neon glow playback control buttons easily. No other applications will be used to create these buttons, because Flash has so much power on its own! You will see:
- How to use the basic shapes to create the ones you need,
- How to use the great blending filters in Flash 8 pro,
- How to combine multiple filters and objects stacked upon one another, and some more.
You can see the example of the sleek buttons below.
Preliminary steps — setting the background
1. Open a new Flash document. Choose Modify > Document (shortcut: Ctrl+J). Select black as document background color. Click OK.
1. Mở Flash, tạo Document mới. Vào Modify > Document (shortcut: Ctrl+J) chọn BackGround màu đen
2. Select the Rectangle tool (R). Turn off the stroke color by clicking on the little pencil icon and then the small red-striped square at the bottom of the Tools panel:
.2. Chọn Rectangle tool (R) rồi tắt cái Stroke Color đi 
.
.3. Make sure that both the Object drawing and Snap to objects options are turned off: 
.
.3. Tắt luôn cái Object drawing và Snap to objects 
.
.4. Click the Set Corner Radius icon (
) and enter 6 in the window that will show up, click OK. This is done in order to have rectangles with round corners.4. Click vào Icon Set Corner Radius (
) rồi gõ vào 6 đơn vị
) rồi gõ vào 6 đơn vị5. Draw a flat color (any color will do) 410 by 120 pixel rectangle.
5. Vẽ một hình chữ nhật với màu bất kỳ có kích thước 410 x 120 pixel
6. Select the Paint Bucket tool (K). Go to the Color Mixer panel (opened by default — you can always find it in the top right part of the Flash working space). Do the following (see numbers in the screenshot below):
+1. Click on the paint bucket icon to select the fill color.
+2. In the Type menu, select Linear.
+3. Click once on the small colored square found on the bottom right.
+4. In the color code field, enter the hex code #2E70AA (that's a zero, not the letter O).
+5. Set the Alpha property for this color to 34%.
+6. Set the same color for the left square, but set its Alpha to 100%.
+1. Click on the paint bucket icon to select the fill color.
+2. In the Type menu, select Linear.
+3. Click once on the small colored square found on the bottom right.
+4. In the color code field, enter the hex code #2E70AA (that's a zero, not the letter O).
+5. Set the Alpha property for this color to 34%.
+6. Set the same color for the left square, but set its Alpha to 100%.
6. Chọn Paint Bucket tool (K). Vảo bảng Color Mixer và làm như sau:
+1. Chọn icon Paint Bucket
+2. Trong menu Type, chọn Linear
+3. Chọn vạch màu bên phải
+4. Trong khung mã màu điền: #2E70AA
+5. Trong khung Alpha: 34%
+6. Vạch màu bên trái làm tương tự nhưng với Alpha: 100%
7. Press and hold Shift, click near the rectangle's top and drag your mouse down until the rectangle's bottom. Release your mouse button, and there is your nice gradient!
7. Nhấn và giữ Shift và kéo từ mép trên xuống mép dưới của hình chữ nhật
Creating the glowing outer ring
8. Lock the current layer and call it background. Create a new layer and call it buttons.
8. Lock the current layer and call it background. Create a new layer and call it buttons.
8. Khóa Layer hiện tại và tạo một layer mới
9. Select the Oval tool (O). Go to the Property inspector and make the following selections: block the fill color, select any flat color for the stroke (outline) color, set the line type to Solid and choose 3 for line thickness.
9. Chọn Oval tool (O), vẽ một vòng tròn với màu bất kỳ, có độ dày là 3 trong bảng Properties
10. Somewhere over the rectangle, draw a ring (it is a circle, but because of the line thickness and lack of fill, it looks like a ring). Make it 70 by 70 pixels.
10. Set lại vòng tròn với kích thước 70 x 70 pixel.
11. Select the ring by clicking on it with the Selection tool (V), if it isn't already selected. Go to the Color Mixel panel and click on the pencil icon to select the Stroke color (
). In the Type menu, choose Linear exactly like you did for the fill color previously. Add two more color squares to the gradient by simply clicking anywhere between the two existing ones. You should have four of them in total, with the following color values, positioned like this:11. Chọn Selection tool (V) click vào vòng tròn. Vào bảng Color Mixel, chọn tiếp Stroke color (
). Trong Type chọn Linear rồi thêm vào 2 vạch màu nữa và set màu cho các vạch đó như hình dưới:
). Trong Type chọn Linear rồi thêm vào 2 vạch màu nữa và set màu cho các vạch đó như hình dưới:
Note: all the four squares should have their alpha set to 100% (complete opaqueness). The ring will now look like this:
Chú ý: 4 vạch màu đều có Alpha: 100%
I have hidden the background layer to work more easily and so that you can more clearly see the various steps.
I have hidden the background layer to work more easily and so that you can more clearly see the various steps.
12. Select the Gradient Transform tool (F). Click on the ring to select it. Rotate the gradient by 90°. To successfully do this, make sure that Snapping to Objects is turned on (View > Snapping > Snap to Objects). Then, press and hold Shift, click on the white circle handle and start moving your mouse clockwise.
12. Mở Snapping to Objects (View > Snapping > Snap to Objects). Dùng Gradient Transform tool (F), xoay vòng tròn 90*. Để dễ xoay thì nhấn và giữ phím Shift khi đang xoay.
13. While the ring is selected, press F8 (or select Modify > Convert to Symbol) to make a symbol out of it. Name it outer ring. Select Movie clip as type and be sure to select the registration point in the middle (see screenshot below):
13. Chọn vòng tròn, nhấn F8 (Modify > Convert to Symbol) để chuyển nó thành symbol. Chọn Movie clip, điểm Registration nằm chính giữa với tên "outer ring".
Click OK. This choice for the registration point will make it easier to align the elements inside the button later.
14. Click on the Filters tab in the Properties panel (see no. 1 in screenshot below). Click on the plus icon (2) and select the Glow filter. Make the adjustements as follows:
3: Blur X and Y: 8
4: Strength: 260%
5: Quality: High.
6: Color: #ADE2FC.
14. Mở bảng Properties, chọn thẻ Filters và điền vào những thông số như sau:
3. Blur X and Y: 8
4. Strength: 260%
5. Quality: High.
6. Color: #ADE2FC.
Leave the Knockout and Inner glow options unchecked. You will get a nice glow for your outer ring:
Chú ý: không đánh dấu vào Knockout và Inner glow
Making the main button circle
15. Select the ring again and press F8 again, while leaving the same registration point as previously and Movie clip as type of symbol. Call the new symbol play button and click OK.
15. Chọn vòng tròn một lần nữa. Nhấn F8 để tạo một Movie clip symbol mới tên là "play button".
16. Double-click on the newly made play button symbol to enter inside it. Call the first layer outer ring and lock it. That's where the ring that you have just created resides. Make a new layer above it and call it circle.
16. Double-click on the newly made play button symbol to enter inside it. Call the first layer outer ring and lock it. That's where the ring that you have just created resides. Make a new layer above it and call it circle.
16. Double-click vào Movie clip vừa tạo. Lock layer hiện tại đồng thời tạo thêm một layer mới.
17. Select the Oval tool (O) again. Go down to the Properties panel. Set #B0E2FD for the outline color and #3A5274 for the fill color. Select Solid as line type and a thickness of 2.
17. Chọn Oval tool (O). Trong bảng Properties set #B0E2FD trong phần màu của outline, #3A5274 trong phần màu của fill, 2 trong phần độ dày outline.
18. Draw a 54 by 54 pixel circle on the stage, anywhere.
18. Vẽ một vòng tròn 54 x 54 pixel
19. Select the circle (both the outline and the fill). Open the Align panel by selecting Window > Align. Turn on the To stage button (1). Click the align horizontal center (2) and align vertical center (3) buttons.
19. Chọn vào vòng tròn (nhớ là cả outline lẫn fill). Mở bảng Align(Window > Align). Bật To Stage (1), click vào align horizontal center (2) và align vertical center (3).
The circle will now be perfectly aligned with the play button movie clip's registration point and also with the ring below it.
20. Choose the Selection tool (V) and click on the fill of the circle once to select it. Press Ctrl+C to copy it.
20. Chọn Selection tool (V) và chọn vào phần fill của vòng tròn nhấn Ctrl+C.
21. Lock the current layer and call it circle. Make a new layer above it and call it circle overlay.
21. Khóa layer hiện tại và tạo một layer mới.
22. Select Edit > Paste in Place to paste the circle you copied two steps earlier exactly on the same position, but inside this new layer.
22. Vào Edit > Paste in Place
23. The copy of the circle fill will be selected by default after pasting. Go to the Color Mixer panel. Click on the paint bucket icon to select the fill color. In the Type menu, select Linear. Make the following gradient:
- You should have three color squares, one in the middle and one on each end of the gradient.
- Each square's color should be white.
- The alpha factor of squares on each end should be 41%. The middle one's should be set to 3%.
23. Vào bảng Color Mixer, chọn icon Paint Bucket, kiểu Linear trong Type để tạo một Gradient như sau:
+ Có 3 vạch màu
+ Tất cả đều mang màu trắng
+ Alpha tuần tự là 41% 3% 41%
24. Use the Gradient Transform tool (F) to rotate the gradient by 90°, just like before. The final result should look like this:
24. Dùng Gradient Transform tool (F) quay vòng tròn vừa tạo 90*. Ta có kết quả như sau:
To make the final elements of the play button, continue onto the next page.
No comments:
Post a Comment