Tài liệu Thiết kế 3D trong Flash ppt

số phương pháp, gợi ý đơn giãn và hiệu quả về chiều thứ ba trục z trong Flash, Các ví dụ dưới đây sẽ trình bày cách sử dụng phối cảnh, tạo bóng và màu chuyển để tạo dang thé hiện 3D... B

Lé Minh Hoang (Chu bién) |

théxe3D - s

5 "FLASH

LE MINH HOANG (Chủ biên)

LỜI NÓI ĐẦU

Nếu muốn tạo các hiệu ứng 3D hấp dân mà không phải mất nhiều thời gian cho việc tìm hiểu cách sử dụng các phần mềm chuyên biệt, bạn hãy

thực hiện điều đó với Flash!

Cuốn sách này sẽ giới thiệu một số kỹ thuật tạo hiệu ứng 3D tiêu biểu

với Flash Thông qua các bước hướng dẫn và hình minh họa kèm theo, bạn sẽ khám phá cách tạo hiệu ứng 3D hiện thực với các kỹ thuật sau:

e Tìm hiểu thế giới 3D với các kỹ thuật vẽ đơn giản

e Kỹ thuật đánh lừa thị giác bằng việc sử dụng khéo léo ánh sáng và

bóng để tạo một giao diện 3D

* Tao cho ngudi dùng có cảm giác như họ đang di chuyển trong không

gian 8D

e - Tạo ra các hình ảnh 3D có thể tải nhanh trên Internet

e Tạo chiểu sâu với cơ chế lát cắt tiên tiến để xây dựng các đối tượng

3D

Sách được chia làm 2 tập Tập 1 từ Chương 1 tới Chương B và Tập 2 từ

Chương 6 tới Chương 10 CD Bài tập của cuốn sách này được phát hành

kèm theo Tập 1

MK.PUB

Hình gối nổi (pillow embo§§) ánh n2 1 ng nà hit

Thanh di chuyén ——— dd Phần bóng đổ được hoạt hình "— )

Ánh sáng, máy quay và Flash o ccccecccsccsscscsesesesesvecestscececesestetstscsseseans 65 Thay đối tỷ lệ 3D cơ bản ác v22 HH SH Hành ke, 66 hung lưới phối cảnh Bế H2 HH HH 2x, 7a Hiệu ứng văn bản thay đổi tỷ lệ 3D với phối cảnh khí quyển 75

Hiệu ứng xoay 3D cơ bản bằng cách sử dụng phương pháp thay đổi

là 0/1 ố ha 80

Hiệu ứng xoay 3D xung quanh đối tượng khác c se 86

Xoay 3D bằng cách sử dụng đường dẫn chuyển động 91 Các biến thể của hiệu ứng xoay 3D -S S1 nh re 96 Chuyển động được thực biện bằng mã kịch bản ò 72-2 97

TOM tab Ằằằằằ s 102

Chương 4: ĐẰNG CỰC 3D "— 103

Ving phi lLuGng Bide eee 111

Bố cục các hình lợp đẳng cụ cực với ñ ActionScript HY T1 TH 125822 1E cty 122 Khung lưới đẳng cực có hình đạng kim cương và sơ đồ hình lợp 134 Các hình lợp đẳng cực được tạo hoạt hình và tạo nền 141

Cảnh có tính tương ÂÁC - cu TL QQ Q2 nH HH ng TH nh ng ga 146

¡5.8 -17112 — ố.ố.ốỐ 157

Chương 5: TIỂU ĐIỂM VÀ ĐỘ SÂU CỦA TRƯỜNG 159

Tiếp cận mặt phẳng của tiêu điểm L5 ce 22222 1 1212252 164

Phối cảnh khí QUYỂN uc L ST HH ng kh thà cxy 165 Quả bóng sống Ộng àSS HT Hành ky kg 171

Thay đổi mặt phẳng của tiêu điểm - 2 CS S S2 S 2n ceen 179

Tr tt cece cccccencccccecceestecgcceeecensscuscescusasecetevevtavassteeseepuuauassenseneias 186

Chương 1:

GIGI THIEU VE FLASH 3D

Cách đây một vài năm, người ta đã bắt dầu đưa các hiệu ứng ba chiều

(3D) vào thiết kế Flash Nhưng tại thời điểm đó, có rất ¡L tài nguyên có hiệu lực trợ giúp thực hiện điều này, vì thể quá trình thiết kể chỉ là áp dụng một số kỹ thuật và thủ thuật để tạo ra 3D giả Hiện nay, tinh huống cũng tương tự như vậy, nhưng số nhà thiết kế đã gia tăng và họ có khả năng sử dụng Flash để tạo ra những đồ họa 3D giả sống động dang ngạc nhiên

Đó là lý do tại sao chúng ta sẽ tìm hiểu về những thủ thuật Flash 3D được

ưa thích nhất Đối với quyển sách này, bạn sẽ nghiên cứu kỹ về Flash và

các nhóm cộng đồng 3D để tìm hiểu xem nó là gì mà nhiễu người lại thích

xây dựng với Flash 3D Từ các gợi ý cơ bản nhất và những thủ thuật có liên

quan đến việc tạa bóng, thay đổi tỷ lệ và phối cảnh thể hiện qua thiết kế

đẳng cực cùng các hiệu ứng parailax serolling cho đến cách sử dụng cơ cấu 3D dược tạo mã kịch bản nâng cao, quyển sách này sẽ đẻ cập đến cách để

tạo hiệu ứng giả theo hướng khả thi nhất

3D là gì?

Về mắt cơ bản, 3D thật ra rất đơn giản, nó có 3 trục hay mặt phẳng

Sơ đồ dưới đây minh họa điều này (xem hình 1-1)

Hinh 1-1: Cae true va mat phdng cua 3D

Thông thường, trục x là chiều ngang, trục y là chiều đứng và trục z là độ sâu Nếu muốn di chuyển phần tử lên hoặc xuống, hay thay đổi tỷ lệ của đối tượng để nó cao hơn, chúng ta sử dụng trục y Còn nếu muốn di chuyển phần tử sang trái hoặc phải, hay làm cho nó rộng hơn, bạn cần trục x để thực hiện điều này Việc di chuyển một phần tử ra trước hoặc

lùi về sau, hay làm cho nó có độ sâu hơn thường có bên quan đến trục Z,

