Tài liệu Giáo trình SwishMax cơ bản doc

Object trên Timeline: - Nút chuyển Scene : khi trong cây thư object bảng Outlinel tài liệu swshmax gọi là Outline panel ta tạo ra nhiều Scene thì nút chuyển scene này sẽ xuất hiện, cho

Giáo trình SwishMax cơ bản

Chương 1 - Giao diện (layout)

SM - Tên gọi các Tab-Panel và các thuộc tính của Object

trước tiên tôi muốn các bạn có

khái niệm về tên gọi của các object Hình bên dưới đây giúp các bạn hiểu hơn về

tên gọi và kí hiệu của các object như Scene, Movie Clip, Text , Shape, Group, Button.

Lưu ý: 1 MOVIE

chứa nhiều Scene 1 Scene chứa nhiều

MovieClip

Sau khi có khái niệm về object

(OB) , chúng ta bắt đầu làm quen với tên gọi các vùng trên giao diện của SM

1 Hệ thống MAINMENU:

1.1/ File menu:

1.2/ Edit menu:

1.3/ View menu

1.4/ Insert menu

1.5/ Modify menu

1.6/ Control menu

1.7/ Tool menu

1.8/ Window menu

1.9/ Help menu

2 Hệ thống TOOLBARS:

2.1/ Nhóm Standard

2.2/ Nhóm Control

2.3/ Nhóm Insert

3 Hệ thống TIMELINE:

Đây là nơi diễn hoạt kịch bản của 1 đoạn phim tôi giới thiệu chức năng các

thành phần trong Timeline panel trước , còn cách thức sử dụng Timeline

chúng ta sẽ đi sâu hơn trong phần bài tập

Hình bên trên cho ta thấy khi movieclip1 (MC1) "sổ" ra

(có hình dấu trừ phía trước) thì trên timeline xuất hiện "Add Script"

cho mình "insert code" lên nó, khi đóng MC1 lại (hình dấu Cộng) thì nó

trở thành 1 object khi đó trên timeline xuất hiện "Add Effect" cho phép

mình áp dụng hiệu ứng Như vậy ta có thể hiểu 1 MC được xem là 1 Object khi nó

không hiển thị các object bên trong nó trên cây thư mục (thể hiện dấu cộng

phía trước biểu tượng) , và nó trở thành 1 MC thực sự khi nó hiển thị hết các

object bên trong nó ở cây thư mục (thể hiện dấu trừ phía trước biểu

tượng) Và mổi tùy theo Add Script hay Add Effect mà ta có danh sách

script hay danh sách hiệu ứng của loại đó

Tuy nhiên SW cũng cho phép chúng ta viết code ngay trên đối

tượng, phần này chúng ta tìm hiểu ở phần sau

3.3/

/ Delete Script - Delete Object:

- khi Click chọn 1 object ví dụ ở đây là "shape"

thì nút xuất hiện cho phép ta xóa "shape" Vẫn chọn object "shape" ta click vào biểu tượng script có hình mủi tên

ở frame chứa script thì vạch curren frame màu đỏ sẽ xuất hiện ngay

tại frame đó, đồng thời nút "Del Script" sẽ

thay thế nút "Del object" Del Script" cho phép ta xóa 1 lệnh

script bất kỳ trên các frame (phiếm tắt là Delete)

Object trên Timeline:

- Nút chuyển Scene : khi trong cây thư object (bảng Outlinel tài liệu

swshmax gọi là Outline panel) ta tạo ra nhiều Scene thì nút chuyển scene

này sẽ xuất hiện, cho phép ta xem kịch bản, object của các đối tượng trong mỗi Scene đó.

- Quản lý kịch bản của object trong 1 movieclip:

So sánh 2 hình trên đây ta nhận thấy phần quản lý object chỉ hiển thị object

theo 1 cấp chứ không liệt kê các object như cây thư mục trong Outline panel,

nói cách khác là chỉ hiển thị các object con bên trong của 1 movieclip

thôi như hình bên trái thì Scene_2 chứa 2 object là "shape vuong"

