Làm quen với Adobe Flash CS4 Professional

Flash CS4 - Bài 14 : Tìm hiểu về Ease

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



Tùy chọn Ease giúp bạn thay đổi tốc độ hoạt động
của Tween. Đối với các loại Tween khác nhau, các mục giúp điều chỉ cũng
khác nhau.

Lưu ý: bạn phải chọn keyframe của Tween để có thể nhìn thấy mục Ease trên Property Inspector.

1. Đối với Classic Tween:

Bạn có thể kéo chuột để thay đổi giá trị của mục Easing value hoặc gõ giá trị trực tiếp vào. Giá trị âm được gọi là ease in
có tác dụng làm tốc độ hoạt động của tween lúc đầu chậm, đến cuối thì
nhanh dần, giá trị âm lớn nhất là -100. Giá trị dương được gọi là Ease out có tác dụng làm tốc độ hoạt động của tween lúc đầu nhanh, đến cuối thì chậm dần, giá trị dương lớn nhất là 100.



Bạn cũng có thể chọn mục Edit easing (bấm vào cây bút chì bên phải nút Ease) để có thể thay đổi được nhiều mục hơn và linh hoạt hơn:



Khi đó hộp thoại Custom Ease In / Ease Out xuất hiện với các chọn lựa như sau:

- Bấm vào nút Play (góc dưới bên trái) để xem thử hoạt động của Ease.

- Bấm vào nút Stop (góc dưới bên trái) để ngừng xem hoạt động của Ease.

- Bấm vào nút Reset để xóa giá trị của Ease, lúc này đường cong chuyển thành đường thẳng.

Trong hình minh họa là đường cong thể hiện Ease In
lúc quả bóng rơi từ trên xuống. Ở giai đoạn đầu, đường cong ít dốc, quả
bóng rơi chậm. Ở giai đoạn cuối, đường cong dốc nhiều, quả bóng rơi
nhanh.



Hình minh họa dưới đây là đường cong thể hiện Ease Out
lúc quả bóng nảy lên. Ở giai đoạn đầu, đường cong dốc nhiều, quả bóng
nảy nhanh. Ở giai đoạn cuối, đường cong ít dốc, quả bóng chậm lại.



Bạn cũng có thể dùng chuột để điều chỉnh độ dốc của đường cong để thay đổi tốc độ hoạt động của Tween:



Nếu bạn bỏ chọn mục Use one setting for all properties, bạn có thể bấm menu xổ xuống bên cạnh mục Property để điều chỉnh từng thông số áp dụng cho Tween (một số hiệu ứng sẽ được tìm hiểu ở các bài thực hành tiếp theo):

- Position: Điều chỉnh tốc độ thay đổi vị trí đối tượng.

- Rotation: Điều chỉnh tốc độ thay đổi góc quay đối tượng.

- Scale: Điều chỉnh tốc độ thay đổi độ co dãn đối tượng.

- Color: Điều chỉnh tốc độ thay đổi hiệu ứng màu cho đối tượng.

- Filters: Điều chỉnh tốc độ thay đổi hiệu ứng lọc cho đối tượng.



Bấm nút Cancel để hủy bỏ các thay đổi.

Bấm nút OK để chấp nhận các thay đổi.

2. Đối với Shape Tween:

Bạn chỉ có thể thay đổi Easing value.



3. Đối với Motion Tween:

Sự thay đổi tốc độ thể hiện trên motion path.

Đối với Ease in: Các chấm thể hiện keyframe trên motion path gần nhau ở giai đoạn đầu và xa dần ở giai đoạn cuối.



Đối với Ease Out: Các chấm thể hiện keyframe trên motion path xa nhau ở giai đoạn đầu và gần dần ở giai đoạn cuối.



Tìm hiểu về Free Transform Tool

Free Transform Tool giúp bạn điều chỉnh tự do một đối tượng.

Để chọn Free Transform Tool, bạn bấm chuột vào Free Transform Tool trên thanh công cụ. Nếu công cụ hiện hành là Gradient Transform Tool, bạn bấm chuột vào Gradient Transform Tool trên thanh công cụ và giữ vài giây cho xuất hiện menu phụ, chọn Free Transform Tool.



Chuột đổi thành mũi tên có ruột màu đen. Khi bạn bấm
chọn vào một đối tượng, các núm điều chỉnh xuất hiện. Tùy thuộc đối
tượng được chọn và các tùy chọn bổ sung khác ở thanh công cụ, hoạt động
của các núm điều chỉnh được mô tả dưới đây:

Đối tượng được chọn là Shape	Dấu hiệu nhận dạng
	Khi bạn chọn đối tượng Shape, bạn sẽ thấy các hạt li ti xuất hiện. Xung quanh đối tượng xuất hiện một khung chữ nhật với tám núm điều chỉnh hình vuông màu đen. Giữa khung là hình tròn rỗng ruột màu trắng. Vòng tròn này dùng để xác định tâm xoay và tâm đối xứng của đối tượng.
Núm điều chỉnh được chọn	Công dụng
	Rê chuột đến gần núm điều chỉnh ở một trong bốn góc của khung chữ nhật, khi thấy chuột chuyển thành vòng tròn có mũi tên hướng về bên trái, bạn bấm và xoay chuột theo chiều kim đồng hồ hoặc ngược lại để xoay đối tượng. Đối tượng sẽ được xoay quanh tâm xoay (hình tròn rỗng ruột màu trắng).
	Rê chuột vào núm điều chỉnh ở một trong bốn góc của khung chữ nhật, khi thấy chuột chuyển thành mũi tên xiên hai chiều, bạn bấm và kéo chuột để co dãn đối tượng. Nếu bạn giữ phím Alt trong lúc kéo, đối tượng sẽ co dãn đối xứng với tâm đối xứng (hình tròn rỗng ruột màu trắng).
	Rê chuột vào núm điều chỉnh bên phải (hoặc bên trái) của khung chữ nhật, khi thấy chuột chuyển thành mũi tên hai chiều ngang, bạn bấm và kéo chuột để thay đổi độ rộng đối tượng. Nếu bạn giữ phím Alt trong lúc kéo, độ rộng đối tượng sẽ thay đổi đối xứng với tâm đối xứng.
	Rê chuột vào cạnh phải (hoặc cạnh trái) của khung chữ nhật, khi thấy chuột chuyển thành hai mũi tên đứng ngược chiều, bạn bấm và kéo chuột để làm xiên đối tượng theo chiều đứng. Nếu bạn giữ phím Alt trong lúc kéo, độ xiên đối tượng sẽ thay đổi đối xứng với tâm đối xứng.
	Rê chuột vào núm điều chỉnh bên trên (hoặc bên dưới) của khung chữ nhật, khi thấy chuột chuyển thành mũi tên hai chiều đứng, bạn bấm và kéo chuột để thay đổi độ cao đối tượng. Nếu bạn giữ phím Alt trong lúc kéo, độ cao đối tượng sẽ thay đổi đối xứng với tâm đối xứng.
	Rê chuột vào cạnh trên (hoặc cạnh dưới) của khung chữ nhật, khi thấy chuột chuyển thành hai mũi tên ngang ngược chiều, bạn bấm và kéo chuột để làm xiên đối tượng theo chiều ngang. Nếu bạn giữ phím Alt trong lúc kéo, độ xiên đối tượng sẽ thay đổi đối xứng với tâm đối xứng.
	Rê chuột vào vòng tròn rỗng ruột màu trắng, khi thấy bên dưới chuột xuất hiện một vòng tròn nhỏ, bạn bấm và kéo chuột để di chuyển vòng tròn này đến vị trí mới theo nhu cầu. Vị trí mới này sẽ là tâm xoay và tâm đối xứng mới của đối tượng. Để phục hồi tâm này về vị trí ban đầu, bạn bấm đúp chuột vào vòng tròn rỗng ruột màu trắng.
Tùy chọn bổ sung ở thanh công cụ	Công dụng
	Chỉ chọn xoay và làm xiên đối tượng. Lúc này khi rê chuột vào các núm điều chỉnh, hình dáng chuột sẽ cập nhật thành các hình tương ứng với xoay và làm xiên. (xem minh họa)
	Chỉ chọn co dãn đối tượng. Lúc này khi rê chuột vào các cạnh của khung chữ nhật, bạn không thấy hai mũi tên ngược chiều (xem minh họa)
	Làm biến dạng đối tượng. Rê chuột vào một trong các núm điều chỉnh, khi thấy chuột chuyển thành mũi tên màu trắng không có đuôi, bạn bấm và kéo chuột để di chuyển núm đến vị trí bất kỳ theo nhu cầu. Nếu bạn giữ phím Shift khi kéo một trong bốn góc, phía dưới chuột xuất hiện mũi tên hai chiều và đối tượng biến dạng đối xứng qua núm giữa của cạnh tương ứng. Ghi chú: bạn có thể giữ phím Ctrl để tạm thời kích hoạt tùy chọn Distort mà không cần phải chọn từ thanh công cụ. Khi nhả phím Ctrl thì tùy chọn Distort cũng bị vô hiệu hóa.
	Điều chỉnh khung bao đối tượng. Lúc này khung bao hình chữ nhật xuất hiện thêm các chấm tròn màu đen. Các chấm này là tiếp tuyến giúp bạn thay đổi độ cong các cạnh của khung chữ nhật. Rê chuột vào một trong các núm điều chỉnh hình vuông đen, khi thấy chuột chuyển thành mũi tên màu trắng không có đuôi, bạn bấm và kéo chuột để di chuyển núm đến vị trí bất kỳ theo nhu cầu. Rê chuột vào một trong các núm điều chỉnh hình tròn (nhánh của tiếp tuyến), khi thấy chuột chuyển thành mũi tên màu trắng không có đuôi, bạn bấm và kéo chuột để thay đổi độ cong của cạnh khung bao. Bạn thấy nhánh còn lại của tiếp tuyến đối xứng với núm điều chỉnh mà bạn đang chọn cũng di chuyển theo, đối xứng qua núm điều chỉnh. Nếu bạn giữ phím Alt lúc kéo chuột, tiếp tuyến đối xứng sẽ không di chuyển theo. Bạn áp dụng cách này để điều chỉnh một phần của khung bao. Khi nhả chuột ra, cạnh của khung bao chữ nhật đã chuyển thành đường cong.
