thanhanlang Flash AS 30 Danh sach hien thi

ðiều này có thể ñược thực hiện bằng cách gọi phương thức addChild () hoặc addChildAt () từ một instance ( như Sprite, MovieClip, TextField) của lớp DisplayObjectContainer .Khi ñó bản [r]

(1)

1

DANH SÁCH HIỂN THỊ ( DISPLAY LIST )

Bạn muốn thêm ñối tượng hiển thị vào danh sách hiển thị để xuất hình.( Nói cách khác giả sử bạn muốn thêm đối tượng hiển thị lên hình – danh sách hiển thị hiểu tập hợp ñối tượng ñược hiển thị.)

Sử dụng Method addChild () addChildAt () từ lớp DisplayObectContainer

Các Flash Player gồm có hai phần chắnh có quan hệ chức với ựể tạo ựơn vị liên kết chặt chẽ.đó ActionScript Virtual Machine (AVM-Máy ảo xử lý Code) Rendering Engine( máy vẽ) AVM có trách nhiệm thực code ActionScript , Rendering Engine ựối tượng biểu diễn hình Bởi Flash Player gồm có hai phần chắnh nên biểu diễn ( vẽ ra) ựối tượng hình trình hai bước:

• ðối tượng biểu diễn phải ñược tạo thông qua cấu ActionScript ( tức phải dùng code để tạo )

• Sau đối tượng phải vẽ hình nhờ Rendering Engine

Bước ñầu ñược thực cách dùng tốn tử new() để tạo instance loại ñối tượng cần thể ðối tượng muốn thêm vào danh sách hiển thị phải thuộc subclass trực tiếp gián tiếp lớp DisplayObject, Sprite, MovieClip, TextField, lớp riêng bạn tạo Ví dụ để tạo TextField bạn sử dụng ñoạn code sau ñây:

var hello:TextField = new TextField( );

Các dòng mã trước tiên tạo ñối tượng hiển thị TextField AVM, nhiên khơng hiển thị hình đối tượng khơng tồn

Rendering Engine ðể tạo ñối tượng Rendering Engine, ñối tượng cần phải ñược ñưa vào danh sách hiển thị ðiều thực cách gọi phương thức addChild () addChildAt () từ instance ( Sprite, MovieClip, TextField) lớp DisplayObjectContainer Khi thân đối tượng có danh sách hiển thị.( Và tất nhiên chạy chương trình Rendering Engine vẽ đối tượng lên hình )

Tóm lại : Dùng tốn tử new() để tạo đối tượng , sau dùng phương thức addChild() hay addChildAt() ñể khởi ñộng máy vẽ vẽ lên hình

addChild(child:flash.display:DisplayObject) — method, class flash.display.DisplayObjectContainer

Thên ñối tượng hiển thị vào ñối tượng hiển thị cha (DisplayObjectContainer) addChild(child:flash.display:DisplayObject) — method, class flash.display.Stage

addChildAt(child:flash.display:DisplayObject, index:int) method, class flash.display.DisplayObjectContainer

(2)

2

addChildAt(child:flash.display:DisplayObject, index:int) — method, class flash.display.Stage

Adds a child DisplayObject instance to this DisplayObjectContainer instance

Phương thức addChild() cần tham số ñối tượng cần hiển thị , thêm vào containner ( thùng chứa : ñối tượng cha ) đối tượng container Ví dụ :

package {

import flash.display.DisplayObjectContainer; import flash.display.Sprite;

import flash.text.TextField;

public class DisplayListExample extends Sprite { public function DisplayListExample( ) {

// Tạo ñối tượng cần hiển thị – TextField - nhờ ActionScript

var hello:TextField = new TextField( ); hello.text = "hello";

// Tạo ñối tượng rendering engine // cách thêm vào display list Khi textfield hiển thi

addChild( hello );// tham số ñối tượng cần hiển thị

} } }

Một ñối tượng hiển thị TextField ñược tạo hàm tạo DisplayListExample, hàm tạoầnỳ cho phép tạo ñối tượng bên AVM Lúc này, đối tượng khơng xuất hình Rendering Engine khơng biết Chỉ sau đối tượng thêm vào list hiển thị thông qua lời gọi phương thức addChild () TextField được hiển thị

Các phương thức addChild() addChildAt() ñưa ñối tượng hiển thị vào ñối tượng hiển thị cha Ta khơng cần thiết phải đưa đối tượng hiển thị vào display list ðối tượng ñưa vào ñối tượng cha phải dược ñưa vào display list

