CtrlZ
Would you like to react to this message? Create an account in a few clicks or log in to continue.
CtrlZ

CtrlZ
 
RegisterRegister  HomeHome  Latest imagesLatest images  SearchSearch  Log inLog in  


Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-FrameView previous topic View next topic Go down

Copy đường link dưới đây gửi đến nick yahoo bạn bè!

Mon Nov 08, 2010 9:12 am
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame Bgavatar_06
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame Bgavatar_01Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame Bgavatar_02_newsFlash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame Bgavatar_03
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame Bgavatar_04_newavatarFlash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame Bgavatar_06_news
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame Bgavatar_07Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame Bgavatar_08_newsFlash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame Bgavatar_09
[Sáng Tạo] -

Points : 0
Join date : 1970-01-01


Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame Vide

PostSubject: Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame

Nguồn :https://ctrlz.123.st/t39-flash-cs4-bai-2-tao-anh-ong-theo-phuong-phap-frame-by-frame

Tiêu Đề : Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame

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:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
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:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Để 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):
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Flash sẽ tạo ra một file mới có tên là Untitled-1:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
(Xem thêm phần Flash documentFlash 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:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
3.2. Ở hộp thoại mới mở ra, bấm nút Create New folder:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
3.3. Một folder mới được tạo ra với tên mặc định là New Folder.
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
3.4. Bạn đổi tên lại thành FLASH CS4 ONLINE.
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
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.
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
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
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
4.2. Nhấp chuột vào chỗ 12.0pt trên Property Inspector
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
4.3. Đổi số 12 thành 50 rồi nhấn phím ENTER để chấp nhận giá trị mới
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageViewFlash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
4.4. Bấm chuột vào Stage và gỏ vào dòng chữ TUỔI TRẺ ONLINE
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
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.
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
4.6. Để canh giữa đoạn text này trên Stage, trước hết chọn Edit>Cut từ menu:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Kế đến chọn Edit>Paste in Center từ menu:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Bạn thu được dòng chữ được canh giữa Stage như sau:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
5. Sử dụng lệnh Break Apart để tách text thành từng ký tự
Chọn Modify>Break Apart từ menu:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Dòng chữ TUỔI TRẺ ONLINE được tách rời thành từng ký tự:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
(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:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Trên Timeline xuất hiện thêm một keyframe
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
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.
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView


7. Sử dụng Selection Tool để chọn một hoặc nhiều ký tự trên stage
Bấm chọn Selection Tool trên thanh công cụ bên phải:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Bấm chọn keyframe 1 trên Timeline:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Kéo rê chuột từ góc trên bên phải chữ TUỔI TRẺ ONLINE xuống góc dưới bên trái, chừa chữ T lại:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Khi nhả chuột ra bạn thấy các ký tự được chọn, trừ ký tự T đầu câu:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
8. Xóa một đối tượng khỏi Stage.
Bấm phím Delete để xóa các ký tự được chọn, trên Stage chỉ còn một ký tự T:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Bấm chọn keyframe 2 trên Timeline:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Kéo rê chuột từ góc trên bên phải chữ TUỔI TRẺ ONLINE xuống góc dưới bên trái, chừa chữ TU lại:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Khi nhả chuột ra bạn thấy các ký tự được chọn, trừ 2 ký tự TU:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Bấm phím Delete để xóa các ký tự được chọn, trên Stage chỉ còn hai ký tự TU
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Thực hiện thao tác chọn keyframe, chọn các ký tự và xóa tương tự như các bước nêu trên cho các frame còn lại cho đến frame 15, bạn thu được nội dung tại các keyframe như sau:
Tại keyframe số 3:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tại keyframe số 4
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tại keyframe số 5, frame này có chứa khoảng trắng sau ký tự I
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tại keyframe số 6
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tại keyframe số 7:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tại keyframe số 8:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tại keyframe số 9, frame này có chứa khoảng trắng sau ký tự
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tại keyframe số 10:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tại keyframe số 11
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tại keyframe số 12
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tại keyframe số 13
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tại keyframe số 14
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tại keyframe số 15
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
9. Xem thử một animation lúc đang biên soạn
Để xem thử kết quả lúc đang biên soạn, bạn nhấn phím ENTER. Chữ TUỔI TRẺ ONLINE với từng ký tự xuất hiện nhanh qua màn hình.
10. Xuất file thành flash movie
Để xuất file thành flash movie, bạn chọn Control > Test Movie từ menu như sau
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Flash sẽ xuất thành file 001_frame_by_frame.swf như sau
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Tuy nhiên, file flash movie lặp lại liên tục gây cảm giác không thoải mái khi xem. Bạn bổ sung thêm số frame để khi Flash tạo được chữ TUỔI TRẺ ONLINE hoàn chỉnh thì sẽ dừng lại 2 giây.
Đóng file flash movie lại bằng cách bấm vào dấu X .
Tốc độ của bài đang thiết lập là 24 fps, để dừng lại 2 giây bạn bổ sung thêm 48 frame. Số frame hiện có là 15, bạn chọn frame số 63 trên Timeline
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Để chèn thêm frame vào Timeline bạn chọn Insert > Timeline > Frame từ menu (hoặc bấm phím tắt F5):
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Kết quả thu được như sau:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Lần này Flash sẽ dừng lại 2 giây để người xem có thời gian thưởng thức tác phẩm của bạn.
Cách này khá mất thời gian và dễ sai sót nếu chọn nhầm keyframe hoặc xóa nhầm, tuy nhiên nó giúp bạn hiểu rõ cách tạo animation theo phương pháp frame-by-frame và có thể áp dụng để tạo những animation phức tạp sau này. Trong bài thực hành số 2 bạn sẽ dùng Motion Tween để cho ra kết quả tương tự.
***************************************************************************
Phần lý thuyết bổ sung cho bài thực hành
Tìm hiểu các thành phần của vùng làm việc mặc định Essentials
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Trong hình trên có các thành phần chính như sau:
* Phía trên là menu bar giúp bạn thực hiện các thao tác thông qua menu.
* Dưới menu bar là nơi hiển thị các file đang làm việc, trong hình là file Untitled-1.fla

Flash document và Flash movie.
Trước mắt bạn tìm hiểu hai loại file thường sử dụng trong flash:
* Flash document: Là loại file bạn dùng để biên soạn tác phẩm flash, loại file này có đuôi là .fla, tương tự file có đuôi .doc trong winword. Ví dụ file flash document: animation.fla.
* Flash movie: Là loại file được xuất ra từ file flash document đề cập ở trên. File này có đuôi là .swf. Ví dụ file flash movie: animation.swf. Đây chính là file được sử dụng để chèn vào các trang web mà bạn thường thấy trên mạng.
* Tiếp đến là Display bar, Display bar sẽ thay đổi nội dung khi bạn thao tác trên các đối tượng khác nhau, ví dụ như khi đang hiệu đính một đối tượng nào đó thì Display bar sẽ hiển thị tên đối tượng. Ngoài ra Display bar còn hiển thị biểu tượng để chọn Scene, Symbol, Menu xổ xuống để hiển thị độ phóng to thu nhỏ (phần này sẽ được trình bày trong các bài thực hành kế tiếp).
* Kế đến là vùng màu xám, vùng này gọi là Pasteboard. Các đối tượng trong vùng này sẽ không xuất hiện khi bạn xuất tác phẩm thành file flash movie (file có đuôi .swf)
* Vùng màu trắng gọi là Stage. Đây là vùng làm việc chính của Flash. Nội dung nào muốn hiển thị ở tác phẩm khi xuất ra sẽ được đặt trong vùng Stage này.
* Phía dưới vùng Stage là Timeline. Bạn dùng Timeline để xếp đặt các đối tượng trên các lớp (layer) khác nhau ở khu vực bên trái của Timeline. Điều này giúp bạn quản lý dễ dàng các đối tượng khi tác phẩm lớn dần và các đối tượng trong tác phẩm ngày càng nhiều. Phía bên phải của Timeline là khu vực bố trí các khung hình (frame).
* Khung màu đỏ bên phải là Property Inspector. Nội dung của Property Inspector thay đổi tùy thuộc đối tượng nào được chọn.
* Khung màu tím bên phải là Toolbox. Nơi đây chứa các công cụ vẽ, công cụ chọn và các tùy chọn tương ứng với các công cụ được chọn.
***************************************************************************
Tìm hiểu về Timeline
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Như trên hình vẽ bạn thấy Timeline được chia thành hai khu vực: khu vực bên trái chứa các layer và các nút để thực hiện thao tác liên quan đến layer, khu vực bên phải chứa các frame và các nút để thực hiện thao tác liên quan đến frame.
Góc dưới bên trái của khu vực chứa layer có ba nút với các chức năng như sau:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Góc trên bên phải của khu vực chứa layer có 3 nút với các chức năng sau đây:
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Khu vực bên phải chứa các frame và các nút để thực hiện các thao tác liên quan đến frame. Để tạo thuận lợi cho việc chọn và thao tác trên các frame, khu vực này được đánh số các frame với bước đếm là 5 frame như nhìn thấy trên hình vẽ.
Bạn phân biệt 3 loại frame:
- Keyframe: là frame thể hiện có một sự thay đổi trong nội dung so với frame trước đó, ví dụ như toàn bộ các keyframe trên layer Shadows ở trên đều có nội dung khác nhau. Các keyframe được hiển thị bằng dấu chấm tròn đặc ruột màu đen.
- Blank keyframe: là một keyframe nhưng chưa có nội dung gì, được hiển thị bằng chấm tròn rỗng ruột màu trắng. Blank keyframe là frame bạn thấy khi bạn tạo mới một file flash.
- Frame: hiển thị bằng các ô màu xám liên tục, ví dụ như các frame từ 2 đến 14 trên layer Palms ở trên, frame số 15 được hiển thị là một ô chữ nhật màu trắng là dấu hiệu kết thúc của frame. Frame sẽ có nội dung giống với nội dung của keyframe phía trước nó, ví dụ các frame từ 2 đến 14 trên layer Palms sẽ có nội dung giống như nội dung của keyframe số 1 của layer Palms. Trong trường hợp frame đứng sau blank keyframe thì nó được hiển thị bằng ô màu trắng chứ không phải màu xám, như frame số 2 và frame 15 trên layer Sun ở trên.
Trong hình minh họa trên đây, file flash chỉ hoạt động từ frame 1 đến frame 15. Các frame từ số 16 trở đi trong hình trên chỉ để sẵn cho bạn biết là có thể bổ sung tiếp nội dung cho các frame còn lại.
Ô màu đỏ có đường thẳng màu đỏ chạy dọc các layer ở frame 1 trên hình vẽ phía trên là playhead, bạn có thể dùng chuột kéo playhead để xem hoạt động của file flash này.
Ý nghĩa của các nút phía dưới khu vực chứa frame
Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame ImageView
Theo như hình vẽ trên đây: playhead đang ở frame số 7, tốc độ của tác phẩm là 12 frame / giây (fps là viết tắt của frame per second: frame / giây), và thời gian trôi qua là 0,5 giây tính từ lúc playhead di chuyển từ frame 1 đến frame 7.
Các nút còn lại sẽ được giải thích bổ sung trong các bài thực hành tiếp theo sau này.







Flash CS4 - Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame

View previous topic View next topic Back to top
Page 1 of 1
* Viết tiếng Việt có dấu, là tôn trọng người đọc.
* Chia sẻ bài sưu tầm có ghi rõ nguồn, là tôn trọng người viết.
* Thực hiện những điều trên, là tôn trọng chính mình.
-Nếu chèn smilies có vấn đề thì bấm A/a trên phải khung viết bài
Permissions in this forum:You cannot reply to topics in this forum
CtrlZ :: Đồ Họa :: Flash :: Căn Bản-
pingText link: Xem Phim Nhanh


Ctrlz.123.st | KINGDOM OF DREAMS
Copyright S4U - All rights reserved
Copyright 2010
Powered by vBulletin Version 4.0.7 licensed
Xem tốt nhất với độ phân giải 1024x768 và trình duyệt Firefox
Create a forum on Forumotion | ©phpBB | Free forum support | Report an abuse | Forumotion.com