giáo trình đồ họa flash cs4

7.15 Bấm phím phải chuột vào keyframe 1 cho xuất hiện menu ngữ cảnh và chọn Create Classic Tween:Giáo trình Flash cs4 – sưu tầm từ website: www.tuoitre.vn Bạn thu được 2 Classic Tween li

Trang 1

Giáo trình Flash cs4F- XC h a

a c k

.c

7.6 Rê chuột vào tâm xoay (trọng tâm) cho đến khi bên phải chuột xuất hiện vòng tròn nhỏ:

Trang 2

7.7 Kéo chuột để chuyển trọng tâm sang mép phải:

a c k

.c

7.8 Lúc này bạn vẫn đang ở Timeline của movie clip canh buom mc Chọn frame 5 của Layer 1 trêntimeline:

Trang 3

7.9 Bấm phím tắt F6 để bổ sung thêm keyframe:

7.10 Chọn frame 3 của Layer 1 trên timeline:

a c k

.c

7.12 Chọn mép trái cánh bướm trên Stage:

Trang 4

7.13 Kéo sang phải một đoạn để thu hẹp cánh bướm:

a c k

.c

7.14 Bấm phím phải chuột vào keyframe 3 cho xuất hiện menu ngữ cảnh và chọn Create Classic Tween:

Trang 5

7.15 Bấm phím phải chuột vào keyframe 1 cho xuất hiện menu ngữ cảnh và chọn Create Classic Tween:

Giáo trình Flash cs4 – sưu tầm từ website: www.tuoitre.vn

Bạn thu được 2 Classic Tween liên tục

7.16 Bấm chuột vào Scene 1 để trở ra timeline chính:

Trang 6

Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả Bạn thu được bướm baylượn và vỗ cánh.

Bài tập gợi ý:

* Bổ sung hình nền bông hoa khu vực bướm đậu

* Dùng Free Transform Tool để thay đổi độ lớn của bướm khi bướm đã bay xa

TTO - Tìm hiểu về Pen Tool

Bạn chọn Pen Tool từ thanh công cụ bên phải:

Sau khi chọn Pen Tool, bạn đưa chuột vào Stage chuột sẽ đổi thành ngòi bút mực có dấu X bên phải

A Sử dụng Pen Tool để vẽ đường thẳng:

1 Đưa chuột đến vị trí cần vẽ điểm đầu tiên của đường thẳng và bấm chuột để xác lập điểm đầu của đườngthẳng

2 Đưa chuột đến vị trí mới và bấm chuột để tạo đường thẳng từ hai điểm vừa bấm (các điểm vừa vẽ gọi làanchor point) Bạn giữ phím Shift khi vẽ để các đường mới vẽ tạo thành một góc là bội số của 45 độ

3 Tiếp tục bấm vào các vị trí mới để tạo các anchor point

4 Đưa chuột quay lại điểm đầu tiên Dưới chuột xuất hiện một vòng tròn

Trang 7

5 Bấm chuột để kết thúc nét vẽ bạn thu được một đường khép kín.

Bạn có thể kết thúc nét vẽ để thu được một đường không khép kín bằng cách:

+ Bấm đúp vào điểm cuối

+ Giữ phím Ctrl và bấm vào một vị trí nào đó không trùng với đường đang vẽ

+ Chọn một công cụ khác

B Sử dụng Pen Tool để vẽ đường cong:

1 Đưa chuột đến vị trí cần vẽ điểm đầu tiên, bấm chuột và kéo một đoạn để xác lập điểm đầu của đườngcong

Trang 8

2 Đưa chuột đến vị trí thứ hai, bấm chuột và kéo một đoạn khác Flash sẽ tạo một đường cong nối liền haiđiểm đã vẽ.

Các đường thẳng xuất hiện tại điểm bạn vẽ gọi là tiếp tuyến Bạn giữ phím Shift khi vẽ sẽ thu được các tiếptuyến là bội số của 45 độ Thông thường bạn canh chỉnh khi kéo tiếp tuyến khoảng 1/3 khoảng cách đếnđiểm định vẽ tiếp theo

3 Tiếp tục thao tác trên để tạo các anchor point

Để kết thúc nét vẽ, bạn thực hiện giống như cách Sử dụng Pen Tool để vẽ đường thẳng

C Vẽ tiếp một đường đã kết thúc :

Khi đã kết thúc một đường, bạn có thể vẽ tiếp bằng cách đưa chuột vào một trong các anchor point Lúc nàybên phải chuột xuất hiện thêm một dấu / bên cạnh biểu tượng bút mực

Bấm chuột vào anchor point, đường thẳng được chọn:

Trang 9

Vẽ tiếp một nét mới từ anchor point vừa chọn:

D Chuyển sang vẽ đường thẳng khi đang vẽ đường cong và ngược lại:

1 Đưa chuột đến điểm cuối của đường cong đang vẽ, lúc này có hai tiếp tuyến tại điểm cuối Bên cạnhchuột xuất hiện dấu góc nhọn Bấm chuột vào điểm này

Một tiếp tuyến biến mất khỏi điểm vừa chọn:

Trang 10

Bấm chuột vào một điểm mới, bạn thu được một đường thẳng.

Để chuyển sang vẽ một đường cong khác, bạn bấm vào vị trí mới và kéo chuột

Để đổi hướng tiếp tuyến, bạn giữ phím Alt và chọn tiếp tuyến cần đổi hướng Chuột biến thành góc nhọn:

Dùng chuột kéo tiếp tuyến đến vị trí mới:

E Thêm, xóa và chuyển đổi anchor point:

Bạn phân biệt hai loại anchor point:

+ Corner point: xuất hiện khi bạn vẽ đường thẳng

+ Smooth point: xuất hiện khi bạn vẽ đường cong

Khi bạn bấm chọn Pen Tool và giữ chuột, menu phụ xuất hiện và bạn có thể chọn các công cụ khác đi kèmlà:

Trang 11

Add Anchor Point Tool để thêm anchor point.

Delete Anchor Point Tool để xóa anchor point

Convert Anchor Point Tool để chuyển đổi anchor point từ corner point sang smooth point và ngược lại

Add Anchor Point Tool: đưa chuột vào đường cong được chọn, bên phải chuột xuất hiện dấu cộng, bấm vàođường cong để thêm anchor point

Delete Anchor Point Tool: đưa chuột vào đường cong được chọn, bên phải chuột xuất hiện dấu trừ, bấm vàoanchor point để xóa anchor point khỏi đường cong đang chọn

Anchor point đã được xóa:

Trang 12

Convert Anchor Point Tool: chuột biến thành góc nhọn

Đã chuyển thành corner point:

Đưa chuột vào corner point:

Nắm kéo corner point:

Chuyển thành smooth point với các tiếp tuyến, bạn nắm kéo tiếp tuyến để thay đổi độ cong và hướng nét vẽ:

Trang 13

Tìm hiểu về Subselection Tool:

Thông thường, để thực hiện các thao tác Thêm, xóa và chuyển đổi anchor point, bạn sử dụng công cụSubselection Tool ở thanh công cụ:

Sau khi chọn Subselection Tool, chuột chuyển thành mũi tên trắng Khi rê chuột vào đường cong, dướichuột xuất hiện hình vuông nhỏ màu đen

Bạn bấm chọn đường cong, các anchor point rỗng ruột xuất hiện xuất hiện:

Trang 14

Lúc này, bạn có thể chọn các công cụ Add Anchor Point Tool, Delete Anchor Point Tool và Convert AnchorPoint Tool như đã đề cập ở trên.

Bạn cũng có thể sử dụng Subselection Tool để di chuyển một hoặc nhiều anchor point bằng cách bấm chọnvào các anchor point đó, sau đó di chuyển chúng đến vị trí mới (anchor point được chọn là hình vuông đặcruột) hoặc bấm phím delete để xóa anchor point được chọn:

Thiết lập Preferences cho Pen tool

Chọn Edit > Preferences… từ menu:

Trang 15

Hộp thoại Preferences xuất hiện, chọn mục Drawing từ Category:

Khu vực Pen tool có các mục:

Show Pen Preview: chọn mục này để nhìn thấy trước nét vẽ kế tiếp khi di chuyển chuột (sau khi đã chọnmột anchor point)

Show Solid Points: chọn mục này để Flash hiển thị các anchor point là các hình vuông đặc ruột

Show Precise Cursors: chọn mục này để Flash hiển thị Pen Tool là dấu chữ thập thay vì là ngòi bút mực

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 ResetEssentials để 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 20 (Xem bài thực hành 1

về vùng làm việc)

2 Mở một flash document đã tạo trước đó

2.1 Chọn File > Open … từ menu (hoặc phím tắt Ctrl+O):

Trang 16

2.2 Chuyển đến folder FLASH CS4 ONLINE, chọn file 019_buom_bay.fla, tiếp theo bấm vào nút Open để

mở file này Chú ý chọn đúng file có đuôi là fla

Bạn thu được hình bướm trên Stage tương ứng với frame cuối 170:

3 Lưu một flash document

3.1 Chọn File > Save As… từ menu (Hoặc phím tắt Ctrl+Shift+S):

Trang 17

Chọn folder FLASH CS4 ONLINE, sau đó lưu file này lại với tên 020_butterfly.fla

3.2 Bấm phím phải chuột vào Layer 3 trên Timeline cho xuất hiện menu ngữ cảnh và chọn Insert Layer:

Flash bổ sung Layer 4 vào Timeline, sẵn sàng để import hình mới vào:

Trang 18

4 Import hình bướm.

4.1 Chọn File > Import > Import to Stage… từ menu (Hoặc bấm phím tắt Ctrl+R):

Ghi chú: Bạn cũng có thể import hình ảnh trực tiếp vào thư viện để sau này sử dụng thông qua lệnh File >Import > Import to Library…

4.2 Trong hộp thoại Import, trỏ đến file butterfly.ai và bấm nút Open: (file butterfly.ai được đính kèm theobài để sử dụng):

Trang 19

4.3 Hộp thoại Import “butterfly.ai” to Stage xuất hiện, bấm OK để chấp nhận các thông số mặc định (xemthêm phần Tìm hiểu về Import AI file ở cuối bài):

Bạn thu được bức ảnh bướm nằm ở góc trên bên trái màn hình, lúc này ảnh đang được chọn với khung màuxanh bao quanh:

Trang 20

Timeline được bổ sung Layer 1 chứa ảnh bướm vừa được Import vào ở keyframe 1:

Bạn bấm chọn bướm trên Stage:

Property Inspector cập nhật thông tin cho thấy bướm là Movie Clip Symbol trong thư viện và có tên làButerfly:

Trang 21

Bạn chọn Library:

Thư viện lúc này đã được bổ sung một folder tên là butterfly.ai:

Bạn bấm vào nút hình tam giác màu xám bên trái biểu tượng folder để xem nội dung bên trong là movie clip

Trang 22

5 Thay bướm cũ bằng bướm mới

5.1 Bạn xóa Layer 1 khỏi Timeline:

Timeline được cập nhật, bạn vẫn giữ lại Layer 4 cho bước import bông hoa ở cuối bài:

5.2 Bạn bấm phím phải chuột vào movie clip buom cho xuất hiện menu ngữ cảnh và chọn Swap Symbol :

Trang 23

5.3 Hộp thoại Swap Symbol xuất hiện Movie clip buom đang được chọn (thể hiện bằng dấu tròn màu đenbên trái) Bạn chọn movie clip Butterfly và bấm OK.

Trên Stage hình bướm cũ đã được thay bằng hình bướm mới:

Trang 24

5.4 Nhận xét: ở bài 19, bạn đã tạo 2 motion tween cho hai giai đoạn: giai đoạn đầu cho bướm bay vào Stage,giai đoạn cuối cho bướm bay khỏi Stage Bạn vừa dùng lệnh Swap Symbol để thay hình bướm của giai đoạncuối Bạn cần thực hiện tiếp lệnh Swap Symbol để thay hình bướm của giai đoạn đầu.

Bạn chọn keyframe 1 của Layer 3 trên Timeline:

5.5 Bạn bấm phím phải chuột vào movie clip buom cho xuất hiện menu ngữ cảnh và chọn Swap Symbol :

5.6 Hộp thoại Swap Symbol xuất hiện Movie clip buom đang được chọn (thể hiện bằng dấu tròn màu đenbên trái) Bạn chọn movie clip Butterfly và bấm OK:

Trang 25

Trên Stage hình bướm cũ đã được thay bằng hình bướm mới:

TTO - 6 Chuyển tọa độ bướm

Nhận xét: Ở bài 19, sau khi bạn tạo movie clip buom, bạn đã thu nhỏ nó lại để tạo motion tween Do Flashghi nhớ tỉ lệ đã được thu nhỏ của bướm nên khi bạn dùng lệnh Swap Symbol, movie clip Butterfly cũngđược tự động thu nhỏ theo tỉ lệ này

Ngoài ra, Registration của buom cũng khác Registration của Butterfly nên khi bạn dùng lệnh Swap Symbol,bạn thu được bướm mới nằm lệch một bên motion path Bạn sẽ thay đổi Registration của Butterfly để bướmmới nằm giữa motion path

6.1 Lúc này thư viện đang mở Bạn bấm đúp vào biểu tượng movie clip Butterfly:

6.2 Flash chuyển vào Timeline của movie clip Butterfly Bạn thấy dấu + thể hiện Registration của bướmđang ở góc trên bên trái của bướm:

Trang 26

6.3 Bạn chọn Edit > Cut từ menu (Hoặc phím tắt Ctrl+X):

6.4 Chọn Edit > Paste in Center từ menu (Hoặc phím tắt Ctrl+V):

Flash dán bướm ra vị trí mới với dấu + thể hiện Registration chuyển vào giữa tâm bướm:

Trang 27

Bướm đã được chuyển sang nằm giữa motion path Bạn có thể chuyển ra Timeline chính để xem kết quảnày Tuy nhiên bạn tiếp tục ở lại Timeline của movie clip Butterfly để thực hiện các bước tiếp theo.

