Làm quen với Adobe Flash CS4 Professional

+ [You must be registered and logged in to see this link.]

Menu và cấu hình sử dụng Adobe Flash CS4
Bài 1 : Làm quen với Adobe Flash CS4 Professional ( [You must be registered and logged in to see this link.] )
Bài 2 : Tạo ảnh động theo phương pháp Frame-By-Frame
Bài 2 : Tạo ảnh động theo phương pháp Frame-By-Frame (TT)
Bài 3 : Phương pháp Motion Tween
Bài 4 : Tạo ảnh động theo phương pháp Shape Tween
Bài 4 : Tạo ảnh động theo phương pháp Shape Tween (TT)
Bài 5 : Sử dụng Motion Presets để tạo ảnh động

+ [You must be registered and logged in to see this link.]

Bài 5 : sử dụng Motion Presets để tạo ảnh động (TT)
Bài 6 : Điều chỉnh Motion Path
Bài 7 : Tối ưu hóa cách quản lý các Layer
Bài 7 : Tối ưu hóa cách quản lý các Layer (TT)
Bài 8 : Tạo bản preview cho custom presets
Bài 9 : Tạo hiệu ứng lấp lánh cho chữ
Bài 9 : Tạo hiệu ứng lấp lánh cho chữ (TT)
Bài mở rộng : Rectangle Tool, tọa độ và kích thước

+ [You must be registered and logged in to see this link.]

Bài 10 : Tạo trò chơi bóng bàn đơn giản
Bài 10 : Tạo trò chơi bóng bàn đơn giản (TT)
Bài 11 : Tìm hiểu về Oval Tool
Bài 12 : Sử dụng Shape Hint
Bài 12 : Sử dụng Shape Hint (TT)
Bài 12 : Tìm hiểu về PolyStar Tool
Bài 13 : Classic Tween và trò chơi bập bênh đơn giản
Bài 13 : Classic Tween và trò chơi bập bênh đơn giản (TT)

+ [You must be registered and logged in to see this link.]

Bài 13 : Classic Tween và trò chơi bập bênh đơn giản (Phần cuối)
Bài 14 : Tìm hiểu về Ease
Bài 14 : Thay đổi tốc độ hoạt động với tùy chọn Ease
Bài thực hành 15 : Sử dụng Classic motion guide
Bài 16 : Tìm hiểu về Tweening
Bài 17 : Sử dụng Color effect
Bài 17 : Sử dụng Color Effect (TT)
Bài 18 : Tìm hiểu về Color Effect

+ [You must be registered and logged in to see this link.]

Bài 19 : Áp dụng color effect để tạo slideshow (Phần 1)
Bài 19 : Áp dụng color effect để tạo slideshow (phần 2)
Bài 19 : Áp dụng color effect để tạo slideshow (phần 3)
Bài 19 : Áp dụng color effect để tạo slideshow (phần 4)
Bài 19 : Áp dụng color effect để tạo slideshow (phần 5)
Bài 20 : sử dụng Motion presets tạo slideshow (Phần 1)
Còn tiếp .....

Downlload Adobe Flash CS4 Professional

Đang up

Cấu hình máy tối thiểu cho Flash CS4 Professional

1. Nếu bạn sử dụng máy PC với hệ điều hành Windows:

* Bộ vi xử lý có tốc độ 1GHz trở lên

*
Hệ điều hành: Microsoft® Windows® XP với Service Pack 2 (khuyến cáo sử
dụng Service Pack 3) hoặc Windows Vista® Home Premium, Business,
Ultimate, hoặc Enterprise với Service Pack 1

* Bộ nhớ: 1GB trở lên.

* Đĩa cứng còn trống ít nhất là 3.5GB

* Màn hình có độ phân giải 1,024x768 với card màn hình 16-bit (khuyến cáo sử dụng độ phân giải 1,280x800)

* Ổ đĩa DVD-ROM

* Phần mềm QuickTime 7.1.2 dành cho các tính năng đa phương tiện

* Cần có kết nối Internet băng thông rộng cho các dịch vụ trực tuyến *

2. Nếu bạn sử dụng máy Apple Macintosh với hệ điều hành Mac OS:

* Bộ vi xử lý: PowerPC® G5 hoặc các bộ vi xử lý đa lõi của Intel

* Mac OS X v10.4.11–10.5.4

* Bộ nhớ: 1GB trở lên

* Đĩa cứng còn trống ít nhất là 4GB trở lên

* Màn hình có độ phân giải 1,024x768 với card màn hình 16-bit (khuyến cáo sử dụng độ phân giải 1,280x800)

* Ổ đĩa DVD-ROM

* Phần mềm QuickTime 7.1.2 dành cho các tính năng đa phương tiện

* Cần có kết nối Internet băng thông rộng cho các dịch vụ trực tuyến *

Nguồn sưu tầm

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

TTO - Adobe Flash cung cấp một môi trường biên tập toàn diện để tạo các trang web tương tác và làm ảnh động kỹ thuật số.





Flash được sử dụng rộng rãi để tạo ra các ứng dụng
phong phú với các đoạn video, đồ họa và ảnh động. Bạn có thể tạo nội
dung ngay trong Flash hoặc nhập nội dung từ các ứng dụng phần mềm Adobe
khác, thiết kế các đoạn ảnh động đơn giản một cách nhanh chóng và sử
dụng ActionScript 3.0 để phát triển các dự án tương tác phức tạp.


Nếu chưa từng sử dụng Flash, bạn sẽ được hướng dẫn
thực hành từ những bài đơn giản đến phức tạp một cách chi tiết. Nếu đã
biết qua Flash, bạn có thể tìm thấy những bài tập thực hành các tính
năng mới của Flash CS4 được giới thiệu dưới đây.


Những tính năng mới của Flash CS4


* Tạo ảnh động theo đối tượng (Object-based animation)


Giúp bạn kiểm soát toàn diện từng ảnh động nhờ vào
việc tạo ảnh động theo đối tượng, tức áp dụng tweens trực tiếp cho các
đối tượng thay vì cho keyframes. Với cách tạo tween mới này, bạn dễ
dàng thực hiện các thay đổi cho các chuyển động nhờ vào việc điều khiển
các tiếp tuyến của đường cong Bezier.






* Chuyển đổi 3D (3D transformation)


Tạo ảnh động cho các đối tượng 2D thông qua không gian
3D nhờ các công cụ chuyển dịch (translation) và xoay (rotation) 3D,
giúp bạn tạo chuyển động dọc theo các trục x, y, z.






* Inverse kinematics với Bones tool


Tạo hiệu ứng ảnh động giống như dây xích với một
loạt đối tượng liên kết nhau hoặc nhanh chóng làm biến dạng một hình
dạng bằng cách sử dụng công cụ mới Bones.






* Tạo mẫu nhanh với công cụ Deco và Spray Brush