Trên đây là phần giải thích tổng quát về 3D Bây giờ, chúng ta sẽ cùng tìm hiểu về Flash 3D

3D với Flash

Dù Flash vốn không hướng đến việc tao ra các sản phẩm 3D, nhưng thật

ra có rất nhiều phương pháp (eơ bản và nâng cao) mà chúng ta có thể

thao tác dé họa để tạo ảo giác 3D Bạn cần nhớ một điều quan trọng là

việc sử dụng Flash để tạo ra các dé họa 3D giả đơn thuần chỉ là sử dụng những thủ thuật và mẹo khác nhau Hiển nhiên, Flash không phải là phần mềm đồ họa 3D giếng như 3D Studio Max, Maya, Swift 3D Tuy nhiên, chúng ta có thể sử dụng những kỹ thuật chuẩn nhất định cùng với

chút ít mã lệnh ActionScript, đò vết ảnh bitmap, đưa vào các hình ảnh từ

các chương trình bên ngoài để tạo ra thiết kế 3D thu vi

Bắt đầu với các phần cơ bản, trong chương này chúng ta sẽ nghiên cứu một số phương pháp, gợi ý đơn giãn và hiệu quả về chiều thứ ba (trục z)

trong Flash, Các ví dụ dưới đây sẽ trình bày cách sử dụng phối cảnh, tạo

bóng và màu chuyển để tạo dang thé hiện 3D

Việc vẽ các hình 3D này rất đơn giản, nhưng chúng ta nên nhớ một thủ

thuật trước khi bắt đầu làm việc với những vi dụ này là cẩn chon tùy

chon Snap To Objects (gắn dính vào các đối tượng) - (cần phải chắc chắn

da chon View > Snap To Objects)

Hinh lap phuong

1 Chon céng cu Rectangle (R - công cụ tạo hình chữ nhật) với nét vẽ

mau đen và màu tô bất kỳ, Tiếp theo, chúng ta nhấn giữ phím ShifL

và vẽ một hình vuông có kích thước khoảng 100x100 pixel (gọi là

hình vuâng A) Không cần lo lắng nếu kích thước của nó không hoàn

toàn chính xác như đã xác định Chúng ta có thể đễ dàng điểu chỉnh những kich thước này thông qua hộp kiểm soát Droperties sau khi vẽ hinh vuông (xem hình 1-3)

Hình 1-8: Về một hình ouông (hình a) uà điễu chính kích thước của nó

uứi hộp kiểm soát Properties (hinh b)

2 Chọn hình vuông A và nét về bằng cách nhấp đúp vào vùng tô Sao

chép nó (Ctrl+C trên PC, Cmd+C trên Mac), bỏ chọn và sau đó đán vào ngay chỗ của hình A (CtrlxShift+V trên PO, Cmd+Shift+V trên Mac) Chúng ta sẽ gọi hình sao chép là hình vuông B

3 Với hình vuông B dang được chọn, nhấn giữ phím Shift, sau đó nhấn

phím mũi tên xuống hai lần và nhấn phím mùi tên trái hai lần Nếu đang ở trong chế độ hiển thị 100%, thao tác sẽ đi chuyển hình vuông

B xuống 90 pixel và sang bên trái 20 pixel

4 Bây giờ, bằng cách sử dụng công cụ Líne (N - công cụ tạo đường nét), nối góc trên bên trái của hình vuông B với góc trên bên trái của hình vuông A (thao tác này sẽ dé thực hiện hơn nếu đã chọn Snap To Objects) Thực hiện tương tự với góc trên bên phải của cả hai hình (xem hình 1-4)

Hình 1-4: Nói các gác của hat hình chữ nhật

5 Tiếp theo, loại bỏ các đường kể phụ không hiển thị (xem hình 1-5)

Hình 1-5: Loại bỏ các nét không được hiển thị,

6 Tô các vùng trống với cùng mâu đã sử dụng trong vùng tô của hình

vuông Dể thực hiện điểu này, bạn có thể sử dụng công cụ Eyedropper

(Ï - công cụ chọn mâu) để lấy mẫu thỉch hợp và sau đó sử dụng công

cụ Paint Bueket ( - công cụ hộp sơn) để lấp đấy vùng tô Bây giờ, chủng ta đã hoàn tất hình lập phương (xem hình 1-6)

Hinh 1-6: 79 màu cho cúc uùng trống

7 Đến đây, chúng ta sẽ tô các mặt phải và mặt trên của hinh lap

phương với màu bóng khác để tạo ra hiệu ứng ánh sáng tốt hơn Chọn mặt phải của hình lập phương và sử dụng bảng điều khiển

Color Mixer (bảng trộn màu) - (Window > Color Mixer hoặc nhấn tổ hợp phím Shift+F9), thiết lập Alpha của vùng tô này là 60% (xem hình 1-7)

Hình 1-7: Tô màu cho các mặt bên hình lập phuong

8 Tiếp theo, chọn mặt trên của hình lập phương và thiết lập Alpba là

40% Bây giờ, mọi việc đã tạm ổn, nhưng do cách Alpha hoạt động (AIpha nói đến tính mờ dục của đối tượng) nên nếu đặt phan tử nào

đó phia sau nó ở lớp dưới (chẳng hạn như phần bóng đổ sẽ được đặt

vào sau này), chúng ta sẽ nhìn xuyên qua nó và làm cho hiệu ứng này

võ dụng

Vi thé, để đạt được các giả trị màu thật sự của vùng tô có giá tri Alpha, hay nhấp vao tiy chon Fill Color (mau ving tô) trên thanh công cụ Khi

di chuyén chudt trén bat ky vung td nao trong môi trường sáng tác

Flash, nó sẽ cho bạn biết các giá trị màu chỉnh xác (theo dạng thập lục

phân) bằng cách sử dụng công cụ Eyedropper (xem hinh 1-8) Sau đó, tô lại các mặt bén với màu đã được xác định bằng công cụ Paiut Bưcket

9, Cuối cùng, xóa bỏ tất cả đường nét và chúng ta sẽ có một hình lập

phương hoàn chỉnh (xem hình 1-9).

1 Chọn công cụ Oval (O - công cụ tạo hình bầu dục) và vẽ một hình bầu

