TTO – 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.

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:

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.

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

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.

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ỡ 550×400 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:

———————————————————————————

Tuoitre.com.vn

Hai công cụ này đều giúp bạn tạo ra một website chuyên nghiệp nhưng bản thân ở mỗi phần mềm lại có những thế mạnh và yếu điểm riêng. Do đó, bài viết sau sẽ giới thiệu từng đặc điểm của hai phần mềm để các bạn có dịp so sánh với nhu cầu sử dụng của bản thân.

*Giao diện:

Điểm dễ nhận thấy đầu tiên ở hai phần mềm này là bạn cần thay đổi độ phân giải của màn hình lên mức 1024×768 hoặc cao hơn, bởi vì nếu ở độ phân giải thấp hơn thì các nút lệnh có thể bị che khuất (đối với IW) hoặc không cài đặt được chương trình (đối với SW). Kế đến phải kể đến điểm mạnh của phần mềm IW đối với những bạn lần đầu tiên làm quen với các phần mềm thiết kế website là cửa sổ  thuật sĩ hướng dẫn người dùng theo từng bước rất khoa học. Việc tạo web bằng IW sẽ trải qua năm bước từ công đoạn khởi tạo đến xuất khẩu website lên Internet: General Settings-những thiết lập chung, Plan Website-tạo sơ đồ web, Create Pages-thiết kế trang, Advanced Settings-những thiết lập nâng cao, Export-xuất ra sản phẩm.

Tuy nhiên, nhiều bạn sẽ cảm thấy phiền phức với IW khi mỗi lần muốn xem sản phẩm của mình phải nhấn vào nút Test (phía trên góc phải cửa sổ) và chờ chương trình làm việc. Khác hẳn với IW thì SW có một giao diện truyền thống với hệ thống các menu, các thanh công cụ (tương tự như bộ ứng dụng Microsoft Office mà bạn thường dùng) nên có thể nói phần mềm sẽ thích hợp hơn đối với những bạn thành thạo những thao tác trên máy tính. Nói như thế không có nghĩa các bạn mới quen sẽ không sử dụng được SW, bởi vì cửa sổ làm việc giúp bạn tương tác trực tiếp với các đối tượng của website cần thiết kế thông qua thanh tác vụ (Navigation Pane).
(Hình 2)

*Các tính năng chính

Ở phần mềm IW, sau khi khai báo các thông tin đầu tiên về website:Website Title-tiêu đề, Website Author-tên bạn hay tên công ty, Website Address (URL)-địa chỉ web, Website Description-mô tả ngắn về trang web, Content Language- ngôn ngữ trong web, Website Icon-biểu tượng của web (dạng ico, bmp), bạn cần chọn trong thư viện các mẫu website đã thiết kế sẵn (Choose Template Style) một mẫu sao cho phù hợp với nội dung mà website hướng đến. Nhưng khả năng tùy biến các giao diện web trong thư viện chưa cao, bạn chỉ được phép chèn thêm các đoạn văn bản, các hiệu ứng Flash động tại Edit Template Graphic.

Việc xây dựng nội dung cho từng trang của website được thực hiện bằng phương pháp kéo thả (drag and drop) các đối tượng ở khung Object bên phải vào khung bên trái, rồi nhấn Object Content (biểu tượng cây bút) để thêm vào nội dung cho đối tượng. Tại bước 4, giúp bạn thiết lập một số thông tin font, cỡ chữ, màu nền, màu liên kết khi đưa chuột đến, tạo ra trang chào mừng (Welcome Page), tạo ra các khu vực dành riêng cho quản trị (Reserved Area),…

Còn ở phần mềm SW,  không có cửa sổ thuật sĩ nên bạn phải tự đi tìm những công cụ, tính năng thiết kế. Ở cửa sổ đầu tiên, bạn chọn hình thức thứ ba (…work on layout templates) để làm việc với các mẫu website. Khả năng tùy biến mẫu Templates ở SW lớn hơn nhiều so với IW vì bạn được tương tác trực quan lên mẫu website. Nhưng khi so sánh về số lượng mẫu thì SW lại thu xa IW về cả số lượng lẫn chất lượng cũng như cách sắp xếp vào các chủ đề. Khi làm việc xong với mẫu thì bạn vào cửa sổ StudioLine Explorer –Layout Templates kéo-thả mẫu đó vào từng trang (nhấn Apply ở cửa sổ hiện ra) rồi hãy xây dựng nội dung cụ thể cho các trang ấy.   Cả hai phần mềm IW và SW đều hỗ trợ tốt tiếng Việt ở các font VNI tương ứng với bảng mã VNI Windows (bộ gõ Unikey); cũng như hỗ trợ các đoạn code HTML.   Việc đưa website đã thiết kế xong lên Internet thì cả hai phần mềm đều có: IW ở bước 5 chọn Upload to the Internet, SW chọn menu Publish> Profile. Bạn đăng kí cho mình một tài khoản FTP để được cung cấp các thông tin về FTP Address, User name, Password rồi điền vào. Ở IW thì việc upload dữ liệu tỏ ra nhanh chóng hơn ở SW.