Chuyển các biểu tượng (symbols) thành các công cụ
thiết kế. Có thể áp dụng theo nhiều cách: tạo hiệu ứng kính vạn hoa
(kaleidoscope) với công cụ Deco hoặc phun ngẫu nhiên các biểu tượng
trên một vùng định trước bằng cách sử dụng Spray Brush.






* Motion editor


Trải nghiệm việc kiểm soát chi tiết các thông số của keyframe,
bao gồm xoay (rotation), kích cỡ (size), tỉ lệ (scale), vị trí
(position), các bộ lọc (filters)... bằng cách sử dụng Motion Editor.
Tinh chỉnh thông số easing với các hình ảnh trực quan tương tự như
trong phần mềm After Effects.






* Hỗ trợ Metadata (XMP)


Thêm metadata vào file SWF bằng cách sử dụng XMP panel.






* Motion Presets


Bắt đầu dự án với các ảnh động dựng sẵn (prebuilt
animations) có thể áp dụng cho mọi đối tượng. Lựa chọn từ hàng chục ảnh
động dựng sẵn hoặc tạo và lưu riêng ảnh động của bạn. Chia sẻ với người
khác các ảnh động này để tiết kiệm thời gian thiết kế.






* Biên tập cho Adobe AIR


Cung cấp những trải nghiệm tương tác với máy tính để
bàn nhờ vào khả năng tích hợp mới để xuất bản với Adobe AIR. Tiếp cận
được nhiều đối tượng khán giả hơn thông qua các loại thiết bị: trang
web, điện thoại di động và máy tính để bàn.


* Hỗ trợ H.264


Mã hóa thành bất kỳ định dạng nào mà Adobe Flash
Player có thể nhận ra với phần mềm đi kèm Adobe Media Encoder. Công cụ
biên tập video này của Adobe giờ đây đã hỗ trợ định dạng H.264.


* Hỗ trợ XFL


Có thể mở các file soạn bởi chương trình Adobe
InDesign hoặc After Effects và giữ lại tính toàn vẹn của file. Với định
dạng XFL tương thích với các ứng dụng, dễ dàng nhập nội dung từ các ứng
dụng nói trên vào Adobe Flash để phát triển tiếp.


Tiêu chí thực hiện các bài hướng dẫn thực hành


- Mục đích yêu cầu: giúp người đọc có
thể tự mình thực hiện được các bài tập thông qua các bài hướng dẫn
online. Các bài tập sẽ được sắp xếp từ đơn giản đến phức tạp, giúp
người đọc có thể tạo được các ảnh động, các banner quảng cáo ngắn, có
thể xử lý hình ảnh, âm thanh, video, có thể tạo được cả một website
hoàn chỉnh và sau cùng là có thể viết các trò chơi bằng flash.



- Phương pháp thực hiện:
mỗi bài hướng dẫn online là một bài tập hoàn chỉnh kèm theo bài mẫu có
thể tải về để tham khảo. Người đọc có thể tự mình thực hiện các thao
tác được hướng dẫn online. Sau đó so sánh với bài mẫu để kiểm tra kết
quả do mình thực hiện.


- Cơ cấu bài hướng dẫn: các bài hướng
dẫn được biên soạn sao cho mỗi bài sẽ chứa một số thông tin về lý
thuyết và một hoặc nhiều bài tập thực hành hoàn chỉnh. Phần hướng dẫn
giúp người đọc từng bước nắm rõ giao diện, cách sử dụng các công cụ vẽ,
các Panel của chương trình Flash CS4, cách import và xử lý hình ảnh, âm
thanh, video trong flash... Phần thực hành sẽ bắt đầu từ các animation
đơn giản, có thể phối hợp các animation để tạo thành các banner quảng
cáo như thường thấy trên các website, sau đó tiến đến các bài thực hành
có nội dung phức tạp dần nhưng vẫn đảm bảo người đọc có thể thực hiện
dễ dàng thông qua các hình ảnh minh họa cụ thể.


- Về thuật ngữ chuyên môn: do chương
trình Flash có giao diện và menu, công cụ... hoàn toàn là tiếng Anh nên
nội dung bài viết phần lớn sẽ giữ nguyên các thuật ngữ tiếng Anh của
chương trình, giúp người đọc thao tác chính xác khi đọc đến các đoạn
thực hành. Ví dụ các lệnh trên menu, các công cụ trên thanh công cụ,
các panel...


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

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

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:



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:



Để 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 sẽ tạo ra một file mới có tên là Untitled-1:



