HUONG DAN Macromedia Flash MX (B4).doc

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. [...]... 25) bạn cần phải thêm đoạn action script sau: gotoAndStop(25) Lý do mà tôi thêm đoạn script này là để chuyển động sẽ tự động dừng, không lặp lại khi Flash player chạy qua 25 frame Ở các phiên bản trước Flash MX thì điều này là không cần thiết vì khi export, Flash sẽ hỏi bạn có muốn đoạn hoạt cảnh của mình âập lại không; bạn chỉ cần chọn không là được, còn trong phiên bản này, điều này đã được bỏ hẳn,... 25) bạn cần phải thêm đoạn action script sau: gotoAndStop(25) Lý do mà tôi thêm đoạn script này là để chuyển động sẽ tự động dừng, không lặp lại khi Flash player chạy qua 25 frame Ở các phiên bản trước Flash MX thì điều này là không cần thiết vì khi export, Flash sẽ hỏi bạn có muốn đoạn hoạt cảnh của mình âập lại không; bạn chỉ cần chọn không là được, còn trong phiên bản này, điều này đã được bỏ hẳn,... theo sở thích của riêng mình (lưu ý cách viết code này chỉ có hiệu lực từ Flash 6 trở xuống) Chúng ta vừa xem xét cách chèn mã action script thực hiện hành động nhảy đến một trang nào đó, giờ chúng ta sẽ tiếp tục phát triển ví dụ 9, nhưng thay vì nhảy đến một trang nào đó, ta sẽ nhảy đến một khung hình nào đó ngay trong file flash Ví dụ 3: Nhảy đến một khung hình quy định 1 Đầu tiên chúng ta sẽ tạo... tại scene1, bạn nhấn chọn 1 lần rồi mở bảng Action Script ra (nhấn F9) 2 Sau đó hãy chèn vào nội dung đoạn action script như sau: on (release) { getURL ("http://www.echip.com.vn/echiproot/html/tutor/flashmx/index.html"); } 3 Hoàn tất bạn export ra file swf và xem kết quả 4 Kết quả: Download tập tin nguồn của ví dụ tại đây Giải thích: Dòng đầu: mở đầu là dòng on (release), dòng này làm nhiệm vụ xác định... xong hoặc đang dang dở, bạn nhấn button echip để thực hiện chuyển động lại từ đầu Giải thích: Tại bước một như bạn đã thấy, chúng ta phải thêm đoạn script gotoAndStop(25) tại frame cuối cùng của Layer2, như tôi đã giải thích nó có tác dụng làm dừng hẳn đoạn phim mà bạn xem, nhưng như thế là chưa hoàn toàn chính xác mà thực chất của vấn đề hơi khác một chút Tôi giải thích như sau, khi Flash Player đọc... tại scene1, bạn nhấn chọn 1 lần rồi mở bảng Action Script ra (nhấn F9) 2 Sau đó hãy chèn vào nội dung đoạn action script như sau: on (release) { getURL ("http://www.echip.com.vn/echiproot/html/tutor/flashmx/index.html"); } 3 Hoàn tất bạn export ra file swf và xem kết quả 4 Kết quả: Download tập tin nguồn của ví dụ tại đây Giải thích: Dòng đầu: mở đầu là dòng on (release), dòng này làm nhiệm vụ xác định... hình chứa button chứ không phải toàn bộ vùng làm việc Vậy ta có thể rút ra kết luận, action script chèn vào từng đối tượng riêng biệt Dòng thứ hai: getURL ("http://www.echip.com.vn/echiproot/html/tutor/flashmx/index.html") dòng này được kẹp giữa dòng ba và dòng đầu tiên Vậy nó sẽ mang nội dung kết nối đến một URL nào đó, vậy dòng 1 mang nội dung khai báo đồng nghĩa dòng ba mang nội dung kết thúc sự kiện... theo sở thích của riêng mình (lưu ý cách viết code này chỉ có hiệu lực từ Flash 6 trở xuống) Chúng ta vừa xem xét cách chèn mã action script thực hiện hành động nhảy đến một trang nào đó, giờ chúng ta sẽ tiếp tục phát triển ví dụ 9, nhưng thay vì nhảy đến một trang nào đó, ta sẽ nhảy đến một khung hình nào đó ngay trong file flash Ví dụ 3: Nhảy đến một khung hình quy định 1 Đầu tiên chúng ta sẽ tạo... hình chứa button chứ không phải toàn bộ vùng làm việc Vậy ta có thể rút ra kết luận, action script chèn vào từng đối tượng riêng biệt Dòng thứ hai: getURL ("http://www.echip.com.vn/echiproot/html/tutor/flashmx/index.html") dòng này được kẹp giữa dòng ba và dòng đầu tiên Vậy nó sẽ mang nội dung kết nối đến một URL nào đó, vậy dòng 1 mang nội dung khai báo đồng nghĩa dòng ba mang nội dung kết thúc sự kiện... xong hoặc đang dang dở, bạn nhấn button echip để thực hiện chuyển động lại từ đầu Giải thích: Tại bước một như bạn đã thấy, chúng ta phải thêm đoạn script gotoAndStop(25) tại frame cuối cùng của Layer2, như tôi đã giải thích nó có tác dụng làm dừng hẳn đoạn phim mà bạn xem, nhưng như thế là chưa hoàn toàn chính xác mà thực chất của vấn đề hơi khác một chút Tôi giải thích như sau, khi Flash Player đọc . dừng, không lặp lại khi Flash player chạy qua 25 frame. Ở các phiên bản trước Flash MX thì điều này là không cần thiết vì khi export, Flash sẽ hỏi bạn có muốn. dừng, không lặp lại khi Flash player chạy qua 25 frame. Ở các phiên bản trước Flash MX thì điều này là không cần thiết vì khi export, Flash sẽ hỏi bạn có muốn