Tính đến giờ phút này chúng ta đã học xong ba phần chính của Flash, nhưng vẫn còn lại một đại gia cuối
chính là Action Script, và một số phần phụ khác mà bạn cần phải biết nếu muốn sử dụng Flash là: Symbol,
Scene, Library và các Components tích hợp với việc kết nối XML, Data Set và thành phần giao diện như
UI Component. Hy vọng khái quát trước những gì mà tôi sắp trình bày trong các bài học tiếp theo sẽ giúp
các bạn dễ dang hơn trong việc hệ thống kiến thức.
Như đă giới thiệu ở cuối bài trước, tôi xin đề cập đến Scene, Library và Symbol trong bài này.
Scene (phân cảnh)
Thử tưởng tượng nhé, với những ǵ mà bạn đă được cung cấp cho bạn trong các bài trước, bạn biết rằng một
đoạn phim Flash được tập hợp từ các khung h́nh, các khung h́nh tĩnh được chuyển liên tục đánh lừa con
mắt người xem rằng ảnh đang chuyển động. Đó là lư thuyết tương tự như các loại phim nhựa. Và cũng
tương tự như vậy, Flash đề ra một khái niệm tương tự phim, đó là các phân cảnh. Một bộ phim sẽ không thể
xoay quanh mă một cảnh, mà đó là chắp nối của nhiều lần quay với nhiều cảnh quay trong các không gian
khác nhau, đó là lănh vực phim, scene trong Flash sẽ có nghĩa hơn thế nữa nếu bạn là một nhà phát triển
game hay phần mềm bằng Flash. Với game th́ đó chính là các màn chơi khác nhau tương ứng với mỗi
scene, với nhà lập trình thì đó chính là những phần ẩn ngay trong cùng một form. Thật ấn tượng phải không
các bạn.
+ Để tạo một scene, sau khi đă bật tŕnh Flash và tạo một dự án (hoặc với dự án mà bạn đang thực hiện) bạn
chọn trên thanh menu Insert/Scene.
+ Để chuyển đổi qua lại với các scene bạn nhấn chọn biểu tượng Edit Scene và chọn scene mà bạn muốn
làm việc.
* Trình quản lý Scene:
Để hiển thị hộp quản lư Scene bạn chọn từ menu Window/Design Panels/Scene (hoặc nhấn Shift + F2), hộp
thoại sau sẽ hiển thị:
Như bạn thấy, khung h́nh trên sẽ liệt kê toàn bộ các scene trong dự án của bạn. Hộp thoại liệt kê cho phép
bạn thao tác các hành động sau đây:
+ Sử đổi tên phân cảnh: việc làm này rất có ích, lợi ích rơ ràng nhất mà ta có thể thấy được đó chính gợi
nhớ, với cách đặt tên thay cho các kí hiệu scene 1, scene2... không cần bạn phải chuyển sang phân cảnh,
hoặc lục lọi trong các phân cảnh để t́m phân cảnh cần sử chữa mà vẫn biết được chính xác phân cảnh chứa
ǵ theo gợ nhớ của bạn. Để đổi tên bạn đơn giản chỉ cần double click lên phân cảnh mà ḿnh muốn đổi tên,
sau đó nhập tên mà bạn muốn.
+ Xếp lại thứ tự phân cảnh: chọn phân cảnh muốn đổi chỗ, sau đó nhấn và giữ chuột phải, di chuyển phân
cảnh đến vị trí mà bạn muốn.
+ Nhân đôi phân cảnh: đôi khi trong công việc, bạn cần thiết kế hai phân cảnh hoàn toàn giống nhau, thiết
kế lại đó với một khung cảnh chứa đầy layer và khung h́nh lồng ghép phức tạp sẽ ngốn của bạn không ít
thời gian, chính v́ vậy mà Macromedia cung cấp cho bạn chức năng nhân đôi (duplicate scene), để nhân đôi
bạn chọn phân cảnh cần phân đôi trong danh sách liệt kê, sau đó nhấn biểu tượng đầu tiên (duplicate scene)
trong hành cuối. (chức năng này tương tự duplicate layer trong photoshop).
+ Thêm một phân cảnh: chức năng này tương tự việc bạn tạo phân cảnh mà tôi nói trên, để thực hiện bạn
nhấn vào biểu tượng thứ hai mang h́nh dấu cộng.
+ Xóa một phân cảnh: không nói ǵ hơn đó là biểu tượng h́nh thùng rác.
Symbol
Liệu có bao giờ bạn quan tâm đến việc chương tŕnh của ḿnh có một dung lượng khá lớn trong khi bản thân
bạn đă thực hiện các phương pháp tối ưu như giảm độ phân giải h́nh và âm thanh... mà chương tŕnh vẫn c̣n
nặng, symbol chính là một giải pháp hay trong việc giảm thao tác cũng như dung lượng chương tŕnh. Lấy
ví dụ, trong mỗi phân cảnh bạn cần dùng h́nh gà con echip một lần, nhưng tiếc thay chương tŕnh bạn tồn tại
quá nhiều phân cảnh, nếu cứ import và từng phân cảnh măi th́ thật là một giải pháp tồi, thứ nhất là rất mất
thời gian cho các hành động lập đi lập lại, thứ hai là chỉ với một h́nh mà bạn phải import vào nhiều lần như
vậy sẽ khiến cho dung lượng tăng đáng kể, thứ mà bạn cần chính là khả năng trích xuất nhanh chóng và
dùng chung (tương tự như thiết kế web, với một tấm h́nh bạn hoàn toàn có thể liên kết hiển thị với nhiều
file HTML, giảm thiểu tối đa việc sử dụng dung lượng đĩa cứng), và đó chính là sự cần thiết của symbol.
Bạn đừng vội hiểu nhầm Symbol và các đối tượng mà bạn vẽ hay import vào file flash là hai phạm trù khác
nhau, thực chất chúng là hệ quả của nhau, tức phải có đối tượng bạn mới có thể có symbol.
Có hai cách để tạo symbol:
- Dùng các đối tượng có sẵn: dùng công cụ Selection Tool (V) để chọn đối tượng mà bạn muốn chọn làm
symbol, sau đó chọn chuột phải và chọn Convert To Symbol... từ menu hiện ra.
- Các thứ hai là tạo một symbol trống và bắt đầu vẽ hoặc import các đối tượng vào khung làm việc của
frame chứa symbol. Để tạo một symbol rỗng ta chọn từ thanh menu Insert/New Symbol... (hoặc nhấn Ctrl
+ F8).
Dù cho chọn cách tạo nào cũng vậy, bạn đều gặp phải một hộp thoại miêu tả chi tiết các thuộc tính symbol
mà bạn muốn tạo, hộp thoại đó có nội dung như sau:
+ Name: tên symbol, thiết lập này khá quan trọng, nếu bạn phải làm việc với một dự án lớn, th́ việc gặp
phải hàng trăm thậm chí hàng ngàn symbol là chuyện thường, việc đặt tên sẽ rất có ích khi bạn muốn t́m
một symbol nào đó bằng các từ gợi nhớ là tên symbol.
+ Behavior: Đây là thiết lập thuộc tính của symbol, bạn buộc phải chọn 1 trong ba thuộc tính cho đối tượng
chuyển thành symbol.
- Graphic: đây là symbol đồ họa với mục đích phục vụ cho việc nhân bản, như ví dụ nêu trên, chỉ cần một
symbol, bạn có thể dùng lại nhiều lần trong cùng một scene hay với các scene khác nhau, đây là một
symbol thường dùng nhất.
- Button: là symbol thực hiện tạo các nút nhấn, các nút nhấn tạo ra sẽ chịu sự tương tác với trỏ chuột (sẽ nói
rơ hơn tại bài tương tác) để điều khiển mọi thứ trong file flash của bạn.
- Movie Clip: là symbol toàn vẹn nhất, nó mang nhiều tính năng nhất, ta lấy một ví dụ cho dễ hiểu, trong
một đoạn phim sẽ có nhiều đoạn quảng cáo nhỏ được chèn vào giữa phim, chúng hoạt động độc lập với bộ
phim đang chiếu, tương tự như vậy ta có định nghĩa của symbol này, symbol này chứa các đoạn phim (tức
chứa cả các đối tượng khung h́nh... trong đoạn phim đó), nó sẽ được lồng ghép và đoạn phim chính, hay
cho chạy bất cứ lúc nào bạn muốn khi tương tác bằng button... Nó hoạt động độc lập và không nằm trong
phần đang làm việc của bạn.
Cả ba thuộc tính đều có một công dụng nhất định và không có thuộc tính nào giống thuộc tính nào, vì vậy
khi thiết lập thuộc tính, bạn phải biết rõ mình tạo symbol vì mục đích gì.
Để nhân đôi một symbol ta nhấn chuột phải lên symbol chọn Duplicate Symbol... (hoặc chọn trên menu
Modify/Symbol/Duplicate Symbol...)
Để quản lý symbol, ta cần biết khái niệm về thư viện. Do đó tôi sẽ đề cập ngay bây giờ.
Library
Thật khó khi quản lư mọi phần tử có khả năng tái sử dụng (symbol) trong một dự án Flash nếu không gộp
chúng về một đầu mối, chính v́ vậy mà khái niệm thư viện được macromedia đề xướng và sử dụng ngay từ
phiên bản 4. Đến nay, đă có thêm nhiều chức năng nổi bật cho thư viện được macromedia tích hợp trong
phần mềm của ḿnh như: quản lư, thêm bớt, edit lại thuộc tính symbol..., trong thư viện bạn có thể chứa
mọi thứ miễn là quy chúng vè symbol, bạn cũng có thể chứa các đoạn nhạc mà ḿnh đă import, ...
Để bật cửa sổ quản lư của thư viện bạn chọn: Window/Library (hoặc chọn Ctrl + L):
Đây là giao diện của cửa sổ quản lý với các thành phần:
+ Dòng đầu tiên thống kê số phần tử tồn tại trong thư viện (trong hình là 15 items)
+ Dòng thứ hai là cửa sổ hiển thị hình dạng của đối tượng symbol.
+ Dòng ba là hộp liệt kê các phần tử với các thông số chi tiết:
- Name: cung cấp thông tin của dạng symbol, tên symbol, và biểu tượng nhận biết nhanh.
- Kind: thông tin loại phần tử, phần này có vẻ dư thừa bởi bản thân name đă cung cấp cho ta thuộc tính
symbol.
- Use count: số lần sử dụng symbol, không hiểu tại sao macromedia tạo thành phần này trong khi quy cho
mọi symbol số lần sử dụng lại vô hạn.
- Linkage: đây là một loạt chức năng thêm mà chỉ có phiên bản MX 2004 cung cấp, nó hỗ trợ cho việc lập
tŕnh bằng Action Script, vì vậy tôi không đề cập trong bài này. Bạn sẽ sớm biết thôi mà.
- Date Modified: dịch ra là ngày cập nhật.
+ Hàng cuối:
- Biểu tượng thứ nhất: tạo symbol mới.
- Biểu tượng thứ hai: tạo folder, tại sao phải tạo folder, chắc chắn bạn sẽ hỏi như vậy, vậy tôi hỏi lại bạn,
bạn có tạo folder trong các ổ đĩa ở trong máy bạn không. Tạo folder ở đây cũng vậy, với một khối lượng
symbol lên tới hàng trăm và vối từ miêu tả gần cạn th́ symbol giúp ta thống kê tốt hơn với mô h́nh cây của
explorer. Sau khi tạo folder, nếu bạn muốn đặt các phần tử trước vào folder th́ bạn chỉ cần kéo thả vào
folder mà ḿnh muốn, c̣n nếu không th́ bạn làm ngược lại.
- Biểu tượng thứ ba: cung cấp toàn bộ thông tin về symbol (không cần thiết v́ hộp liệt kê đă làm rất tốt điều
đó).
- Biểu tượng cuối: xóa đi các symbol mà bạn không thích.
Ngoài ra khi nhấn chuột phải bạn c̣n bắt gặp menu sau:
Khi nhấn folder:
- Rename: đổi tên cho folder mà bạn đang chọn.
- Duplicate: nhân đôi folder mà bạn đang chọn.
- Move to New Folder: chuyển đến một folder mới tạo, việc làm này đồng nghĩa bạn tạo một folder mới và
chuyển folder ḿnh đang chọn vào trong folder mới tạo đó.
- Delete: dịch là xóa folder.
- Expand Folder: mở mọi phần tử con trong folder bạn đang chọn, giống như bạn xem mọi phần tử trong
cây explorer.
- Collapse Folder: đóng lại mọi phần tử trong folder đang chọn, lại giống explorer.
- Expand All Folder: giống Expand Folder nhưng tác động lên tất cả folder trong library.
- Collapse All Folder: giống Collapse Folder nhưng tác động lên tất cả folder trong library.
Khi nhấn symbol:
- Rename: đổi tên symbol.
- Duplicate: nhân đôi symbol.
- Move to New Folder: hành động xảy ra đồng thời, tạo một folder mới và chuyển symbol đang chọn vào
trong đó.
- Delete: xóa symbol mà bạn chọn.
- Edit: hiển thị khung làm việc với riêng symbol bạn chọn.
- Properties...: Hiển thị cửa sổ tạo symbol nhưng với tiêu đề Symbol Properties và chức năng là đặt lại
thuộc tính chứ không phải tạo mới.
- Linkage...: không nói trong bài này.
- Play: nếu symbol thuộc dạng movie clip th́ chức năng này bật.
- Type: chuyển đổi nhanh thuộc tính của symbol về một trong hai thuộc tính c̣n lại hoặc giữ nguyên.
- Export Flash Movie...: xuất symbol về file thi hành *.swf (chỉ dùng cho dạng movie clip bởi nó hội đủ
mọi yêu cầu như một dự án).
- Export SWC File..: xuất ra file swc, đây là file định dạng thành phần, là một file chứa compiled clips
được export.
- Covert to Compiled Clip: ở trên tôi đă đề cập đến cụm từ này, Compiled Clip là các symbol movie clip
được xuất thành swf, vậy tính năng của nó tương tự symbol movie clip, tại sao macromedia lại thêm vào, v́
nó có khả năng kết nối cao, phân tán thành các file SWC nói trên và không những thế khả năng hiển thị của
nó nhanh hơn so với symbol movie clip, nhưng hăy nhớ, với Compiled Clip bạn sẽ không thể chỉnh sửa lại
như với symbol movie clip.
- Component Definition...: sẽ đề cập trong bài về các Components.
Để sử dụng một symbol vào khung làm việc, đơn giản bạn chỉ cần chọn symbol trong library và kéo thả
chúng ra vùng làm việc với bất ḱ chỗ nào bạn muốn.
Đến đây tôi đă cung cấp cho bạn xong các khái niệm về symbol, scene và library, trong bài tiếp theo chúng
ta sẽ làm ví dụ về chúng để các bạn nắm rơ hơn.
Như đã hứa tại bài trước, trong bài này chúng ta sẽ thực hành phần lý thuyết khá dài dòng tại bài trước để
các bạn nắm rõ hơn.
Vì vậy tôi xin thực hiện một loạt ví dụ về button trước:
Ví dụ 1: Tạo một button bình thường
Việc tạo một button bình thường cũng khá đơn giản, bởi nó bản thân nó chỉ đem lại kết quả đồ họa đơn
giản tương ứng với các tác động của con trỏ gây nên (nếu bạn là một nhà thiết kế web thì điều này tương
đương bạn đang viết một class cho từng hyperlink), nhưng bạn đừng vội bỏ qua phần này, bởi nó chính là
tiền đề cho các ví dụ sau.
Để tạo một button bình thường, hãy làm theo các bước sau:
1. Chọn Insert->New Symbol... từ thanh menu (hoặc nhấn Ctrl+F8) để tạo một symbol, hãy nhớ, bản thân
button cũng là một dạng của symbol.
2. Tiếp theo bảng Create new symbol sẽ hiện lên, bạn có thể đặt tên nào tùy thích, và đừng quên chọn thuộc
tính button cho Behavior. Hoàn tất thì bạn nhấn OK. (trong ví dụ này tôi đặt tên cho button là buttonechip)
3. Bây giờ thì chính xác điều mà bạn thấy là một cửa sổ làm việc mới và phía trên bộ phận quản lý khung
hình chỉ có một layer duy nhất và bốn khung hình như sau:
Tại đây bạn hãy dùng các công cụ vẽ để tạo hình button như bạn mong muốn nếu không nữa thì hãy import
hình mà bạn muốn vào (nhưng nếu làm vậy nhớ chuyển tấm hình đó sang dạng đối tượng và import vào
một symbol graphic để tránh tiện quản lý trong thư viện).
Còn đây là hình mà tôi vẽ cho ví dụ này:
4. Việc tiếp theo là bạn phải tạo một keyframe ngay vị trí ô trắng có nhãn Over, để làm nhanh bạn có thể
nhấn chọn ô trắng đó và thay vì nhấn chuột phải chọn thao tác thì bạn chỉ cần nhấn F6 là được. Sau đó bạn
chỉnh sửa lại một chút hình dạng button tại frame này là được. Riêng tôi thì tôi đổi phông nền từ màu xanh
lá thành màu đỏ.
5. Tương tự bạn làm như vậy với hai frame có nhãn Down.
6. Cuối cùng là frame mang nhãn Hit, bước này bạn làm tương tự như nhãn Down, và như vậy thì sẽ có kết
quả 008a, nếu làm tiếp như đoạn dưới thì có kết quả 008b.
Tại nhãn Hit bạn cũng làm tương tự như nhãn Down, vẫn chọn ô frame trắng mang nhãn Hit, nhấn F6, và
đổi màu của button(trong ví dụ này tôi lần lượt có các màu như sau:nhãn Up màu xanh lá; nhãn Over màu
đỏ; nhãn Down màu vàng và nhãn Hit màu xanh dương). Tiếp đến bạn kéo toàn bộ đối tượng ra khỏi vị trí
button, trong ví dụ tôi kéo chệch sang phải như hình dưới:
7. Hoàn tất mà không tạo frame ở nhãn Hit thì bạn trở lại Scene 1 và kéo thả symbol có tên buttonechip vào
trong giao diện làm việc, đến lúc này bạn đã có thể export ra file swf để xem thành quả rồi đấy.
Còn nếu có thực hiện bước 6 thì bạn phải làm thêm một việc là vẽ một đối tượng tương tự đối tượng tại
frame Hit tại vùng tương ứng với nơi mà bạn đặt button.(để cho dễ thực hiện bạn copy toàn bộ đối tượng
trong frame Hit và paste tại scene1, bạn cũng có thể vẽ một đối tượng hoàn toàn khác tại scene1 miễn sao
nó bao trùm phần đối tượng trong frame Hit).
8. Kết quả 008a:
Download tập tin nguồn của ví dụ tại đây.
Kết quả 008b:
Download tập tin nguồn của ví dụ tại đây.
Giải thích:
Frame mang nhãn Up chứa hình dạng button lúc bình thường, đồng nghĩa chưa tương tác với trỏ chuột.
Frame mang nhãn Over chứa hình dạng button lúc bạn rê chuột lên nó nhưng chưa có hành động nhấn
chuột.
Frame mang nhãn Down chứa hình dạng button lúc bạn rê chuột lên button và đã có hành động nhấn chuột.
Frame mang nhãn Hit chứa hình dạng button tại một nơi khác, nó làm công việc thay đồi vùng chuột tác
động lên button, đồng nghĩa với hiệu ứng chuyển hình dạng sẽ không xảy ra khi bạn rê chuột trực tiếp lên
vùng này, mà chỉ xảy ra khi bạn tác động gián tiếp lên vùng đối tượng trong frame Hit.