Đối tượng được chọn là Symbol	Dấu hiệu nhận dạng
	Khi bạn chọn đối tượng Symbol, bạn không thấy các hạt li ti xuất hiện. Xung quanh đối tượng xuất hiện một khung chữ nhật với tám núm điều chỉnh hình vuông màu đen. Giữa khung là hình tròn rỗng ruột màu trắng. Vòng tròn này dùng để xác định tâm xoay và tâm đối xứng của đối tượng. Điểm khác biệt ở Symbol là sự điều chỉnh sẽ được mặc định đối xứng qua tâm đối xứng. Do đó bạn không cần phải giữ phím Alt trong lúc điều chỉnh. Ngược lại, bạn giữ phím Alt trong lúc điều chỉnh để vô hiệu hóa sự đối xứng qua tâm đối xứng. Điểm khác biệt thứ hai: Distort và Envelope bị vô hiệu hóa khi bạn chọn Symbol, các nút này bị mờ đi nên không chọn được.
Ngoài ra, bạn có thể chọn các đối tượng khác (sẽ được giới thiệu trong các bài tiếp theo). Về cơ bản, sự điều chỉnh giống như điều chỉnh đối tượng là Shape.

Flash CS4 - bài 14 : Thay đổi tốc độ hoạt động với tùy chọn Ease



Theo mặc định, các Tween do Flash tạo ra có tốc
độ đều. Tuy nhiên, có lúc bạn phải cho tốc độ nhanh dần hoặc chậm dần
cho phù hợp với thực tế hoặc tạo một sự khác biệt nào đó.

Để thay đổi tốc độ, bạn sử dụng tùy chọn Ease trên Property Inspector.

