Huong dan su dung Adobe Flash Professional CS4

ĐẠI HỌC BÁCH KHOA HÀ NỘI – KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

09

FLASH CS4

HƯỚNG DẪN CĂN BẢN

CLB FLASH – KHOA CNTT

FlashCS4 Professional

1

Mục lục:

Chương 1: Giới thiệu và cài đặt Flash CS4

Chương 2: Thiết kế hoạch hình với Flash

Chương 3: Giới thiệu về Action Script 3.0

Chương 4: Action Script nâng cao

Chương 5: Giới thiệu về Flex


2

Lời tựa:

Cuốn sách này là sản phẩm của quá trình làm thực tập của clb Flash K51 dưới sự hướng

dẫn của thầy Lê Tấn Hùng – giảng viên bộ môn CNPM, khoa CNTT trường ĐHBKHN.

Cuốn sách hướng tới những đối tượng mới tiếp xúc với Flash và đã có chút ít kinh nghiệm

trong lập trình (C hoặc Pascal). Mặc dù vậy chúng tôi hi vọng những độc giả đã từng có kinh

nghiệm với các phiên bản trước CS4 và đặc biệt những ai sử dụng Action Script 2.0 sẽ tìm

thấy nhiều điều bổ ích ở cuốn sách này.Cuốn sách tiếp cận Flash từ góc độ của người thiết

kế cũng như lập trình viên. Tuy nhiên, hướng tiếp cận từ góc độ lập trình viên được nhấn

mạnh hơn. Trong cuốn sách này, Flash được nhắc đến không chỉ như một công cụ thiết kế

mà còn với tư cách là một bộ thư viện.

Chương 1: Giới thiệu bạn cách cài đặt Flash CS4

Chương 2: Giới thiệu cách thiết kế hoạt hình trong Flash và nhấn mạnh các đặc điểm mới

của phiên bản CS4 so với các phiên bản trước đó.

Chương 3: Tiếp cận với Action Script 3.0 giành cho những ai đã có kinh nghiệm lập trình

chút ít, nếu bạn chưa có kinh nghiệm lập trình nên tìm đọc một cuốn sách về lập trình trước

khi đọc chương này. Chúng tôi giành đa số thời gian đề cập đến đặc điểm của Action Script

3.0 so với các ngôn ngữ phổ biến như C# hay Java.

Chương 4: Chương sách này được coi là cầu nối giữa lập trình viên và người thiết kế. Các

vấn đề phát sinh khi kết hợp giữa viết code và sử dụng các tool có sẵn của Flash sẽ được

đề cập.

Chương 5: Sự phát triển của Flash đã dẫn tới nhu cầu phải phát triển nó thành một công cụ

mạnh mẽ giành cho việc viết ứng dụng trên máy để bàn cũng như viết các ứng dụng

Internet (RIA – Rich Internet Application). Để đáp ứng nhu cầu này, Flex ra đời dựa trên nền

tảng Flash. Chương sách này đề cập tới các vấn đề căn bản về Flex mà bạn sẽ gặp phải khi

phát triển trên môi trường này.

Nếu bạn chưa có kinh nghiệm với Flash, chúng tôi khuyên bạn nên đọc lần lượt các

chương, đặc biệt chương 5 có thể đọc lại sau khi đã đọc qua các tài liệu khác chúng tôi giới

thiệu ở phần tham khảo. Nếu bạn đã là một „Flasher‟, bạn cũng sẽ tìm thấy nhiều điều bổ

ích ở chương 2, 4, 5.

Đa số các mục trong sách đều gắn với một bài thực hành đã được cung cấp file .fla (file

chuẩn của Flash Proffesional CS4), và project (theo định dạng của Flex Builder 3) đi kèm.

Bạn có thể tham khảo hoặc sử dụng tự do các tài liệu này.

Vì hạn chế về thời lượng cũng như nhiều yếu tố khác, nên trong phiên bản sách này còn rất

nhiều sai sót. Hi vọng sẽ nhận được sự góp ý của các bạn.


3

Xin chân thành cảm ơn thầy Lê Tấn Hùng đã giúp đỡ chúng em hoàn thành quyển sách

này.

Hà Nội, ngày 29 tháng 5 năm 2009

Nhóm tác giả

Nguyễn Hoàng Bách

Nguyễn Thạch Dương

Bùi Trung Hiếu

Nguyễn Thành Linh

Lê Anh Tùng


4

Chương 1 : Giới thiệu Flash và Hướng dẫn cài đặt

1. Giới thiệu Flash:

Bắt đầu ngay từ khi ra đời, Flash, đứa con cưng của Marcromedia, đã thổi 1 luồng

sinh khí mới vào các trang web. Nó cho phép cộng đồng những người thích sáng tạo

khai phá ra Web với tất cả những gì có thể : phim hoạt hình, nền game, ứng dụng

được kết nối, gallery nghệ thuật , video chat, chương trình chơi nhạc MP3 hay bất

cứ thứ gì nhiều hơn nữa mà bạn có thể nghĩ ra.

Với ý tưởng đó, Macromedia đã sử dụng khẩu hiệu "What the Web can be" để tiếp

thị cho đứa con của mình.

Là 1 công cụ sử dụng kỹ thuật vector, Flash cho ra những hình ảnh tốn ít băng thông

hơn các media tạo ảnh động khác rất nhiều. Điều mà ít người nhận ra là Flash

không chỉ đạt hiệu quả về mặt băng thông mà nó còn làm được nhiều hơn thế. Khi

phần mềm tiếp tục được phát triển thì phạm vi sử dụng của nó cũng ngày càng mở

rộng, và bây giờ đã là 1 trong số những media số tương tác linh hoạt nhất không chỉ

hoạt động được trên Internet, mà còn trên bảng điều khiển game lẫn các thiết bị di

động. Nó thực sự là multimedia.

Những chương trình tiên phong là các bộ phim hoạt hình ngắn (cartoon shorts) như

FishBar của hãng Honkworm, phát trên MTV năm 1998. Hãng này sau đó đã sản

xuất 1 loạt các phim gồm có FishBar, Violence of the Lambs. Loạt phim này đã chính

thức được chọn tham dự festival phim trực tuyến Sundance và sau đó được hãng

Mondo Media phát hành trên mạng.

Ngay từ phiên bản thứ 3, Flash được dùng để tạo các trò chơi như Whack-a-Mole,

Leo's Great Day (<http://www.pepworks.com/leoenglish.swf> ), và cả những nguyên

mẫu thô sơ của trò Pacman và cờ vua. Bạn hãy nhớ lại rằng ở phiên bản đó, chưa

có ActionScript nên người ta đã xây dựng chúng mà hoàn toàn không dùng 1 dòng

lệnh nào.

Kể từ khi ra mắt năm 1997, Macromedia Flash đã nhanh chóng trở thành chuẩn cho

các tương tác và ảnh động chất lượng cao trên Web. Nó cung cấp âm thanh, tương

tác, đồ hoạ, ảnh động trên nhiều loại nền và trình duyệt. Nó cho phép nhà phát triển

tạo ra những giao diện thân thiện có tính tương tác và những ứng dụng Web khác

biệt. ActionScript là ngôn ngữ lập trình sau hậu trường cung cấp cho người dùng

nhiều kiểm soát và chức năng trong lập trình Flash hơn.

Nói tóm lại, Flash cung cấp mọi thứ bạn cần để tạo và phân phối các ứng dụng

mạnh có nội dung web phong phú. Bạn có thể tạo từ 1 hình ảnh động đơn giản cho

đến 1 ứng dụng web có tương tác phức tạp, được điều khiển theo dữ liệu như 1 siêu

thị trực tuyến ... Bạn có thể làm phong phú thêm ứng dụng Flash của mình bằng

cách bổ sung hình ảnh, âm thanh, video từ bên ngoài. Flash cũng có những thành


5

phần giao diện đã xây dựng sẵn bạn chỉ việc dùng, hay những behaviors tích hợp

sẵn sẽ tự động bổ sung mã lệnh ActionScript vào chương trình của bạn.

Câu chuyện về sự ra đời của Flash mà ít người biết đến cho chúng ta câu trả lời

bằng cách nào mà cuộc cách mạng thực sự trong lĩnh vực multimedia này đã xảy ra.

Trở lại cuối những năm 80, câu chuyện của chúng ta bắt đầu với 4 công ty. Đầu tiên

là Macromind, một công ty phần mềm đặt tại Chicago có sản phần chính là ứng dụng

mang tên VideoWorks. Tiếp đến là Paracomp, trụ sở tại San Francisco, nổi tiếng

nhất với phần mềm Swivel3D, một ứng dụng 3D cho máy Macintosh. Công ty thứ 3

là Authorware, ở Minnesota với phần mềm Authorware, ứng dụng điều khiển

CBT/multimedia. Vào năm 1991, Macromind đã chuyển đến San Francisco và sát

nhập với công ty Paracomp thành Macromind-Paracomp. Authorware sau đó cũng

rời khỏi Minnesota và sát nhập với Macromind-Paracomp ở Redwood Shores,

California để thành lập nên hãng Macromedia hùng mạnh. Câu chuyện của chúng ta

bắt đầu từ đây.

Bạn có thể nhận ra là ta mới nhắc đến 3 thành viên trong bộ tứ làm nên câu chuyện.

Vậy thành viên thứ tư ở đâu? Ta hãy cùng quay trở lại tháng Giêng năm 1993,

Jonathan Gay, người viết những phần mềm trò chơi khá sớm sủa và đáng chân

trọng cho Mac như Dark Castle và Beyond Dark Castle, đã thuyết phục bạn mình là

Charlie Jackson (người sáng lập ra Silicon Beach Software) bỏ chút vốn đầu tư và

giúp ông thành lập công ty FutureWave. Công ty này có sản phẩm đầu tay là ứng

dụng Go và mục đích chính của công ty là sản xuất những phần mềm có khả năng

chiếm lĩnh thị trường máy tính bút (pen computer market). Nhưng thật không may là

những chiếc máy tính này không được tiếp nhận, lại thêm những can thiệp của hãng

AT&T nên Go trở thành 1 ứng dụng không có thị trường. FutureWave gặp khó khăn

nghiêm trọng vì nó chỉ là 1 công ty nhỏ không có nguồn thu nhập và đã phải sử dụng

cả năm trời để phát triển 1 phần mềm mà có khả năng sẽ không bao giờ thấy được

ánh sáng của 1 ngày mới. Sự cứu nguy cho nó chỉ còn trông chờ vào 1 phần mềm

nhỏ mang tên SmartSketch mà họ đã phát triển như một giải pháp phụ bên cạnh Go.

FutureWave bắt đầu tiếp thị SmartSketch, 1 công cụ để vẽ, dùng được trên cả 2 nền

Macintosh và Windows. Đó là thời điểm không lâu trước khi người ta đặt ra câu hỏi

tại sao FutureWave không biến SmartSketch thành 1 chương trình tạo animation 2D.

Có lẽ, một trong số những ví dụ cừ khôi nhất của khả năng tiên đoán công nghệ

(technological foresight) là khi FutureWave chuyển SmartSketch từ 1 chương trình

tạo ảnh tĩnh thành chương trình tạo animation. Sự chuyển đổi này chỉ dựa trên hy

vọng rằng Internet sẽ là 1 phương tiện lớn để truyền tải 2D animation.

Sau khi cả Adobe và Fractal Design từ chối mua công nghệ này, FutureWave phát

hành phần mềm FutureSplash Animator vào mùa hè năm 1996. Đây là 1 ứng dụng

tương đối đơn giản cho phép tạo ảnh động trên cơ sở vector tuyến tính. Phần mềm

này sau đó đã thu được 1 số sự chú ý khi nó được dùng để thiết kế phiên bản web

MSN của Microsoft và tạp chí Disney Daily Blast. Tháng 11 năm 1996, Macromedia

đề nghị FutureWave cùng hợp tác làm ăn. Với FutureWave, một công ty nhỏ chỉ với

6 nhân viên thì đây quả là 1 cơ hội bất ngờ. Do đó, vào tháng 12 năm ấy,


6

FutureWave đã bán công nghệ cho Macromedia. Hãng này sau đó phát hành phiên

bản đầu tiên của Flash vào đầu năm 1997.

Sau khi được vực dậy bởi Macromedia, Flash bắt đầu phát triển như 1 công cụ phần

mềm. Mỗi phiên bản mới của nó lại cung cấp những bước tiến đáng kể về khả năng

sử dụng của phần mềm:

Flash 1: thực sự chỉ là một nhãn hiệu khác của FutureSplash. Nó có những tính

năng cơ bản của một chương trình tạo ảnh động vector (vector animation): đó là các

công cụ hiệu đính cơ bản (theo chuẩn của Flash MX) và bảng thời gian chuyển động

(timeline). Ưu việt lớn nhất của nó là cùng với sự trợ giúp của 1 Netscape plug-in

hay 1 điều khiển ActiveX Internet Explorer, người dùng có thể đưa animation lên

Web cho tất cả những người khác có thể xem và thưởng thức.

Flash 2: là 1 bước tiến lớn của ứng dụng này. Nói chung thì nó bắt đầu cho sự

chuyển đổi của Flash từ 1 chương trình tạo ảnh động vector tuyến tính đơn thuần

thành 1 chương trình thiết kế media có tính tương tác. Sự chuyển đổi này xuất phát

từ việc tích hợp các đặc tính như biểu tượng nút tái sử dụng được, đồ hoạ nhúng,

font chữ vector, những action rất cơ bản, và âm thanh stereo. Flash 2 cũng cho phép

nhập các file có định dạng EPS, GIF, JPEG, AutoCAD DXF, BMP, Enhanced

Metafile, AIFF, Windows Metafile, và Shockwave.

Flash 3: Bên cạnh sự cải tiến về giao diện thì một trong số những bổ sung đáng kể

nhất trong Flash 3 là tầm quan trọng và khả năng tích hợp của các actions đã tăng

lên. Được xây dựng lỏng lẻo trên ngôn ngữ Javacript, actions (mà sau này được

phát triển thành ActionScript) cho phép người dùng kiểm soát và tương tác với

movies của họ ở 1 mức độ nhất định. Hơn nữa, sự tương tác của mask, shape

tweening, và sự trong suốt cho phép người dùng tận dụng được sự kiểm soát hơn

đối với việc tác phẩm của họ thực sự trông như thế nào. Phiên bản này chưa có

được 1 ngôn ngữ kịch bản chính thống.

Flash 4: được phát hành năm 1999. Một trong số những cải tiến thú vị nhất của

phiên bản này là khả năng thực thi file nén MP3 trong môi trường Flash movie. Phiên

bản rất sơ khai của ActionScript lần đầu tiên xuất hiện trong Flash. Nó làm cho việc

thiết kế giao diện, thiết kế game tương tác dễ dàng hơn. Những cải tiến khác bao

gồm các trường văn bản chỉnh sửa được, giao diện thân thiện, và quá trình publish

được đơn giản hoá.

Flash 5: Sự nâng cấp lớn nhất trong Flash 5 chính là ActionScript. ActionScript được

xây dựng theo chuẩn ECMA-262. Hệ thống ActionScript của Flash tiếp tục được bổ

sung với Javascript, định dạng HTML. Macromedia đã thông báo với thế giới rằng

Flash và ActionScript sẵn sàng cạnh tranh với bất kỳ đối thủ nào. Những thay đổi

khác trong phiên bản này là ở phần giao diện: thêm các công cụ sáng tác, lời giới

thiệu panels, Movie Explorer, Macromedia Dashboard (để hỗ trợ và cập nhật qua

mạng), các phím tắt do người dùng tự đặt cho các tác vụ và hàm.

Flash MX: là một bước tiến lớn của Flash. Hệ thống ActionScript được bổ sung UI


7

Component, xml. Đây thực ra chỉ là phiên bản thứ sáu của ứng dụng nhưng

Macromedia không đánh số phiên bản như trước nữa mà thay vào đó là cái tên MX.

Tại sao phải dùng 1 cái tên mới? Theo Macromedia thì họ sử dụng cái tên đó nhằm

báo cho nhà phát triển rằng ứng dụng này gồm có các giải pháp được tích hợp phục

vụ cho các media số trên Internet. Vì các công cụ của Macromedia (như Flash,

Dreamweaver, ColdFusion, …) có thể tích hợp chặt chẽ với nhau, nên công ty cảm

thấy mọi việc chỉ hợp lý khi các ứng dụng của họ mang cùng 1 cái tên. MX đơn giản

là nhãn hiệu sử dụng cho hệ thống các công cụ của Macromedia.

Về mặt đặc điểm mà nói thì Flash MX có những nâng cấp rất giá trị. Đáng chú ý nhất

là giao diện mới, sử dụng tốt, và được phân nhỏ hơn. Trong phần mềm còn có các

thành phần tạo sẵn, là những bộ phận, thiết bị nhỏ có thể dùng ngay, mà nếu trong

điều kiện bình thường ta sẽ mất rất nhiều thời gian để tạo từ đầu. Thêm nữa, sự tích

hợp nhiều công cụ thiết kế trực quan mới như free transform tool, envelope modifier,

bộ hỗ trợ xử lý văn bản nâng cao, và bộ trộn màu nâng cao, cho phép người dùng

kiểm soát chặt chẽ hơn các tác phẩm của mình.

Flash MX 2004: Tại phiên bản này, ActionScript 2.0 đã chính thức ra mắt. Đây là 1

công cụ hoàn hảo cho người thiết kế web, chuyên gia trong lĩnh vực media tương

tác, hay chuyên gia phát triển nội dung multimedia. Trọng tâm của phiên bản được

đặt vào việc tạo, nhập liệu và thao tác nhiều loại media (như audio, video, bitmaps,

vectors, text, và dữ liệu).

Flash MX Professional 2004: được dành cho các nhà thiết kế web và xây dựng

phần mềm cấp cao. Phiên bản này gồm tất cả các đặc tính của Flash MX 2004, cùng

với một số công cụ mạnh mới. Nó cung cấp những công cụ quản lý dự án để tối ưu

hoá lược đồ công việc giữa các thành viên trong 1 đội làm web gồm nhà thiết kế và

người phát triển. Khả năng lập mã bên ngoài và xử lý dữ liệu từ database là 1 số đặc

tính làm cho Flash đặc biệt phù hợp cho các dự án phức tạp, qui mô lớn được triển

khai bằng cách sử dụng Flash Player cùng với 1 hệ lai HTML làm nội dung.

ActionScript 2.0: chính thức ra mắt trong phiên bản Flash MX 2004. Đó là 1 ngôn

ngữ hướng đối tượng theo chuẩn ECMA, hỗ trợ tính kế thừa, đặt kiểu mạnh và có

mô hình sự kiện.

Macromedia Flash 8 Basic : phiên bản được công bố ngày 13/9/2005, phiên bản

này là một phiên bản rút gọn các tính năng của công cụ Flash, hướng vào đối tượng

người dùng chỉ muốn các tính năng cơ bản về vẽ, tạo hình động và tương tác. Ra

đời cùng Flash Player 8, phiên bản này hạn chế hỗ trợ video và các hiệu ứng hình

ảnh cũng như hoạt hoạt.

Macromedia Flash 8 Professional 8 : phiển bản này nhấn mạnh vào video và

mobile. Các chức năng mới bap gồm Filter và chế độ blend, khả năng tùy biến

chuyển động, hỗ trợ stroke, chế độ vẽ dựa trên vật thể, chế độ cache ảnh tại thời

gian thực, chế độ FlashType chống chữ nhòe, video định dạng On2 VP6, hỗ trợ tùy

chỉnh mờ cho video, một bộ mã hóa và import video riêng, hỗ trợ cue point cho file

dạng FLV, một thành phần (component) chạy video với nhiều chức năng nâng cao

và một bộ giả lập mobile.


8

Action Script 3.0: Đây là một ngôn ngữ hướng đối tượng hoàn toàn và có bộ thư

viện mạnh mẽ. Từ sau sự ra đời của Action Script 3.0, hướng phát triển của Flash

đã vô cùng đa dạng, không chỉ là môi trường web hay mobile; mà còn là ứng dụng

internet - RIA (Rich Internet Application) và máy để bàn.

Adobe Flash CS3 Professional: (hay là phiên bản 9) Được ra đời vào ngày 16

tháng 4 năm 2007, đây là phiên bản đầy tiên ra đời dưới thương hiệu Adobe. CS3

đã hỗ trợ đầy đủ Action Script 3.0 cho phép toàn bộ ứng dụng được chuyển sang

Action Script mà không cần tới thiết kế trong tool Adobe Flash CS3 Professional,

tương tác tốt hơn với các sản phẩm của Adobe như Adobe Photoshop, Adobe

Fireworks, Adobe After Effect, Adobe Illustrator … tạo thành một qui trình xây dựng

phần mềm/web hoàn chỉnh bằng các sản phẩm của Adobe; hỗ trợ vẽ vector tốt hơn,

thừa hưởng các ưu điểm của Adobe Illustrator và Adobe Fireworks.

Adobe Flash CS4 Professional: (phiên bản 10) Được công bố vào ngày 15 tháng

10 năm 2008. Phiên bản này chứa một số tính năng mang tính cánh mạng như:

khung xương, xử lý vật thể 3 chiều cơ bản, animation hướng đối tượng, cơ chế xử lý

chữ nâng cao và một số cải tiến của Action Script 3.0. CS4 cho phép lập trình viên

tạo chuyển động hiệu quả và nhanh chóng hơn với rất nhiều tính năng nâng cao mà

các phiên bản trước không có.

Adobe Flex Builder: Đây là một bản hỗ trợ phát triển ứng dụng Internet dựa trên

nền tảng Adobe Flash. Ứng dụng Flex có thể được viết bằng Adobe Flex Builder

hoặc Flex SDK được cung cấp miễn phí. Hiện tại đã có phiên bản Adobe Flex

Builder 3. Ứng dụng Flex có thể được viết bằng Action Script kết hợp với ngôn ngữ

đánh dấu MXML, cách phát triển Flex khác với cách phát triển Flash khi mà môi

trường phát triển gần giống như các IDE khác như Visual Studio hay Netbean mà bỏ

đi các công cụ vẽ hay timeline truyền thống của Flash.

Flash đã phát triển từ một công cụ chuyên vẽ hoạt hình thành một nền tảng mạnh

mẽ, gọn nhẹ thích hợp cho việc phát triển các đoạn hoạt hình, các game vừa và nhỏ,

các ứng dụng Internet, ứng dụng trên máy tính để bàn, ứng dụng giành cho điện

thoạt di động … Được sự hậu thuẫn của Adobe, Flash chắc chắn sẽ còn phát triển

hơn nữa, tiến dần vào các lĩnh vực như hiệu ứng truyền hình, phim ảnh … (phim

Star Trek ~ 2009 có sử dụng các hiệu ứng bằng Flash)

