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

DANH SÁCH HIỂN THỊ ( DISPLAY LIST ) Bạn muốn thêm một ựối tượng hiển thị mới vào danh sách hiển thị ựể nó xuất hiện trên màn hình.( Nói cách khác là giả sử bạn muốn thêm một ựối tượng nào ựó hiển thị lên màn hình Ờ danh sách hiển thị ựược hiểu là tập hợp các ựối tượng ựược hiển thị.)

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

Các Flash Player gồm có hai phần chắnh có quan hệ về chức năng với nhau ựể tạo một ựơn

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

Ớ đối tượng biểu diễn phải ựược tạo ra thông qua cơ cấu của ActionScript ( tức là phải dùng code ựể tạo )

Ớ Sau ựó ựối tượng phải ựược vẽ trên màn hình nhờ Rendering Engine

Bước ựầu ựược thực hiện bằng cách dùng toán tử new() ựể tạo ra một instance của loại ựối tượng cần thể hiện đối tượng nào muốn thêm vào danh sách hiển thị thì nó phải thuộc về một subclass trực tiếp hoặc gián tiếp của lớp DisplayObject, như Sprite, MovieClip,

TextField, hoặc một lớp riêng do bạn tạo ra Vắ dụ ựể tạo ra một TextField bạn sẽ sử dụng ựoạn code sau ựây:

var hello:TextField = new TextField( );

Các dòng mã này trước tiên tạo ra một ựối tượng hiển thị TextField trong AVM, tuy nhiên

nó không ựược hiển thị ngay trên màn hình vì ựối tượng này không tồn tại trong

Rendering Engine để tạo ựối tượng trong Rendering Engine, ựối tượng cần phải ựược ựưa vào cây danh sách hiển thị đ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 thân ựối tượng sẽ có ngay trong cây danh sách hiển thị.( Và tất nhiên khi chạy chương trình Rendering Engine sẽ vẽ ngay ựối tượng lên màn hình )

Tóm lại : Dùng toá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à vẽ lên màn hình

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

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 một tham số là ñối tượng cần hiển thị , nó ñược thêm vào containner ( thùng chứa : là ñối tượng cha ) như là một ñối tượng con của container ñó

