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.  Các thành phần trên Timeline 3.1/  Frame: Trong vùng này cho phép chúng ta đưa hiệu ứng vào , viết code trên 1 frame nào  đó của object. 3.2/    Add Script ­  AddEffect:     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) 3.3/     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: 4.2/ Ruler: 4.3/ qu n lý file:ả 5. CÁC PANEL VÀ THUỘC TÍNH CỦA  MỖI OBJECT:     5.1/ Proerties  panel (bảng properties): a/ Scene: 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 Timel ine được chọn và vạch Timel ine đ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 Ctr l + 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 Cl ick + 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 Timel ine. - 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 cl ick + kéo chuột phải 1 đoạn trên Timel ine 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 ớ ụ đ ệ ứ M ove , 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 Tim eline c n thay  i. sao ồ ọ ệ ứ ủ ầ đổ cho  o n hi u  ng  ó chuy n thành m àu xanh  m .đ ạ ệ ứ đ ể đậ 2/ vào panel Effects  Brow ser (Shift  + F7). Ch n hi u  ng ọ ệ ứ B lur. G i  thì b n th y thanh hi u  ng ờ ạ ấ ệ ứ M ove khi nãy  ã chuy n thành đ ể B lur. ­ 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/ Cl ick chọn hình chữ nhật, trên Timel ine, cl ick đôi vào Frame20 dòng của object chữ nhật, Timel ine sẽ xuất hiện 1 hiệu ứng Move 20 frame. 4/ Tại Frame 20. Sử dụng công cụ Select ion, cl ick 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 t iến thẳng theo 1 đường ngang thì giữ Shif t khi kéo object) 5/ Cũng với công cụ Select ion ta bóp chiều ngang từ bên phải vào. 6/ Giời cl ick 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 obj ect thì nên sử dung công cụ Transform, tránh sữ dụng công cụ Sel ect. 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) , cl ick 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ụ Moti on 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ị outl ine 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 outl ine bên ngoài, thuận tiện cho ta thấy đường l ine 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 Moti on Path tool kéo hình vuông tới 1 vị tr í khác sao cho tâm nằm trên đường l ine 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 l ine. 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, cl ick 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ụ Moti on 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 l ine , 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 , cl ick 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 l ine 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 l ine. 11/ Click vào điểm C, Timeline chuyển tới Frame 10. Sử dụng Moti on 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 f i le swf thì xem l ink 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ụ Fi l l 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.