Display Programming

1. Giới thiệu về hệ thống phân cấp các đối tượng hiển thị trên màn hình (Display list)

2. Những thành phần chính trên display list

3. Display Object và các property cơ bản

4. AddChild và RemoveChild đối tượng

5. Thay đổi thứ tự sắp xếp các đối tượng

6. Tìm hiểu về Stage và các thuộc tính quan trọng

Display list

• Trong ứng dụng được phát triển từ AS3, các đối tượng hiển thị trên màn hình đều tuân theo một hệ thống phân cấp hay còn gọi là display list

• Mô hình dưới đây sẽ thể hiện cái nhìn tổng quát về thế giới đó

Như biểu đồ trên đã thể hiện, các đối tượng hiển thị được phân chia theo một hay nhiều các nhóm sau:1. The Stage

• Đứng đầu trong hệ thống phân cấp và chứa tất cả các đối tượng hiển thị khác bên trong nó.

• Mỗi một file SWF đều được liên kết với một Actionscript class còn được gọi là main class của file SWF. Main class luôn luôn được kế thừa cao nhất từ Sprite class.

2. Display Object• Trong AS3 mọi đối tượng có thể hiển thị trên màn hình đều là một kiểu

của display object hay nói cách khác chúng được kế thừa từ class cha là DisplayObject

3. Display Object Container• DisplayObjectContainer cũng là một kiểu của display object (có nguồn

gốc được kế thừa từ displayobject) với khả năng chứa các đối tượng hiển thị khác bên trong nó trong hệ thống childlist. => Stage cũng là một DisplayObjectContainer.

Các khái niệm và thuật ngữ quan trọng:• Stage đứng đầu trong hệ thống phân cấp và chứa tất cả các đối tượng hiển

thị khác bên trong nó.• Main class of the SWF file là class được liên kết với file SWF và các mã

lệnh bên trong constructor của class đó sẽ được gọi đầu tiên.• Display list : hệ thống phân cấp các đối tượng hiển thị trên màn hình

(display object)• Display object : là class cơ bản của mọi đối tượng có khả năng hiển thị trên

màn hình => mọi đối tượng được hiển thị trên màn hình đều được kế thừa từ display object hoặc class cấp cao hơn của nó kế thừa từ display object)

• Display object container : là các display object đặc biệt có khả năng chứa các đối tượng con bên trong nó

• Vector graphics : các đối tượng đồ họa được vẽ thông qua tính toán từ máy tính với những chỉ số cụ thể như độ dài, hình dáng, kích thước ….

• Bitmap graphics là những đối tượng đồ họa được vẽ thông qua bộ nhớ của máy tính về hệ thống các điểm ảnh. Các đối tượng bitmap thường là các bức ảnh kỹ thuật số hoặc các bức ảnh đơn giản .

• Transformation là sự thay đổi của đối tượng về hình dạng, kích thước, tọa độ, màu sắc ….

• Alpha độ trong suốt của đối tượng

Display core class

• Trong AS3 gói flash.display chứa hầu hết các class cơ sở để tạo ra các đối tượng hiển thị cơ bản.

• Biểu đồ dưới đây sẽ thể hiện mối quan hệ kế thừa của các display object class chính

• DisplayObject -- Super class của mọi display object class khác• AVM1Movie -- thể hiện các file SWF được viết bằng ngôn ngữ AS1 hoặc AS2.• Bitmap – đối tượng đồ họa được vẽ bằng điểm ảnh. Có thể là các bức ảnh

được nhúng hoặc load từ bên ngoài khi đang chạy ứng dụng• MorphShape -- được tạo ra khi bạn tạo một shape tween trong flash authoring

tool, không thể tạo instance từ actionscipt nhưng có thể truy suất từ display list• Shape -- các đối tượng đồ họa được vẽ bằng thuật toán • StaticText -- các đoạn văn bản đặc biệt được tạo riêng trong flash tool , ko thể

tạo trong actionscript • Video – một đố tượng đặc biệt tuy không nằm trong gói flash.display nhưng

vẫn kế thừa từ DisplayObject class, là display object sử dụng để hiển thị nội dung đoạn video.

• InteractiveObject – là class cơ sở cho mọi đối tượng có khả năng tương tác với chuột và bàn phím. Mọi đối tượng như Stage, Sprite, MovieClip, TextField, … đều là một subclass của Interactiveobject class.

• DisplayObjectContainer -- class cơ sở cho mọi đối tượng có khả năng chứa các đối tượng khác bên trong nó.

• SimpleButton -- thể hiện như một đối tượng button symbol được tạo trong flash authoring tool.

• TextField – nằm trong gói flash.text thể hiện nội dung các đoạn văn bản .• Loader – sử dụng Loader để load các đối tượng bên ngoài (các file SWF

hoặc các file ảnh).• Stage – hiển thị mọi đối tượng đồ họa khác bên trong nó.• Sprite – có thể có các thành phần đồ họa riêng của mình đồng thời có

thể chứa các thành phần đồ họa khác bên trong nó.• MovieClip – là một dạng của movieclip symbol được viết bằng

actionscript. Thực tế một movieclip tương tự như một sprite ngoại trừ việc nó có timeline còn sprite thì không.

Lưu ý các Class đặc biệt như :DisplayObjectContainer, InteractiveObject, StaticText, AVM1Movie, Stage, MorphShape không thể tạo ra các instance từ chúng. Các class này đóng vai trò là các parent class để định nghĩa các thành phần và chức năng chính cho các đối tượng được kế thừa từ chúng.

