Tạo ra một đối tượng bằng AS3 chưa chắc đã hiển thị trên màn hình ?. Các quy tắc hiển thị và các đặc tính của từng loại đối tượng hiện thị như thế nào ? Nội dung bài này sẽ hướng dẫn bạn khám phá chúng.

1. 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

2. 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 đó

3. 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.

4. 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

5. 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

6. • 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.

7. • 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.

8. 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

9. 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

10. 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

11. 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 sau
1. 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 parent
Tương tự để xóa một đối tượng display object khỏi màn hình ta sử
dụng hàm removeChild().

12. 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.

13. • 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.

14. 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

15. 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