Chương 2 FLEX
2.5. Làm việc với Media
2.5.2. Cách thêm Media vào ứng dụng
2.5.2.1. Nạp Media Ta có thể dùng thẻ MXML. Ví dụ: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Image source="assets/sun.jpg"/> </mx:Application>
Nếu khơng muốn nạp tự động như ví dụ trên thì ta có thể dùng phương thức load(). Ví dụ :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Image id="sun" autoLoad="false"/>
<mx:Button label="Load Image" click="sun.load('assets/sun.jpg')"/> </mx:Application>
Khi dùng thẻ MXML, các thành phần đang sử dụng một đối tượng Loader. Lớp
Loader này có một thể hiện là LoaderInfo. Lớp LoaderInfo sẽ gửi các sự kiện như là: complete, progress, ioError, open, httpStatus, và init.
2.5.2.2. Nhúng Media
Khi nhúng media nghĩa là thay vì tham chiếu đến các tài ngun trực tiếp thì ta đóng gói nó thành SWF. Ta có thể nhúng media với MXML, ActionScript hoặc
CSS.
2.5.2.2.1. Dùng MXML
Với MXML, cấu trúc nhúng media bắt đầu bằng @Embed . Kí tự @ chỉ ra cho bộ compiler biết là nó sẽ nhận một chỉ thị, trong trường hợp này là chỉ thị từ Embed() Ví dụ:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Image source="@Embed(source='assets/sun.jpg')"/> </mx:Application>
2.5.2.2.2. Dùng ActionScript
Ta phải khai báo theo cấu trúc [Embed()] và định nghĩa biến của tài nguyên là kiểu
Class. Flex compiler sẽ tự động phát sinh một định nghĩa Class tương ứng với loại
media được nhúng vào. Cũng như bên MXML, giá trị của biến sẽ tham chiếu đến
Embed().
Sau đây là một số loại của Class:
• BitmapAsset: ứng với tài nguyên là các hình ảnh dạng JPEG, GIF, PNG
• MovieClipAsset: ứng với tài nguyên là các mục của thư viện Flash bên trong
một SWF.
• MovieClipLoaderAsset: ứng với tài nguyên là các file SWF.
• SoundAsset: ứng với tài nguyên là file MP3.
• SpriteClass: ứng với tài nguyên là các thành phần của thư viện SWF tĩnh
hoặc file SVG.
• ButtonAsset: hiếm khi dùng.
• TextFieldAsset: được cung cấp bởi một số công cụ khác ngoại trừ Flex.
Một trong những thế mạnh của ActionScript là khả năng xử lý ứng dụng lúc thực thi. Nghĩa là ta có thể thay đổi dữ liệu nhúng lúc thực thi ứng dụng.
Ví dụ:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init( )">
<mx:Script> <![CDATA[
[Embed(source="assets/sun.jpg")] private var sunAsset:Class;
[Embed(source="assets/moon.jpg")] private var moonAsset:Class;
private function init( ):void{ sunImage.source = sunAsset;}
private function showMoon( ):void{ sunImage.source = moonAsset;} ]]>
</mx:Script>
<mx:Image id="sunImage"/>
<mx:Button label="Show the Moon!" click="showMoon( )"/> </mx:Application> 2.5.2.2.3. Dùng CSS Dùng CSS để định dạng kiểu dáng cho các thành phần. Ví dụ: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Style> Button { down-skin:Embed(source="assets/btnDown.PNG"); over-skin:Embed(source="assets/btnOver.PNG"); up-skin:Embed(source="assets/btnUp.PNG"); } </mx:Style>
<mx:Button label="Hello World!"/> </mx:Application>