(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:



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



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



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



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.



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



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



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



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



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.



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



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



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



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

Chọn Modify>Break Apart từ menu:



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

(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:



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



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.



(còn tiếp)

Adobe Flash CS4 Bài 2 ( Tiếp theo )


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




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:



Bấm chọn keyframe 1 trên Timeline:



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:



Khi nhả chuột ra bạn thấy các ký tự được chọn, trừ ký tự T đầu câu:



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:



Bấm chọn keyframe 2 trên Timeline:



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:



Khi nhả chuột ra bạn thấy các ký tự được chọn, trừ 2 ký tự TU:



Bấm phím Delete để xóa các ký tự được chọn, trên Stage chỉ còn hai ký tự TU



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:

Tại keyframe số 4

Tại keyframe số 5, frame này có chứa khoảng trắng sau ký tự I

Tại keyframe số 6

Tại keyframe số 7:

Tại keyframe số 8:

Tại keyframe số 9, frame này có chứa khoảng trắng sau ký tự Ẻ

Tại keyframe số 10:

Tại keyframe số 11

Tại keyframe số 12

Tại keyframe số 13

Tại keyframe số 14

Tại keyframe số 15

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 sẽ xuất thành file 001_frame_by_frame.swf như sau



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



Để 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):



Kết quả thu được như sau:



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



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



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



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:



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:





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



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.

Adobe Flash CS4 - Bài 3


Flash CS4: Phương pháp Motion Tween



Trong bài này bạn sẽ thực hành tạo ảnh động
(animation) theo phương pháp motion tween kết hợp với mask layer để cho
dòng chữ TUỔI TRẺ ONLINE xuất hiện dần theo từng ký 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ục vùng làm việc mặc định này và bắt đầu vào bài thực hành 2. (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 002_motion_mask.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:



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



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



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



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:



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



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



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



5. Thêm một layer vào Timeline.

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



5.2 Bấm đúp vào Layer 2 và đổi tên thành mask:



6.Chọn Rectangle Tool để vẽ hình chữ nhật.

6.1 Bấm chọn Rectangle Tool từ thanh công cụ:



Chuột sẽ đổi hình dáng từ mũi tên sang chữ thập + .

6.2 Kéo chuột từ góc trên bên trái sang góc dưới bên phải để bao phủ chữ TUỔI TRẺ ONLINE:



Bạn thu được một hình chữ nhật màu xanh bao phủ chữ TUỔI TRẺ ONLINE:



7. Sử dụng Selection Tool để chọn hình chữ nhật và tạo motion tween.

7.1 Bấm chọn Selection Tool trên thanh công cụ bên phải:



7.2 Bấm chọn hình chữ nhật. 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:



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



7.4 Do hình chữ nhật vừa tạo ra không phải là một
symbol nên flash thông báo cần phải chuyển nó sang symbol để tạo tween
(xem thêm phần tìm hiểu về symbol ở cuối bài). Bạn bấm OK để đồng ý:



Sau khi bấm chọn OK, bạn thấy một số thay đổi như sau:

1. Hình chữ nhật không còn những hạt li ti nữa vì đã được chuyển thành symbol.

2. Trên Property Inspector xuất hiện biểu tượng symbol (hình bánh xe) là Movie Clip với dòng chữ Instance of: Symbol 1. (xem thêm phần tìm hiểu về symbol ở cuối bài)

3. Trong khu vực frame của Timeline,
Flash đã tự động bổ sung số frame thành 24 frame (mặc định cho motion
tween hoàn thành trong một giây - theo mặc định Flash CS4 thiết lập tốc
độ 24 fps). Đồng thời Playhead được di
chuyển đến frame số 24. Bên cạnh đó bạn còn thấy các frame từ 1 đến 24
đã được đổi sang màu xanh nhạt đặc trưng của motion tween của Flash CS4.



7.5 Bấm F6 để chèn keyframe
vào vị trí frame 24 (Xem bài thực hành 1- cách chèn keyframe), tại
frame này xuất hiện một hình thoi màu đen. Đây là đặc trưng của motion
tween mới của Flash CS4.



7.6 Đưa chuột đến keyframe 1 của motion tween và bấm
chọn keyframe 1 khi nhìn thấy phía dưới chuột xuất hiện một khung chữ
nhật mờ, playhead sẽ chuyển đến keyframe 1



7.7. Đưa chuột vào mép phải của hình chữ nhật, bấm và
di chuyển hình chữ nhật sang trái, giữ phím Shift để hình chữ nhật di
chuyển theo chiều ngang.



Khi nhả chuột ra, bạn thu được sự thay đổi như hình vẽ.



Trên hình bạn thấy một đường thẳng có các chấm dọc
theo đường thể hiện vị trí của các frame, đây là điểm đặc trưng của
motion tween cho đối tượng của Flash CS4, hoàn toàn khác với motion
tween của các phiên bản Flash trước đây (Flash CS4 gọi motion tween
theo cách cũ là Classic motion tween)

7.8 Motion tween kéo dài 24 frame, trong khi đoạn text
chỉ kéo dài 1 frame, bạn bổ sung frame cho layer chứa đoạn text bằng
cách bấm chuột vào frame số 24 của layer chứa đoạn text.

Để 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):



Kết quả thu được như sau:



7.9. Bấm phím phải chuột vào layer mask để xuất hiện
menu ngữ cảnh và chọn Mask. Biểu tượng của các layer sẽ biến đổi như
phần bên phải của hình dưới đây đồng thời cả hai layer này bị khóa lại.



Lúc này trên Stage dòng chữ TUỔI TRẺ ONLINE bị hình chữ nhật che khuất đã xuất hiện đầy đủ. (Xem thêm phần Tìm hiểu về Mask layer ở cuối bài)

8. Xem thử 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.

9. Xuất file thành flash movie

Để xuất file thành flash movie, bạn chọn Control > Test Movie từ menu:



Flash sẽ xuất thành file 002_motion_mask.swf:



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 số frame để khi Flash tạo
được dòng 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 48 frame. Số frame hiện có là 24, bạn chọn frame số 72
trên Timeline.



Để 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).



Thực hiện tương tự cho layer còn lại, kết quả thu được như sau:



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



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.

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

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

Phần lý thuyết bổ sung cho bài thực hành

Tìm hiểu về symbol Symbol được xem như một dạng dữ liệu đóng gói trong Flash. Dữ liệu này có thể là một nét vẽ, một đường thẳng, một hình chữ nhật, một bức ảnh v.v. Khi một symbol được tạo ra, bản gốc của nó được cất giữ ở thư viện (Library). Bản sao của symbol mà bạn nhìn thấy trên Stage gọi là một Instance của symbol (hay bản copy). Bạn có thể phóng to, thu nhỏ, làm méo, đổi màu, v.v. một bản sao của symbol trên Stage mà không làm ảnh hưởng đến nội dung của bản gốc trong thư viện. Muốn thay đổi nội dung của bản gốc, bạn phải sửa từ bản gốc ở thư viện. Bạn có thể tạo được ba loại symbol: Movie Clip, Graphic và Button. Đặc điểm của các symbol là chúng có Timeline riêng hay còn gọi là Timeline của symbol (Symbol Timeline). Còn timeline của bản thân Flash document gọi là timeline chính (Main Timeline) . Một số cách để tạo symbol: 1. Chọn một đối tượng rồi chuyển nó sang symbol (sẽ có bài thực hành riêng) 2. Tạo mới một symbol với timeline rỗng (chưa có nội dung) rồi bắt đầu bổ sung nội dung (sẽ có bài thực hành riêng) 3. Cho Flash tự động tạo symbol như vừa thực hiện trong bài này. Hiệu quả khi sử dụng symbol: Symbol giúp giảm kích thước tác phẩm đáng kể. Nếu bạn có một flash document có vẽ mười hình chữ nhật bằng công cụ vẽ Rectangle Tool và một flash document với mười hình chữ nhật là bản sao lấy từ một symbol hình chữ nhật gốc từ thư viện thì flash document tạo từ symbol có kích thước file nhỏ hơn nhiều. Do vậy, khi sử dụng một đối tượng nào đó hai lần trở lên, bạn nên chuyển nó sang symbol.