và "movie_clip_1" (ta thấy 3 object trong phần quản lý này ) Khi lick

vào "movie_clip_1" thì "shape vuong" mất đi mà lúc này ta

thấy "movie_clip_1" nhảy lên trên cùng và hiện ra 2 object con bên

dưới là "text den" và "shape tron"

4 LAYOUT:

4.1/ Toolbox:

b/ Movieclip:

c/ Shape:

d/ Text:

e/ Button:

5.2/ Transform panen: (tọa

độ-góc xoay-độ nghiên-kích thước hiện tại của object)

và Reshape (tọa

độ-góc xoay-độ nghiên-kích thước gốc của object)

5.3: Align panel:

5.4: Outline panel:

5.5: Effect setting panel:

trên đây tôi giới thiệu 3 tab Start at, Motion và Easing,

đây là 3 tab căn bản xuất hiện ở tất cả các hiệu ứng Ngoài ra mỗi hiệu ứng còn

có những tab mang các thông số đặc trưng riêng.Các bạn phải tự khám phá điều này.

5.6: Effect browse

panel: Chứa các hiệu ứng và được phân loại thành

từng nhóm Với mỗi hiệu ứng thì panel effect sẽ có thêm các tab mang thuộc tính

đặc trưng

5.7: Component panel và Parameters panel:

5.8:

Guide panel:

5.9:

Script panel:

Chương 2 - Một số thao tác căn bản.

1 Mặt nạ của Movieclip

1/ Tạo ra 2 object như hình bên bằng công cụ Text và Rectangle

2/ Giữ Shift, click chọn 2 object hoặc dùng công cụ Selection

khoanh 2 object lại Click chuột phải để sổ menu

2.a/ Chọn Grouping => Group as Movie Clip để nhóm 2 object vào 1 object Movie Clip (MC) đặt tên là MC_1

2.b/ Chắc chắn MC_1 trong bảng Outline được chọn, Ta vào bảng Properties đánh dấu "Use Bottom object as a mask"

3/ Ctrl + Enter chạy thử Các bạn sẽ không thấy gì hết Đừng lo lắng vì đối

tượng được hiển thị (chữ Swishmax) đang nằm ngoài vùng hiển thị (là hình chữ nhật).

4/ Kéo chữ Swishmax vào trong hình chữ nhật (hình A), rồi chạy thử, kết quả

sẽ như hình B.

Vídụ 1:

- Giờ thử đổi bị trí 2 object bên trong, cho text xuống dưới, shape lên

trên, rồi chạy thử Kết quả:

=> kết luận: Mặt nạ lấy màu sắc của object trên

Vídụ 2:

1/ Lần này chúng ta thử chọn object bên dưới (là vùng hiển thị) =>

"Grouping as Movie Clip" để nhóm nó vào 1 movieclip (đặt tên là mc_matna)

như hình dưới

Kết quả là giống với ví dụ1 bên trên

2/ Tiếp tục thử tạo 1 ngôi sao phía bên trong movie clip

=> kết luận:

1 mặt nạ cần hội đủ các yếu tố sau:

- Movie Clip bao 2 object đó phải được đánh dấu "Use Bottom object as a mask".

- tối thiểu phải 2 object: 1 object nằm bên dưới (gọi là vùng hiển thị) ,

1 object nằm trên (gọi là đối tượng được hiển thị)

- Cả 2 object này phải nằm trong 1 Movie Clip.2 object này có thể là 2 MC chứa các object con bên trong

====> mở rộng tính chất:

- Mặt nạ lấy màu sắc của object trên và lấy hình dạng của object bên dưới

- Hình dạng của 1 MC được tạo bởi nhiều object con bên trong nó

1 Chuyển động của object

Trong bài học này chúng ta làm quen với các thao

tác tạo chuyển động của 1 object

Ví dụ 1:

1/ tạo 1 object hình tròn bằng cách dùng công cụ

Elipse tool (E) Giữ click giữ chuột trái + SHIFT khi kéo hình Đặt tên