ðoạn code sau minh hoạ phương thức addChild() khơng bảo đảm đối tượng hiển thị ñược ñưa vào display list Text ñược chứa container thân container chưa ñưa vào display list nên text khơng nhì thấy

(3)

3

var hello:TextField = new TextField( ); hello.text = "hello";

// Tạo container ñể chứa textField- ñây Sprite

var container:Sprite = new Sprite( ); // Thêm textField vào container

container.addChild( hello );

ðể làm cho hiển thị văn hình, container chứa văn cần phải ñược thêm vào danh sách hiển thị ðiều ñược thực cách tham chiếu ñến ñối tượng container khác có danh sách hiển thị, chẳng hạn _root ( container gốc ) stage ( hình trình diễn file) Ta dùng addChild (), ñưa vào root hay stage ñối tượng container text hiển thị

// Lấy root làm container ñưa vào root

// container lưu giữ text từ làm xuất hình

DisplayObjectContainer( root ).addChild( container );

Các container chứa đối tượng hiển thị có khả lưu giữ nhiều ñối tượng Container giữ bên danh sách ñối tượng con,và thứ tự ñối tượng danh sách xác ñịnh thứ tự hiển thị hình Mỗi ñối tượng có vị trí rõ ràng danh sách gán giá trị mục số nguyên, giống array Vị trí vị trí danh sách đối tượng vị trí ñược vẽ nằm ( sau) ñối tượng vị trí 1, ( vị trí 1) lại ñược vẽ nằm (sau) ñối tượng vị trí 2… ðiều tương tự khái niệm depth ( ñộ sâu) flash trước, dễ quản lý Khơng có kẻ hở số vị trí.ðiều có nghĩa khơng có đối tượng khác vị trí vị trí có

Khi ñối tượng ñược thêm vào qua phương thức addChild() vẽ phí đối tượng khác lệnh addChild() ñặt ñối tượng phía trước danh sách ñối tượng stack ta dùng addChildAt()

Phương thức addChildAt() cần tham số: (tham số ñầu ñối tượng cần thêm vào , tham số sau vị trí mà đối tượng cần dùng) Việc định vị trí làm cho đối tượng đưa vào vị tí cuối lít làm cho xuất phí tất đối tượng khác.Nếu có đối tượng dang vị trí ñược chọn tất ñối tượng cọn ñó ñvijcos số ñều ñược dich lên đơn vị , nhờ đối tượng chèn vào Nếu định vị trí khơng thích hợp , ví dụ vị trí có giá trị âm hay vị trí có giá trị cao số đối tượng container tạo lỗi RangeError làm cho đối tượng khơng đưa vào

(4)

4

, thêm vào sau vịng trịn màu đỏ Sau hai lần gọi phương thức addChild (), vịng trịn màu đỏ vị trí vịng trịn màu xanh vị trí 1.Vịng trịn màu xanh sau chèn vào hai vịng trịn phương thức addChildAt () , xác định cụ thể vị trí là1 danh sách Các vịng trịn màu xanh, trước vị trí 1, chuyển đến vị trí vịng trịn màu xanh ñược ñưa vào vị trí số Kết cuối vịng trịn màu đỏ vị trí vẽ bên vịng trịn màu xanh vị trí 1, vịng trịn màu xanh vẽ bên vịng trịn màu xanh vị trí