dục như được thể hiện trong hình 1-10 Chúng ta gọi hình này là hình bầu dục A

Hình 1-10: Vẽ hình bảu dục

9 Sử dụng công cụ Paint Bucket (R) để tô màu mong muốn cho hình bau

dục A Chọn nó (nhấp đúp vào vùng tô hoặc nhấn Ctrl+A trên PC hay Cmd+A trên Mac để chọn toàn bộ đối tượng) Sau đó, sao chép (Ctrl+Ơ

trên PC, Cmd+C trên Mac) và dán nó vào ngay vị trí của hinh A

(Ctrl+Shift+V trên PC, Cmd+Shift+V trên Mac) Gọi hình trụ được sao chép là hinh B Tiếp đến, nhấn giữ phím Shift và nhấn phim mii tên

xuống khoảng 10 lần (trong chế độ hiển thị 100%), chúng ta sẽ di chuyển hình bầu dục B xuống 100 pixel (xem hình 1-11)

Hình 1-12; Vẽ hai đường kẻ nốt hai cạnh của các hình bầu dục

4 Bây giờ, tô phần giữa với cùng màu với các vùng tô trên hinh bầu dục

A va B Thay đổi vùng tô của hinh bau dục A để giống với phản trên

của hình lập phương ở phẩn trước Cũng như phần trước, chúng ta có thể sử dụng công cụ Eyedropper (I) nhằm lấy mẫu màu này và sử dụng công cụ Paint Bucket (K) để tô (xem hình 1-13)

Hinh 1-13: Thay doi màu của mật trên

5 Tiếp đến, xóa bỏ nét vẽ phía trên của hình bầu dục B để tạo ra hình trụ

đặc với các đường biên (đường nét đang được chọn trong hình 1-14)

Hình 1-14: Xóa bỏ nét cẽ phía trên của hình bau duc B,

6 Loại bỏ tất cả nét vẽ để tạo ra hình trụ hoàn hảo (xem hình 1-15)

đường kẻ dọc có chiều đài tùy ý và thiết lập chiểu cao của nó (H) là 100 pixel bằng hộp kiểm soát Properties Sau đó, xoay nó theo một góc 30” bằng cách sử dụng bảng điều khiển Transform (Window > Transform

hoặc Ctrl+T trên PC hay Cmd+T trên Mac), xem hình 1-16

Hình 1-16: Vẽ một đường kẻ nghiêng 300

2 Chon đường kẻ Sau đó, sao chép (Ctrl+C trên PC, Cmd+C trên Mac)

và dán nó vào tại vị trí của hinh gốc (Ctri+Shift+V trên PC,

Cmd+Shift+V trên Mac) như thường lệ

3 Trong khi giữ phím Shift, nhấn phím mũi tên phải một vài lần để tách nó ra khỏi đường kẻ trước Sau đó, chọn Modify > Transform > Flip Horizontal (lật ngang) Với đường kẻ này vần được chọn, chúng

ta giữ lấy điểm trên của đường kẻ và gắn nó vào điểm trên cùng của

đường kẻ còn lại (xem hình 1-17)

À

Hình 1-17: Tạo cạnh bên phải đối xúng với cạnh bên trải

4 Chọn lại công cụ Line và vẽ một đường kẻ từ điểm dưới của đường kẻ đâu tiên đến điểm dưới của đường kẻ thứ hai để hoàn tất hình tam

giác (xem hình 1-18)

Hình 1-18: Tạo ra cạnh dưới để hoàn tất hình tam giác

5 Kế tiếp, sử dụng công cụ Line để vẽ một đường kẻ từ đỉnh của hình tam giác, cách khoảng 25 pixel tính từ đỉnh và kéo về bên phái 25

pixel tính từ đỉnh đưới bên phải của hình tam giác (xem hình 1-19),

Hình 1-19: Vẽ đường hẻ từ đỉnh của hình tam giác

6 Sau đó, vẽ đường kẻ khác nối đỉnh dưới của đường kẻ đó với đỉnh dưới bên phải của hình tam giác Có lẽ bạn đã bắt đầu nhận ra lợi ích của việc chọn View > Snap To Objects (xem hinh 1-20)

Hình 1-20: Vẽ đường kẻ khác