là "tròn"

2/ Click vào hình tròn , trên Timeline, click

đôi vào Frame 20 Như hình bên dưới

3/ Chắc chắn rằng tên object tròn trên Timeline được chọn và vạch Timeline đang ở frame 20 có dấu tròn màu đỏ Sử dụng công cụ Transform tool (Q) , kéo object tròn từ vị trí ban đầu (tại frame 1) đến vị trí mới tại frame 20 Vậy là

ta có 1 chuyển động đơn giản

4/ Bấm tổ hợp phiếm Ctrl + T để test thử

Mở rộng:

- Di chuyển khúc hiệu ứng

Ngoài ra chúng ta có thể di chuyển "khúc" hiệu ứng này tới 10 frame, tức là tại Frame thứ 10 mới bắt đầu chuyển động Bằng cách Click + giữ chuột bất cứ đoạn nào trong khúc hiệu ứng này đưa tới vị trí mong muốn trên Timeline

- Kéo dài - thu ngắn thời gian của 1 hiệu ứng

Nếu muốn thay đổi tốc độ chuyển động nhanh chậm của object ta có thể kéo dài hay thu ngắn số frame lại Các bạn lưu ý khi đưa chuột vào vạch cuối của hiệu ứng sẽ thấy con trỏ thay đổi như hình bên dưới, lúc đó mới kéo dài ra được nha

- 1 cách nữa cũng có thể xóa - thêm 1 số lượng frame nào đó trong hiệu ứng bằng cách click + kéo chuột phải 1 đoạn trên Timeline trong vùng hiệu ứng , SW sẽ

thông báo cho bạn biết đoạn bạn kéo đó là bao nhiêu Frame

Nếu bạn muốn Insert/Delete thì ta thả chuột phải ra, ngay lập tức menu xuất

hiện, ta chọn Insert Frame hoặc Delete Frame, số Frame đó sẽ được

thêm/bớt, nói đúng hơn là số frame hiệu ứng ban đầu sẽ giãn ra /co ngắn lại

- Thay 1 hiệu ứng mới vào 1 hiệu ứng đã có rồi.

Với ví dụ trên, ta đã có 1 hình tròn và 1 hiệu ứng Move , giờ thay

thế hiệu ứng Move này bằng hiệu ứng Blur Thao tác như sau.

1/ Click chọn object cần thay đổi hiệu ứng là object tròn,

rồi click chọn hiệu ứng của object tròn trên thanh Timeline cần thay đổi sao cho đoạn hiệu ứng đó chuyển thành màu xanh đậm

2/ vào panel Effects Browser (Shift + F7) Chọn hiệu ứng

Blur.

Giờ thì bạn thấy thanh hiệu ứng Move khi nãy đã chuyển thành Blur.

- Biến đổi hình dạng object

Như phần giới thiệu toolbox chúng ta đã được xem qua, tôi có giới thiệu sơ qua về 2 công cụ này

trong bài tập ví dụ này chúng ta sẽ tìm hiểu kỷ hơn

Vídụ 2:

1/ Tạo 1 object hình chữ nhật tên "chu nhat"

2/ Vào panel Reshape, chỉnh lại kích thước gốc width:200 , height:100.

3/ Click chọn hình chữ nhật, trên Timeline, click đôi vào Frame20 dòng của object chữ nhật, Timeline sẽ xuất hiện 1 hiệu ứng Move 20 frame.

4/ Tại Frame 20 Sử dụng công cụ Selection, click chọn object hình chữ nhật , kéo hình chữ nhật qua trái 1 đoạn tùy ý (nếu muốn tịnh tiến thẳng theo 1 đường ngang thì giữ Shift khi kéo object)

5/ Cũng với công cụ Selection ta bóp chiều ngang từ bên phải vào

6/ Giời click vào frame 1 ta sẽ thấy object cũng co nhỏ chiều ngang = kích thước chiều ngang ở frame 20.

7/ giờ so sánh 2 panel Transform và Reshape