Trong thời điểm hiện tại và tương lai gần, có thể khẳng định rằng khó có nền tảng

nào có thể cạnh tranh với Flash trong lĩnh vực ứng dụng Internet.

2. Cài đặt Flash CS4:

Trong phần sau đây bạn sẽ được hướng dẫn cách cài đặt Flash CS4

I- YÊU CẦU CẤU HÌNH HỆ THỐNG:

Windows:

CPU: 1GHz trở lên


9

OS: Microsoft® Windows® XP Service Pack 2 (Khuyến cáo Service Pack 3),

Windows Vista® Home Premium, Business, Ultimate, Enterprice Service Pack 1 (đã

được kiểm định với các phiên bản 32-bit).

RAM: 1GB trở lên

Bộ nhớ trống: Tối thiểu 3.5GB cho quá trình cài đặt ( không cài trên bộ nhớ flash )

Màn hình: Độ phân giải 1024x768 với 16-bit đồ họa trở lên.

Ổ quang: DVD-ROM

Phần mềm: Quicktime 7.12 trở lên giúp hỗ trợ các tính năng đa phương tiện.

Internet: Đường truyền băng thông rộng cho các dịch vụ online.

Macintosh:

CPU: PowerPC® G5 hoặc Bộ vi xử lí đa nhân của Intel

OS: Tiger OSX 10.4.11, Leopard 10.5.4 trở lên

RAM: 1GB trở lên

Bộ nhớ trống: Tối thiểu 4GB cho quá trình cài đặt ( không cài trên bộ nhớ flash )

Màn hình: Độ phân giải 1024x768 với 16-bit đồ họa trở lên.

Ổ quang: DVD-ROM

Phần mềm: Quicktime 7.12 trở lên giúp hỗ trợ các tính năng đa phương tiện.

Internet: Đường truyền băng thông rộng cho các dịch vụ online.

II- CÀI ĐẶT:

1- Trước khi tiến hành cài đặt, tắt tất cả các ứng dụng đang chạy, bao gồm cả

các ứng dụng của Adobe, Micosoft Office, và các trình duyệt. Các bạn cũng được

khuyến cáo nên tạm thời tắt các phần mềm diệt virus trong quá trình cài đặt.

2- Đăng nhập bằng tài khoản quản trị (Administrative Account)

3- Làm theo hướng dẫn sau:

- Cho đĩa DVD cài đặt vào ổ, và làm theo các chỉ dẫn trên màn hình. Nếu bộ

chương trình không được tự động cài đặt, vào thư mục Adobe CS4 trong thư mục

gốc của đĩa cài, click đúp vào file Setup.exe và bắt đầu quá trình cài đặt.

- Nếu bạn download phần mềm từ Internet, vào thư mục Adobe CS4, click đúp

vào file Setup.exe và bắt đầu quá trình cài đặt.

4- Nếu nâng cấp từ phiên bản cũ, chương trình cài đặt sẽ kiểm tra hệ thống để

chọn những sản phẩm được nâng cấp. Nếu ko thể tìm ra, chương trình sẽ hỏi bạn

nhập mã đăng kí (serial number) của phần mềm được nâng cấp. Bạn cũng có thể

cài đặt phần mềm dưới dạng dùng thử (trial), sau đó nhập mã đăng kí mới vào cửa

sổ đăng kí lúc sử dụng phầm mềm.


10

*) Lưu ý: Để cài đặt các gói bổ sung hoặc cài lại phần mềm sau khi đã cài đặt hoàn

tất, bạn cần sử dụng bộ cài gốc ( nằm trong CD, DVD hoặc từ Internet)

III- GỠ BỎ CÀI ĐẶT:

1- Trước khi gỡ bỏ cài đặt, tắt toàn bộ các chương trình đang chạy, bao gồm cả

các ứng dụng của Adobe, Microsoft Office, và các trình duyệt,

2- Làm theo hướng dẫn sau:

- WINDOWS XP: Mở cửa sổ Control Panel và click đúp vào biểu tượng Add or

Remove Programs, chọn phần mềm cần gỡ bỏ, Click Uninstall/ Change, và làm

theo các chỉ dẫn trên màn hình.

- WINDOWS VISTA: Mở cửa sổ Control Panel và click đúp vào biểu tượng

Programs and Features, chọn phần mềm cần gỡ bỏ, click Uninstall/Change, và làm

theo các chỉ dẫn trên màn hình.

- MAC OS (QUAN TRỌNG): đối với hệ điều hành của Apple có tính năng gỡ

bỏ mới. Không gỡ bỏ theo phương thức truyền thống là kéo thả ứng dụng vào

thùng rác (Trash). Để gỡ bỏ một cách an toàn, click đúp vào bộ cài có trong đường

dẫn Application/Utilities/Adobe Installers, đăng nhập bằng tài khoản quản trị, rồi

chọn Remove Components và làm theo các chỉ dẫn trên màn hình.

HƯỚNG DẪN CÀI ĐẶT BẰNG HÌNH ẢNH:

Vào thư mục cài đặt, click đúp vào file Setup.exe để tiến hành cài đặt.


11

Chương trình cài đặt tiến hành kiểm tra thông tin cấu hình máy tính.

Nhập mã đăng kí, hoặc lựa chọn cài đặt dùng thử sản phẩm, rồi chọn Next.


12

- Chọn ngôn ngữ sử dụng, đường dẫn cài đặt, và các ứng dụng đi kèm rồi click

Install để bắt đầu quá trình cài đặt.

- Quá trình cài đặt bắt đầu.


13

- Đăng kí thông tin cá nhân:

- Click Exit để hoàn tất việc cài đặt Adobe Flash.


14

HƯỚNG DẪN GỠ BỎ ADOBE FLASH BẰNG HÌNH ẢNH:

Mở cửa sổ Control Panel và click đúp vào biểu tượng Programs and Features, click

đúp vào biểu tượng Adobe Flash CS4 Professional.

Đánh dấu vào ô Remove Application Preferences nếu muốn xóa mọi cài đặt.


15

Quá trình gỡ bỏ bắt đầu

Click Exit để hoàn tất việc gỡ bỏ Adobe Flash.


16


17

Chương 2:

THIẾT KẾ HOẠT HÌNH VỚI FLASH

Giới thiệu:

Flash là 1 công cụ sử dụng kỹ thuật vector được phát triển từ năm 1997 do hãng Macromedia. Điểm

mạnh của Flash nằm ở bộ công cụ vẽ vector hoàn thiện và các công cụ tạo chuyển động thông minh

và mềm dẻo. Chương này sẽ giúp các bạn:

1. Làm quen với môi trường làm việc của Flash CS4

2. Cách vẽ, tô màu chuyên nghiệp

3. Tạo các chuyển động hoạt hình


18

Bài 1:

Làm quen với Flash CS4

1. Giao diện của Flash Professional CS4:

Để tạo 1 file Flash mới sử dụng các lựa chọn được liệt kê ở trên.

Góc trên bên phải là các cách sắp xếp vùng làm việc tùy theo đối tượng sử dụng.

Mặc định là kiểu Essential.

Mục tiêu bài học:

1. Môi trường làm việc của FlashCS4.

2. Các khái niệm cơ bản.


19

Do mục đích của chương này nên ta chọn kiểu làm việc Designer.

Có một số vùng làm việc quan trọng được hiển thi:

1. Timeline:

Timeline là trục thời gian, thông số fps (frame per second) chỉ ra số frame (cảnh)

được diễn ra trong 1 giây. Vạch đỏ chỉ frame hiện tại được hiển thị.


20

Trong hình trên, frame đang hiển thị là frame 5.

Mỗi dòng là 1 layer. Có thể hình dung mỗi layer như một lớp bóng kính trong suốt mà

ta có thể vẽ lên trên.

Trong hình trên: Layer 2 có các frame 1,5 là keyframe, có 15 frame; layer 1 chỉ có 1

frame 1 và là keyframe.

Keyframe là frame mà tại đó nội dung của nó không liên quan đến các frame khác.

Các frame không phải keyframe thì nội dung của nó là nội dung của keyframe trước

đó gần nhất.

Để khóa không chỉnh sửa một layer ta sử dụng biểu tượng

Không hiển thị layer, ta sử dụng biểu tượng

Để thêm layer, ta sử dụng biểu tượng hoặc click chuột phải vào 1 layer bất kì,

chọn “Insert layer”.

Để xóa layer đang chọn, ta sử dụng biểu tượng hoặc click chuột phải vào layer

cần xóa, chọn “Delete layer”.

Sử dụng Timeline:

Bộ phận này được dùng để tổ chức, điều khiển nội dung movie theo thời gian dưới dạng các lớp và khung hình. Cũng giống như khi làm phim, người ta chia độ dài về mặt thời gian của 1 Flash movie thành các khung hình liên tiếp. Các lớp thì có thể được coi như những dải phim xếp chồng lên nhau. Mỗi lớp là 1 hình ảnh khác nhau được đặt trên Stage. Thành phần chính của Timeline gồm có: lớp (layers), khung hình (frames), và playhead (khi playhead trỏ đến khung hình nào thì khung hình đó được thể hiện. Nó có nhiệm vụ chạy từ đầu film đến cuối film để các khung hình lần lượt được hiện ra) (xem hình dưới).

Các lớp của movie được liệt kê dưới dạng cột bên phía trái của bảng điều khiển

Timeline. các khung hình có trong mỗi lớp xuất hiện theo hàng nằm bên phải của tên

lớp. Vạch Timeline header nằm trên cùng của bảng để chỉ ra số thứ tự các khung

hình. Còn playhead, vạch màu đỏ, là để chỉ ra khung hình nào đang được biểu biễn

trên Stage.

Thông tin về trạng thái của Timeline được đặt ở cuối bảng, cho ta biết khung số mấy

đang được chọn, tốc độ trôi của khung hình, và thời gian chạy từ khung hình thứ

nhất đến khung hình hiện tại là bao nhiêu.


21

Bạn có thể thay đổi các khung hình biểu diễn trong Timeline, cũng như đặt dấu

(thumbnails, chấm đen, trắng, vuông, tròn ... ) cho nội dung của khung hình. Bảng

điều khiển này cho biết ở khung hình nào thì có animation. Có 3 loại hình động là

animation theo cách hiển thị lần lượt các khung hình, theo cách biến đổi hình dạng

và biến đổi theo đường đi. Để biết nhiều thông tin hơn về animation, bạn hãy xem

chương 3.

Những điều khiển bên cạnh tên lớp trong bảng Timeline cho phép bạn ẩn, hiện,

khoá, hay mở khoá các lớp, cũng như biểu diễn nội dung của lớp ở dạng đường

viền.

Bạn có thể chèn, xoá, chọn và di chuyển các khung hình trong Timeline, cũng như có

thể dịch chuyển khung hình đến vị trí mới trên cùng 1 lớp hay sang lớp khác.

Sử dụng Frames và Keyframes:

Keyframe là khung hình đặc biệt, đánh dấu mốc thay đổi trong animation, hay chứa

các actions để điều khiển movie. Flash có thể tự sinh các khung hình (tween) giữa

những keyframe để tạo hình ảnh animation liền mạch. Chức năng này của Flash

giúp bạn tạo animation dễ dàng hơn vì bạn không phải vẽ từng frame 1 nữa mà chỉ

cần tạo một số khung hình mốc. Thời lượng của 1 animation cũng có thể thay đổi

được bằng cách dịch chuyển các keyframes trong Timeline.

Thứ tự xuất hiện khung hình và keyframe trong bảng Timeline sẽ quyết định thứ tự


22

xuất hiện của chúng trong 1 Flash movie. Bằng cách sắp xếp các keyframes trong

Timeline, ta có thể biên tập chuỗi các sự kiện của animation một cách tuỳ ý.

Làm việc với các khung hình trong bảng Timeline: Bạn có thể thực hiện những công

việc chỉnh sửa đối với frames và keyframes:

- chèn, chọn, xoá, dịch chuyển frames và keyframes.

- Kéo frames và keyframes đến vị trí mới trong cùng 1 lớp hay sang lớp khác.

- Sao chép frames, keyframes.

- Kéo các thành phần từ Library panel ra Stage để thêm thành phần vào

keyframe hiện tại.

Có hai cách để chọn khung hình trong Timeline. Cách chọn mặc định là chọn theo

khung hình, bạn phải chọn từng khung hình riêng lẻ. Trong cách chọn theo khoảng

(span-based), toàn bộ khung hình từ keyframe này cho đến keyframe tiếp theo sẽ

được chọn khi bạn click bất kỳ khung hình nào nằm trong khoảng đó. Người dùng

hoàn toàn có thể tự đặt chế độ chọn theo ý mình.

Để chèn khung hình vào Timeline, có 1 số cách như sau:

- Chèn 1 khung hình mới: chọn Insert -> Timeline -> Frame.

- Tạo keyframe mới: chọn Insert -> Timeline -> Keyframe, hoặc kích chuột

phải vào frame được chọn, chọn tiếp Insert Keyframe trên menu vừa bật ra.

- Tạo keyframe trắng: chọn Insert -> Timeline -> Blank Keyframe, hoặc kích

chuột phải, chọn chức năng Insert Blank Keyframe.

Để chọn 1 hay nhiều khung hình trong Timeline:

- Chọn 1 khung hình, rồi kích vào đó. Nếu bạn đặt chế độ chọn theo khoảng

thì khi kích vào 1 khung hình, toàn bộ chuỗi khung hình nằm giữa 2 keyframes sẽ

được chọn.

- Chọn nhiều khung hình liền kề nhau: bấm Shift và click các khung hình cần

chọn.

- Chọn các khung hình không kề nhau: bấm Control và click các khung hình

cần chọn.

Để chọn tất cả các khung hình trong Timeline:

- Chọn Edit -> Timeline -> Select All Frames.


23

Để xoá hay chỉnh sửa 1 frame, keyframe, thực hiện 1 trong số các cách sau:

- Xoá 1 khung hình, 1 keyframe hay chuỗi các khung hình: chọn những khung

hình cần xoá, chọn Edit -> Timeline -> Remove Frame, hoặc kích chuột phải vào

khung hình đã chọn rồi chọn tiếp Remove Frame từ menu vừa xuất hiện. Những

frames xung quanh vẫn không thay đổi.

- Để dịch chuyển 1 keyframe hay 1 chuỗi các khung hình cùng nội dung của

chúng thì chỉ việc kéo keyframe hay chuỗi khung hình đó đến vị trí mong muốn.

- Để mở rộng khoảng thời gian của 1 keyframe, bấm Alt và kéo keyframe đó

đến khung hình cuối cùng trong chuỗi mới.

- Để sao chép keyframe hay chuỗi khung hình: bấm Alt-click và kéo keyframe

đó đến vị trí mới.

- Để sao chép 1 hay nhiều khung hình: chọn những khung hình đó rồi chọn

Edit -> Timeline -> Copy Frames. Chọn khung hình hay chuỗi khung hình mà bạn

muốn thay thế, rồi chọn Edit > Timeline > Paste Frames.

- Để chuyển 1 keyframe thành khung hình bình thường, ta chọn keyframe rồi

vào Edit -> Timeline -> Clear Keyframe, hay kích chuột phải lên keyframe rồi từ

menu bật ra, chọn tiếp Clear Keyframe. Keyframe đã được xoá và tất cả các khung

hình tiếp sau đó cho đến keyframe tiếp theo sẽ được thay thế bằng nội dung của

frame đứng liền trước keyframe đã xoá.

- Để thay đổi độ dài của 1 chuỗi khung hình đã tweened (được Flash tự động

tạo nội dung): kéo keyframe bắt đầu hay cuối cùng của chuỗi đó về bên trái hay bên

phải tương ứng.

- Để thêm 1 thành phần từ thư viện vào keyframe hiện tại: kéo thành phần đó

từ Library panel vào Stage.

Làm việc với lớp:

Bạn có thể coi lớp như những tờ giấy acetate trong suốt được xếp chồng lên nhau.

Những lớp này giúp bạn tổ chức tác phẩm của mình dễ dàng hơn. Bạn hoàn toàn có

thể vẽ và chỉnh sửa trên mỗi lớp mà không làm ảnh hưởng đến các lớp khác. Nếu

trên 1 lớp không có đối tượng nào, hay nói cách khác là nó trống rỗng thì bạn có thể

nhìn xuyên qua nó đến những lớp bên dưới.

Để vẽ, tô màu hay chỉnh sửa lớp, bạn phải chọn lớp đó để đặt nó trong trạng thái

làm việc (active). Biểu tượng chiếc bút chì ở cạnh tên lớp cho ta biết lớp đó có được

chọn hay không. Mặc dù có thể có nhiều lớp được chọn tại 1 thời điểm nhưng chỉ có

1 lớp là người dùng thực sự làm việc trên đó.

Khi bạn tạo 1 file Flash mới (Flash Document), chương trình sẽ tạo sẵn trong đó 1


24

lớp. Bạn có thể bổ sung thêm nhiều lớp tuỳ ý. Số lớp bạn sử dụng chỉ bị giới hạn bởi

bộ nhớ máy tính của bạn và các lớp này không hề làm tăng kích thước file .swf. Bạn

có thể ẩn, khoá hay sắp xếp lại thứ tự các lớp.

Bạn cũng có thể tổ chức và quản lý các lớp bằng cách tạo những folder và đặt các

lớp vào trong folder đó. Bạn có thể mở rộng hay thu nhỏ các lớp trong bảng Timeline

mà không làm ảnh hưởng đến những gì bạn thấy trên Stage. Đó là 1 ý kiến tốt nếu

bạn dùng các lớp hay folder riêng biệt cho các file âm thanh, actions, nhãn của

khung hình, và lời chú thích cho khung hình. Điều này giúp bạn tìm những thành

phần đó nhanh hơn khi bạn cần chỉnh sửa chúng.

Thêm nữa, bạn có thể sử dụng các lớp chỉ dẫn đặc biệt để việc vẽ và biên tập được

dễ dàng hơn, dùng các lớp mặt nạ (mask layers) để tạo những hiệu ứng phức tạp.

Để tìm hiểu kỹ hơn thao tác làm việc với lớp trong Flash, bạn hãy chọn Help -> How

Do I -> Basic Flash -> Work with Layers.

2. Tools:

Các tool quan trọng hay được sử dụng:

Selection Tool, Free Transform Tool, Text Tool, Line Tool, Rectangle Tool, Pen Tool,

Brush Tool, Paint Bucket Tool, Eraser Tool, Zoom Tool.

Selection Tool: được sử dụng để chọn các đối tượng

Free Transform Tool: được sử dụng để thay đổi kích cỡ (scale), làm méo (skew), …

3. Stage:


25

Đây là khu vực làm việc chính. Tất cả mọi công việc vẽ, thực hiện chuyển động đều

thực hiện trên khu vực này.

Làm việc với Stage:

Sử dụng grid, guides, rulers:

Trong Flash có rulers và guides giúp người dùng vẽ và sắp đặt các đối tượng 1 cách

chính xác. Bạn có thể định ra các guides và bắt (snap) đối tượng theo các guides đó

hay bật chế độ hiện lưới và bắt đối tượng dóng theo đó.

Chú ý: Bạn có thể bắt đối tượng vào các đối tượng khác hay vào các pixel, hay dóng

đối tượng bằng cách sử dụng những đường viền dung sai.

a) Dùng grid:

Khi chế độ lưới được bật, một tập các đường thẳng xuất hiện phía sau tác phẩm của

bạn trong mọi cảnh. Bạn có thể bắt đối tượng vào các lưới đó, và chỉnh sửa kích

thước của lưới cũng như màu đường lưới.

Để hiển thị hay ẩn lưới vẽ: ta chọn View -> Grid -> Show Grid.

Để bật, tắt chế độ bắt (snap) theo lưới: chọn View -> Snapping -> Snap to Grid.

Để đặt tuỳ chọn cho lưới:


26

1. Chọn View -> Grid -> Edit Grid. Cửa sổ sau xuất hiện:

2. Chọn màu cho đường lưới: click vào tam giác nhỏ trong hộp màu

và chọn màu tuỳ ý từ bảng. Màu mặc định cho đường lưới là màu ghi (gray).

3. Chọn Show Grid để hiện lưới.

4. Chọn Snap to Grid để bật chế độ bắt theo lưới. Sự khác biệt khi bật

hay tắt chế độ này được thể hiện ở hình sau:

Hình elip bên trái được vẽ bằng công cụ bút chì khi không có chế độ Snap to Grid.

Còn hình bên phải có, ta thấy Flash đã tự điều chỉnh để các tiếp tuyến chính của elip


27

trùng với đường lưới.

5. Để điều chỉnh khoảng cách giữa các đường lưới, người dùng nhập giá trị

vào hộp văn bản bên cạnh mũi tên ngang và dọc trên cửa sổ Grid.

6. Có thể thay đổi độ chính xác trong việc bắt lưới bằng cách chọn các tuỳ

chọn ở mục Snap accuracy.

7. Nếu muốn những cài đặt đó trở thành mặc định thì click Save Default.

b) Dùng guides:

Để giúp cho việc vẽ hình đơn giản hơn, Flash cho phép người dùng tạo ra các lớp

hướng dẫn (guide layers). Rồi dựa vào những lớp đó, người dùng dóng các đối

tượng trên lớp khác với đối tượng đã tạo trên lớp guide. Các lớp guide này sẽ không

có mặt trong file swf, và ta có thể chọn bất kỳ lớp nào làm lớp guide. Bên trái tên lớp

có biểu tượng riêng, giống như hình 1 chiếc búa, chỉ ra rằng nó là lớp hướng dẫn.

Bạn có thể tạo 1 lớp guide để kiểm soát chuyển động của đối tượng trong 1

animation. Thay vì Flash tự động tạo ra đường chuyển động của đối tượng thì bằng

lớp guide này bạn có thể cho đối tượng chuyển động theo lộ trình mà bạn tự vạch ra.

Chú ý: Nếu bạn kéo 1 lớp bình thường lên trên lớp guide thì Flash sẽ hiểu là bạn đã

chuyển lớp guide thành lớp guide chuyển động. Để tránh sự thay đổi vô ý này, tốt

nhất ta nên đặt tất cả các lớp guide ở phía cuối trong thứ tự lớp.

Để chỉ định 1 lớp bình thường làm lớp guide: Chọn lớp đó và click chuột phải, chọn

tiếp mục Guide từ menu vừa xuất hiện. Muốn chuyển lớp guide thành lớp bình

thường thì ta cũng làm như vậy và chọn Guide 1 lần nữa để đưa nó về trạng thái

ban đầu.

c) Dùng rulers:

Để hiện thước đo, ta chọn View -> Rulers. Để xác định đơn vị cho thước, ta vào

Modify -> Document rồi chọn đơn vị là pixels, inches, centimeters, ... tuỳ ý.

Thước đo sẽ xuất hiện ở cạnh bên trái và cạnh phía trên của văn bản. Khi ta dịch