package {

import flash.display.*;

public class CircleExample extends Sprite { public function CircleExample( ) {

// Create three different colored circles and // change their coordinates so they are staggered // and aren't all located at (0,0)

var red:Shape = createCircle( 0xFF0000, 10 ); red.x = 10;

red.y = 20;

var green:Shape = createCircle( 0x00FF00, 10 ); green.x = 15;

green.y = 25;

var blue:Shape = createCircle( 0x0000FF, 10 ); blue.x = 20;

blue.y = 20;

// First add the red circle, then add the blue circle (so blue

// is drawn on top of red) addChild( red );

addChild( blue );

// Place the green circle between the red and blue circles

addChildAt( green, ); }

// Helper function to create a circle shape with a given color

// and radius

public function createCircle( color:uint, radius:Number ):Shape {

var shape:Shape = new Shape( ); shape.graphics.beginFill( color );

shape.graphics.drawCircle( 0, 0, radius ); shape.graphics.endFill( );

return shape; }

(5)

5 }

Cho ñến ñã nói việc thêm mục vào danh sách hiển thị, xảy addChild () ñược sử dụng ñối tượng ñã ñược vào danh sách hiển thị, ñối tượng container khác? ðây khái niệm reparenting ðối tượng ñược lấy từ container mà đặt vào container khác (mà thêm vào.)

Khi bạn reparent đối tượng hiển thị, khơng cần loại bỏ trước tiên Phương thức addChild () lo điều

Ví dụ: ( bạn xem kỷ code ñể biết ñạng reparent phần nào, package {

public class DisplayListExample extends Sprite { public function DisplayListExample( ) {

// Create three different colored circles and // change their coordinates so they are staggered // and aren't all located at (0,0)

red.y = 20;

green.y = 25;

blue.y = 20;

// Create a container to hold the three circles, and add the

// circles to the container

var container1:Sprite = new Sprite( ); container1.addChild( red );

container1.addChild( green ); container1.addChild( blue );

// Add the container to the display list addChild( container1 );

// Create a second container and add it the display list

var container2:Sprite = new Sprite( ); addChild( container2 );

(6)

6

// which has the net effect of the red circle being drawn

// on top of the green and blue ones container2.addChild( red );

}

// Helper function to create a circle shape with a given color

// and radius

return shape; }

} }

Loại bỏ mục từ display list

Ta dùng phương thức : removeChild( ) removeChildAt( ) từ lớp DisplayObectContainer

Phương thức removeChild( ) có tham số đối tượng cần gở khỏi container Nếu đối tượng dó khơng phải container có lỗi ArgumentError ném Ví dụ :

package {

import flash.display.Sprite; import flash.text.TextField; import flash.events.MouseEvent;

public class RemoveChildExample extends Sprite { // tạo biến ñịa phương ñể lưu tham khảo ñến textfield remove

private var _label:TextField;

public function RemoveChildExample( ) { _label = new TextField( );

_label.text = "Some Text";

(7)

7

//Khi kích chuột vào stage label bị gở

stage.addEventListener( MouseEvent.CLICK, removeLabel );

}

// Gở label từ displayl list

public function removeLabel( event:MouseEvent ):void {

removeChild( _label ); }

} }

Ví dụ : dùng removeChildAt() package {

import flash.display.Sprite; import flash.text.TextField; import flash.events.MouseEvent;

public class DisplayListExample extends Sprite {

public function DisplayListExample( ) { var label:TextField = new TextField( ); label.text = "Some Text";

addChild( label );

//Khi kích chuột vào stage label bị gở stage.addEventListener( MouseEvent.CLICK,

removeLabel ); }

// Gở label từ display list

public function removeLabel( event:MouseEvent ):void {

// Only remove the label if it exists if ( numChildren > ) {

removeChildAt( ); }

} } }

(8)

8 import flash.display.*;

public class DisplayObjectUtilities { // Gở tát Child từ container

public static function removeAllChildren(

container:DisplayObjectContainer ):void {

// Vì giá trị số Child ln thay đổi sau lần remove nên cần lưu giá trị gốc vào biến ñể tính xác

var count:int = container.numChildren;

// Loop

for ( var i:int = 0; i < count; i++ ) { container.removeChildAt( );

} } } }

Có thể dùng DisplayObjectUtilities.removeAllChildren( ) để xố tất Child , phương thức nằm phần package thêm vào ascb.util.DisplayObjectUtilities

Di chuyển ñối tượng tới trước, lui sau ñối tượng khác

Sử dụng phương thức setChildIndex( ) lớp DisplayObectContainer ñể thay ñổi vị trí đối tượng cụ thể

Sử dụng getChildIndex( ) getChildAt( ) ñể truy vấn đối tượng , từ chúng vào ñúng vị trí

Ví dụ : package {

public class SetChildIndexExample extends Sprite { public function SetChildIndexExample( ) {

// Tạo hình trịn màu red, green, blue

red.y = 20;

green.y = 25;

blue.y = 20;

(9)

9 addChild( red );

addChild( green ); addChild( blue );

// dichuyển blue setChildIndex( blue, ); }

// hàm vẽ đường trịn

return shape; }

} }

Thay đổi vị trí khơng biết rõ vị trí đối tượng

Ta dùng getChildIndex() để lấy vị trí đối tượng dùng setChildIndex() để đặt đối tượng

public class GetChildIndexExample extends Sprite { public function GetChildIndexExample( ) {

// Create two different sized circles

green.y = 25;

blue.y = 25;

// blue trước green addChild( green ); addChild( blue );

// ðưa green trước blue

setChildIndex( blue, getChildIndex( green ) ); }

(10)

10 // Vẽ đường trịn

return shape; }

} } Ví dụ:

Ví dụ dùng array ñể lưu trử màu dùng loop ñể tạo nhiều hình trịn Nếu kích vào stage đường trịn sau đưa lên trước