Tìm hiểu về Mask Layer Trong các lễ hội hóa trang, mặt nạ dùng để che những gì phía sau nó. Kết quả là bạn chỉ thấy hình ảnh của mặt nạ. Trong Flash, Mask Layer có hiệu ứng ngược lại. Khi Mask Layer có hiệu lực thì bạn không nhìn thấy nội dung của Mask Layer mà chỉ nhìn thấy những gì bị Mask Layer che khuất trước đó. Như trong bài mẫu trên đây, nội dung của Mask Layer là hình chữ nhật. Khi Mask Layer có hiệu lực, bạn không nhìn thấy hình chữ nhật mà nhìn thấy dòng chữ TUỔI TRẺ ONLINE bị hình chữ nhật che khuất trước đó. Do hình chữ nhật trong Mask Layer di chuyển từ trái sang phải, bản thân nó che phủ dòng chữ TUỔI TRẺ ONLINE theo từng ký tự từ bên trái cho đến khi che hết dòng chữ thì dừng lại. Do đó khi Mask Layer có hiệu lực, bạn thấy dòng chữ TUỔI TRẺ ONLINE xuất hiện dần theo từng ký tự. Làm sao nhận ra Mask Layer? Lúc đang biên soạn Flash document, khi bạn tạo mới một Mask Layer (bằng cách bấm phím phải của chuột vào layer và chọn Mask từ menu ngữ cảnh), Flash lập tức khóa Mask Layer và khóa cả layer ngay dưới nó và lập tức hiệu ứng Mask có hiệu lực. Layer phía dưới được gọi là layer bị mask (Masked). Nếu nhìn vào bên trái các layer, biểu tượng các layer giờ đã thay đổi: Mask Layer có motion tween: Mask Layer không có motion tween: Một điều cần lưu ý là nội dung của Mask Layer có thể có màu sắc bất kỳ, không nhất thiết phải là màu xanh như trong bài thực hành này. Khi muốn thay đổi nội dung của Mask Layer hoặc layer bị mask, bạn chỉ việc mở khóa layer cần thay đổi nội dung và thực hiện các thay đổi cần thiết. Lúc này hiệu ứng mask không còn hiệu lực ở flash document, nhưng khi xuất tác phẩm ra thành flash movie, hiệu ứng mask lại có hiệu lực.

Adobe Flash CS4 - Bài 4


Flash CS4: Tạo ảnh động theo phương pháp Shape Tween



Trong bài này, bạn sẽ thực hành tạo ảnh động (animation) theo phương pháp shape tween kết hợp với import file để tạo đàn chim bay qua bầu trời. 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 3. (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 003_shape_tween.fla (Phải chuột "Save File as" để tải file)

4. Sử dụng Line Tool để vẽ một đường thẳng

4.1. Bấm chọn Line Tool trên thanh công cụ bên phải:



4.2. Lúc này chuột biến thành dấu +. Đưa chuột vào góc
trên bên phải, giữ phím Shift và kéo chuột sang phải một đoạn khoảng
1cm (xem thêm phần Tìm hiểu về Line Tool ở cuối bài).



4.3. Nhả chuột ra, thu được một đường thẳng nằm ngang màu đen như sau:



4.4. Bấm chọn Selection Tool trên thanh công cụ bên phải:



4.5. Bấm chọn đường thẳng vừa vẽ, đường thẳng biến thành đường có chấm li ti:



4.6. Chọn Modify > Convert to Symbol từ menu (Hoặc bấm phím tắt F8) để chuyển đường thẳng sang symbol:



Hộp thoại Convert to Symbol xuất hiện. Tên mặc định cho symbol là Symbol 1:



4.7 Bạn sửa tên là chim, chọn Type mặc định là Movie Clip và bấm OK để đóng hộp thoại lại:



Đường thẳng đã được chuyển sang symbol như hình sau:



4.8 Bấm đúp vào symbol để mở Timeline của symbol ra, Display Bar thay đổi để thể hiện bạn đang ở Timeline của symbol chim:



4.9 Lúc này đường thẳng đang được chọn. Bấm chuột vào vùng màu xám để bỏ chọn:



4.10 Rê chuột vào giữa đường thẳng đến khi phía dưới chuột xuất hiện một đường cong:



4.11 Bấm chuột và đẩy lên cho đường thẳng biến thành đường cong:



Nhả chuột ra, bạn thu được đường cong:



4.12 Rê chuột vào giữa đường cong này đến khi phía dưới chuột xuất hiện một đường cong:



4.13 Giữ phím Alt và kéo chuột xuống phía dưới:



Nhả chuột ra, bạn thu được hình dáng một con chim đang vỗ cánh:



4.14 Bạn sẽ tạo 2 shape tween liên tục để cho chim vỗ cánh. Bấm chọn frame 12 trên timeline và bấm F6 để chèn thêm keyframe:



Bấm chọn frame 24 trên timeline và bấm F6 để chèn thêm keyframe:



4.15 Bấm chọn keyframe 12 trên timeline:



Lúc này trên Stage, chim đang được chọn, bạn bấm chuột ra vùng xám để bỏ chọn.



4.16 Rê chuột vào mép trái của cánh chim cho đến khi phía dưới chuột xuất hiện góc vuông



4.17 Bấm giữ chuột và kéo xuống một đoạn, nhả chuột ra thu được cánh chim hạ xuống:



4.18 Thực hiện tương tự cho cánh chim bên phải:



4.19 Chọn keyframe 12, bấm phím phải chuột và chọn Create Shape Tween từ menu ngữ cảnh:



4.20 Chọn keyframe 1, bấm phím phải chuột và chọn Create Shape Tween từ menu ngữ cảnh:



Kết quả thu được hai shape tween kề nhau với màu xanh lá cây đặc trưng cho shape tween như sau:



4.21 Bấm chuột vào Scene 1 để thoát khỏi Timeline của symbol chim và quay ra Timeline chính:



Lúc này nếu bạn chọn Control > Test Movie từ menu thì Flash xuất ra flash movie với một con chim đang vỗ cánh.

Bạn sẽ sử dụng motion tween để cho chim bay từ góc dưới bên trái sang góc trên bên phải.

(còn tiếp)

Adobe Flash CS4 - Bài 4 ( Tiếp theo )


Flash CS4: Tạo ảnh động theo phương pháp Shape Tween



- 5. Tạo motion tween cho chim bay.

5.1. Bấm chọn và kéo symbol chim xuống góc dưới bên trái:



5.2. Bấm phím phải chuột và chọn Create Motion Tween từ menu ngữ cảnh:



Trong khu vực frame của Timeline, Flash đã tự động bổ sung thêm số frame thành 24 frame (mặc định cho motion tween hoàn thành trong một giây - theo mặc định Flash CS4 thiết lập tốc độ 24 fps).
Đồng thời Playhead được di chuyển đến frame số 24. Bên cạnh đó bạn còn
thấy các frame từ 1 - 24 đã được đổi sang màu xanh nhạt đặc trưng của
motion tween của Flash CS4.



5.3. Bấm chọn và kéo symbol chim lên góc trên bên phải:



Khi nhả chuột ra, Flash tự động tạo thêm một đường
thẳng nối từ góc dưới bên trái lên góc trên bên phải với các dấu chấm ở
giữa, mỗi dấu chấm là một frame của motion tween. Ngoài ra Flash cũng
thêm một key frame vào timeline, hiển thị bằng một hình thoi màu đen.



Với chỉ một giây cho motion tween, bạn không thể nhìn
kịp hiệu ứng chim vỗ cánh. Bạn sẽ cho bổ sung frame cho motion tween
hoạt động 4 giây, tức 96 frame.

5.4. Đưa chuột vào keyframe 24 cho đến khi chuột biến thành mũi tên hai chiều:



5.5. Nắm giữ chuột và kéo sang phải cho đến frame 96 thì nhả chuột ra, hình thoi thể hiện keyframe đã được di chuyển từ frame 24 sang frame 96.



Lúc này nếu bạn chọn Control > Test Movie từ menu thì Flash xuất ra flash movie với một con chim đang vỗ cánh bay từ góc dưới bên trái sang góc trên bên phải.

6. Thêm một con chim vào Stage

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



6.2. Đưa chuột bấm chọn Library panel kế bên Property Inspector.



6.3. Bấm chuột vào biểu tượng symbol của chim và kéo
sang góc dưới bên trái, cao hơn vị trí chim cũ một chút. Nhả chuột ra
bạn thu được một con chim ở vị trí mới:



7. Copy và paste motion tween

7.1. Bấm chuột vào một frame bất kỳ trong vùng motion
tween của layer 1, bấm phím phải chuột và chọn Copy Motion từ menu ngữ
cảnh:



7.2. Bấm chuột vào một frame bất kỳ trong vùng frame của layer 2, bấm phím phải chuột và chọn Paste Motion từ menu ngữ cảnh:



Flash tạo một motion tween cho Layer 2 hoàn toàn giống với motion tween của Layer 1.



Lúc này nếu bạn chọn Control > Test Movie từ menu thì Flash xuất ra flash movie với hai con chim đang vỗ cánh bay từ góc dưới bên trái sang góc trên bên phải.

8. Thêm hình bầu trời vào làm background

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



8.2. Chọn File > Import > Import to Stage… từ menu:



8.3. Trong hộp thoại Import, trỏ đến file cloud.jpg và bấm nút Open: (file cloud.jpg được đính kèm theo bài, bạn có thể chọn một file khác có kích cỡ 550x400 pixel để sử dụng)



8.4. File cloud.jpg được import
vào layer 3 và che mất các layer chứa chim. Dùng chuột kéo chuyển layer
3 xuống phía dưới, khi kéo bạn thấy một đường thẳng có hình tròn nhỏ
bên trái xuất hiện kèm theo. Khi thấy đường thẳng này đã đến dưới cùng
thì nhả chuột ra:



9. Xem thử 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.
Tuy nhiên bạn chỉ thấy chim di chuyển chớ không thấy chim vỗ cánh. Để
thấy chim vừa di chuyển vừa vỗ cánh bạn phải xuất thành flash movie.

10. Xuất file thành flash movie

Để xuất file thành flash movie, bạn chọn Control > Test Movie từ menu:

Flash sẽ xuất thành file 003_shape_tween.swf:



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

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

Phần lý thuyết bổ sung cho bài thực hành

Tìm hiểu về Line Tool

Line Tool là công cụ để vẽ đường thẳng. Sau khi chọn Line 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 đường thẳng.

Nếu giữ phím Shift trong khi vẽ bạn sẽ thu được một đường thẳng tạo với đường nằm ngang một góc là bội số của 45^o.

Property Inspector sẽ tự động cập nhật để cung cấp các thông tin liên quan đến Line Tool như sau
	Ngay dưới Property Inspector là biểu tượng một đường thẳng kèm dòng chữ cho biết bạn đang chọn Line Tool
	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). Do Line Tool chỉ vẽ đường viền nên bạn không thể đổi màu Fill trong trường hợp này. 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ì:
	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.
	Phần tiếp theo là chọn kiểu dáng cho nét vẽ. 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 nét vẽ sau đây: 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 nét vẽ trong hộp thoại sau đây: Bạn có thể thử nghiệm để tìm cho mình một kiểu dáng nét vẽ ư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.
	Phần Scale giúp hiển thị nét vẽ 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: 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.
	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:
	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:

Adobe Flash CS4 - Bài 5


Flash CS4: Sử dụng Motion Presets để tạo ảnh động



Trong bài này, bạn sẽ thực hành tạo ảnh động (animation)
bằng cách sử dụng Motion Presets để cho từng ký tự của dòng chữ TUỔI
TRẺ ONLINE bay từ ngoài vào màn hình. 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 5. (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 005_motion_presets.fla (phải chuột và chọn "Save target as" để lưu file về máy).

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:



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



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



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



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:



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



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



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



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

Chọn Modify>Break Apart từ menu:



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



6. Sử dụng Motion Presets để tạo ảnh động.

6.1 Chọn Window> Motion Presets từ menu (xem thêm phần Tìm hiểu về Motion Presets ở cuối bài):



6.2 Motion Presets Panel xuất hiện. Bạn đưa chuột vào hình tam giác màu xám phía trước biểu tượng folder của Default Presets. Bấm chuột để mở folder này ra.



6.3 Bạn bấm chuột vào fly-in-blur-left để xem thử hiệu ứng này. Bạn sẽ dùng hiệu ứng này để tạo ảnh động cho ký tự đầu tiên (chữ T).



6.4 Bấm chọn Selection Tool trên thanh công cụ bên phải :



6.5 Lúc này các ký tự của dòng chữ TUỔI TRẺ ONLINE vẫn
đang được chọn. Bạn bấm chuột ra vùng xám để bỏ chọn, kế đến chọn ký tự
T đầu tiên:



6.5 Ở Motion Presets Panel, bấm phím phải chuột vào fly-in-blur-left cho xuất hiện menu ngữ cảnh và chọn End at current location:



6.6 Flash áp dụng Motion Preset cho ký tự T,
chuyển ký tự này khuất sang trái và một Motion Path xuất hiện với vị
trí cuối là nơi trước đây của ký tự T. Đồng thời Flash tạo ra Layer 2 ở
Timeline với biểu tượng Motion Tween gồm 15 frame áp dụng cho ký tự T này.



Do Motion Presets Panel che khuất Stage, bạn chuyển Panel này sang phải như sau:

Đưa chuột vào vùng màu xám bên cạnh tiêu đề Motion Presets Panel.



Kéo và thả Panel này vào bên dưới Properties Panel:



6.7 Rê chuột vào thanh trượt ngang phía dưới Stage và kéo sang trái để nhìn thấy toàn bộ Motion Path:



6.8 Đưa chuột vào Motion Path cho đến khi phía dưới chuột xuất hiện đường cong:



6.9 Giữ chuột và đẩy đường cong chếch lên góc trên bên phải:



Khi nhả chuột ra, bạn thu được sự thay đổi như hình sau:



(còn tiếp)

Adobe Flash CS4 - Bài 5 ( Tiếp theo )


Flash CS4: sử dụng Motion Presets để tạo ảnh động



- Lưu kết quả thành Motion Preset.

7.1 Rê chuột vào khu vực Motion tween của Layer 2, bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Save as Motion Preset…:



7.2 Ở hộp thoại Save Preset As, gõ my motion vào ô Preset name và bấm OK:



7.3 Bấm chuột vào hình tam giác màu xám trước folder Default Presets để đóng folder này lại. Bạn sẽ thấy my motion nằm trong Custom Presets folder:



8. Sử dụng Custom Presets để áp dụng cho các ký tự còn lại.

8.1 Bấm chọn keyframe 1 của layer 1:



8.2 Rê chuột kéo thanh trượt phía dưới Stage sang phải để nhìn thấy toàn bộ Stage:



Kết quả thu được như sau:



8.3 Bấm chuột ra vùng xám để bỏ chọn. Bấm chuột chọn lại ký tự U:



8.4 Ở Motion Presets Panel, bấm phím phải chuột vào my motion trong Custom Presets và chọn End at current location:



8.5 Flash tạo motion tween cho ký tự U và bổ sung Layer 3 vào timeline:



8.6 Tiếp tục chọn các ký tự còn lại và thực hiện tương tự. Bạn thu được 13 motion tween cho 13 ký tự:



9. Di chuyển cho các Motion Tween lệch pha nhau.

9.1 Kéo thanh trượt bên phải timeline lên trên để nhìn thấy layer 2:



9.2 Đưa chuột vào vùng motion tween của layer 3, Giữ chuột và kéo toàn bộ motion tween này sang phải cho đến khi thấy keyframe đầu xuất hiện dưới frame số 5 thì nhả chuột ra:



9.3 Đưa chuột vào vùng motion tween của layer 4, giữ
chuột và kéo toàn bộ motion tween này sang phải cho đến khi thấy
keyframe đầu xuất hiện dưới frame số 10 thì nhả chuột ra.



9.4 Thực hiện tương tự cho các motion tween còn lại để các motion tween lệch pha nhau 5 frame. Bạn thu được kết quả như sau:



Motion tween cuối cùng ở layer 1 kết thúc ở frame 74.
Bạn sẽ bổ sung frame vào toàn bộ các layer để sau khi hiệu ứng kết
thúc, kết quả sẽ dừng lại 2 giây để người xem thưởng thức tác phẩm của
bạn.

9.5 Bấm chọn frame 122 của layer 1:



9.6 Kéo thanh trượt bên phải timeline lên trên để có thể nhìn thấy layer 2:



9.7 Giữ phím Shift và bấm chọn vào frame 122 của layer 2, toàn bộ các layer khác cũng được chọn:



9.8: Bấm phím tắt F5 để bổ sung frame vào cho các layer:



10. Xuất file thành flash movie. Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả.



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

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







Tìm hiểu về Motion Presets

Motion Presets Panel
chứa các hiệu ứng ảnh động mà Flash đã dựng sẵn. Bạn có thể áp dụng các
hiệu ứng này cho tác phẩm của mình nếu thấy các hiệu ứng này phù hợp.
Ngoài ra bạn cũng có thể tự lưu các hiệu ứng do mình tạo ra thành các
Custom Presets để áp dụng cho các tác phẩm của mình.

Bạn Chọn Window> Motion Presets từ menu để mở Motion Presets Panel:



Motion Presets panel có 2 folder: Default Presets chứa các hiệu ứng ảnh động mà Flash đã dựng sẵn và Custom Presets chứa các hiệu ứng do bạn lưu lại. Trong hình trên, my motion là Custom Preset mà bạn đã lưu trong bài thực hành.

Để sử dụng một hiệu ứng nào, bạn chọn trước một đối
tượng trên Stage, kế đến chọn hiệu ứng muốn áp dụng và bấm nút Apply
(hoặc bấm phím phải chuột và chọn Apply at current location). Flash sẽ sử dụng keyframe đầu của hiệu ứng để áp cho vị trí đang chọn của đối tượng.

Nếu muốn Flash sử dụng keyframe cuối của hiệu ứng để
áp cho vị trí đang chọn của đối tượng, bạn chọn trước một đối tượng
trên Stage, kế đến chọn hiệu ứng muốn áp dụng, giữ phím Shift và bấm nút Apply (hoặc bấm phím phải chuột và chọn End at current location)



Hình dưới đây cho thấy ký tự T chưa được áp dụng Motion Preset:



Sau khi áp dụng Motion Preset Apply at current location:



Sau khi áp dụng Motion Preset End at current location:



Để lưu một Motion Tween thành Motion Preset, bạn chọn Motion Tween cần lưu, bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Save as Motion Preset…Ở hộp thoại Save Preset As, gỏ tên vào ô Preset name và bấm OK như phần thực hành ở trên.

Export và Import Motion Presets:

Bạn có thể export Motion Preset
của bạn tạo ra để đưa sang máy khác sử dụng. Để export, bạn chọn Motion
Preset cần export, bấm phím phải chuột cho xuất hiện menu ngữ cảnh và
chọn Export…



Trong hộp thoại Save As, Flash đặt sẵn tên trùng với tên của Motion Preset của bạn với đuôi mặc định là xml. Bạn chọn vị trí folder cần lưu rồi bấm Save.



Để import
một Motion Preset đã được lưu trước đó vào Flash, bạn bấm chuột vào góc
trên bên phải của Motion Presets Panel để mở menu và chọn Import…



Trong hộp thoại Open, bạn mở folder chứa file xml của Motion Preset, chọn file cần import và bấm nút Open


Flash sẽ đưa Motion Preset vừa import vào folder Custom Presets cho bạn sử dụng.

Adobe Flash CS4 - Bài 6


Flash CS4: điều chỉnh Motion Path



Trong bài này, bạn sẽ điều chỉnh đường bay của chim ở bài thực hành 3 bằng cách điều chỉnh hoặc thay mới motion path. 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 4 (xem bài thực hành 1 về vùng làm việc).

2. Mở một flash document

Bạn mở lại file 003_shape_tween.fla đã thực hiện ở bài thực hành 3 (phải chuột vào liên kết vào chọn "Save target as" để lưu tập tin).

2.1 Chọn File > Open từ menu:



2.2 Di chuyển đến folder FLASH CS4 ONLINE, chọn file 003_shape_tween.fla và bấm nút Open.



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



3. Lưu một flash document

3.1 Chọn File > Save as từ menu:



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

4. Điều chỉnh motion path

4.1. Rê chuột vào con chim phía dưới cho đến khi phía dưới chuột xuất hiện hình mũi tên bốn chiều.



4.2. Bấm chọn con chim. Lúc này đường thẳng nối từ vị trí đầu đến vị trí cuối của chim xuất hiện. Đường này gọi là motion path của motion tween trong Flash CS4.



4.3. Đưa chuột vào giữa motion path cho đến khi xuất hiện đường cong phía dưới chuột.



4.4. Bấm chuột và kéo xuống để chuyển motion path thành đường cong.



4.5. Bấm chọn con chim còn lại để thấy motion path của nó:



4.6. Đưa chuột vào giữa motion path cho đến khi xuất hiện đường cong phía dưới chuột:



4.7 Bấm chuột và kéo xuống để chuyển motion path thành đường cong:



Lúc này nếu bạn chọn Control > Test Movie
từ menu thì Flash xuất ra flash movie với hai con chim đang vỗ cánh bay
từ góc dưới bên trái sang góc trên bên phải theo hai đường cong vừa
được điều chỉnh.

5. Tạo motion path mới để thay thế motion path cũ

Bạn có thể cho chim bay theo motion path bất kỳ bằng cách tự mình vẽ lấy một đường cong bất kỳ rồi áp vào motion tween.

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



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



5.3 Bấm chọn Pencil Mode phía dưới cuối thanh công cụ:



Một menu phụ xuất hiện. Bạn chọn Smooth từ menu phụ này.



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



5.4 Đưa chuột vào Stage. Lúc này chuột biến thành cây bút chì. Bạn vẽ một đường cong bất kỳ từ góc dưới bên trái lên góc trên bên phải:



Nhả chuột ra bạn thu được đường cong như trên.

5.5 Bấm chọn Selection Tool từ thanh công cụ:



5.6 Bấm đúp chuột vào đường cong vừa vẽ để chọn nó.
Đường cong sẽ phình to ra một chút và có những hạt li ti, thể hiện nó
đã được chọn.



5.7 Chọn Edit > Cut từ menu, đường cong sẽ biến mất khỏi màn hình:



5.8 Bấm chọn Layer 1 từ Timeline, Motion path của con chim đầu tiên hiện lên:



5.9 Chọn Edit > Paste in Place từ menu:



5.10 Motion path cũ được thay thế bằng đường cong bạn vừa vẽ:



Bạn có thể lặp lại các thao tác như mô tả ở trên để tạo motion path mới cho con chim còn lại.

6. Xóa Layer thừa

Layer 4 không còn sử dụng nữa, bạn có thể xóa layer này:

6.1 Chọn Layer 4 từ Timeline:



6.2 Bấm nút Delete để xóa:



7. Xuất file thành flash movie

Để xuất file thành flash movie, bạn chọn Control > Test Movie từ menu:

Flash sẽ xuất thành file 004_motion_path.swf:





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

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

Phần lý thuyết bổ sung cho bài thực hành

Tìm hiểu về Pencil Tool

Pencil Tool là công cụ để vẽ đường cong bất kỳ.

Sau khi chọn Pencil Tool, chuột sẽ chuyển sang hình
cây bút chì. Để vẽ, bạn bấm chuột vào vị trí đầu, kéo chuột theo đường
cong bất kỳ đến vị trí cuối và nhả chuột ra để thu được một đường cong.
Bạn cũng có thể vẽ đường thẳng bằng cách giữ phím Shift trước khi vẽ.

Bạn có thể chọn bổ sung phương án xử lý nét vẽ bằng cách chọn Pencil Mode phía dưới cuối thanh công cụ:



Menu phụ xuất hiện để bạn chọn lựa:



Straighten: Khi chọn phương án này, flash sẽ sửa các nét vẽ cong của bạn thành các đường thẳng.

Smooth: Khi chọn phương án này, flash sẽ làm trơn mượt các nét vẽ cong của bạn.

Ink: Khi chọn phương án này, flash sẽ không sửa các nét vẽ của bạn.

Dưới đây là ví dụ các nét vẽ được flash thể hiện khi chọn Straighten, Smooth và Ink:

Property Inspector sẽ tự động cập nhật để cung cấp các thông tin liên quan đến Pencil Tool như sau:
	Ngay dưới Property Inspector là biểu tượng một cây bút chì kèm dòng chữ cho biết bạn đang chọn Pencil Tool.
	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). Do Pencil Tool chỉ vẽ đường viền nên bạn không thể đổi màu Fill trong trường hợp này. 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ì:
	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.
	Phần tiếp theo là chọn kiểu dáng cho nét vẽ. 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 nét vẽ sau đây: 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 nét vẽ trong hộp thoại sau đây: Bạn có thể thử nghiệm để tìm cho mình một kiểu dáng nét vẽ ư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.
	Phần Scale giúp hiển thị nét vẽ 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: 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.
	Tùy chọn Cap giúp bạn thể hiện kiểu dáng đầu mút của nét vẽ. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây:
	Join giúp bạn thể hiện kiểu dáng chỗ giao nhau của hai nét vẽ. Bạn sẽ thu được các chọn lựa sau đây khi bấm vào hình tam giác đen:
	Smoothing: Mức độ làm trơn mượt giao điểm các nét vẽ của Pencil Tool. Tùy chọn này chỉ xuất hiện khi chọn phương án Smooth được đề cập ở phần đầu giới thiệu về Pencil Tool. Đối với các phương án còn lại, giá trị này bị mờ đi. Giá trị mặc định của Smoothing là 50.