Bảng so sánh:

*Kết luận:   Chọn một phần mềm thiết kế “ngôi nhà” của mình trên Internet tương đối quan trọng và khó quyết định, nó phụ thuộc vào rất nhiều yếu tố như: độ thân thiện của giao diện phần mềm, các tính năng được sắp xếp khoa học, nhiều tính năng khác giúp tùy biến giao diện web nhanh chóng,…Do đó, tùy vào vốn kiến thức tin học của từng bạn mà chọn phần mềm IW hoặc SW để phục vụ nhu cầu thiết kế website. Chúc các bạn thành công!
Bùi Thanh Liêm XHTT

Làm cách nào mà bạn có thể tránh khỏi việc tuyển dụng một nhà thiết kế hoặc trang trí xây dựng một trang web có vẻ mong manh như vậy? Sau đây là một số câu hỏi bạn có thể hỏi cùng những ý kiến phản hồi giúp bạn giải quyết vấn đề.

1. Những tiêu chuẩn nào cho trang web mà bạn cần hướng tới.

Đó là một câu hỏi lớn làm bối rối những người nào chưa có những tiêu chuẩn rõ ràng. Tiêu chuẩn của một trang web là gì? Đó là cách trang trí và tạo dụng hệ thống trang web cho phép trang web có thể lớn mạnh cả về công nghệ cũng như số người truy cập. Những ngôn ngữ và công nghệ thường sử dụng là:

• CSS ( Casacading Style Sheets): Một kỹ thuật cho phép đưa vào trang web : fonts, màu sắc, và không gian cho trang webs.

• XHTML (Extensible Hypertext Markup Language) một dạng ngôn ngữ lập trình có chiều sâu như HTML, ngoài ra còn hỗ trợ cú pháp XML.

• ECMA Scripts: Phiên bản tiêu chuẩn của JavaScript dùng cho phần lớn các trang web.

Bạn không cần phải biết nhiều về những ngôn ngữ lập trình; chỉ cần biết về những tiêu chuẩn cần phải được giải quyết.

Cách đơn giản để bạn liên kết các câu hỏi này chính là luôn nhớ rằng, những người sử dụng internet không bao giờ dùng chung một hệ điều hành và công cụ lướt web. Thiết kế và phát triển những chuẩn mực riêng của trang web cho phép bạn thay đổi và vận hành chúng theo cách cần thiết trên các phương diện khác nhau.

2. Có phải họ thiết kế trang web để có thể được tìm thấy dễ dàng bởi các công cụ tìm kiếm trực tuyến?

Chắc chắn rằng ngày nay mọi người đều muốn rằng tất cả các trang web đều được hiển thị trên các công cụ tìm kiếm. Sử dụng những công cụ tìm kiếm quá phức tạp không phải là điều bạn mong đợi từ các nhà thiết kế và phát triển của mình; tuy nhiên, việc thiết kế và các đoạn mã như vậy sẽ có tác dụng một khi bạn thật sự có những hiểu biết đầy đủ về chúng. Khi bạn phỏng vấn nhà thiết kế, đó chính là câu hỏi để nhận biết rắng người bạn đang nói chuyện có phù hợp với hình tượng và cách vận hảnh của các công cụ tìm kiếm .Sau đây là một vài công cụ có ảnh hưởng lớn đến sự vận hành của SEO (Tối ưu hóa công cụ tìm kiếm).

• CSS (Cascading Style Sheets): Trang trí một trang web để đạt được hiệu quả cao nhất trong tìm kiếm có nghĩa là phải giảm thiểu số lượng các đoạn mã của nó và thay bằng các dòng text, tạo điều kiện thuận lợi cho các công cụ tìm kiếm.

• Script files: Khi bạn sử dụng những công cụ năng động như thư viện hình ảnh hoặc sử dụng mouse-over menu, thì thông thường chúng được tạo dựng nhờ JavaScript. Để hướng tới hình tượng SEO thích hợp, những tập tin nên được thiết kế dưới dạng các “trang văn bản” thay vì những cú pháp trên trang web.