package {

import flash.display.*; import flash.events.*;

public class GetChildAtExample extends Sprite { public function GetChildAtExample( ) {

// ðịnh nghĩa mảng màu

var color:Array = [ 0xFF0000, 0x990000, 0x660000, 0x00FF00,

0x009900, 0x006600, 0x0000FF, 0x000099,

0x000066, 0xCCCCCC ]; / Tạo 10 ñường tròn dùng loop

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

var circle:Shape = createCircle( color[i], 10 ); circle.x = i;

circle.y = i + 10; // the + 10 adds padding from the top

addChild( circle ); }

stage.addEventListener( MouseEvent.CLICK, updateDisplay );

}

// chuyển đường trịn lên

public function updateDisplay( event:MouseEvent ):void { // getChildAt(kinhdungf ñể lấy số đối tượng vị trí đưa lên vị trí đầu //nhờ setChildIndex() , lưu ý vị trí đầu numChildren-1

setChildIndex( getChildAt(0), numChildren - ); }

(11)

11

return shape; }

} } Lưu ý :

ðể thuận lợi cho việc vẽ tạo đường trịn ta tạo Custom Class tên Circle Khi để tạo đường trịn ta cần dùng tốn tử new ()

Sau package, package tạo custom class tên Circle package sử dụng lớp để tạo nên đường trịn Cũng viết code trực tiếp lên file fla cách import Circle ñối với AS 2.0

package {

import flash.display.Shape;

/* The Circle class is a custom visual class */ public class Circle extends Shape {

// Local variables to store the circle properties private var _color:uint;

private var _radius:Number;

/*

* Constructor: called when a Circle is created The default

* color is black, and the default radius is 10 */

public function Circle( color:uint = 0x000000, radius:Number = 10 ) {

// Save the color and radius values _color = color;

_radius = radius;

// When the circle is created, automatically draw it draw( );

} /*

* Draws the circle based on the color and radius values */

(12)

12 graphics.beginFill( _color );

graphics.drawCircle( 0, 0, _radius ); graphics.endFill( );

} } }

package {

import flash.display.Sprite;

public class UsingCircleExample extends Sprite { public function UsingCircleExample( ) {

// Create some circles with the Circle class and // change their coordinates so they are staggered // and aren't all located at (0,0)

var red:Circle = new Circle( 0xFF0000, 10 ); red.x = 10;

red.y = 20;

var green:Circle = new Circle( 0x00FF00, 10 ); green.x = 15;

green.y = 25;

var blue:Circle = new Circle( 0x0000FF, 10 ); blue.x = 20;

blue.y = 20;

// Add the circles to the display list addChild( red );

addChild( green ); addChild( blue ); }

} }

TẠO NÚT ðƠN GIẢN Packageflash.display

Class public class SimpleButton

Các thuộc tính lớp SimpleButton: downState : DisplayObject

(13)

13 hitTestState : DisplayObject

overState : DisplayObject

soundTransform : flash.media:SoundTransform trackAsMenu : Boolean

upState : DisplayObject useHandCursor : Boolean

Vấn ñề

Bạn muốn tạo nút tương tác cho phép người dùng bấm vào thực hành ñộng, chẳng hạn gửi form tính tốn tổng số

Giải pháp

Tạo thể lớp SimpleButton tạo ñối tượng hiển thị upState, Downstate, overState , hitTestState Ngoài ra, cần tạo subclass

SimpleButton mô tả hành vi nút

Sử dụng kiện click ñể gọi phương thức người dùng nhấn nút Thảo luận

Mơ hình danh sách hiển thị cung cấp cách dễ dàng ñể tạo nút thông qua lớp

SimpleButton Lớp SimpleButton cho phép người dùng tương tác với hình hiển thị đối tượng sử dụng chuột , làm cho bạn dễ dàng chọn tương tác thông qua trạng thái khác nút ( ấn nút, ñưa chuột vào nút…) Các trạng thái nút liệt kê sau ñây ñược xem thuộc tính lớp SimpleButton

upState

Là trạng thái chuột không nút overState

Là trạng thái chuột nút Khi chuột rời nút nút trở trạng thái upState

downState

(14)

14

Là trạng thái xảy chuột vào vùng giới hạn nút hitTestState không thực hiển thị hình, ñược sử dụng cho mục ñích theo dõi chuột

import flash.display.*; import flash.events.*;