7 Tô mặt trước của hình chóp với màu đó dang sử dụng (đó là #cr0086)

và tô cạnh bên phải của hình chóp với màu đô thứ hai đã sử dụng trong ví dụ hình lập phương Cuối cùng, loại bỏ tất cả nét vẽ và

chúng ta có một, hình chóp (xem hình 1-21).

3D nào Lưu ý, do đối tượng có bóng, nên nó phải có một tía sáng do

chiếu vào để hình thành bóng Ví dụ, hãy xem xét các đổi tượng 3D đơn

giản đã tạo ra trong những phần trước (hình lập phương trông sẽ không đẹp nếu tất cả cạnh của nó có cùng màu và có bóng bên cạnh) Trong

thực tế, bóng xuất hiện phía sau hình lập phương cho biết có ánh sáng

đang chiếu vào nó từ mật trước Do đó, để thể hiện tư nhiên, chúng ta

muốn mặt trước của hinh lập phương trông sáng hơn một chút so với các

bề mặt khác Mọi việc sẽ rất đơn giản nếu bạn nghĩ như vậy

Ở đây, chúng ta sẽ tìm hiểu hai kiểu bóng là bóng đổ và bóng bên

trong Tham khảo Chương 2 “Ảnh sảng ở bóng" để biết Lhêm chỉ tiết

về bóng cùng với tất cả các phần thủ thuật có liên quan đến việc tô bóng

và tả sáng

Bóng đổ

1 Chọn công cụ Text (T - công cụ tạo văn bản) và nhấp bất kỳ đâu trên

vùng thể hiện để tạo ra văn bản nào đó, Đối với ví dụ này, chúng ta

sẽ sử dụng văn bản Website.com

3 Với văn bản được chọn, hãy tham chiếu đến hộp kiểm soát Properties

và thay đổi phông chữ thành Arial Black có kích thước 36 Thay đổi màu của vùng tô văn bản thành xám nhạt (xem hình 1-22)

Hinh 1-32: Tựa vdn hein vsti cong cu Text,

3 Sao chén văn ban (Ctrl+C trén PC, Cmd+C trén Mac), dán nó vào tại

vị trí của văn bản gốc (Ctrlr8hift+V trên PC, CmdrShift+V trên Mac) Sau đó, di chuyển đối tượng xuống dưới 2 pixel và sang trái 3

pixel với các phím mũi tên Bảy giờ, thay đổi màu của phông chữ

thành đen và chúng ta đã có một hiệu ứng bóng đổ dum giản (xem

hình 1-23)

Website.com

Hình 1-23: Hiệu ứng bóng đổ dơn giản

4 Lưu ý, nếu làm việc trên mảu nên tối khi sử dụng bóng đồ, bạn nên dùng màu văn bản nhạt hơn cho văn bản phỉa trước và màu vàn ban dam hơn cho văn bản phía sau (nhưng không đậm như màu nền),

Bóng bên trong thật ra chỉ là biến thể của bóng đổ, nhưng thay vì xuất

hiện bên dưới đối tượng, chúng lại xuất hiện bên trong đối tượng đó

1 Chọn công cụ Rectangle (R - công cạ tạo hình clư nhật) với màu của vùng tô được chọn là màu đen (và khöng có màu nét vẻ), rồi vẽ mốt

hình chữ nhật trên vùng thể hiện có chiều rộng khoảng 250 pixel và

chiều cao khoảng 150 pixel

2 Chon hinh chữ nhật, sao chép (Ctrl+C trên PC, Cmd+C trêu Mac) và dán nó tại vị trí của hình gốc (Ctrl+Shift+V trén PC, Cmd+Shift+¥

trên Mac) Sau đó, di chuyển nó lên trên 2 pixel và sang trái cũng + pixel Thay đổi vùng tô trong hình chữ nhật này thành màu đủ sản!

(sử dụng #cc0909), xem hinh 1-25

Hình 1-95: Vẽ uà sao chép hình chữ nhật

3 Tiếp theo, bằng cách sử dụng lại công cụ Rectangle, chúng ta vẻ một

hình vuông có kích thước khoảng 100x100 pixel với màu của vùng tô

là trắng và màu của nét vẽ là đen (xem hình 1-26)

4 Chọn cạnh trên với cạnh trái của hình vuông này rồi di chuyển

chúng xuống dưới 2 pixel và sang phải cũng 2 pixel Tiếp đến, chọn vùng tô còn lại (đây sẽ là một vùng hình chữ L ngược có chiều dày 2 pixel), xem hinh 1-27

Hình 1-37: Chọn ving tô hình chữ L ngược

5 Sao chép phản này và dán nó vào tại vị trí của hình gốc Gam nhóm đổi tượng này (Ctrl+G trên PC, Cmd+G trên Mac) rồi nhấp dup vào

mó và chỉnh sửa thành màu đen (xem hình 1-28)

Hình 1-38: Gom nhám đốt tượng uà chỉnh sửa nó thành màu đen

6 Báy giữ, quay trở lại cửa số chỉnh sửa chính và loại bỏ tất cả nét vẽ ra khỏi hình vuông Nếu thực hiện đúng theo các hướng dẫn này một cách chính xác, lúc này bạn sẽ có hiệu ứng bóng bên trong rất đơn giản trên hình vuông Lây hình vuông này và canh giữa nó trên hình chữ nhật màu đỏ dã tạo ra cho hiệu ứng tô bóng bên trong (xem hình 1-39)

Hình 1-29: Canh giữa hình ouông trên hình chữ nhật màu đỏ

Trong các tập tin mẫu của quyển sách, bạn sẽ tìm thấy tập tin

basic3Dshapes.fla trong thu muc cia chương này Mở tập tin và chúng ta

sẽ thấy một số ví dụ về bóng bên trong phức tạp hơn (xem hình 1-30)

Tất cả chúng đếu được tạo bằng cách sử dụng những kỹ thuật cơ bản tương tự

cách đạt được hiệu ứng này

Cạnh xiên bên ngoài (outer beuel)

Cạnh xiên bên ngoài là dạng đơn giản nhất chỉ gồm hai màu của đường kẻ Đây là kiểu cạnh xiên chúng ta thường thấy trong hầu hết các

thiết kế Web hiện nay

1 Đầu tiên, vẽ một hình vuông với màu nét vẽ là đen (#609099) và màu

của vùng tõ là xám nhạt (#EEFEEE)

2 Chon cdc đường kẻ trái và trên, gán màu của nét về là #cccccc

3 Chọn các đường kẻ bên phải và dưới, gan màu nét vẽ là #666566 Đây

là hiệu ứng cạnh xiên bên ngoài rất đơn giản (giống như hình nổi ra

ngoài), xem hình 1-31 Lưu ý, nếu tăng kích thước của nét vẽ (từ hộp

kiểm soát Properties) lên 2 hoặc 3 điểm ảnh, khi đó hiệu ứng của

cạnh xiên sẽ trở nên nổi bật hơn (xem hình 1-33)

Hình 1-31: Hình vuéng uới hiệu ứng cạnh xiên đơn giản

Hình 1-32: Hiệu ứng cạnh xiên rò hơn khi tăng chiều dày các nét uẽ

Canh xién bén trong (inner bevel)

Để tạo ra cạnh xiên bên trong, chúng ta chỉ cẩn xoay hình vuöng này

180” (nó sẽ trông như bị lòm vào), xem hình 1-33

Hình 1-33: Hình ouông được tạo cạnh xiên bên trong

Hình gối nổi (pillow emboss)

Một hình gối nổi chỉ là dạng xiên bên ngoài có cạnh xiên bên trong để tạo ra một hình nổi có đường biên

1

3

Để tạo ra hiệu ứng này, lặp lại cạnh xiên bên ngoài đã tạo ra trước

đây Sau đó, gom nhóm hình vuông được tạo cạnh xiên (Ctrl+G trên

PC, Cmd+G trên Mac) và sao chép nó (Ctrl+D trên PC, Cmd+]) trên

Mac) Chỉ cần thu nhỏ hình vuông thứ hai này xuống khoảng 75% và

xoay nó 180, bạn có thể sử dụng bảng điều khiến Transform (Ctrl+T

trên PC, Cmd+T trên Mac)

Thay đổi màu vùng tô của hình vuông nhỏ hơn thành màu trắng và

sau đó canh giữa nó trong hình chữ nhật cạnh xiên bên ngoài ban

đầu Một cách để thực hiện điểu này dễ dàng là chọn hình chữ nhật

mới và hình chữ nhật cạnh xiên bên ngoài, rồi sử dụng bảng điều khiển Align (Ctrl+K trên PC, Cmd+K trên Mac), nhấp vào các nút

nhấn Horizontal Center (canh giữa theo chiểu ngang) và nút nhấn Vertical Center (canh giữa theo chiều đứng) - (cẩn chắc chắp nut

nhấn To Stage không được chọn)

Cuối cùng, chúng ta có hình gối nổi đơn giản (xem hình 1-34)

Hình 1-34: Hình uuông được tạo gối nổi

Màu chuyển (gradient)

Các màu chuyển đóng vai trò quan trọng đổi với hiệu ứng 3D trong Flash Chủng tạo hiệu ứng ánh sáng thực cho các đổi tượng mà hảu hết những kỳ thuật khác không thể đạt tới Chúng ta sẽ thấy trong ví dụ dưới đây màu chuyển tạo cảm giác 3D đáng tin cho đối tượng hơn là những cạnh xiên và hình gối nổi đơn giản

Chọn cơng cụ Oval (cơng cụ tạo bình bầu dục) với màu vùng tơ là đả đậm và khơng chọn mau cho nét vẽ Nhấn giữ phim Shift và tạo ra một hình trịn tương ứng với kích thước 150x150 pixel

Kế tiếp, chọn hình trịn Trong bảng điểu khiển Color Mixer (Shift+F9), nhấp menu của vùng tơ xuống và chọn màu chuyển

Radial Thao tác này sẽ thể hiện màu chuyển đen-trắng mặc đinh Chon phan mii tên đen của màu chuyển và thay đổi màu của nĩ thành #ccòà Sau đĩ, chọn phẩn mũi tên màu trắng của màu

chuyển và thay đổi nĩ thành #990009 Kéo mũi tên £#CC0809 xuơng

khoảng 75% trên thanh màu chuyển (hướng về bên phải) để phần lớn màu chuyển sẽ bao gồm màu #cc@099 Hinh trịn sẽ phản ánh lại những thay đổi của màu này (xem hình 1-35)

Hình 1-35: Tĩ hinh trịn uới màu chuyển

Bay giờ, nhấp vào hình trịn lần nữa và gom nhĩm các đối tượng

(Gtrl+G trên PC, Cmd+G trên Mac) Sao chép hình trịn (Ctrl+C trên

PC, Cmd+C trên Mac) rồi dán nĩ tại vị trí của hình gốc

(Ctrl+Shift+V trên PC, Cmd+Shift+V trên Mac) Thu nhỏ đối tượng

xuống khoảng 93%

Nhấp đúp vào đổi tượng vừa được sao chép để chỉnh sửa nhĩm rồi chọn hình trịn Trở lại bảng điểu khiển Color Mixer Chọn mũi tên đầu tiên (#cc0999), thay đổi màu của nĩ thành trắng (#FFFFEFF) và

gán cho nĩ giá trị Alpha là 10% Chọn mũi tên thứ hai (ứng với màu

#990000), thay đổi màu của nó thành trắng và gán cho nó giá trị

Alpha la 50% Bay gid, sit dung công cu Arrow (V - công cụ mũi tên),

nắm giữ tâm của phần dưới trên hình tròn màu trắng không dược

chon va kéo nó vào tâm hình tròn (xem hình 1-38)

Hình 1-86: Thay đổi hình dụng của hình tròn mau trang

5 Quay trẻ lại cửa số chính và hình tròn đã hoàn tất (xem hình 1-37)

Nó trông không thật lắm vì chúng ta còn phải đặt một phần tử nào

đó vào chính giữa Ví dụ, hãy xem tập tin mẫu FLA Trong hình 1-38,

chủng tôi sử dụng kỹ thuật bóng bên trong để tạo ra chữ F của Flash

được cách điệu hóa ở tâm hình tròn 3D

Hình 1-87: Hinh tròn nổi hoàn tất

Hình 1-38: Chữ £ được cúch điệu hóa nằm ở tâm hình tròn có hiệu ứng

màu chuyển,

Làm sao để sử dụng quyển sách này

Quyển sách này cung cấp một cái nhìn toàn diện về những thủ thuật mà chủng ta có thể sử dụng trong Flash để đạt được các hiệu ứng 3l) giả đáng tin trong thiết kế Từng chương sẽ hướng dẫn bạn tìm hiểu qua các thủ thuật 3D trọng tâm bằng cách sử dụng một loạt phần hướng dẫn có

thứ tự, cung cấp những gợi ý và thủ thuật trong suốt quá trình nghiên cứu (xem hình 1-39)

Hình 1-39: Một số hình ảnh được tạu hiệu ứng 3D trong Flash

Các quy ước bố cục

Mục tiêu của quyển sách này là thể hiện càng rõ ràng và dễ sử dụng thì càng tốt Do đó, chúng ta sẽ tìm hiểu một số kiểu bố cục được sử dụng trong suốt quyển sách (có lẽ bạn đã nhận ra một số kiểu trong chương

này):

+ Những hướng dẫn trong bài tập xuất hiện dưới dạng các bước được đảnh số

se Các kiểu khác nhau sẽ in đậm những phần xuất hiện trên màn hình

* Siéu lién két duge thé hién theo dinh dang sau: www.mywebsite.com

e Ma lệnh xuất hiện theo định dạng this style và bất kỳ mã lệnh nào

mới hoặc mã lệnh muốn nhấn mạnh sẽ xuất hiện như this Thông tin

nhập vào sẽ được in đậm Tên của các phần tử được in đậm khi xuất hiện lần đầu và được in nghiêng ở những lắn xuất hiện sau

« Các phím tắt của bàn phím xuất hiện như sau: (trl+8 trên PC hoặc

Cmd+8 trên Mac) cho biết người dùng PC cần nhấn phím Ctrl

(Control) và phim 8 cùng lúc, trong khi người dùng Mac nên nhấn phim Cmd (Command) và phím S

« Céc muc mdi, quan trong sé duge in dam

« Néu trang không đủ rộng để hiển thị dòng mã lệnh dài, chúng ta sẽ

sử dụng biểu tượng tiếp tục mã lệnh (¬) Khi thấy biểu tượng này, nó

có nghĩa là mã lệnh cần được viết trên cùng dòng

« — Các lựa chọn của menu được thể hiện ở dạng: Text > Style > Bold Hình

1-40 thể hiện ảnh chụp màn hình khi thực hiện lệnh menu này,

Hình 1-40: Ảnh chụp màn hình thể hiện lạnh chọn của menu

Chương 2:

ÁNH SÁNG VÀ BÓNG

Điều gì làm cho mọi người thích tạo ra các thiết kế với những phần tử ba chiều? Dường như tất cả ai cũng thích các sản phẩm 3D, có lẽ vì chúng rất bắt mắt? Nói chung, chúng ta bắt gặp những vật thể 3D thật sự mỗi ngày! Một số người cảm thấy việc tạo ra các đối tượng 3D đây hứng thú hoặc đơn giản, trong khi số khác cảm thấy nó là phương pháp thể hiện

những suy nghĩ hay ý tưởng quen thuộc trong cuộc sống hàng ngày

Chúng ta hào hứng với ý tưởng tạo ra điều gì đó chưa thấy trong đời

sống thực tế (chẳng hạn như khủng long hoặc tàu không gian) Việc quan

sát các vật thế 3D sẽ kích thích trí tưởng tượng, thậm chí chỉ trong tích tác ta cho là nó có thật

3D thú vị vì khi quan sát loại đối tượng này (dù nó là loại tàu không gian viễn tưởng, một nút nhấn gel khác thường trên Web site hoặc một phim 3D được tạo hoạt hình), chúng ta sẽ hình dung đến việc có thể sờ tận tay

các vật thể đó hay hòa mình vào môi trường 3D Ví dụ như bạn có thể tưởng tượng nút nhấn gel sẽ như thế nào, nó mịn, mềm hay đặc?

Di nhiên, chúng ta không đề cập về việc tạo ra các tàu không gian trong quyển sách này (mặc dù Chương 5 có nói đến cách tạo ra hình dia bay) Với các thủ thuật về 3D được tập trung trong quyển sách, chúng ta sé dé

cập đến cách tạo ra những hiệu ứng 3D sống động với một chương trình không đặc biệt tập trung vào việc tạo ra hiệu ứng 3D như Flash

Về bản chất, Flash được xem là công cụ hoạt hình véctơ 2D, nhưng nó đã được phát triển qua nhiều năm và hiện tại được sử dụng để tạo ra một sð

Web site và phim Với tính sáng tạo và một chút kiến thức, Flash có thể

được sử dụng để tạo ra các đồ họa giả 3D thật sự sống động

Quan sát ánh sáng

Trước khi nghiên cứu thế giới 3D véctơ, hãy cùng tìm hiểu các khái niệm của đối tượng 3D Về bản chất, 3D được tổng quát với các khái niệm: phối cảnh, khoảng cách, tốc độ, chuyển động, ánh sáng và bóng Không

Đây là một hình tron hay là một quả bóng? Nó cò vẻ không giống như

quả bóng ta đả quen thuộc ruà chỉ là một hình tròn mầu xanh, phẳng và

tẻ nhạt, Nhìn vào “quả bóng” này, chúng ta không có cảm giác về vị trí,

độ sáu, kết cấu hoặc thậm chỉ thực tế nó có phải là quả bóng không

Bây giờ, hãy quan sát cùng hình tròn đó có hoa văn, ánh sáng và bóng (xem hình 2-3)

Hinh 3-2: Hình tròn có hoa van, anh sang 0à bóng

Rồ ràng là đây là quả bóng số 4 của bàn bida Điều làm cho hình tròn

mâu xanh da trời đơn giản này trở thành một quả bida chính là ánh sáng và bóng Dĩ nhiên, phải kể đến số 4 nằm trong một hinh tròn trắng

cũng cho biết nó là quả bóng bida Nhưng quan trọng hơn, ánh sáng và

bong định nghĩa quả bóng Ánh sáng chiếu từ phần trên bên phải của

quả bóng, tô sáng nó Ánh sáng này Lạo ra vùng sáng và bóng cùng lúc

Vùng quả bóng không nhận được nhiều ánh sảng rõ ràng được tô đậm hơn và dạng 3D đạc của quả cấu sinh ra phản bóng đổ Khi nhìn vào

hình tròn, chúng ta có ý thức tự nhiên nó là khởi hình cầu ba chiểu vi

nửa trên cùng của hinh tròn nhạt hơn phần cuối, nhưng diéu quan trọng

hơn là vì vùng giao nhau của phần tối và phần sáng của hình tròn có

dang hơi cong

Bây gid, hay quan sát quả bóng lần nữa, lần này với một số gợi ý (xem

hình 3-3)

Hình 2-3: Quả bóng uới một số gợi ý

Chúng ta có thể thấy phần bóng đổ thật ra có một chúL cong, điều này làm cho ta có ảo giác nó thật sự tròn Đường cong trong phản bóng đổ tạo cảm giác hinh tròn có độ sâu và là một quả bóng thật sự Các đường

kẻ phụ có thể thấy ở đây làm nổi bật đường cong của bóng để bạn có thể

thật sự thấy nó

Đa số các dối tượng chúng ta thấy trong thế giới thực tại đều có phần tô sáng và phản tối Phần tô sáng được tạo ra bởi nguồn ánh sáng (chẳng hạn như việc chiếu sáng của mặt trời hoặc phản chiếu lại ánh sáng của

một đổi tượng) Phần bóng đổ được sinh ra vì có những vị tri ma ánh

sáng không thể chiếu tới Khái niệm này dường như có vẻ cơ bản và hiển

nhiên, nhưng trừ khi có cân nhắc về các yếu tố 3D, nếu không chúng ta

sẽ không nhận xét đúng tẩm quan trọng của ánh sáng và bóng Hãy quan sát một ví dụ khác trước khi bắt đầu Đây là một cảnh được chụp ở

biển (xem hinh 3-4).

ảnh chụp vịnh đá nhỏ với sóng biển xô vào Chúng ta biết đây là biển vì

ánh sáng và bóng của những đợt sóng Hiển nhiên, các hòn đá trong

vịnh này thật sự gồ ghề và lởm chởm Bạn có thể nhận ra điều này vì có nơi ánh sáng chiếu đến và có nơi không Trong thực tế, có nhiều yếu tế trực quan khác (ví dụ như sóng biển màu trắng xô vào vách đá ở một số chỗ và màu của những vách đá) cung cấp gợi ý cho người xem về phối

cảnh cùng chuyển động của hình ảnh Nói đơn giản hơn, chủng ta sẽ

không thể thấy bất kỳ màu nào nếu không có ánh sáng

Các phần tử của ánh sáng và bóng

Để hiểu kỹ hơn về cách sử dụng ánh sáng và bóng nhằm tạo ra các đổ

họa mô phỏng thực tế, hãy quan sát tỉ mi hơn quả bóng số 4 dưới đây (xem hình 2-6)

Sự có mặt của vùng sáng trong trường hợp này cho chúng ta biết quả

bóng có bể mặt sáng và nhẫn Nó cũng cho biết hướng của nguồn ánh sáng và quả bóng này tròn thế nào (vốn cần thiết để tạo ra phần bóng đổ

sau này)

Vùng phản chiếu

Điều này xác nhận thực tế quả bóng có tỏa sáng (bể mặt sáng này phản chiếu các đối tượng trong cảnh) Mặc dù chúng ta chỉ có quả bóng chứ không có bất kỳ đối tượng thật sự nào trong cảnh này, nhưng nó được

ngụ ý quả bóng có lẽ là một phần hình của bức ảnh lớn hơn Có thể quả

bóng nằm trên bàn bida và chúng ta thấy vùng phản chiếu của ô cửa

Hãy quan sát bức ảnh kỹ hơn và bạn sẽ thấy điều đó

Điều này dẫn đến một điểm quan trọng khác: tính ảo của các phần tử

nào đó tạo nên hình ảnh có thể hữu dụng cho bạn Có nhiều yếu tố chúng

ta thấy hàng ngày thể hiện trong đối tượng Ví dụ, việc tô sáng, các màu

khác nhau, màu chuyển, phản chiếu và những phần tử có liên quan đến các đối tượng khác phải được ghi nhận, đồng thời phải được kèm theo với

sự kết hợp nào đó, dù cho ẩn hay hiện khi tạo những biệu ứng 3D giả giếng như thật

Sự phản chiếu trong quả bóng này có thể không hoàn toàn cần thiết, nhưng nó sẽ bổ sung độ chính xác cho quả bóng số 4

dạng thể hiện của một hình cầu hoặc trạng thái tròn

Nơi bắt đầu chuyển màu trên đối tượng rất quan trọng vì nó sẽ tạo ảo giác cho là đối tượng có chiều thứ ba (về mặt toán học được gọi là trục z')

Nó cho biết hướng xuất phát, của nguồn ánh sáng và đích đến của nó Tuy nhiên, với hình ảnh đặc biệt này, chúng ta khó biết được nguồn ánh sáng mạnh hay yếu (ánh sáng có thể rất lớn và xa hoặc rất nhỏ và gần quả bóng) Đây là lúc cần các đối tượng khác trong cảnh trợ giúp để tìm ra

đáp án cho câu trả lời này

Bóng mờ

Bóng mờ cho phép người xem biết nơi nguồn ánh sáng xuất phát và chiếu với góc độ nào Nếu ánh sáng chiếu trực tiếp trên quả bóng, khi đó

về rmnặt tự nhiên, vùng bóng mờ sẽ nằm trực tiếp dưới quả bóng Nếu ánh

sáng chiếu trên quả bóng ở góc 902, khi đó bóng mờ sẽ rất dài và bao phủ bê rnặt bền dưới quả bóng này

Các kỹ thuật tạo bóng 3D

Trước khi bắt đầu sử đụng lý thuyết vừa được để cập, bạn cũng nên phân

biệt cách tạo ra 3D hiện thực và tạo ra 3D giả là hai lĩnh vực khác nhau

Trong Flash (một ứng dung dé hoa vécte 2D), chúng ta chỉ cần quan tâm

đến việc tạo ra các hiệu ứng 3D giả có tính thuyết phục Mặt khác, 3D

hiện thực là phần tử có thể được sử dụng trong hình ảnh chuyển động hoặc phần tử có thể được tao ra trong phan mềm 3D cu thé (ví dụ như 3D Studio) Trong trường hợp như vậy, các nhà thiết kế cần người dùng

tin 3D là thật Ngược lại, trong chương này chúng ta không mô phỏng

bất kỳ hiệu ứng siêu tưởng nào mà chỉ tạo ra các đối tượng và cảnh mà người xem có thể tín là chúng được tạo hiệu ứng 3D (chẳng bạn như quả

bóng bida đơn giản nói trên)

Trong quá trình tìm hiếu các phần hướng dẫn, hãy lưu ý có nhiều cách

khác nhau để tạo ra những hiệu ứng trong Flash Có lẽ bạn sẽ thích tạo

ra những hiệu ứng trực quan này bằng một cách khác, nhưng kinh

nghiệm tích lũy sau mỗi ví dụ là điều bạn cần ghi nhớ hơn Điều đó có

nghĩa là vùng sáng được tô trước vùng phản chiếu hay ngược lại Quan

điểm của chúng ta là giải thích cách tạo lại các đối tượng này theo thứ tự

từ dưới lên Bạn sẽ thấy rõ quan điểm này khi tạo ra chúng một cách khác biệt từ ban đầu và sẽ không có vấn để gì xảy ra cả Đồng thời, vì

màu rất quan trọng trong việc tạo ra 3D giả, nên chúng ta sẽ tập trung vào màu chuyển và màu sắc

Các phần mô tả trên hy vọng sẽ truyền cấm hứng và thúc đẩy bạn dùng những cảm nhận của mình để tạo ra Flash 3D tốt nhất

Hình 2-7: Tạo uà đặt tên cho sáu lớp

Việc đặt tên các lớp giúp tham chiếu đến chúng sau này và dĩ nhiên cũng làm cho việc giải thích những thủ tục trong quyển sách này dễ dàng hơn rất nhiều

3 Hãy bắt đầu với lớp circle Nhấp công cụ Oval (O - công cụ tạo hình

bầu dục) và đảm bảo màu của nét vẽ xung quanh hình tròn đã được

tắt đi, chọn màu xanh da trời của bóng (#3265c9) cho màu tô (xem

hình 2-8)

Hình 2-8: Thiết lập màu cho công cu Oval

Tạo ra một hình tròn bằng cách sử dụng công cụ Oval, giữ phím Shift

để tạo một hình tròn tuyệt đối Với hình tròn đã được chọn, chúng ta

có thể thiết lập đường kính của nó là 150 bằng cách thay đổi các chiéu W (width - chiéu réng) va H (height - chiéu cao) của nó trong

hộp kiểm soát Properties (xem hình 2-9)

Để chính xác, hãy canh giữa hình tròn bên trong vùng thể hiện Chúng

ta có thể sử dụng bảng điều khiển Align (Ctrl+K trên PC, Cmd+K trên Mac) để canh giữa nó

Hình 2-9: Tựo ra hình tròn

5 Bổ sung màu chuyển bằng cách chọn hình tròn được tô màu xanh da

trời và tham chiếu bảng diéu khién Color Mixer (trém mau) - (Window > Color Mixer hoặc Shift+F9), Sau khi chon mau chuyển Radial (dang tỏa tròn), bổ sung hai phan tử đánh dấu màu chuyển

(hình tượng ngôi nhà nhỏ) như trong hình 2-10 Thiết lập màu cho

các điểm đánh dấu lần lượt từ trái sang phải là #3366CC, #3264C?,

#2F5FB8 và #132D46

Hình 2-10: Thiế! lập màu chuyển cho hình tròn

Lưu ý, màu chuyển không phải tự nhiên có mà ta phải trải qua nhiều lần chọn lọc mới có thể tạo ra màu thích hợp Bạn cần thử nghiệm và chỉnh sửa các màu khi tạo ra nó từ đâu

6 Báy giờ, chúng ta can di chuyển màu chuyển vào đúng vị trí trên

hình tròn Chọn công cụ Gradient Transform (F - cöng cụ biến đổi

vùng tô), Với cöng cụ này, bạn có thể xếp đặt phần bóng đổ sao cho

nó có một đường cong Như đã để cập trước đảy, đường cong quan trong vì nó cho biết hình tròn có trục z hoặc chiều thứ ba (xem hình 2-11)

Một phương pháp tham chiếu hay là đặt điểm tâm màu trắng của công cụ

Gradient Transform trén điểm nơi vùng sáng xuất hiện như được thể

hiện dưới đây Chúng ta có thể sử dụng bốn nút kiểm soát để di chuyển,

cảng, co giãn và xoay màu chuyển Nếu chưa quen thuộc với chúng, hãy

dành thời gian để thử những nút kiểm soát hữu dụng này

Hình 3-11: Điều chỉnh hình tròn uới công cụ Gradient Transform

a Bo sung viing sang vao noi can thiét Chon lai céng cu Oval (Q) va vé

một hình bầu dục không có nét vẽ tại bất kỳ đâu trên vùng thể hiện trong lớp highHight của phim Flash Như trước đây, cần đảm bảo

chon Radial cho kiểu màu chuyển (xem hình 2-12)

#3265C9 là mã thập lục phân của màu xanh da trời cho cạnh bên ngoài

Màu còn lại ở tâm chỉ là màu trắng

8 Kế tiếp, chúng ta cần thiết lập kich thước của vùng sáng để có thể

gán màu chuyển một cách chính xác Xác định kích thước cho hình

bầu dục là 32x23 pixel Bằng cách sử dụng bổ trợ xoay, co giãn của công cu Free Transform (Q - công cụ biến đổi tự do) hoặc bảng điều khiển Transforra (Ctrl+T trên PC, Cmd+T trén Mac) va céng cu

Arrow (V - công cụ hình mũi tên), chúng ta thiết lập vùng sáng để

trùng với vị trí và góc của hình tròn như được thể hiện trong hinh 9-13

(cần xoay vùng sáng khoảng 30° để cạnh dài của nó song song với chiều của quả bóng)

9 Tiếp theo, chúng ta sẽ bổ sung phần phản chiếu Về mặt cơ bản, đây

là hinh tròn bóp méo được uốn cong để tạo ra hình dạng như được thể hiện trong hình 2-14 Với công cụ Oval (O), hãy tạo ra một hình

bầu dục trắng trên lớp phản chiếu và bóp méo nó để có hình dạng chinh xác như được thể hiện trong hình 2-14 Để bóp méo hình,

chúng ta chỉ cần sử dụng công cụ Arrow và đặt con trỏ gần cạnh của hình bau duc không được chọn Khi con trỏ biến thành mùi tên với

đường cong, hãy bắt đầu bóp méo hình bầu duc nay (ngoài ra, chúng

Hình 2-14: Tao ving phản chiếu

10, Sau khi đã có được phản chiếu, bày đưa hình dạng được bóp miếp vào đoạn phim bằng cách chọn nó và chọn Insert > Convert To Symbol (chuyển đổi thành đối tượng) hoặc nhấn E8 Bây giờ, với phần phản

chiếu ở dạng đoạn phim, chúng ta có thể dé dàng điều chỉnh kênh Alpha để nó trở thành một phần phản chiếu tỉnh tế cho quả bóng màu xanh đa trời Khi đã chọn đoạn phim xong, hãy kiểm tra hộp kiểm soát

Properties và điểu chỉnh giá trị Alpha là 10% (xem hình 2-15)

Hình 3-15: Điều chỉnh giả trị Alpha của uùng phản chiếu

đưới dạng đường viễn) trong bảng tiến trình (xem hình 3-17)

Hình 2-16: Tạo phân bóng đổ trên lớp shadouu

Hình 2-17: Chọn chế độ thể hiện đường viền

12 Với phần bóng đổ được chọn, hãy tạo ra màu chuyển (xem hình 2-18)

18 Bây giờ, với công cụ Gradient Transform (Q - công cụ biến đổi vùng

†tö), hãy canh giữa màu chuyển trên phần bóng đổ và tạo hình cho nó như hình bầu dục của bóng (xem hình 3-19),

14 Đến đây, ta đã làm cho quả bóng màu xanh da trời chiếu sáng khá

thuyết phục (xem hình 3-20)

Hình 2-18: Tục màu chuyển cho nhân bóng đố

Hình 3-18: Canh giữa va tụo hình bầu dục cho màu chuyển

Hình 2-30: Quả banh đã trông khá thật