chuyển 1 phần tử trên Stage, các vạch trên 2 thước đo vuông góc cho biết chiều dài


28

và chiều rộng của phần tử cũng dịch chuyển theo.

4. Properties:

Đây là một panel quan trọng, chứa các thông số của đối tượng đang được lựa chọn.

Ví dụ khi ta chọn một hình được vẽ trên stage thì sẽ có panel properties như sau:

Tùy vào đối tượng đang được chọn mà sẽ có các loại thông số khác nhau hiển thị ở

panel properties

2. Các khái niệm cơ bản trong Flash:

Symbol:

Khi muốn định nghĩa một đối tượng trong Flash, ta dùng khái niệm Symbol.

Các loại symbol: Movie Clip, Button, Graphic

Chọn đối tượng cần định nghĩa, click chuột phải -> chọn convert to symbol


29

Classic Tween:

Khi muốn cho một Symbol thay đổi thông số (vị trí, màu sắc, …) từ frame này tới

frame kia ta dùng khái niệm Classic Tween.

Ví dụ:

Ta có 1 Symbol tên là Symbol1 ở frame1, ở frame20; symbol đó thay đổi vị trí.

Để làm được việc này, giả sử frame1 đã có sẵn symbol trong stage. Chọn

frame20, click chuột phải và chọn “Insert Keyframe”.

Ở khoảng giữa 2 frame ta chọn “Create Classic Tween”. Ấn Enter để xem kết

quả.


30


31

Bài 2

Sử dụng công cụ vẽ trong Flash CS4

1. Vẽ bằng các hình cơ bản:

Để tạo ra các hình vẽ trong Flash ta sẽ sử dụng các tool cơ bản như hình tròn, hình

chữ nhật, bút, … Kết hợp các hình đơn giản với nhau ta sẽ có được hình phức tạp

như ý muốn.

Ở đây, ta sẽ vẽ lại một bản vẽ / bức ảnh có trước để đưa vào Flash theo dạng vector

(Sẽ sử dụng hình vector này về sau).

Đây là bản vẽ gốc

Tạo 2 layer, với layer scan chứa ảnh và bị khóa nhằm không bị thay đổi khi vẽ trên layer drawing

Sử dụng các công cụ Pen tool, Rectangle Tool, và Oval Tool để vẽ các khối hình cơ bản dựa theo hình ban đầu


1. Sử dụng Brush

2. Sử dụng Pen Tool

3. Sử dụng màu sắc một cách hiệu quả


32

Sử dụng chức năng làm cong của Pen tool để chỉnh cho hình vẽ giống thật

Chỉnh sửa một chút ta sẽ có hình như sau

Tô viền theo các màu ta lại có hình trên

Sau đó ta tô màu nhân vật theo hình gốc và được kết quả như trên


33

Xóa các hình tạm đi ta sẽ có được kết quả như trên

Làm tương tự với chiếc ván ta sẽ có hình như trên

Và ta có kết quả cuối cùng

2. Sử dụng Brush tool:

Brush tool là một trong những công cụ vẽ

mạnh nhất, đặc biệt khi sử dụng cùng

bảng vẽ. Khi vẽ bằng brush tool, mỗi nét

của bạn sẽ được chuyển thành 1 khối hình. Sử dụng brush tool như thế nào thực sự

tùy thuộc vào khả năng vẽ và phong cách vẽ của bạn.