Qua bản này ta thấy kích thước gốc (Reshape) và kích thước hiện tại của object ở frame 20 (Transform) như nhau nói cách khác không có sự biến đổi trạng thái object lúc đầu là lúc cuối trong 1 hiệu ứng mặc dù hình dạng thực tế có thay đổi

so với kích thước lúc đầu ta tạo ra nó và con số 138px tương ứng với 100% có nghĩa là kích thước gốc bây giờ là 138px chứ không phải là 200px như lúc đầu ta

vẽ ra

- Rồi, giờ chúng ta tạo ra 1 object thứ 2 tên "chu nhat 2", thực hiện lại

tuần tự các bước từ 1 đến 7 với công cụ Transform ta sẽ thấy ở bước 4 sự

chuyển động giống nhau, nhưng ở bước 5 mới nhìn thì giống nhau, xong ở bước 6,

ta kiểm tra kích thước object chữ nhật tại frame 1 thì kích thước nó vẫn như lúc đầu ta tạo ra, các frame từ 2 - 20 lần lượt thay đổi kích thước ngắn dần => có

sự biến đổi trạng thái object

- So sánh 2 panel Transform và Reshape

ta thấy là kích thước gốc không hề thay đổi vẫn là 200px tương ứng 100% còn kích thước tại 1 frame nào đó trong đoạn hiệu ứng sẽ thay đổi, ví dụ như tại frame 20 là 138px

Kết luận: về chuyển động vị trí thì 2 công cụ Selection và Transform

là như nhau nhưng về biến dạng kích thước , góc xoay, độ nghiên là khác nhau,

Lưu ý: khi thay hiệu ứng làm biến dạng object thì nên

sử dung công cụ Transform, tránh sữ dụng công cụ Select.

3 Chuyển động theo 1 đường dẫn

Chuyển động theo 1 đường dẫn trong

swishmax không được tự động như trong flash mà phải do mình tự điều chỉnh lấy đển nó bám sát theo 1 đường dẫn có sẵn Đây là 1 trong những điểm yếu của SM ,

hy vọng những version sau SM sẽ bổ sung tính năng này Bây giờ chúng ta

bắt đầu vào bài tập

1/ Sử dụng công cụ Pen tool (P)

vẽ 1 đường

cong như hình dưới, đặt tên path

Việc điều chình đường cong sau khi vẽ , các bạn có thể sử dụng công cụ

Subselection tool (A)

, click vào các điểm neo rồi điều chỉnh cần của nó như trong các phần mềm đồ họa khác Giả sử bạn đã làm được điều này

2/ Tạo 1 object hình vuông kích thước tùy ý (tôi cho nó 50-50) đặt tên là

vuông.

3/ Di dùng Selection tool di chuyển sao cho tâm của hình vuông dính sát vào

nút đầu tiên của đường path

Tốt nhất là các bạn nên mở menu view => đánh dấu Snap To Object Handle

( ctrl + shift + / ) để object tự động dính vào các điểm neo

4/ Click chọn công cụ Motion Path tool

và chỉnh

lại tốc độ chuyển động của object khi chạy theo đường path

5/ Click + giữ chuột trái lên hình vuông Bắt đầu di chuyển nó tới 1 điểm thứ

2 nằm trên đường cong lúc này nó sẽ xuất hiện 1 đường thẳng giữa 2 tâm hình vuông từ vị trí đầu tiên tới vị trí mới Đừng lo lắng quá Tốt nhất là các bạn

nên tạm thời đưa hình vuông về dạng hiển thị outline bằng cách đánh dấu như hình dưới trong cây bảng Outline

Hình vuông lúc này chỉ còn có đường outline bên ngoài, thuận tiện cho ta thấy đường line màu đen nằm dưới hình vuông có trùng với tâm của hình vuông không

Trên thanh Timeline ta thấy xuất hiện 1 đoạn hiệu ứng tự động sinh ra.

6/ Tiếp theo, tại frame 4 ta lại sử dụng Motion Path tool kéo

hình vuông tới 1 vị trí khác sao cho tâm nằm trên đường line màu đen