public class SimpleButtonDemo extends Sprite { public function SimpleButtonDemo( ) {

// tạo button định vị hình var button:SimpleButton = new SimpleButton( ); button.x = 20;

button.y = 20;

// Tạo trạng thái button

button.upState = createCircle( 0x00FF00, 15 ); button.overState = createCircle( 0xFFFFFF, 16 ); button.downState = createCircle( 0xCCCCCC, 15 ); button.hitTestState = button.upState;

// thêm vào event listener ñẻ click vào nut action thực

button.addEventListener( MouseEvent.CLICK, handleClick );

// Finally, add the button to the display list addChild( button );

}

// Hàm vẽ đường trịn

private function createCircle( color:uint, radius:Number ):Shape {

var circle:Shape = new Shape( );

circle.graphics.lineStyle( 1, 0x000000 ); circle.graphics.beginFill( color );

circle.graphics.drawCircle( 0, 0, radius ); circle.graphics.endFill( );

return circle; }

private function handleClick( event:MouseEvent ):void { trace( "Mouse clicked on the button" );

(15)

15 }

}

Sau chạy khối mã này, vòng tròn màu xanh xuất Khi bạn di chuyển chuột qua vòng tròn màu xanh cây, vòng tròn màu trắng lớn xuất tựa rollover Khi bạn nhấp vào vịng trịn màu trắng, biến thành vịng trịn màu xám nhỏ Hiệu ứng hình ảnh ñược tạo ñối tượng nút SimpleButton thay đổi trạng thái tuỳ thuộc vào hành ñộng chuột

trạng thái hitTeststate có lẻ trạng thái quan tâm nhiều số trạng thái nut Trong ñoạn code hitteststate ñược thiết lập upState ðây điều thường xảy thơng thường ta quan tâm tới phạm vi nút xuất cụ thể hình hitTestState thiết lập cho hiển thị bạn muốn kiểm soát giới hạn hoạt ñộng nút ðể tạo diện tích lớn cho nút nhấn, thử thay ñổi ñoạn mã trước ñây ñể thiết lập hitTestState :

button.hitTestState = createCircle( 0x000000, 50 );

đoạn mã sau ựây tạo lớp RectangleButton Lớp RectangleButton xác ựịnh hành vi kiểu ựặc biệt SimpleButton tạo hình chữ nhật màu xanh có văn ựầu

package {

import flash.display.* import flash.text.*;

import flash.filters.DropShadowFilter;

public class RectangleButton extends SimpleButton { // The text to appear on the button

private var _text:String;

// Save the width and height of the rectangle private var _width:Number;

private var _height:Number;

public function RectangleButton( text:String, width:Number, height:Number ) {

// Save the values to use them to create the button states

_text = text; _width = width; _height = height;

// Create the button states based on width, height, and text value

(16)

16 }

// Create the display object for the button's up state private function createUpState( ):Sprite {

var sprite:Sprite = new Sprite( );

var background:Shape = createdColoredRectangle( 0x33FF66 );

var textField:TextField = createTextField( false );

sprite.addChild( background ); sprite.addChild( textField ); return sprite;

}

// Create the display object for the button's up state private function createOverState( ):Sprite {

var background:Shape = createdColoredRectangle( 0x70FF94 );

var textField:TextField = createTextField( false );

sprite.addChild( background ); sprite.addChild( textField ); return sprite;

}

// Create the display object for the button's down state private function createDownState( ):Sprite {

var background:Shape = createdColoredRectangle( 0xCCCCCC );

var textField:TextField = createTextField( true );

sprite.addChild( background ); sprite.addChild( textField );

return sprite; }

// Create a rounded rectangle with a specific fill color private function createdColoredRectangle( color:uint ):Shape {

var rect:Shape = new Shape( );

(17)

17

rect.graphics.beginFill( color );

rect.graphics.drawRoundRect( 0, 0, _width, _height, 15 );

rect.graphics.endFill( );

rect.filters = [ new DropShadowFilter( ) ]; return rect;

}

// Create the text field to display the text of the button

private function createTextField( downState:Boolean ):TextField {

var textField:TextField = new TextField( ); textField.text = _text;

textField.width = _width;

// Center the text horizontally

var format:TextFormat = new TextFormat( ); format.align = TextFormatAlign.CENTER;

textField.setTextFormat( format );

// Center the text vertically

textField.y = ( _height - textField.textHeight ) / 2; textField.y -= 2; // Subtract pixels to adjust for offset

// The down state places the text down and to the right // further than the other states

if ( downState ) { textField.x += 1; textField.y += 1; }

return textField; }

} }

Vì tất code cho phép tạo nút ñược ñóng gói ñể dùng lại Do dễ dàng tạo nhiều nút mà khơng nhiều cơng sức