Thông số bạn chỉnh sửa đầu tiên khi sử dụng brush tool là độ mềm của nét vẽ (smoothing

Luôn ghi nhớ khi vẽ rằng mục đích của việc vẽ này nhằm tạo các animation. Chính vì vậy không nên vẽ liền 1 nét mà chia ra nhiều nét nhỏ độc lập sẽ tốt hơn khi tạo chuyển động. Sử dụng Selection tool để di chuyển các nét.

Có hàng

loạt tùy chỉnh cho phét bạn đạt

được hình vẽ như mong muốn


34

Kết quả cuối cùng là 1 bản vẽ mang đậm phong cách hoạt hình

3. Sử dụng màu hiệu quả:

Màu thực sự mạnh và hiệu quả trong việc diễn tả tông

của thiết kế hoặc cảm xúc của nhân vật hoạt hình ban

đang vẽ. Chúng ta sẽ chỉnh màu sử dụng bảng trộn màu

HSB.

Trước hết, hãy chuyển chế độ màu từ RGB sang HSB.

Chế độ mặc định RGB là chế độ trộn màu dựa theo tỉ lệ 3

màu cơ bản: Red-Green-Blue

Chế độ HSB (hay HSV) là chế độ trộn màu dựa theo tỉ lệ

của:

H (Hue) – Vùng màu

S (Saturation) – Độ bão hòa màu

B (Bright hay V - Value) – Độ sáng


35

Ta có thiết kế gốc:

Muốn chuyển màu về dạng đen trẳng, hãy chuyển S của màu đó về 0, bạn sẽ đạt được kết quả như dưới đây

Chuyển tòan bộ màu của thiết kế về cùng một giá trị H cũng sẽ tạo ra một hiệu ứng rất đặc biệt và thú vị

Thay đổi giá trị S sẽ tạo sự tương phản giữa các màu với nhau. Chỉnh các giá trị HSB sẽ giúp

bạn thay đổi tông của thiết kế nhằm giúp thiết kế phù hợp với những gì có sẵn trước đó.


36

Bài 3

Sử dụng công cụ vẽ nâng cao trong Flash CS4

1. Sử dụng Gradient:

Các hình ảnh được tạo ra với màu được đổ bóng thường đem lại hiệu quả cao về

mặt thẩm mỹ, tạo cảm giác ba chiều. Sau đây chúng ta sẽ học sử dụng cách đổ màu

theo chế độ gradient để được được điều trên.

Ta tạo 2 layer chứa đầu và mắt của robot

Mắt

Đầu

Để gây cảm giác đổ bong cho đầu robot, ta sử dụng loại màu Radial

Màu ở phía trái ngoài cùng tương ứng với màu ở tâm của hình. Số lượng loại màu biến đổi là nhiều tùy ý


4. Sử dụng Gradient

5. Sử dụng ảnh làm texture

6. Biến ảnh bitmap thành ảnh vector


37

Đổ màu cho đầu robot, ta được kết qua:

Để tô màu tạo cảm giác thật cho vật có hình ống, ta dùng loại màu Linear

Cách dùng tương tự như vơi Gradient

Ta có kết quả như sau:

Làm tương tự với phần mắt, ta có:


38

Để chỉnh cho bóng phần mắt hợp với phần đầu, ta dùng chức năng Gradient Transform Tool

Chỉnh một chút và ta có kết quả như sau:


39

2. Sử dụng ảnh làm texture:

Đôi khi việc đổ màu theo cách trên chưa đạt được hiệu ứng cần thiết, đăc biệt với

những chi tiết phức tạp như vỏ cây, bãi cỏ … thì cách đổ màu dựa vào 1 ảnh bit map

lại là 1 cách tốt hơn để giải quyết vấn đề trên

Chuẩn bị trước ảnh để làm họa tiết, ảnh nên đủ nhỏ để có thể xuất file flash lên web

Chọn Paint Bucket Tool, sau đó chỉnh chế độ màu sang Bitmap

Chọn ảnh bitmap tương ứng sau đó tô màu như bình thường, ta có kết quả như sau

Chỉnh sửa một chút và ta có kết quả


40

3. Biến ảnh bitmap thành ảnh vector (Trace bitmap):

Các bức ảnh chụp thường được thêm vào Flash nhằm tăng tính chân thực. Chúng

có thể được dùng nguyên trạng hoặc được vẽ vector như những cách đã được trình

bày ở các bài trên. Tuy nhiên, việc vẽ như vậy rất tốn thời gian, và tùy thuộc vào độ

chi tiết của bức ảnh mà đôi khi không thể vector hóa bức ảnh theo cách đó.

Có một cách khác để biến ảnh bitmap thành ảnh vector nhanh chóng, đó là sử dụng

tính năng Trace Bitmap trong Flash.

Sử dụng một bức ảnh có độ tương phản đủ tốt. Có thể chỉnh sửa trước trong photoshop hoặc các phần mềm nào đó trước để bức ảnh trông sắc nét nhất.

Mở hộp thoại Trace Bitmap bằng cách mở Modify > Bitmap > Trace Bitmap

Các thông số càng nhỏ thì ảnh càng chân thực, tuy nhiên dung lượng file sẽ càng lớn

Với thong số như trên, ta thu được kết quả như sau

Sử dụng công cụ Subselection Tool, ta thấy bức ảnh đã được vector hóa hoàn toàn


41

Để giảm kích cỡ của file, ta vào Modify > Shape > Optimize…

Kết quả cuối cùng là 1 ảnh vector có dung lượng chấp nhận được và đạt được yêu cầu chuyển từ ảnh bitmap sang ảnh vector như mong muốn


42


43

Bài 4

Tạo hoạt hình với Flash CS4

1 Hoạt hình trong FlashCS4:

Flash được sinh ra với mục đích ban đầu để làm hoạt hình vector, nên tạo hoạt hình là một

phần quan trọng trong Flash.

Để làm hoạt hình trong Flash ngoài việc vẽ các frame liên tiếp khác nhau, ta còn có một cách

khác nhanh hơn đó là dùng tween.

Tween là khái niệm dùng để chỉ chuyển động được tạo ra một cách tự động, mô tả sự thay

đổi giữa 2 frame. Ví dụ: sự thay đổi vị trí, màu sắc, hình dán, … của vật thể.

Đối tượng được tween là symbol. Nếu ta không tạo symbol mà áp dụng tween ngay lập tức

với một hình vẽ, hình đó sẽ tự động được biến thành một symbol.

Mỗi layer chỉ được phép chứa một tween, không được phép chứa thêm gì khác, nếu không

tween sẽ không hoạt động.

Có 2 loại tween trong Flash:

- Motion tween: Classic tween và Motion tween cùng thuộc loại này. Từ phiên bản CS3 trở

về trước chỉ có Classic tween, không có motion tween. Về bản chất 2 tween này giống

nhau, tuy nhiên Motion tween áp dụng một số tính năng mới của Flash CS4 (ví dụ: 3D

tween) và cách sử dụng thuận tiện hơn classic tween. 2 loại tween này cùng tạo ra hoạt

hình dựa trên sự thay đổi tính chất của 1 symbol giữa 2 frame.

- Shape tween: Khác biệt cơ bản giữa shape tween và 2 loại trên nằm ở việc shape tween

không làm việc với symbol. Thay vào đó ta định nghĩa shape tween bằng việc thay đổi

đối tượng đồ họa tại 2 frame khác nhau, shape tween sẽ tự hiểu và sinh ra chuyển động

thay đổi hình dáng tương ứng. Để giúp việc này đúng như ta mong muốn, Flash cũng

cung cấp một số công cụ hỗ trợ sẽ được bàn tới trong phần tiếp theo của bài học.

Flash CS4 cung cấp một tính năng rất mạnh cho người làm hoạt hình, đó là bone.

Tính năng bone sẽ giúp ta định nghĩa khung xương của đối tượng đồ họa, qua đó ta có thể

tạo các chuyển động phức tạp như động vật di chuyển, khớp máy, …

Sau đây ta sẽ đi chi tiết vào từng tính năng hỗ trợ chuyển động trong Flash CS4.

Hãy chuyển chế độ làm việc sang “Animator” để bắt đầu tạo hoạt hình với Flash.


1. Sử dụng classic tween

2 Sử dụng motion tween

3 Sử dụng shape tween

4 Sử dụng tính năng bone

5 Tìm hiểu về mask


44

2 Sử dụng classic tween:

Vẽ quả bóng hình rổ như hình bên dưới

Chuyển quả bóng sang symbol

Đăt tên đối tượng là Ball

Click chuột phải vào frame thứ 15, chọn “Insert Keyframe”.

Thay đổi vị trí quả bóng. Lại click chuột phải vào giữa 2 frame 1 và 15, chọn “Create Classic Tween”


45

Ấn Enter để xem kết quả, hoặc chọn Control > Test Movie.

Ta cũng có thể xoay quả bóng, thay đổi các tính chất khác của quả bóng trong panel Properties

Hoặc click chuột trái vào 1 frame bất kì giữa frame đầu và cuối, nhìn sang panel Properties. Có một số tính chất đáng chú ý sau: Ease:

Trục ngang là số frame, trục dọc là số % mà Tween hoàn thành. Chỉnh đường thằng thành đường cong theo ý muốn ta sẽ có một tween thật hơn theo ý muốn. Rotate: chỉnh cho vật thể quay theo ý muốn. Sau đây, ta sẽ cho quả bóng đi theo 1 đường bất kì. Click chuột phải vào layer hiện tại, chọn “Add Classic Motion Guide”

Một layer mới được sinh ra, trong layer này ta vẽ 1 đường thẳng. Di chuyển đường thẳng / quả bóng (trong 2 frame đầu và cuối) sao cho đường thẳng đi qua điểm tròn trong quả bóng.

Frame 1 Frame 15

Chỉnh đường thẳng thành đường cong như mong muốn. Lại Test Movie lần nữa để xem kết quả. Xoay quả bóng tại frame đầu và frame cuối một chút, ta có chuyển động thuyết phục hơn rất nhiều.


46

3 Sử dụng Motion Tween:

Flash CS4 giới thiệu một chức năng mới là Motion Tween . Khái niệm Motion Tween từ các

phiên bản trước trở thành Classic Tween.

Một trong những tính năng mới của Motion Tween là có thể tạo đường di chuyển mà không

cần tạo guide layer như cách truyền thống. Thêm nữa, Motion Tween cho phép tạo hoạt họa

với chức năng 3 chiều mới trong Flash CS4. Để hiểu thêm về Motion Tween, hãy thử

nghiệm với nó, hẳn bạn sẽ không thất vọng với những nỗ lực của Adobe khi cải tiến một

trong những tính năng lâu đời và đặc trưng nhất của Flash trong các phiên bản trước của

hãng Macromedia.

Dưới đây là demo tạo một chuyển động tương tự như với Classic Tween.

Tạo một symbol mới, đặt tên là ufo

Tạo 2 key frame, và vẽ trong 2 frame như sau

Ta đã có 1 ufo tự quay xung quanh trục

Kéo ufo từ panel Library vào stage, tạo 1 frame mới ở frame thứ 60

Click chuột phải vào 1 frame bất kì nằm giữa frame đầu và cuối, chọn “Create Motion Tween”


47

Chọn frame 60, di chuyển vị trí vật thể.

Chọn 1 sô vị trí bất kì giữa 2 frame đầu và cuối, di chuyển vật thể theo cách bạn thích. Chỉnh đường màu xanh (chính là đường di chuyển của vật thể sau này) theo cách bạn thích.


48

Quay vật thể và thay đổi kích thước một chút, chọn Control > Test Movie, ta có kết quả khá giống thực. Một chiếc đĩa bay đang tiến từ xa tới gần.

Tưong tự như Classic Tween, ta cũng chỉnh sửa panel Properties của Motion Tween. Đĩa bay từ xa tới nên lúc đầu có vẻ đi chậm, lúc sau thì đi nhanh hơn. Chính vì vậy nên chỉnh trong Ease có giá trị < 0. Ở ta chọn giá trị -100 (Hãy thử nghiệm, có thể bạn sẽ tìm được các giá trị cho kết quả tôt hơn tôi). Bạn cũng có thử chức năng Motion Editor (Chọn Window > Motion Editor để panel này hiện lên) để có được chuyển động mượt hơn. Để có hiệu ứng tốt hơn, ta tạo bầu trời đầy sao phía sau đĩa bay. Tạo một symbol, đặt tên là star Click vào 1 vị trí bất kì trên stage (không click vào 1 đối tượng nào), chọn panel Properties, chỉnh màu của stage về đen.


49

Chọn brush, vẽ một chấm tròn màu trắng. Tạo một symbol mới tên là star_blinking. Kéo symbol star từ panel Library vào stage. Tạo 2 keyframe. Trong keyframe đầu tiên, chọn vật thể, mở panel Properties, nhìn xuống mục Filter. Thêm filter Blur.

Tạo keyframe thứ 2 cũng làm tương tự, nhưng giá trị trong BlurX và BlurY được chỉnh tùy ý, với điều kiện giá trị phải khác với frame đầu tiên. Quay trở lại với scene. Tạo 1 layer mới, đặt tên là bg nằm dưới layer chứa ufo. Kéo một vài symbol star_blinking từ panel Library vào. Đặt ở các vị trí bất kì. Chỉnh kích thước cho phù hợp. Ta đã có môt hoạt cảnh đĩa bay bay trong trời đêm nhấp nháy sao :D.


50

4 Sử dụng Shape Tween:

Như đã nói ở trên, shape tween tạo ra chuyển động biến hình giữa 2 hình trong 2 frame khác

nhau. Dưới đây là ví dụ chỉ ra cách thức tạo 1 shape tween.

Tạo 1 file Flash. Trong frame đầu tiên, vẽ 1 đường cong

Tạo 1 key frame tại frame số 20 Chỉnh hình cong cho dài ra 1 chút

Ở giữa 2 frame đó, ta click chuột phải vào 1 frame và chọn “Create Shape Tween”

Ta có kết quả

Như vậy là ta đã có 1 shape tween đơn giản.

Để tween chính xác hơn, ta có thể thêm Shape hint bằng cách vào Modify > Shape > Add Shape Hint.

Tại frame cuối, ta chỉnh cho điểm a ở frame đầu trùng với vị trí điểm a ơ frame cuối trên hình mà ta mong muốn


51

Test movie lần nữa, bây giờ ta đã có shape tween chính xác hơn. Càng sử dụng nhiêu shape hint thì chuyển động càng chính xác..

5 Sử dụng tính năng bone:

Ta trong phần này của bài tập, ta sẽ tạo một người chuyển động với bone tool. Bạn sẽ thấy

nó thực sự đơn giản và hiệu quả như thế nào.

Tạo một symbol tên là “chân”

Trong frame đầu tiên, vẽ một cái chân như hình dưới đây Phần đùi là đường thẳng có độ dày là 20, phần ống đồng có độ dày là 16, phần bàn chân có độ dài là 14.

Chọn bone tool Chọn cả chân

Ấn vào phần trên cùng bắp đùi, giữ chuột, kéo đến đầu ống đồng rồi thả ra.

Lại ấn chuột từ phần đầu ống đồng tới phần bàn chân rồi thả ra.

Lại tiếp túc ấn chuột phần đầu bàn chân, tới cuối thì thả ra.

Toàn bộ đối tượng đồ họa của layer ban đầu đã được copy vào layer Armature mới được sinh ra. Bạn hoàn toàn có thể xóa bỏ layer ban đầu bây giờ đã rỗng không.


52

Tại frame số 5,ta “Insert Pose” và thay đổi hình dạng chân một chút, cho chân nhấc lên (Chọn Selection Tool rồi chỉnh như hình dưới đây)

Làm tương tự với frame số 10, nhưng lần này cho chân giống frame đầu tiên 1 chút

Bây giờ ta đã có chuyên động của chân sử dụng bone.

Kết hợp với Motion Tween ta sẽ có hình người chuyển động như sau.

Kết hợp mềm dẻo giữa bone và các loại motion khác, bạn sẽ có những đoạn hoạt hình vô cùng ấn tượng mà việc tạo chúng lại rất đơn giản không hề mất nhiều công sức


53

6 Sử dụng mask trong Flash:

Ta sẽ sư dụng mask để tạo một lá cờ bay trong gió.

Tạo một symbol tên là “flag” Vẽ một hình chữ nhật như hình dưới đây

Làm cong nó

Copy, xoay và dán nó bên cạnh hình cũ, ta được

Làm vài lần ta sẽ có

Tạo 1 layer mới đặt trên layer chứa hình trên, trong layer này vẽ 1 hình chữ nhật.

Tạo motion tween cho hình dải màu chuyển động từ đầu tới cuối trong 15 frame, chú ý mép cuối

hình chữ nhật vẫn nằm trong dải màu. Layer chứa hình chữ nhật cũng có 15 frame như layer

chứa dải màu.


54

Click chuột phải vào layer này, chọn Mask

Lưu ý, để mask hoạt động, các layer mask và bị mask đều phải được khóa lại như hình trên.

Lúc này ta sẽ được lá cờ bay trong gió. Đưa vài lá cờ từ trong panel Library ra ngoài stage, chọn

Control > Test movie; ta sẽ có hình các lá cờ bay băng mask.

Bạn có thể sửa chuyển động của lá cờ một chút cho hình động có vẻ thật hơn.


55

Kết thúc bài học này các bạn đã biết cách tạo hoạt hình trong Flash CS4. Tuy nhiên những điều đề

cập bên trên chỉ là những điều cơ bản, còn rất nhiều điều thú vị về hoạt hình trong Flash mà bạn có

thể khám phá. Hãy tiếp tục khám phá và thử nghiệm, bạn sẽ thu được rất nhiều điều thú vị mà bạn

không ngờ tới.


56

Bài 5

Sử dụng âm thanh trong Flash CS4

1. Âm thanh trong FlashCS4:

Flash cung cấp một môi trường làm việc vừa đủ với âm thanh: cho phép bạn điều

chỉnh việc bắt đầu, kết húc và một số hiệu ứng cơ bản. Đừng mong chờ Flash có thể

giúp bạn làm được mọi thứ, hãy để giành những chỉnh sửa âm thanh phức tạp cho

các phần mềm chuyên dụng.

Chọn frame đầu trong file Flash,

chọn File > Import to Stage và sau

đó chọn file WAV hoặc file AIF,

MP3 của bạn (có khá nhiều loại flie

Flash có thể import được, ngoài 3

loại kể trên).

File âm thanh sẽ bắt đầu từ frame

1, do đó bạn cần chèn thêm đủ

frame để đáp ứng đủ độ dài của file

âm thanh. Mặc định, file âm thanh

sẽ được đưa về chế độ Event. Sử

dụng menu Sync để thay đổi thuộc tính của file âm thanh.

Event: Chế độ này được sử dụng để chạy file âm thanh tại một thời điểm bất kì và

độc lập hoàn toàn với các âm thanh khác. Một âm thanh được gán chế độ Event sẽ

chạy cho hết độ dài của nó kể cả khi đã hết frame (có thể xảy ra trường hợp 2 bản

của cùng 1 file âm thanh dạng Event bị chạy cùng 1 lúc). Một file âm thanh kiểu

Event phải được download hết về máy trước khi được chạy.

Start: Tương tự như Event, ngoại trừ việc nếu âm thanh đó đang chạy sẽ không có

thêm instance nào khác của nó được chạy.

Stop: Âm thanh có thuộc tính này không được tự động chạy.

Stream: Thuộc tính này được dùng để đồng bộ một âm thanh với timeline và các

chuyển động. Âm thanh kiểu stream sẽ bắt đầu và kết thúc tùy ý tùy thuộc điều

khiển.

Ấn Edit để chỉnh sửa âm thanh


1. Thêm âm thanh vào file Flash

2. Điều chỉnh âm thanh


57

Bạn sẽ nhìn thấy dạng sóng

của âm thanh và một vài tính

năng điều khiển cơ bản tại

cửa sổ này. Ở phía dưới cùng

của cửa sổ này bạn sẽ thấy

nút play, stop, công cụ để

phóng to dạng sóng của âm

thanh, lựa chọn để chuyển

giữa đơn vị thời gian là frame

và giây.

Menu Effect cho bạn một số lựa chọn để thêm hiệu ứng vào âm thanh đang có

Left Channel/Right

Channel : Âm thanh

được chạy từ phía trái

hoặc phải.

Fade Left to

Right/Fade Right to

Left : Đảo kênh âm

thanh.

Fade In/Fade Out: Âm

lượng tăng/giảm dần

dần khi âm thanh được

chạy.

Custom: Cho phép bạn

tùy chỉnh âm lượng tại các thơi điểm tùy ý.

Bạn có thể có tối đa 8 điểm xử lý bằng

cách click vào bất kì vị trí nào trong

cửa sổ điều chỉnh âm thanh. Mỗi điểm

có thể được kéo thả để điều chỉnh âm

lượng tại vị trí đó trong file âm thanh.

Vị trí điểm đó càng cao thì âm lượng

càng lớn và ngược lại. Để loại bỏ 1

điểm tùy chỉnh kéo nó ra khỏi cửa sổ

chỉnh âm thanh. Đường thẳng chỉ ra

âm lượng của âm thanh khi nó được

chạy, Tương tác với các đường thẳng

đó tương tự với các điểm như đã nói

ở trên.

Để thay đổi điểm bắt đầu và kết thúc của một âm thanh, điểu chỉnh điểm điều khiển

Time In và Time Out trong cửa sổ Edit Envelope.


58

Chương 3:

GIỚI THIỆU VỀ ACTION SCRIPT 3.0

Giới thiệu:

Action Script là ngôn ngữ kịch bản giành cho Flash, nhưng với những đặc điểm nổi trội và

sự tiến bố không ngừng như việc hướng đối tượng hoàn toàn, bộ thư viện mạnh mẽ, bộ

dịch nhanh, máy ảo hiệu quả, … ; Action Script đang trở nên mạnh mẽ và được các lập trình

viên Flash yêu thích. Chương này sẽ giúp các bạn nắm được Action Script 3.0 trên cơ sở

bạn đã có kinh nghiệm lập trình trước đây thong qua các nội dung sau:

1. Cú pháp của Action Script 3.0.

2. Lập trình hướng đối tượng.

3. Cơ chế quản lý sự kiện trong Flash.


59

Bài 1:

Làm quen với Actionscript 3.0

1. Lịch sử phát triển của Action Script:

Từ khi ra đời, Macromedia Flash đã mở ra một cuộc cách mạng về xử lý hình ảnh

động. Các version sau này càng bổ sung nhiều hiệu ứng đẹp và hấp dẫn hơn, tạo

những ấn tượng khó quên cho những người tiếp xúc với nó. Bạn có thể hỏi, điều gì

ẩn giấu sau những hiệu ứng tuyệt đẹp đó? Tôi có thể trả lời ngay cho bạn, đó chính

là Action Script mà phiên bản mới nhất hiện nay là 3.0 (AS3).

Nếu làm việc với flash, có thể thấy, bạn không nhất thiết phải sử dụng tới Action

Script để có được các hiệu ứng hoạt hình. Nhưng để tạo ra được những chương

trình có tương tác với người dùng, bạn bắt buộc phải sử dụng tới AS.

Action Script là một ngôn ngữ được viết dựa theo chuẩn ECMAScript (cùng chuẩn

tạo ra Javascript/JScript). Action Script được tạo ra cùng với Flash ngay từ những

phiên bản đầu tiên. Nhưng trong ba phiên bản đầu, nó giới hạn khả năng của lập

trình viên vì chỉ có những lệnh cơ bản để di chuyển giữa các frame, như “play”,

”stop”, “getURL” và “gotoAndPlay”. Phiên bản Flash 4 ra đời năm 1996, Action

Script mới chính thức trở thành một ngôn ngữ với việc hỗ trợ khai báo biến, biểu

thức, toán hạng, lệnh rẽ nhánh và vòng lặp; và cái tên Action Script được chính thức

sử dụng.

Năm 2000, cùng với sự ra đời của Macromedia Flash 5, AS1.0 đã hỗ trợ đầy đủ các

đặc tính của lập trình hướng cấp trúc và một phần lập trình hướng đối tượng.

Flash 6 bổ xung mô hình xử lý sự kiện, hỗ trợ switch. Đây cũng là phiên bản đầu tiên

hỗ trợ phương thức AMF và RTMP cho phép truyền âm thanh và video trực tuyến

(streaming).

Năm 2006, Flash 7 hay còn gọi là Flash MX được giới thiệu, và không chỉ mới về

những gì được hỗ trợ, AS2 cũng được ra đời với những cải tiến quan trọng với việc

hoàn chỉnh cây kế thừa một cách chặt chẽ, hỗ trợ CSS cho việc hiển thị các ký tự.

Flash 8 tiếp tục phát triển Action Script 1 và Action Script 2 với việc thêm các lớp

mới vào thư việc API để điều khiển dữ liệu bitmap tại thời gian thực, upload file, các

hiệu ứng làm mờ, đổ bóng.

Năm 2005, Sau khi bị Adobe mua lại, và với sự ra đời của flex 2, action script cũng

phát triển thêm một bước dài, đó là sự ra đời của Action Script 3, một sự lột xác

hoàn toàn, cái nhân AS2 dường như cũng bị lu mờ trước một ngôn ngữ hướng đối

tượng thuần nhất, có thể đứng độc lập mà không cần tới design như trước đây. Máy

ảo của Flash 9 cũng đã được nâng cấp lên thành phiên bản mới AVM2 (Action Script

Virtual Machine 2). AS3 hỗ trợ socket, chễ độ xem toàn màn hình, biểu thức chính

quy, một cách mới là việc với XML hiệu quả hơn (E4X XML) …


1. Lịch sử phát triển Actionscript.

2. Cú pháp


60

Flash 10 (còn gọi là Astro) đã tiến dần vào lĩnh vưc 3 chiều, Action Script của phiên

bản này hỗ trợ các hàm 3 chiều cơ bản như xoay trục X, Y, Z; hỗ trợ các hàm vẽ 3

chiều; một số tác vụ hình ảnh được chuyển bớt sang GPU khiến thời gian xử lý ảnh

được giảm đáng kết, đặc biệt với video định dạng H.264. Các thư viện âm thanh

cũng được cải tiến tốt hơn trước một cách đáng kể.

Không dừng lại việc ứng dụng Action Script trong việc tạo các file Flash chạy trên

môi trường Internet, cùng với sự phát triển của công nghệ AIR (một máy ảo tương tự

như .NET fhay Java), Adobe đã thâm nhập vào thị trường ứng dụng của máy để

bàn, tạo ra một cách tiếp cận mới trong việc xây dựng các ứng dụng truyền thống

với giao diện đặc sắc hơn, ứng dụng để bàn không chỉ là ứng dụng độc lập chỉ chạy

tại một máy mà còn hướng đến việc tương tác với máy chủ để lấy thong tin qua

mạng Internet.

2. Các khái niệm cơ bản của Action Script:

2. 1 Khởi tạo và lưu trữ biến

Lưu trữ giá trị trong ActionScript 3.0 có thể thực hiện bởi một câu lệnh đơn giản. Tuy

nhiên bạn phải chỉ ra biến lần đầu tiên bạn sử dụng. Bạn có thể làm bằng cách đặt

từ khóa “var” trước lần sử dụng biến đầu tiên

var a = 3;

Hoặc bạn chỉ ra biến trước rồi sử dụng sau

var a;

Khi bạn tạo biến với cách này, nó là kiểu đối tượng rất linh hoạt. Có nghĩa là nó có

thể giữ bất kỳ giá trị biến nào : một số, 1 xâu như Hello …

Có những kiểu biến như kiểu : int (số nguyên), number (số thập phân) string (ký tự)

Boolean ( kiểu logic đúng hoặc sai)

2. 2 Câu lệnh điều kiện

Câu lệnh if trong ActionScript 3.0 cũng giống như trong nhiều ngôn ngữ lập trình

khác

if (myValue==1)

{

Dosomething();

}

Dấu == để so sánh có bằng hay không. Bạn có thể dùng các ký hiệu so sánh khác

như >, < , >=, <= …


61

Bạn có thể dùng else và else if để mở rộng cấu trúc if

if (myValue == 1)

{

doSomething();

}

else if (myValue == 2)

{

doSomethingElse();

} else

{

doNothing();

}

Bạn có thể có các điều kiện phức tạp hơn nhờ sử dụng toán tử so sánh && (và)hay ||

(hoặc)

if ((myValue == 1) && (myString == “This”))

{

doSomething();

}

Độ ưu tiên các toán tử giống với các ngôn ngữ lập trình khác

2.3 Vòng lặp

Vòng lặp được thực hiện với khai báo for hoặc while. Lệnhfor gồm 3 phần. Phần khai

báo đầu, điều kiện, sự thay đổi khai báo. Như ví dụ dưới đây ta sẽ đặt biến i từ 0, lặp

đến khi nhỏ hơn 10, và tăng giá trị i mỗi trong suốt vòng lặp

for(var i:int=0;i<10;i++)

{

doSomething();


62

}

Bạn có thể dùng lệnh break để thoát khỏi vòng lặp bất cứ lúc nào

Vòng lặp While đơn giản là vòng lặp tiếp tục mãi chừng nào điều kiện đầu còn được

gặp

var i:int = 0;

while (i < 10)

{

i++;

}

Sự biến đổi của vòng lặp while là vòng lặp do. Về bản chất là giống nhau ngoại trừ

câu lệnh điều kiện sau vòng lặp, đảm bảo nó được thực hiện ít nhất một lần

var i:int = 0;

do

{

i++;

} while (i <10);

2.4 Function (Hàm)

Muốn tạo hàm trong ActionScript 3.0, bạn cần chỉ ra hàm, những tham số của nó và

hàm trả về cái gì. Sau đó định nghĩa hàm bằng những dòng lệnh bên trong nó

Với các hàm trong một class, bạn phải xác định nó là hàm public hay private hay

protected hay internal. Hàm private không thể được truy cập bên ngoài class đó.

Hàm protected chỉ được truy cập ở các class là con của class.

Hàm internal chỉ được phép truy cập từ các hàm trong cùng một package

Sau là một hàm cơ bản trong một class.

private function func(numb : Number, txt :String): Boolean

{

if (numb == 7) return true;

if (txt.length < 3) return true;


63

return false;

}

Mọi ví dụ đều sẽ trả về giá trị true nếu numb đúng bằng 7 và độ dài txt nhỏ hơn 3.

Còn các ví dụ khác hàm trả về false


64

Bài 2 :

LẬP TRÌNH HƯỚNG ĐỐI TƯỢNG

2.1. Giới thiệu

Hướng đối tượng (object orientation) cung cấp một kiểu mới để xây dựng phần mềm. Trong kiểu mới này, các đối tượng (object) và các lớp (class) là những khối xây dựng trong khi các phương thức (method), thông điệp (message), và sự thừa kế (inheritance) cung cấp các cơ chế chủ yếu.

Lập trình hướng đối tượng (OOP- Object-Oriented Programming) là một cách tư duy

mới, tiếp cận hướng đối tượng để giải quyết vấn đề bằng máy tính. Thuật ngữ OOP

ngày càng trở nên thông dụng trong lĩnh vực công nghệ thông tin.

Khái niệm 1

Lập trình hướng đối tượng (OOP) là một phương pháp thiết kế và phát triển

Phần mềm dựa trên kiến trúc lớp và đối tượng.

Nếu bạn chưa bao giờ sử dụng một ngôn ngữ OOP thì trước tiên bạn nên nắm vững các

khái niệm của OOP hơn là viết các chương trình. Bạn cần hiểu được đối tượng (object) là

gì, lớp (class) là gì, chúng có quan hệ với nhau như thế nào, và làm thế nào để các đối

tượng trao đổi thông điệp (message) với nhau.

OOP là tập hợp các kỹ thuật quan trọng mà có thể dùng để làm cho việc triển khai chương

trình hiệu quả hơn. Quá trình tiến hóa của OOP như sau:

Lập trình tuyến tính

Lập trình có cấu trúc

Mục tiêu:

Năm đươc cac khai niêm cơ ban : Lơp (Class), Đối tượng (Object), Thuôc tinh (attribute), phương thưc (method)…..

Các đặc điểm quan trọng trong lập trình hướng đối tượng như : tính bao gói, tính kê thưa, tính đa hình ….


65

Sự trừu tượng hóa dữ liệu

Lập trình hướng đối tượng

2.2 Đối tượng (object)

Các đối tượng là chìa khóa để hiểu được kỹ thuật hướng đối tượng. Bạn có thể nhìn

xung quanh và thấy được nhiều đối tượng trong thế giới thực như: con chó, cái bàn,

quyển vở, cây viết, tivi, xe hơi ...Trong một hệ thống hướng đối tượng, mọi thứ đều là đối

tượng. Một bảng tính, một ô trong bảng tính, một biểu đồ, một bảng báo cáo, một con số

hay một số điện thoại, một tập tin, một thư mục, một máy in, một câu hoặc một từ, thậm chí

một ký tự, tất cả chúng là những ví dụ của một đối tượng. Rõ ràng chúng ta viết một

chương trình hướng đối tượng cũng có nghĩa là chúng ta đang xây dựng một mô hình của

một vài bộ phận trong thế giới thực. Tuy nhiên các đối tượng này có thể được biểu diễn

hay mô hình trên máy tính.

Một đối tượng thế giới thực là một thực thể cụ thể mà thông thường bạn có thể sờ, nhìn

thấy hay cảm nhận được. Tất cả các đối tượng trong thế giới thực đều có trạng thái (state)

và hành động (behaviour). Ví dụ:

Các đối tượng phần mềm (software object) có thể được dùng để biểu diễn các đối tượng

thế giới thực. Chúng được mô hình sau khi các đối tượng thế giới thực có cả trạng thái và

hành động. Giống như các đối tượng thế giới thực, các đối tượng phần mềm cũng có thể

có trạng thái và hành động. Một đối tượng phần mềm có biến (variable) hay trạng thái

(state) mà thường được gọi là thuộc tính (attribute; property) để duy trì trạng thái của nó

và phương thức (method) để thực hiện các hành động của nó. Thuộc tính là một hạng

mục dữ liệu được đặt tên bởi một định danh (identifier) trong khi phương thức là một

Trạng thái Hành động

Con chó

� Tên

� Màu

� Giống

� Vui sướng

� Sủa

� Vẫy tai

� Chạy

� Ăn

Xe đạp

� Bánh răng

� Bàn đạp

� Dây xích

� Bánh xe

� Tăng tốc

� Giảm tốc

� Chuyển

bánh răng


66

chức năng được kết hợp với đối tượng chứa nó.

OOP thường sử dụng hai thuật ngữ mà sau này Java cũng sử dụng là thuộc tính

(attribute) và phương thức (method) để đặc tả tương ứng cho trạng thái (state) hay biến

(variable) và hành động (behavior). Tuy nhiên C++ lại sử dụng hai thuật ngữ dữ liệu thành

viên (member data) và hàm thành viên (member function) thay cho các thuật ngữ này.

Xét một cách đặc biệt, chỉ một đối tượng riêng rẽ thì chính nó không hữu dụng. Một

chương trình hướng đối tượng thường gồm có hai hay nhiều hơn các đối tượng phần mềm

tương tác lẫn nhau như là sự tương tác của các đối tượng trong trong thế giới thực.

Khái niệm 2

Đối tượng (Object) là một thực thể mềm bao bọc các thuộc tính và các phương thức liên quan

Kể từ đây, trong giáo trình này chúng ta sử dụng thuật ngữ đối tượng (object) để chỉ một đối tượng phần mềm. Hình 3.1 là một minh họa của một đối tượng phần mềm:

Hình 3.1 Một đối tượng phần mềm

Mọi thứ mà đối tượng phần mềm biết (trạng thái) và có thể làm (hành động) được thể hiện

qua các thuộc tính và các phương thức. Một đối tượng phần mềm mô phỏng cho chiếc xe

đạp sẽ có các thuộc tính để xác định các trạng thái của chiếc xe đạp như: tốc độ của nó là

10 km trên giờ, nhịp bàn đạp là 90 vòng trên phút, và bánh răng hiện tại là bánh răng thứ 5.

Các thuộc tính này thông thường được xem như thuộc tính thể hiện (instance attribute)

bởi vì chúng chứa đựng các trạng thái cho một đối tượng xe đạp cụ thể. Trong kỹ thuật

hướng đối tượng thì một đối tượng cụ thể được gọi là một thể hiện (instance).

Khái niệm 3


67

Một đối tượng cụ thể gọi là một thể hiên ( instance)

Hình 3.2 minh họa một xe đạp được mô hình như một đối tượng phần mềm:

Hình 3.2 Đối tượng phần mềm xe đạp

Đối tượng xe đạp phần mềm cũng có các phương thức để thắng lại, tăng nhịp đạp hay là

chuyển đổi bánh răng. Nó không có phương thức để thay đổi tốc độ vì tốc độ của xe đạp

có thể tình ra từ hai yếu tố số vòng quay và bánh răng hiện tại. Những phương thức này

thông thường được biết như là các phương thước thể hiện (instance method) bởi vì

chúng tác động hay thay đổi trạng thái của một đối tượng cụ thể.

2.3 Lớp (Class)

Trong thế giới thực thông thường có nhiều loại đối tượng cùng loại. Chẳng hạn chiếc xe

đạp của bạn chỉ là một trong hàng tỉ chiếc xe đạp trên thế giới. Tương tự, trong một

chương trình hướng đối tượng có thể có nhiều đối tượng cùng loại và chia sẻ những đặc

điểm chung. Sử dụng thuật ngữ hướng đối tượng, chúng ta có thể nói rằng chiếc xe đạp

của bạn là một thể hiện của lớp xe đạp. Các xe đạp có một vài trạng thái chung (bánh

răng hiện tại, số vòng quay hiện tại, hai bánh xe) và các hành động (chuyển bánh răng,

giảm tốc). Tuy nhiên, trạng thái của mỗi xe đạp là độc lập và có thể khác với các trạng thái

của các xe đạp khác. Trước khi tạo ra các xe đạp, các nhà sản xuất thường thiết lập

một bảng thiết kế (blueprint) mô tả các đặc điểm và các yếu tố cơ bản của xe đạp. Sau đó

hàng loạt xe đạp sẽ được tạo ra từ bản thiết kế này. Không hiệu quả nếu như tạo ra một

bản thiết kế mới cho mỗi xe đạp được sản xuất.

Trong phần mềm hướng đối tượng cũng có thể có nhiều đối tượng cùng loại chia sẻ

những đặc điểm chung như là: các hình chữ nhật, các mẫu tin nhân viên, các đoạn

phim, … Giống như là các nhà sản xuất xe đạp, bạn có thể tạo ra một bảng thiết kế cho

các đối tượng này. Một bảng thiết kế phần mềm cho các đối tượng được gọi là lớp (class).


68

Khái niệm 4

Lớp (class) là một thiết kế (blueprint) hay một mẫu ban đầu (prototype) định

nghĩa các thuộc tính và các phương thức chung cho tất cả các đối tượng của

cùng một loại nào đó

Một đối tượng là một thể hiện cụ thể của một lớp.

Trở lại ví dụ về xe đạp chúng ta thấy rằng một lớp Xedap là một bảng thiết kế cho hàng loạt

các đối tượng xe đạp được tạo ra. Mỗi đối tượng xe đạp là một thể hiện của lớp Xedap và

trạng thái của nó có thể khác với các đối tượng xe đạp khác. Ví dụ một xe đạp hiện tại có

thể là ở bánh răng thứ 5 trong khi một chiếc khác có thể là ở bánh răng thứ 3.

Lớp Xedap sẽ khai báo các thuộc tính thể hiện cần thiết để chứa đựng bánh răng hiện tại,

số vòng quay hiện tại, .. cho mỗi đối tượng xe đạp. Lớp Xedap cũng khai báo và cung cấp

những thi công cho các phương thức thể hiện để cho phép người đi xe đạp chuyển đổi

bánh răng, phanh lại, chuyển đổi số vòng quay, .. như Hình 3.3.

Hình 3.3 Khai báo cho lớp Xedap

Sau khi bạn đã tạo ra lớp xe đạp, bạn có thể tạo ra bất kỳ đối tượng xe đạp nào từ lớp

này. Khi bạn tạo ra một thể hiện của lớp, hệ thống cấp phát đủ bộ nhớ cho đối tượng và tất

cả các thuộc tính thể hiện của nó. Mỗi thể hiện sẽ có vùng nhớ riêng cho các thuộc tính thể

hiện của nó. Hình 3.4 minh họa hai đối tượng xe đạp khác nhau được tạo ra từ cùng lớp

Xedap:

Hình 3.4 Hai đối tượng của lớp Xedap


69

Ngoài các thuộc tính thể hiện, các lớp có thể định nghĩa các thuộc tính lớp (class

attribute). Một thuộc tính lớp chứa đựng các thông tin mà được chia sẻ bởi tất cả các

thể hiện của lớp. Ví dụ, tất cả xe đạp có cùng số lượng bánh răng. Trong trường hợp này,

định nghĩa một thuộc tính thể hiện để giữ số lượng bánh răng là không hiệu quả bởi vì

tất cả các vùng nhớ của các thuộc tính thể hiện này đều giữ cùng một giá trị. Trong

những trường hợp như thế bạn có thể định nghĩa một thuộc tính lớp để chứa đựng số

lượng bánh răng của xe đạp.Tất cả các thể hiện của lớp Xedap sẽ chia thuộc tính này. Một

lớp cũng có thể khai báo các phương thức lớp (class methods). Bạn có thể triệu gọi một

phương thức lớp trực tiếp từ lớp nhưng ngược lại bạn phải triệu gọi các phương thức thể

hiện từ một thể hiện cụ thể nào đó.

Hình 3.5 Lớp và thể hiện của lớp

Khái niệm 5

Thuộc tính lớp (class attribute) là một hạng mục dữ liệu liên kết với một lớp

cụ thể mà không liên kết với các thể hiện của lớp. Nó được định nghĩa bên

trong định nghĩa lớp và được chia sẻ bởi tất cả các thể hiện của lớp.

Phương thức lớp (class method) là một phương thức được triệu gọi mà

không tham khảo tới bất kỳ một đối tượng nào. Tất cả các phương thức lớp

ảnh hưởng đến toàn bộ lớp chứ không ảnh hưởng đến một lớp riêng rẽ

nào.


70

2.4 Thuộc tính (Attribute)

Các thuộc tính trình bày trạng thái của đối tượng. Các thuộc tính nắm giữ các giá trị dữ

liệu trong một đối tượng, chúng định nghĩa một đối tượng đặc thù.

Khái niệm 6

Thuộc tính (attribute) là dữ liệu trình bày các đặc điểm về một đối tượng.

Một thuộc tính có thể được gán một giá trị chỉ sau khi một đối tượng dựa trên lớp ấy được

tạo ra. Một khi các thuộc tính được gán giá trị chúng mô tả một đối tượng. Mọi đối tượng

của một lớp phải có cùng các thuộc tính nhưng giá trị của các thuộc tính thì có thể khác

nhau. Một thuộc tính của đối tượng có thể nhận các giá trị khác nhau tại những thời điểm

khác nhau.

2.5 Phương thức (Method)

Các phương thức thực thi các hoạt động của đối tượng. Các phương thức là nhân tố

làm thay đổi các thuộc tính của đối tượng.

Khái niệm 7

Phương thức (method) có liên quan tới những thứ mà đối tượng có thể làm.

Một phương thức đáp ứng một chức năng tác động lên dữ liệu của đối

tượng (thuộc tính).

Các phương thức xác định cách thức hoạt động của một đối tượng và được thực thi khi

đối tượng cụ thể được tạo ra.Ví dụ, các hoạt động chung của một đối tượng thuộc lớp Chó

là sủa, vẫy tai, chạy, và ăn. Tuy nhiên, chỉ khi một đối tượng cụ thể thuộc lớp Chó được tạo

ra thì các phương thức sủa, vẫy tai, chạy, và ăn mới được thực thi.

Các phương thức mang lại một cách nhìn khác về đối tượng. Khi bạn nhìn vào đối

tượng Cửa ra vào bên trong môi trường của bạn (môi trường thế giới thực), một cách đơn

giản bạn có thể thấy nó là một đối tượng bất động không có khả năng suy nghỉ. Trong tiếp

cận hướng đối tượng cho phát triển hệ thống, Cửa ra vào có thể được liên kết tới

phương thức được giả sử là có thể được thực hiện. Ví dụ, Cửa ra vào có thể mở, nó có

thể đóng, nó có thể khóa, hoặc nó có thể mở khóa. Tất cả các phương thức này gắn kết

với đối tượng Cửa ra vào và được thực hiện bởi Cửa ra vào chứ không phải một đối tượng

nào khác.

Ví dụ

package {

import flash.display.Sprite;

public class Xedap extends Sprite

{


71

public function Xedap()

{

var maxspeed;

var xich;

}

public function start() : void

{

}

public function end() : void

{

}

}

}

Lơp Xedap co thuôc tinh la cac thong so maxspeed, xich va phương thưc start, end

2.6 Thông điệp (Message)

Một chương trình hay ứng dụng lớn thường chứa nhiều đối tượng khác nhau. Các đối

tượng phần mềm tương tác và giao tiếp với nhau bằng cách gởi các thông điệp

(message). Khi đối tượng A muốn đối tượng B thực hiện các phương thức của đối tượng

B thì đối tượng A gởi một thông điệp tới đối tượng B.

Ví dụ đối tượng người đi xe đạp muốn đối tượng xe đạp thực hiện phương thức

chuyển đổi bánh răng của nó thì đối tượng người đi xe đạp cần phải gởi một thông điệp tới

đối tượng xe đạp.

Đôi khi đối tượng nhận cần thông tin nhiều hơn để biết chính xác thực hiện công việc gì. Ví

dụ khi bạn chuyển bánh răng trên chiếc xe đạp của bạn thì bạn phải chỉ rõ bánh răng nào

mà bạn muốn chuyển. Các thông tin này được truyền kèm theo thông điệp và được gọi là

các tham số (parameter).

Một thông điệp gồm có:

Đối tượng nhận thông điệp

Tên của phương thức thực hiện

Các tham số mà phương thức cần


72

Khái niệm 8

Một thông điệp (message) là một lời yêu cầu một hoạt động.

Một thông điệp được truyền khi một đối tượng triệu gọi một hay nhiều

phương thức của đối tượng khác để yêu cầu thông tin.

Khi một đối tượng nhận được một thông điệp, nó thực hiện một phương thức tương ứng.

Ví dụ đối tượng xe đạp nhận được thông điệp là chuyển đổi bánh răng nó sẽ thực hiện việc

tìm kiếm phương thức chuyển đổi bánh răng tương ứng và thực hiện theo yêu cầu của

thông điệp mà nó nhận được.

2.7 Tính bao gói (Encapsulation)

Trong đối tượng xe đạp, giá trị của các thuộc tính được chuyển đổi bởi các phương thức.

Phương thức changeGear() chuyển đổi giá trị của thuộc tính currentGear. Thuộc tính

speed được chuyển đổi bởi phương thức changeGear() hoặc changRpm().

Trong OOP thì các thuộc tính là trung tâm, là hạt nhân của đối tượng. Các phương

thức bao quanh và che giấu đi hạt nhân của đối tượng từ các đối tượng khác trong chương

trình.Việc bao gói các thuộc tính của một đối tượng bên trong sự che chở của các phương

thức của nó được gọi là sự đóng gói (encapsulation) hay là đóng gói dữ liệu.

Đặc tính đóng gói dữ liệu là ý tưởng của các nhà thiết các hệ thống hướng đối

tượng. Tuy nhiên, việc áp dụng trong thực tế thì có thể không hoàn toàn như thế. Vì những

lý do thực tế mà các đối tượng đôi khi cần phải phơi bày ra một vài thuộc tính này và che

giấu đi một vài phương thức kia. Tùy thuộc vào các ngôn ngữ lập trình hướng đối tượng

khác nhau, chúng ta có các điều khiển các truy xuất dữ liệu khác nhau.

Khái niệm 9

Đóng gói (encapsulation) là tiến trình che giấu việc thực thi chi tiết của một

đối tượng.

Một đối tượng có một giao diện chung cho các đối tượng khác sử dụng để giao tiếp với

nó. Do đặc tính đóng gói mà các chi tiết như: các trạng thái được lưu trữ như thế nào hay

các hành động được thi công ra sao có thể được che giấu đi từ các đối tượng khác. Điều

này có nghĩa là các chi tiết riêng của đối tượng có thể được chuyển đổi mà hoàn toàn

không ảnh hưởng tới các đối tượng khác có liên hệ với nó. Ví dụ, một người đi xe đạp

không cần biết chính xác cơ chế chuyển bánh răng trên xe đạp thực sự làm việc như thế

nào nhưng vẫn có thể sử dụng nó. Điều này được gọi là che giấu thông tin.

Khái niệm 10

Che giấu thông tin (information hiding) là việc ẩn đi các chi tiết của thiết kế hay thi công từ các đối tượng khá


73

2.8 Tính thừa kế (Inheritance)

Hệ thống hướng đối tượng cho phép các lớp được định nghĩa kế thừa từ các lớp khác. Ví dụ, lớp xe đạp leo núi và xe đạp đua là những lớp con (subclass) của lớp xe đạp. Như vậy ta có thể nói lớp xe đạp là lớp cha (superclass) của lớp xe đạp leo núi và xe đạp đua.

Khái niệm 11

Thừa kế (inheritance) nghĩa là các hành động (phương thức) và các thuộc

tính được định nghĩa trong một lớp có thể được thừa kế hoặc được sử dụng

lại bởi lớp khác.

Khái niệm 12

Lớp cha (superclass) là lớp có các thuộc tính hay hành động

được thừa hưởng bởi một hay nhiều lớp khác.

Lớp con (subclass) là lớp thừa hưởng một vài đặc tính chung của lớp cha và

thêm vào những đặc tính riêng khác.

Các lớp con thừa kế thuộc tính và hành động từ lớp cha của chúng. Ví dụ, một xe đạp leo

núi không những có bánh răng, số vòng quay trên phút và tốc độ giống như mọi xe đạp

khác mà còn có thêm một vài loại bánh răng vì thế mà nó cần thêm một thuộc tính là

gearRange (loại bánh răng).

Các lớp con có thể định nghĩa lại các phương thức được thừa kế để cung cấp các thi công

riêng biệt cho các phương thức này. Ví dụ, một xe đạp leo núi sẽ cần một phương thức

đặc biệt để chuyển đổi bánh răng.

Các lớp con cung cấp các phiên bản đặc biệt của các lớp cha mà không cần phải định

nghĩa lại các lớp mới hoàn toàn. Ở đây, mã lớp cha có thể được sử dụng lại nhiều lần.

Ví dụ:

Ở mục trên ta đã có lớp Xedap, trong vi du nay ta tao môt lơp xe XedapDiaHinh kê thưa tư

lơp xe đap, ta viêt 2 class nay trong cung package măc đinh:

Package {

Import flash.display.Sprite;

public class XedapDiaHinh extends Xedap{

public function leodoc():void{


74

}

}

}

Lơp XedapDiaHinh co đu cac thuôc tinh maxspeed, xich như lơp Xedap, có đủ các phương

thưc start, end ngoai ra no con co phương thưc leodoc la phương thưc riêng chi lơp con

XedapDiaHinh co mà lớp cha không co

2.9 Tính đa hình (Polymorphism)

Một khái niệm quan trọng khác có liên quan mật thiết với truyền thông điệp là đa hình

(polymorphism). Với đa hình, nếu cùng một hành động (phương thức) ứng dụng cho các

đối tượng thuộc các lớp khác nhau thì có thể đưa đến những kết quả khác nhau.

Khái niệm 13

Đa hình (polymorphism) nghĩa là “nhiều hình thức”, hành động cùng tên có

thể được thực hiện khác nhau đối với các đối tượng các lớp khác nhau.

Chúng ta hãy xem xét các đối tượng Cửa Sổ và Cửa Cái. Cả hai đối tượng có một hành động chung có thể thực hiện là đóng. Nhưng một đối tượng Cửa Cái thực hiện hành động đó có thể khác với cách mà một đối tượng Cửa Sổ thực hiện hành động đó. Cửa Cái khép cánh cửa lại trong khi Cửa Sổ hạ các thanh cửa xuống. Thật vậy, hành động đóng có thể thực hiện một trong hai hình thức khác nhau. Một ví dụ khác là hành động hiển thị. Tùy thuộc vào đối tượng tác động, hành động ấy có thể hiển thị một chuỗi, hoặc vẽ một đường thẳng, hoặc là hiển thị một hình.

Đa hình có sự liên quan tới việc truyền thông điệp. Đối tượng yêu cầu cần biết hành

động nào để yêu cầu và yêu cầu từ đối tượng nào. Tuy nhiên đối tượng yêu cầu không

cần lo lắng về một hành động được hoàn thành như thế nào.

Ví dụ:

Ta co môt class Nguoi co phương thưc:

public function hocdixedap(xd:Xedap):void

{

xd.start();


75

}

Phương thưc trên đươc truyên vao môt đôi tương kiêu Xedap , nhưng do tinh đa hinh . Môt

đôi tương kiêu XedapDiaHinh cung la môt đôi tương kiêu Xedap , nên ta co thê c ó cách

dùng phương thức hocdixedap như sau:

Giả sử ta có đối tượng ng kiểu Nguoi

var xd : XedapDiaHinh = new XedapDiaHinh();

Ng.hocdixedap(xd);

.


76

Bài 3:

SỰ KIỆN

Như đã nói về flash và as3, nếu flash phổ biến với khả năng trợ giúp người dùng trong thiết kế thì

sức mạnh giúp người dùng có thể tương tác với chương trình đó là AS. Rõ ràng, khi người dùng

muốn thực hiện một việc nào đó thì họ phải tác động lên một đối tượng của chương trình. Mỗi tác

động đó của người dùng (thông qua bàn phím, chuột, webcam, mic...) sẽ tạo ra một sự kiện trong

dòng sự kiện của hệ thống. Máy ảo flash player sẽ tìm kiếm và xác định sự kiện đó có thuộc tính như

thế nào và chuyển đến hàm xử lý sự kiện tương ứng. Như vậy, có thể thấy, muốn tạo ra một chương

trình flash có tương tác thì không thể không biết tới Event. Trong bài này chúng ta sẽ nói rõ về Event

3.1: Sự kiện là gì?

Event là lớp nằm ngay dưới lớp Object, là lớp cha của tất cả các lớp khác. Nó là lớp cơ bản

để tạo ra các đối tượng Event, là biến truyền vào trong các hàm lắng nghe sự kiện khi một

Event xảy ra.

Các thuộc tính của lớp Event mang theo những thông tin cơ bản về một Event, như là kiểu

sự kiện hoặc hành động mặc định của sự kiện có thể bị hủy bỏ hay không. Trong phần lớn

Event, những thông tin cơ bản này là rất qua n trọng. Một vài loại sự kiện khác có thể mang

theo nhiều thông tin hơn, ví dụ: Một sự kiện được phát ra khi click chuột, nó có thể mang

theo tham chiếu tới đối tượng được click, vị trí click (tọa độ x và y)...

Thêm một điều quan trọng nữa, đó là một đối tượng chỉ có thể lắng nghe sự kiện khi sự kiện

đó do chính nó phát ra. Bạn có thể hỏi như vậy thì sử dụng thế nào, phần tiếp theo sẽ nói

tới điều này.

3.2: Sử dụng sự kiện như thế nào?

Như đã nói, một đối tượng chỉ có thể lắng nghe một sự kiện nếu sự kiện đó do chính nó

phát ra. Điều này đảm bảo cho dòng sự kiện không bị rối lọan khi máy ảo flash player tìm

kiếm đối tượng lắng nghe.

Hãy xem một ví dụ đơn giản: tạo một đối tượng bất kì trong stage chính của chương trình,

đặt tên cho nó là button, viết trong timeline của nó đoạn code như sau:


1. Định nghĩa sự kiện.

2. Cơ chế làm việc của sự kiện trong Flash.

3. Áp dụng sự kiện trong Flash


77

button.addEventListener(MouseEvent.CLICK, onClickHandler);

function onClickHandler(e: MouseEvent): void

{

trace(“bạn vừa click vào button”);

}

Khi chạy chương trình, mỗi khi bạn click vào đối tượng đã vẽ thì tại màn hình output sẽ xuất

hiện dòng chữ “bạn vừa click vào button”.

Trong đọan code trên, chúng ta sử dụng hàm addEventListener(), hàm này được định nghĩa

trong class EventDispatcher, là anh em của lớp Event, class này định nghĩa ra các quy tắc

để một sự kiện được phát ra. Hàm addEventListener() nhận vào 2 tham số chính là kiểu

Event, ở đây là MouseEvent.CLICK và tham số thứ hai là hàm được gọi khi sự kiện sảy ra,

ở đây, hàm là onClickHandler(). Hàm onClickHandler() nhận tham số luôn luôn là kiểu sự

kiện mà từ đó nó được gọi, trong ví dụ trên, hàm được gọi khi sự kiện mouse click xảy ra

nên tham số mà nó nhận vào thuộc kiểu MouseClick.

Dạng đầy đủ của hàm addEventListener :

public function addEventListener(type:String,

listener:Function,

useCapture:Boolean = false,

priority:int = 0,

useWeakReference:Boolean = false):void

Trước khi nói tới 3 tham số còn lại, cần phải hiểu quá trình một Event được xử lý. Khi có

một sự kiện xảy ra, nó trải qua 3 quá trình của luồng sự kiện:

1. Giai đoạn nắm bắt: sự kiện chuyển từ phía trên cùng của danh sách thứ bậc tới node chỉ trước node mục tiêu.

2. Giai đoạn mục tiêu: ở đây, đối tượng lắng nghe sự kiện được xác định, và các giá trị mà sự kiện mang theo được khảo sát

3. Giai đoạn nổi bọt.

Tại 3 quá trình này, tất cả thuộc tính của sự kiện được khảo sát và đưa vào luồng sự kiện

hệ thống, đồng thời được gửi tới hàm xử lý nó.

Quay trở lại các tham số còn lại trong hàm addEventListener:


78

1. useCapture: giá trị, mặc đinh là fasle, nếu nó là true, sự kiện sẽ được xử lý ngay trong quá trình nắm bắt của luồng sự kiện. Hãy nhớ rằng, tại giai đoạn nắm bắt, node mục tiêu chưa được xử lý nên hàm bắt sự kiện sẽ không được gọi.

2. priority: mặc định là 0, nó cho biết độ ưu tiên của 1 sự kiện nếu cùng một lúc xảy ra nhiều sự kiện, nếu tham số này càng lớn thì sự kiện có độ ưu tiên càng cao

3. useWeakReference: tham số này quyết định những tham chiếu tới việc lắng nghe sự kiện này là mạnh hay yếu, mặc định là false, có Nghĩa là mạnh. Nếu useWeakReference = false, nó sẽ ngăn ngừa việc các tham chiếu bị xóa bỏ bởi bộ dọn rác.

Trong thực tế, 3 tham số trên không thường được sử dụng nên các bạn cũng chỉ cần quan

tâm tới 2 tham số bắt buộc là type và listener mà thôi.

Tới đây, bạn có thể đặt câu hỏi, có thể khởi tạo để một đối tượng để nó lắng nghe một sự

kiện thì có thể hủy bỏ điều đó không, câu trả lời là có, sử dụng hàm removeEventListener để

làm việc này, với các tham số giống với những gì bạn đã sử dụng trong hàm

addEventListener().

3.3: Cần chú ý những gì khi làm việc với Event?

Những câu hỏi thường gặp nhất bạn đều có thể được giải quyết khi đọc help của flash. Tuy

thế tôi xin đưa ra ở đây một số chú ý quan trọng:

1. Mỗi đối tượng chỉ có thể nghe được một số loại Event (không kể những loại do người dùng tự định nghĩa), tất cả đều được liệt kê trong đặc tả của lớp mà đối tượng đó thuộc về. Nên đọc kĩ những đặc tả này trước khi làm việc.

2. Một đối tượng phát ra được Event nào thì có thể và chỉ có thể nghe được Event đó. Thậm chí, nếu 2 đối tượng thuộc cùng 1 class cũng không thể nghe được sự kiện do đối tượng kia phát ra

3. Nhớ removeEventListener() sau khi sử dụng, để giảm bộ nhớ mà chương trình chiếm dụng.

4. Không nên để một đối tượng lắng nghe quá nhiều Event nếu bạn chưa thực sự hiểu rõ về chúng. Sự thật, điều này làm chương trình của bạn chạy không ổn định.

5. Hãy tự tạo cho mình những Event riêng, điều này rất tốt vì như vậy bạn có thể kết hợp nhiều Event có sẵn để tạo được 1 Event riêng, nó giải quyết được vấn đề mà mục 4 nêu ra.

3.4: Bạn vẫn còn thắc mắc chứ?

Tới đây chắc bạn đã phần nào hiểu được về Event. Tôi xin được đưa ra một ví dụ cụ thể

cho các chú ý đã nêu trên

Bước 1: Tạo một file flash mới đặt tên là EventExample.fla, lưu lại. Chúng ta không cần vẽ

gì trong file này cả, tìm tới màn hình properties của stage chính, viết tên document class là

Main.


79

Bước 2: Tạo một file mới có tên Main.as, lưu vào cùng thư mục với file đã tạo trong bước 1.

Giờ trở lại với file EventExample.fla, ta mở cửa sổ properties ra, click vào hình cây bút chì ở

cạnh ô nhập tên document class, file Main.as sẽ được mở ra trong 1 tab mới. Chúng ta

chưa làm gì vội với file này

Bước 3: Tạo một file mới có tên NewEvent.as đặt trong cùng thư mục với 2 file đẵ tạo ở

trên, mở file này ra và viết code cho nó như sau:

package

{

import flash.events.*;

public class NewEvent extends Event

{

public static var NEW_EVENT : String = "new event";

public var index: Number = new Number();

public function NewEvent(type:String,index:int,

bubbles:Boolean=false, cancelable:Boolean=false)

{

super(type, bubbles, cancelable);

this.index = index;

}

override public function clone():Event

{

return new NewEvent(type, this.index, bubbles,

cancelable);

}

}

}

Đoạn code trên mô tả một class được thừa kế từ Event, nó có một thuộc tính là

NEW_EVENT thuộc kiểu string và có dạng static. Điều này có nghĩa là chúng ta có thể truy

nhập vào thuộc tính này mà không cần khởi tạo một đối tượng mới thuộc kiểu NewEvent, và

thuộc tính này sẽ trở thành một Event thuộc kiểu NewEvent, nó giống với các từ khóa khi ta

sử dụng kiểu MouseEvent là CLICK hay MOUSE_UP... Biến thứ 2 là index có kiểu Number

(kiểu số tổng quát), biến này lưu một giá trị mà Event phải mang theo khi nó được phát ra.

Constructor của class này truyền vào 4 tham số:

1. Tham số thứ nhất là type, có thể thấy trong MouseEvent, chúng ta có các kiểu như: CLICK, DOUBLE_CLICK, MOUSE_OUT, MOUSE_OVER..... đó là những kiểu event được khai báo là các hằng static (các biến kiểu static có thể sử dụng mà không cần khai báo đối tượng, trong đoạn code trên kiểu được khai báo là public static var NEW_EVENT : String = "new event";)

2. Tham số thứ 2 là index, như đã nói ở trên, đây là giá trị mà Event sẽ mang theo khi nó được phát ra, mà trước khi được phát ra thì nó phải được khởi tạo và truyền vào một index.


80

3. Tham số thứ 3 là bubbles, như đã nói, khi một Event xảy ra, nó trải qua 3 giai đoạn, nếu một Event không cần tới giai đoạn Bubbles thì thuộc tính bubbles của nó sẽ có giá trị false, thông thường, tham số này là mặc định false, ta không cần phải quan tâm

4. Tham số cuối cùng là cancelable, sau khi được khởi tạo, nó trở thành thuộc tính read only, nó cho biết rằng một Event xảy ra có thể hủy bỏ được những hành động mặc định của nó không. Ví dụ, khi ta nhập ký tự vào một ô text, sự kiện TextEvent.TEXT_INPUT xảy ra mỗi lần ta ấn phím, hành động mặc định của nó là hiển thị phím ta vừa ấn (nếu được). Ta hoàn toàn có thể sử dụng hàm preventDefault() để thay đổi sự kiện mặc định đó do sự kiện TextEvent.TEXT_INPUT có thuộc tính cancelable là true.

Sau khi nhận 4 tham số trên, constructor gọi hàm khởi tạo của cha nó là Event, rồi gán giá

trị index được truyền vào cho thuộc tính index của nó.

Sau khi khởi tạo một Event, để phát ra được Event đó thì chúng ta cần gọi tới hàm

dispatchEvent(e: Event), hàm này làm nhiệm vụ đưa một Event vào luồng sự kiện của hệ

thống. Mặt khác nó cũng gọi tới một hàm được định nghĩa trong Class Event, đó là clone().

Hàm này trả về một đối tượng Event. Thông thường chúng ta thường muốn trả về chính xác

kiểu Event chúng ta tạo ra nên hàm clone() được viết lại (như trên)

Bước 4: Tạo ra một file mới để làm đối tượng phát ra Event tại thư mục lưu chương trình.

File mới có tên là Rect.as, code của nó như sau:

package

{

import flash.display.MovieClip;


import flash.events.*;

public class Rect extends MovieClip

{

private var index: int = new int();

private var mySprite: Sprite = new Sprite();

public function Rect(ind: int): void

{

this.index = ind;

this.addEventListener(MouseEvent.CLICK, onClickHandler);

mySprite.graphics.beginFill(0x001177, 1);

mySprite.graphics.drawRect(0, 0, 50, 50);

mySprite.graphics.endFill();

this.addChild(mySprite);

}


81

private function onClickHandler(e: MouseEvent): void

{

var evt: NewEvent = new NewEvent(NewEvent.NEW_EVENT,

this.index, false, false);

dispatchEvent(evt);

}

}

}

Class này nhằm tạo ra một đối tượng hình vuông, có thuộc tính là indexrồi cho nó lắng nghe

sự kiện click, mỗi khi đó sẽ gọi ra hàm onClickHandler(e: MouseEvent). Hàm này làm nhiệm

vụ sinh ra môt đối tượng Event thuộc kiểu NewEvent mà ta đã tạo ra trong bước 3 rồi phát

nó ra, mang theo thuộc tính index của bản thân, bạn nên nhớ thuộc tính này là private và

cũng không có hàm set/get nào khác, về lý thuyết không thể lấy được giá trị này của mỗi đối

tượng Rect.

Bước 5: Quay trở lại hàm class Main đã tạo ra trong bước 2, ta viết code cho nó như sau:

package

{


import flash.geom.Rectangle;

import flash.text.TextField;

import flash.text.TextFormat;

public class Main extends Sprite

{

private var txt: TextField = new TextField();

private var arr: Array = new Array();

public function Main(): void

{

this.addChild(txt);

txt.x = 100;

txt.y = 100;

txt.width = 400;

var i:int = new int();

for (i = 1; i <= 10; i++)

{

var rect: Rect = new Rect(i);

arr.push(rect);

}

for (i = 0; i < arr.length; i++)

{

Rect(arr[i]).addEventListener(NewEvent.NEW_EVENT,

displayIndex);

this.addChild(arr[i]);

this.arr[i].x = (i * 80);

}


82

}

private function displayIndex (e: NewEvent): void

{

var format: TextFormat = new TextFormat("Tahoma", 20,

0xff1111);

this.txt.text = "Bạn đã click vào hình vuông thứ " +

(e.index).toString();

this.txt.setTextFormat(format);

}

}

}

Hàm này làm nhiệm vụ khởi sinh ra 10 đối tượng Rect, có index chạy từ 1 => 10, add nó lên

màn hình. Đồng thời tạo ra một text field để hiển thị. Bạn hãy chú ý lệnh

Rect(arr[i]).addEventListener(NewEvent.NEW_EVENT, displayIndex);

Lệnh này khai đăng kí để mỗi đối tượng thuộc kiểu Rect lắng nghe sự kiện

NewEvent.NEW_EVENT. Hàm được gọi khi sự kiện này xảy ra là displayIndex(e: NewEvent), có

danh sách biến giống với việc bạn sử dụng những Event thông thường khác. Một lần nữa chú ý tới

lệnh

this.txt.text = "Bạn đã click vào hình vuông thứ " + (e.index).toString();

Hàm này sẽ đưa dòng chữ “bạn đã click vào hình vuông thứ i” với i = (e.index).toString(); ở đây e là

biến thuộc kiểu NewEvent, nó chính là đối tượng đã được phát ra từ hàm dispatchEvent() trong

class Rect. Dễ thấy, mỗi lần bạn click vào một hình vuông, một sự kiện NewEvent được phát ra, khi

đó text field sẽ hiển thị index của đối tượng được click. Dưới đây là những gì bạn sẽ thấy:


83

Tôi đã click vào hình vuông thứ 3 và dòng chữ “Bạn đã click vào hình vuông thứ 3” xuất hiện. Vậy là,

tuy thuộc tính index của mỗi đối tượng thuộc kiểu Rect là private, nhưng chúng ta vẫn có thể lấy

được nó từ class Main.

Tới đây, bạn có lẽ sẽ thấy, ví dụ này chưa đáp ứng được những gì nêu ra trong mục 3.3, vậy thì hãy

thử thay đổi một số thứ coi. Đầu tiên thay dòng

Rect(arr[i]).addEventListener(NewEvent.NEW_EVENT, displayIndex);

Bằng:

if(i<arr.length-1) Rect(arr[i]).addEventListener(NewEvent.NEW_EVENT,

displayIndex);

Có nghĩa là hinh vuông thứ 10 không lắng nghe sự kiện như các hình khác. Nhưng bản than nó vẫn

tự nghe sự kiện click và phát ra sự kiện NewEvent.NEW_EVENT. Vấn đề là không hề có dòng chữ

nào hiện ra cả. Câu hỏi đặt ra: tại sao tất cả 9 đối tượng còn lại đều lắng nghe

NewEvent.NEW_EVENT, đối tượng thứ 10 phát ra sự kiện này nhưng không tự nghe, tại sao các

đối tượng khác không nghe và hiển thị thông tin index của đối tượng số 10 kia. Câu trả lời đúng như

những gì mục 3.3.1 và 3.3.2 nêu ra.

Tiếp nữa, giả sử mỗi đối tượng Rect không chỉ phải nghe sự kiện click mà còn phải nghe một vài sự

kiện khác. Rõ rang rằng nếu xử lý điều đó ở hàm Main thì sẽ rất tốn công. Thay vì thế ta xử lý việc

kiểm tra các sự kiện khác đã xảy ra chưa, nếu rồi thì phát ra Event để hàm Main nhận và xử lý. Điều

này giải quyết những gì mà mục 3.3.3 và 3.3.5 đưa ra.

Việc removeEventListener không được nêu ra ví dụ trong trường hợp này, tuy thế đây là một chú ý

không kém phần quan trọng. Các bạn hãy tham khảo bài 1 chương 4 về code trên timeline, trong đó

có sử dụng tới hàm đó, hãy đọc kĩ và thử thay đổi để không sử dụng lệnh đó nữa, bạn sẽ thấy một số

bất ổn.

Trước khi kết thúc, cảm ơn vì bạn đã theo dõi tới đây….


84

Chương 4:

GIỚI THIỆU VỀ FLEX FRAMEWORK

Giới Thiệu:

Đúng như tên gọi Flex là một Framework (khung lập trình) hỗ trợ lập trình viên viết các ứng

dụng dựa trên SWF (SWF-Based Application), các ứng dụng này chạy trên Flash Player từ

phiên bản 9 trở lên, hiện tại phiên bản mới nhất là phiên bản 10. Cũng như .NET Framework

và Java, Flex Framework tích hợp sẵn các Component (như Button, Panel, Container, List,

Link Button, Box,..) để viết ứng dụng. Các ứng dụng mới này có tên là RIA (Rich Internet

Applicaton) , là xu thế mới nhất về viết ứng dụng hay viết phần mềm, trong khuôn khổ bài

viết tôi sẽ chỉ nói sơ qua RIA là gì.

Một các dễ hiểu , RIA là các ứng dụng chạy trên Internet nhưng lại mang đầy đủ sức mạnh

của các ứng dụng chạy trên Desktop truyền thống. Đó có thể là các ứng dụng soạn thảo

văn bản , tạo slide , chỉnh sửa và chia sẻ ảnh trực tuyến. Các ứng dụng này có 2 trạng thái

làm việc, một là offline và online. Nói đến đây có thể các bạn có thể còn khá mơ hồ về RIA,

hãy bắt đầu bằng việc truy cập vào trang Acobat.com hay PhotoshopExpress.com ,

SlideRocket.com thử dùng các ứng dụng này để có được hình dung về RIA. Sau đó hãy

cùng tôi tìm hiểu về Flex để học cách viết các ứng dụng RIA.

Ý tưởng về sự ra đời của Flex là do, mối trường của Flash hỗ trợ rất kém cho việc code,

khiến các Developer những người không có kiến thức về Design gặp rất nhiều khó khắn

trong việc viết ứng dụng cũng như tạo các Animation Script trên nền Flash (Flash

Platform).Với nhược điểm này của Flash, Adobe đã tung ra Adobe Flex, với mục đích hỗ trợ

tốt hơn cho các Developer, giúp họ viết được các ứng dụng một cách nhanh nhất , tạo các

Animation hoàn toàn bằng code. Đồng thời với phiên bản mới nhất hiện sẽ phát hành vào

cuối năm 2009 , Adobe Flex 4 (tên mã là Gumbo) hứa hẹn sẽ tạo ra một môi trường phát

triển ứng dụng hoàn hỏa cho cả Designer và Developer. Bạn hãy hình dung một bối cảnh

như sau, các Designer sẽ thiêt kế bằng Adobe Photoshop hay iLLustrator hay FireWork hay

Flash, tất cả các nét vẽ của họ sẽ được giữ nguyên khi bạn import vào Adobe Flex 4.Và

nhiệm vụ của chúng ta, những người Developer sẽ tạo các chức năng, xủ lý , kết nối dữ

liệu, hiệu ứng, và hiện thực hóa ý tưởng của các Designer trong ứng dụng .

Trong chương này chúng ta sẽ học được các cách sau:

Cài đặt Flex Builder 3 for Window, MAC.

1. Làm quen mới giao diện sử dụng của Flex Builder. 2. Sử dụng MXML + AS3 cơ bản trong Flex Builder 3. 3. Những đặc điểm đáng chú ý của MXML. 4. Làm quen với các Component cơ bản của Flex Framework.


85

Bài 1:

CÀI ĐẶT FLEX BUILDER 3

Nếu một trong số các bạn từng viết Java, lúc bắt đầu họ sẽ dậy cách chạy các doạn code

java bằng lệnh trong Command Promp (Start->Run, gõ “cmd” rồ Enter). Để soạn code java

bạn có thể dùng Notepad (Start->Run, gõ “Notepad”, Enter) để soạn thảo.Muốn dịch một file

java bạn phải gõ lệnh, giả sử tôi có một file tên là Hello.java trog thư mục D:/Java, muốn

dịch file này để chạy tôi gõ lệnh C:/javac D:/Java/Hello.java . Bộ Java SDK (Software

Development Kit) sẽ tự động dịch file này, tuy nhiên nếu chương trình bạn có lỗi, sẽ rất khó

có thể tìm ra lỗi (debug) của đoạn code đó ở đâu. May mắn thay, nhờ có các trình soạn thỏa

và biện dịch (IDE – Intergrated Development Environment) hiện đại, sẽ giúp ta soạn thảo,

dịch cũng như sửa lỗi chương trình dễ dàng và thuận tiện hơn rất nhiều.

Tương tự Flex cũng vậy, bạn có thể dùng Notepad để soạn thảo và dùng lệnh trong

Command Promp để dịch, hoặc dùng Flex Builder 3 là một IDE giúp bạn soạn code nhanh

chóng và dễ dàng. Adobe Flex Builder 3 viết trên nền Eclipse IDE là một IDE mã mở viết

bằng Java, Adobe đã thương mại hóa Flex Builder 3, nó có 2 phiên bản là Stand Alone

(chạy độc lập) và Plug-in cho Eclipse. Bạn dùng bản nào cũng được , tuy nhiên các ví dụ sẽ

được dùng bằng Flex Builder 3. Flex Builder là bản thương mại nhưng nếu các bạn là sinh

viên thì có thể đắng ký với Adobe để nhận được key giành cho sinh viên, hoàn toàn miễn

phí.(cung cấp link). Với ý kiến cá nhân tôi khuyên bạn nên dùng Flex Builder 3 trước, sau đó

dùng Plug-in cho Eclipse sau.

Một tin mừng nữa là Flex SDK đã và đang hướng tới Open-Source (mã nguồn mở) , điều

này rất có ích vì các bạn có thể kiếm được các đoạn code quý và hay, giúp nâng cao khả

năng code của mình.Các bạn có thể vào trang opensource.adobe.com hoặc

labs.adobe.com để tìm những dự án mã mở mới nhất do Adobe cung cấp. Để tìm các ví dụ

(sample) về Flex bạn có thể vào trang Adobe.com/devnet/flex chọn tab Sample, các

samples này đều cung cấp code cho bạn. Để chạy được nó các bạn phải cài Flash Player

mà chút nữa tôi sẽ hướng dấn bạn cài đặt. Để lấy được code của các ví dụ, khi đang chạy

bạn ấn chuột phải rồi chọn “ViewSource”.


1. Giới thiệu Flex Builder 3.

2. Cài đặt Flex Builder 3

../Java

/C:/javac

../Java/Hello.java


86

Nào, trước tiên hãy download Flex Builder 3. Đầu tiên bạn vào trang

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3 ,

Chọn hệ điều hành mà bạn sử dụng. Bản thương mại hiện tại chỉ có cho Window và MAC.

Nếu bạn dùng Linux thì vào đây để down

http://labs.adobe.com/technologies/flex/flexbuilder_linux/ .

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3

http://labs.adobe.com/technologies/flex/flexbuilder_linux/


87

Bản cho Linux là bản free nên nó bị lược bỏ một số tính năng như ko hỗ trợ màn hình

design giao diện, và bản này là bản Plug-in nên bạn phải down Elipse-IDE ( bắt buộc phải là

phiên bản Elipse 3.3.x) . Bài hướng dẫn tri tiết cài Flex trong Linux sẽ ở cuối tài liệu.

Sau khi download Flex Builder 3 về, bạn cài đặt như bình thường


88

Chọn OK

Next


89

Accept the terms,rồi ấn Next

Chọn đường dẫn rồi ấn Next


90

Chọn hết các lựa chọn rồi ấn Next

Ấn install để bắt đầu cài đặt.

Khi bạn khởi động lần đầu tiên , Flex Builder sẽ họi bạn chọn Workspace (không gian làm

vc) để nó hoạt động, bạn có thể nhấn OK luôn để chọn mặc định, hoặc chọn bất ký một

Folder trong máy của bạn để làm Workspace rồi nhấn OK.


91

Và đây là màn hình của Flex Builder 3 khi bạn chạy lần đầu tiên.

Tips : Mặc định Flash Player mà Flex Builder 3 cài là phiên bản 9.x.x, và chưa cài Flash

Player Debug Version, bản phải vào trang chủ Adobe.com để down bản Flash Player mới

nhất (bản 10.x.x). Down về rồi cài như bình thường.


92

Rồi vào đây download bản Debug (giúp phát hiện lỗi khi chạy chương trình).

http://www.adobe.com/support/flashplayer/downloads.html

Download bản dành cho IE (Internet Explorer) và Firefox ( hoặc Netscape). Download về cài

đăt như bình thường. Chú ý là bản Flash Player 10 - Debugger Version.

http://www.adobe.com/support/flashplayer/downloads.html


93

Bài 2:

SỬ DỤNG FLEX BUILDER 3

I.Làm quen với giao diện của Flex Builder 3

1.Source View

Trên cùng là các menu điều khiển.

Khung được tô màu đỏ là khung chứa cấu trúc các Folder trong Project của bạn.

Khung tô màu xanh là khung Outline, tức là nó sẽ tóm tắt cho bạn biết đoạn code bạn đang

viết có những Component nào, điều này rất có lợi khi bạn đọc code của ai đó mà muốn có

cái nhìn tổng quan về code của họ.


1. Thiết kế giao diện trong Flex Builder 3.

2. Sử dụng Flex Builder 3 để viết code.


94

Khung tô mầu hồng là màn hình Editor để bạn soạn code , để ý một chút khi nhìn lên trên

cùng bên trái của màn hình Editor bạn thấy nó 2 chế độ là Source và Design. Khi bạn viết

code thì bạn chuyển sang chế độ code, khi muốn Design giao diện thì bạn chuyển sang

màn hình Design.-Khung da cam trên cùng là nơi bạn chọn các chế độ làm việc của Flex

Builder 3, có 3 chế độ làm việc cho bạn khi phát triển ứng dụng.

+Flex Development : Chế độ mặc định của Flex Builder, là chế độ để bạn viết code,

design giao diện, hiệu ứng.

+Flex Debugging : Chế độ Debug( dò lỗi) , viết xong nếu chạy thấy có lỗi, bạn sẽ

được hỏi có muốn chuyển sang chế độ Debug hay không, đề tìm lỗi của ứng dụng.

Đế khởi động chế độ này bạn chọn Run → Debug.

+Flex Profiling : Chế độ quản lý bộ nhớ của ứng dụng, khi ở trong chế độ này bạn sẽ

biết ứng dụng mà mình biết dùng hết bao nhiêu bộ nhớ của máy tính.Đế khởi động chế độ

này bạn chọn Run → Profile

2.Design View

-Khi bạn nhấn vòa tab Design trong màn hình Editor, Flex Builder sẽ chuyện sang chế độ

Design, là nơi bạn kéo thả các Componet như Button, Panel, Text Area,.. vòa ứng dụng của

mình để sử dụng, khi kéo thả thì Flex Builder sẽ tự sinh code thêm các component đó khi

bạn chuyển lại sang cế đó Source View.


95

Khung mầu hồng là cửa sổ chứa các Component mà Flex Builder hỗ trợ.

Khung mầu xanh lá là màn hình Design chính.

Khung mầu xanh đậm là khung chứa các thuộc tính (Properties) của Component mà bạn

vừa kéo thả vào.Các thuộc tính này có thể là Tên, ID,kích thước, tạo độ,..

Khung mầu hồng là cửa sổ State, cho phép bạn Design các trạng thái (state) của ứng dụng,

phần sử dụng state sẽ được nói rõ ở các bài sau.

3.Viết chương trình Hello World.

Việc đầu tiên khi bạn viết một ứng dụng bằng Flex Builder hay bất cứ trình soạn thảo hiện

đại nào là tạo một Project mới. Vào File → New → Flex Project.

Trong ô Project nam đặt tên cho Project của bạn, tôi đặt tên là HelloWorld.

Trong phần Project Location, bạn chọn nơi để Project của bạn, bạn có thể chọn mặc định

theo Flex Builder hoặc là link đến bất kỳ một Folder nào trong máy bạn, ví dụ D:/Flex

Working/ HelloWorld.

Trong phần Application Type chọn Web Application (runs in Flash Player), phần Desktop

Application sẽ nói ở các bài sau.

../Flex


96

Trong phần Application server type chọn “none”, rồi Click Next.

Output Folder là nơi các file được Flex Builder dịch từ code của bạn ra sẽ được đưa vào

đây, tuy nhiên các file này vẫn chứa các thông tin để Flex Builder debug nó chưa phải là file

chạy hoàn toàn. Mặc định được đưa đến thư mục bin-debug, bạn sẽ thấy thư mục này trong

Project của bạn. Click Next.


97

Trong ô Main Application File, tức là file chính của ứng dụng của bạn, file này sẽ được dịch

đầu tiên khi Flex Builder bắt đầu dịch ứng dụng mà bạn viết. Bạn có thể đổi tên thành

Main.mxml hoặc để mặc định theo Project. Trương hợp của tôi tôi sẽ đổi lại thành

Main.mxml. Click Finish để hoàn tất.

Sau khi Finish , màn hình của Flex Builder sẽ hiện thị như sau:

Nhìn vào cấu trúc các Folder trong Project của bạn bạn có thể thấy, thư mục bin-debug đã

được tự động thêm vòa, và file chính Main.mxml trong Folder src mà nãy tôi đã đổi tên từ

HelloWorld.mxml thành Main.mxml. Mặc định Flex đang ở chế độ Source View , ở bên phải

là màn hình soạn thảo code, bạn nhập đoạn code sau vào.

Bạn chưa cần phải hiểu cấu trúc code như nào, tôi sẽ nói với bạn ngay trong bài sau thôi.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute">

<mx:Label x="176" y="126" text="Hello World" fontSize="20"/>

</mx:Application>

Ấn Ctrl+S đế save lại rồi vào Run → Run Main để chạy ứng dụng. Hoặc nhấn nút


98


99

Bài 2:

MXML và Action Script 3.0 trong Flex Builder 3

I.Vai Trò của MXML và ActionScript 3.0

Hai thành phần cơ bản của Flex Framework là MXML (Magic eXtensible Markup Language ,

chữ M cũng có thể là Macromedia hoặc Maximum) và ActionScript 3.0 . MXML được giới

thiệu lần đầu tiên do công ty Macromedia mà nay là Adobe vào tháng 3 năm 2002. MXML là

một ngôn ngữ dựa trên cú pháp của XML (XML-Based Vocabulary) , nó cho phép các

Developers có thể trình bày được giao diện người dùng (GUI – Graphic User Interface) một

cách dế dàng, đồng thời cũng cho phép các Designer những người không có kiến thức về

lập trình cũng có thể hiểu được các giao diện này. MXML gồm các thẻ (Tags) hay các

thành phần (elements) tương ứng với ActionScript 3.0 Class. Các Tags này sẽ được dịch

thành mã ActionScript khi mà một file SWF được tạo. Các thuộc tính (attributes) trong Tags

tương ứng với các thuộc tính (properties) và các phương thức (methods) của ActionScript

Class.

MXML diễn tả mọi thứ trong chương trình của bạn, từ các thành phần của GUI (Graphic

User Interface) , đến các Visual Layout (như Panel, Vertical-Box, Horizontal-Box), Effect

(hiệu ứng), Data Connection (kết nối dữ liệu). Người lập trình có thể đưa các thành phần

này lên ứng dụng của mình bằng cách khai báo trong MXML hoặc ActionScript hoặc MXML

+ ActionScript (cách này hay dùng nhất) . Ngoài việc khai báo lập trình viên có thế kéo thả

các thành phần này trong màn hình Design View ủa Flex Builder.

1.Hiểu rõ về MXML

Vài trò của MXML trong một Flex Application cũng giống như vai trò của HTML hay XHTML

trong một trang Web. Cả hai đều là ngôn ngữ đánh giấu (Markup Language) diễn tả giao

diện người dùng (GUI) .Vì MXML dựa trên cú pháp của XML nên nó phải tuân theo luật của

XML . Một tài liệu MXML phải là một dạng chuẩn (Well-Formed) của XML, gồm các yêu cầu

sau:


1. MXML trong Flex Buider 3.0

2. Action Script 3.0 trong Flex Builder 3.0


100

+Một tài liệu MXML có thể chứa một hay nhiều tags hay là node

+Một tài liệu MXML chỉ có thể chứa một thẻ gốc (root tag), thường là

<mx:Application> hoặc là <mx:WindowApplication> , các thẻ khác được khai báo nằm trong

thẻ này.

+Mối node phải có thẻ đóng và thẻ mở <sample> </sample> hoặc <sample/>

+Các node con phải nằm giữa thẻ mở và thẻ đóng của node cha.

+Giá trị các thuộc tính phải được chứa trong dấu nháy đơn ( ' ' ) hoặc là nháy kép ( “

“ ).

Tất cả các tài liệu MXML đều bắt đầu bằng đoạn khai báo sau :

<?xml version=”1.0” encoding=”UTF-8” ?>

Node gốc của một tài liệu thường là <mx:Application>, bạn có thể sử dụng các thành phần

khác để làm node gốc ví dụ <mx:Panel>, sự khác biệt ở đây là , tài liệu MXML nào chứa thẻ

<mx:Application> sẽ được dịch đâu tiên khi bạn dịch một ứng dụng. Đặc điểm của node gốc

là nó miêu tả thành phần đó là cái chứa (container) các thành phần còn lại, ví dụ:



layout="absolute">

<mx:Panel/>

<mx:Button/>

</mx:Application>

Hoặc


<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Label text=”Hello”/>


101

<mx:Button label=”Click Me!”/>

</mx:Panel>

Bạn có thể để ý thấy mỗi node gốc đều chứa một tham chiếu đến namespace

xmlns:mx="http://www.adobe.com/2006/mxml" . (chú ý là xmlns viết tắt của XML

Namespace). Namespace tham chiếu đến một URI (Uniform Resource Identifier) , chứ

không phải là tham chiếu đến trang web tại địa trỉ đó hay URL. Thay vì đó, ta sử dụng một

URI độc nhất để cung cấp sự tham chiếu , tham chiếu này nói rằng tất cả các tags mà cùng

sử dụng một tiền tố (trong trường hợp này là mx:) đến từ cùng một XML Vocabulary. Để

hiểu rõ ý nghĩa của namespace bạn nên tham khảo các tài liệuTiếng Anh hoặc tra Wiki, bởi

diễn đạt nó bằng Tiếng Việt rất khó.

Sự tương tác giữa MXML với ActionScript khá là dễ hiểu, ta sẽ tìm hiểu qua đoạn code sau

đây:



layout="absolute">

<mx:Button id=”myBtn” label=”Click Me!”/>

</mx:Application>

Đoạn MXML trên tạo ra một giao diện khá đơn giản, chỉ có một Button, đoạn code sẽ tạo ra

một đối tượng của Button ActionScript 3.0 Class qua thẻ <mx:Button>

đồng thời cũng tạo ra id và label của đối tượng Button. Khi dịch , Flex sẽ sinh tương ứng

các thẻ với các ActionScript 3.0 Class, sau đó trình Compiler sẽ dịch các ActionScript 3.0

Class này thành bytes code được chứa trong file SWF.

2.ActionScript 3.0 trong Flex Framework

Các bạn đã được làm quen với ngôn ngữ ActionScript 3.0 trong Flash , tuy nhiên một số

Class được viết lại trong Flex Framework sẽ không thể sử dụng trong Flash. Flex

Framework kế thừa các thành phần đã có trong Flash và viết thêm các thành phần khác , đó

là nguyên nhân Flash ko dùng được các thành phần có trong Flex. Còn Flex thì dùng được

toàn bộ những thành phần đã có trong Flash, tuy nhiên lý thuyết là thế , còn để thực hiện sự

tích hợp Flash vào Flex sẽ phài cấu hình thêm một vài thành phần , và tôi sẽ giành hẳn một

bài để nói về vấn đề này.

3.Sử dụng ActionScript 3.0 và MXML trong Flex Builder 3

http://www.adobe.com/2006/mxml


102

Sau đây chúng ta sẽ viết một vài ví dụ sử dụng MXML và ActionScript 3.0 .

Tạo một Project mới và đặt tên là ASWithMXML , chọn Web Application (Run on Flash

Player) , click Finish.

Thêm đoạn code sau vào :



layout="vertical">

<mx:Button id="myButton" label="Click Me!"

click="clickHandler(event)"/>

<mx:TextArea id="outPut"/>

</mx:Application>


103

Lưu ý thay đổi thuộc tính layout=”vertical” , điều này có ý nghĩa chương trình sẽ layout (trình

bày) các Componet ở giữa màn hình và theo chiều từ trên xuống. Tiếp theo ta tạo ra một

Button, đặt id để có thể sử dụng trong ActionScript và label là “Click Me! “ , khi click vào

button thì ta sẽ gọi hàm clickHandler tham số truyền cho hàm này là một event (sự kiện),

hàm này sẽ được viết và Xử lý trong ActionScript. Tiếp theo ta tạo một TextArea để hiện thị

text ra ngoài màn hình, đặt id là “outPut” . Có thể bạn sẽ thắc mắc id có tác dụng gì trang

các thẻ này , ở thẻ Button ta đặt id là “myButton” , điều này tương đương với đoạn code sau

trong ActionScript :

public var myButton : Button = new Button().

Đăc điểm khi đặt tên cho id là tên này phải là duy nhất.

Tiếp theo ta thêm thẻ <mx:Script> ỏ ngay dưới thẻ gốc <mx:Application> , Flex Builder có

một bộ gợi ý rất tốt , khi bạn gõ <mx:Script , rồi gõ thêm dấu “>” vào , bộ gợi ý (code hint) sẽ

tự động sinh ra đoạn mã sau cho bạn , nếu không thấy xuất hiện bạn ấn tổ hợp phím “Ctrl +

Space”. Kết quả như sau:

<mx:Script>

<![CDATA[

]]>

</mx:Script>

Sau đó ta sẽ viết hàm clickHandler() để xử lý sự kiện click vào Button.

<mx:Script>

<![CDATA[

private function clickHandler(e:MouseEvent):void

{

outPut.text += " My Button is Clicked!" +"\n";

}

]]>

</mx:Script>

Đoạn code trên sẽ xử lý khi click vào Button, ta sẽ gọi hàm clickHandler , trong hàm này ta

sẽ gán cho thuộc tính text của TextArea (có id là “outPut”) giá trị như trên.

Vơi chú ý là “\n” là ký tự xuống dòng. Tham số truyền vào là e có kiểu là MouseEvent


104

Sau đây là toàn bộ code của ví dụ vừa rồi.



layout="vertical">

<mx:Script>

<![CDATA[


{

outPut.text += " My Button is Clicked!" +"\n";

}

]]>

</mx:Script>

<mx:Button id="myButton" label="Click Me!"

click="clickHandler(event)"/>

<mx:TextArea id="outPut" width="400" height="300"/>

</mx:Application>

Lưu ý là tôi đã thêm thuộc tính width và height cho TextArea.

Chọn Run → Run ASWithMXML, màn hình của bạn sẽ như sau:


105

Bài 4:

MXML nâng cao

Data Binding

Đây là một tính năng mới trong các ngôn ngữ hiện đại hiện nay. Bạn hãy tìm hiểu kỹ

để hiểu rõ tính năng mới này, vì nó sẽ rất hay được sử dụng khi bạn viết ứng dụng.

Data Binding cho phép bạn “bind” một thuộc tính của một component đến một thuộc

tính của một component khác, với chú ý là 2 thuộc tính này phải cùng kiểu.Hiểu một cách

đơn giản Data Binding cho phép ta tạo ra một mối quan hệ giữa 2 thuộc tính của 2

component , một component gọi là source, một component gọi là destination và 2 thuộc tình

phải có cùng kiểu , bất cứ khi nào thuộc tính của source thay đổi thì thuộc tính mà ta “bind”

cho destination cũng ngay lập tức thay đổi theo.

Lấy ví dụ đơn giản như sau, một giao diện có một TextInput ( ô nhập liệu) và một TextArea

( ô hiện thị text), ta sẽ code để khi người dùng đánh vào TextInput thì nội dung ở TextArea

cũng sẽ hiện thị theo. Đánh đên đâu hiển thị đến đấy.

Taọ một Project mới đặt tên là DataBinding, nhập đoạn code sau vòa :



layout="vertical">

<mx:TextInput id="input"/>

<mx:TextArea id="output" text="{input.text}"/>

</mx:Application>

Bạn để ý thấy tôi đã “bind” thuộc tính text của TextInput (có id là input) cho thuộc tính text của TextArea (có id là output) , 2 thuộc tính này đều có cùng kiểu là String nên Flex Builder sẽ ko báo lỗi.


1. Quản lý dữ liệu trong MXML

2. Quản lý sự kiện trong MXML


106

Ta “bind” bằng 2 dấu “{“ và “}” , đây là cách “bind” đơn giản nhất trong Flex. Chạy ứng dụng để kiểm tra.Bạn nhập text vào ô TextInput, nội dung bạn vừa gõ sẽ ngay lập tức được hiển thị ở TextArea.

Tôi xin nhắc lại cách hiểu DataBinding đơn giản nhất là, khi thuộc tính của source thay đổi thì thuộc tính được “bind” của destination ngay lập tức thay đổi theo. Với chú ý 2 thuộc tính “bind” cho nhau phải cùng kiểu.

Sau đây là một vài tricks khi làm việc với dataBinding, sử dụng cách đơn giản nhất là 2 dấu “{“ và “}”.

Sử dụng phép toán trong dataBinding



layout="vertical">

<mx:TextInput id="source"/>

<mx:TextArea id="destination"

text="{Number(source.text)*100}"/>

</mx:Application>



layout="vertical">



107

<mx:TextArea id="destination" text="source's text you've

entered is

{source.text}"/>

</mx:Application>

Các phép điều kiện



layout="vertical">

<mx:CheckBox id="source" label="Tick me!"/>

<mx:TextArea id="destination" text="{(source.selected) ? 'bạn

đã Tick' : 'bạn chưa Tick'}"/>

</mx:Application>

Sử dụng hàm của



layout="vertical">

<mx:Script>

<![CDATA[

private function xemdiem(truong:String):String

{

if (truong=="Bách Khoa Hà Nội")

return "24";

else if(truong=="Kinh Tế Quốc Dân")

return "25";

else if (truong=="Mỹ Thuật Công Nghiệp")

return "22";

return "chưa cập nhật";

}

]]>

</mx:Script>


108

<mx:ComboBox id="source">

<mx:dataProvider>

<mx:String>Bách Khoa Hà Nội</mx:String>

<mx:String>Kinh Tế Quốc Dân</mx:String>

<mx:String>Mỹ Thuật Công Nghiệp</mx:String>

</mx:dataProvider>

</mx:ComboBox>

<mx:TextArea id="destination"

text="{xemdiem(String(source.selectedItem))}"/>

</mx:Application>

Lưu ý trong các ví dụ này bạn chưa cần quan tâm đến ý nghĩa của một vài dòng

code, chúng ta sẽ tìm hiểu nó ở các bài sau.

Sau đây là cách thứ 2 để sử dụng DataBinding, đó là sử dụng thẻ <mx:Binding> ,

cách sử dụng khá đơn giản như cách đầu. Cú pháp như sau

<mx:Binding source=”src.property” destination=”dest.property”/>

Tương tự ta có thể thêm các phép thoán, điều kiện , hàm AS3 bào trong thẻ này.

Phép Toán



layout="vertical">


<mx:TextArea id="destination"/>

<mx:Binding source="Number(source.text)*100"

destination="destination.text"/>

</mx:Application>

Điều Kiện


109



layout="vertical">

<mx:CheckBox id="source" label="Tick me!"/>


<mx:Binding source="(source.selected) ? 'Bạn đã tick':'Bạn

chưatick'"


</mx:Application>

Dùng hàm AS3



layout="vertical">

<mx:Script>

<![CDATA[

private function xemdiem(truong:String):String

{

if (truong=="Bách Khoa Hà Nội")

return "24";

else if(truong=="Kinh Tế Quốc Dân")

return "25";

else if (truong=="Mỹ Thuật Công Nghiệp")

return "22";

return "chưa cập nhật";

}

]]>

</mx:Script>

<mx:Label text=”Xem điểm của trường: “/>

<mx:ComboBox id="source">

<mx:dataProvider>


110

<mx:String>Bách Khoa Hà Nội</mx:String>

<mx:String>Kinh Tế Quốc Dân</mx:String>

<mx:String>Mỹ Thuật Công Nghiệp</mx:String>

</mx:dataProvider>

</mx:ComboBox>


<mx:Binding source="xemdiem(String(source.selectedItem))"


</mx:Application>

Trong tất cả các ví dụ trên tôi đều cho thuộc tính layout của thẻ <mx:Application> là

“vertical”.

Mặc định các đối tượng được tao ra bằng MXML đều có khả năng “bind”, để khai báo một

biến có khả năng “bind” trong AS3 ta phải viết thẻ [Bindable] trên tên biến .

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var collection:Array;

[Bindable]

public var dataProvider:ArrayCollection;

]]>