Trong bài này, bạn sẽ tạo chuyển động cho một quả bóng
rơi xuống và nảy lên. Sau đó sử dụng tùy chọn Ease để thay đổi tốc độ
cho phù hợp với thực 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 12. (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 012_ease.fla

4. Dùng Oval Tool để tạo quả bóng.

4.1. Đư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:



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



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



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



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



4.6 Đưa chuột vào phần giữa trên của Stage, giữ phím Shift và kéo chuột xuống để 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:



4.7 Bấm chuột vào Free Transform Tool và giữ vài giây cho xuất hiện menu phụ và chọn Gradient Transform Tool:



Chuột đổi thành mũi tên có ruột màu trắng.

4.8 Bấm chuột vào quả bóng. Các núm điều chỉnh màu gradient xuất hiện:



4.9 Rê chuột vào tâm xoay của quả bóng. Khi chuột đổi
thành mũi tên bốn chiều, nắm kéo tâm xoay chếch về bên trái một đoạn
ngắn như hình minh họa:



4.10 Khi nhả chuột ra, quầng sáng chuyển lên góc trên
trái. Rê chuột vào núm điều chỉnh độ co dãn màu gradient, khi thấy
chuột chuyển thành vòng tròn có mũi tên ở giữa, bạn bấm và kéo chuột
chếch về góc dưới bên phải một đoạn.



Bạn thu được quả bóng được ánh sáng chiếu từ góc trên trái:



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



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



4.9 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. Dùng Classic Tween để tạo chuyển động cho quả bóng.

5.1 Bạn cần tạo hai Tween. Tween thứ nhất cho quả bóng
rơi xuống, Tween thứ hai cho quả bóng nảy lên. Bấm chuột vào frame 24
trên Layer 1:



5.2 Bấm phím F6 để bổ sung keyframe:



5.3 Bấm chuột vào frame 48 trên Layer 1:



5.4 Bấm phím F6 để bổ sung keyframe:



5.5 Bấm chọn keyframe 24:



5.6 Chọn Selection Tool từ thanh công cụ bên phải:



5.7 Giữ phím Shift, đưa chuột kéo quả bóng xuống dưới như hình minh họa (phím Shift giúp di chuyển theo đường thẳng đứng):



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



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



Bạn thu được màu xanh nhạt đặc trưng của Classic Tween với mũi tên từ frame 2 đến frame 23 cho tween đầu và mũi tên từ frame 25 đến frame 47 cho tween còn lại.



5.10 Lúc này keyframe 1 vẫn đang được chọn. Đưa chuột vào ô Easing value trên Property Inspector,
chuột chuyển thành bàn tay với mũi tên hai chiều. Kéo chuột sang trái
đến khi giá trị đổi thành -100 thì nhả chuột ra (hoặc bấm chọn ô chữ và
gõ vào số -100). (Xem thêm phần Tìm hiểu về Ease ở cuối bài).



5.11 Bấm chọn keyframe 24.



5.12 Đưa chuột vào ô Easing value trên
Property Inspector, chuột chuyển thành bàn tay với mũi tên hai chiều.
Kéo chuột sang phải đến khi giá trị đổi thành 100 thì nhả chuột ra
(hoặc bấm chọn ô chữ và gõ vào số 100):



5.13 Chọn Control > Test Movie từ
menu để xem kết quả. Quả bóng bắt đầu rơi chậm, gần tới dưới thì nhanh
dần. Sau đó nảy lên thật nhanh và lên trên thì chậm dần.

6. Bổ sung hiệu ứng quả bóng dẹt ra khi chạm đất.

6.1 Bấm chọn frame 22:



6.2 Bấm phím F6 để bổ sung keyframe:



6.3 Bấm chọn frame 26:



6.4 Bấm phím F6 để bổ sung keyframe:



6.5 Tại frame 26 này, giá trị Ease đang là 0. Bạn thực hành lại bước 5.12 để đưa giá trị Ease lên 100:



6.6 Bấm chọn keyframe 24. Tại frame này, giá trị Ease
đang là 100. Bạn thực hành lại thao tác giống bước 5.12 để đưa giá trị
Ease trở về 0:



6.7 Bấm chuột vào Gradient Transform Tool trên thanh công cụ và giữ vài giây cho xuất hiện menu phụ, chọn Free Transform Tool (Xem thêm phần Tìm hiểu về Free Transform Tool ở cuối bài):



6.8 Bấm chuột vào quả bóng cho xuất hiện các núm điều
chỉnh. Đưa chuột vào vòng tròn rỗng ruột màu trắng cho xuất hiện vòng
tròn nhỏ bên cạnh chuột. Kéo vòng tròn rỗng ruột màu trắng xuống sát
mép dưới quả bóng:



6.9 Đưa chuột vào núm điều chỉnh phía trên, ở giữa.
Khi thấy chuột chuyển thành mũi tên hai chiều đứng. Nắm kéo chuột xuống
một đoạn ngắn cho quả bóng dẹp lại.



6.10 Đưa chuột vào núm điều chỉnh bên phải, ở giữa.
Khi thấy chuột chuyển thành mũi tên hai chiều ngang. Giữ phím Shift,
nắm kéo chuột sang phải một đoạn ngắn cho quả bóng phình ra hai bên:



Bạn chọn Control > Test Movie từ menu để xem lại kết quả.

Bài thực hành 15 : Sử dụng Classic motion guide



Khi sử dụng Classic Tween kèm với Classic Motion
Guide, bạn có thể điều khiển đối tượng di chuyển theo một đường dẫn bất
kỳ.

Trong bài này, bạn sẽ tạo chuyển động cho một máy bay
bay lượn nhờ sử dụng Classic Motion Guide và tùy chọn Orient to 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 13. (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 013_motion_guide.fla

4. Import hình máy bay.

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



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



Bạn thu được bức ảnh máy bay nằm ở góc trên bên trái:



5. Chuyển bức ảnh sang Symbol.

5.1 Lúc này bức ảnh đang được chọn (xung quanh ảnh có một khung chữ nhật màu xanh). Bạn chọn Modify > Convert to Symbol… từ menu (Hoặc phím tắt F8):



5.2 Hộp thoại Convert to Symbol xuất hiện. Bạn gõ tên may bay (máy bay) vào ô Name, chọn Type là Movie Clip, Registration ở giữa, xong bấm nút OK để đóng hộp thoại lại:



Bạn thu được một Movie Clip Symbol. Khung chủ nhật chuyển sang màu xanh nhạt hơn. Ở giữa khung có một dấu + và vòng tròn rỗng ruột màu trắng.



6. Tạo chuyển động cho máy bay.

6.1 Dùng chuột kéo máy bay xuống góc dưới bên trái:



6.2 Bấm chọn frame 90 trên Timeline:



6.3 Bấm phím F6 để bổ sung keyframe:



6.4 Dùng chuột kéo máy bay lên góc trên bên phải:



6.5 Bấm chọn keyframe 1:



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



6.7 Flash tạo Classic Tween với màu đặc trưng trên Timeline:



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

Nhận xét: máy bay chỉ di chuyển từ góc dưới bên trái
sang góc trên bên phải. Bước tiếp theo bạn sẽ điều chỉnh cho máy bay
bay lượn.

7. Cho máy bay bay lượn.

7.1. Bấm phím phải chuột vào Layer 1 và chọn Add Classic Motion Guide:



Flash bổ sung một layer mới với biểu tượng là một đường cong chấm chấm kèm theo chữ Guide. Bên phải chữ Guide là tên layer trùng với tên layer có chứa Classic Tween. Biểu tượng của layer chứa Classic Tween bị dịch sang phải một chút, chứng tỏ layer này đang chịu ảnh hưởng của layer Guide. Cây bút chì đang nằm trên layer Guide là dấu hiệu layer này đang được chọn để bạn đưa nội dung vào. Bạn sẽ vẽ đường guide vào layer này.



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



7.3 Bấm chọn Pencil Mode phía dưới thanh công cụ cho menu phụ xuất hiện và chọn Smooth:



7.4 Vẽ một đường cong bắt đầu từ nơi có chiếc máy bay
ở góc dưới bên trái và kết thúc là nơi có chiếc máy bay ở góc trên bên
phải:



Nhả chuột ra, bạn thu được đường cong như hình minh
họa. Sau khi vẽ, đầu mút bên trái của đường cong tự động hít vào chiếc
máy bay:



7.5 Bấm chọn keyframe tại frame 90 của Layer 1:



Tại keyframe cuối này, máy bay chưa hít vào đầu mút còn lại của đường cong. Bạn sẽ di chuyển cho máy bay hít vào.



7.6 Chọn Selection Tool từ thanh công cụ bên phải:



7.7 Dùng chuột kéo cho máy bay hít vào đầu mút còn lại của đường cong. Chú ý kéo từ tâm máy bay, nơi có chấm tròn rỗng ruột.



Nhả chuột ra, bạn thu được vị trí mới của máy bay:



Lúc này, bạn có thể chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem thử kết quả. Tuy nhiên máy bay chỉ bay mà chưa lượn. Bạn sẽ bổ sung hiệu ứng lượn ở bước tiếp theo.

Lưu ý: Trong trường hợp bạn vẽ đường
cong chưa chính xác, hoặc kéo thả chuột chưa chính xác, bạn sẽ không
thu được kết quả ở lần đầu tiên. Bạn phải vẽ lại đường cong khác hoặc
kéo thả lại vài lần để đạt kết quả.

7.8 Bạn cần thay đổi góc quay của máy bay cho phù hợp với hướng của đường cong. Bạn chọn Free Transform Tool từ thanh công cụ bên phải:



7.9 Bạn chọn máy bay và xoay cho máy bay theo hướng chếch lên của đường cong:



7.10 Bấm chọn keyframe 1 của Layer 1:



7.11 Bạn chọn máy bay và xoay cho máy bay theo hương chếch lên của đường cong



7.12 Bấm chọn lại keyframe 1 của Layer 1:



7.13 Bấm chọn vào Ô Orient to path trên Property Inspector:



Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả. Lúc này máy bay đã bay lượn theo đường cong.

Flash CS4 - Bài 16 : Tìm hiểu về Tweening

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



Tìm hiểu thêm về các tùy chọn cho mục TWEENING ở Property Inspector. Các tùy chọn cho mục TWEENING ở Property Inspector sẽ khác nhau đối với từng loại Tween.

1. Đối với Classic Tween:

Bạn chọn keyframe đầu của Tween. Property Inspector sẽ cung cấp các tùy chọn dưới đây.



Mục Ease: giúp bạn thay đổi tốc độ chuyển động (đã được giới thiệu ở bài trước).

Mục Rotate: giúp bạn thay đổi góc xoay của đối tượng. Nếu bạn bấm vào hình tam giác màu đen bên phải mục Rotate, bạn có các tùy chọn bổ sung như sau:

None: không xoay đối tượng.

Auto: tự động xoay đối tượng theo góc xoay được bạn thực hiện thông qua công cụ Free Transform Tool.

CW: (clockwise) xoay đối tượng theo
chiều kim đồng hồ. Lúc này bạn có thể xác lập số vòng xoay bằng cách gõ
số vào ô bên phải hoặc rê chuột vào cho đến khi chuột chuyển thành bàn
tay có mũi tên hai chiều thì bấm kéo chuột để thay đổi số vòng.

CCW: (counterclockwise) xoay đối tượng ngược chiều kim đồng hồ. Bạn xác lập số vòng xoay tương tự như trường hợp CW.

Lưu ý: Mỗi Classic tween chỉ áp dụng cho một đối tượng, đồng thời đối tượng không phải là shape. Nếu bạn chọn nhiều hơn một đối tượng hoặc chọn đối tượng là shape, trên Timeline sẽ xuất hiện lỗi với các đường chấm chấm như hình minh họa. Trường hợp này xuất hiện khi bạn vô tình vẽ thêm hoặc bổ sung đối tượng vào một tween đã có sẵn hoặc vô tình chuyển đối tượng sang shape.

Mục Snap:
chọn mục này để đối tượng hít vào đường dẫn (đường cong vừa vẽ trong
bài thực hành - còn gọi là motion guide). Theo mặc định, mục này được
chọn sẵn cho bạn. Tuy nhiên nếu thấy đối tượng chưa được hít vào đường
dẫn, bạn phải tự mình chọn mục này.

Mục Orient to path:
chọn mục này để đối tượng luôn xoay hướng theo đường dẫn giúp chuyển
động trông giống như thực tế. Bạn phải xoay đối tượng ở keyframe đầu và
keyframe cuối phù hợp với hướng của đường dẫn.

Mục Sync: chọn mục này để đồng bộ hóa Timeline của graphic symbol với Timeline chính. (Xem các bài thực hành tiếp theo).

Mục Scale: chọn mục này để đối tượng
co dãn liên tục trong suốt quá trình chuyển động nếu kích thước của đối
tượng ở keyframe đầu và keyframe cuối khác nhau. Nếu không chọn, đối
tượng sẽ giữ nguyên kích thước ban đầu và chỉ thay đổi kích thước khi
đến keyframe cuối.



2. Đối với Shape Tween:

Lưu ý: Shape tween chỉ áp dụng cho shape (khi bạn chọn đối tượng sẽ thấy các hạt li ti xuất hiện ở đối tượng, đồng thời ngay bên dưới Property Inspector có biểu tượng hình tròn và hình vuông cắt nhau với các hạt li ti và chữ Shape). Nếu đối tượng không là shape, trên Timeline sẽ xuất hiện lỗi với các đường chấm chấm như hình minh họa. Trường hợp này xuất hiện khi bạn vô tình bổ sung đối tượng vào một tween đã có sẵn hoặc vô tình chuyển shape sang symbol.

Bạn chọn keyframe đầu của Tween. Property Inspector sẽ cung cấp các tùy chọn dưới đây.

Mục Ease: giúp bạn thay đổi tốc độ chuyển động (đã được giới thiệu ở bài trước).

Mục Blend: giúp xác định cách biến
đổi từ đối tượng ở keyframe đầu sang đối tượng ở keyframe cuối. Nếu bạn
bấm vào hình tam giác màu đen bên phải mục Blend, có các tùy chọn bổ
sung như sau:

Distributive: làm mượt sự biến đổi từ đối tượng ở keyframe đầu sang đối tượng ở keyframe cuối.

Angular: giữ lại dáng vẽ các góc nhọn và các đường thẳng trong lúc biến đổi từ đối tượng ở keyframe đầu sang đối tượng ở keyframe cuối.



3. Đối với Motion Tween:

Bạn chọn bất kỳ frame nào trên vùng ảnh hưởng của Motion Tween (keyframe hoặc frame nằm giữa các keyframe - Flash gọi là span), Property Inspector sẽ cung cấp các tùy chọn dưới đây.



Mục Ease: giúp thay đổi tốc độ chuyển động (đã được giới thiệu ở bài trước).

Mục Rotate: giúp thay đổi góc xoay
của đối tượng. Bạn có thể xác lập số vòng xoay bằng cách gõ số vào ô
phía trước chữ time(s), số độ phía sau dấu cộng bên phải hoặc rê chuột
vào cho đến khi chuột chuyển thành bàn tay có mũi tên hai chiều thì bấm
kéo chuột để thay đổi giá trị các số đó.

Mục Direction: giúp xác định chiều xoay đối tượng. Nếu bạn bấm vào hình tam giác màu đen bên phải mục Direction, bạn có các tùy chọn bổ sung như sau:

None: không xoay đối tượng.

CW: xoay đối tượng theo chiều kim đồng hồ. Lúc này bạn có thể xác lập số vòng xoay và góc xoay giống như cách thực hiện ở mục Rotate.

CCW: xoay đối tượng ngược chiều kim
đồng hồ. Lúc này bạn có thể xác lập số vòng xoay và góc xoay giống như
cách thực hiện ở mục Rotate.

Mục Orient to path: chọn mục này để đối tượng luôn xoay hướng theo Motion path
giúp chuyển động trông giống như thực tế. Bạn chỉ cần xoay đối tượng ở
keyframe đầu hoặc keyframe cuối cho phù hợp với hướng của Motion path.

Mục Sync graphic symbols: chọn mục này để đồng bộ hóa Timeline của graphic symbol với Timeline chính. (Xem các bài thực hành tiếp theo).

Flash CS4 - Bài 17 : Sử dụng Color effect



Trong bài này, bạn sẽ sử dụng Symbol và Color
Effect để tạo nhiều bập bênh trên Stage với các hiệu ứng màu sắc khác
nhau. 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 14. (Xem bài thực hành 1 về vùng làm việc)

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

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



2.2 Chuyển đến folder FLASH CS4 ONLINE, chọn file 011_classic_tween.fla, tiếp theo bấm vào nút Open để mở file này. Chú ý chọn đúng file có đuôi là fla.



Bạn thu được hình bập bênh trên Stage:



3. Lưu một flash document.

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



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



4. Chuyển đổi bập bênh từ Stage thành Symbol.

4.1. Bấm chuột chọn keyframe 1 của Layer 2:



4.2 Giữ phím Shift, bấm chọn keyframe 48 của Layer 1. Bạn thu được kết quả toàn bộ các frame của cả hai layer đều được chọn:



4.3 Rê chuột vào vùng các frame đang được chọn, bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Copy Frames:



4.4 Chọn Insert > New Symbol… từ menu (Hoặc phím tắt Ctrl+F8):



4.5 Hộp thoại Creat New Symbol xuất hiện. Bạn gõ bập bênh vào ô Name, chọn Type là Movie Clip, bấp nút OK để đóng hộp thoại lại:



4.6 Timeline của Movie Clip bập bênh xuất hiện, trên thanh Edit Bar (còn gọi là Display bar) biểu tượng của Movie Clip bập bênh xuất hiện bên phải Scene 1.



4.7 Bấm phím phải chuột vào frame 1 của Timeline cho xuất hiện menu ngữ cảnh và chọn Paste Frames:



Trên Timeline của Movie Clip xuất hiện các frame mà bạn đã copy từ Timeline chính:



Đồng thời trên Stage, nội dung của bập bênh cũng xuất hiện:



4.8 Bấm chuột vào Scene 1 trên Edit bar để thoát khỏi Timeline của Movie clip và trở ra Timeline chính:



Flash đưa bạn ra Timeline chính là Scene 1:



5. Tạo nhiều bập bênh trên Stage.

Trước hết, bạn cần xóa toàn bộ nội dung hiện hữu trên
Stage. Sau đó, sử dụng Symbol bập bênh từ Library. Các bước thực hiện
như sau:

5.1. Bấm chuột chọn keyframe 1 của Layer 2:



5.2 Giữ phím Shift, bấm chọn keyframe 48 của Layer 1. Bạn thu được kết quả toàn bộ các frame của cả hai layer đều được chọn:



5.3 Rê chuột vào vùng các frame đang được chọn, bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Remove Frames:



Toàn bộ các frame trên Timeline biến mất:



5.4 Bấm chọn frame 1 của Layer 1:



5.5 Bấm phím tắt F5 để bổ sung một frame vào, một chấm tròn màu trắng xuất hiện:



5.6 Bấm chọn Library panel:



Nội dung của Library panel xuất hiện:



5.7 Dùng chuột kéo Movie Clip bập bênh ra Stage:



Bạn thu được 1 bập bênh trên Stage:



5.8 Chọn Free Transform Tool trên thanh công cụ bên phải:



5.9 Rê chuột lên góc trên bên phải của bập bênh. Khi chuột chuyển thành mũi tên xiên hai chiều, giữ phím Alt và kéo chuột sang trái, chếch xuống dưới để thu nhỏ bập bênh còn khoảng 50% như hình minh họa:



5.10 Rê chuột vào bập bênh đến khi chuột chuyển thành mũi tên bốn chiều:



5.11 Giữ phím Alt và kéo chuột sang
phải, chếch lên phía trên một chút. Khi bạn kéo, phía dưới chuột xuất
hiện một dấu cộng, thể hiện bạn đang thực hiện thao tác copy.



Nhả chuột ra, bạn thu được một bập bênh thứ hai trên Stage:



5.12 Bạn thực hiện thao tác copy như đã nêu để thu được bốn bập bênh trên Stage:



(còn tiếp)

Flash CS4 - bài 17 : Sử dụng Color Effect (tiếp theo)



6. Sử dụng Color Effect để đổi màu các bập bênh

6.1 Chọn Selection Tool từ thanh công cụ bên phải:



6.2 Chọn Property Inspector:



6.3 Lúc này một bập bênh vẫn đang được chọn. Trong
hình minh họa bạn thấy nhiều nhóm tùy chọn để tinh chỉnh cho bập bênh.
Nhóm tùy chọn nào được mở, bạn thấy hình tam giác màu trắng bên trái
nhóm đó hướng xuống dưới và có các mục nhỏ phía dưới để tinh chỉnh.
Nhóm nào chưa được mở, bạn thấy hình tam giác màu trắng bên trái nhóm
đó hướng sang phải và không có các mục nhỏ phía dưới để tinh chỉnh. Để
mở hoặc đóng một nhóm, bạn bấm chuột vào hình tam giác màu trắng hoặc
tên nhóm.

Trong hình minh họa, nhóm Color Effect đang đóng, bạn bấm vào Color Effect để mở ra:



Bạn thu được các mục tinh chỉnh của nhóm Color Effect:



6.4 Bạn bấm vào hình tam giác màu đen bên phải mục Style phía dưới vùng Color Effect của Property Inspector. Chọn Brightness từ menu xổ xuống:



6.5 Bạn có thể gõ giá trị vào ô bên phải hoặc kéo thanh trượt để thay đổi giá trị Brightness để tinh chỉnh độ sáng. Trong hình minh họa, giá trị thiết lập là -25, màu bập bênh tối đi một chút:



6.6 Chọn bập bênh góc trên bên trái:



6.7 Bạn bấm vào hình tam giác màu đen bên phải mục Style phía dưới vùng Color Effect của Property Inspector. Chọn Tint từ menu xổ xuống:



6.8 Bấm vào ô Tint color để chọn màu từ bảng màu:



6.9 Bảng màu xuất hiện, bạn chọn màu vàng:



6.10 Bạn có thể gõ giá trị vào các ô bên phải hoặc kéo thanh trượt để thay đổi các giá trị này. Trong hình minh họa, mục Tint được thiết lập 33%:



6.11 Chọn bập bênh phía dưới bên phải:



6.12 Bạn bấm vào hình tam giác màu đen bên phải mục Style phía dưới vùng Color Effect của Property Inspector. Chọn Advanced từ menu xổ xuống:



6.13 Bạn có thể bấm chọn các ô và gõ giá trị mới vào
hoặc đưa chuột vào, khi chuột chuyển thành bàn tay có mũi tên hai chiều
ở ngón trỏ thì kéo chuột để thay đổi giá trị. Trong hình minh họa, ô
bên phải giá trị Red được gán giá trị 255:



6.14 Chọn bập bênh phía dưới bên trái:



6.15 Bạn bấm vào hình tam giác màu đen bên phải mục Style phía dưới vùng Color Effect của Property Inspector. Chọn Alpha từ menu xổ xuống:



6.16 Bạn có thể gõ giá trị vào ô bên phải hoặc kéo thanh trượt để thay đổi giá trị này. Trong hình minh họa, mục Alpha được thiết lập 70%:



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

Nhận xét: cả bốn bập bênh đều hoạt
động giống nhau, chỉ khác nhau về màu sắc. Bước tiếp theo bạn sẽ điều
chỉnh cho các bập bênh hoạt động lệch pha nhau.

7. Cho các bập bênh hoạt động lệch pha nhau.

7.1. Chọn bập bênh phía trên bên phải:



7.2 Ở Property Inspector bấm vào hình tam giác màu đen bên phải chữ Movie Clip, chọn Graphic từ menu xổ xuống:



7.3 Bấm chọn nhóm Looping để mở các mục tinh chỉnh:



7.4 Chấp nhận thông số mặc định của Options là Loop, và First là 1 (Xem thêm phần Tìm hiểu thêm về Symbol ở cuối bài):



7.5 Chọn bập bênh phía trên bên trái:



7.6 Ở Property Inspector, bấm vào hình tam giác màu đen bên phải chữ Movie Clip, chọn Graphic từ menu xổ xuống:



7.7 Chấp nhận thông số mặc định của Options là Loop, gõ giá trị 12 vào ô First.



7.8 Chọn bập bênh phía dưới bên phải:



7.9 Ở Property Inspector, bấm vào hình tam giác màu đen bên phải chữ Movie Clip, chọn Graphic từ menu xổ xuống:



7.10 Chấp nhận thông số mặc định của Options là Loop, gõ giá trị 24 vào ô First.



7.11 Chọn bập bênh phía dưới bên trái:



7.12 Ở Property Inspector, bấm vào hình tam giác màu đen bên phải chữ Movie Clip, chọn Graphic từ menu xổ xuống:



7.13 Chấp nhận thông số mặc định của Options là Loop, gõ giá trị 36 vào ô First.



Lúc này, bạn có thể chọn Control>Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem thử kết quả. Tuy nhiên bạn thấy các bập bênh không hoạt động. Lý do là bạn đã chuyển các symbol từ Movie Clip sang Graphic. Sự khác nhau ở chỗ: Movie Clip symbol có thể tự hoạt động, Graphic symbol hoạt động phụ thuộc vào Timeline chính. Số frame ở Timeline chính phải bằng hoặc là bội số số frame của Graphic symbol để có thể đảm bảo cho Graphic symbol hoạt động đúng theo số frame đã tạo ra bên trong Graphic symbol.(Xem thêm phần Tìm hiểu thêm về Symbol ở cuối bài)

Để giúp các bập bênh hoạt động đúng, bạn bổ sung thêm
cho đủ 48 frame vào Timeline chính (48 frame là số frame hoạt động của
bập bênh mà bạn đã tạo ra trước đó).

7.14 Bấm chọn frame 48 trên Layer 1:



7.15 Bấm phím tắt F5 để bổ sung thêm frame:



Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả. Lúc này các bập bênh đều hoạt động.

7.16 Chọn Layer 2:



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



Nhận xét: Bằng cách chuyển toàn bộ một animation từ Timeline chính thành Movie Clip symbol,
bạn có thể sử dụng animation nhiều lần. Bạn cũng có thể copy đưa sang
các tác phẩm khác để sử dụng mà không cần phải tạo lại từ đầu.

Flash CS4 - Bài 18 : Tìm hiểu về Color Effect

* Sử dụng Color effect - Phần lý thuyết bổ sung cho bài thực hành




Bạn thiết lập Color Effect cho symbol bằng cách sử dụng các tùy chọn từ mục Style sau đây:

Tùy chọn None: Đây là tùy chọn mặc
định cho symbol. Tùy chọn này không làm thay đổi màu sắc ban đầu khi
bạn tạo symbol. Nếu trước đó bạn đã chọn một tùy chọn khác thì khi chọn
lại None sẽ hủy bỏ các thay đổi về màu sắc để đưa symbol trở về trạng
thái màu sắc ban đầu.

Tùy chọn Brightness: Tùy chọn này
dùng để thiết lập độ sáng tối cho symbol. Giá trị dương sẽ làm cho
symbol sáng hơn (100% sẽ làm cho symbol chuyển sang màu trắng). Giá trị
âm sẽ làm cho symbol tối hơn (-100% sẽ làm cho symbol chuyển sang màu
đen). Giá trị 0 giữ nguyên độ sáng ban đầu của symbol. Bạn kéo thanh
trượt hoặc gõ số trực tiếp vào ô % để thiết lập giá trị cho Brightness.



Ví dụ minh họa các giá trị Brightness khác nhau cho cùng một symbol với màu gốc là blue:



Tùy chọn Tint: Tùy chọn này dùng để
hòa trộn một màu mới với màu hiện hữu của symbol. Bạn có thể chọn màu
bằng cách bấm vào ô màu bên phải mục Style và chọn màu từ bảng màu hiện
ra. Bạn cũng có thể gõ số trực tiếp vào các ô bên phải mục Red, Green,
Blue, hoặc kéo thanh trượt để thiết lập các giá trị này. Để thiết lập
mức độ hòa trộn màu mới với màu hiện hữu của symbol, bạn kéo thanh
trượt ở mục Tint hoặc gõ số trực tiếp vào ô %.



Ví dụ minh họa các giá trị Tint khác nhau cho cùng một symbol (màu Tint là màu đỏ):



Tùy chọn Alpha: Tùy chọn này dùng để
xác lập độ trong suốt cho symbol. Để thiết lập mức độ trong suốt cho
symbol, bạn kéo thanh trượt ở mục Alpha hoặc gõ số trực tiếp vào ô %.
Độ trong suốt nhỏ hơn 100% giúp bạn nhìn thấy các đối tượng nằm dưới
symbol.



Ví dụ minh họa các giá trị Alpha khác nhau cho cùng một symbol:



Tùy chọn Advanced: Tùy chọn này dùng
để tinh chỉnh cả bốn thông số Alpha, Red, Green, Blue cùng một lúc cho
symbol. Bạn thiết lập tỉ lệ % ở ô bên trái của các thông số nêu trên. Ô
bên phải dấu + dùng để thiết lập giá trị offset cho các kênh (để tăng
hoặc giảm một lượng nhất định). Như vậy giá trị mới của các kênh sẽ là
giá trị gốc nhân với tỉ lệ % cộng với giá trị offset. (Công thức này
được thể hiện trong hình bên dưới)



Ví dụ minh họa điều chỉnh giá trị Advanced cho cùng một symbol:



Tìm hiểu thêm về Symbol

(Xem thêm phần lý thuyết bổ sung về Symbol ở bài Tạo ảnh động theo Phương pháp Motion Tween)

Ở phần đầu của bài thực hành, bạn đã tạo Movie Clip bap benh.
Khi bạn kéo một Instance của Movie Clip bap benh từ Libray ra Stage để
sử dụng, Movie Clip bap benh có thể hoạt động mặc dù ở Stage chỉ có một
frame, trong khi Timeline của Movie Clip bap benh có 48 frame.

Tuy nhiên khi bạn đã chuyển Symbol sang dạng Graphic,
bạn phải điều chỉnh để số lượng frame ở Timeline chính phải bằng hoặc
là bội số số frame của Graphic symbol để có thể đảm bảo cho Graphic
symbol hoạt động đúng theo số frame đã tạo ra bên trong Graphic symbol.

Ngoài ra, nếu bạn sử dụng nhiều Instance của Graphic
symbol, bạn có thể làm cho tác phẩm phong phú hơn bằng cách điều chỉnh
cho các Instance này lệch pha nhau. Bạn thực hiện điều này thông qua
việc thiết lập giá trị cho mục First ở tùy chọn Looping. Tại đây bạn gõ số frame nào của Graphic symbol bạn muốn xuất hiện đầu tiên như trong bài thực hành.



Bạn cũng có thể bổ sung thêm tùy chọn cho mục Options:

- Loop: Graphic Symbol sẽ play từ frame đầu đến frame cuối và lập lại liên tục.
- Play Once: Graphic Symbol sẽ play từ frame đầu đến frame cuối một lần rồi ngưng.
- Single Frame: Graphic Symbol chỉ hiển thị bằng một frame duy nhất do bạn thiết lập ở ô First và không play.



Đối với Movie Clip, ngoài việc có thể hoạt động độc
lập với Timeline chính, bạn có thể thiết lập thêm một số tùy chọn khác
như sau:

+ Đặt tên cho Movie Clip để sử dụng với ActionScript:
Bạn đặt tên cho Movie Clip ở ô (sẽ được giới
thiệu khi thực hành về ActionScript).

+ Điều chỉnh các thông số ở mục 3D Position and View. (sẽ được giới thiệu ở các bài thực hành tiếp theo)

+ Điều chỉnh các thông số ở mục Display. Tại đây bạn
sẽ thực hiện việc phối trộn màu giữa các Movie Clip (Blending) hoặc
thiết lập tùy chọn Cache as bitmap để giúp Flash hoạt động được suôn sẻ, không có dấu hiệu bị chậm (sẽ được giới thiệu ở các bài thực hành tiếp theo).

+ Điều chỉnh các thông số ở mục Filter. Tại đây bạn có
thể tạo các loại Filter khác nhau cho Movie Clip như Drop Shadow, Blur,
Glow,… (sẽ được giới thiệu ở các bài thực hành tiếp theo).



Một đối tượng được chuyển sang Graphic Symbol giúp làm
kích thước file nhỏ hơn khi chuyển sang Movie Clip. Như vậy sau khi xem
xét các đặc điểm đã nêu, bạn sẽ chọn loại Symbol phù hợp cho tác phẩm
của bạn.

Button Symbol sẽ được giới thiệu ở các bài thực hành tiếp theo.

Bạn có thể giữ nguyên loại Symbol đã chọn lựa ban đầu
là Movie Clip ở Library, nhưng lại sử dụng Instance như Graphic Symbol
bằng cách thay đổi thông qua Property Inspector như ở phần thực hành:



Bạn cũng có thể chuyển hẳn một Symbol ở Library từ loại này sang loại khác thông qua thông số ở Library như sau:

1. Chọn Movie Clip bap benh từ Library:



2. Bấm vào nút Properties… phía dưới:



3. Hộp thoại Symbol Properties… xuất hiện. Ở mục Type, bấm cho menu xổ xuống và chọn Graphic. Bấm OK để đóng hộp thoại lại:



Kết quả được cập nhật tại Library. Bap bênh đã chuyển thành Graphic Symbol:

Flash CS4 - Bài 19 : Áp dụng color effect để tạo slideshow



Trong bài này, bạn sẽ áp dụng Color Effect cho
symbol khi tạo Motion Tween để tạo SlideShow cho một loạt ả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 16. (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 016_slideshow.fla

4. Import một loạt ảnh vào Stage.

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



4.2 Hộp thoại Import xuất hiện. Di chuyển đến folder chứa các ảnh cần import. Giữ phím Ctrl, bấm chọn các file ảnh Blue-hills.jpg, Sunset.jpg, Water-lilies.jpg, Winter.jpg (các file này được đính kèm theo bài). Bấm nút Open để đóng hộp thoại lại (Xem thêm phần Xử lý ảnh bằng Photoshop trước khi import vào Flash ở cuối bài):



Bạn thu được các tấm ảnh nằm giữa Stage:



4.3 Rê chuột vào vùng các tấm ảnh cho đến khi dưới chuột xuất hiện mũi tên bốn chiều:



4.4 Bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Distribute to Layers:



4.5 Trên Timeline bạn thu được bốn layer với tên tương
ứng của bốn tấm ảnh. Layer 1 không còn chứa đối tượng nào nên chỉ còn
keyframe trắng. Bạn tạm thời vẫn để Layer 1 ở vị trí hiện hữu để sử
dụng ở phần cuối bài thực hành:



5. Thiết lập lại kích thước cho tác phẩm.

Lúc này, tấm ảnh đang được chọn, ở Property Inspector
bạn thấy biểu tượng hình Bitmap. Kích thước tác phẩm theo mặc định là
550x400 pixel, trong khi kích thước ảnh chỉ là 320x240 pixel:



5.1. Bấm chuột vào vùng trắng của Stage để bỏ chọn tấm ảnh:



5.2 Bấm vào nút Edit… bên phải mục Size của Property Inspector:



5.3 Hộp thoại Document Properties xuất hiện. Bấm chọn nút Contents ở mục Match. Kích thước của tác phẩm thay đổi thành 320x240 pixel. Bấm nút OK để đóng hộp thoại lại:



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



6. Chuyển các tấm ảnh thành symbol.

6.1 Bấm chọn keyframe của layer Water-lilies.jpg:



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



6.3 Hộp thoại Convert to Symbol xuất hiện. Gõ tên Water-lilies vào ô Name, chọn Type là Movie Clip, bấm nút OK để chấp nhận:



6.4 Bấm chọn keyframe của layer Sunset.jpg:



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



6.6 Hộp thoại Convert to Symbol xuất hiện. Gõ tên Sunset vào ô Name, chọn Type là Movie Clip, bấm nút OK để chấp nhận:



6.7 Bấm chọn keyframe của layer Blue-hills.jpg:



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



6.9 Hộp thoại Convert to Symbol xuất hiện. Gõ tên Blue-hills vào ô Name, chọn Type là Movie Clip, bấm nút OK để chấp nhận:



6.10 Bấm chọn keyframe của layer Winter.jpg:



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



6.12 Hộp thoại Convert to Symbol xuất hiện. Gõ tên Winter vào ô Name, chọn Type là Movie Clip, bấm nút OK để chấp nhận:



7. Tạo Motion Tween cho layer Water-lilies.jpg.

7.1. Bấm phím phải chuột vào keyframe của layer Water-lilies.jpg cho xuất hiện menu ngữ cảnh và chọn Create Motion Tween:



7.2 Flash tạo motion tween với thời gian mặc định là một giây, đồng thời di chuyển Playhead đến frame 24:



Bạn cần tạo keyframe cho frame 24 này. Bạn bấm phím
mũi tên đi lên (Up), kế đến bấm phím mũi tên đi xuống (Down). Flash bổ
sung một keyframe cho frame 24, đồng thời vị trí của Movie Clip vẫn
không thay đổi do đã được bù trừ ở thao tác di chuyển phím mũi tên vừa
rồi.

Bạn sẽ sử dụng tùy chọn Alpha của Color Effect để cho
Movie Clip Water-lilies chuyển tiếp từ trạng thái trong suốt (tương ứng
với Alpha=0) sang trạng thái hiện rõ hoàn toàn (tương ứng với
Alpha=100).

7.3 Giữ phím Ctrl, bấm chọn keyframe đầu của motion tween:



7.4 Bấm chọn vào Movie Clip Water-lilies trên Stage:



7.5 Chọn Alpha ở mục Style của Color Effect trên Property Inspector:



7.6 Kéo thanh trượt cho Alpha về giá trị 0:



Lúc này Movie Clip Water-lilies hoàn toàn trong suốt nên bạn nhìn thấy Movie Clip Sunset phía dưới:



7.7 Giữ phím Ctrl, bấm chọn keyframe cuối của motion tween:



Lúc này, symbol trên Stage đang ở dạng trong suốt do bị ảnh hưởng từ giá trị Alpha=0 từ keyframe 1:



7.8 Chọn lại symbol trên Stage

7.8: Kéo thanh trượt cho Alpha về giá trị 100:



Bạn thu được kết quả symbol hiện rõ nét:



7.9 Bạn sẽ giữ nguyên trạng thái hiện rõ nét này trong 2 giây. Chọn frame 72 của layer Water-lilies.jpg:



7.10 Bấm phím tắt F6 để bổ sung keyframe:



7.11 Bạn sẽ thêm 1 giây để chuyển tiếp từ ảnh này sang ảnh khác. Bấm chọn frame 96 của layer Water-lilies.jpg:



7.12 Bấm phím tắt F6 để bổ sung keyframe:



Ghi chú: keyframe tại frame 72 nhằm giúp bạn định vị dễ dàng khi di chuyển các motion tween được giới thiệu ở phần tiếp theo.

(còn tiếp)

Flash CS4 bài 19 : Áp dụng color effect để tạo slideshow (phần 2)



8. Copy motion tween sang các layer khác.

8.1. Bấm phím phải chuột vào motion tween vừa tạo ra cho xuất hiện menu ngữ cảnh và chọn Copy Motion:



8.2 Bấm phím phải chuột vào keyframe của layer Sunset.jpg cho xuất hiện menu ngữ cảnh và chọn Paste Motion:



Bạn thu được motion tween như sau:



8.3 Bấm phím phải chuột vào keyframe của layer Blue-hills.jpg cho xuất hiện menu ngữ cảnh và chọn Paste Motion:



Bạn thu được motion tween như sau:



8.4 Bấm phím phải chuột vào keyframe của layer Winter.jpg cho xuất hiện menu ngữ cảnh và chọn Paste Motion:



Bạn thu được motion tween như sau:



9. Di chuyển cho các motion tween lệch pha nhau.

Như đã đề cập ở trên, bạn sẽ cho chuyển tiếp từ ảnh cũ
sang ảnh mới trong một giây. Bạn sẽ di chuyển các motion tween ở các
layer sao cho giây đầu của motion tween mới trùng với giây cuối của
motion tween cũ.

9.1. Bấm chọn motion tween của layer Winter.jpg và di chuyển sang phải một frame:



Nhả chuột ra bạn thu được như sau:



Mục đích của việc để trống một keyframe đầu tiên là để bổ sung một Movie Clip làm Preloader để play khi file đang được tải từ mạng vào máy của người xem (xem thêm phần Tìm hiểu về Preloader ở cuối bài).

9.2 Chọn motion tween của layer Blue-hills.jpg:



9.3 Kéo motion tween này sang phải sao cho keyframe
đầu của motion tween này trùng với keyframe áp chót của motion tween
trên layer Winter.jpg:



Nhả chuột ra bạn thu được như sau:



9.4 Chọn motion tween của layer Sunset.jpg:



9.5 Kéo motion tween này sang phải sao cho keyframe
đầu của motion tween này trùng với keyframe áp chót của motion tween
trên layer Blue-hills.jpg:



Nhả chuột ra bạn thu được như sau:



9.6 Chọn motion tween của layer Water-lilies.jpg:



9.7 Kéo motion tween này sang phải sao cho keyframe
đầu của motion tween này trùng với keyframe áp chót của motion tween
trên layer Sunset.jpg:



Nhả chuột ra bạn thu được như sau:



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

Nhận xét: Tấm ảnh cuối có thời gian chờ nhiều hơn một giây trước khi tấm ảnh đầu xuất hiện trở lại. Ngoài ra, tấm ảnh đầu xuất hiện mà không có sự chuyển tiếp từ tấm ảnh cuối. Bạn cần dời các frame của giây cuối cùng của tấm ảnh cuối đến phần đầu của Timeline để tạo sự chuyển tiếp này.

10. Chuyển các frame của giây cuối về phần đầu của Timeline.

10.1 Giữ phím Ctrl, bấm chọn frame 287 và kéo chuột đến frame 310, các frame này được chọn:



10.2 Bấm phím phải chuột vào vùng các frame được chọn cho xuất hiện menu ngữ cảnh và chọn Cut Frames:



Các frame được đưa vào Clipboard để chuẩn bị chuyển về
phần đầu Timeline. Tuy nhiên các frame trắng vẫn còn tồn tại. Bạn cần
xóa hẳn các frame trắng này.



10.3 Bấm phím phải chuột vào vùng các frame được chọn cho xuất hiện menu ngữ cảnh và chọn Remove Frames



Các frame trắng được xóa khỏi Timeline:



10.4 Bạn di chuyển về phần đầu của Timeline. Lúc này
layer Water-lilies.jpg đang được chọn (bên cạnh layer có cây bút chì).
Bấm chuột vào nút New Layer để bổ sung thêm một layer:



Flash bổ sung Layer 6 vào Timeline với số frame trải dài đến cuối Timeline:



10.5 Bấm chọn Layer 6, toàn bộ các frame của layer này được chọn:



10.6 Bấm phím phải chuột vào frame 1 của Layer 6 cho xuất hiện menu ngữ cảnh và chọn Paste Frames:



Bạn thu được một motion tween với 24 frame, đồng thời Layer 6 được tự động đổi tên thành Water-lilies.jpg:



10.7 Bạn chọn motion tween vừa thu được và di chuyển sang phải một frame:



10.8 Bạn kéo layer Water-lilies.jpg vừa thu được và thả xuống phía dưới layer Winter.jpg:



Thu được kết quả như sau:



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

11. Tạo preloader (xem thêm phần Tìm hiểu về Preloader ở cuối bài).

Nếu bạn tạo slideshow cho các tấm ảnh có kích thước
nhỏ, có thể bạn không cần sử dụng preloader. Trong trường hợp đó, bạn
có thể không cần sử dụng keyframe trắng đầu tiên trên Timeline. Bạn gỡ
bỏ frame trắng này bằng cách chọn frame 1 trên Timeline (bấm vào số 1,
nơi đánh dấu số frame trên Timeline) và bấm phím tắt Shift+F5.



Nếu bạn tạo slideshow cho các tấm ảnh có kích thước
lớn, bạn cần tạo preloader để thông báo tiến trình tải slideshow về máy
người xem. Lúc đó keyframe trắng đầu tiên trên Timeline được sử dụng để
chứa preloader này. Preloader được thực hiện qua các bước như sau:

11.1 Bấm đúp vào Layer 1 và đổi tên thành preloader:



11.2 Chọn frame 1 của layer preloader:



11.3 Lúc này, Stage chưa có gì. Bấm chọn Rectangle Tool và giữ vài giây cho menu phụ xuất hiện và chọn Oval Tool:



11.4 Bấm vào ô Fill color để chọn màu ruột:



11.5 Bảng màu xuất hiện, chọn màu ruột là không màu (No color):



11.6 Bấm vào ô Stroke color để chọn màu viền:



11.7 Bảng màu xuất hiện, bạn chọn màu linear gradient ở góc dưới bên trái:



11.8 Gõ số 2 vào ô Stroke height:



11.9 Đưa chuột vào Stage, giữ phím Shift và vẽ một vòng tròn:



Nhả chuột ra bạn thu được vòng tròn có màu tô chuyển:



11.10 Chọn Selection Tool:



11.11 Chọn vòng tròn vừa vẽ, vòng tròn được chọn với các hạt li ti xuất hiện:



11.12 Chọn Edit > Cut từ menu:



11.13 Chọn Edit > Paste in Center từ menu:



Bạn thu được vòng tròn ở giữa Stage:



11.14 Lúc này vòng tròn đang được chọn. Bạn chọn Modify > Convert to Symbol… từ menu (Hoặc phím tắt F8):



11.15 Hộp thoại Convert to Symbol xuất hiện. Gõ tên
vong tron (vòng tròn) vào ô Name, chọn Type là Graphic. Registration ở
giữa. Bấm OK để đóng hộp thoại lại:



11.16 Lúc này Graphic symbol đang được chọn. Bạn chọn Modify > Convert to Symbol… từ menu (hoặc phím tắt F8):



11.17 Hộp thoại Convert to Symbol xuất hiện. Gõ tên
preloader vào ô Name, chọn Type là Movie Clip. Registration ở giữa. Bấm
OK để đóng hộp thoại lại

11.18 Bấm đúp vào Movie Clip preloader để mở Timeline của Movie Clip ra:



11.19 Trên Stage đang là Graphic symbol vong tron. Đưa chuột vào Graphic symbol vong tron,
khi thấy phía dưới chuột xuất hiện mũi tên bốn chiều, bấm phím phải
chuột cho xuất hiện menu ngữ cảnh và chọn Create Motion Tween:



11.20 Flash tạo Motion Tween với thời gian mặc định là
một giây, đồng thời di chuyển Playhead đến frame 24 cho bạn. Bạn bấm
chuột vào vùng có motion tween:



11.21 Trên Property Inspector, bạn gõ số 1 vào mục Rotate:



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



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



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 016_slideshow.swf như sau:



11.23 Để thấy được hoạt động của preloader, bạn chọn
View > Simulate Download từ menu của Flash Player đang chạy (không
phải từ menu lúc đang biên soạn Flash document; hoặc phím tắt
Ctrl+Enter).



Lúc này bạn sẽ nhìn thấy vòng tròn xoay liên tục, báo hiệu tác phẩm của bạn đang được tải về:



Sau đó một lúc thì slideshow xuất hiện:



(còn tiếp)

Flash CS4 bài 19 : Áp dụng color effect để tạo slideshow (Phần 3)


12. Bỏ qua keyframe đầu khi đã tải về đầy đủ.

Khi Flash play đến frame cuối và quay lại frame đầu, bạn thấy màn ảnh hiện lên preloader
rất nhanh. Điều này có thể gây khó chịu cho người xem. Bạn có thể sử
dụng một dòng lệnh actionscript đơn giản để khắc phục điều này.
(Actionscript sẽ được giới thiệu chi tiết ở các bài thực hành sau này).

12.1 Lúc này layer preloader đang được chọn. Bấm vào nút New Layer để bổ sung layer mới:



12.2 Flash bổ sung Layer 7 vào Timeline. Bấm đúp vào và đổi tên thành actions:



12.3 Di chuyển đến frame cuối. Bấm chọn frame cuối (frame 286) của layer actions:



12.4 Bấm phím tắt F6 để bổ sung keyframe:



12.5 Bấm phím phải chuột vào frame 286 của layer actions cho xuất hiện menu ngữ cảnh và chọn Actions:



12.6 Action Panel xuất hiện. Bạn gỏ
vào dòng chữ gotoAndPlay(2); như hình minh họa (chú ý không có khoảng
trắng ở giữa và viết đúng chữ hoa và chữ thường). Câu lệnh này yêu cầu
Flash di chuyển đến frame số 2 và play:



Bấm vào dấu x ở góc trên bên phải để đóng Actions Panel lại.

Trên Timeline tại keyframe 286 bạn thấy có một chữ a nhỏ. Đó là dấu hiệu cho biết có action tại frame này:



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

Trong bài thực hành, bài đã tạo được slideshow cho bốn
ảnh. Bạn có thể thực hiện theo cách tương tự để áp dụng cho nhiều ảnh
hơn.

Một vấn đề phát sinh: nếu muốn tạo slideshow cho một
bộ sưu tập mới có phải làm lại từ đầu hay không? Hoàn toàn không. Bạn
có thể tạo một slideshow cho bộ sưu tập mới bằng cách thay thế các ảnh
trong Library như được hướng dẫn ở phần tiếp theo sau đây.

13. Cập nhật ảnh cho slideshow.

13.1 Chọn Library Panel:



Nội dung của Libray hiện ra:



13.2 Bạn có thể tạo các folder để sắp xếp Library theo các nhóm đối tượng để dễ quản lý. Bạn bấm vào nút New Folder phía dưới Library để bổ sung một folder:



Flash bổ sung folder với tên mặc định là untitled folder 1:



13.3 Bạn đổi tên folder thành bitmaps:



13.4 Bạn sẽ chuyển các ảnh vào folder này. Giữ phím Ctrl, bạn bấm chọn lần lượt vào các tấm ảnh, các ảnh được chọn sẽ có màu đậm hơn trong Library:



13.5 Rê chuột đến một trong các ảnh đã được chọn:



13.6 Kéo chuột về phía folder bitmaps. Khi chuột đã đến folder bitmaps, folder sẽ đổi màu như hình minh họa:



Nhả chuột ra, các ảnh đã được chuyển vào folder bitmaps:



13.7 Bấm vào hình tam giác bên trái folder để mở nội
dung folder ra, các ảnh lại xuất hiện với biểu tượng nằm dịch sang phải
một chút so với biểu tượng của các symbol khác:



13.8 Bấm đúp vào biểu tượng bitmap của ảnh tên Blue-hills.jpg:



13.9 Hộp thoại Bitmap Properties xuất hiện (Xem thêm phần Tìm hiểu về Bitmap Properties ở cuối bài). Bấm vào nút Import…:



13.10 Hộp thoại Import Bitmap hiện ra. Di chuyển đến nơi chứa ảnh cần import. Chọn ảnh Lago_Lacar.jpg (đính kèm theo bài mẫu) và bấm nút Open:



Ảnh mới được đưa vào thay thế ảnh cũ. Tuy nhiên tên ảnh vẫn không đổi:



13.11 Bạn đổi tên ảnh thành Lago_Lacar.jpg. Bấm OK để đóng hộp thoại lại:



Ảnh mới và tên ảnh được cập nhật trong Library:



13.12 Thực hiện theo các bước trên đây để thay mới
toàn bộ các ảnh trong slideshow, bạn thu được slideshow cho bộ sưu tập
ảnh mới. Chọn File >Save as… từ menu để lưu file với tên gọi tương ứng với bộ sưu tập mới của bạn.

* Bài tập gợi ý:

* Đối với mỗi Movie Clip chứa ảnh, bạn bổ sung một layer đặt tên thành text. Sử dụng Text Tool để viết một dòng chữ ngắn phía dưới để mô tả nội dung ảnh.

(còn tiếp)

Flash CS4 bài 19 : Áp dụng color effect để tạo slideshow( phần 4 )


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


Xử lý ảnh bằng Photoshop trước khi import vào Flash.

Thông thường, các ảnh chụp có kích thước lớn. Nếu bạn import
trực tiếp vào Flash để tạo slideshow sẽ làm tác phẩm của bạn có kích
thước lớn, gây khó khăn cho người xem vì phải chờ trình duyệt tải về.

Có nhiều cách để làm giảm kích thước ảnh. Trong bài này, bạn sử dụng Photoshop CS4 để thực hiện.

Sau khi đã chạy chương trình Photoshop CS4, bạn chọn File > Open… từ menu để mở ảnh cần xử lý:



Hộp thoại Open xuất hiện. Bạn chuyển đến vị trí file ảnh cần xử lý, bấm chọn file (ví dụ Blue hills.jpg) và bấm nút Open:



File này có kích thước lớn. Để làm giảm kích thước bạn chọn Image > Image Size… từ menu:



Hộp thoại Image Size xuất hiện:



Bạn chỉnh lại thông số như sau: gỏ giá trị 320 vào ô Width, lúc này giá trị ô Height sẽ thay đổi theo vì mục Constrain Proportions đang được chọn. Nếu muốn thay đổi độc lập các giá trị này, bạn bỏ chọn mục Constrain Proportions. Ở mục Resample Image, bạn bấm cho menu xổ xuống và chọn Bicubic Sharper (best for reduction) (Bạn chọn mục này để giúp ảnh sắc nét hơn khi giảm kích thước):



Bạn thiết lập thông số mới cho ảnh xong và bấm OK để đóng hộp thoại:



Tiếp theo, bạn sẽ tối ưu hóa và lưu ảnh. Bạn chọn File > Save for Web & Devices từ menu:



Hộp thoại Save for Web & Devices xuất hiện:



Bạn chọn thẻ 2 up để thiết lập chế độ xem 2 ảnh một lúc: một ảnh gốc và một ảnh được tối ưu hóa:



Bạn thu được chế độ xem hai ảnh: ảnh trên là ảnh gốc
với kích thước 225K, ảnh dưới được tối ưu hóa dạng file gif với kích
thước 42.13K:



Bạn thay đổi dạng file bằng cách bấm vào menu xổ xuống bên phải, chọn dạng mới là JPEG:



Dạng mới được chọn là JPEG với chất lượng thiết lập là High, Quality là 60. Ô Optimized được chọn như hình bên dưới.



(Bạn có thể thử thay đổi các thông số và xem ảnh được cập nhật trước khi chọn các thông số bạn ưng ý)

Để lưu ảnh với các thông số được thiết lập. Bạn bấm nút Save:



Hộp thoại Save Optimized As xuất hiện. Di chuyển đến folder cần lưu ảnh, đặt tên file là Water-lilies, ở mục Save as type bạn chọn Images Only (*.jpg) và bấm nút Save:



Kết quả bạn thu được file ảnh có kích thước nhỏ để import vào Flash:



Sau khi xử lý xong, chọn File > Close từ menu để đóng file lại:



Photoshop hỏi bạn có muốn lưu lại không. Bấm nút No để không làm thay đổi file gốc:



Đây là cách làm thủ công, có thể áp dụng nếu bộ sưu tập của bạn không có nhiều ảnh.

Bạn có thể sử dụng Action để lưu lại các bước thực hiện vừa nêu và áp dụng cho hàng loạt ảnh một lúc.

Mời bạn xem phần sử dụng Action để xử lý hàng loạt ảnh ở bài thực hành tiếp theo.

Flash CS4 - Bài 19 : Tìm hiểu về Preloader ( phần 5 )




Áp dụng color effect để tạo slideshow (Phần lý thuyết bổ sung cho bài thực hành).

Nếu bạn truy cập Internet ở máy sử dụng đường truyền
có tốc độ chậm, thông thường bạn phải chờ một lúc mới thấy đủ nội dung
của trang web cần xem. Nếu trang web có sử dụng Flash, có thể bạn chỉ
thấy một khung màu trắng xuất hiện, sau đó một lúc mới thấy được nội
dung Flash hiện lên ở khung này.

Để giúp cho người truy cập đỡ sốt ruột khi xem phải trang web có Flash mà phải chờ lâu, bạn sử dụng preloader.

Preloader thường là một Movie Clip có kích
thước thật nhỏ được đặt ở keyframe đầu của một Flash document. Do có
kích thước nhỏ nên preloader sẽ được tải về ngay và chạy ngay, trong
khi các phần khác của tác phẩm sẽ được tải dần về máy của người xem.

Trong bài thực hành trước, preloader của bạn
là một Movie Clip chứa vòng tròn xoay liên tục. Như vậy, khi khách truy
cập vào trang web chứa Flash của bạn, preloader sẽ được tải về ngay và
vòng tròn xoay liên tục để thông báo cho khách biết là tác phẩm đang
được tải về. Ưu điểm của preloader trong bài này là khách truy cập chỉ
phải chờ một lúc cho trình duyệt tải các ảnh đầu, trong lúc Flash play
các ảnh đầu thì các ảnh sau tiếp tục được tải về và play tiếp. Bạn sẽ
tạo các preloader phức tạp hơn khi thực hành các bài có sử dụng
actionscript sau này.

Khi bạn đang biên soạn Flash trên máy, do nội dung của
Flash movie thu được ở ngay trên máy bạn nên bạn chỉ thấy kết quả ngay
mà không nhìn thấy hiệu ứng của preloader:



Để thấy được hiệu ứng của preloader bạn chọn View > Simulate Download từ menu (hoặc phím tắt Ctrl+Enter):

Lưu ý: Bạn phải chọn từ menu của Flash Player lúc bạn đang xem tác phẩm chạy.



Simulate Download giúp bạn giả lập
đường truyền có tốc độ thấp để thấy được hình ảnh preloader hoạt động.
Khi đó bạn sẽ thấy vòng tròn của preloader xoay liên tục, sau đó sẽ
thấy hoạt động của slideshow:



Bạn có thể thay đổi thông số giả lập tốc độ đường truyền thông qua menu View > Download Settings. Trong ảnh minh họa, thông số đang được chọn là modem quay số loại 56K (4.7KB/s).



Ngoài các thông số giả lập tốc độ đường truyền mặc định, bạn cũng có thể tự thiết lập thông số thông qua tùy chọn Customize…. Bạn điền thông tin vào các ô tương ứng của Menu text và Bit rate rồi bấm nút OK để chấp nhận giá trị mới.



Bạn cũng có thể xem thông tin chi tiết tác phẩm thông qua mục View > Bandwidth Profiler từ menu:



Trong ví dụ này, ở ô bên trái bạn có các thông tin sau đây:

- Dim: 320x240pixels: kích thước tác phẩm của bạn tính theo pixel.

- Fr rate: 24.0 fr/sec: tốc độ hoạt động của tác phẩm 24 khung hình/ giây.

- Size: 93 KB (95865 B): kích thước file chiếm trên ổ cứng.

- Duration: 286 fr (11.9s): độ dài tác phẩm tính theo frame và giây.

- Preload: 332 fr(13.8s): tổng thời gian bạn phải chờ
đến khi Flash bắt đầu play. Giá trị này thay đổi phụ thuộc vào tốc độ
giả lập mà bạn chọn.

- Bandwidth: 4800B/s (200B/fr): tốc độ đường truyền đang giả lập.

- Frame: 1: frame hiện hành

- Loaded:46.9 % (0 frames): % dữ liệu được tải về, giá trị này sẽ thay đổi liên tục khi xem.

Ở khung bên phải bạn thấy được kích thước của từng
frame. Ví dụ như frame 1 có kích thước khoảng 2KB, frame 2 có kích
thước khoảng 64KB. Các frame tiếp theo có kích thước rất nhỏ.

Các frame có kích thước vượt quá vạch màu đỏ sẽ bị
chậm lại khi tải về lần đầu. Trong ví dụ này, frame 2 sẽ bị chậm lại
khi tải về, kết quả là bạn thấy preloader xoay liên tục khi
Flash chạy đến đây. Sau khi tải xong, Flash chạy qua frame này đến các
frame tiếp theo sau, đồng thời tiếp tục tải các frame khác về.

Các ô màu xanh lá cây thể hiện các frame đã được tải
về. Ô này đang ở frame 1 vì Flash đang tải nội dung của frame 2 chưa
xong. Khi Flash tải xong frame nào, ô màu xanh sẽ lan tỏa đến frame đó.
Hình tam giác trên ô màu xanh chính là Playhead.
Nếu để ý, bạn sẽ thấy Playhead hoạt động đều theo tốc độ đã thiết lập.
Khi đến frame có kích thước lớn, playhead sẽ dừng lại chờ flash tải nội
dung của frame đó về. Sau đó playhead tiếp tục di chuyển theo tốc độ đã
thiết lập trong khi các ô màu xanh lan tỏa rất nhanh sang phải.



Nếu bạn không nhìn thấy từng frame như trong hình minh họa ở trên. Đó là do tùy chọn Streaming Graph đã được chọn trước đó: (chọn View > Streaming Graph từ menu)



Như vậy để đảm bảo nhìn thấy kích thước từng frame, bạn phải chọn View > Frame By Frame Graph từ menu:



Tìm hiểu về Bitmap Properties

Khi bạn bấm đúp vào biểu tượng bitmap ở Library, hôp thoại Bitmap Properties xuất hiện:

Bên trái hộp thoại là khung Preview của ảnh. Nếu ảnh có kích cỡ lớn, khi bạn đưa chuột vào khung Preview, chuột biến thành bàn tay và bạn có thể kéo chuột để chuyển đến vùng ảnh cần xem.

Ở giữa là khu vực chứa thông tin về ảnh:

Ô trên cùng là tên ảnh trong Library, bạn có thể đổi tên cho phù hợp với nội dung tấm ảnh.

Phía dưới ô tên là đường dẫn chứa ảnh.

Tiếp đến là ngày cập nhật, kích thước ảnh.

Mục Allow smoothing:
chọn mục này giúp ảnh trông mượt hơn. Thông thường nếu bạn không thay
đổi kích cỡ ảnh (scale) thì không cần chọn mục này. Nếu có thay đổi
kích cỡ để tạo animation thì nên chọn mục này để giúp làm mượt các vùng
bị răng cưa do hiệu ứng scale.

Mục Compression: Chọn cách nén ảnh. Có hai phương án:

1. Photo (JPEG): phương án này có các tùy chọn bổ sung cho mục chất lượng (Quality) là:

1.1 Use imported JPEG data: sử dụng chất lượng ảnh gốc, không cần nén thêm.



Nếu ảnh gốc không phải dạng JPEG thì mục này sẽ là Use publish setting:80.



1.2 Custom: thiết lập thông số nén theo ý bạn. Bạn gỏ số vào ô Custom và bấm nút Test để xem thử chất lượng ảnh ở khung Preview
bên trái. Kích thước ảnh sau khi nén được thể hiện ở dòng cuối cùng của
hộp thoại bao gồm chất lượng nén, kích thước gốc và kích thước sau khi
nén. Mục Enable deblocking chỉ xuất hiện khi
bạn chọn Custom và xuất tác phẩm cho Flash Player 10. Khi được nén cao
(gía trị tại ô Custom nhỏ) chất lượng ảnh giảm và xuất hiện các ô mờ
trong ảnh. Bạn chọn mục Enable deblocking để làm mượt các ô này.



1. Lossless (PNG/GIF): Bạn bấm chọn menu xổ xuống và chọn mục này nếu muốn áp dụng chế độ nén không suy giảm chất lượng:



Bấm nút Test để xem thử kết quả ở khung Preview và xem kích thước file sau khi nén ở dòng cuối của hộp thoại:



Bấm nút OK để chấp nhận các thông số mới.

Bấm nút Cancel để hủy bỏ các thay đổi.

Bấm nút Update để cập nhật ảnh nếu bạn đã dùng Photoshop hoặc một phần mềm đồ họa nào đó chỉnh sửa ảnh gốc.

Bấm nút Import… để sử dụng một ảnh mới thay thế cho ảnh hiện hữu (như trong bài thực hành).

Bấm nút Test để xem thử kết quả ở khung Preview.

Bấm nút Advanced để thiết lập các thông số nâng cao. (Sẽ được giới thiệu ở các bài thực hành nâng cao).

Flash CS4 - bài 20 : sử dụng Motion presets tạo slideshow (Phần 1)


Trong bài này, bạn sẽ sử dụng Motion Presets để tạo SlideShow cho một loạt ả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 17. (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 017_slideshow2.fla

4. Import một loạt ảnh vào Stage.

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



4.2 Hộp thoại Import mở ra. Di chuyển đến folder chứa các ảnh cần import. Giữ phím Ctrl, bấm chọn các file ảnh Blue-hills.jpg, Sunset.jpg, Water-lilies.jpg, Winter.jpg (các file này được đính kèm theo bài). Bấm nút Open để đóng hộp thoại lại (Xem thêm phần Xử lý ảnh bằng Photoshop trước khi import vào Flash):



Bạn thu được các tấm ảnh nằm giữa Stage:



4.3 Rê chuột vào vùng các tấm ảnh cho đến khi dưới chuột xuất hiện mũi tên bốn chiều:



4.4 Bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Distribute to Layers:



4.5 Trên Timeline bạn thu được bốn layer với
tên tương ứng của bốn tấm ảnh. Layer 1 không còn chứa đối tượng nào nên
chỉ còn keyframe trắng. Bạn tạm thời vẫn để Layer 1 ở vị trí hiện hữu
để sử dụng ở phần cuối bài thực hành:



5. Chuyển các tấm ảnh thành symbol.

5.1 Bấm chọn keyframe của layer Water-lilies.jpg:



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



5.3 Hộp thoại Convert to Symbol xuất hiện. gõ tên Water-lilies vào ô Name, chọn Type là Movie Clip, bấm nút OK để chấp nhận:



5.4 Bấm chọn keyframe của layer Sunset.jpg:



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



5.6 Hộp thoại Convert to Symbol xuất hiện. gõ tên Sunset vào ô Name, chọn Type là Movie Clip, bấm nút OK để chấp nhận:



5.7 Bấm chọn keyframe của layer Blue-hills.jpg:



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



5.9 Hộp thoại Convert to Symbol xuất hiện. gõ tên Blue-hills vào ô Name, chọn Type là Movie Clip, bấm nút OK để chấp nhận:



5.10 Bấm chọn keyframe của layer Winter.jpg:



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



5.12 Hộp thoại Convert to Symbol xuất hiện. gõ tên Winter vào ô Name, chọn Type là Movie Clip, bấm nút OK để chấp nhận:



7. Sử dụng Motion Presets cho các symbol vừa tạo ở trên.

7.1. Chọn keyframe 1 của layer Water-lilies.jpg:



7.2 Giữ phím Shift, chọn keyframe 1 của layer Winter.jpg, bạn thu được các keyframe của các layer được chọn:



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



Motion Presets Panel xuất hiện với folder Default Presets đang đóng:



7.4 Bấm chuột vào hình tam giác bên trái folder Default Presets để mở ra:



7.5 Chọn motion preset zoom-in-3D và bấm nút Apply để áp dụng cho các symbol trên từng layer đã được chọn trước đó:



7.6 Bấm vào dấu x để đóng Motion Presets Panel lại:



Bạn thu được các motion preset đã áp dụng trên các layer của Timeline:



8. Di chuyển cho các motion tween lệch pha nhau.

Các motion preset (motion tween) được chia thành bốn
giai đoạn. Bạn sẽ di chuyển các motion tween ở các layer sao cho giai
đoạn đầu của motion tween ở một layer trùng với giai đoạn cuối của
motion tween ở một layer khác.

8.1. Bấm chọn motion tween của layer Winter.jpg và di chuyển sang phải một frame:



Nhả chuột ra bạn thu được như sau:



Mục đích của việc để trống một keyframe đầu tiên là để
bổ sung một Movie Clip làm Preloader để play khi file đang được tải từ
mạng vào máy của người sử dụng.

8.2 Chọn motion tween của layer Blue-hills.jpg:



8.3 Kéo motion tween này sang phải sao cho keyframe
đầu của motion tween này trùng với keyframe áp chót của motion tween
trên layer Winter.jpg:



Nhả chuột ra bạn thu được như sau:



8.4 Chọn motion tween của layer Sunset.jpg:



8.5 Kéo motion tween này sang phải sao cho keyframe
đầu của motion tween này trùng với keyframe áp chót của motion tween
trên layer Blue-hills.jpg:



Nhả chuột ra bạn thu được như sau:



8.6 Chọn motion tween của layer Water-lilies.jpg:



8.7 Kéo motion tween này sang phải sao cho keyframe
đầu của motion tween này trùng với keyframe áp chót của motion tween
trên layer Sunset.jpg:



Nhả chuột ra bạn thu được như sau:



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

Nhận xét: Tấm ảnh cuối có thời gian chờ nhiều hơn nửa
giây (14 frame) trước khi tấm ảnh đầu xuất hiện trở lại. Ngoài ra, tấm
ảnh đầu xuất hiện mà không có sự chuyển tiếp từ tấm ảnh cuối. Bạn cần
dời 14 frame cuối của tấm ảnh cuối đến phần đầu của Timeline để tạo sự
chuyển tiếp này.

9. Chuyển 14 frame cuối về phần đầu của Timeline.

9.1 Giữ phím Ctrl, bấm chọn frame 183 và kéo chuột đến frame 196, các frame này được chọn:



9.2 Bấm phím phải chuột vào vùng các frame được chọn cho xuất hiện menu ngữ cảnh và chọn Cut Frames:



Các frame được đưa vào Clipboard để chuẩn bị chuyển về
phần đầu Timeline. Tuy nhiên các frame trắng vẫn còn tồn tại. Bạn cần
xóa hẳn các frame trắng này.



9.3 Bấm phím phải chuột vào vùng các frame được chọn cho xuất hiện menu ngữ cảnh và chọn Remove Frames.



Các frame trắng được xóa khỏi Timeline:



9.4 Bạn di chuyển về phần đầu của Timeline. Lúc này
layer Water-lilies.jpg đang được chọn (bên cạnh layer có cây bút chì).
Bấm chuột vào nút New Layer để bổ sung thêm một layer:



Flash bổ sung Layer 6 vào Timeline với số frame trãi dài đến cuối Timeline:



9.5 Bấm chọn Layer 6, toàn bộ các frame của layer này được chọn:



9.6 Bấm phím phải chuột vào frame 1 của Layer 6 cho xuất hiện menu ngữ cảnh và chọn Paste Frames:



Bạn thu được một motion tween với 14 frame, đồng thời Layer 6 được tự động đổi tên thành Water-lilies.jpg:



9.7 Bạn chọn motion tween vừa thu được và di chuyển sang phải một frame:



9.8 Bạn kéo layer Water-lilies.jpg vừa thu được và thả xuống phía dưới layer Winter.jpg:



Thu được kết quả như sau:



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