7 Tách bướm thành từng phần thân và cánh

7.1 Lúc này bướm đang là group (có viền xanh xung quanh), bạn có thể kiểm chứng bằng cách bấm vào

Property Inspector để xem) Bạn sẽ dùng lệnh Modify > Break Apart từ menu (Hoặc phím tắt Ctrl+B) đểtách bướm khỏi group:

Trang 28

Sau 3 lần dùng lệnh Modify > Break Apart bạn thu được các phần nhỏ của bướm (cánh, thân, râu):

7.2 Bạn phóng to nội dung lên 400% để dễ thao tác:

Trang 29

7.3 Bạn kéo chuột quét phủ một phần cánh bướm bên phải để chọn riêng cánh phải của bướm:

Bạn thu được chỉ riêng cánh phải được chọn:

Trang 30

7.4 Bấm phím Delete để xóa cánh phải:

7.5 Bạn quét chọn phần còn lại của bướm:

Bạn thu được thân, râu và cánh trái của bướm được chọn:

Trang 31

7.6 Giữ phím Shift, bấm chọn cánh bướm, thao tác này giúp loại cánh bướm khỏi nhóm đã được chọn:

7.7 Bạn sẽ chuyển râu và thân bướm sang symbol Chọn Modify > Convert to Symbol… từ menu (Hoặcphím tắt F8):

Trang 32

7.8 Ở hộp thoại Convert to Symbol, bạn điền body vào ô Name, chọn Type là Movie Clip, Registration ởgiữa, kế đến bấm vào Library root để chọn Folder chứa symbol này trong Library:

7.9 Ở hộp thoại Move to… Bấm vào nút Existing folder, kế đến chọn folder Illustrator Symbols và bấm nútSelect:

7.10 Mục Folder được cập nhật đường dẫn mới, bấm OK:

Trang 33

7.11 Tiếp theo bạn sẽ chuyển cánh bướm thành symbol Bấm chọn cánh bướm:

7.12 Chọn Modify > Convert to Symbol… từ menu (Hoặc phím tắt F8):

Trang 34

7.13 Ở hộp thoại Convert to Symbol, bạn điền wing vào ô Name, chọn Type là Movie Clip, Registration ởgiữa, chọn Folder giống bước trên và bấm OK:

7.14 Bạn sẽ copy một cánh bướm để chuyển sang phải Chọn Edit > Copy từ menu (Hoặc phím tắt Ctrl+C)::

7.15 Chọn Edit > Paste in Place (Hoặc phím tắt Ctrl+Shift+V):

Trang 35

7.16 Bạn thu được cánh bướm thứ hai nằm trùng cánh thứ nhất Bạn sẽ lật ngang cánh bướm cho đối xứng

và di chuyển sang phải.Chọn Modify > Transform > Flip Horizontal từ menu:

Bạn thu được hai cánh bướm đối xứng nằm chồng lên nhau:

Trang 36

7.17 Bạn dùng phím mũi tên di chuyển cánh bướm sang phải (Giữ phím Shift để di chuyển mỗi lần 10pixel):

8 Bổ sung bướm vỗ cánh

8.1 Bấm đúp vào biểu tượng wing để mở timeline của movie clip này:

Flash đưa bạn vào timeline của movie clip wing Lúc này cánh bướm đang được chọn là group:

Trang 37

8.2 Chọn Modify > Convert to Symbol… từ menu (Hoặc phím tắt F8):

8.3 Ở hộp thoại Convert to Symbol, bạn gỏ wing graphic vào ô Name, chọn Type là Graphic, Registration ởgiữa, mục Folder chọn như bước trên và bấm OK:

Trang 38

8.4 Bạn sẽ tạo 2 classic tween liên tục, trong đó keyframe giữa có nội dung cánh bướm thu hẹp lại, tạo đượchiệu ứng bướm vỗ cánh Muốn cho cánh bướm thu hẹp lại một cách hợp lý, bạn phải chuyển trọng tâm cánhbướm về một bên Chọn Free Transform Tool từ thanh công cụ:

8.5 Rê chuột vào tâm xoay (trọng tâm) cho đến khi bên phải chuột xuất hiện vòng tròn nhỏ:

Trang 39

8.6 Kéo chuột để chuyển trọng tâm sang mép phải:

8.7 Lúc này bạn vẫn đang ở Timeline của movie clip wing Chọn frame 5 của Layer 1 trên timeline:

8.8 Bấm phím tắt F6 để bổ sung thêm keyframe:

8.9 Chọn frame 3 của Layer 1 trên timeline:

Định dạng
Số trang	45
Dung lượng	4,48 MB