</mx:Script>

Thẻ [Bindable] gọi là thẻ MetaData, chỉ có tác dụng với một biến. Muốn bao nhiêu biến có

khả năng “bind” thì phải có bấy nhiêu thẻ [Bindable] , và phải viết theo luật như trên.

Có thể [Bindable] cho cả một Class. Bằng cách như sau:

package


111

{

[Bindable]

public class BindMe

{

public function BindMe()

{

}

}

}

Điều đó có nghĩa tất cả các thuộc tính trong Class BindMe đều có khả năng “bind”.

Một chú ý nhỏ nữa là “bind” chỉ áp dụng cho thuộc tính (property), ko áp dụng cho phương

thức (Method).

Events trong MXML

Trong các chương trước chúng ta đã được tìm hiểu và xử lý qua về các sự kiện (events)

trong AS3 , như sự kiện Click , Double Click, Mouse_Over , …

Việc xử lý các events trong MXML khá là đơn giản hơn trong AS3 , và thường thì ta kết hợp

cả AS3 và MXML để xử lý sự kiện, việc kết hợp này làm cho số lượng dòng code giảm đi rất

nhiều.

Sau đây ta tìm hiểu qua cách xử lý events vơi MXML + AS3



layout="vertical">

<mx:Button click="output.text += 'Button is Clicked \n'"


