Chương 2 FLEX
2.5. Làm việc với Media
2.5.3. Làm việc với các loại Media khác nhau
2.5.3.1. Các đối tượng đồ họa
Các đối tượng đồ họa như là các hình ảnh tĩnh, bitmap hoặc là vector dùng để thay
đổi skin cho các điều khiển giao diện, để nạp các bức ảnh… Đối tượng đồ họa là
Vector khác với bitmap ở chỗ nó được thể hiện thông qua các định nghĩa đa giác chứ khơng qua pixel. Vì vậy vector có các giải pháp tốt hơn và dung lượng nhỏ hơn so với bitmap.
2.5.3.1.1. Thêm đối tượng đồ họa
Cách duy nhất làm việc với đối tượng đồ họa trong Flex là thông qua thành phần
Image.
Flex framework cung cấp các loại đối tượng đồ họa như JPEG, GIF, PNG, SVG – định dạng dựa trên vector, chạy lúc biên dịch và SWF.
Với Flex, ta dễ dàng hiển thị một tập hợp hình ảnh chứa trong một mảng bằng cách dùng thành phần Repeater và thiết lập thuộc tính dataProvider của nó.
Ví dụ: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Repeater id="images" dataProvider="['assets/image1.png','assets/image2.png']"> <mx:Image source="{images.currentItem}"/> </mx:Repeater> </mx:Application>
2.5.3.1.2. Co dãn các đối tượng đồ họa
Một khả năng khác của Flash Player là Scale-9 giúp co dãn các đối tượng đồ họa
mà vẫn giữ nguyên các góc của nó. Ví dụ:
Hình 2 và hình 3 là kéo dãn của hình 1. Nhưng hình 2 với 4 góc bị thay đổi. Hình 3 vẫn giữ ngun được 4 góc. Scale-9 sẽ giúp ta thực hiện điều này. Để dùng Scale- 9, ta phải xác định tọa độ co dãn bằng chỉ thị Embed() với các tham số scaleGridTop, scaleGridBottom, scaleGridLeft, scaleGridRight.
Ví dụ:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Image width="100" height="100"
source="@Embed(source='assets/cube.GIF',scaleGridTop='10', scaleGridLeft='10', scaleGridBottom='90',scaleGridRight='90')"/> </mx:Application>
2.5.3.1.3. Thư viện SWF
Thư viện SWF cho phép ta cung cấp chỉ một file nhưng lại chứa rất nhiều tài nguyên cần thiết cho ứng dụng. Điều đó giúp cho người thiết kế dễ dàng chỉnh sửa thay đổi tài nguyên trong suốt quá trình phát triển ứng dụng.
Ví dụ:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Button label="Click me"
source="@Embed(source='assets/library.SWF', symbol='circleAnimation')"/>
</mx:Application>
Trong ví dụ trên, ký hiệu circleAnimation trong file library.swf được nhúng vào. Tham số symbol là tham số đặc biệt, được cung cấp chỉ với thư viện SWF. Nếu
symbol được tham chiếu đến mà khơng tồn tại thì sẽ báo lỗi.
Nếu thư viện SWF gồm nhiều item, nhưng chỉ một số được tham chiếu đến trong
ứng dụng thì chỉ những item được tham chiếu mới được nhúng trong SWF cuối
sẽ tự làm điều đó. Nếu muốn thay đổi kiểu của các item trong thư viện, ví dụ như từ bitmap thành video, ta chỉ cần thay đổi trong thư viện mà không phải đụng đến mã.
2.5.3.1.4. Xây dựng thư viện tài nguyên dùng lớp tĩnh trong Flex
Một cách khác để quản lý tài nguyên là định nghĩa lớp bằng ActionScript, lớp này sẽ xác định tất cả tài nguyên trong ứng dụng. Trong lớp này, tài nguyên sẽ bao hàm các thuộc tính hằng số khai báo tĩnh và public mà ta có thể tham chiếu đến trong ứng dụng.
Ví dụ:
package com.oreilly.programmingflex.assets{ public class Images{
[Embed(source="/assets/btnOver.png")] public static const LOGO:Class;
[Embed(source="/assets/sun.jpg")]
public static const LOGOUT_ICON:Class; }
}
Và sau đó tham chiếu đến tài nguyên đã được nhúng trên bằng ActionScript hoặc
MXML <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import com.oreilly.programmingflex.assets.Images; ]]> </mx:Script> <mx:Image source="{Images.LOGO}"/>
<mx:Button label="Logout" icon="{Images.LOGOUT_ICON}"/> </mx:Application>
2.5.3.2. Làm việc với Audio và Video
Audio và Video thường được nhúng, tải - loading hoặc đưa - streaming vào ứng
dụng. Nhưng những file audio video có kích thước lớn nên nó thường được nạp
hoặc đưa vào hơn là nhúng. Load audio và video tương tự như với đối tượng đồ họa nhưng có thêm một vài khả năng như điều khiển playback. Streaming cũng giống
như loading nhưng nó dựa vào server để chia nhỏ và trả dữ liệu media về cho client.
2.5.3.2.1. Thêm hiệu ứng âm thanh
Flex framework cung cấp thành phần SoundEffect để xử lý hiệu ứng âm thanh với
thuộc tính duration để hiệu chỉnh thời gian, mặc định là 500 milliseconds Ví dụ:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:SoundEffect id="clickSound" source="assets/click.MP3"/> <mx:Button label="Click me" mouseDownEffect="{clickSound}"/> </mx:Application>
Nhưng nếu muốn cung cấp đầy đủ các điều khiển cho file audio bà video, Flash
Player cung cấp một package flash.media bao gồm các lớp như Sound, SoundChannel, và SoundTransform. Cụ thể là một lớp Sound phát một MP3 với
phương thức play(). Phương thức này trả về một thể hiện của SoundChannel.
SoundChannel tham chiếu đến SoundTransform để điều khiển các kênh phát của
các audio.
2.5.3.2.2. Làm việc với video
Flex cũng có khả năng hiển thị video. Có 3 dạng codec (một kỹ thuật nén dùng khi mã hóa kỹ thuật số video) được Flash Player hỗ trợ: On2 VP6, Sorenson Spark và Screen. Thường thì On2 VP6 là tốt nhất vì nó cho chất lượng video tốt.
Cách đưa video vào ứng dụng cũng tương tự như audio.
2.5.3.2.3. Streaming Media
Streaming cũng giống như loading nhưng nó dựa vào server để chia nhỏ và trả dữ liệu media về cho client. Điều này giúp người dùng bắt đầu xem nội dung audio và
video nhanh chóng hơn và có thể nghe từ giữa đoạn mà khơng cần phải tải xuống toàn bộ file. Flash Player hỗ trợ streaming thông qua Real Time Messaging Protocol
(RTMP). RTML được phát triển bởi Adobe, là một phần của sản phẩm Flash Media
Server (http://www.adobe.com/go/fms). Ví dụ:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="Video Viewer">
<mx:VideoDisplay bufferTime="3" id="videoViewer" source="rtmp://localhost/pf2/video/video.flv"
volume="{volumeControl.value}"/> <mx:ControlBar>
<mx:Label text="{videoViewer.playheadTime.toPrecision(2)}"/> <mx:Button label="Play" click="videoViewer.play( )"/>
<mx:Button label="Pause" click="videoViewer.pause( )"/> <mx:Button label="Stop" click="videoViewer.stop( )"/>
<mx:HSlider id="volumeControl" maximum="1" width="80"/> </mx:ControlBar>
</mx:Panel> </mx:Application>
bufferTime là thuộc tính của VideoDisplay, chỉ có ảnh hưởng với video được
stream.