public class DisplayListExample extends Sprite {

public function DisplayListExample( ) {

// Tạo một ñối tượng cần hiển thị – là TextField

- nhờ ActionScript

var hello:TextField = new TextField( );

hello.text = "hello";

// Tạo ñối tượng trong rendering engine

// bằng cách thêm vào display list Khi ñó

textfield sẽ hiển thi

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

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

// Tạo một tèxtield

var container:Sprite = new Sprite( );

// Thêm textField vào container

container.addChild( hello );

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

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

// container lưu giữ text từ ñó làm nó xuất hiện trên màn hình

DisplayObjectContainer( root ).addChild( container );

Các container chứa ñối tượng hiển thị có khả năng lưu giữ rất nhiều ñối tượng con

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

là không bao giờ có ñối tượng con nào khác ở vị trí 0 và 2 nếu vị trí 1 ñã có

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

Phương thức addChildAt() cần 2 tham số: (tham số ñầu chỉ ñối tượng cần thêm vào , và tham số sau chỉ vị trí mà ñối tượng con cần dùng) Việc ñịnh vị trí 0 làm cho ñối tượng con ñược ñưa vào sẽ ở vị tí cuối của lít và làm cho nó xuất hiện phí dưới tất cả các ñối tượng con khác.Nếu có ñối tượng con dang ở vị trí ñược chọn thì tất cả các ñối tượng cọn tại ñó và trên ñvijcos chỉ số ñều ñược dich lên một ñơn vị , nhờ ñó ñối tượng con sẽ ñược 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 hơn số các ñối tượng con trong container sẽ tạo ra lỗi RangeError và làm cho ñối tượng con không ñược ñưa vào

Ví dụ sau tạo ra ba vòng tròn có màu khác nhau Các vòng tròn màu ñỏ và màu xanh ñược thêm vào bằng phương thức addChild () , ta làm cho vòng tròn màu xanh xuất hiện trên ñầu

4

, vì nó ñược thêm vào sau các vòng tròn màu ñỏ Sau hai lần gọi phương thức addChild (), vòng tròn màu ñỏ sẽ ở vị trí 0 và vòng tròn màu xanh sẽ ở vị trí 1.Vòng tròn màu xanh lá cây sau ñó ñược chèn vào giữa hai vòng tròn bằng phương thức addChildAt () , xác ñịnh

cụ thể vị trí của nó là1 trong danh sách Các vòng tròn màu xanh, trước ñó tại vị trí 1, ñược chuyển ñến vị trí 2 và vòng tròn màu xanh lá cây ñược ñưa vào vị trí số 1 Kết quả cuối cùng là vòng tròn màu ñỏ ở vị trí 0 ñược vẽ bên dưới vòng tròn màu xanh lá cây ở các vị trí

1, và vòng tròn màu xanh lá cây ñược vẽ bên dưới vòng tròn màu xanh ở vị trí 2

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;

5

}

Cho ñến nay chúng ta ñã chỉ nói về việc thêm các mục mới vào danh sách hiển thị, nhưng

sẽ xảy ra gì khi addChild () ñược sử dụng trên một ñối tượng con ñã ñược vào danh sách hiển thị, như một ñối tượng con của container khác? ðây là khái niệm về reparenting ðối tượng ñược lấy ra từ các container mà nó hiện ñang ở và ñược ñặt vào trong các container khác (mà nó ñang ñược thêm vào.)

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

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

package {

import flash.display.*;

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)

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

// circles to the container

var container1:Sprite = new Sprite( );

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

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

DisplayObectContainer

Phương thức removeChild( ) có một tham số chỉ ñối tượng cần gở ra khỏi container Nếu

ñối tượng dó không phải là con của một container thì có lỗi ArgumentError ñược ném ra

public class RemoveChildExample extends Sprite {

// tạo một biến ñịa phương ñể lưu tham khảo ñến textfield sẽ remove

private var _label:TextField;

public function RemoveChildExample( ) {

_label = new TextField( );

_label.text = "Some Text";

//Thêm textfield hello vào display lít

addChild( _label );

// Gở label từ displayl list

public function removeLabel( event:MouseEvent

public function DisplayListExample( ) {

var label:TextField = new TextField( );

label.text = "Some Text";

// Gở label từ display list

public function removeLabel( event:MouseEvent

var count:int = container.numChildren;

Có thể dùng DisplayObjectUtilities.removeAllChildren( ) ñể xoá tất cả các Child ,

phương thức này nằm ở phần package thêm vào ascb.util.DisplayObjectUtilities

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

Sử dụng các phương thức setChildIndex( ) của lớp DisplayObectContainer ñể thay ñổi vị

trí của một ñối tượng cụ thể

Sử dụng getChildIndex( ) và getChildAt( ) ñể truy vấn giữa các ñối tượng con , từ ñó sắp

chúng vào ñúng vị trí

Ví dụ :

package {

import flash.display.*;

public class SetChildIndexExample extends Sprite {

public function SetChildIndexExample( ) {

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

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

Thay ñổi vị trí khi không biết rõ vị trí của từng ñối tượng

Ta dùng getChildIndex() ñể lấy vị trí của ñối tượng và dùng setChildIndex() ñể ñặt ñối tượng

Ví dụ :

package {

import flash.display.*;

public class GetChildIndexExample extends Sprite {

public function GetChildIndexExample( ) {

// Create two different sized circles

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

public class GetChildAtExample extends Sprite {

public function GetChildAtExample( ) {

/ Tạo 10 ñường tròn dùng loop

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

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

// chuyển ñường tròn ở dưới lên trên cùng

public function updateDisplay( event:MouseEvent ):void {

// getChildAt(kinhdungf ñể lấy chỉ số ñối tượng ở vị trí

0 và ñưa lên vị trí ñầu //nhờ setChildIndex() , lưu ý vị trí ñầu là numChildren-1

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

}

// Hàm vẽ ñường tròn 2 tham số là màu và bán kính

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;

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 );

Class public class SimpleButton

Các thuộc tính của lớp SimpleButton:

downState : DisplayObject

enabled : Boolean

SimpleButton mô tả hành vi của nút

Sử dụng các sự kiện click ñể gọi một phương thức bất cứ khi nào người dùng nhấn nút

Thảo luận

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

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

14

Là trạng thái xảy ra khi chuột vào vùng giới hạn của nút hitTestState không bao giờ thực

sự ñược hiển thị trên màn hình, nó chỉ ñược sử dụng cho mục ñích theo dõi chuột

Ví dụ :

package {

import flash.display.*;

import flash.events.*;

public class SimpleButtonDemo extends Sprite {

public function SimpleButtonDemo( ) {

// tạo một button và ñịnh vị nó trên màn hình

var button:SimpleButton = new SimpleButton( );

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

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

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

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;

var rect:Shape = new Shape( );

rect.graphics.lineStyle( 1, 0x000000 );

// 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 2 pixels to adjust for offset

public class SimpleButtonDemo extends Sprite {

public function SimpleButtonDemo( ) {

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

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

Class public class Loader

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

Loader() : Tạo một ñối tượng loader ñể có thể nhúng các file swf hay hình ảnh

close():void : huỷ phương thức load()

load(request:URLRequest, context:LoaderContext = null):void load các file swf , các file ảnh vào một ñối tượng loader

19

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

unload():void

unloadAndStop(gc:Boolean = true):void

Có ba bước cơ bản ñể load một nội dung bên ngoài:

Tạo một instance của 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 một tham số Nó cần một ñối tượng URLRequest ñể ñịnh rõ URL của

nguồn.Khi file fla và hình ảnh ở chung một folder thì URL là tên của file hình ảnh ( phải có

public class LoaderExample extends Sprite {

public function LoaderExample( ) {

// 1 Tạo một instance của lớp Loader

var loader:Loader = new Loader( );

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

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

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

Trong trường hợp này cần phải thêm vào event Listeners vào thuộc tính contentLoaderInfo

của instance của lớp Loader , nhờ ñó mới có thể ñáp ứng với các sự kiệkie xảy ra Thuộc tính contentLoaderInfo là một tinstance của lớp flash.display.LoaderInfo, ñược thiết kế ñể cung cấp thông tin về ñối tượng ñang ñược load.Dưới ñây là danh sách các sự kiện hữu ích ñược gởi ñi bởi instance của lớp LoadInfo và ý nghĩa của chúng