112

mouseOver="output.text += 'Mouse Over Button \n' "

mouseOut="output.text += 'Mouse Out Button \n' "

mouseUp="output.text += 'Mouse Up Button \n' "/>

<mx:TextArea id="output" width="200" height="300"/>

</mx:Application>

Đây là cách xử lý event hoàn toàn bằng MXML, bạn có thể thấy no rất ngắn gọn. Chú ý rằng

để viêt một String trong dấu ( “ “ ) ta dùng dấu ( ' ' ). Chạy chương trình ta có kết quả sau:

Giả sử ta có rất nhiều Button cùng lắng nghe các sự kiện này, đây là lúc ta dùng đến AS3

đê xử lý, nếu chỉ dùng MXML thì code sẽ lại dài hơn.

Sửa code trên thành như sau:



113


layout="vertical">

<mx:Button id="btn1" label="Button 1"

click="clickHandler(event)"

mouseOver="overHandler(event)"

mouseOut="outHandler(event)"

mouseUp="upHandler(event)"/>












114


</mx:Application>

Bây h khi các even xảy ra ta sẽ gọi các hàm tương ứng để xử lý, truyền vào các hàm này

tham số là “event” , bắt buộc phải viết “event” ko được viết “evt” hay “e”,..

Tiếp theo ta thêm thẻ <mx:Script> ở dưới thẻ <mx:Application> , viết các hàm xử lý các sự

