Chương 2 FLEX
2.7. Sử dụng các hiệu ứng và sự chuyển tiếp giữa các trạng thái
các trạng thái 2.7.1. Sử dụng hiệu ứng Một số hiệu ứng cơ bản: Hiệu ứng Mô tả Blur Làm mờ Move Di chuyển một thành phần
Fade Hiện rõ dần theo một giá trị alpha Glow Làm sáng lên
Resize Làm thay đổi kích thước của thành phần
Rotate Quay một thành phần
Zoom Phóng to thành phần theo tỷ lệ x, y WipeLeft Quét từ trái qua
WipeRight Quét từ phải qua WipeUp Quét từ trên xuống WipeDown Quét từ dưới lên
Bảng 4 : Một số hiệu ứng cơ bản
Ta có thể dùng các thuộc tính xFrom, xTo, yFrom, và yTo để xác định sự di chuyển của thành phần.
Ví dụ : <mx:Move id="moveEffect" xFrom="-100" /> Hoặc
private var moveEffect:Move = new Move( ); moveEffect.xFrom = -100;
2.7.1.1. Phát các hiệu ứng
Để phát lại một đoạn hiệu ứng nào đó, ta dùng phương thức play(). Nhưng để dùng
được phương thức này thì trước tiên ta phải xác định được mục tiêu là các thành
Ví dụ :
moveEffect.target = textInput; moveEffect.play( );
Ta cũng có thể chỉ định nhiều đối tượng cho một hiệu ứng vào cùng một thời điểm bằng thuộc tình targets
Ví dụ :
moveEffect.targets = [textInput1, textInput2, textInput3, textInput4];
Đối tượng cũng có thể là một khung thiết kế
Ví dụ :
moveEffect.target = vbox;
Một cách khác để chạy hiệu ứng là dùng Triggers
Triggers xuất hiện khi ứng dụng Flex bắt đầu một hiệu ứng. Dùng triggers cho phép
ta khởi tạo và sử dụng hiệu ứng hoàn toàn bằng MXML. Khi dùng triggers ta không cần phải thiết lập thuộc tính target.
Sau đây là một số triggers chuẩn:
• addedEffect • removeEffect • creationCompleteEffect • focusInEffect • focusOutEffect • hideEffect • showEffect • rollOverEffect • rollOutEffect • mouseDownEffect • mouseUpEffect • moveEffect • resizeEffect Ví dụ: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Move id="moveEffect" xFrom="-100" />
<mx:VBox>
<mx:TextInput id="textInput2" creationCompleteEffect="{moveEffect}" /> </mx:VBox> </mx:Application> Hoặc … <mx:VBox creationCompleteEffect="{moveEffect}"> … 2.7.1.2. Các hiệu ứng ghép
Ngồi các hiệu ứng đơn, ta có thể tạo ra các hiệu ứng ghép bằng cách kết hợp nhiều hiệu ứng đơn lại với nhau. Có hai cách ghép là: theo kiểu tuần tự hoặc là song song.
• Hiệu ứng ghép theo kiểu tuần tự: Hiệu ứng này nối tiếp hiệu ứng kia. Ta
dùng thẻ Sequence. Đồng thời ta có thể thêm một khoảng thời gian nghỉ giữa hai hiệu ứng. Ví dụ : <mx:Sequence id="sequenceEffect"> <mx:Fade /> <mx:Pause duration="1000" /> <mx:Move xTo="100" /> </mx:Sequence>
• Hiệu ứng ghép song song: Phát các hiệu ứng cùng một lúc. Ví dụ:
<mx:Parallel id="parallelEffect"> <mx:Fade />
<mx:Move xFrom="-100" /> </mx:Parallel>
Ngồi ra, ta có thể lồng hiệu ứng ghép này trong hiệu ứng ghép kia Ví dụ:
<mx:Sequence id="sequenceEffect"> <mx:Parallel>
<mx:Fade /> <mx:Move xFrom="-100" /> </mx:Parallel> <mx:Pause duration="1000" /> <mx:Rotate /> </mx:Sequence> 2.7.1.3. Một số phương thức khác
Theo mặc định thì các hiệu ứng sẽ diễn ra liên tục, nhưng ta có thể hiệu chỉnh các hiệu ứng bằng các phương thức như: pause(), resume(), reverse()
Ngồi ra ta cịn có thể hỗn hiệu ứng hoặc lặp lại hiệu ứng. Ví dụ:
<mx:Fade id="fadeEffect" startDelay="1000" /> <mx:Fade id="fadeEffect" repeatCount="2" />
2.7.2. Transitions - Sự chuyển tiếp giữa các trạng thái
Transitions cho phép ta chèn các hiệu ứng vào sự chuyển tiếp giữa các trạng thái. Ta có thể tạo transitions bằng MXML hoặc bằng ActionScript.
2.7.2.1. Tạo transitions với MXML
Với MXML, tạo transitions ta dùng thẻ Transition Ví dụ:
<mx:Transition fromState="A" toState="B" />
Hoặc ta có thể dùng dấu * với ý nghĩa là tất cả các trạng thái <mx:Transition fromState="*" toState="B" />
Để chèn hiệu ứng vào giữa hai trạng thái, ta định nghĩa hiệu ứng bên trong thẻ
Transition.
Ví dụ:
<mx:Transition fromState="*" toState="B"> <mx:Move target="{vbox}" />
</mx:Transition>
Khi đó các thuộc tính to và from của hiệu ứng sẽ được tự động gán cho giá trị các
thuộc tính fromState và toState của transition. Tuy nhiên ta vẫn có thể tự thiết lập
các thuộc tính đó như ví dụ sau:
<mx:Transition fromState="*" toState="B">
<mx:Rotate target="{vbox}" angleFrom="0" angleTo="360" /> </mx:Transition>
2.7.2.2. Sử dụng bộ lọc transition
Nếu ta muốn hiệu ứng chỉ áp dụng cho một hành động nào đó của các đối tượng được áp dụng hiệu ứng thì ta phải dùng bộ lọc. Trong ví dụ sau, hiệu ứng Blur chi
áp dụng cho các đối tượng nào đang chuyển động trong suốt transition. Ví dụ :
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence targets="{[windowA, windowB, windowC, windowD]}"> <mx:Blur blurYFrom="0" blurYTo="10" duration="100" filter="move" />
<mx:Parallel> <mx:Move /> <mx:Resize /> </mx:Parallel>
<mx:Blur blurYFrom="10" blurYTo="0" duration="100" filter="move" />
</mx:Sequence> </mx:Transition> </mx:transitions>