Lúc này đường chuyển động từ điểm thứ 2 đến điểm thứ 3 đã bắt đầu cong và đường thằng lúc trước từ điểm đầu tới điểm thứ 2 đã bắt đầu cong, theo , tuy nhiên nó chưa thực sự chính xác nhưng đừng lo lắng

7/ Tiếp tục dùng Motion Path tool di chuyển hinh vuông tới điểm thứ 4, ta

lại thấy đường thứ 2 từ diểm 2 tới điểm 3 bị lệch Tại sao tôi nói các bạn không nên quan tâm điều này , vì công đoạn này của chúng ta là tạo ra các mốc chuyển động rồi sau đó chúng ta mới hiệu chỉnh các đường cong bằng cách xe dịch các điểm mốc đó

7/ Tới đây tôi nghĩ các bạn đã yên tâm là mình không làm sai, tiếp tục như vậy với các điểm mốc còn lại ta được như hình sau

Bây giờ tới vấn đề hiệu chỉnh đường chuyển động của hình vuông cho khớp với đường line

Ta thấy đường thứ nhất (điểm A => điểm B) không khớp Thể hiện sự chuyển động của đường thứ nhất này là từ frame1 (dấu mủi tên) đến frame 4 giờ ta cần chèn 1 điểm mốc giữa điểm A và điểm B cũng có nghĩa là chèn 1 effect move vào giữa frame 1 và frame 4 Thao tác như sau

8/ Chắc chắn hình vuông đang được chọn, click chọn frame 1, ngay lập tức hinh

vuông sẽ xuất hiện tại vị trí điểm A, ta bấm F5 để dịch toàn

bộ các chuyển động đi tới 1 frame

9/ Dùng công cụ Motion Path tool, chọn hình vuông di chuyển 1 đoạn tới

vị trí nằm giữa điểm A va B , tạm gọi là A2

bây giờ thì đường 1 tương đối khớp với đường line , tuy nhiên đường từ A2 => B vẫn còn sai 1 tí và trên Timeline xuất hiện 1 effect move nằm giữa frame 1 và frame 2

10/ Sử dụng selection tool , click vào điểm B, ngay lập tức trên Timeline,

vạch timeline đỏ chuyển qua frame 4,

Di chuyển điểm B xuống thấp 1 tí

Giờ thì đường từ A => B đã tương đối khớp với đường line nhờ 1 điểm A2 làm

trung gian uốn đường chuyển động tốt hơn Dựa trên nguyên tắc này các bạn có thể

thêm 1 hay nhiều điểm mốc trung gian giữa các điểm B , C, D , E , F, G còn lại

và chỉnh lại vị trí các điểm mốc này để các đường chuyển động khớp với đường

line

11/ Click vào điểm C, Timeline chuyển tới Frame 10 Sử dụng Motion Path

tool kéo hình vuông tới điểm C2 giữa C và D và các mốc khác còn lại.

12/ Giờ ctrl + enter chạy thử

(nếu không thấy file swf thì xem link này http://dieuam.info/hoi/sm-tut/chuyen ngdan/path.swf )

Nếu chưa ưng ý với tốc độ chuyển động của hình vuông tại 1 số

đoạn nào đó thì các bạn có thể kéo dài effect của đoạn đó trên Timeline

Ngoài ra nếu không thích màu xanh đơn của hình vuông, các

bạn có thể đổi màu gradial bằng cách chọn hình vuông, rồi trong Properties của object chọn Gradient

công cụ Fill Transform tool (F)

để co giãn

biên giới hạn của vùng màu

Như vậy qua các ví dụ về mặt nạ , animation tự do và chuyển

động theo đường path, và 1 số lý thuyết cơ bản chúng ta đã có 1 số kiến thức cơ bản về Swishmax để bước vào các bài tập căn bản đòi hỏi sự kết hợp giữa các yếu tố này cũng như cách thức quản

lý object trong SM mà sản phẩm là 1 số banner chúng ta thường thấy trên

website