kiện đó.

Sau đây là code đầy đủ của ví dụ vừa rồi :



layout="vertical">

<mx:Script>

<![CDATA[


{

var result:String = "";

switch(e.currentTarget)

{

case btn1 : result = "Button 1"; break;


case btn3 : result = "Button 3";break;

}

output.text = result + " is Clicked";

}


115

private function overHandler(e:MouseEvent):void

{



{




}

output.text = result + " is Over";

}

private function outHandler(e:MouseEvent):void

{



{




}

output.text = result + " is Out";

}

private function upHandler(e:MouseEvent):void

{


116



{




}

output.text = result + " is Up";

}

]]>

</mx:Script>












117







</mx:Application>

Chú ý thuộc tính currentTarget của biến e . currentTarget ở đây chinh là đối tượng lắng

nghe và nhận được sự kiện đó. Ở đây có 3 đối tượng là btn1 , btn2 , btn3 cùng lắng nghe

các luồng sự kiện giống nhau, để xác định chính xác đối tượng nào vừa nhận được event

thì ta dùng thuộc tính currentTarget của MouseEvent (biến e có kiểu MouseEvent) . Qua đây

ta có thể thấy sự kết hợp MXML + AS3 làm cho các dòng code trở nên sáng sủa hơn rất

nhiều , nhưng người Design hay một người chưa hề biết về MXML cũng có thể hiểu được

ngay.

Các Component của Flex có rất nhiều event, tôi ko thể liệt kê hết ra được, cách dùng chủ

yếu dựa vào kinh nghiệm. Để tham khảo bạn có thể vào Help → Help Content , gõ vào một

Component bạn muốn xem , ví dụ TextInput để tham khảo. Lưu ý khi bạn sủ dụng Help lần

đầu tiên, Flex Builder sẽ mất thời gian để index các file,bạn phải đợi cho Flex Builder index

xong nên lần khởi động đầu sẽ rất lâu, tùy vào cấu hình của máy bạn. Ở lần thứ 2 thì sẽ

nhanh hơn.


118

Với Help Engine bạn có thể tra các thuộc tính (Properties), phương thức (Methods) , sự kiện

(events) , Styles , hiệu ứng (Effects) của các Component có sẵn trong Flex Builder 3.

Chú ý , ý nghĩa của các events được viết bằng tiếng Anh ngay bên cạnh, nên bạn phải dịch

ra để biết các events đó xảy ra khi nào.


119

Bài 5:

Component trong Flex Framework

\

Layout Container

Trước tiên ta làm quen với một vài Layout rất hay dùng trong Flex.

1.VBox (Vertical Box)

Các component được chứa trong Vbox sẽ được layout (sắp xếp, bố cục) từ trên xuống

dưới. Chú ý rằng nó giống thuộc tính Layout của thẻ <mx:Application> , layout=”vertical”


layout="vertical">

<mx:VBox>


1. Layout Container.

2. HBox.

3. Panel

4. Form

5. ControlBar

6. Navigator Container

7. ViewStack Container

8. Accordion Container

9. TabNavigator Container

10. Flex và XML

11. Repeater Component

12. Flex và CSS


120

<mx:Button label="Click Me!"/>

<mx:Panel width="160" height="90" title="My Panel"/>

<mx:TextArea/>

</mx:VBox>

</mx:Application>

2.HBox (Horizontal-Box)

Các Component chưa trong Hbox sẽ được layout theo chiều từ trái sang phải.Tương đương

với trường hợp thuộc tính layout của thẻ <mx:Application> là layout=”horizontal”.


layout="vertical">

<mx:HBox>

<mx:Button label="Click Me!"/>

<mx:Panel width="160" height="90" title="My Panel"/>

<mx:TextArea/>

</mx:HBox>

</mx:Application>


121

3.Panel

Trong thẻ <mx:Panel> có thuộc tính layout giống với của thẻ <mx:Application>. Sẽ có 3 giá

trị cho thuộc tính layout là “vertical”, “horizontal”,”absolute”.

4.Form

Vào các forum hay trang Web nào bắt đăng ký , ta thường thấy các Form nhập liệu

để đăng nhập, và đây là cách tạo ra Form trong Flex .



layout="vertical">

<mx:Panel title="Login">

<mx:Form>

<mx:FormItem label="Name">

<mx:TextInput/>

</mx:FormItem>

<mx:FormItem label="Age">


122

<mx:TextInput/>

</mx:FormItem>

<mx:FormItem label="School">

<mx:TextInput/>

</mx:FormItem>

</mx:Form>

</mx:Panel>

</mx:Application>

5.ControlBar

Component này thường đi theo Panel, sử dụng như sau:



layout="vertical">

<mx:Panel title="Login">


123

<mx:Form>

<mx:FormItem label="Name">

<mx:TextInput/>

</mx:FormItem>

<mx:FormItem label="Age">

<mx:TextInput/>

</mx:FormItem>

<mx:FormItem label="School">

<mx:TextInput/>

</mx:FormItem>

</mx:Form>

<mx:ControlBar>

<mx:Button label="Login" width="100%"/>

<mx:Button label="Register" width="100%"/>

</mx:ControlBar>

</mx:Panel>

</mx:Application>


124

Để biết thêm các Layout Container nữa hỗ trợ trong Flex, bạn chuyển sang chế độ

Design View, tìm trong Panel Component.

Navigator Container

Thành phần cơ bản nhất của các Navigator Container này là ViewStack Container, ta sẽ tìm

hiểu ViewStack Container trước.


125

ViewStack Container

Dùng ViewStack trong trường hợp nào. Giả sử bây h ta có 4 panel : Tin Tức , Sự Kiện, Thể

Thao, Thời Tiết. Giờ ta muốn cho nó vào một Container và có nút điều khiển để chuyển

sang các Panel khác. Đây là lúc cần dùng ViewStack, cho phép chứa nhiều “View” vào một

cái Stack để quản lý.

Tạo một Project mới, đặt tên là NavigatorContainer. Nhập đoạn code sau vào.



layout="vertical">

<mx:ViewStack id="vs" width="310" height="220">

<mx:Panel title="Tin Tức"/>

<mx:Panel title="Sự Kiện"/>

<mx:Panel title="Thể Thao"/>

<mx:Panel title="Thời Tiết"/>

</mx:ViewStack>

</mx:Application>

Khi chạy chương trình bạn sẽ chỉ thấy Panel Tin Tức, và chưa có nút điều khiển để chuyển

sang các Panel khác. Thêm thẻ sau vòa ở trên thẻ <mx:ViewStack>

<mx:ButtonBar dataProvider="{vs}" width="310" height="35"/>

Bạn chú ý đên thuộc tính dataProvider , có thể hiểu là “cái cung cấp dữ liệu” cho ButtonBar

ở đây là ViewStack (id là “vs”). Sử dụng dấu “{ }” để “bind” dữ liệu.

Sau đây là code đầy đủ:



layout="vertical">



126

<mx:ViewStack id="vs" width="310" height="220">

<mx:Panel title="Tin Tức" label="Tin Tức"/>

<mx:Panel title="Sự Kiện" label="Sự Kiện"/>

<mx:Panel title="Thể Thao" label="Thể Thao"/>

<mx:Panel title="Thời Tiết" label="Thời Tiết"/>

</mx:ViewStack>

</mx:Application>

Chú ý tôi đã thêm thuộc tính label cho các Panel , ButtonBar sẽ lấy các label để làm

label cho các Button của mình.