Ví dụ sau sử dụng lớp RectangleButton ñã tạo ñể tạo nhiều nút khác: package {

public class SimpleButtonDemo extends Sprite { public function SimpleButtonDemo( ) {

(18)

18

// Create three rectangular buttons with different text and

// different sizes, and place them at various locations within

// the movie

var button1:RectangleButton = new RectangleButton( "Button 1", 60, 100 );

button1.x = 20; button1.y = 20;

// Add the buttons to the display list so they appear on-screen

addChild( button1 ); addChild( button2 ); addChild( button3 ); }

} }

LOAD CÁC HÌNH ẢNH BÊN NGỒI KHI CHẠY CHƯƠNG TRÌNH

Dùng lớp Loader để load hình ảnh hiển thị chúng lên hình

Package flash.display

Class public class Loader

Các phương thức lớp:

Loader() : Tạo đối tượng loader để nhúng file swf hay hình ảnh close():void : huỷ phương thức load()

(19)

19

loadBytes(bytes:ByteArray, context:LoaderContext = null):void unload():void

unloadAndStop(gc:Boolean = true):void

Có ba bước ñể load nội dung bên ngoài: Tạo instance lớp Loader

Thêm instance Loader vào danh sách hiển thị Gọi hàm load (URL)

Hàm load() cần tham số Nó cần ñối tượng URLRequest ñể ñịnh rõ URL nguồn.Khi file fla hình ảnh chung folder URL tên file hình ảnh ( phải có đi, ví dụ: “hinh1.jpg “)

Ví dụ:

package {

import flash.net.URLRequest;

public class LoaderExample extends Sprite { public function LoaderExample( ) {

// Tạo instance lớp Loader var loader:Loader = new Loader( );

// Thêm instance Loader vào danh sách hiển thị addChild( loader );

// Gọi hàm load (URL)

loader.load( new URLRequest( "image.jpg" ) ); }

} }

Trong trình load file xảy lỗi Lỗi ñịa URL sai , bảo mật dung lượng file lớn nên trình tải bị chậm Thay để hình trống q trình tải ta cho hình ảnh loading vào hình để thơng tin tiến trình loading

(20)

20 open : ñược tạo ñối tượng bắt ñầu load

progress : ñược tạo tiến trình ñã ñang thực complete : Khi tải xong

init : thuộc tính phương thức file swf load tồn

httpStatus : Tạo mã trạng thái cho yêu cầu HTTP bị lỗi ñược phát trình cố gắng tải

ioError : tạo có lỗi nặng

securityError tạo có lỗi bảo mật unload : tạo gọi phương trình unload() Ví dụ:

package {

import flash.display.*; import flash.text.*;

import flash.net.URLRequest; import flash.events.*;

public class LoaderExample extends Sprite { public function LoaderExample( ) {

// tạo instance loader thêm vào display list var loader:Loader = new Loader( );

addChild( loader );

//thêm event handlers để kiểm tra tiến trình

loader.contentLoaderInfo.addEventListener( Event.OPEN, handleOpen );

loader.contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, handleProgress );

loader.contentLoaderInfo.addEventListener( Event.COMPLETE, handleComplete );

// Load vào file hình ảnh

loader.load( new URLRequest( "image.jpg" ) ); }

private function handleOpen( event:Event ):void { trace( "open" );

}

private function handleProgress( event:ProgressEvent ):void {

var percent:Number = event.bytesLoaded / event.bytesTotal * 100;

trace( "progress, percent = " + percent ); }

(21)

21 }

} }

Bằng cách đặt thêm code vào event handler bạn theo dõi tốt tiến trình load.Ví dụ: ta thay ñổi code event handler phần sau:

private function handleOpen( event:Event ):void {

// Create a simple text-based preloader and add it to the // display list

_loaderStatus = new TextField( ); addChild( loaderStatus );

_loaderStatus.text = "Loading: 0%"; }

private function handleProgress( event:ProgressEvent ):void { // Update the loading % to inform the user of progress

var percent:Number = event.bytesLoaded / event.bytesTotal * 100;

_loaderStatus.text = "Loading: " + percent + "%"; }

private function handleComplete( event:Event ):void { // Clean up - preloader is no longer necessary

removeChild( loaderStatus ); _loaderStatus = null;

}

TẢI VÀ TƯƠNG TÁC VỚI SWF NGOÀI

Dùng lớp Loader ñể load file swf nhờ vào thuộc tính content instance Loader Ví dụ sau tạo file swf ExternalMovie.swf LoaderExample.swf file