Những lợi thế mà phương pháp tiếp cận display list mang lại• Render hiệu quả và giảm thiểu bộ nhớ• Quản lý chặt chẽ hơn• Có thể truy suất mọi đối tượng trong display list• Off – list (tắt khả năng hiển thị) của các display object• Dễ dàng tạo các subclass cho các display object

Display object and basic property

• Các thuộc tính cơ bản của các display object– Những thuộc tính thay đổi vị trí tọa độ: x và y – Những thuộc tính thay đổi kích thước : scaleX

và scaleY– Thuộc tính thay đổi góc quay: rotation– Thuộc tính thay đổi độ trong suốt của đối

tượng: alpha– Thuộc tính làm ẩn hiện đối tượng: visible

AddChild and RemoveChild

• Những đối tượng kế thừa từ class DisplayObjectContainer đều có khả năng addChild các đối tượng thuộc kiểu display object bên trong nó.

Example:var bigCanvas:Sprite = new Sprite() //đây là display object container lớn chứa các

child

var childOne:Shape = new Shape() //đây là display object con thứ nhất bên trong

var childTwo:Bitmap = new Bitmap() //đây là display object con thứ hai bên trong

Ban đầu khi các đối tượng childOne, childTwo và cả bigCanvas được khởi tạo chúng chưa được hiển thị ngay trên màn hình, các đối tượng được khởi tạo mà chưa được add lên màn hình gọi là các off-list.

Để các đối tượng có thể hiển thị trên màn hình cần có một đối tượng thuộc kiểu display object container sử dụng hàm addChild(). Ví dụ như ba đối tượng kể trên, giả sử ta viết ba dòng mã lệnh trên ngay trong constructor của main class

this.addChild(bigCanvas); //this thể hiện đối tượng main movie

bigCanvas.addChild(childOne); //đối tượng childOne đã được addChild trên bigCanvas

bigCanvas.addChild(childTwo); //đối tượng childTwo đã được addChild trên bigCanvas

Vậy nguyên tắc để addChid một đối tượng lên màn hình làSử dụng công thức:

parent.addChild(child);

Với các điều kiện sau1. Parent là một đối tượng thuộc kiểu display object container.2. Parent là một đối tượng đã được hiển thị trên màn hình (nó có thể là

main movie, Stage, hoặc đã được addChild bởi một display object container khác và display object container đó đã được add trên màn hình)

3. Đối tượng child ít nhất thuộc kiểu display object.

Khi đó đối tượng child sẽ xuất hiện trên màn hình với tư cách là con của đối tượng parentTương tự để xóa một đối tượng display object khỏi màn hình ta sử dụng hàm removeChild().

Change index

• Mọi đối tượng display object được addChild và hiển thị trên màn hình đều có một chỉ số vị trí riêng gọi là index.

• Display object đầu tiên được addChild sẽ có vị trí index là O. • Index của display object được addChild phía sau sẽ tăng thêm một

đơn vị. Ví dụ các đối tượng như image0, image1, image2, image3… lần lượt được addChild trên màn hình thì vị trí index của chúng lần lượt sẽ là 0, 1, 2, 3 …..

• Nếu một đối tượng bị removeChild khỏi màn hình thì vị trí index của các đối tượng phía sau nó sẽ giảm đi 1. Chẳng hạn như ở trên nếu như image1 bị xóa thì index của image2 và image3 lần lượt sẽ là 1 và 2 thay vì 2 và 3.

• Có thể chỉ định vị trí index của đối tượng ngay khi add trên màn hình thông qua hàm addChildAt() thay vì addChild() thông thường. Hàm addChildAt() yêu cầu truyền thêm một tham số thứ 2 và tham số này chỉ định vị trí index của đối tượng được addChild.

• Ngay cả khi display object được add trên màn hình ta vẫn có thể thay đổi được vị trí index của chúng thông qua hàm setChildIndex(). Tham số thứ hai trong hàm này sẽ gán vị trị index của đối tượng display object (được chỉ định trong tham số đầu) với giá trị index tương ứng. Trong trường hợp nếu như vị trí index truyền đến trùng với vị trí index của một đối tường nào đó thì đối tượng có vị trí index trùng đó sẽ được đẩy lên cao hơn một bậc (tức là vị trí index của nó sẽ tăng thêm 1).

• Để tham chiếu một đối tượng đã biết trước vị trí index của nó ta có thể sử dụng hàm getChildAt(index). Hàm này sẽ trả về một đối tượng display object có vị trí index tương ứng với tham số truyền vào. Nếu như không có đối tượng nào có vị trí index phù hợp, hàm sẽ trả về giá trị null.

Stage and important property

• Stage là một đối tượng thuộc kiểu display object container và là một đối tượng đặc biệt nằm phía trên cùng của hệ thống display list đồng thời chứa tất cả các đối tượng display object khác bên trong nó.

• Stage có hai thuộc tính cơ bản và rất quan trọng là scaleMode và align.

- ScaleMode là chế độ co kéo của Stage khi chúng ta thay đổi kích thước của Flash Player

- Align là thuộc tính xác định việc căn lề của các đối tượng trên Stage

Home work

• Chuẩn bị cho buổi seminar: Cách khởi tạo và các thuộc tính, phương thức của

- Timer

- Array

- String

Các phương thức trong hàm Math