Chạy ứng dụng, kết quả như sau:

Đến đây có thể các bạn đã hiểu phần nào về các Navigator Container

Bạn có thể thay thẻ :



127

Thành :

<mx:LinkBar dataProvider="{vs}" width="310" height="35"/>

hoặc

<mx:TabBar dataProvider="{vs}" width="310" height="35"/>

hoặc

<mx:ToggleButtonBar dataProvider="{vs}" width="310" height="35"/>

Chạy ứng dụng và tìm thấy trải nghiệm cho riêng mình.

Accordion Container

Đây là một Container khá hay, có thể bạn đã nhìn thấy ở nhiều trang Web. Tạo Project mới

và thêm đoạn code đây vào.



layout="vertical">

<mx:Accordion width="310" height="220">

<mx:Canvas label="Tin Tức"/>

<mx:Canvas label="Sự Kiện"/>

<mx:Canvas label="Thể Thao"/>

<mx:Canvas label="Thời Tiết">

<mx:Label text="Thời tiết các vùng trong cả nước"/>

</mx:Canvas>

</mx:Accordion>

</mx:Application>


128

Canvas là một Container hay dùng, và là Container đơn giản nhất, chỉ đơn thuần có

một vùng hiển thị và ko có layout. Chạy ứng dụng , kết quả như sau:

TabNavigator Container

Sủa đoạn code sau của Project trên.

<mx:Accordion width="310" height="220">






</mx:Canvas>

</mx:Accordion>


129

Thành

<mx:TabNavigator width="310" height="220" tabHeight="30">






</mx:Canvas>

</mx:TabNavigator>

Chạy và trải nghiệm

Chú ý ở phần Container. Các bạn có thể thấy các Container có khả năng chứa (contain) các

Component khác trong nó, như Label, Button, TextArea. Còn các Label, Button,TextArea,..

ko phải là các Container nên nó không có khả năng chứa các Component khác trong nó. Để

khai bảo một Component nằm trong một Container bằng MXML ta sử dụng như sau:



</mx:Canvas>

Khia báo trên có nghĩa là có một Component là Label nằm trong một Container là Canvas.

Nó tương đương với câu lệnh addChild trong AS3.

Để ý dấu “/” của thẻ <mx:Canvas> và dấu “/” của thẻ <mx:Label> , dấu “/” gọi là dấu đóng

thẻ, khi khai báo một thẻ trong MXML thì phải có dấu “/” báo hiệu kết thúc một thẻ. Có 2

cách khai báo khi nào đóng thẻ, một là <mx:Label /> , hoặc <mx:Label> </ mx:Lable> . Khi

một thẻ nằm giữa thẻ đóng và thẻ mở của một thẻ khác thì nó là con của thẻ đó, hay bị

chứa bởi thẻ đó.

Để biết là Container hay Component ta có thẻ tra Help


130

Canvas là con của lớp Container trong FlexFramework, do đó theo quy luật cha con trong

hướng đối tượng, Canvas sẽ có khả năng chứa các Component khác trong nó. Bản thân

Canvas cũng có thể chứa một Canvas khác trong nó.

Flex và XML

Nếu một trong số các bạn từng lập trình C hay Java hay C# , ở phần đọc file, các bạn

thường lưu file có đuôi .dat để lưu dữ liệu trong đó. Trong file .dat các bạn tự lưu trữ dữ liểu

của mình thành từng dòng, cách nhau bởi một ký tự nào đó do bạn quy định. Đến khi đọc

dữ liệu bạn cũng phải thiết lập một quy trình riêng để đọc file đó .Đây là cách lưu dữ liệu

truyền thống và người bắt đầu thường gặp khó khăn. Internet ra đời đòi hỏi phải có một định

dạng file chuẩn để giao tiếp. Và XML đã ra đời theo mục đích đó, với cấu trúc đơn giản, dễ

hiểu, dễ xử lý hơn cách lưu trữ truyền thống vào các file.

Lúc đầu tôi cũng đã giới thiệu MXML là một ngôn ngữ đánh dấu dựa theo XML (XML-based)

, nên qua các ví dụ trước về MXML có thể bạn cũng đã hiểu qua về cấu trúc của file XML.

Nó là ngôn ngữ đánh dấu, gồm một thẻ gốc (root) và nhiều thẻ con ở bên trong. Có thể hiểu

trực quan thẻ root như một cái hộp bao ở ngoài cùng, bên trong cái hộp này lại chứa các

hộp con khác, trong các hộp con cũng có thể chứa các hộp con khác nữa. Đồ vật ở bên

trong các hộp con chính là dữ liệu của mà chúng ta cần. Để lấy được nội dung trong các

hộp con ta phải biết địa trỉ hay vị trí của cái hộp đó so với hộp gốc để lấy.

XML khác HTML , MXML , XHTML ở chỗ , trong HTML , MXML, XHTML định nghĩa sẵn các

thẻ, và ta buộc phải hiểu rõ chức năng của thẻ đó để dùng. Trong XML cho ta tự địn nghĩa

các thẻ, miến sao bạn thấy dễ hiểu nhất cho mình cũng như cho người đọc. Nòa hãy xem

qua một file XML đơn giản.

<?xml version="1.0" encoding="UTF-8"?>

<members>

<member>

<name>Nguyen Thach Duong</name>


131

<age>21</age>

<location>Ha Noi</location>

<email>[email protected]</email>

<user>thachduong</user>

<password>123456</password>

</member>

<member>

<name>Nguyen Thach Duong</name>

<age>21</age>



<user>thachduong</user>


</member>

<member>

<name>Bui Trung Hieu</name>

<age>21</age>



<user>trunghieubui</user>


</member>

<member>

<name>Nguyen Hoang Bach</name>

<age>21</age>




132

<user>hoangbach</user>


</member>

<member>

<name>Nguyen Thanh Linh</name>

<age>21</age>



<user>thanhlinh</user>


</member>

</members>

Ta thấy hộp bao ngoài cùng hay thẻ gốc của file XML trên là <members> </members> (lưu ý

là có thẻ mở và thẻ đóng), bên trong nó có 4 hộp con là <member> </member> trong mổi

hộp này lại có các hộp con là <name> </name> , <age> </age> , <location> </location> , …

Nội dung của các hộp con này chính là dữ liệu , nội dung của thẻ <name> là tên người,

<age> là tuổi, … Khi Flex đọc file XML này, các thẻ sẽ được chuyển thành các Object để sử

dụng trong MXML hoặc AS3.

Bây h ta sẽ dùng Flex đọc file XML này , rồi hiển thị lên một DataGrid. Bật Notepad bằng

cách vào Start → Run → gõ Notepad → ấn Enter. Copy nội dung file xml trên vào rồi save

lại với tên members.xml.

Tạo một Project mới đặt tên là FlexAndXML , trong thư mục src, nhật chuột phải → new →

Folder, đặt tên folder mới là assets.


133

Chuột phải vòa thư mục assets vừa tạo , chọn New → Folder, đặt tên là xml . Copy file

members.xml bạn vừa tạo rồi Paste vòa thư mục xml mới tạo này.


134

Trong file FlexAndXML.mxml , thêm thẻ sau ở dưới thẻ <mx:Application>

<mx:HTTPService id=”memData” url=”assets/xml/members.xml” />

Đối tượng HTTPService chuyên dùng để đọc các dữ liệu bên ngoài, nếu bạn từng làm AJAX

thì nó giống đối tượng XMLHttpRequest. Cấp cho đối tượng HTTPService id để sự dụng

trong ActionScript , rồi cấp đường dẫn url đến file cần đọc , url có thể là đường dẫn đến một

file xml ở trên mạng, trường hợp này ta phải nhập http://www.yourhost.com/yourfile.xml.

Tiếp theo trong thẻ <mx:Application> thêm sự kiện creationComplete.


layout="vertical" creationComplete="memData.send()">

Chú ý tôi thường xuyên để layout=”vertical”.

Để hiển thị dữ liệu ta dùng một DataGrid, khai báo một đối tượng DataGrid và xử lý thuộc

tính dataProvider cho nó.

<mx:DataGrid dataProvider="{memData.lastResult.members.member}"/>

Lưu ý thuộc tính dataProvider có kiểu là một mảng các dữ liệu, có thể là Array,

ArrayCollection, hay XMLList.

Câu lệnh memData.lastResult cho ra đối tượng file XML,

memData.lastResult.members.member cho ta một mảng các Object member . Chạy chương

trình , kêt quả như sau:

Có vẻ khá ổn , nhưng trường hợp bản đang quản trị một Forum và muốn dấu

Password cũng như Location của người dùng. Đồng thời cũng muốn sắp xếp lại thứ tự các

cột trong DataGrid. Ta phải thay đổi một chút code thành như sau:

http://www.yourhost.com/file.xml


135



layout="vertical" creationComplete="memData.send()">

<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.rpc.events.FaultEvent;

import mx.rpc.events.ResultEvent;


[Bindable]

private var collection:ArrayCollection;

private function resultHandler(e:ResultEvent):void

{

collection = e.result.members.member;

}

private function faultHandler(e:FaultEvent):void

{

Alert.show(e.fault.faultDetail);

}

]]>

</mx:Script>

<mx:HTTPService id="memData"

url="assets/xml/members.xml"

result="resultHandler(event)"

fault="faultHandler(event)"/>

<mx:DataGrid dataProvider="{collection}">

<mx:columns>


136

<mx:DataGridColumn headerText="User" dataField="user"/>

<mx:DataGridColumn headerText="Full Name"

dataField="name"/>

<mx:DataGridColumn headerText="Age" dataField="age"/>

<mx:DataGridColumn headerText="Email" dataField="email"/>

</mx:columns>

</mx:DataGrid>

</mx:Application>

Sự thay đổi đầu tiên là ta khai báo một biến collection có kiểu ArrayCollection (kiểu dữ liệu

tập hợp) , bạn để ý thấy ngay trên nó có một thẻ là [Bindable] , tức là có thể binding cho

Component khác

Ta bind collection cho thuộc tính dataProvider của DataGrid. Tức là bất cứ khi nào dữ liệu

của collection thay đổi thì dữ liệu của dataProvider của DataGrid thay đổi theo ngay lập tức.

Tiếp theo ta sử lý 2 sự kiện thông dụng của lớp HTTPService là result và fault. Khi có result

ta sẽ gọi hàm resultHandler để xử lý. Nếu có lỗi (fault) thì hàm faultHandler sẽ được gọi.

Trong hàm resultHandler(e:ResultEvent), ta gán cho collection tập hợp các member trong

file members.xml. Khi collection cập nhật xong , lập tức dataProvider của DataGrid được

cập nhật theo.

Nếu có lỗi, ta sẽ hiện một Alert cho người dùng biết lỗi. Chú ý các dòng Import:





Trong thẻ DataGrid ta khai báo một màng các columns. Trong columns có các

DataGridColumn , ta gán cho nó một headerText , và dataField. Chú ý rằng dataField chính

là tên các thẻ con của thẻ member trong file members.xml.

Chạy chươn trình , kết quà như sau:


137

Repeater Component

Để hiểu ý nghĩa của Repeater Component ta sẽ tìm hiểu qua ví dụ sau. Ta sẽ mô phỏng một

chương trình trắc nghiệm kiến thức. Dữ liệu được lưu trong file questions.xml. Nội dung file

này như sau:

<?xml version="1.0" encoding="UTF-8"?>

<questions>

<question>

<id>1</id>

<name>Con gì tám cẳng 2 càng, một mai 2 mắt bò ngang trên

bờ</name>

<dapanA>Cua</dapanA>

<dapanB>Gà</dapanB>

<dapanC>Hổ</dapanC>

<dapanD>Báo</dapanD>

<dapan>Cua</dapan>

</question>

<question>

<id>2</id>

<name>1+1=?</name>


138

<dapanA>2</dapanA>

<dapanB>10</dapanB>

<dapanC>5</dapanC>

<dapanD>7</dapanD>

<dapan>10</dapan>

</question>

<question>

<id>3</id>

<name>Nhóm Rock nào sáng tác bài Khám Phá</name>

<dapanA>Bức Tường</dapanA>

<dapanB>Thủy Triều Đỏ</dapanB>

<dapanC>Microway</dapanC>

<dapanD>Thánh Giá Đỏ</dapanD>

<dapan>Bức Tường</dapan>

</question>

<question>

<id>4</id>

<name>Ngôn ngữ nào thuần hướng đối tượng đầu tiên</name>

<dapanA>Java</dapanA>

<dapanB>C Sharp</dapanB>

<dapanC>C++</dapanC>

<dapanD>Action Script 3.0</dapanD>

<dapan>Java</dapan>

</question>

</questions>


139

Ta thấy thẻ gốc là <questions>, trong thẻ này gồm một tập hợp (Collection) các thẻ

<question>

trong mỗi thẻ <question> lại có các thẻ <name>,<id>,...

Phần giao diện , ta muốn hiển thị mỗi phần gồm 1 hàng là câu hỏi, 1 hàng là các đáp án. Dễ

nhận thấy sẽ có 4 phần như vậy vì có 4 thẻ <question>, và phần nào cũng giống nhau về

giao diện.

Đây là lúc ta dùng đến Repeater Component.

Tạo Project mới tên là Repeater, tọa thư mục assets/xml trong thư mục src. Tọa file

questions.xml có nội dung như trên rồi cho copy/paste vào thư mục xml.

Tương tự như phần đọc XML bằng Flex ta nhập đoạn code sau:


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

creationComplete="questionData.send()"

>

<mx:Script>

<![CDATA[





[Bindable]

private var collection:ArrayCollection;

private function resultHandler(e:ResultEvent):void

{

trace("ok");

collection = e.result.questions.question;

trace(collection.length);

}


140

private function faultHandler(e:FaultEvent):void

{

Alert.show(e.fault.faultDetail,"ERROR");

}

]]>

</mx:Script>

<mx:HTTPService id="questionData" url="assets/xml/questions.xml"

result="resultHandler(event)"

fault="faultHandler(event)"/>

</mx:Application>

Biến collection sẽ lưu trữ một tập hợp các Object question , và ta sẽ làm

dataProvider cho Repeater Component của chúng ta.

Khai báo một Repeater Object như sau

<mx:Repeater id="rpt" dataProvider="{collection}">

</mx:Repeater>

Tiếp theo ta thêm một Label trong Repeater để hiện thị câu hỏi, và 4 RadioButton để

hiển thị các đáp án. Ta đưa 4 RadioButton này vào một Hbox để layout theo chiều từ trái

sang phải.

Chú ý rằng layout của <mx:Application> là vertical nên Label và Hbox sẽ lại được

<mx:Application> layout theo chiều từ trên xuống.

Nhập tiếp đoạn code sau

<mx:Repeater id="rpt" dataProvider="{collection}">

<mx:Label text="{rpt.currentItem.name}"/>

<mx:HBox>

<mx:RadioButton label="{rpt.currentItem.dapanA}"

groupName="{rpt.currentItem.id}"/>


141

<mx:RadioButton label="{rpt.currentItem.dapanB}"


<mx:RadioButton label="{rpt.currentItem.dapanC}"


<mx:RadioButton label="{rpt.currentItem.dapanD}"


</mx:HBox>

<mx:Spacer height="10"/>

</mx:Repeater>

Tabind thuộc tính text của Label và thuộc tính label của RaidoButton cho rpt.currentItem.

Lưu ý rpt.currentItem chính là một đối tượng question đã load từ XML ra. Mỗi đối tượng

question lại chứa các đối tượng id,name,dapanA... và đế lấy giá trị của các object này ta

dùng toán tử “.” đế lấy.

Rpt.currentItem.name cho ra name của question, giá trị giống với giá trị của thẻ

<name> trong thẻ <question>

Ta để các RadioButton theo từng Group đê cho người dùng chỉ chọn được một lựa

chọn. Group các RadioButton của các câu hỏi lại phải khác nhau, nên ta đặt groupName

theo id của từng câu hỏi.

Chạy ứng dụng , kết quả sẽ như sau:


142

State Và Transition

Trong Flex không có Timeline nhưng có state để ta định nghĩa các trạng thái (state) của một

chương trình , đồng thời cũng cho phép tạo các animation để chuyển (transition) giữa các

state đó. Làm cho khả năng tương tác của ứng dụng trở nên hấp dẫn hơn

Tạo Project mói, đặt tên là StateTransition. Chuyển sang Design View. Kéo thả 2 Panel và 2

Button vào , bố trí như hình vẽ.

Nhấp đúp vào thanh Title của Panel để đặt tên hoặc vào khung Properties để thiết lập các

thuộc tính


143

đặt id và title cho Panel như trên. Đặt label cho 2 button là Next và Prev

Chuyển sang màn hình Source, Flex Builder sẽ tự động sinh mã như sau:



layout="absolute">

<mx:Panel x="88.5" y="100" width="250" height="200" layout="absolute"

title="Panel 1" id="panel1">

</mx:Panel>

<mx:Panel x="240" y="10" width="177" height="82" layout="absolute"

title="Panel2" id="panel2">

</mx:Panel>

<mx:Button x="10" y="278" label="Prev"/>

<mx:Button x="352" y="278" label="Next"/>

</mx:Application>

Chuyển lại sang màn hình Desing , làm tiếp như sau:

Vào khung State , chuột phải vào <Base State> rồi chọn New State. Khung New State hiện

ra , bạn điền tiếp như sau:


144

Đặt tên state mới là “result” và Based on: <Base state>, trong state mới, ta điều chỉnh lại vị

trí cũng như kích thước của các panel như hình sau.

Bạn để ý rằng ta đang ở trong state result . Click vào Based state , rồi vòa result đê thấy sự

thay đổi ở màn hình Design.

Bây giờ ta sẽ tạo ra transition để chuyển giữa 2 state này .

Nhập đoạn code sau vào:

<mx:transitions>

<mx:Transition fromState="*" toState="*" effect="{changeTheState}"/>

</mx:transitions>

<mx:Parallel id="changeTheState">

<mx:Move targets="{[panel1,panel2]}"/>


145

<mx:Resize targets="{[panel1,panel2]}"/>

</mx:Parallel>

Thuộc tính fromState=”*” và toState=”*” báo hiệu rằng khi chuyển bất kì từ state nào sang

state nào thì đều chạy một effect là “changeTheState”. ChangeTheState là id của một

Parallel, trong Parallel chứa 2 effect là Move và Resize. Cung cấp cho 2 effect này targets,

targets ở đây là mảng các đối tượng chị sự tác động của 2 effect này. Trong trường hợp

này là panel1 và panel2. Lưu ý là panel1 và panel2 là 2 id của đối tượng Panel. 2 Effect này

đặt trong thẻ <mx:Parallel> có nghĩa là chúng cùng chạy song song với nhau, Move và

Resize cùng chạy động thời. Ngoài thẻ <mx:Parallel> còn có thẻ <mx:Sequence>, nghĩa là

chạy tuần tự từng effect một.

Giờ ta cần một sự kiện nào đó phát ra để chuyển giữa 2 state này. Thêm sự kiện click cho 2

Button, và xử lý như sau:

<mx:Button x="10" y="278" label="Prev" click="currentState='' "/>

<mx:Button x="352" y="278" label="Next" click="currentState='result' "/>

currentState=' ' tức là quay về Base state. CurrentState= ' result ' tức là chuyển sang state

result . Toaàn bộ Code của chương trình sẽ như sau:



layout="absolute">

<mx:states>

<mx:State name="result">

<mx:SetProperty target="{panel1}" name="x" value="10"/>

<mx:SetProperty target="{panel1}" name="y" value="10"/>

<mx:SetProperty target="{panel1}" name="width"

value="201"/>

<mx:SetProperty target="{panel1}" name="height"

value="82"/>

<mx:SetProperty target="{panel2}" name="x" value="93.5"/>

<mx:SetProperty target="{panel2}" name="y" value="100"/>

<mx:SetProperty target="{panel2}" name="width"

value="240"/>

<mx:SetProperty target="{panel2}" name="height"

value="200"/>

</mx:State>

</mx:states>


146

<mx:Panel x="88.5" y="100" width="250" height="200" layout="absolute"

title="Panel 1" id="panel1">

</mx:Panel>

<mx:Panel x="240" y="10" width="177" height="82" layout="absolute"

title="Panel2" id="panel2">

</mx:Panel>

<mx:Button x="10" y="278" label="Prev" click="currentState='' "/>

<mx:Button x="352" y="278" label="Next" click="currentState='result'

"/>

<mx:transitions>

<mx:Transition fromState="*" toState="*" effect="{changeTheState}"/>

</mx:transitions>

<mx:Parallel id="changeTheState">

<mx:Move targets="{[panel1,panel2]}"/>

<mx:Resize targets="{[panel1,panel2]}"/>

</mx:Parallel>

</mx:Application>

Với chú ý , <mx:Application layout=”absolute”> . Chạy ứng dụng.


147

CSS With Flex

Nếu bạn nào đã từng làm Web chắc chắn sẽ ko thể ko biết tới CSS, nó giúp cho ta

đồng bộ hóa giao diện một cách nhanh chóng.

Sau đây ta sẽ tìm hiểu cách sử dụng CSS một cách cơ bản trong Flex.

Tạo Project mới đặt tên là CSSWithFlex. Chuột phải vào folder src chọn New → CSS

File , đặt tên là main.css.

Truy cập vào địa trỉ sau, http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html#

Bạn chọn phần Button , rồi làm một vài tinh chỉnh nhỏ , ở panel CSS sẽ hiện ra ngay các

code CSS , bạn copy nó rồi paste vào file main.css.

Trong fiel CSSWithFlex.mxml . Bạn nhập đoạn code sau:


148



layout="absolute">

<mx:Style source="main.css"/>

<mx:Button x="133.5" y="106" label="Button Skined With CSS"/>

</mx:Application>

Trong thẻ Style, bạn cấp đường dẫn đên file main.css. Flex sẽ tự động nhúng file css vào

file SWF. Bạn có thể tùy biến Panel, hoặc các Component khác trong trang nãy tôi vừa cấp,

rồi paste vào file main.css.

/* CSS file */

Button {

cornerRadius: 20;

textIndent: 0;

highlightAlphas: 0.4, 0.48;

fillColors: #000000, #666666, #006699, #eeeeee;

color: #ffffff;

textRollOverColor: #0b333c;

themeColor: #666666;

}

Panel {

borderColor: #000000;

borderAlpha: 0.52;

roundedBottomCorners: true;

cornerRadius: 8;

titleStyleName: "mypanelTitle";

}

.mypanelTitle {

color: #ffffff;


149

textAlign: center;

}



layout="absolute">

<mx:Style source="main.css"/>

<mx:Button x="133.5" y="36" label="Button Skined With CSS"/>

<mx:Panel title="My Custom Skin Panel" x="104.5" y="87" width="218"

height="189"/>

</mx:Application>

Documents

Huong dan su dung Adobe Flash Professional CS4