• Web page content: Văn bản và nội dung của chúng nên được thể hiện trên các trang nhiều nhất có thể, nó còn có thể bao gồm cả mục lục trang web của bạn. Có những cách để những dòng văn bản được hiện ra trước tầm mắt mà không cần những nhà trang trí phải đưa chúng vào tranh ảnh. Hình ảnh hàm chứa những câu chữ thường không được đưa vào kết quả tìm kiếm.

Nếu việc tối ưu hóa công cụ tìm kiếm là một chiến thuật bạn luôn muốn hướng tới, vậy hãy luôn chắc chắn rằng website của bạn được xây dựng dựa trên tiêu chí này.

3. Họ đã lên kế hoạch để thay đổi và lớn mạnh như thế nào?

Một trong những bài học đau đầu nhất cần phải học chính là làm sao khi xây dựng trang web trong ngày hôm nay mà nó vẫn có điều kiện để vào ngày mai. Bỗng dưng bạn được biết là cần phải bắt đầu mọi thứ từ đầu chính là điều mà tất cả các nhà kinh doanh đều sợ hãi. Vậy trước khi bắt đầu, hãy tự hỏi: “Công nghệ mà bạn đang sử dụng có cho phép sản phẩm này lớn mạnh hoặc thêm nhiều chức năng khác không?” Bạn có thể còn muốn nhiều hơn nữa và còn suy nghĩ cả về những công cụ sẽ cần phải thêm sau này. Bạn cũng có thể để nghị người trang trí và thiết kế web cung cấp những danh sách công cụ cần thiết mà họ có dành cho những trang web tương tự của bạn. Điều này cho phép bạn không những có thể tìm hiểu được những công nghệ của đối thủ, mở mang đầu óc chính bản thân bạn, mà còn xúc tiến những ý tưởng của bạn.

4. Làm cách nào để họ kiểm tra công việc của mình?

Như tôi đã để cập bên trên, không phải tất cả khách hàng đều dùng chung một loại công nghệ. Nhưng để chắc chắn rằng mọi việc được tổ chức đúng đắn, nhà thiết kế web sẽ cần phải kiểm tra lại công trình của mình. Vấn đề này có vẻ tầm thường, nhưng bạn sẽ thật ngạc nhiên khi biết rằng có bao nhiêu công ty chuyên kiểm tra lại những công cụ lướt web. Tôi khuyên bạn nên hỏi một cách chắc chắn về công cụ lướt web và những phiên bản họ đã sử dụng trong tiến trình nghiên cứu. Nếu bạn đang phát triển một hệ thống mạng xã hội, một cộng đồng trực tuyến hoặc trang web giao dịch điện tử, việc test lại là vô cùng quan trọng đối với sự thành công của bạn. Những cổng giao dịch an toàn cần phải được kiểm tra ngoài thực nghiệm. Và phải bảo đảm rằng những gì bạn làm được những gì mình đã công bố và giải quyết được tất cả mọi tình huống sau khi trang web đi vào hoạt động.

5.Làm cách nào để họ giải quyết các yêu cầu trợ giúp.

Sau khi một trang web chính thức được vận hành, những sai sót kỹ thuật phát sinh là điều không thể tránh khỏi. Câu hỏi bạn muốn trả lời trước khi đặt bút ký vào bản hợp đồng chính là làm cách nào để có thể giải quyết vấn đề hỗ trợ kỹ thuật và sửa lỗi cho trang web? Mỗi công ty đều có cách giải quyết của riêng mình, vì vậy hãy thật cẩn thận vào cách mà họ cam kết.

Xây dựng một trang web phụ thuộc vào mục đích bạn muốn, điều đó có vẻ rất giống như chơi trò chơi xếp hình. Chìa khó của thành công chính là tìm ra được đối tác thích hợp, những người hiểu được miếng ghép tiếp theo bạn cần cho công ty mình là gì.

TTO – 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ề 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.

Theo Tuoitre.com.vn

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.

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

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

GV TRƯƠNG VĂN NĂNG

Công ty TNHH Khải Thiên (KTC Co., Ltd) – Tuoitre.com.vn

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)

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,024×768 với card màn hình 16-bit (khuyến cáo sử dụng độ phân giải 1,280×800)

* Ổ đĩ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,024×768 với card màn hình 16-bit (khuyến cáo sử dụng độ phân giải 1,280×800)

* Ổ đĩ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 *