ExternalMovie.swf ñược load chạy ,vào file thứ hai Code cho file thư nhất: package {

import flash.display.Sprite; import flash.display.Shape;

public class ExternalMovie extends Sprite { private var _color:uint = 0x000000;

private var _circle:Shape;

public function ExternalMovie( ) { updateDisplay( );

}

private function updateDisplay( ):void {

(22)

22

// and make it visible by adding it to the display list if ( _circle == null ) {

_circle = new Shape( ); addChild( _circle );

}

// Clear any previously drawn content and draw // a new circle with the fill color

_circle.graphics.clear( );

_circle.graphics.beginFill( _color );

_circle.graphics.drawCircle( 100, 100, 40 ); }

// Changes the color of the circle

public function setColor( color:uint ):void { _color = color;

updateDisplay( ); }

// Gets the current circle color value public function getColor( ):uint { return _color;

} } }

Và code cho file thứ hai: package {

import flash.net.URLRequest; import flash.events.Event;

public class LoaderExample extends Sprite {

private var _loader:Loader;

public function LoaderExample( ) {

// Create the Loader and add it to the display list _loader = new Loader( );

addChild( _loader );

// Add the event handler to interact with the loaded movie

(23)

23

// Load the external movie

_loader.load( new URLRequest( "ExternalMovie.swf" ) ); }

// Event handler called when the externally loaded movie is

// ready to be interacted with

private function handleInit( event:Event ):void { // Typed as * here because the type is not known at compile-time

var movie:* = _loader.content;

// Calls a method in the external movie to get data out // Displays:

trace( movie.getColor( ) );

// Calls a method in the external movie to set data // Sets the color in the external movie, which draws // a circle with the new color, in this case red movie.setColor( 0xFF0000 );

} } }

TẠO TƯƠNG TÁC VỚI CHUỘT

sử dụng event khác chuột ñể lắng nghe tương tác chuột lên ñối tượng hiển thị loại InteractiveObject , dùng thuộc tính đọc mouseX, mouseY từ

DisplayObject để kiểm tra vị trí chuột so với đối tượng hiển thị thuộc tính localX, localY từ mousEvent truyền cho kiện xử lý chuột

Packageflash.display

Class public class InteractiveObject

ðây lớp trừu tượng sở dành cho tất ccác đối tượng hiển thị mà người dùng tương tác thơng qua chuột hay bàn phím Lớp có nhiều phương thức mơ tả kiện khác chuột bàn phím

clear(),doubleClick,keyDown,mouseDown,mouseMove,mouseOver,mouseUp,mouseWheel ,rightClick, rightMouseDown,rightMouseUp,rollOver,rollOut,

Ví dụ sau tạo hình tròn xuất kiện( dòng text output) chuột di chuyển hình trịn

package {

import flash.display.Sprite; import flash.events.*;

(24)

24

public class InteractiveMouseDemo extends Sprite { public function InteractiveMouseDemo( ) {

var circle:Sprite = new Sprite( ); circle.x = 10;

circle.y = 10;

circle.graphics.beginFill( 0xFF0000 ); circle.graphics.drawCircle( 0, 0, ); circle.graphics.endFill( );

circle.addEventListener( MouseEvent.MOUSE_MOVE, handleMouseMove );

addChild( circle ); }

// Event handle to capture the move event over the circle private function handleMouseMove( event:MouseEvent ):void {

trace( "mouse move" ); }

} }

Bằng cấu trúc circle.addEventListener() ta đưa vào nhiều kiện khác chuột

Có thể xác định toạ độ chuột tương ñối( so với instance- toạ ñộ local) tuyệt đối ( so với hình- toạ độ global)như sau ñây ( thay hàm handleMouseMove hàm sau)

// Event handler to respond to a mouseMove event

private function handleMouseMove( event:MouseEvent ):void { /* Displays:

local x: 3.95 local y: 3.45 */

trace( "local x: " + event.localX ); trace( "local y: " + event.localY );

// Create the point that localToGlobal should convert var localPoint:Point = new Point( event.localX,

event.localY );

// Convert from the local coordinates of the display object that

// dispatched the event to the global stage coordinates var globalPoint:Point = event.target.localToGlobal( localPoint );

(25)

25 /* Displays:

global x: 13.95 global y: 13.45 */

trace( "global x: " + globalPoint.x ); trace( "global y: " + globalPoint.y ); }

Sau ñây ví dụ nhiều kiện Khi chạy chương trình ta dùng chuột để vẽ hình hình