Flash CS4 - Bài 7 : Tối ưu hóa cách quản lý các Layer




TTO - Trong bài “Sử dụng motion presets
để tạo ảnh động”, trên timeline bạn thu được 13 layer với tên gọi mặc
định từ Layer 1 đến Layer 13. Với đoạn ảnh động đơn giản đó, bạn có thể
chấp nhận cách đặt tên mặc định này.
Tuy nhiên, nếu tác phẩm của bạn phức tạp và chứa
nhiều layer hơn, bạn sẽ gặp khó khăn trong việc quản lý và tham khảo
lại các layer với cách đặt tên mặc định như thế.

Trong bài này, bạn cũng sẽ thực hành tạo ảnh động (animation)
bằng cách sử dụng Motion Presets để cho từng ký tự của dòng chữ TUỔI
TRẺ ONLINE bay từ ngoài vào màn hình. Tuy nhiên bạn sẽ quản lý các
layer hiệu quả hơ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 6. (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 006_quanly_layer.fla (phải chuột chọn "Save target as" để lưu về máy)

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:



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



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





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



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:



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



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



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



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

Chọn Modify>Break Apart từ menu:



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



6. Chuyển các ký tự lên các layer.

6.1 Đưa chuột vào vùng có chứa các ký tự, bấm phím phải chuột cho xuất hiện menu ngữ cảnh, chọn Distribute to Layers:



Flash tự động đưa các ký tự lên từng layer với tên gọi tương ứng với các ký tự của dòng chữ TUỔI TRẺ ONLINE



6.2 Layer 1 giờ đây không chứa ký tự nào, bạn bấm chuột chọn Layer 1, bấm vào nút Delete để xóa:



6.3 Đưa chuột vào mép trên của Timeline đến khi chuột biết thành mũi tên hai chiều:



6.4 Bấm giữ chuột và kéo mép trên của Timeline lên phía trên đến khi nhìn thấy toàn bộ các layer thì nhả chuột ra:



6.5 Bấm chuột chọn keyframe 1 của layer T:



6.6 Giữ phím Shift và bấm chuột chọn keyframe 1 của layer E. Lúc này keyfram 1 của tất cả layer được chọn:



7. Sử dụng Motion Presets để tạo ảnh động.

7.1 Chọn Window> Motion Presets từ menu:



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



7.3 Bấm phím phải chuột vào my motion để xuất hiện menu ngữ cảnh, giữ phím Shift và chọn End at current location:



Flash tạo một loạt motion tween cho toàn bộ các layer:



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





(còn tiếp)

Flash CS4 - Bài 7: Tối ưu hóa cách quản lý các Layer (tiếp theo)



TTO - 8. Di chuyển cho các Motion Tween lệch pha nhau.

8.1 Bấm chuột vào motion tween của layer U, Giữ chuột và kéo toàn bộ motion tween này sang phải cho đến khi thấy keyframe đầu xuất hiện dưới frame số 5 thì nhả chuột ra:



8.2 Bấm chuột vào vùng motion tween của layer Ổ, Giữ
chuột và kéo toàn bộ motion tween này sang phải cho đến khi thấy
keyframe đầu xuất hiện dưới frame số 10 thì nhả chuột ra.



8.3 Thực hiện tương tự cho các motion tween còn lại để các motion tween lệch pha nhau 5 frame. Bạn thu được kết quả như sau:



Motion tween cuối cùng ở layer E kết thúc ở frame 74.
Bạn sẽ bổ sung thêm frame vào toàn bộ các layer để sau khi hiệu ứng kết
thúc, kết quả sẽ dừng lại 2 giây để người xem thưởng thức tác phẩm của
bạn.

8.4 Bấm chọn frame 122 của layer E:



8.5 Giữ phím Shift và bấm chọn vào frame 122 của layer T, toàn bộ các layer khác cũng được chọn:



8.6: Bấm phím tắt F5 để bổ sung frame vào cho các layer:



9. Tạo folder chứa các layer.

Với cách thực hiện như trên, bạn dễ dàng kiểm soát
được nội dung của các layer. Bạn có thể quản lý hiệu quả hơn nữa bằng
cách tạo folder chứa các layer này.

9.1 Bấm chọn layer T trên cùng của Timeline:



9.2 Bấm vào nút New Folder trên Timeline để tạo mới một folder:



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



9.3 Bạn bấm đúp vào tên folder và đổi tên thành TUOI TRE ONLINE:



9.4 Dòng chữ này bị che khuất một phần. Bạn đưa chuột
vào vùng phân cách các layer và các frame đến khi xuất hiện mũi tên hai
chiều, bấm giữ chuột và kéo sang phải đến khi nhìn thấy đầy đủ dòng chữ
TUOI TRE ONLINE:



9.5 Bấm chọn layer T trên cùng của Timeline:



9.6 Giữ phím Shift và bấm chọn layer E, lúc này tất cả layer được chọn:



9.7 Đưa chuột kéo layer T, một đường thẳng nằm ngang
có chấm tròn rỗng ruột màu trắng nằm bên trái xuất hiện. Đẩy chuột
chếch sang phải để chấm tròn rỗng ruột chuyển sang phải biểu tượng các
layer và thả vào folder TUOI TRE ONLINE:



Khi nhả chuột ra, các layer đã được chuyển vào bên trong folder, các biểu tượng nằm dịch sang phải xa hơn so với trước.



9.8 Để kiểm chứng, bạn đưa chuột vào hình tam giác bên trái folder TUOI TRE ONLINE:



9.9 Sau khi bấm chuột vào hình tam giác này, tất cả layer được che lại.



Nếu muốn xem lại các layer. Bạn bấm vào hình tam giác lần nữa.

10. Xuất file thành flash movie.

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 006_quanly_layer.swf như sau:

Adobe Flash CS4 - Bài 8


Flash CS4: 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:



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



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



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



5. Sử dụng Motion Presets để tạo ảnh động.

5.1 Chọn Window> Motion Presets từ menu:



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



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



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:



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



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



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



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




Đối với Windows XP, Flash lưu giữ custom presets trong folder có đường dẫn sau đây:

C:\Documents and
Settings\\Local Settings\Application Data\Adobe\Flash
CS4\\Configuration\Motion Presets\

Trong đó là tên của user sử dụng máy, 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 của bạn. Chọn Tools>Folder Options… từ menu:



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



Folder Local Settings xuất hiện:



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:



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



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

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\Motion Presets

Flash CS4 - Bài 9 : 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:





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




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




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



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




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




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




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




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




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.




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




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




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





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:




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):




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





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:





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




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:




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ẽ:




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





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:



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




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




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




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




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





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:






7. Sử dụng Color Panel để điều chỉnh màu Gradient.

7.1 Chọn Window>Color từ menu:





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





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





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:





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:



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.



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.



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:



(còn tiếp)

Flash CS4 - Bài mở rộng : 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 và 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ố W và H 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.



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.



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



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.



Để 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.



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.



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.



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.




- 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:




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:




- 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:





- 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:




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

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ụ: 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.

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:
	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
	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):
	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.
	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: 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: 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.
	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: 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.
	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:
	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:
	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.
	Ví dụ hình chữ nhật có góc bo tròn:
	Ví dụ hình chữ nhật có góc lõm:
	Ví dụ hình chữ nhật có bốn góc khác nhau:

Flash CS4 - Bài 10 : Tạo trò chơi bóng bàn đơn giản

TTO - 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:



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)



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:



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:



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



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:



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):




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

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:



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



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:




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



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.



Nhả chuột ra bạn thu được quả bóng tròn với màu gradient như sau:



5.11 Bấm chọn vào Selection Tool trên thanh công cụ bên phải:



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:



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:


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.


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:







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:



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:



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ừ:


5.18 Bấm chọn frame 60 của layer Guide:




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:




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:




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):




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:




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




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:




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




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:




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:




(còn tiếp)

Flash CS4 - Bài 10 : Tạo trò chơi bóng bàn đơn giản( Tiếp theo )



TTO - 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:




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:




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:



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



6.5 Bảng màu hiện ra. Bạn chọn mẫu màu xanh:



Bạn thu được kết quả như sau (màu viền vẫn là không màu):



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:



6.7 Bấm chọn Selection Tool trên thanh công cụ:



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:



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:



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.



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:



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



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ừ:



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



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):



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:




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:



7.3 Bấm chọn thẻ Library để mở Libray Panel:



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:



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.



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



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ừ:



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



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:



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



7.11 Giữ phím Shift và kéo cây vợt đến vị trí số 3 như hình minh họa:



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



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:



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:



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.



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:




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:



Bạn nhìn thấy vợt trái cách quả bóng một đoạn:



9.2 Bấm chọn vào vợt trái cho xuất hiện motion path:



9.3 Bấm đúp vào motion path:



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:



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.



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.

Bài tập gợi ý:

Làm
lại bài trên với hình hướng dẫn thay đổi như minh họa dưới đây. Lần này
cả hai vợt đều di chuyển với các vị trí keyframe được đánh dấu trên
hình minh họa. Bạn có thể tải hình minh họa guide2.jpg và file kết quả mẫu 009_pingpong2.fla để tham khảo.