12/08/2009 15:08 GMT+7

Tạo ảnh động theo phương pháp Frame-By-Frame

GV TRƯƠNG VĂN NĂNGCông ty TNHH Khải Thiên (KTC Co., Ltd)

TTO - Trong bài này, bạn sẽ thực hành tạo ảnh động (animation) theo phương pháp frame-by-frame, tức là phương pháp tạo ảnh động với mỗi khung hình có một nội dung khác nhau, cụ thể là cho dòng chữ TUỔI TRẺ ONLINE xuất hiện dần theo từng ký tự thông qua các bước sau đây.

1. Tìm hiểu về giao diện của Flash CS4 Professional

Khi khởi động lần đầu tiên, Flash CS4 có giao diện như sau:

Phóng to

Vùng khoanh tròn màu đỏ ở hình trên có chữ ESSENTIALS. Đây là vùng làm việc (workspace) mặc định khi khởi động Flash CS4 lần đầu. Có nhiều vùng làm việc khác nhau để chọn lựa tùy theo thói quen và sở thích của từng người, ví dụ như đối với người đã từng sử dụng Flash có thể chọn vùng làm việc CLASSIC. Khi bấm vào chữ ESSENTIALS đề cập ở trên, Flash sẽ xổ xuống một menu cho bạn chọn lựa vùng làm việc như sau:

Phóng to

Để giúp cho những bạn mới làm quen với Flash không gặp khó khăn trong việc thiết lập vùng làm việc, bạn sẽ thực hành dựa trên vùng làm việc mặc định.

Bạn bấm chọn vào 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 để bắt đầu vào bài thực hành 1. (Việc tùy biến một vùng làm việc theo nhu cầu của từng người dùng sẽ được đề cập chi tiết ở một bài thực hành sau này)

(Xem thêm phần Tìm hiểu các thành phần của vùng làm việc mặc định Essentials ở phần kế tiếp)

2. Tạo mới một flash document

Dùng chuột bấm vào nút Flash File (ActionScript 3.0):

Phóng to

Flash sẽ tạo ra một file mới có tên là Untitled-1:

Phóng to

(Xem thêm phần Flash document và Flash movie ở phần kế tiếp)

3. Lưu một flash document

Tất cả các bài thực hành được lưu vào một folder chính để tiện cho việc quản lý. Bạn sẽ tạo một folder mới có tên FLASH CS4 ONLINE, sau đó lưu file này lại với tên 001_frame_by_frame.fla trong folder vừa tạo ra, sau đó sẽ thực hành tiếp. Cách làm như sau:

3.1. Chọn File Save:

Phóng to

3.2. Ở hộp thoại mới mở ra, bấm nút Create New folder:

Phóng to

3.3. Một folder mới được tạo ra với tên mặc định là New Folder.

Phóng to

3.4. Bạn đổi tên lại thành FLASH CS4 ONLINE.

Phóng to

3.5. Di chuyển vào bên trong folder này và đặt tên file là 001_frame_by_frame.fla, xong bấm vào nút Save để lưu lại.

Phóng to

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

Phóng to

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

Phóng to

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

Phóng to

4.4. Bấm chuột vào Stage và gỏ vào dòng chữ TUỔI TRẺ ONLINE

Phóng to

4.5. 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.

Phóng to

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

Phóng to

Kế đến chọn EditPaste in Center từ menu:

Phóng to

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

Phóng to

5. Sử dụng lệnh Break Apart để tách text thành từng ký tự

Chọn ModifyBreak Apart từ menu:

Phóng to

Dòng chữ TUỔI TRẺ ONLINE được tách rời thành từng ký tự:

Phóng to

(Xem thêm phần Tìm hiểu về Timeline ở phần kế tiếp)

6. Chèn thêm một keyframe vào timeline

Dòng chữ TUỔI TRẺ ONLINE gồm có 15 ký tự bao gồm cả khoảng trắng. Bạn sẽ cho các ký tự này xuất hiện lần lượt trên màn hình. Để thực hiện điều này bạn cần 15 keyframe. Bạn chèn thêm keyframe bằng cách chọn Insert Timeline Keyframe từ menu:

Phóng to

Trên Timeline xuất hiện thêm một keyframe

Phóng to

Bạn tiếp tục chèn thêm keyframe vào Timeline, tuy nhiên lần này bạn dùng phím tắt cho nhanh. Bấm phím F6 và nhìn vào số frame ở ô Current Frame cho đến khi xuất hiện số 15 thì dừng lại.

Phóng to

(còn tiếp)

KIẾN THỨC ADOBE FLASH CS4 CĂN BẢN

Bài 1(Phần 1): Giới thiệu chương trình Flash và các điểm mới của Flash CS4 Professional

Bài 1 (Phần 2):Giới thiệu giao diện chương trình * 1.2.A: Tạo ảnh động theo phương pháp Frame-By-Frame* 1.2.B: Tạo ảnh động theo phương pháp Frame-By-Frame

Bài 1 (Phần 3): Giới thiệu các công cụ vẽ

Bài 2 (Phần 1): Cách tạo animation trong Flash

Bài 3 (Phần 1): Cách tạo symbol trong FlashBài 3 (Phần 2): Cách sử dụng hình ảnh bitmap trong Flash

Bài 4 (Phần 1):Cách tạo mask trong Flash

Bài 5 (Phần 1):Cách xử lý âm thanhBài 5 (Phần 2):Cách xử lý video

Bài 6 (Phần 1): Cách viết Actionscript 3.0 trong Flash Bài 6 (Phần 2): Cách sử dụng các component trong Flash Bài 6 (Phần 3): Cách tạo preloader trong Flash Bài 6 (Phần 4): Cách tạo banner trong Flash Bài 6 (Phần 5): Cách tạo một website hoàn chỉnh bằng Flash Bài 6 (Phần 6): Cách viết game cho flash bằng Actionscript 3.0

http://nhipsongso.tuoitre.com.vn

----------------------------------------------------------------------------------

KIẾN THỨC là chuyên mục mới của chuyên trang Nhịp Sống Số cung cấp những kiến thức chuyên biệt về các lĩnh vực CNTT như đồ họa, lập trình, mạng, mã nguồn mở... theo định kỳ hằng tuần từ căn bản đến nâng cao. Các bài viết hướng dẫn được chọn lọc và xử lý từ các trung tâm đào tạo CNTT uy tín hiện nay.

Rất mong nhận được sự góp ý của bạn đọc để chuyên mục ngày càng phát triển với nội dung phong phú hơn. Thư từ phản hồi có thể gửi về email: nss@tuoitre.com.vn.

Lưu ý các email phản hồi thắc mắc về bài hướng dẫn cần ghi rõ tiêu đề gửi đến chuyên mục KIẾN THỨC - NHỊP SỐNG SỐ và kèm theo liên kết bài hướng dẫn bên trong nội dung email.