package {

import flash.display.Sprite; import flash.events.MouseEvent;

public class DrawingDemo extends Sprite {

// Flag to indicate whether the mouse is in draw mode private var _drawing:Boolean;

public function DrawingDemo( ) { // Configure the line style

graphics.lineStyle( 2, 0xFFCC33 );

// Drawing is false until the user presses the mouse _drawing = false;

// Add the mouse listeners on the stage object to be // notfied of any mouse event that happens while the // mouse is over the entire movie

stage.addEventListener( MouseEvent.MOUSE_DOWN, startDrawing );

stage.addEventListener( MouseEvent.MOUSE_MOVE, draw ); stage.addEventListener( MouseEvent.MOUSE_UP,

stopDrawing ); }

public function startDrawing( event:MouseEvent ):void { // Move to the current mouse position to be ready for drawing

graphics.moveTo( mouseX, mouseY ); _drawing = true;

}

public function draw( event:MouseEvent ):void { if ( _drawing ) {

// Draw a line from the last mouse position to the // current one

(26)

26 }

}

public function stopDrawing( event:MouseEvent ):void { _drawing = false;

} } }

DRAG VÀ DROP

Các phương thức startDrop( ), stopDrag( ),drag( ) drop( ) cho phép ta bắt ñầu kéo thả chuột tạo đáp ứng cho kiện kéo thả đó, hay đơn kéo thả

Ví dụ sau tạo hình chữ nhật nhỏ có màu hình chữ nhật lớn Khi kéo hình chữ nhật nhỏ vào hình chữ nhật lớn hình chữ nhật lớn lấy màu hình chữ nhật nhỏ package {

import flash.display.Sprite;

import flash.display.DisplayObject; import flash.events.MouseEvent; import flash.geom.Point;

import flash.filters.DropShadowFilter; public class ColorDrop extends Sprite {

private var _red:Sprite; private var _green:Sprite; private var _blue:Sprite; private var _white:Sprite;

// Saves the starting coordinates of a dragging Sprite so // it can be placed back

private var startingLocation:Point;

// Create the rectangles that comprise the interface // and wire the mouse events to make them interactive public function ColorDrop( ) {

createRectangles( ); addEventListeners( ); }

private function createRectangles( ):void { _red = new Sprite( );

(27)

27

_green = new Sprite( )

_green.graphics.beginFill( 0x00FF00 ); _green.graphics.drawRect( 0, 30, 10, 10 ); _green.graphics.endFill( );

_blue = new Sprite( );

_blue.graphics.beginFill( 0x0000FF ); _blue.graphics.drawRect( 0, 50, 10, 10 ); _blue.graphics.endFill( );

_white = new Sprite( );

_white.graphics.beginFill( 0xFFFFFF );

_white.graphics.drawRect( 20, 10, 50, 50 ); _white.graphics.endFill( );

addChild( _red ); addChild( _green ); addChild( _blue ); addChild( _white ); }

private function addEventListeners( ):void {

_red.addEventListener( MouseEvent.MOUSE_DOWN, pickup ); _red.addEventListener( MouseEvent.MOUSE_UP, place );

_green.addEventListener( MouseEvent.MOUSE_DOWN, pickup );

_green.addEventListener( MouseEvent.MOUSE_UP, place );

_blue.addEventListener( MouseEvent.MOUSE_DOWN, pickup );

_blue.addEventListener( MouseEvent.MOUSE_UP, place ); }

public function pickup( event:MouseEvent ):void {

// Save the original location so you can put the target back

startingLocation = new Point( ); startingLocation.x = event.target.x; startingLocation.y = event.target.y;

// Start dragging the Sprite that was clicked on and apply

// a drop shadow filter to give it depth event.target.startDrag( );

event.target.filters = [ new DropShadowFilter( ) ];

(28)

28

// it appears on top of everything else

setChildIndex( DisplayObject( event.target ), numChildren - );

}

public function place( event:MouseEvent ):void {

// Stop dragging the Sprite around and remove the depth // effect (i.e., the drop shadow) from the filter

event.target.stopDrag( ); event.target.filters = null;

// Check to see if the Sprite was dropped over the white

// rectangle, and if so, update the color if ( event.target.dropTarget == _white ) {

// Determine which color was dropped, and apply that color

// to the white rectangle var color:uint;

switch ( event.target ) {

case _red: color = 0xFF0000; break; case _green: color = 0x00FF00; break; case _blue: color = 0x0000FF; break; }

_white.graphics.clear( );

_white.graphics.beginFill( color );

_white.graphics.drawRect( 20, 10, 50, 50 ); _white.graphics.endFill( );

}

// Place the dragging Sprite back to its original location

event.target.x = startingLocation.x; event.target.y = startingLocation.y; }

} }

-////

(29)

Định dạng
Số trang	29
Dung lượng	425,58 KB