Căn bản Swishmax v2

[metallica_vnn]

thật không biết pót bài này ở đâu nên làm bừa ra đây, admin nếu thấy không có ích thì có thể del hay dời vào chổ nào đó cho phù hợp giùm

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

Lời nói đầu:

Sau hơn 2 năm tìm hiểu
Swishmax (SM) nhận thấy cộng đồng SM ở các nước châu âu, nhất là Ustralia phát triển khá mạnh, trong khi cộng đồng SM ở Việt Nam chúng ta thì không có,mà thay vào đó là 1 số tài liệu căn bản rất ít rải rát ở 1 số forum, chưa diễn giải hết phần căn bản, được xem là công cụ thứ yếu chỉ hổ trợ cho Flash và chưa thực sự khai thác hết thế mạnh của SM. Nguyên nhân là Flash vốn ra đời từ lau và tài
liệu tiếng Việt khá nhiều, còn SM mới phát triển mạnh trong 1 vài năm gần đây. Xong nó đã và đang từng bước bắt chước được đàn anh Flash cộng với 1 số ưu điểm mà Flash không hoặc chưa có khiến nó được sử dụng khá mạnh mẽ ở các nước châu âu nếu không nói thêm về tính chất ngôn ngữ tiếng Anh - Pháp được sử dụng trong phần mềm mà nhà sản xuất phần mềm "chiếu cố".  Nay với chút kiến thức tích góp được tôi xin tổng hợp và bổ sung những kiến thức đó lại, nhằm giúp các bạn khai thác tốt hơn lợi thế của SM.

Trước khi đi vào phần lý thuyết tôi muốn giới thiệu 1 số sản phẩm tôi đã làm qua. để các bạn hiểu học kỷ thuật này để làm cái gì









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

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

Xem thêm bài viết cùng chuyên mục:

• Flash 8 Pro toàn tập - Bài 6
• Chèn Âm Thanh
• làm preloading
• Cần hướng dẫn làm banner flash
• Flash 8 Pro toàn tập - Bài 7

[metallica_vnn]

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

Hy vọng tới đây các bạn đã phần nào nắm được cách thức quản lý object trong
Swishmax .

[metallica_vnn]

 

4. LAYOUT:

    4.1/ Toolbox:

   

    4.2/ Ruler:




    4.3/ quản lý file:

[metallica_vnn]

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:

 

[metallica_vnn]

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.

[metallica_vnn]

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 )

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.

[punskin]

ồ cong hpu quá.nể thật dáy.chắc là mất thời gian lắm cho cái hướng dẫn này

[hoansucu]

uhm , nể bác đấy...mình đang tìm tài liệu về dreamweaver cs3 , nhất là bài tập và các thẻ trong code mà ko có nhiều . Nếu rành về phần này thì nhờ bạn post lên dùm nha , cảm ơn trước.

[onggiakien2006]

nhìn qua hoa cả mắt ........... ối giời oai ...tớ biết Flash ngon lành còn cái này nghe thấy bảo làm nhanh hơn nhưng chắc cũng khoai nhừ đây

[kyunwoo]

cho mình hỏi là mình làm flash nhạc với nhiều scene trong đó để dễ quản lý, nhưng khi chạy thử thì file audio đó chỉ nằm trong scene 1, phải hết nhạc thì mới qua scene 2. Nhờ các bạn chỉ giúm làm sao để nhạc chạy hết cho tất cả các scene với!
Cám ơn lắm!!!