Kiến thức đồ họa căn bản với Adobe Photoshop

Thảo luận trong 'Kỹ thuật xử lý ảnh' bắt đầu bởi giosongduong, 07/09/2009.

  1. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với adobe photoshop

    Tạo bản preview cho custom presets

    Trong bài trước bạn đã tạo được một custom preset. Tuy nhiên, custom preset của bạn chưa có bản Preview và bạn nhìn thấy dòng chữ Preview not available trong khung Preview.

    Trong bài này, bạn sẽ thực hành tạo một bản Preview cho custom preset của bạn. Các bước thực hành như sau:
    1. Chuyển về vùng làm việc mặc định.
    Bạn bấm chọn vùng Essentials để chọn lại vùng làm việc mặc định của Flash, tiếp đến bấm chọn Reset Essentials để khôi phục vùng làm việc mặc định này và bắt đầu vào bài thực hành 7. (Xem bài thực hành 1 về vùng làm việc)
    2. Tạo mới một flash document. (Xem bài thực hành 1 về tạo một flash document)
    3. Lưu một flash document. (Xem bài thực hành 1 về lưu một flash document)
    Chọn folder FLASH CS4 ONLINE, sau đó lưu file này lại với tên007_custom_preset_preview.fla. (có thể tải về bằng cách phải chuột lên liên kết chọn "Save target as")
    4. Sử dụng Text Tool để viết một đoạn text.
    4.1. Bấm chọn vào Text Tool trên thanh công cụ bên phải:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    4.2. Nhấp chuột vào chỗ 12.0pt trên Property Inspector:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    4.3. Đổi số 12 thành 100 rồi nhấn phím ENTER để chấp nhận giá trị mới:

    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    4.4. Bấm chuột vào khoảng giữa, bên trái Stage và gỏ vào chữ F:

    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    5. Sử dụng Motion Presets để tạo ảnh động.
    5.1 Chọn Window> Motion Presets từ menu:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    5.2 Motion Presets Panel xuất hiện. Trong folder Custom Presets, bạn thấy có my motionmotion preset bạn đã lưu trước đây:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    5.3 Bấm chọn my motion và bấm vào nút Apply:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Flash áp motion tween vào chữ F.
    5.4 Motion presets panel không cần sử dụng nữa. Bạn bấm vào dấu chéo ở góc trên bên phải của panel để đóng lại:

    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Trên màn hình bạn được kết quả như sau:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    6. Đưa bản Preview vào folder Motion Presets của Flash.
    6.1 Trước hết, bạn chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả. Theo mặc định, Flash sẽ xuất thành file 007_custom_preset_preview.swf.
    Bản Preview của một motion preset thực chất là một flash movie (file có đuôi .swf) có cùng tên với tên của motion preset. Trong trường hợp này, custom preset của bạn có tên là my motion, do đó bạn phải đổi tên file của flash movie thành my motion.swf để đưa vào folder Motion Presets của Flash.
    6.2 Bạn vào folder FLASH CS4 ONLINE và chọn file 007_custom_preset_preview.swf
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    6.3 Bấm phím F2 để đổi tên file
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    6.4 Đổi tên file thành my motion:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Đối với Windows XP, Flash lưu giữ custom presets trong folder có đường dẫn sau đây:
    C:\Documents and Settings\<user>\Local Settings\Application Data\Adobe\Flash CS4\<language>\Configuration\Motion Presets\
    Trong đó <user> là tên của user sử dụng máy, <language> là ngôn ngữ chính của chương trình, thường là en.
    Tuy nhiên, folder Local Settings có thuộc tính ẩn nên bạn phải phải cho hiện lên để có thể truy cập vào đường dẫn nêu trên.
    6.5 Bạn truy cập vào folder Documents and Settings, kế đến vào folder <user> của bạn. Chọn Tools>Folder Options… từ menu:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    6.6 Bấm chọn thẻ View, bấm chọn nút Show hidden files and folders và bấm OK.
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Folder Local Settings xuất hiện:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    6.7 Theo đường dẫn đã mô tả ở trên, bạn di chuyển vào folder Motion Presets và thấy ở đó đã có sẵn file my motion.xml mà Flash tạo ra cho custom preset của bạn:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    6.8 Bạn copy file my motion.swf từ folder FLASH CS4 ONLINE và dán vào đây:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    6.9 Trở lại Flash. Chọn Window> Motion Presets. Bấm vào my motion để xem bản Preview:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    [TABLE="align: right"]
    [TR]
    [TD="bgcolor: #cfe6f9, align: center"] Lưu ý: Có thể bạn phải chờ vài giây để Flash cập nhật thông tin bản Preview để bạn có thể xem được.
    [/TD]
    [/TR]
    [/TABLE]
    Nếu bạn sử dụng Windows Vista, bạn vào folder Motion Presets theo đường dẫn sau:
    C:\Users\< user >\AppData\Local\Adobe\Flash CS4\en\Configuration\Motion Presets
  2. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với adobe photoshop

    Bài 8: Tạo hiệu ứng lấp lánh cho chữ

    Trong bài này, bạn sẽ sử dụng mask layer và màu gradient (màu tô chuyển) để tạo hiệu ứng lấp lánh cho dòng chữ TUỔI TRẺ ONLINE. Các bước thực hành như sau:

    1. Chuyển về vùng làm việc mặc định.
    Bạn bấm chọn vùng Essentials để chọn lại vùng làm việc mặc định của Flash, tiếp đến bấm chọn Reset Essentials để khôi phục vùng làm việc mặc định này và bắt đầu vào bài thực hành 8. (Xem bài thực hành 1 về vùng làm việc)
    2. Tạo mới một flash document. (Xem bài thực hành 1 về tạo một flash document)
    3. Lưu một flash document. (Xem bài thực hành 1 về lưu một flash document)
    Chọn folder FLASH CS4 ONLINE, sau đó lưu file này lại với tên 008_laplanh.fla
    4. Sử dụng Text Tool để viết một đoạn text.
    4.1. Bấm chọn vào Text Tool trên thanh công cụ bên phải:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    4.2. Nhấp chuột vào chỗ 12.0pt trên Property Inspector:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    4.3. Đổi số 12 thành 50 rồi nhấn phím ENTER để chấp nhận giá trị mới:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    4.4. Đưa chuột vào hình tam giác bên phải tùy chọn Family:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    4.5. Bấm chuột cho xổ xuống bảng liệt kê font chữ và chọn font Arial:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    4.6. Đưa chuột vào hình tam giác bên phải tùy chọn Style:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    4.7 Bấm chuột cho xổ xuống bảng liệt kê kiểu chữ và chọn Bold:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Bạn thu được kết quả như sau:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    4.8. Bạn đưa chuột vào Stage và gõ vào dòng chữ TUỔI TRẺ ONLINE:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    4.9. Bấm phí ESCAPE để thoát khỏi khung text, lúc này cả đoạn text đã được chọn và có một khung hình chữ nhật bao quanh.
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    4.6. Để canh giữa đoạn text này trên Stage, trước hết chọn Edit>Cut từ menu:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Kế đến chọn Edit>Paste in Center từ menu:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Bạn thu được dòng chữ được canh giữa Stage như sau:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5. Sử dụng Rectangle Tool để vẽ hình chữ nhật.
    5.1 Bấm vào nút New Layer ở Timeline để thêm một layer:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.2 Bấm chọn vào Rectangle Tool trên thanh công cụ bên phải (xem thêm phần Tìm hiểu về Rectangle Tool ở cuối bài):
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.3 Bấm chuột vào ô Stroke color để chọn màu viền cho hình chữ nhật:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.4 Bảng màu hiện ra, bạn bấm chọn vào ô bên phải có dấu chéo màu đỏ. Ô này dùng để thiết lập giá trị không màu cho đường viền, tức là đối tượng được vẽ sẽ không có viền:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.5 Bấm chuột vào ô Fill color để chọn màu ruột cho hình chữ nhật:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.6 Bảng màu hiện ra, bạn bấm chọn vào ô dưới cùng bên trái để chọn màu gradient cho màu ruột của hình chữ nhật:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.7 Đưa chuột vào khoảng giữa Stage, Bấm chuột vào khoảng màu xám và kéo sang phải lấn vào vùng màu trắng như hình vẽ:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.8 Bạn thu được một hình chữ nhật có màu gradient như sau:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6. Điều chỉnh tọa độ và kích thước của hình chữa nhật. (xem thêm phần Tìm hiểu về Tọa độ và kích thước ở phần sau)
    6.1 Bấm chọn vào Selection Tool trên thanh công cụ bên phải:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.2 Bấm chọn vào hình chữ nhật vừa vẽ.Khi đã được chọn, hình chữ nhật chuyển sang dạng hạt li ti, đồng thời phía dưới chuột xuất hiện mũi tên bốn chiều
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.3 Ở Property Inspector bạn bấm vào ô kế bên chữ X và gõ vào giá trị -60:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.4 Bấm vào ô kế bên chữ Y và gõ vào giá trị 155:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.5 Bấm vào ô kế bên chữ W và gõ vào giá trị 80:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.6 Bấm vào ô kế bên chữ H và gõ vào giá trị 80:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Ghi chú: Khi điều chỉnh giá trị W và H cần lưu ý trạng thái của dây xích bên trái:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG]
    [/TD]
    [/TR]
    [TR]
    [TD][IMG]
    [/TD]
    [/TR]
    [/TABLE]

  3. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với adobe photoshop

    7. Sử dụng Color Panel để điều chỉnh màu Gradient.
    7.1 Chọn Window>Color từ menu:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Color Panel xuất hiện. Lúc này màu ruột của hình chữ nhật đang được thể hiện ở đây với kiểu màu là Linear Gradient ở ô Type. Màu này là màu mặc định được chọn ban đầu với 2 màu gốc là màu trắng ở bên trái và màu đen ở bên phải, thể hiện bằng hai nút đại diện màu gốc phía dưới Color Panel. Bạn sẽ điều chỉnh để bổ sung thêm một màu gốc ở giữa (xem thêm phần Tìm hiểu về màu ở cuối bài).
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    7.2 Bấm vào nút đại diện màu trắng và kéo vào giữa:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    7.3 Đưa chuột vào bên trái khu vực chứa các nút đại diện cho màu gốc, phía dưới chuột xuất hiện một dấu cộng. Bấm chuột để bổ sung thêm một màu mới:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    7.4 Bấm đúp chuột vào nút đại diện màu gốc bên trái. Bảng màu xuất hiện để bạn chọn lựa, đồng thời chuột biến thành ống hút màu. Bạn đưa chuột vào chữ I để chọn màu gốc cho nút bên trái:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    7.5 Bấm đúp chuột vào nút đại diện màu gốc bên phải. Bảng màu xuất hiện để bạn chọn lựa, đồng thời chuột biến thành ống hút màu. Bạn đưa chuột vào chữ I để chọn màu gốc cho nút bên phải.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Bạn thu được màu Linear Gradient với 3 màu gốc: 2 màu xanh ở hai bên và 1 màu trắng ở giữa.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    7.6 Color Panel không còn cần đến nữa, bạn bấm vào nút x ở góc trên bên phải để đóng lại:
    [TABLE="align: center"]
    [TR]
    [TD][IMG]

    8. Chuyển hình chữ nhật thành symbol.
    Lúc này hình chữ nhật vẫn đang được chọn. Bạn chọn Modify>Convert to Symbol…(hoặc bấm phím tắt F8) để chuyển thành symbol:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Hộp thoại Convert to Symbol xuất hiện. Bạn gõ vào tên hinh chu nhat ở ô Name, chọn Type là Movie Clip và bấm OK để đóng hộp thoại lại.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    9. Tạo motion tween cho hình chữ nhật di chuyển sang phải.
    9.1 Rê chuột vào symbol hình chữ nhật vừa được tạo ra. Bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Creat Motion Tween:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    9.2. Flash tạo một motion tween ở Layer 2 của hình chữ nhật với 24 frame (tương ứng với 1 giây), đồng thời di chuyển Playhead đến frame số 24:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    9.3. Bạn đưa chuột vào hình chữ nhật, giữ phím Shift và kéo hình chữ nhật sang phải như hình minh họa:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    9.4. Bạn sẽ bổ sung frame để hiệu ứng kéo dài 2 giây. Rê chuột vào keyframe 24 đến khi chuột biến thành mũi tên hai chiều:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    9.5. Kéo chuột đến frame 48 và nhả chuột ra:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    9.6. Keyframe từ frame 24 được chuyển đến frame 48:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    10. Sử dụng mask layer để tạo hiệu ứng lấp lánh.
    10.1 Layer 1 chứa dòng chữ TUỔI TRẺ ONLINE ở keyframe 1. Bạn bấm chọn frame 48:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    10.2 Bấm phím F5 để bổ sung frame:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    10.3 Đưa chuột kéo Layer 1 lên phía trên Layer 2:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    10.4 Đưa chuột vào Layer 1, bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Mask:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    10.5 Hiệu ứng mask được kích hoạt. Cả hai layer được khóa lại.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    10.6 Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Kết quả thu được là khung chữ nhật với màu gradient chạy qua màn hình từ trái sang phải với dòng chữ xuất hiện thoáng qua. Bạn sẽ bổ sung một layer với dòng chữ TUỔI TRẺ ONLINE cố định phía dưới để hiệu ứng đạt được tốt hơn.
    11. Bổ sung layer để tăng hiệu quả của hiệu ứng lấp lánh.
    11.1 Bấm vào nút X để đóng flash movie đang xem. Bấm vào biểu tượng ổ khóa của Layer 1 để mở khóa:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    11.2 Đưa chuột vào dòng chữ TUỔI TRẺ ONLINE. Bấm phím phải chuột để xuất hiện menu ngữ cảnh và chọn Copy:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    11.3 Bấm chuột ra vùng màu trắng để bỏ chọn. Bấm phím phải chuột vào một ví trí không trùng với các đối tượng trên Stage cho xuất hiện menu ngữ cảnh và chọn Paste in Place:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    11.4 Bạn thu được một dòng chữ TUỔI TRẺ ONLINE thứ hai nằm chồng ngay trên dòng chữ cũ. Bạn bấm phím phải chuột vào dòng chữ cho xuất hiện menu ngữ cảnh và chọn Distribute to Layers:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    11.5. Bạn thu được layer TUỔI TRẺ ONLINE nằm ngay trên Layer 2:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    11.6 Bạn nắm kéo layer TUỔI TRẺ ONLINE xuống dưới Layer 2, chú ý kéo chệch sang bên trái để layer này thoát ra ngoài, không bị ảnh hưởng của hiệu ứng mask:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Bạn thu được kết quả như hình minh họa:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    11.8 Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    [/TD]
    [/TR]
    [/TABLE]
  4. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với adobe photoshop

    Bài 8: Rectangle Tool, tọa độ và kích thước

    Trong bài này, bạn sẽ tìm hiểu về tọa độ và kích thước cũng như làm quen với công cụ Rectangle Tool.

    Tọa độ và kích thước
    Để định vị chính xác một đối tượng bất kỳ trên Stage, bạn cần thiết lập tọa độ cho đối tượng thông qua giá trị X Y của đối tượng. Để thiết lập kích thước cho đối tượng, bạn điều chỉnh thông số WH của đối tượng đó (W viết tắt chữ width: chiều rộng, H viết tắt chữ height: chiều cao).
    Hệ thống trục tọa độ của Flash được xác định như sau: Trục X trùng với đường thẳng nằm ngang, Trục Y trùng với đường thẳng đứng. Gốc tọa độ X=0, Y=0 trùng với góc trên bên trái. Càng về bên phải gốc tọa độ, X sẽ có giá trị dương và giá trị này lớn dần khi đối tượng di chuyển sang phải. Càng xuống dưới gốc tọa độ, Y sẽ có giá trị dương và giá trị này lớn dần khi đối tượng di chuyển xuống dưới.
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Nếu đối tượng không phải là symbol, góc trên bên trái của đối tượng sẽ được dùng để định vị đối tượng trên Stage. Tọa độ X, Y của đối tượng so với gốc tọa độ được tính theo điểm này.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Nếu đối tượng là symbol, Registration Point sẽ được dùng để định vị đối tượng trên Stage. Tọa độ X, Y của đối tượng so với gốc tọa độ được tính theo điểm Registration Point này. Trong hình minh họa dưới đây, Registration Point chính là điểm có dấu +.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Bạn thiết lập Registration Point bằng cách bấm chuột vào một trong 9 ô vuông bên phải dòng chữ Registration tronghộp thoại Convert to Symbol.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Để thay đổi giá trị X, Y, W, H bạn bấm chuột vào các ô bên cạnh các chữ X, Y, W, H trên Property Inspector, kế đến bạn gõ giá trị mới vào và bấm phím Enter.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Bạn cũng có thể thay đổi các giá trị nói trên bằng cách kéo chuột như sau: Rê chuột vào ô có giá trị bạn muốn thay đổi, khi nhìn thấy chuột biến thành bàn tay có mũi tên hai chiều trên ngón trỏ xuất hiện, kéo chuột sang phải hoặc sang trái và nhìn thấy kết quả cập nhật ngay trên Stage.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Nếu muốn giữ nguyên tỉ lệ kích thước W và H, bạn bấm vào sợi dây xích để khóa tỉ lệ cố định. Trong trường hợp mở khóa. Giá trị W và H sẽ thay đổi độc lập.

    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Tìm hiểu về màu
    Bạn thiết lập màu viền hoặc màu ruột cho hình chữ nhật bằng cách chọn màu từ bảng màu.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    - Bấm chọn vào một mẫu màu trong khu vực chứa màu solid để thiết lập màu đơn sắc (màu thuần).
    - Bấm chọn vào một mẫu màu trong khu vực chứa màu gradient để thiết lập màu tô chuyển.
    Bạn có thể chọn màu bằng cách đưa chuột vào ô có số hex đến khi chuột biến thành bàn tay với mũi tên hai chiều trên ngón trỏ xuất hiện, kéo chuột sang phải hoặc sang trái và nhìn thấy kết quả cập nhật ở ô bên trái số hex. Màu cho web được hiển thị bằng số thập lục phân – số hex, số này được viết bắt đầu bằng dấu #, tiếp theo là sáu số liên tục, 2 số đầu đại diện cho màu đỏ (red), 2 số giữa đại diện cho màu xanh lục (green), 2 số cuối đại diện cho màu xanh lam (blue). Các giá trị này có thể thay đổi từ 00 đến FF, tương đương với từ 0 đến 255 trong hệ thập phân.
    Để điều chỉnh độ trong suốt của màu, bạn thay đổi giá trị Alpha trong ô số bên phải chữ Alpha. Giá trị 0 tương ứng với trong suốt hoàn toàn, có thể nhìn xuyên qua đối tượng để thấy những đối tượng nằm dưới. Giá trị 100 tương ứng với mờ đục hoàn toàn, không nhìn thấy những gì nằm phía dưới. Giá trị Alpha có thể gõ trực tiếp vào hoặc kéo sang phải hoặc sang trái giống như kéo giá trị số hex.
    Nếu không muốn có màu viền hay màu ruột thì bấm vào ô No color (ô Thiết lập không tô màu trong hình minh họa ở trên).
    Nếu muốn chọn màu khác, bạn bấm vào nút màu hình tròn ở góc trên bên phải (ô Mở hộp thoại chọn màu trong hình minh họa ở trên). Hộp thoại Color xuất hiện:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Bạn có thể bấm chọn màu ở khu vực Basic colors hoặc chọn màu ở khu vực màu bên phải hoặc kéo thanh trượt hình tam giác bên phải để chọn hoặc gõ giá trị trực tiếp vào các ô số. Sau đó bấm vào nút Add to Custom Colors và bấm OK để chấp nhận màu đã chọn. Màu đó sẽ được áp dụng cho đối tượng của bạn.
    Sử dụng Color Panel
    Bạn có thể sử dụng Color panel để thiết lập màu cho đối tượng:

    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    - Bấm chọn ô có cây bút chì để thiết lập màu viền.
    - Bấm chọn ô có thùng nước sơn để thiết lập màu ruột.
    - Bấm chọn ô đen trắng để thiết lập màu đen cho viền và màu trắng cho ruột.
    - Bấm chọn ô không màu để để thiết lập không màu cho viền hoặc ruột.
    - Bấm chọn ô hoán đổi màu để đổi màu viền thành màu ruột và ngược lại.
    Bạn có thể chọn màu bất kỳ từ vùng màu bên trên ô có số hex hoặc kéo thanh trượt hình tam giác bên phải hoặc gõ số trực tiếp vào ô số hex theo quy tắc đã giới thiệu ở phần trên hoặc gõ số vào ô R, G, B và Alpha hoặc kéo thanh trượt bên phải các ô này. Màu mà bạn chọn lựa sẽ được cập nhật ở ô Màu được chọn.
    Bấm vào mũi tên bên phải ô Type để chọn loại màu:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    - None: thiết lập không màu cho viền hoặc ruột.
    - Solid: chọn màu thuần.
    - Linear Gradient: màu tô chuyển tuyến tính, đối tượng sẽ được tô màu chuyển đều từ các màu gốc theo hướng đường thẳng.
    - Radial Gradient: màu tô chuyển hướng tâm, đối tượng sẽ được tô màu chuyển đều từ các màu gốc theo hướng từ tâm ra.
    - Bitmap: dùng nội dung bitmap làm màu tô. (Xem ví dụ thực hành trong các bài tiếp theo)
    Sử dụng màu Gradient:

    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Bạn có thể chọn màu gradient để tô màu viền hoặc ruột cho đối tượng.
    Để thêm màu gốc cho màu hiện có bạn đưa chuột vào vùng có chứa các nút đại diện cho màu gốc, khi thấy xuất hiện dấu cộng phía dưới chuột thì bấm vào. Muốn xóa bớt màu gốc thì nắm kéo nút đại diện màu gốc ra khỏi khu vực các nút đại diện cho màu gốc. Muốn đổi màu gốc, bạn bấm đúp vào nút đại diện rồi chọn màu từ bảng màu. Bạn có thể bổ sung tối đa 15 màu cho màu gradient. Tuy nhiên, bạn cần lưu ý là màu càng phức tạp sẽ làm tăng kích thước cuối cùng của tác phẩm và có thể làm cho tác phẩm chạy chậm nếu có chọn tween cho đối tượng.
    Chọn ô Linear RGB sẽ giúp màu gradient trông mượt hơn sau khi bạn thực hiện thao tác co dãn đối tượng đã được tô màu gradient.
    Tùy chọn Overflow giúp bạn thiết lập cách hiển thị màu gradient khi vùng cần fill có kích thước lớn hơn vùng ảnh hưởng của màu gradient. (Xem thêm phần Gradient Transform Tool trong các bài tiếp theo).
    [TABLE="align: center"]
    [TR]
    [TD="bgcolor: #cfe6f9, align: center"] Tìm hiểu về Rectangle Tool
    Để chọn Rectangle Tool, bạn bấm vào biểu tượng Rectangle Tool trên thanh công cụ:
    [IMG]
    Sau khi chọn Rectangle Tool, chuột sẽ chuyển sang hình dấu +. Để vẽ, bạn bấm chuột vào vị trí đầu, kéo chuột đến vị trí cuối và nhả chuột ra để thu được một hình chữ nhật. Nếu bạn giữ phím Shift trong khi vẽ, bạn sẽ thu được một hình vuông. Nếu trước khi nhả chuột ra, bạn bấm phím mũi tên xuống hoặc lên nhiều lần, bạn có thể thu được hình chữ nhật có góc bo tròn hoặc lõm vào. Bạn cũng có thể thay đổi góc bo tròn hoặc lõm vào bằng cách điều chỉnh các thông số trên Property Inspector.[/TD]
    [/TR]
    [/TABLE]

    [TABLE="class: MsoTableGrid, width: 100%"]
    [TR]
    [TD="width: 100%, bgcolor: transparent, colspan: 2"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [/TABLE]



    [TABLE="class: pBody, align: center"]
    [TR]
    [TD="bgcolor: #ff0033, align: center"][/TD]
    [/TR]
    [TR]
    [TD="bgcolor: #f5f5f5"][/TD]
    [/TR]
    [/TABLE]
  5. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    [TABLE="class: MsoTableGrid"]
    [TR]
    [TD="width: 100%, bgcolor: transparent, colspan: 2"] Property Inspector sẽ tự động cập nhật để cung cấp các thông tin liên quan đến Rectangle Tool như sau:

    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Ngay dưới Property Inspector là biểu tượng một hình chữ nhật kèm dòng chữ cho biết bạn đang chọn RectangleTool
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Ngay dưới phần Fill and Stroke là phần chọn màu cho viền (Stroke-bên trái) và ruột (Fill-bên phải).
    Bạn chọn màu từ bảng màu khi bấm vào ô màu đen kế bên cây bút chì để thiết lập màu cho viền hoặc ô màu xanh bên phải kế bên thùng nước sơn để thiết lập màu cho ruột của hình chữ nhật (xem thêm phần Tìm hiểu về màu bên dưới):
    [IMG]
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Kế đến là chọn độ lớn của đường viền. Bạn có thể nắm kéo thanh trượt nằm ngay bên phải chữ Stroke hoặc gõ số trực tiếp vào ô bên phải. Khi bạn kéo thanh trượt, ô bên phải sẽ cập nhật giá trị tùy theo vị trí thanh trượt.
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Phần tiếp theo là chọn kiểu dáng cho đường viền. Nếu bạn bấm vào hình tam giác đen kế bên cây bút chì, bạn có thể chọn một trong các kiểu đường viền sau đây:
    [IMG]
    Nếu bạn bấm vào cây bút chì, bạn có thể tùy biến thêm các thông số phụ cho đường viền trong hộp thoại sau đây:
    [IMG]
    Bạn có thể thử nghiệm để tìm cho mình một kiểu dáng đường viền ưng ý. Tuy nhiên cần lưu ý một điều là kiểu dáng phức tạp sẽ làm tăng kích thước cuối cùng của tác phẩm.
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Phần Scale giúp hiển thị đường viền khi được phóng to hoặc thu nhỏ. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây:
    [IMG]
    Normal: Thay đổi theo giá trị scale.
    Horizontal: Chỉ scale theo chiều ngang.
    Vertical: Chỉ scale theo chiều dọc.
    None: Không thay đổi theo giá trị scale.
    Nếu chọn ô Hinting, Flash sẽ tự điều chỉnh để làm tròn giá trị stroke, tránh xuất hiện những nét nhòe trên đường thẳng nằm ngang hoặc thẳng đứng.
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Tùy chọn Cap giúp bạn thể hiện kiểu dáng đầu mút của đường thẳng. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây:
    [IMG]
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Join giúp bạn thể hiện kiểu dáng chỗ giao nhau của hai đường thẳng. Bạn sẽ thu được các chọn lựa sau đây khi bấm vào hình tam giác đen:
    [IMG]
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Rectangle Options giúp bạn điều chỉnh độ bo tròn các góc của hình chữ nhật.
    Bạn có thể kéo thanh trượt sang phải hoặc trái để điều chỉnh: Kéo sang phải để điều chỉnh độ bo tròn (giá trị trong các ô sẽ là số dương), kéo sang trái để điều chỉnh độ lõm (giá trị trong các ô sẽ là số âm).
    Bạn cũng có thể gõ trực tiếp giá trị vào ô trên cùng bên trái.
    Nếu bạn bấm vào sợi dây xích để mở ra, bạn có thể thay đổi giá trị cho từng ô để áp dụng cho từng góc của hình chữ nhật.
    Để trả về các giá trị mặc định ban đầu của hình chữ nhật, bạn bấm vào nút Reset.
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình chữ nhật có góc bo tròn:
    [IMG]
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình chữ nhật có góc lõm:
    [IMG]
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình chữ nhật có bốn góc khác nhau:
    [IMG]
    [/TD]
    [/TR]
    [/TABLE]
  6. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    Bài 9: Tạo trò chơi bóng bàn đơn giản
    Trong bài này, bạn sẽ sử dụng motion tween để tạo một trò chơi bóng bàn đơn giản. Các bước thực hành như sau:

    1. Chuyển về vùng làm việc mặc định.
    Bạn bấm chọn vùng Essentials để chọn lại vùng làm việc mặc định của Flash, tiếp đến bấm chọn Reset Essentials để khôi phục vùng làm việc mặc định này và bắt đầu vào bài thực hành 9. (Xem bài thực hành 1 về vùng làm việc)
    2. Tạo mới một flash document. (Xem bài thực hành 1 về tạo một flash document)
    3. Lưu một flash document. (Xem bài thực hành 1 về lưu một flash document)
    Chọn folder FLASH CS4 ONLINE, sau đó lưu file này lại với tên 009_pingpong.fla
    4. Import hình vẽ guide để làm đường dẫn cho motion tween.
    4.1. Chọn File > Import > Import to Stage… từ menu:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]



    4.2. Trong hộp thoại Import, trỏ đến file guide.jpg và bấm nút Open: (file guide.jpg được đính kèm theo bài có kích cỡ 550x400 pixel để sử dụng)
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]



    Bạn thu được hình của các đường dẫn giúp bạn tạo motion tween cho quả bóng và hai cây vợt sau này:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]



    Phân tích hình vẽ:
    Trong hình vẽ trên, hai đường thẳng đứng màu đỏ tượng trưng cho ranh giới di chuyển của quả bóng. Quả bóng chỉ được chạm vào hai đường này chớ không được vượt qua.
    Đường màu xanh thể hiện đường đi của quả bóng. Theo đường này, quả bóng di chuyển từ vị trí 1 đến vị trí 2, 3, 4 và trở về vị trí 5, trong đó vị trí 1 và 5 trùng nhau. Đường màu đen bên trái thể hiện đường đi của vợt trái, vợt trái di chuyển từ vị trí 1, đến vị trí hai để đón quả bóng và trở về vị trí 3, trong đó vị trí 1 và 3 trùng nhau.
    Đường màu đen bên phải thể hiện đường đi của vợt phải, vợt phải di chuyển từ vị trí 1, đến vị trí hai để đón quả bóng, kế đến di chuyển tiếp đến vị trí 3, quay lại vị trí 4 để đón quả bóng và trở về vị trí 5, trong đó vị trí 1 và 5 trùng nhau.
    Như vậy, quả bóng và vợt phải sử dụng 5 keyframe, vợt trái sử dụng 3 keyframe.
    5. Tạo motion tween cho quả bóng.

    5.1. Bấm đúp vào Layer 1 để đổi tên thành Guide:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.2. Bấm vào nút New Layer ở Timeline để thêm một layer:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]



    5.3. Flash thêm một layer mới với tên mặc định Layer 2. Bấm đúp vào Layer 2 để đổi tên thành Ball:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]



    5.4. Đưa chuột sang thanh công cụ. Bấm chuột vào Rectangle Tool và giữ chuột vài giây cho menu phụ hiện ra. Bấm chọn Oval Tool (xem thêm phần Tìm hiểu về Oval Tool ở cuối bài):

    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.5 Bấm chuột vào ô Stroke color để chọn màu viền cho hình oval:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    5.6. Bảng màu hiện ra, bạn bấm chọn vào ô bên phải có dấu chéo màu đỏ. Ô này dùng để thiết lập giá trị không màu cho đường viền, tức là đối tượng được vẽ sẽ không có viền:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]



    5.7 Bấm chuột vào ô Fill color để chọn màu ruột cho hình oval:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.8. Bảng màu hiện ra. Bạn chọn mẫu màu đỏ ở khu vực chứa màu gradient:

    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Bạn thu được kết quả như sau:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.10. Đưa chuột vào góc trên, nơi xuất phát đường đi màu xanh của quả bóng, giữ phím Shift và kéo chuột xuống sang phải một đoạn để vẽ hình tròn.
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Nhả chuột ra bạn thu được quả bóng tròn với màu gradient như sau:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.11 Bấm chọn vào Selection Tool trên thanh công cụ bên phải:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.12 Bấm chuột vào quả bóng vừa vẽ. Khi đã được chọn, quả bóng chuyển sang dạng hạt li ti, đồng thời phía dưới chuột xuất hiện mũi tên bốn chiều:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.13. Bạn chọn Modify>Convert to Symbol… từ menu (hoặc bấm phím tắt F8) để chuyển quả bóng thành symbol:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Hộp thoại Convert to Symbol xuất hiện. Bạn gỏ vào tên ball ở ô Name, chọn Type là Movie Clip và bấm OK để đóng hộp thoại lại. Quả bóng được chuyển thành Movie Clip.


    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]



    5.14 Bấm phím phải chuột vào quả bóng cho xuất hiện menu ngữ cảnh và chọn Create Motion Tween:


    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]



    Flash tạo một motion tween cho quả bóng với 24 frame (tương đương 1 giây), đồng thời di chuyển Playhead đến frame 24. Bạn bổ sung thêm frame để thời gian hoạt động của quả bóng đủ dài để bạn quan sát. Bạn sẽ bổ sung cho quả bóng hoạt động đến frame 60.
    5.15 Đưa chuột đến frame 24 của layer Ball đến khi chuột biến thành mũi tên hai chiều:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]



    5.16 Kéo chuột đến frame 60 thì nhả chuột ra. Bạn thu được motion tween cho quả bóng với 60 frame:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    5.17 Tuy nhiên frame 60 vẫn chưa phải là keyframe. Để nội dung của keyframe đầu và keyframe cuối của quả bóng trùng nhau, bạn dùng phím mũi tên Up (mũi tên đi lên) và mũi tên Down (mũi tên đi xuống) trên bàn phím. Bạn bấm mũi tên Up, quả bóng di chuyển lên trên 1 pixel, kế đến bạn bấm mũi tên Down, quả bóng di chuyển xuống dưới 1 pixel, Flash tự động bổ sung keyframe tại frame 60, đồng thời vị trí quả bóng vẫn không thay đổi do đã được bù trừ:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.18 Bấm chọn frame 60 của layer Guide:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.19 Bấm phím tắt F5 để bổ sung thêm cho đủ 60 frame để các layer khác có thể nhìn thấy đường dẫn đang nằm trên layer Guide để dễ thao tác:

    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.20 Như đã phân tích ở trên, quả bóng sử dụng 5 keyframe. Bạn bổ sung thêm các keyframe như sau: Rê chuột đến frame 15 trên Timeline:

    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.21 Bấm chuột để chuyển Playhead đến frame 15 (chú ý: bấm vào số 15, không bấm vào frame trên layer):

    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.22 Nắm chuột kéo quả bóng từ vị trí 1 đến vị trí 2 thì thả xuống. Flash tự động thêm keyframe tại frame 15 trên layer Ball:

    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.23 Rê chuột đến frame 30 trên Timeline và bấm chuột để chuyển Playhead đến frame 30:

    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.24 Kéo quả bóng đến vị trí số 3. Flash tự động thêm keyframe tại frame 30 trên layer Ball:

    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    5.25 Rê chuột đến frame 45 trên Timeline và bấm chuột để chuyển Playhead đến frame 45:

    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


  7. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    5.26 Kéo quả bóng đến vị trí số 4. Flash tự động thêm keyframe tại frame 45 trên layer Ball:

    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Bạn thu được motion tween hoàn chỉnh cho quả bóng với motion path màu tím như hình minh họa:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Tạo motion tween cho cây vợt bên trái.
    6.1 Bấm vào nút New Layer ở Timeline để thêm một layer:

    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.2 Flash thêm một layer mới với tên mặc định Layer 3. Bấm đúp vào Layer 3 để đổi tên thành Left paddle:

    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.3 Đưa chuột sang thanh công cụ. Bấm chuột vào Oval Tool và giữ chuột vài giây cho menu phụ hiện ra. Bấm chọn Rectangle Tool:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.4 Bấm chuột vào ô Fill color để chọn màu ruột cho hình chữ nhật:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.5 Bảng màu hiện ra. Bạn chọn mẫu màu xanh:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Bạn thu được kết quả như sau (màu viền vẫn là không màu):
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.6 Đưa chuột vào Stage, bấm chuột vào góc trên vị trí xuất phát của quả bóng, kéo ngược sang trái một đoạn rồi nhả chuột ra để thu được một hình chữ nhật, như hình minh họa dưới đây:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.7 Bấm chọn Selection Tool trên thanh công cụ:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.8 Bấm chọn vào hình chữ nhật vừa vẽ.Khi đã được chọn, hình chữ nhật chuyển sang dạng hạt li ti, đồng thời phía dưới chuột xuất hiện mũi tên bốn chiều:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.9 Bạn chọn Modify>Convert to Symbol…từ menu (hoặc bấm phím tắt F8) để chuyển hình chữ nhật thành symbol:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.10 Hộp thoại Convert to Symbol xuất hiện. Bạn gõ vào tên paddle ở ô Name, chọn Type là Movie Clip và bấm OK để đóng hộp thoại lại. hình chữ nhật được chuyển thành Movie Clip.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.11 Bấm phím phải chuột vào hình chữ nhật cho xuất hiện menu ngữ cảnh và chọn Create Motion Tween. Flash tạo motion tween cho hình chữ nhật trên layer Left paddle với 60 frame:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.12 Rê chuột đến frame 60 trên Timeline và bấm chuột để chuyển Playhead đến frame 60:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.13 Frame 60 vẫn chưa phải là keyframe. Bạn bấm mũi tên Up, hình chữ nhật di chuyển lên trên 1 pixel, kế đến bạn bấm mũi tên Down, hình chữ nhật di chuyển xuống dưới 1 pixel, Flash tự động bổ sung keyframe tại frame 60, đồng thời vị trí hình chữ nhật vẫn không thay đổi do đã được bù trừ:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.14 Rê chuột đến frame 30 trên Timeline và bấm chuột để chuyển Playhead đến frame 30:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    6.15 Giữ phím Shift và kéo hình chữ nhật đến vị trí số 2, nơi có quả bóng nằm sẵn (phím Shift giúp bạn di chuyển theo đường thẳng đứng, không bị lệch sang phải hoặc trái):
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Vậy là bạn đã hoàn thành motion tween cho cây vợt bên trái (tức hình chữ nhật).
    7. Tạo motion tween cho cây vợt bên phải.
    7.1 6.1 Bấm vào nút New Layer ở Timeline để thêm một layer:

    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    7.2 Flash thêm một layer mới với tên mặc định Layer 4. Bấm đúp vào Layer 4 để đổi tên thành Right paddle:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    7.3 Bấm chọn thẻ Library để mở Libray Panel:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    7.4 Từ Library Panel, bạn kéo Movie Clip paddle vào Stage, thả vào vị trí 1 của cây vợt phải như hình minh họa:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    7.5 Bấm phím phải chuột vào cây vợt bên phải (tức hình chữ nhật) cho xuất hiện menu ngữ cảnh và chọn Create Motion Tween.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    7.6 Rê chuột đến frame 60 trên Timeline và bấm chuột để chuyển Playhead đến frame 60:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    7.7 Frame 60 vẫn chưa phải là keyframe. Bạn bấm mũi tên Up, hình chữ nhật di chuyển lên trên 1 pixel, kế đến bạn bấm mũi tên Down, hình chữ nhật di chuyển xuống dưới 1 pixel, Flash tự động bổ sung keyframe tại frame 60, đồng thời vị trí hình chữ nhật vẫn không thay đổi do đã được bù trừ:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    7.8 Rê chuột đến frame 15 trên Timeline và bấm chuột để chuyển Playhead đến frame 15:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    7.9 Giữ phím Shift và kéo cây vợt đến nơi quả bóng đang nằm ở vị trí số 2:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    7.10 Rê chuột đến frame 30 trên Timeline và bấm chuột để chuyển Playhead đến frame 30:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    7.11 Giữ phím Shift và kéo cây vợt đến vị trí số 3 như hình minh họa:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    7.12 Rê chuột đến frame 45 trên Timeline và bấm chuột để chuyển Playhead đến frame 45:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

  8. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    7.13 Giữ phím Shift và kéo cây vợt đến nơi có quả bóng ở vị trí số 4 như hình minh họa:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Vậy là bạn đã hoàn thành motion tween cho cây vợt bên phải.
    8. Chuyển layer Guide thành Guide Layer.
    Layer Guide đã hoàn thành nhiệm vụ. Bạn có thể xóa layer này đi. Tuy nhiên bạn có thể giữ lại để tham khảo bằng cách chuyển nó sang Guide Layer:
    8.1 Bấm phím phải chuột vào layer Guide cho xuất hiện menu ngữ cảnh và chọn Guide:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Flash đổi biểu tượng của layer Guide thành cây búa. Bằng cách này, nội dung của layer Guide sẽ không được xuất ra theo Flash Movie, không làm tăng kích thước tác phẩm của bạn.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    8.2 Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả:
    Flash sẽ xuất thành file 009_pingpong.swf như sau:

    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    9. Di chuyển motion path
    Nếu bạn thực hiện các thao tác đúng như hướng dẫn, khi Test Movie bạn sẽ thấy vợt trái chưa chạm vào quả bóng. Bạn sẽ di chuyển motion path của vợt trái cho vợt chạm vào quả bóng (bạn có thể lấy file mẫu đính kèm để thực hành bước này)
    9.1. Rê chuột đến frame 30 trên Timeline và bấm chuột để chuyển Playhead đến frame 30:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Bạn nhìn thấy vợt trái cách quả bóng một đoạn:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    9.2 Bấm chọn vào vợt trái cho xuất hiện motion path:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    9.3 Bấm đúp vào motion path:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    9.4 Bạn kiểm tra trên Property Inspector phải có biểu tượng Motion Tween để chắc rằng bạn đã chọn motion path, không phải đối tượng nào khác:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    9.5 Dùng phím mũi tên sang phải (Right) trên bàn phím để di chuyển vợt sang phải đến khi vợt chạm vào quả bóng. Mỗi lần bạn bấm phím Right, đối tượng di chuyển 1 pixel, nếu bạn giữ phím Shift kèm theo thì đối tượng di chuyển 10 pixel.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Bạn có thể thực hiện cách tương tự để áp dụng cho cây vợt bên phải.
  9. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    Bài 9: Tìm hiểu về Oval Tool
    TTO - Phần lý thuyết bổ sung cho bài thực hành bài 9.
    Tìm hiểu về Oval Tool
    Để chọn Oval Tool, bạn bấm vào biểu tượng Rectangle Tool trên thanh công cụ và giữ chuột vài giây cho menu phụ hiện ra. Bấm chọn Oval Tool:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    Sau khi chọn Oval Tool, chuột sẽ chuyển sang hình dấu +. Để vẽ, bạn bấm chuột vào vị trí đầu, kéo chuột đến vị trí cuối và nhả chuột ra để thu được một hình oval. Nếu bạn giữ phím Shift trong khi vẽ, bạn sẽ thu được một hình tròn. Bạn cũng có thể vẽ hình vành khăn hoặc vẽ một phần của hình tròn hoặc hình vành khăn bằng bằng cách điều chỉnh các thông số trên Property Inspector.
    [TABLE="class: MsoTableGrid, width: 100%"]
    [TR]
    [TD="width: 100%, bgcolor: transparent, colspan: 2"] Property Inspector sẽ tự động cập nhật để cung cấp các thông tin liên quan đến Oval Tool như sau:[/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ngay dưới Property Inspector là biểu tượng một hình oval kèm dòng chữ cho biết bạn đang chọn Oval Tool[/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ngay dưới phần Fill and Stroke là phần chọn màu cho viền (Stroke-bên trái) và ruột (Fill-bên phải). Bạn chọn màu từ bảng màu khi bấm vào ô màu đen kế bên cây bút chì để thiết lập màu cho viền hoặc ô màu xanh bên phải kế bên thùng nước sơn để thiết lập màu cho ruột của hình oval: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Kế đến là chọn độ lớn của đường viền. Bạn có thể nắm kéo thanh trượt nằm ngay bên phải chữ Stroke hoặc gỏ số trực tiếp vào ô bên phải. Khi bạn kéo thanh trượt, ô bên phải sẽ cập nhật giá trị tùy theo vị trí thanh trượt.[/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Phần tiếp theo là chọn kiểu dáng cho đường viền. Nếu bạn bấm vào hình tam giác đen kế bên cây bút chì, bạn có thể chọn một trong các kiểu đường viền sau đây: [IMG] Nếu bạn bấm vào cây bút chì, bạn có thể tùy biến thêm các thông số phụ cho đường viền trong hộp thoại sau đây: [IMG] Bạn có thể thử nghiệm để tìm cho mình một kiểu dáng đường viền ưng ý. Tuy nhiên cần lưu ý một điều là kiểu dáng phức tạp sẽ làm tăng kích thước cuối cùng của tác phẩm.[/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Phần Scale giúp hiển thị đường viền khi được phóng to hoặc thu nhỏ. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây: [IMG] Normal: Thay đổi theo giá trị scale. Horizontal: Chỉ scale theo chiều ngang. Vertical: Chỉ scale theo chiều dọc. None: Không thay đổi theo giá trị scale. Nếu chọn ô Hinting, Flash sẽ tự điều chỉnh để làm tròn giá trị stroke, tránh xuất hiện những nét nhòe.[/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Tùy chọn Cap giúp bạn thể hiện kiểu dáng đầu mút của đường tròn không khép kín. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Join giúp bạn thể hiện kiểu dáng chỗ giao nhau của các đường. Bạn sẽ thu được các chọn lựa sau đây khi bấm vào hình tam giác đen: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [/TABLE]
  10. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop


    [TABLE="class: MsoTableGrid, width: 100%"]
    [TR]
    [TD="width: 100%, bgcolor: transparent, colspan: 2"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"][/TD]
    [TD="width: 57%, bgcolor: transparent"][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Oval Options giúp bạn điều chỉnh các thông số khi muốn vẽ hình vành khăn hoặc vẽ một phần của hình tròn hoặc hình vành khăn. Bạn có thể kéo thanh trượt để thay đổi giá trị hoặc gỏ số trực tiếp vào các ô bên phải. Start angle: Giá trị khởi đầu của cung tròn. Giá trị này có thể từ 0 đến 360 tính theo chiều kim đồng hồ. Giá trị 0 bắt đầu từ mép phải của hình tròn. End angle: Giá trị kết thúc của cung tròn. Giá trị này có thể từ 0 đến 360 tính theo chiều kim đồng hồ. Giá trị 0 bắt đầu từ mép phải của hình tròn. Inner radius: Giá trị bán kính trong của hình vành khăn. Tính theo phần trăm của bán kính ngoài. Giá trị chấp nhận từ 0 đến 99. Close path: Thiết lập nét vẽ kín hoặc hở. Nếu đánh dấu chọn thì nét vẽ kín. Để trả về các giá trị mặc định ban đầu của Oval Tool, bạn bấm vào nút Reset.[/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình oval với giá trị thiết lập bên trái: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình oval với giá trị thiết lập bên trái: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình oval với giá trị thiết lập bên trái: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình oval với giá trị thiết lập bên trái: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình oval với giá trị thiết lập bên trái: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình oval với giá trị thiết lập bên trái: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình oval với giá trị thiết lập bên trái: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình oval với giá trị thiết lập bên trái: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình oval với giá trị thiết lập bên trái: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình oval với giá trị thiết lập bên trái: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình oval với giá trị thiết lập bên trái: [IMG][/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG][/TD]
    [TD="width: 57%, bgcolor: transparent"] Ví dụ hình oval với giá trị thiết lập bên trái: [IMG][/TD]
    [/TR]
    [/TABLE]
  11. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    Bài 10: sử dụng Shape Hint
    TTO - Shape Tween giúp bạn biến đổi đối tượng từ dạng này sang dạng khác. Trong một số trường hợp, sự biến đổi này diễn ra không suôn sẻ như ý định, bạn sử dụng Shape Hint để hướng dẫn sự biến đổi theo ý mình.
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][/TD]
    [/TR]
    [TR]
    [TD][/TD]
    [/TR]
    [/TABLE]


    Trong bài này bạn sử dụng Shape Tween để chuyển hình chữ nhật thành hình ngôi sao, sau đó dùng Shape Hint để hướng dẫn sự biến đổi đều và đẹp mắt. Các bước thực hành như sau:
    1. Chuyển về vùng làm việc mặc định.
    Bạn bấm chọn vùng Essentials để chọn lại vùng làm việc mặc định của Flash, tiếp đến bấm chọn Reset Essentials đểkhôi phụcvùng làm việc mặc định này và bắt đầu vào bài thực hành 10.(Xem bài thực hành 1 về vùng làm việc)
    2. Tạo mới một flash document. (Xem bài thực hành 1 về tạo một flash document).
    3. Lưu một flash document. (Xem bài thực hành 1 về lưu một flash document).
    Chọn folder FLASH CS4 ONLINE, sau đó lưu file này lại với tên 010_shape_hint.fla (Lưu phải mẫu tham khảo bằng cách phải chuột vào liên kết và chọn "Save target as")
    4. Sử dụng Rectangle Tool để vẽ hình chữ nhật.
    4.1 Bấm chọn vào Rectangle Tool trên thanh công cụ bên phải:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    4.2 Bấm chuột vào ô Stroke color để chọn màu viền cho hình chữ nhật:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    4.3 Bảng màu hiện ra, bạn bấm chọn vào ô bên phải có dấu chéo màu đỏ. Ô này dùng để thiết lập giá trị không màu cho đường viền, tức đối tượng được vẽ sẽ không có viền:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    4.4 Bấm chuột vào ô Fill color để chọn màu ruột cho hình chữ nhật:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    4.5 Bảng màu hiện ra, bạn bấm chọn vào ô màu đỏ để chọn màu ruột của hình chữ nhật:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    4.6 Đưa chuột vào khoảng giữa Stage, bấm chuột vào góc trên bên trái và kéo sang góc dưới bên phải như hình minh họa:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    4.7 Bạn thu được một hình chữ nhật màu đỏ như sau:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    4.8 Bấm chọn vào Selection Tool trên thanh công cụ bên phải:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    4.9 Bấm chọn vào hình chữ nhật vừa vẽ.Khi đã được chọn, hình chữ nhật chuyển sang dạng hạt li ti, đồng thời phía dưới chuột xuất hiện mũi tên bốn chiều:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    4.10 Để canh giữa hình chữ nhật trên Stage, trước hết chọn Edit>Cut từ menu:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    Kế đến chọn Edit>Paste in Center từ menu:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    Bạn thu được hình chữ nhật được canh giữa Stage như sau:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    5. Sử dụng PolyStar Tool để vẽ hình ngôi sao.
    5.1 Bấm vào frame 24 của Layer 1 ở Timeline:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    5.2 Chọn Insert > Timeline > Blank Keyframe từ menu (hoặc bấm phím tắt F7) để thêm keyframe trắng vào Stage:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    5.3 Bạn thu được một keyframe trắng tại frame 24:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    Đồng thời trên Stage hình chữ nhật cũng không còn.
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    Bạn sẽ sử dụng PolyStar Tool để vẽ một ngôi sao vào Stage.
    5.4 Bấm chọn vào Rectangle Tool trên thanh công cụ bên phải và giữ chuột vài giây cho menu phụ hiện ra. Bấm chọn PolyStar Tool (xem thêm phần Tìm hiểu về PolyStar Tool ở cuối bài):
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    5.5 Bấm chuột vào ô Fill color để chọn màu ruột cho PolyStar Tool:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    5.6 Bảng màu hiện ra, bạn bấm chọn vào ô màu xanh để chọn màu ruột cho PolyStar Tool:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    5.7 Bấm vào nút Options… của PolyStar Tool:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    Hộp thoại Tool Settings xuất hiện:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    5.8 Ở mục Style, bạn bấm cho menu xổ xuống và chọn star:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    5.9 Bấm nút OK để đóng hộp thoại lại:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    5.10 Giữ phím Shift, đưa chuột vào Stage và kéo một đoạn từ dưới lên trên như hình minh họa:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    5.11 Bạn thu được hình ngôi sao màu xanh như sau:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    5.12 Bấm chọn vào Selection Tool trên thanh công cụ bên phải:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    5.13 Bấm chọn vào ngôi sao vừa vẽ.Khi đã được chọn, ngôi sao chuyển sang dạng hạt li ti, đồng thời phía dưới chuột xuất hiện mũi tên bốn chiều

    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    5.14 Để canh giữa ngôi sao trên Stage, trước hết chọn Edit>Cut từ menu:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    Kế đến chọn Edit>Paste in Center từ menu:

    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]


    < P>
    Bạn thu được ngôi sao được canh giữa Stage như sau:
    [TABLE="align: center"]
    [TR]
    [TD][TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>

    [/TD]
    [/TR]
    [/TABLE]
  12. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    Bài 10: Sử dụng Shape Hint (tiếp theo)

    Tạo Shape Tween chuyển hình chữ nhật thành ngôi sao.

    6.1 Bấm chọn vào keyframe 1 trên Layer 1 của Timeline:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    6.2 Bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Create Shape Tween:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Trên Timeline xuất hiện một mũi tên màu xanh lá cây hướng từ frame 2 đến frame 23, màu đặc trưng của Shape Tween:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Bạn có thể xem thử kết quả hình chữ nhật chuyển sang hình ngôi sao bằng cách chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter). Tuy nhiên sự chuyển đổi không đều và không đẹp mắt. Bạn sử dụng Shape Hint để tinh chỉnh như sau (xem thêm phần Tìm hiểu về Shape Hint ở cuối bài).
    6.3 Chọn Modify > Shape > Add Shape Hint từ menu (hoặc phím tắt Ctrl+Shift+H):
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Giữa hình chữ nhật xuất hiện một Shape Hint ký hiệu là chữ a được khoanh tròn màu đỏ:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    6.4 Bạn lấy chuột kéo và thả chữ a này lên góc trên bên trái của hình chữ nhật như hình minh họa:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Kết quả thu được Shape Hint chuyển lên góc trên bên trái:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    6.5 Bấm chọn keyframe số 24 trên Timeline:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Trên Stage bạn thấy Shape Hint chữ a được khoanh tròn màu đỏ nằm giữa ngôi sao:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    6.6 Bạn dùng chuột kéo Shape Hint a thả vào góc ngôi sao bên trái:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Bạn thu được Shape Hint chữ a được khoanh tròn màu xanh, chứng tỏ thao tác của bạn đã được Flash chấp nhận.
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    6.7 Bạn chọn lại keyframe 1 trên Timeline:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Shape Hint chữ a màu đỏ ban đầu giờ đây đã chuyển sang màu vàng, chứng tỏ thao tác của bạn đã được Flash chấp nhận:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    6.8 Rê chuột vào Shape Hint chữ a đến khi phía dưới chuột xuất hiện dấu cộng:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    6.9 Bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Add Hint:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    6.10 Flash bổ sung một Shape Hint mới với chữ b được khoanh tròn màu đỏ:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    6.11 Bạn nắm kéo Shape Hint b và thả lên góc trên bên phải hình chữ nhật:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Shape Hint b được chuyển lên góc trên bên phải:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    6.12 Bấm chọn keyframe số 24 trên Timeline:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Trên Stage bạn thấy Shape Hint chữ b được khoanh tròn màu đỏ nằm giữa ngôi sao:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    6.13 Bạn nắm kéo Shape Hint b thả vào góc ngôi sao bên phải:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    6.14 Bạn thu được Shape Hint chữ b được khoanh tròn màu xanh, chứng tỏ thao tác của bạn đã được Flash chấp nhận.
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Lúc này, nếu bạn chọn lại keyframe 1, bạn sẽ thấy Shape Hint b cũng đã đổi sang màu vàng.
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    7. Xuất file thành flash movie.
    Bạn chọn Control > Test Movie từ menu, Flash sẽ xuất thành file 010_shape_hint.swf:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Bạn thu được kết quả hình chữ nhật chuyển sang ngôi sao năm cánh đều và đẹp. Đồng thời màu cũng chuyển tiếp liên tục từ đỏ sang xanh.
  13. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    Một số bài tập gợi ý:
    Sử dụng Shape Tween và Shape Hint để chuyển hình chữ nhật thành hình tam giác. Xem gợi ý hai Shape Hint ở hình minh họa sau đây (so sánh kết quả với bài mẫu 010_shape_hint2.fla)
    < P>
    Shape Hint ở keyframe đầu:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Shape Hint ở keyframe cuối:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Sử dụng Shape Tween và Shape Hint để chuyển số 1 thành số 2. Xem gợi ý hai Shape Hint ở hình minh họa sau đây. (Lưu ý: Bạn dùng Text Tool, font chữ Arial, Bold, size 100. Sau khi gỏ vào số 1 hoặc số 2, bạn dùng lệnh Modify > Break Apart từ menu (hoặc phím tắt Ctrl+B) để chuyển chữ sang Shape) (so sánh kết quả với bài mẫu 010_shape_hint3.fla):
    < P>
    Shape Hint ở keyframe đầu:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Shape Hint ở keyframe cuối:
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    < P>
    Thực hành lại bài chuyển hình chữ nhật thành hình ngôi sao, sau đó thêm một Shape Tween chuyển ngôi sao trở về hình chữ nhật trên cùng một layer. Ở bài này, bạn chọn keyframe đầu của Shape Tween thứ hai để thêm Shape Hint, sau đó di chuyển các Shape Hint đến các vị trí tương ứng giống phần đầu. Bạn copy hình chữ nhật ở keyframe đầu và dán vào keyframe cuối để tạo sự chuyển tiếp không bị đột biến. (so sánh kết quả với bài mẫu 010_shape_hint4.fla).
  14. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    Bài 10: Tìm hiểu về PolyStar Tool

    Phần lý thuyết bổ sung cho bài thực hành. Những thông tin cơ bản về công cụ PolyStar Tool mà bạn đọc cần nắm rõ.

    Để chọn PolyStar Tool, bạn bấm vào biểu tượng Rectangle Tool trên thanh công cụ và giữ chuột vài giây cho menu phụ hiện ra. Bấm chọn PolyStar Tool:
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Sau khi chọn PolyStar Tool, chuột sẽ chuyển sang hình dấu +. Để vẽ, bạn bấm chuột vào vị trí đầu, kéo chuột đến vị trí cuối và nhả chuột ra để thu được một hình đa giác hoặc hình ngôi sao (xem phần tùy chọn tiếp theo phía dưới). Nếu bạn giữ phím Shift trong khi vẽ, bạn có thể xác lập vị trí đỉnh của đa giác (hoặc ngôi sao) tùy theo hướng bạn kéo chuột sang phải, sang trái, lên trên hoặc xuống dưới.
    [TABLE="class: tLegend, align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]

    [TABLE="class: pBody, width: 100%"]
    [TR]
    [TD="width: 100%, bgcolor: transparent, colspan: 2"] Property Inspector sẽ tự động cập nhật để cung cấp các thông tin liên quan đến PolyStar Tool như sau:
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Ngay dưới Property Inspector là biểu tượng một đa giác kèm dòng chữ cho biết bạn đang chọn PolyStar Tool
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Ngay dưới phần Fill and Stroke là phần chọn màu cho viền (Stroke-bên trái) và ruột (Fill-bên phải).
    Bạn chọn màu từ bảng màu khi bấm vào ô màu đen kế bên cây bút chì để thiết lập màu cho viền hoặc ô màu đỏ bên phải kế bên thùng nước sơn để thiết lập màu cho ruột của đa giác hoặc ngôi sao:
    [IMG]
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Kế đến là chọn độ lớn của đường viền. Bạn có thể nắm kéo thanh trượt nằm ngay bên phải chữ Stroke hoặc gỏ số trực tiếp vào ô bên phải. Khi bạn kéo thanh trượt, ô bên phải sẽ cập nhật giá trị tùy theo vị trí thanh trượt.
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Phần tiếp theo là chọn kiểu dáng cho đường viền. Nếu bạn bấm vào hình tam giác đen kế bên cây bút chì, bạn có thể chọn một trong các kiểu đường viền sau đây:
    [IMG]

    Nếu bạn bấm vào cây bút chì, bạn có thể tùy biến thêm các thông số phụ cho đường viền trong hộp thoại sau đây:
    [IMG]

    Bạn có thể thử nghiệm để tìm cho mình một kiểu dáng đường viền ưng ý. Tuy nhiên cần lưu ý một điều là kiểu dáng phức tạp sẽ làm tăng kích thước cuối cùng của tác phẩm.
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"]
    [IMG]
    [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Phần Scale giúp hiển thị đường viền khi được phóng to hoặc thu nhỏ. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây:
    [IMG]

    Normal: Thay đổi theo giá trị scale.
    Horizontal: Chỉ scale theo chiều ngang.
    Vertical: Chỉ scale theo chiều dọc.
    None: Không thay đổi theo giá trị scale.
    Nếu chọn ô Hinting, Flash sẽ tự điều chỉnh để làm tròn giá trị stroke, tránh xuất hiện những nét nhòe trên đường thẳng nằm ngang hoặc thẳng đứng.
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Tùy chọn Cap giúp bạn thể hiện kiểu dáng đầu mút của đường thẳng. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây:
    [IMG]
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Join giúp bạn thể hiện kiểu dáng chỗ giao nhau của hai đường thẳng. Bạn sẽ thu được các chọn lựa sau đây khi bấm vào hình tam giác đen:
    [IMG]
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Options… ở mục Tool Settings giúp bạn chọn lựa kiểu hình vẽ là đa giác (polygon) hay ngôi sao (star) và điều chỉnh các thông số khác.
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Ở mục Style bạn bấm cho menu xổ xuống và chọn polygon hoặc star.
    Ở mục Number of Sides: bạn gỏ vào giá trị theo nhu cầu, tối thiểu là 3, tối đa là 32.
    Ở mục Star point size: bạn gỏ vào giá trị theo nhu cầu để xác định độ nhọn các cánh của ngôi sao, tối thiểu là 0.00, tối đa là 1.00.
    [/TD]
    [/TR]
    [TR]
    [TD="width: 42%, bgcolor: transparent"] [IMG]
    [/TD]
    [TD="width: 57%, bgcolor: transparent"] Xem ví dụ các giá trị khác nhau của Star point size ở hình bên trái. Nhận xét: giá trị càng nhỏ, cánh ngôi sao càng nhọn.
    [/TD]
    [/TR]
    [/TABLE]
    Tìm hiểu về Shape Hint
    Thông thường khi mở một file flash document, bạn không nhìn thấy Shape Hint. Để nhìn thấy Shape Hint bạn chọn View > Show Shape Hints từ menu (hoặc phím tắt Ctrl+Alt+H).
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Để thêm Shape Hint bạn phải chọn keyframe đầu của Shape Tween. Nếu bạn chọn nhầm keyframe cuối, lệnh Add Shape Hint từ menu sẽ bị mờ đi.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Nếu bạn đã có sẵn Shape Hint trên hình, bạn có thể kích hoạt menu ngữ cảnh bằng cách rê chuột vào một Shape Hint có sẵn và bấm phím phải chuột.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Khi menu ngữ cảnh xuất hiện, bạn có thể chọn một trong các tùy chọn sau:
    - Add Hint: thêm một Shape Hint.
    - Remove Hint: gỡ bỏ Shape Hint hiện có.
    - Remove All Hints: gỡ bỏ tất cả Shape Hint.
    - Show Hints: bấm chọn mục này để giấu các Shape Hint. Để có thể nhìn thấy Shape Hint trở lại, bạn chọn View > Show Shape Hints từ menu.
    Nếu bạn chọn nhầm keyframe cuối của Shape Tween, các mục của menu ngữ cảnh bị mờ, trừ mục Show Hints có thể chọn được. Nếu bạn chọn mục này, các Shape Hint sẽ được giấu đi.
    [TABLE="align: center"]
    [TR]
    [TD][IMG][/TD]
    [/TR]
    [/TABLE]
    Các Shape Hint được ký hiệu theo bộ chữ cái tiếng Anh, từ a tới z. Như vậy, bạn có thể thêm được tối đa 26 Shape Hint. Tuy nhiên, có thể bạn không cần thêm nhiều mà chỉ cần một số Shape Hint nhất định và kiểm tra nếu thấy kết quả đạt yêu cầu là được. Thông thường sau khi thêm một Shape Hint và di chuyển đến vị trí cần thiết thì bạn kiểm tra thử, nếu chưa đạt thì thêm Shape Hint khác rồi thử tiếp. Không nên thêm nhiều Shape Hint cùng một lúc rồi thử.
    Shape Hint ở keyframe cuối có màu xanh, ở keyframe đầu có màu vàng. Khi mới được thêm vào, Shape Hint có màu đỏ vì chưa được di chuyển đến vị trí viền ngoài của đối tượng. Nếu bạn di chuyển Shape Hint đến vị trí mới nhưng không nằm trên viền của đối tượng, Shape Hint cũng có màu đỏ và kết quả thu được không như ý muốn.
    Ngoài ra, nếu bạn có nhiều Shape Hint thì lưu ý thứ tự Shape Hint ở keyframe đầu và keyframe cuối phải phù hợp nhau. Ví dụ ở keyframe đầu bạn xếp Shape Hint theo thứ tự là abc, thì ở keyframe cuối không nên xếp theo theo thứ tự acb mà phải là abc.
    Shape Hint sẽ hoạt động tốt nhất nếu bạn đặt chúng theo thứ tự ngược chiều kim đồng hồ và bắt đầu từ góc trên bên trái
  15. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    Tạo bản preview cho custom presets
    TTO - Trong bài trước bạn đã tạo được một custom preset. Tuy nhiên, custom preset của bạn chưa có bản Preview và bạn nhìn thấy dòng chữ Preview not available trong khung Preview.
    Trong bài này, bạn sẽ thực hành tạo một bản Preview cho custom preset của bạn. Các bước thực hành như sau:
    1. Chuyển về vùng làm việc mặc định.
    Bạn bấm chọn vùng Essentials để chọn lại vùng làm việc mặc định của Flash, tiếp đến bấm chọn Reset Essentials để khôi phục vùng làm việc mặc định này và bắt đầu vào bài thực hành 7. (Xem bài thực hành 1 về vùng làm việc)
    2. Tạo mới một flash document. (Xem bài thực hành 1 về tạo một flash document)
    3. Lưu một flash document. (Xem bài thực hành 1 về lưu một flash document)
    Chọn folder FLASH CS4 ONLINE, sau đó lưu file này lại với tên007_custom_preset_preview.fla. (có thể tải về bằng cách phải chuột lên liên kết chọn "Save target as")
    4. Sử dụng Text Tool để viết một đoạn text.
    4.1. Bấm chọn vào Text Tool trên thanh công cụ bên phải:

    [IMG]

    4.2. Nhấp chuột vào chỗ 12.0pt trên Property Inspector:

    [IMG]

    4.3. Đổi số 12 thành 100 rồi nhấn phím ENTER để chấp nhận giá trị mới:

    [IMG]

    4.4. Bấm chuột vào khoảng giữa, bên trái Stage và gỏ vào chữ F:

    [IMG]

    5. Sử dụng Motion Presets để tạo ảnh động.
    5.1 Chọn Window> Motion Presets từ menu:

    [IMG]

    5.2 Motion Presets Panel xuất hiện. Trong folder Custom Presets, bạn thấy có my motionmotion preset bạn đã lưu trước đây:

    [IMG]

    5.3 Bấm chọn my motion và bấm vào nút Apply:

    [IMG]

    Flash áp motion tween vào chữ F.
  16. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    5.4 Motion presets panel không cần sử dụng nữa. Bạn bấm vào dấu chéo ở góc trên bên phải của panel để đóng lại:

    [IMG]

    Trên màn hình bạn được kết quả như sau:

    [IMG]

    6. Đưa bản Preview vào folder Motion Presets của Flash.
    6.1 Trước hết, bạn chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả. Theo mặc định, Flash sẽ xuất thành file 007_custom_preset_preview.swf.
    Bản Preview của một motion preset thực chất là một flash movie (file có đuôi .swf) có cùng tên với tên của motion preset. Trong trường hợp này, custom preset của bạn có tên là my motion, do đó bạn phải đổi tên file của flash movie thành my motion.swf để đưa vào folder Motion Presets của Flash.
    6.2 Bạn vào folder FLASH CS4 ONLINE và chọn file 007_custom_preset_preview.swf

    [IMG]

    6.3 Bấm phím F2 để đổi tên file

    [IMG]

    6.4 Đổi tên file thành my motion:

    [IMG]


    Đối với Windows XP, Flash lưu giữ custom presets trong folder có đường dẫn sau đây:
    C:\Documents and Settings\<user>\Local Settings\Application Data\Adobe\Flash CS4\<language>\Configuration\Motion Presets\
    Trong đó <user> là tên của user sử dụng máy, <language> là ngôn ngữ chính của chương trình, thường là en.
    Tuy nhiên, folder Local Settings có thuộc tính ẩn nên bạn phải phải cho hiện lên để có thể truy cập vào đường dẫn nêu trên.
    6.5 Bạn truy cập vào folder Documents and Settings, kế đến vào folder <user> của bạn. Chọn Tools>Folder Options… từ menu:

    [IMG]

    6.6 Bấm chọn thẻ View, bấm chọn nút Show hidden files and folders và bấm OK.

    [IMG]

    Folder Local Settings xuất hiện:

    [IMG]

    6.7 Theo đường dẫn đã mô tả ở trên, bạn di chuyển vào folder Motion Presets và thấy ở đó đã có sẵn file my motion.xml mà Flash tạo ra cho custom preset của bạn:

    [IMG]

    6.8 Bạn copy file my motion.swf từ folder FLASH CS4 ONLINE và dán vào đây:

    [IMG]

    6.9 Trở lại Flash. Chọn Window> Motion Presets. Bấm vào my motion để xem bản Preview:

    [IMG]


    Lưu ý: Có thể bạn phải chờ vài giây để Flash cập nhật thông tin bản Preview để bạn có thể xem được.


    Nếu bạn sử dụng Windows Vista, bạn vào folder Motion Presets theo đường dẫn sau:
    C:\Users\< user >\AppData\Local\Adobe\Flash CS4\en\Configuration
  17. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    Bài 8: Tạo hiệu ứng lấp lánh cho chữ
    TTO - Trong bài này, bạn sẽ sử dụng mask layer và màu gradient (màu tô chuyển) để tạo hiệu ứng lấp lánh cho dòng chữ TUỔI TRẺ ONLINE. Các bước thực hành như sau:
    1. Chuyển về vùng làm việc mặc định.
    Bạn bấm chọn vùng Essentials để chọn lại vùng làm việc mặc định của Flash, tiếp đến bấm chọn Reset Essentials để khôi phục vùng làm việc mặc định này và bắt đầu vào bài thực hành 8. (Xem bài thực hành 1 về vùng làm việc)
    2. Tạo mới một flash document. (Xem bài thực hành 1 về tạo một flash document)
    3. Lưu một flash document. (Xem bài thực hành 1 về lưu một flash document)
    Chọn folder FLASH CS4 ONLINE, sau đó lưu file này lại với tên 008_laplanh.fla
    4. Sử dụng Text Tool để viết một đoạn text.
    4.1. Bấm chọn vào Text Tool trên thanh công cụ bên phải:



    [IMG]

    4.2. Nhấp chuột vào chỗ 12.0pt trên Property Inspector:


    [IMG]

    4.3. Đổi số 12 thành 50 rồi nhấn phím ENTER để chấp nhận giá trị mới:


    [IMG]

    4.4. Đưa chuột vào hình tam giác bên phải tùy chọn Family:

    [IMG]

    4.5. Bấm chuột cho xổ xuống bảng liệt kê font chữ và chọn font Arial:


    [IMG]

    4.6. Đưa chuột vào hình tam giác bên phải tùy chọn Style:


    [IMG]

    4.7 Bấm chuột cho xổ xuống bảng liệt kê kiểu chữ và chọn Bold:


    [IMG]

    Bạn thu được kết quả như sau:


    [IMG]

    4.8. Bạn đưa chuột vào Stage và gõ vào dòng chữ TUỔI TRẺ ONLINE:


    [IMG]

    4.9. Bấm phí ESCAPE để thoát khỏi khung text, lúc này cả đoạn text đã được chọn và có một khung hình chữ nhật bao quanh.


    [IMG]

    4.6. Để canh giữa đoạn text này trên Stage, trước hết chọn Edit>Cut từ menu:


    [IMG]

    Kế đến chọn Edit>Paste in Center từ menu:


    [IMG]

    Bạn thu được dòng chữ được canh giữa Stage như sau:


    [IMG]
  18. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    5. Sử dụng Rectangle Tool để vẽ hình chữ nhật.

    5.1 Bấm vào nút New Layer ở Timeline để thêm một layer:


    [IMG]

    5.2 Bấm chọn vào Rectangle Tool trên thanh công cụ bên phải (xem thêm phần Tìm hiểu về Rectangle Tool ở cuối bài):


    [IMG]

    5.3 Bấm chuột vào ô Stroke color để chọn màu viền cho hình chữ nhật:


    [IMG]

    5.4 Bảng màu hiện ra, bạn bấm chọn vào ô bên phải có dấu chéo màu đỏ. Ô này dùng để thiết lập giá trị không màu cho đường viền, tức là đối tượng được vẽ sẽ không có viền:


    [IMG]

    5.5 Bấm chuột vào ô Fill color để chọn màu ruột cho hình chữ nhật:


    [IMG]

    5.6 Bảng màu hiện ra, bạn bấm chọn vào ô dưới cùng bên trái để chọn màu gradient cho màu ruột của hình chữ nhật:


    [IMG]

    5.7 Đưa chuột vào khoảng giữa Stage, Bấm chuột vào khoảng màu xám và kéo sang phải lấn vào vùng màu trắng như hình vẽ:


    [IMG]

    5.8 Bạn thu được một hình chữ nhật có màu gradient như sau:


    [IMG]

    6. Điều chỉnh tọa độ và kích thước của hình chữa nhật. (xem thêm phần Tìm hiểu về Tọa độ và kích thước ở phần sau)
    6.1 Bấm chọn vào Selection Tool trên thanh công cụ bên phải:

    [IMG]

    6.2 Bấm chọn vào hình chữ nhật vừa vẽ.Khi đã được chọn, hình chữ nhật chuyển sang dạng hạt li ti, đồng thời phía dưới chuột xuất hiện mũi tên bốn chiều


    [IMG]

    6.3 Ở Property Inspector bạn bấm vào ô kế bên chữ X và gõ vào giá trị -60:


    [IMG]

    6.4 Bấm vào ô kế bên chữ Y và gõ vào giá trị 155:


    [IMG]

    6.5 Bấm vào ô kế bên chữ W và gõ vào giá trị 80:


    [IMG]

    6.6 Bấm vào ô kế bên chữ H và gõ vào giá trị 80:


    [IMG]

    Ghi chú: Khi điều chỉnh giá trị W và H cần lưu ý trạng thái của dây xích bên trái:



    [IMG][IMG]

    7. Sử dụng Color Panel để điều chỉnh màu Gradient.
    7.1 Chọn Window>Color từ menu:


    [IMG]

    Color Panel xuất hiện. Lúc này màu ruột của hình chữ nhật đang được thể hiện ở đây với kiểu màu là Linear Gradient ở ô Type. Màu này là màu mặc định được chọn ban đầu với 2 màu gốc là màu trắng ở bên trái và màu đen ở bên phải, thể hiện bằng hai nút đại diện màu gốc phía dưới Color Panel. Bạn sẽ điều chỉnh để bổ sung thêm một màu gốc ở giữa (xem thêm phần Tìm hiểu về màu ở cuối bài).


    [IMG]

    7.2 Bấm vào nút đại diện màu trắng và kéo vào giữa:


    [IMG]

    7.3 Đưa chuột vào bên trái khu vực chứa các nút đại diện cho màu gốc, phía dưới chuột xuất hiện một dấu cộng. Bấm chuột để bổ sung thêm một màu mới:


    [IMG]

    7.4 Bấm đúp chuột vào nút đại diện màu gốc bên trái. Bảng màu xuất hiện để bạn chọn lựa, đồng thời chuột biến thành ống hút màu. Bạn đưa chuột vào chữ I để chọn màu gốc cho nút bên trái:

    [IMG]

    7.5 Bấm đúp chuột vào nút đại diện màu gốc bên phải. Bảng màu xuất hiện để bạn chọn lựa, đồng thời chuột biến thành ống hút màu. Bạn đưa chuột vào chữ I để chọn màu gốc cho nút bên phải.

    [IMG]

    Bạn thu được màu Linear Gradient với 3 màu gốc: 2 màu xanh ở hai bên và 1 màu trắng ở giữa.

    [IMG]

    7.6 Color Panel không còn cần đến nữa, bạn bấm vào nút x ở góc trên bên phải để đóng lại:

    [IMG]
  19. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    Bài 8: Tạo hiệu ứng lấp lánh cho chữ (tiếp theo)
    TTO - 8. Chuyển hình chữ nhật thành symbol.
    Lúc này hình chữ nhật vẫn đang được chọn. Bạn chọn Modify>Convert to Symbol…(hoặc bấm phím tắt F8) để chuyển thành symbol:

    [IMG]

    Hộp thoại Convert to Symbol xuất hiện. Bạn gõ vào tên hinh chu nhat ở ô Name, chọn Type là Movie Clip và bấm OK để đóng hộp thoại lại.

    [IMG]

    9. Tạo motion tween cho hình chữ nhật di chuyển sang phải.
    9.1 Rê chuột vào symbol hình chữ nhật vừa được tạo ra. Bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Creat Motion Tween:

    [IMG]

    9.2. Flash tạo một motion tween ở Layer 2 của hình chữ nhật với 24 frame (tương ứng với 1 giây), đồng thời di chuyển Playhead đến frame số 24:

    [IMG]

    9.3. Bạn đưa chuột vào hình chữ nhật, giữ phím Shift và kéo hình chữ nhật sang phải như hình minh họa:

    [IMG]

    9.4. Bạn sẽ bổ sung frame để hiệu ứng kéo dài 2 giây. Rê chuột vào keyframe 24 đến khi chuột biến thành mũi tên hai chiều:

    [IMG]

    9.5. Kéo chuột đến frame 48 và nhả chuột ra:

    [IMG]

    9.6. Keyframe từ frame 24 được chuyển đến frame 48:

    [IMG]

    10. Sử dụng mask layer để tạo hiệu ứng lấp lánh.
    10.1 Layer 1 chứa dòng chữ TUỔI TRẺ ONLINE ở keyframe 1. Bạn bấm chọn frame 48:

    [IMG]

    10.2 Bấm phím F5 để bổ sung frame:

    [IMG]

    10.3 Đưa chuột kéo Layer 1 lên phía trên Layer 2:

    [IMG]

    10.4 Đưa chuột vào Layer 1, bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Mask:

    [IMG]

    10.5 Hiệu ứng mask được kích hoạt. Cả hai layer được khóa lại.

    [IMG]

    10.6 Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả:

    [IMG]

    Kết quả thu được là khung chữ nhật với màu gradient chạy qua màn hình từ trái sang phải với dòng chữ xuất hiện thoáng qua. Bạn sẽ bổ sung một layer với dòng chữ TUỔI TRẺ ONLINE cố định phía dưới để hiệu ứng đạt được tốt hơn.
    11. Bổ sung layer để tăng hiệu quả của hiệu ứng lấp lánh.
    11.1 Bấm vào nút X để đóng flash movie đang xem. Bấm vào biểu tượng ổ khóa của Layer 1 để mở khóa:

    [IMG]

    11.2 Đưa chuột vào dòng chữ TUỔI TRẺ ONLINE. Bấm phím phải chuột để xuất hiện menu ngữ cảnh và chọn Copy:

    [IMG]

    11.3 Bấm chuột ra vùng màu trắng để bỏ chọn. Bấm phím phải chuột vào một ví trí không trùng với các đối tượng trên Stage cho xuất hiện menu ngữ cảnh và chọn Paste in Place:

    [IMG]

    11.4 Bạn thu được một dòng chữ TUỔI TRẺ ONLINE thứ hai nằm chồng ngay trên dòng chữ cũ. Bạn bấm phím phải chuột vào dòng chữ cho xuất hiện menu ngữ cảnh và chọn Distribute to Layers:

    [IMG]

    11.5. Bạn thu được layer TUỔI TRẺ ONLINE nằm ngay trên Layer 2:

    [IMG]

    11.6 Bạn nắm kéo layer TUỔI TRẺ ONLINE xuống dưới Layer 2, chú ý kéo chệch sang bên trái để layer này thoát ra ngoài, không bị ảnh hưởng của hiệu ứng mask:

    [IMG]

    Bạn thu được kết quả như hình minh họa:

    [IMG]

    11.8 Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả:

    [IMG]
  20. Offline

    giosongduong SL42

    Số bài viết:
    2.495
    Đã được thích:
    1.018
    Trả lời: Kiến thức đồ họa căn bản với Adobe Photoshop

    Bài 8: Rectangle Tool, tọa độ và kích thước
    TTO - Trong bài này, bạn sẽ tìm hiểu về tọa độ và kích thước cũng như làm quen với công cụ Rectangle Tool.
    Tọa độ và kích thước
    Để định vị chính xác một đối tượng bất kỳ trên Stage, bạn cần thiết lập tọa độ cho đối tượng thông qua giá trị X Y của đối tượng. Để thiết lập kích thước cho đối tượng, bạn điều chỉnh thông số WH của đối tượng đó (W viết tắt chữ width: chiều rộng, H viết tắt chữ height: chiều cao).
    Hệ thống trục tọa độ của Flash được xác định như sau: Trục X trùng với đường thẳng nằm ngang, Trục Y trùng với đường thẳng đứng. Gốc tọa độ X=0, Y=0 trùng với góc trên bên trái. Càng về bên phải gốc tọa độ, X sẽ có giá trị dương và giá trị này lớn dần khi đối tượng di chuyển sang phải. Càng xuống dưới gốc tọa độ, Y sẽ có giá trị dương và giá trị này lớn dần khi đối tượng di chuyển xuống dưới.

    [IMG]

    Nếu đối tượng không phải là symbol, góc trên bên trái của đối tượng sẽ được dùng để định vị đối tượng trên Stage. Tọa độ X, Y của đối tượng so với gốc tọa độ được tính theo điểm này.

    [IMG]

    Nếu đối tượng là symbol, Registration Point sẽ được dùng để định vị đối tượng trên Stage. Tọa độ X, Y của đối tượng so với gốc tọa độ được tính theo điểm Registration Point này. Trong hình minh họa dưới đây, Registration Point chính là điểm có dấu +.

    [IMG]

    Bạn thiết lập Registration Point bằng cách bấm chuột vào một trong 9 ô vuông bên phải dòng chữ Registration tronghộp thoại Convert to Symbol.

    [IMG]

    Để thay đổi giá trị X, Y, W, H bạn bấm chuột vào các ô bên cạnh các chữ X, Y, W, H trên Property Inspector, kế đến bạn gõ giá trị mới vào và bấm phím Enter.

    [IMG]

    Bạn cũng có thể thay đổi các giá trị nói trên bằng cách kéo chuột như sau: Rê chuột vào ô có giá trị bạn muốn thay đổi, khi nhìn thấy chuột biến thành bàn tay có mũi tên hai chiều trên ngón trỏ xuất hiện, kéo chuột sang phải hoặc sang trái và nhìn thấy kết quả cập nhật ngay trên Stage.

    [IMG]

    Nếu muốn giữ nguyên tỉ lệ kích thước W và H, bạn bấm vào sợi dây xích để khóa tỉ lệ cố định. Trong trường hợp mở khóa. Giá trị W và H sẽ thay đổi độc lập.

    [IMG]

    Tìm hiểu về màu
    Bạn thiết lập màu viền hoặc màu ruột cho hình chữ nhật bằng cách chọn màu từ bảng màu.


    [IMG]

    - Bấm chọn vào một mẫu màu trong khu vực chứa màu solid để thiết lập màu đơn sắc (màu thuần).
    - Bấm chọn vào một mẫu màu trong khu vực chứa màu gradient để thiết lập màu tô chuyển.
    Bạn có thể chọn màu bằng cách đưa chuột vào ô có số hex đến khi chuột biến thành bàn tay với mũi tên hai chiều trên ngón trỏ xuất hiện, kéo chuột sang phải hoặc sang trái và nhìn thấy kết quả cập nhật ở ô bên trái số hex. Màu cho web được hiển thị bằng số thập lục phân – số hex, số này được viết bắt đầu bằng dấu #, tiếp theo là sáu số liên tục, 2 số đầu đại diện cho màu đỏ (red), 2 số giữa đại diện cho màu xanh lục (green), 2 số cuối đại diện cho màu xanh lam (blue). Các giá trị này có thể thay đổi từ 00 đến FF, tương đương với từ 0 đến 255 trong hệ thập phân.
    Để điều chỉnh độ trong suốt của màu, bạn thay đổi giá trị Alpha trong ô số bên phải chữ Alpha. Giá trị 0 tương ứng với trong suốt hoàn toàn, có thể nhìn xuyên qua đối tượng để thấy những đối tượng nằm dưới. Giá trị 100 tương ứng với mờ đục hoàn toàn, không nhìn thấy những gì nằm phía dưới. Giá trị Alpha có thể gõ trực tiếp vào hoặc kéo sang phải hoặc sang trái giống như kéo giá trị số hex.
    Nếu không muốn có màu viền hay màu ruột thì bấm vào ô No color (ô Thiết lập không tô màu trong hình minh họa ở trên).
    Nếu muốn chọn màu khác, bạn bấm vào nút màu hình tròn ở góc trên bên phải (ô Mở hộp thoại chọn màu trong hình minh họa ở trên). Hộp thoại Color xuất hiện:


    [IMG]

    Bạn có thể bấm chọn màu ở khu vực Basic colors hoặc chọn màu ở khu vực màu bên phải hoặc kéo thanh trượt hình tam giác bên phải để chọn hoặc gõ giá trị trực tiếp vào các ô số. Sau đó bấm vào nút Add to Custom Colors và bấm OK để chấp nhận màu đã chọn. Màu đó sẽ được áp dụng cho đối tượng của bạn.
    Sử dụng Color Panel
    Bạn có thể sử dụng Color panel để thiết lập màu cho đối tượng:


    [IMG]

    - Bấm chọn ô có cây bút chì để thiết lập màu viền.
    - Bấm chọn ô có thùng nước sơn để thiết lập màu ruột.
    - Bấm chọn ô đen trắng để thiết lập màu đen cho viền và màu trắng cho ruột.
    - Bấm chọn ô không màu để để thiết lập không màu cho viền hoặc ruột.
    - Bấm chọn ô hoán đổi màu để đổi màu viền thành màu ruột và ngược lại.
    Bạn có thể chọn màu bất kỳ từ vùng màu bên trên ô có số hex hoặc kéo thanh trượt hình tam giác bên phải hoặc gõ số trực tiếp vào ô số hex theo quy tắc đã giới thiệu ở phần trên hoặc gõ số vào ô R, G, B và Alpha hoặc kéo thanh trượt bên phải các ô này. Màu mà bạn chọn lựa sẽ được cập nhật ở ô Màu được chọn.
    Bấm vào mũi tên bên phải ô Type để chọn loại màu:


    [IMG]


    - None: thiết lập không màu cho viền hoặc ruột.
    - Solid: chọn màu thuần.
    - Linear Gradient: màu tô chuyển tuyến tính, đối tượng sẽ được tô màu chuyển đều từ các màu gốc theo hướng đường thẳng.
    - Radial Gradient: màu tô chuyển hướng tâm, đối tượng sẽ được tô màu chuyển đều từ các màu gốc theo hướng từ tâm ra.
    - Bitmap: dùng nội dung bitmap làm màu tô. (Xem ví dụ thực hành trong các bài tiếp theo)
    Sử dụng màu Gradient:


    [IMG]

    Bạn có thể chọn màu gradient để tô màu viền hoặc ruột cho đối tượng.
    Để thêm màu gốc cho màu hiện có bạn đưa chuột vào vùng có chứa các nút đại diện cho màu gốc, khi thấy xuất hiện dấu cộng phía dưới chuột thì bấm vào. Muốn xóa bớt màu gốc thì nắm kéo nút đại diện màu gốc ra khỏi khu vực các nút đại diện cho màu gốc. Muốn đổi màu gốc, bạn bấm đúp vào nút đại diện rồi chọn màu từ bảng màu. Bạn có thể bổ sung tối đa 15 màu cho màu gradient. Tuy nhiên, bạn cần lưu ý là màu càng phức tạp sẽ làm tăng kích thước cuối cùng của tác phẩm và có thể làm cho tác phẩm chạy chậm nếu có chọn tween cho đối tượng.
    Chọn ô Linear RGB sẽ giúp màu gradient trông mượt hơn sau khi bạn thực hiện thao tác co dãn đối tượng đã được tô màu gradient.
    Tùy chọn Overflow giúp bạn thiết lập cách hiển thị màu gradient khi vùng cần fill có kích thước lớn hơn vùng ảnh hưởng của màu gradient. (Xem thêm phần Gradient Transform Tool trong các bài tiếp theo).

Chia sẻ trang này