Script và ỹ thuật hoạt hình (Cao đẳng Công nghiệp Huế) - Nguồn: Internet

Để kiểm tra một bộ phim hoàn chỉnh, bạn chọn Control > Test Movie (hoặc tổ hợp Ctrl+Enter). Bạn cũng lưu ý rằng, n ếu bạn xây dựng một thước phim chứa nhiều đối tượng đồ họa và[r]

Khoa Công nghệ Thông Tin Trường Cao đẳng Cơng nghiệp Huế

GIÁO TRÌNH

SCRIPT VÀ KĨ THUẬT HOẠT HÌNH

(Lưu hành nội bộ)

- -

PHỤ LỤC

LỜI NÓI ĐẦU

CHƯƠNG GIỚI THIỆU VỀ FLASH

1.1 Sơ lược đồ họa vector lịch sử đời Flash

1.2 So sánh Flash với Silverlight JavaFx 12

1.3 Cài đặt Adobe Flash CS5 13

1.4 Giới thiệu Adobe Flash CS5 16

1.4.1 Các chế độ tùy biến giao diện 17

1.4.2 Tạo dự án cho desktop mobile 18

1.4.3 Layer, Frame, Scene Movie 20

1.4.4 Vùng công cụ Tools 22

1.4.5 Vùng thuộc tính Properties 22

1.4.6 Vùng soạn thảo ActionScript 23

1.4.7 Các vùng chức khác 24

Tổng kết chương 30

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN 32

2.1 Các công cụ Pencil, Brush Erase 32

2.2 Cơng cụ vẽ hình 34

2.3 Công cụ Text 41

2.4 Công cụ chọn Selection Lasso 43

2.5 Các công cụ đổ màu Paint Bucket, Ink Bottle bắt màu EyeDropper 44 2.6 Công cụ Free Transform Gradient Transform 46

2.7 Các công cụ làm việc với đường Bezier 48

2.8 Làm việc với đối tượng 51

Tổng kết chương 53

CHƯƠNG CÁC BIỂU TƯỢNG TRONG FLASH 55

3.1 Biểu tượng Graphic 55

3.2 Biểu tượng Button 56

3.3 Biểu tượng MovieClip 58

Tổng kết chương 60

CHƯƠNG TẠO HOẠT CẢNH 62

4.1 Tìm hiểu TimeLine 62

4.2 Classic Tween 68

4.3 Shape Tween 69

4.4 Motion Tween 71

4.5 Công cụ Bone Bind 76

4.6 Công cụ Deco 79

4.7 Công cụ 3D Translation 3D Rotation 89

Tổng kết chương 92

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT 94

5.1 Các kiểu liệu 95

5.2 Biến Hằng 96

5.3 Toán tử Biểu thức 97

5.4 Các cấu trúc lệnh điều khiển 103

5.4.1 Câu lệnh if 103

5.4.2 Câu lệnh switch 104

5.4.3 Các câu lệnh lặp for, while do…while 105

5.4.4 Các lệnh continue, break return 107

5.5 Hàm 108

5.6 Lớp Đối tượng 110

5.6.1 Xây dựng lớp 110

5.6.2 Làm việc với đối tượng 113

5.6.3 Sự kiện chuột 116

5.6.4 Sự kiện bàn phím 116

5.7 Đưa đối tượng vào ActionScript 117

5.8 Làm việc với XML 119

5.9 Vùng chức Code Snippets 120

- -

6.2 Tạo kĩ xảo điện ảnh với Flash 148

6.3 Tạo thước phim Flash tựa 3D 153

6.4 Ghép nối nhiều hoạt cảnh 159

6.5 Kĩ thuật mặt nạ mask 159

6.6 Tạo nút nhấn điều khiển 165

6.7 Xuất Movie 167

6.8 Xuất tập tin Flash suốt trình duyệt 170

Tổng kết chương 174

CHƯƠNG THƯ VIỆN PAPERVISION3D 176

7.1 Giới thiệu PaperVision3D Adobe Flex Builder 176

7.2 Cấu hình cài đặt PaperVision3D cho Adobe Flex Buider 179

7.3 Chương trình Hello, PaperVision3D ! 182

7.4 Các đối tượng PaperVision3D 186

7.4.1 Các đối tượng hình thể 186

7.4.2 Đối tượng Material - Phối màu cho hình thể 193

7.4.3 Đối tượng Lights - Hiệu ứng ánh sáng 196

7.4.4 Đối tượng Shader - Hiệu ứng đổ bóng 197

7.4.5 Đối tượng ShadedMaterial 197

7.4.6 Đối tượng CompositeMaterial 197

7.4.7 Đối tượng MaterialsList 197

7.5 Import mơ hình 3D 198

Tổng kết chương 200

BÀI TẬP THỰC HÀNH 202

BÀI THỰC HÀNH SỐ 202

BÀI THỰC HÀNH SỐ 203

BÀI THỰC HÀNH SỐ 204

BÀI THỰC HÀNH SỐ 204

BÀI THỰC HÀNH SỐ 206

BÀI THỰC HÀNH SỐ 206

LỜI NÓI ĐẦU

dobe Flash phần mềm chuyên nghiệp để tạo thước phim hoạt hình, trò chơi, thiết kế giao diện web (RIA – Rich Internet Application)… Flash có ứng dụng to lớn giới Internet nói chung cơng nghệ giải trí nói riêng Dù nhiều cơng nghệ đời cố gắng cạnh tranh với Flash, Flash chiếm thị phần cao hẳn Có nhiều giáo trình Flash biên soạn, đại đa số dựa phiên MacroMedia Flash MX 2004 tương đối cũ Với phiên CS5, Adobe bổ sung vào tính giúp người dùng thiết kế lập trình đơn giản Cuốn giáo trình gồm có ba phần:

Phần 1 Thiết kế dành riêng cho độc giả khơng chun muốn tìm hiểu cách sử dụng công cụ vẽ tạo hoạt hình cơng cụ có sẵn Flash Phần bao gồm chương 1, chương 2, chương 3, chương

Phần 2 Gồm chương Dành cho độc giả muốn tìm hiểu ActionScript 3.0 – ngơn ngữ lập trình có cấu trúc gần giống với Java sử dụng để tăng cường sức mạnh cho Flash

Phần 3 Mang tính chất tổng hợp Gồm chương Phần giúp bạn đọc hồn thiện thước phim hoạt hình kĩ thuật nâng cao Chúng tơi cịn cung cấp thêm kiến thức để làm việc với hình ảnh, âm video Đồng thời, chúng tơi cịn giới thiệu gói thư viện mở PaperVision3D để làm việc với đồ họa 3D Flash – vấn đề mà chưa có giáo trình đề cập đến

Khi biên soạn giáo trình này, chúng tơi cố gắng hồn thiện nó, khơng thể tránh khỏi sai sót Chúng tơi mong nhận đóng góp ý kiến quý báu bạn độc bạn đồng nghiệp để giáo trình ngày hồn thiện Mọi thư từ đóng góp xin gửi địa email sau dnhthanh@hueic.edu.vn myhoangthanh@yahoo.com

CHƯƠNG GIỚI THIỆU VỀ FLASH

CHƯƠNG GIỚI THIỆU VỀ FLASH 1.1 Sơ lược đồ họa vector lịch sử đời Flash Sơ lược đồ họa vector

Đồ họa máy tính chia làm ba dạng bản:

Đồ họa điểm: sở điểm ảnh (pixel) Mỗi ảnh đồ họa điểm ma trận điểm, mà điểm ảnh xác định mẫu màu theo chuẩn phổ biến RGB (Red-Green-Blue) Mỗi tham số màu phân bố từ 2n -1 (ảnh dạng n bit màu) Khi phóng to ảnh đồ họa điểm,

chúng ta thấy rõ điểm ảnh Hãy quan sát ví dụ ảnh sau

Hình 1.1 – Đồ họa điểm

Hình 1.2 – Đồ họa Fractal

Đồ họa vector: sở vector đường cong Bezier Nó có nhiều ưu điểm so với đồ họa điểm Một ưu điểm lớn khơng bị “vỡ hạt” phóng to ảnh Các chương trình đồ họa vector tiếng bao gồm Adobe Illustrator, Corel Draw,… Một ảnh dạng đồ họa vector mịn màng so với đồ họa điểm

CHƯƠNG GIỚI THIỆU VỀ FLASH

- 11 -

Hình 1.3 – Đồ họa vector Lịch sử đời Flash

Flash kĩ thuật tạo hiệu ứng động, thước phim hoạt hình… Flash giới thiệu công ty MacroMedia vào năm 1999 Đến năm 2005, công ty Adobe mua lại với giá 3.4 tỉ đôla Từ đời này, Flash có nhiều bước phát triển đáng ý Nhiều tính liên tục cập nhập phiên nó, kể từ phiên Macromedia Flash Adobe Flash

1.2 So sánh Flash với Silverlight JavaFx

Ngày nay, xu thương mại điện tử hóa ngày len lỏi vào ngóc ngách xã hội Các website nơi cung cấp thơng tin, trao đổi tư vấn Do đó, giao diện website đẹp mắt, thiết kế thuận tiện lợi Chính lẽ đó, nhiều nhà phát triển ý đến điều Các hãng phần mềm lớn Microsoft, Adobe, Sun,… phát triển công nghệ hỗ trợ để chiếm lĩnh thị trường phần mềm hỗ trợ cơng nghệ Tính tuổi đời phát triển công nghệ hỗ trợ RIA, Adobe tỏ người tiên phong

Flash/Flex Adobe, Silverlight Microsoft JavaFx Sun công nghệ đáng ý Mỗi số chúng có ưu điểm Một ưu điểm chung chúng đồ họa đẹp chuyển động mềm mại

Flash/Flex có tuổi đời cao, với lượng người dùng đông đảo, hầu hết nhà phát triển quen thuộc với Flash Flash hỗ trợ lập trình hướng đối tượng Nó tương thích với hầu hết ngơn ngữ lập trình web Flash hỗ trợ hầu hết hệ điều hành: Windows, Linux, MacOS nhiều mẫu Mobile nhiều hãng khác Để phát triển ứng dụng Flash, nhà phát triển sử dụng trình biên tập Adobe Flash Trình biên tập hoạt động tốt đa số hệ điều hành: Windows MacOS Một u cầu để trình khách chạy Flash cần cài đặt Plugin Flash nhỏ gọn (không Mb) hỗ trợ phiên Flash Lite (cho dòng điện thoại)

Silverlight mặc dầu đời sau Flash, với hậu thuẩn tập đồn lớn Microsoft, dần có vị đáng kể Ngồi ra, Silverlight phát triển NET, lập trình viên sử dụng VB.NET C# - ngôn ngữ lập trình mạnh mẽ - để phát triển Nhược điểm tương thích Windows, MacOS mẫu điện thoại Windows Mobile Để phát triển ứng dụng Silverlight, nhà phát triển sử dụng Visual Studio vốn dành cho hệ điều hành Windows Trình khách muốn chạy Silverlight cần cài đặt Plugin Silverlight (khoảng Mb) JavaFx đời sau cùng, có nhiều ưu điểm: mã nguồn mở, hỗ trợ nhiều hệ điều hành – Windows, Linux, MacOS hứa hẹn hoạt động tốt nhiều mẫu Mobile, trình khách khơng cần cài đặt Plugin hỗ trợ Để soạn thảo JavaFx, người dùng sử dụng Eclipse NetBean Cả hai trình biên dịch hoạt động tốt Windows, Linux MacOS Nhưng điều đáng tiếc JavaFx lại đời muộn màng

CHƯƠNG GIỚI THIỆU VỀ FLASH

- 13 -

sẽ sốn ngơi RIA Flash, Silverlight JavaFx Dù sau này, vị việc phát triển RIA cho web có thay đổi, định hướng cịn lại Flash định hướng phát triển quan trọng, đảm bảo trường tồn cho công nghệ

1.3 Cài đặt Adobe Flash CS5

Yêu cầu cấu hình cài đặt: hệ điều hành Windows XP Pack cao (MacOS X cao hơn), 1Gb Ram cao hơn, Pentium IV cao Mặc dầu mục đích sử dụng chương trình Adobe Flash Professional CS5, nhiên bạn sử dụng thêm số chương trình đính kèm như: Photoshop dùng để hiệu chỉnh ảnh, Dreamweaver thiết kế giao diện web đồng thời chèn phim Flash vào, soạn thảo ActionScript chuyên nghiệp với Flash Buider 4, hiệu chỉnh âm thanh, video… Chính lý này, tơi đề nghị bạn nên chọn trọn gói Adobe Master CS5

Chúng ta tải trực tiếp từ Adobe, có 30 ngày để dùng thử Sau tải về, tiến hành giải nén tập tin, ta thu thư mục Nếu ta sử dụng đĩa cài đặt DVD, đưa đĩa DVD vào ổ đĩa DVD máy tính Chúng ta sử dụng chế độ AutoRun nó, mở đĩa DVD

Trong hai trường hợp nêu trên, thư mục có thư mục tệp Set-up.exe Cấu trúc thư mục có dạng sau:

Hình 1.5 – Màn hình chào đón cài đặt Adobe Master CS5

Hãy đọc qua điều khoản sử dụng phần mềm, đồng ý bạn việc nhấp Accept Ngược lại, chọn Quit để hủy bỏ việc cài đặt

CHƯƠNG GIỚI THIỆU VỀ FLASH

- 15 -

Adobe Master không hỗ trợ tiếng việt Nó hỗ trợ vài ngôn ngữ tiếng anh, tiếng nhật… Nếu số serial điền vào đúng, xuất dấu tích mầu xanh Ngược lại, số serial sai, dấu nhân màu đỏ xuất Nếu số serial đúng, ta nhấp Next để tiếp tục q trình cài đặt Nếu khơng có số serial, chọn chế độ dùng thử Khi cài đặt chế độ dùng thử, Adobe thường xuyên đưa thông báo để nhắc nhở số ngày dùng thử cịn lại tự động chấm dứt khả dùng thử sau 30 ngày Ta sử dụng chế độ cài đặt có số serial Và số serial bổ sung sau

Sau nhấp next, cửa sổ Adobe ID Sau cửa sổ Install Options Trong cửa sổ này, cho phép ta chọn lựa thông số cài đặt

Hình 1.7 – Cửa sổ Install Options

Trong cửa sổ này, chọn lựa phần mềm cần cài đặt cách đánh dấu tích vào phần mềm tương ứng Nếu muốn học Flash CS5, chọn – Flash Professional Ngồi ra, tơi khuyến nghị chọn thêm phần mềm sau: Photoshop (xử lý đồ họa điểm), Flash Buider (thiết kế RIA cho web, lập trình ActionScript…), SoundBooth (xử lý âm thanh) Ngồi ra, quan tâm đến lĩnh vực đồ họa khác, ta cài đặt thêm phần mềm Illustrator phần mềm chuyên xử lí đồ họa vector, Fireworks phần mềm chuyên xử lí đồ họa điểm, Adobe Premier chuyên xử lý phim, After Effect chuyên tạo kĩ xảo điện ảnh

Sau đó, nhấp vào nút Install chờ đợi cho q trình cài đặt hồn tất Để kết thúc q trình cài đặt, nhấp vào nút Finish để đóng cửa sổ cài đặt lại

1.4 Giới thiệu Adobe Flash CS5

Khởi động Adobe Flash Professional CS5: để khởi động Adobe Flash Professional CS5, ta bấm chọn biểu tượng hình Desktop, tiến hành bước sau:

- Vào Start > All Programs

- Chọn Adobe Master Collection CS5 - Chọn Adobe Flash Professional

Hình 1.8 – Khởi động Adobe Flash Professional CS5

CHƯƠNG GIỚI THIỆU VỀ FLASH

- 17 -

Hình 1.10 – Cửa sổ ban đầu Flash Professional CS5

Phiên Adobe Flash CS5 xuất xưởng năm 2010 So với phiên trước đó, CS5 có nhiều thay đổi giao diện chương trình lẫn tính Về giao diện: phiên CS5 dành cho Windows tuyệt giao với giao diện Window, sử dụng giao diện độc lập với hệ điều hành

Về tính năng: bổ sung thêm nhiều công cụ làm cho công việc sáng tác trở nên đơn giản công cụ Bone, Bind, 3D Translation, 3D Rotation 1.4.1 Các chế độ tùy biến giao diện

Trong giao diện tổng thể Essential Flash CS5, chia làm vùng chính: - Vùng hệ thống menu phía

- Vùng công cụ bên phải

- Vùng thuộc tính thư viện bên cạnh công cụ - Vùng sáng tác trung tâm

Hình 1.11 – Giao diện Adobe Flash CS5

Flash CS5 cho phép làm việc theo chế độ Tab Trên vùng menu, góc bên phải mục Essentials cho phép ta chuyển đổi qua lại cách bố trí giao diện Có chế độ bố trí giao diện: Animator, Classic, Debug, Designer, Developer Essentials Tùy vào cảm quan, chọn lấy cách bố trí giao diện mà cho phù hợp tiện lợi Riêng tôi, tơi chọn chế độ Essentials

Để phóng to hay thu nhỏ khung sáng tác, ta cần sử dụng phím tắt Ctrl+= để phóng to Ctrl+- để thu nhỏ Hoặc chọn chế độ hiển thị % bên menu

1.4.2 Tạo dự án cho desktop mobile

Để tạo dự án, bạn kích chuột vào File, chọn New (phím tắt Ctrl+N) Hộp thoại bên Ở đây, quan tâm đến vài kiểu dự án: - Flash File (ActionScript 3.0, ActionScript 2.0): tạo dự án Flash với ActionScript 3.0 2.0 Bạn lưu ý rằng, giáo trình này, thảo luận ActionScript 3.0 Phiên phiên ActionScript thời điểm

CHƯƠNG GIỚI THIỆU VỀ FLASH

- 19 -

.NET Microsoft Để phát triển trình ứng dụng Adobe Air, bạn hồn tồn sử dụng trình soạn thảo Adobe Flash Adobe Flex Builder

Hình 1.12 – Tạo dự án

- Flash File (Mobile – iphone OS, Flash Lite 4, Device Central): tạo dự án Flash cho Mobile Khi chọn kiểu dự án này, Adobe Flash CS5 tự động gọi đến Adobe Device Central CS5 Đây tiện ích quản lý thông tin Flash Lite hỗ trợ dịng điện thoại Bạn cần tìm kiếm loại điện thoại mà bạn cần tạo dựng dự án, sau bấm vào Create

- Ngồi ra, bạn muốn tạo Action độc lập, bạn tạo riêng chúng cách chọn ActionScript File Việc tạo ActionScript độc lập sử dụng chúng dự án Flash thảo luận kĩ làm quen với lập trình với ActionScript chương

Ghi chú: Bạn cần lưu ý đến vài định dạng dự án Flash Định dạng Flash có phần mở rộng fla Định dạng ActionScript File có định dạng as Định dạng tập tin cuối flash swf

1.4.3 Layer, Frame, Scene Movie

Trong kĩ thuật tạo thước phim, kĩ thuật sử dụng phổ biến để tạo chuyển động đoạn phim kĩ thuật 24 hình/ giây Trong kĩ thuật này, hình ảnh có nhiều điểm tương đồng ghép nối lại cách liên tiếp Các đối tượng cần tạo chuyển động có chút thay đổi khung hình Khi khung hình thay cho tốc độ mà mắt người không nhận thay đổi này, cảm thấy đối tượng chuyển động Kĩ thuật tạo hoạt hình Flash hồn tồn tương tự Trước tìm hiểu kĩ cách thức tạo chuyển động Flash, tìm hiểu qua khái niệm: Lớp – Layer, Khung hình – Frame, Cảnh quay – Scence, Thước phim – Movie

- Layer: lớp dùng việc sáng tác Mỗi khung hình chứa nhiều layer khác Mỗi đối tượng thường xây dựng layer Kĩ thuật layer sử dụng rộng rãi đồ họa máy tính, bao gồm đồ họa điểm như: photoshop, corel photopaint hay đồ họa vector như: illustrator, coreldraw

Nhóm biểu tượng biểu tượng xóa tạo layer – : biểu tượng thứ từ trái sang tạo mới layer, biểu tượng thứ hai tạo thư mục để chứa layer biểu tượng cuối xóa layer hoặc thư mục chứa layer

Nhóm biểu tượng hiệu chỉnh layer – : biểu tượng thứ từ trái sang cho phép ẩn hay layer đó, biểu tượng thứ hai khóa khơng cho phép chỉnh sửa đối tượng layer biểu tượng cuối cho phép đối tượng layer hiển thị đường viền màu hay đường viền

CHƯƠNG GIỚI THIỆU VỀ FLASH

- 21 -

một cách đáng kể nhờ vào công nghệ sử dụng Flash Điều giúp làm giảm kích thước tập tin Flash

- Scene: hiểu cảnh quay Flash Một cảnh quay tập hợp khung hình để tạo chuyển động Để chèn thêm scene, ta vào Insert, chọn Insert Scene Nhờ vào cảnh quay này, tạo thước phim dài, mà quản lý lớp cách phức tạp số lượng đối tượng cảnh quay trở nên lớn Một cảnh quay Flash giống cảnh quay phim truyền hình Khi cần tạo thước phim hoàn chỉnh, ghép nối nhiều cảnh quay lại với Bạn lưu ý rằng, cảnh quay ghép tự động theo thứ tự xếp Do đó, muốn thay đổi thứ tự cảnh quay, bạn việc thay đổi thứ tự xếp Để làm xuất cửa sổ quản lý cảnh quay, bạn vào Windows > Other Panels > Scene (hoặc phím tắt Shift+F2)

Trong cửa sổ này, bạn cần xếp lại thứ tự trình bày Scence thao tác kéo thả đơn giản Thứ tự cảnh quay diễn theo thứ tự từ xuống Khi xây dựng cảnh quay độc lập, bạn kiểm tra cảnh quay cách vào Control > Test Scene (hoặc tổ hợp phím Ctrl+Alt+Enter)

- Movie: thước phim hồn chỉnh Một movie chứa nhiều cảnh quay Để chuyển đổi qua lại cảnh quay movie, ta bấm vào biểu tượng chọn tên scene Để kiểm tra phim hoàn chỉnh, bạn chọn Control > Test Movie (hoặc tổ hợp Ctrl+Enter) Bạn lưu ý rằng, bạn xây dựng thước phim chứa nhiều đối tượng đồ họa có nhiều cảnh quay, việc kiểm tra hoạt động cảnh quay điều cần thiết Bạn nên kiểm tra hoạt động toàn phim cảnh quay hoạt động tốt Sở dĩ vì, trình biên dịch phim hồn chỉnh chậm hơn, chiếm nhiều tài nguyên nhớ so với biên dịch cảnh quay riêng lẻ Điều đặc biệt hữu ích với máy có cấu hình khơng q cao

Ghi chú: Bạn cần lưu ý rằng, Flash hỗ trợ chế độ kiểm tra trực tiếp trong khung sáng tác Để thực chức này, bạn chọn hai chế độ: chế độ kiểm tra tay, chế độ kiểm tra tự động Đối với chế độ kiểm tra tay, bạn sử dụng đánh dấu Frame tại, sau kéo trượt nó TimeLine Với chế độ kiểm tra tự động, bạn cần nhấn phím Enter Nếu phim bạn nằm TimeLine dài bạn thực

chức kiểm tra tự động, bạn muốn dừng chế độ ! Khi đó, bạn nhấn phím Enter thêm lần Chế độ kiểm tra tự động dừng lập tức.

1.4.4 Vùng công cụ Tools

Vùng công cụ chứa cơng cụ để tạo hình, hiệu chỉnh tạo hiệu ứng cho đối tượng Bạn thu gọn thay công cụ cách bấm vào biểu tượng thu nhỏ bên phải cùng, thứ hai từ phải sang Hoặc tắt đi, cách bấm vào biểu tượng cịn lại

Hình 1.16 – Thanh cơng cụ

Bạn di chuyển nó, kéo thả vào vị trí giao diện Flash Bạn làm xuất ẩn cách vào menu Window, chọn Tools

1.4.5 Vùng thuộc tính Properties

Mỗi đối tượng có thuộc tính riêng màu viền, loại viền, màu nền… Vùng quản lý thuộc tính bố trí vùng thuộc tính Properties Để hiển thị thuộc tính đối tượng, bạn việc nhấp chọn đối tượng Khi đó, bảng thuộc tính Properties hiển thị thơng số liên quan đến thuộc tính đối tượng Để thay đổi thơng số thuộc tính đối tượng đó, bạn việc thay đổi thơng số bảng thuộc tính Properties

Biểu tượng nhỏ góc bên phải cho phép thu nhỏ đóng lại vùng thuộc tính Properties Tương tự, làm xuất đóng vùng thuộc tính lại cách vào Windows, chọn Properties

CHƯƠNG GIỚI THIỆU VỀ FLASH

- 23 -

dụng), Class (bạn việc nhập tên Lớp thể vào, Flash khởi tạo cho bạn cú pháp khai báo lớp nội – mặc định lớp thừa kế từ MovieClip), Profile (quản lý thông tin liên quan đến việc xuất dự án Flash), AIR Settings (các cấu hình thiết lập cho dự án Flash chạy Adobe Air)

Properties: chứa FPS (tốc độ chơi – đo số frame giây Frames Per Second), Size (kích thước khung trình chiếu – đo pixel), Stage (quản lý màu khung soạn thảo)

1.4.6 Vùng soạn thảo ActionScript

Trong khung soạn thảo ActionScript, phần soạn thảo nằm trung tâm cửa sổ Vùng phía bên trái chứa lớp thư viện phả hệ Phía khung soạn thảo hệ thống công cụ hỗ trợ soạn thảo ActionScript

Hình 1.18 – Khung soạn thảo ActionScript (1) – Bổ sung thêm thành phần vào ActionScript (2) – Tìm kiếm thay

(3) – Chèn target path Chức thường sử dụng làm việc với lớp (4) – Kiểm tra lỗi cú pháp

(7) – Tạo điểm debug chương trình (8) – Đóng mở khối mã lệnh chương trình (9) – Hỗ trợ viết script

1.4.7 Các vùng chức khác

Ta làm hiển thị thêm vùng chức khác Flash cách vào Windows chọn cửa sổ tương ứng

o Vùng Align (Ctrl+K): dùng để can chỉnh lề trái, phải, cho đối tượng Can chỉnh kích thước cho đối tượng

Trong vùng align chia làm bốn nhóm:

- Nhóm Align: canh chỉnh vị trí đối tượng theo thứ tự biểu tượng từ trái sang phải canh trái, canh theo chiều ngang, canh phải, canh trên, canh theo chiều dọc canh Nếu đánh dấu kiểm vào tùy chọn Align to Stage canh chỉnh theo khung soạn thảo, ngược lại, can chỉnh theo vị trí tương đối đối tượng

- Nhóm Distribute: canh chỉnh theo trục tương đối đối tượng Theo thứ tự biểu tượng từ trái sang phải là: canh chỉnh theo trục phía mép trên, theo trục đối xứng ngang, theo trục phía mép dưới, theo trục phía mép trái, theo trục đối xứng dọc theo trục phía mép phải

- Nhóm Match Size: hiệu chỉnh kích thước đối tượng theo chiều ngang, chiều dọc, theo chiều ngang chiều dọc Nếu chọn tùy chọn Align to Stage, canh chỉnh kích thước đối tượng theo khung soạn thảo

- Nhóm Space: hiệu chỉnh khoảng cách đối tượng theo chiều dọc ngang

o Vùng Transform (Ctrl+T): hiệu chỉnh góc cạnh cho đối tượng Việc hiệu chỉnh góc cạnh bao gồm:

- Nhóm đầu tiên: kéo giãn chiều dài chiều rộng (tính theo tỉ lệ %), bạn nhấp chọn tùy chọn cuối nhóm (biểu tượng mắc xích bị phân đơi), độ kéo giãn đối tượng theo chiều ngang chiều dọc diễn đồng thời, ngược lại việc hiểu chỉnh kích thước theo chiều dài

CHƯƠNG GIỚI THIỆU VỀ FLASH

- 25 -

- Nhóm thứ hai: Rotate (hiệu chỉnh góc quay), Skew (hiệu chỉnh góc dịch chuyển xiêng – hay độ kéo trượt theo hai phía)

- Nhóm thứ 3: liên quan đến tọa độ 3D điểm trọng tâm 3D Chức hoạt động biểu tượng MovieClip Chúng tơi trình bày kĩ biểu tượng chương

o Vùng History (Ctrl+F10): quản lý lịch sử thao tác bạn sáng tác

Bạn việc chọn thời điểm định vùng History để phục hồi thao tác đánh dấu thời điểm

o Vùng Color: quản lý màu sắc Bạn

hiệu chỉnh trực tiếp màu sắc cho đối tượng (chọn đối tượng, sau bấm vào bảng màu) kết hợp với cơng cụ đổ màu mà ta tìm hiểu chương

Hình 1.22 – Bảng màu chuẩn

Trong bảng màu chuẩn này, ta chọn mẫu màu RGB thơng dụng, mẫu màu HSL – cách bấm chuột vào biểu tượng cầu phía bên phải Hoặc chọn khơng màu cách bấm vào biểu tượng hình vng gạch chéo Bạn chọn chế độ Transparent cách điều chỉnh thông số Alpha Bảng màu chuẩn cung cấp cho số mẫu màu Gradient có sẵn

Hình 1.20 – Vùng Transform

Nếu nhu cầu sử dụng màu bảng màu chuẩn khơng đáp ứng đủ, bạn sử dụng bảng màu nâng cao (tổ hợp phím Alt+Shift+F9)

Trong bảng màu nâng cao này, bạn muốn hiệu chỉnh màu cho viền bấm chọn stroke, muốn hiệu chỉnh cho màu chọn fill Trong hộp thoại thả xuống, có chế độ màu sau đây:

+ None: không chọn màu

+ Solid Color: chọn màu đơn (hay màu đặc) Bạn chọn mẫu màu theo chế độ RGB HSL Có thể hiệu chỉnh thuộc tính Alpha Nói chung, chế độ Solid hoàn toàn giống với bảng màu chuẩn

+ Linear Gradient: pha trộn màu theo dạng cầu vồng với cầu vồng phân bố theo đường thẳng

CHƯƠNG GIỚI THIỆU VỀ FLASH

- 27 -

+ Radial Gradient: hồn tồn tương tự Linear Gradient, có khác biệt Radial Gradient tạo màu cầu vồng theo dạng xốy trịn khác với Linear Gradient theo dạng đường thẳng

+ Fill Bitmap: với chức này, bạn đổ màu cho đối tượng ảnh Đây cách tạo hiệu ứng màu thú vị, hữu dụng nhiều

tình

o Vùng Common Library (Buttons, Classes Sounds): quản lý dạng button, lớp thư viện âm

o Vùng Component (Ctrl+F7): quản lý thành phần GUI Flash Bạn sử dụng đối tượng để tạo giao diện web, trình ứng dụng

o Vùng Library (Ctrl+L): quản lý đối tượng import convert Chúng ta vào chi tiết vùng chương sau o Vùng Motion Presets: vùng cung cấp chế độ tạo hoạt hình có sẵn Flash Bạn việc chọn đối tượng, sau chọn hiệu ứng nhấp Apply Lập tức bạn có hiệu ứng hoạt mong đợi

o Vùng Code Snippets: tương tự Motion Presets, vùng tạo ActionScript có sẵn Flash Ta việc chọn đối tượng, sau nhấp vào chức tương ứng, đoạn mã ActionScript

được phát sinh tương ứng với đối tượng chọn theo chức mà bạn chọn

Chức hữu ích cho người dùng phổ thông, muốn tạo ActionScript để điều khiển đối tượng lại ngại tìm hiểu ngơn ngữ lập trình nhiều lý khách quan lẫn chủ quan Tuy nhiên, bạn cần lưu ý rằng, chức cung cấp vài tính tất cả, vậy, bạn muốn tạo thước Hình 1.25 – Vùng Motion Presets

phim chuyên nghiệp, bạn cần có hiểu biết tương đối đầy đủ ngôn ngữ lập trình ActionScript mạnh mẽ tích hợp Flash

Chúng ta tìm hiểu vùng chức sau tìm hiểu ngơn ngữ lập trình ActionScript Trong vùng chức Code Snippets có nhóm hiệu ứng Action sau đây:

- Actions: tạo sẵn hiệu ứng liên quan đến hành động đối tượng

- Timeline Navigation: điều khiển trình chơi phim Nó tương tự PlayBack điều khiển thước phim Trong giáo trình này, thảo luận việc tạo PlayBack ActionScript mà không cần sử dụng chức Code Snippets Chi tiết tìm hiểu chương Sau tìm hiểu cách tạo PlayBack khơng cần dùng đến chức Code Snippets, đề nghị bạn sử dụng chức để tạo PlayBack

- Animation: tạo hiệu ứng động cho đối tượng MovieClip

- Audio and Video: chức PlayBack để điều khiển video audio đối tượng sử dụng Flash

- Load and Unload: tạo hình Splash phim tải Tải hủy tải ảnh, đoạn phim,… phim Flash tạo

- Event Handlers: quản lý việc thực thi Event Event kiện tương ứng với hành động đối tượng Nó hành động phim tải (On_Enter), hành động tương ứng với kiện chuột, bàn phím Các Event quản lý lớp tương ứng Các lớp cung cấp chức để lắng nghe Event diễn đối tượng Khi có Event xảy ra, tương ứng với hàm triệu gọi, thực thi chức tương ứng

Chi tiết nhóm chức này, ta tìm hiểu thêm chương ActionScript o Vùng String: cho phép bạn tùy chọn

ngơn ngữ cho thước phim Nếu bạn muốn phim bạn hiển thị ngôn ngữ máy tính khác nhau, bạn hiệu chỉnh vùng String

o Thay đổi phím tắt Adobe Flash: vào Insert > KeyBoard Shortcuts

CHƯƠNG GIỚI THIỆU VỀ FLASH

- 29 -

đó, phím tắt bị loại bỏ Nếu muốn thay đổi phím tắt, bạn sử dụng nút lệnh Change

TỔNG KẾT CHƯƠNG 1

Trong chương này, làm quen với số khái niệm đồ họa, khái niệm Flash Chúng ta tìm hiểu số vùng chức Flash Các vùng chức bố trí menu Windows

Chúng hi vọng, sau kết thúc chương này, bạn khơng cịn ngỡ ngàng trước giao diện Flash Bạn tùy biến giao diện cho phù hợp với bạn

CHƯƠNG GIỚI THIỆU VỀ FLASH

- 31 -

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN 2.1 Các công cụ Pencil, Brush Erase

Cơng cụ Pencil

Hình 28 – Cơng cụ Pencil

Đối với cơng cụ Pencil, bạn dùng để vẽ đối tượng tay Các thuộc tính tương ứng với cơng cụ Pencil mà bạn hiệu chỉnh là:

- Stroke color: màu sắc nét vẽ - Stroke: kích thước nét vẽ

- Style: dạng thức nét vẽ - đường liền nét, đứt nét… Công cụ Brush

Cũng tương tự công cụ Pencil, Brush dùng để vẽ Chỉ có khác biệt nét vẽ Brush khơng bao gồm viền có màu nền, cịn Pencil ngược lại có màu viền khơng có màu Các thuộc tính Brush bao gồm:

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN

- 33 -

Hình 29 – Công cụ Brush Công cụ Spray Brush

Khi bạn bấm vào biểu tượng tam giác nhỏ biểu tượng Brush, xuất biểu tượng Spray Brush

Đây công cụ phun màu tuyệt vời Flash Bạn định nghĩa mẫu màu để phun, chế độ phun màu: góc nghiêng, độ rộng, độ cao, chế độ xoay biểu tượng theo góc ngẫu nhiên,…

Để tự định nghĩa mẫu màu tô, bạn phải tạo biểu tượng – Graphic, Button MovieClip Chúng ta thảo luận chi tiết chúng chương Ở đây, để minh họa cho mẫu tô màu, sử dụng biểu tượng MovieClip mà không thảo luận thêm

Để tạo kiểu phun màu hình minh họa, bạn phải làm theo bước sau đây:

Bước 1: Định nghĩa mẫu màu Bạn vẽ hình đại diện Ví dụ trường hợp tơi, tơi sử dụng hình ngơi 10 cánh có chiều dài cánh xen kẻ – tức cánh dài, cánh ngắn liên tiếp

Bước 2: Hiệu chỉnh kích thước cho phù hợp Kích chuột phải vào nó, chọn Convert to Symbol > MovieClips nhấp Ok

angle) Các chế độ tạo mẫu ngẫu nhiên: độ kéo giãn biểu tượng (random scaling), góc xoay biểu tượng (rotate symbol), góc phun (random rotation)

Hình 2.30 – Cơng cụ Spray Brush Công cụ Erase

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN

- 35 -

Là công cụ để vẽ đường thẳng Khi bấm vào biểu tượng công cụ cơng cụ, bảng thuộc tính Properties thông tin liên quan Cũng công cụ Pencil, cơng cụ Line, thuộc tính Fill khơng tồn Chỉ có thuộc tính sau:

- Stroke color: chọn màu cho đường thẳng - Stroke: kích thước nét vẽ

- Style: dạng thức nét vẽ Công cụ Rectangle

Là công cụ sử dụng để vẽ hình chữ nhật dạng biến thể Dạng biến thể hình chữ nhật có góc trịn Hình vng hay hình bình hành trường hợp riêng sử dụng cơng cụ Khi muốn vẽ hình có tỉ lệ chiều ngang chiều dọc (hình vng chẳng hạn), ta nhấn phím Shift

Khi bấm vào biểu tượng cơng cụ Rectangle, bảng thuộc tính Properties nó, ta ý đến thuộc tính sau đây:

- Stroke color: chọn màu viền cho nét vẽ - Fill color: chọn màu cho nét vẽ - Stroke: kích thước nét vẽ

Hình 32 – Công cụ Rectangle - Style: dạng thức nét vẽ

- Hinting: giúp bảo vệ nét vẽ đường cong khỏi bị mờ - Cap: thiết lập dạng thức cho đường kết thúc

- Join: xác định cách mà hai phân đoạn đối tượng nối với - Mitter: điều khiển độ sắc nét Mitter, Cap chọn Mitter

- Rectangle Option: cho phép hiệu chỉnh góc trịn cho hình chữ nhật Nếu bạn chọn Lock Corner Radius Controls to one Control – giúp bạn cho phép chỉnh góc trịn hình chữ nhật theo dạng góc đồng thời hay riêng lẻ - tức bạn hiệu chỉnh độ cong góc, góc khác chép số liệu góc hiệu chỉnh Các số liệu góc phía tương ứng với độ cong góc Bạn nhập số liệu vào ô cung cấp sẵn, sử dụng trượt phía bên để hiệu chỉnh độ cong góc cho hình chữ nhật cong

- Reset: đưa số liệu tùy chỉnh mặc định cho góc trịn Cơng cụ Oval

Vẽ hình Oval Khi bấm chọn vào biểu tượng tam giác nhỏ phía biểu tượng Rectangle, xuất biểu tượng Oval Khi sử dụng công cụ Oval, ta ý đến điểm sau đây: muốn tỉ lệ chiều ngang chiều dọc ln cân vẽ (ví dụ vẽ hình trịn) ta giữ phím Shift vẽ, ngược lại tỉ lệ khơng cân chiều dọc chiều ngang (ví dụ vẽ hình Eclipse)

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN

- 37 - - Fill color: chọn màu cho hình thể - Stroke: chọn kích thước nét vẽ

- Scale: độ kéo dãn hình vẽ Nó None, Normal, Horizontal Vertical

- Hinting: giúp bảo vệ nét vẽ đường cong khỏi bị mờ - Cap: thiết lập dạng thức cho đường kết thúc

- Join: xác định cách mà hai phân đoạn đối tượng nối với - Mitter: điều khiển độ sắc nét Mitter, Cap chọn Mitter

- Oval Option: góc mở Start Angle góc đóng End Angle giúp tạo hình Oval nhờ vào giới hạn hai góc Góc mở Start Angle quay theo chiều kim đồng hồ, lấy vị trí gốc vị trí góc 900

, số đo góc số đo góc phần bị khuyết Góc đóng End Angle quay theo chiều ngược kim đồng hồ, số đo

góc phần bị khuyết góc bù góc (tức 360-góc đóng)

Ví dụ, thiết lập góc mở Start Angle 600, ta thu sau

Hình 34 – Hình tạo góc mở

Trong hình này, góc khuyết có số đo 600 Góc khuyết lấy từ vị trí 900

và quay theo chiều kim đồng hồ Nếu ta thiết lập góc đóng End Angle 600, ta thu sau

Hình 35 – Hình tạo góc đóng Trong hình này, góc khuyết có số đo 3600

Tương tự trên, ta kết hợp hình thể có số đo góc đóng 600

góc mở 1200 Ta thu hình thể bên Phần hình thể vẽ kết hợp hai hình tạo góc đóng góc mở

Hình 36 – Hình tạo góc đóng góc mở

- Inner Radius: độ lớn bán kính đường trịn bên Đây cách thức để tạo hình vành khăn Hình vành khăn hình tạo hai đường trịn đồng tâm, phần chồng khít bị loại bỏ

- Close Path: có tác dụng hình thể tạo góc đóng góc mở Nó tự động làm cho đường kết nối trở nên liền mạch

Hình 2.10 – Hình tạo góc mở 600 kết hợp với tùy chọn Close Path

Hình bên trái khơng kích hoạt Close Path Hình bên phải kích hoạt Close Path Như ta thấy, với tùy chọn Close Path, hình thể khép kính thuộc tính Fill Color có tác dụng

Cơng cụ Rectangle Primitive

Khi bấm vào biểu tượng hình tam giác nhỏ công cụ Rectangle, ta thấy xuất công cụ Rectangle Primitive Tương tự công cụ Rectangle, với cơng cụ này, ta hiệu chỉnh góc trịn sau tạo Đây ưu điểm công cụ

Nếu muốn thay đổi góc trịn, ta cần dịch chuyển nút nhấn nhờ vào công cụ Selection sang trái phải (đối với nút nhấn nằm ngang) lên xuống (đối với nút nhấn nằm dọc) Chi tiết công cụ Selection ta thảo luận ần Cơng cụ Selection có biểu tượng hình trỏ chuột, màu

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN

- 39 -

Bạn cần lưu ý rằng, công cụ Rectangle Primitive dựa sở Rectangle Điều bạn nhận thấy phát họa hình cơng cụ này: có hình chữ nhật góc cạnh bao quanh hình thể

Hình 2.11 – Công cụ Rectangle Primitive Công cụ Oval Primitive

Hồn tồn tương tự cơng cụ Oval Bạn hiệu chỉnh thuộc tính góc mở, góc đóng, bán kính hình vành khăn Và tương tự cơng cụ Rectangle Primitive, ta hiệu chỉnh thuộc tính hình vẽ nhờ vào nút nhấn nhấn Nút nhấn trung tâm dùng để điều chỉnh kích thước bán kính vành khăn Nút nhấn biên ngồi dùng để điều chỉnh góc đóng, góc mở

Việc hiệu chỉnh góc đóng, góc mở, bán kính vành khăn nhờ vào công cụ Selection mà làm quen mục

Bạn cần lưu ý, giống công cụ Oval, để tạo dựng hình thể cho chiều ngang chiều dọc (như hình trịn) nhờ vào Oval Primitive, ta nhấn giữ Shift vẽ hình

Hình 2.12 – Cơng cụ Oval Primitive Công cụ PolyStar

Dùng để vẽ đa giác hình Khi bấm chọn cơng cụ này, ta ý tùy chọn bảng thuộc tính Propeties

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN

- 41 - - Stroke: chọn kích thước cho nét vẽ

- Style: chọn dạng thức cho nét vẽ

- Cap: thiết lập dạng thức cho đường kết thúc

- Join: xác định cách mà hai phân đoạn đối tượng nối với - Hinting: giúp bảo vệ nét vẽ đường cong khỏi bị mờ

- Mitter: điều khiển độ sắc nét Mitter, Cap chọn Mitter

- Tool Setting: thiết lập tùy chọn nâng cao Khi bấm vào nút Option, hộp thoại sau

Hình 2.14 – Thiết lập PolyStar Trong đó,

+ Style: lựa chọn hình dạng đa giác đa giác lồi hay hình

+ Number of Sides: số lượng cạnh đa giác (hay số lượng cánh hình sao) + Star point size (SPS): tỉ lệ khoảng cách từ tâm hình đến đỉnh lõm hình khoảng cảnh từ tâm hình đến đỉnh lồi hình Tỉ lệ nằm dải từ Nếu tỉ lệ lớn (càng gần 1) hình mập, ngược lại, tỉ lệ nhỏ hình gầy

Hình 2.15 – Hình mập (tỉ lệ SPS = 0.9) hình gầy (tỉ lệ SPS = 0.1) 2.3 Công cụ Text

Hình 2.16 – Cơng cụ Text

- Text Tool: có ba loại – Static Text (văn cố định – nội dung label lập trình hướng đối tượng), Dynamic Text (văn chọn, copy thay đổi – nội dung TextBox hiệu chỉnh thuộc tính Readonly=True), Input Text (nội dung văn thay đổi – nội dung TextBox thuộc tính Readonly=False)

- Character: Family (chọn loại phông chữ), Style (chọn dạng thức cho phông chữ - in đậm, in nghiêng…), Size (chọn kích thước cho phơng chữ), Letter Spacing (chọn độ rộng cho kí tự trắng chữ cái), Color (chọn màu cho phông chữ), Auto Kern (tự động co giãn), Anti-Alias (làm cho nét chữ trở nên mượt mà hơn)

- Show Border around Text: hiển thị đường viền xung quanh văn - SubScript SuperScript: tạo chữ viết (kiểu x2) viết (kiểu x

2

) - Format: can chỉnh vị trí văn (trái, phải, giữa, hai phía)

- Spacing Margin: Spacing hiệu chỉnh khoảng cách từ văn dòng văn Margin hiệu chỉnh khoảng cách bên trái bên phải nội dung văn so với viền bên

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN

- 43 -

không tự động xuống dòng), Password (nội dung văn bị ẩn kí tự chọn làm mặt nạ – ô nhập password)

- Orientation: thay đổi chiều hiển thị văn

Ngoài ra, nội dung văn soạn thảo, thuộc tính nêu trên, văn cịn có thêm số thuộc tính sau đây:

- Options: tùy chọn tạo liên kết trang html Link – đường dẫn đến liên kết Target – cách thức mở liên kết, bao gồm _blank, _parent, _self _top

- Filter: tạo hiệu ứng nâng cao tạo đổ bóng, hiệu ứng bóng mờ, hiệu ứng cầu vồng… Để sử dụng hiệu ứng này, bạn bấm vào biểu tượng vùng công cụ tô vàng, từ bên trái sang Nếu bạn thay đổi hiệu ứng đó, muốn lưu lại thiết lập này, bạn nhấp vào biểu tượng thứ ba từ trái sang Nếu bạn muốn quay lại thiết lập mặc định, nhấp biểu tượng thứ hai từ trái sang Biểu tượng mắt cho phép bạn tạm ẩn hiệu ứng chọn Biểu tượng mũi tên quay lùi, cho phép bạn quay lại thiết lập thơng số trước Biểu tượng thùng rác cuối cùng, cho phép bạn xóa bỏ hiệu ứng chọn 2.4 Công cụ chọn Selection Lasso Cơng cụ Selection

Hình 2.18 – Cơng cụ Selection

Với công cụ này, bạn chọn đối tượng, phần đối tượng cách kích đơi chuột vào bơi đen phần Bạn kéo giãn, uốn biên hình thể (khi trỏ chuột đặt biên hình có dạng biểu tượng Selection bổ sung thêm đường cong màu đen)

Công cụ Lasso

Tương tự công cụ Selection, công cụ Lasso cho phép chọn Điểm khác biệt cơng cụ Selection dùng để chọn tồn hay nhiều đối tượng (bằng cách giữ phím Shift) phần đối tượng theo khung chọn hình chữ nhật Cịn cơng cụ Lasso chọn theo hình dạng phức tạp Chúng ta chọn Lasso vẽ khung chọn Nó khơng nhanh Selection tỏ hiệu nhiều trường hợp, đối tượng chọn nằm phân tán buộc phải chọn phần đối tượng Cũng tương tự Selection, ta giữ phím Shift để chọn theo nhiều vùng khác Công cụ Lasso dùng để tinh chỉnh đối tượng Khi bấm vào biểu tượng này, xuất thêm công cụ bao gồm Magic Wand, Magic Wand Setting Polygon Mode

Hình 2.19 – Cơng cụ Lasso

2.5 Các công cụ đổ màu Paint Bucket, Ink Bottle bắt màu EyeDropper Công cụ Paint Bucket

Đây công cụ dùng để đổ màu cho vật thể Khi kích vào biểu tượng công cụ, bảng thuộc tính Properties thơng số liên quan đến công cụ này:

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN

- 45 -

nó) Đó ưu điểm công cụ Flash Adobe Với công cụ này, bạn tạo hiệu ứng màu phức tạp Nó hỗ trợ chế độ màu RGB, HSL, chế độ màu Alpha, chế độ không màu, màu dạng kiểu cầu vồng Bảng màu Paint Bucket không cho phép bạn hiệu chỉnh dải màu cầu vồng với màu tùy chọn, để làm điều bạn cần kết hợp với bảng màu đầy đủ (Windows>Color) Trong hộp thoại màu này, cho phép bạn sử dụng kiểu pattern, bitmap dải màu cầu vồng tùy chọn để đổ màu cho đối tượng Nhưng bạn lưu ý rằng, cần kết hợp với cơng cụ Paint Bucket

Hình 2.20 – Cơng cụ Paint Bucket Công cụ Ink Bottle

Đây công cụ dùng để đổ màu viền Khi bấm chọn vào biểu tượng tam giác đen nhỏ biểu tượng Paint Bucket, xuất biểu tượng công cụ Ink Bottle

Khi bấm vào biểu tượng này, vùng thuộc tính Properties xuất thuộc tính liên quan đến cơng cụ này:

- Stroke color: chọn màu viền - Stroke: chọn kích thước cho viền - Style: chọn dạng thức cho viền

- Cap: thiết lập dạng thức cho đường kết thúc

- Join: xác định cách mà hai phân đoạn đối tượng nối với - Mitter: điều khiển độ sắc nét Mitter, Cap chọn Mitter Công cụ EyeDropper

Đây công cụ dùng để lấy thông số màu vị trí đối tượng Ta việc chọn biểu tượng, sau kích vào vị trí ảnh (vị trí mà ta cần lấy thơng số màu), đó, thơng số màu mặc định màu vị trí mà bạn vừa kích vào

2.6 Công cụ Free Transform Gradient Transform Cơng cụ Free Transform

Hình 2.22 – Công cụ Free Transform

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN

- 47 -

các nút đối tượng, kéo ngồi muốn tăng kích thước, kéo vào muốn làm giảm kích thước Nếu muốn xoay đối tượng, ta nhấn vào nút góc đối tượng, xoay đối tượng

Khi làm việc với đối tượng công cụ bạn cần lưu ý đến chức xoay đối tượng

Hình 2.23 – Thay đổi tâm xoay đối tượng

Mặc định, ta tạo đối tượng đối tượng tồn tâm điểm xoay (khi xoay đối tượng, đối tượng quay quanh điểm xoay này) Bạn hiệu chỉnh vị trí điểm xoay cách bấm chọn di chuyển

Trên hình vẽ trên, bạn thấy thay đổi vị trí tâm xoay đối tượng Ở đối tượng bên trái, tâm xoay nằm đường thẳng, cịn hình bên phải, tâm xoay dịch chuyển xuống góc phía Bạn xoay đối tượng để nhận khác biệt: đường thẳng bên trái xoay theo kiểu chong chóng (tâm quay cánh chong chóng), cịn đường thẳng bên phải xoay theo kiểu kim đồng hồ (tâm quay đầu kim quay)

Bất kì đối tượng đối xứng tâm, theo mặc định, tâm đối xứng đối tượng tâm xoay

Tâm xoay đối tượng không thiết phải nằm đối tượng Nó nằm bất kì, tùy thuộc vào mục đích sử dụng bạn

Xoay đối tượng hiệu ứng tạo đơn giản Flash Bạn tìm hiểu kĩ học cách tạo chuyển động kĩ thuật Tween ActionScript

Công cụ Gradient Transform

nhỏ (giảm kích thước vùng sáng), hiệu chỉnh vị trí tam giác (thay đổi tâm vùng sáng), bấm vào nút trịn dịch chuyển (thay đổi vị trí vùng màu)

Hình 2.24 – Cơng cụ Gradient Transform 2.7 Các công cụ làm việc với đường Bezier

Như giới thiệu trên, Flash chuẩn đồ họa vector Mọi đối tượng Flash dựa sở đường Bezier Các đường Bezier tạo dựng dựa phương pháp nội suy Spline Một đường Bezier đặt trưng điểm đường điều khiển điểm Điểm điểm uốn, điểm góc cạnh, điểm đối xứng – ta gọi chung điểm điều khiển (vì tương ứng với đường điều khiển) Nếu bạn làm quen với Microsoft Word, hẳn bạn biết đến đường Bezier Để làm việc với đối tượng Flash cung cấp cho ta tập hợp công cụ để làm việc với đường Bezier: công cụ SubSelection, Pen, Add Anchor Point, Delete Anchor Point Convert Anchor Point Công cụ SubSelection nằm riêng, cơng cụ cịn lại bố trí chung vào vị trí cơng cụ Sau đây, tìm hiểu công cụ

Công cụ SubSelection

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN

- 49 -

Hình 2.25 – Công cụ SubSelection Công cụ Pen

Công cụ dùng để vẽ đường đa giác cách tạo điểm điều khiển, sau đó, tự động nối điểm lại với

Các thông số liên quan đến cơng cụ hồn tồn tương tự với công cụ Line Khi sử dụng công cụ Pen, bạn lưu ý rằng, bạn tạo hình thể có dạng đường thẳng, bạn việc nhấp vào nút đầu nút cuối Nếu bạn muốn tạo dạng đường cong, mà cần rê chuột liên tiếp để hiệu chỉnh đường điều khiển

Hình 2.26 – Công cụ Pen

Công cụ Add Anchor Point dùng để bổ sung thêm điểm điều khiển cho đường Bezier, ngược lại, Delete Anchor Point xóa bớt điểm điều khiển cho đường Bezier

Để bổ sung thêm điểm điều khiển, ta việc chọn cơng cụ Add Anchor Point, sau bấm vào vị trí đường biên

Để xóa điểm điều khiển, ta việc chọn công cụ Delete Anchor Point, sau bấm vào điểm điều khiển cần xóa bỏ

Việc bổ sung xóa bỏ điểm điều khiển hữu ích việc tạo đường uốn Với đường uốn đặc thù, ta cần bổ sung vào số lượng điểm điều khiển tối ưu cho việc hiệu chỉnh Ta lấy ví dụ: đường Parabol, ta cần ba điểm điều khiển; với đường đồ thị hàm số đa thức bậc ba ta cần bốn điểm điều khiển

Các điểm điều khiển điểm nằm đường biên Những điểm không nằm đường biên điểm thuộc đường điều khiển

Hình 2.27 – Hình điểm điều khiển Công cụ Convert Anchor Point

Dùng để chuyển đổi điểm điều khiển góc cạnh thành điểm điều khiển uốn cong Ngồi cịn có chức hiệu chỉnh góc uốn nhờ vào đường điều khiển Chức tương đối giống với chức hiệu chỉnh góc cạnh cơng cụ SubSelection Nhưng điểm khác biệt chỗ, công cụ Convert Anchor Point hiệu chỉnh đường điều khiển cách độc lập (tại điểm điều khiển có hai đường điều khiển bên trái bên phải Công cụ hiệu chỉnh đường điều khiển bên trái bên phải cách riêng biệt.), cơng cụ SubSelection hiệu chỉnh đồng thời hai đường điều khiển (điểm uốn đối xứng)

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN

- 51 -

Hình 2.28 – Cơng cụ Convert Anchor Point 2.8 Làm việc với đối tượng

Khi thao tác với đối tượng, ta thường sử dụng chức sau đây:

- Nhóm viền đối tượng thành nhóm: có hai cách nhóm – sử dụng chức Group chức Union Chọn đối tượng viên (nhấp đôi chuột vào đối tượng), sau vào Modify, chọn Group (Ctrl+G) Combine Object > Union Để nhóm nhiều đối tượng thành nhóm, ta sử dụng chức Group: chọn đối tượng cần nhóm, nhấn tổ hợp phím Ctrl+G

- Vơ hiệu hóa việc chỉnh sửa đối tượng: chọn đối tượng cần khóa, vào Modify, chọn Arrange > Lock (Ctrl+Alt+L)

- Kích hoạt việc chỉnh sửa đối tượng trở lại: Modify > Arrange > Unlock All (Ctrl+Shift+Alt+L)

- Sắp xếp thứ tự đối tượng: chọn đối tượng, vào Modify > Arrange Sau đó, ta hiệu chỉnh thứ tự xếp Microsoft Word

- Canh chỉnh vị trí kích thước đối tượng: vào Modify > Align (Ctrl+K)

Hình 2.29 – Vùng Align

Các chức nhóm vùng này, tìm hiểu

- Làm việc với Shape: vào Modify > Shape Sau ta chọn chức cần hiệu chỉnh

Bitmap (chuyển đổi Bitmap thành dạng vector) Việc chuyển đổi Bitmap thành dạng đồ họa vector phức tạp Có nhiều thuật tốn thực chức này, nói chung, chưa có thuật tốn tối ưu thực cách hoàn hảo Đa số ảnh vector thu khơng giữ gìn ngun trạng đối tượng ảnh Bitmap ban đầu

- Xây dựng đối tượng Layer khác nhau: việc sử dụng layer kĩ thuật hữu ích đồ họa máy tính

Hình 2.30 – Distribute to Layers

CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN

- 53 -

TỔNG KẾT CHƯƠNG

Trong chương này, làm quen với cơng cụ vẽ hình Flash Với công cụ vẽ này, chúng tơi hi vọng bạn sử dụng cách thục Khi sử dụng công cụ, bạn cần quan tâm đến thao tác đồng hành với

CHƯƠNG CÁC BIỂU TƯỢNG TRONG FLASH

CHƯƠNG CÁC BIỂU TƯỢNG TRONG FLASH

Biểu tượng đối tượng tạo Flash tái sử dụng Một biểu tượng sử dụng movie import vào thư viện sử dụng movie khác Có ba loại biểu tượng là: Graphics, Buttons MovieClips

Biểu tượng đối tượng tạo lưu vào thư viện Nếu biểu tượng sử dụng movie gọi thể biểu tượng Mỗi thể biểu tượng có thuộc tính riêng (màu sắc, kích thước, chức năng…) khác với biểu tượng tạo Mọi thể đối tượng tạo nhờ vào chức kéo thả biểu tượng từ thư viện vào khung trình chiếu Khi biểu tượng chỉnh sửa thể cập nhập theo

Việc sử dụng biểu tượng phương pháp hiệu để giảm kích thước movie Những biểu tượng khơng sử dụng movie, dù nằm thư viện khơng tính vào kích thước movie

3.1 Biểu tượng Graphic

Biểu tượng Graphic hình ảnh tĩnh tái sử dụng để tạo chuyển động Bất kì ảnh điểm, vector hay văn chuyển đổi thành Graphic Chúng có Frame TimeLine

Để tạo Graphic, bạn thao tác sau:

- Chọn đối tượng cần chuyển đổi sang biểu tượng Graphic

- Nhấn phím F8 (hoặc kích chuột phải, chọn Convert to Symbol) Trong hộp thoại Convert to Symbol, có tùy chọn sau

Hình 3.1 – Chuyển đổi sang biểu tượng Graphic + Name: tên biểu tượng tạo

+Type: loại biểu tượng cần tạo Ở đây, chọn Graphic

Tiếp đến, bạn nhấp Ok Một biểu tượng Graphic tạo đưa vào thư viện

- Thanh tùy chọn thả xuống: cho phép chuyển đổi qua lại loại biểu tượng

- Instance of: kích chuột vào tùy chọn swap, bạn thay đổi biểu tượng đối tượng thể chọn

- Position and Size: cho phép hiệu chỉnh vị trí theo tọa độ đối tượng thể (x y), kích thước (w – width h – height) Tùy chọn Lock width and height values together cho phép thay đổi kích thước chiều rộng cao đồng thời hay riêng lẽ

- Color effect: với tùy chọn Style, bạn hiểu chỉnh thuộc tính Brightness, Tint, Advanced Alpha cho đối tượng

- Looping: tùy chọn liên quan đến số lần lặp lại hành động biểu tượng Graphic Nó Loop, Play Once Single Frame

3.2 Biểu tượng Button

Biểu tượng Button dùng để bổ sung tương tác với movie, đáp trả kiện kích chuột, ấn phím, kéo kéo hành động khác Một biểu tượng Button có bốn Frame tương tác: Up, Down, Over Hit

Để tạo Button, bạn thao tác sau: - Chọn đối tượng cần chuyển đổi sang Button

- Nhấp phím F8 kích chuột phải, chọn Convert to Symbol Khi đó, xuất hộp thoại sau:

Hình 3.3 – Chuyển đổi sang biểu tượng Button Trong mục Type, chọn Button nhấp Ok

Tạo hiệu ứng cho Button

Ở đây, ta thao tác để tạo hiệu ứng cho Button Ta không thảo luận thêm Hình 3.2 – Bảng thuộc tính

CHƯƠNG CÁC BIỂU TƯỢNG TRONG FLASH

- 57 -

Mỗi biểu tượng Button có Frame TimeLine Tương ứng với Frame Up hiệu ứng trỏ chuột thả (sau bấm xuống), Frame Down tương ứng với hiệu ứng trỏ chuột nhấn xuống, Frame Over tương ứng với hiệu ứng trỏ chuột di chuyển qua đối tượng Frame Hit tạo vùng tương tác ảo cho Button (nghĩa thao tác vùng hoàn toàn tương tự với thao tác Button đó) Vùng tương tác gọi ảo khơng hiển thị movie Sau đây, ta thao tác để tạo hiệu ứng cho Button

(1) Kích đơi chuột vào Button vừa tạo

(2) Nhấp chọn Frame Up, nhấn phím F6 thay đổi thuộc tính cho Button Hoàn toàn tương tự cho Frame Down Frame Over

(3) Nếu bạn muốn tạo vùng tương tác ảo, bạn sử dụng công cụ vẽ để tạo vùng tương tác Frame Hit: chọn Frame Hit, nhấp F6 vẽ hình thể Frame Hit

(4) Quay trở lại Scene, nhấp Ctrl+Enter để kiểm tra Các thuộc tính biểu tượng Button

- Instance Name: tên hiển thị biểu tượng Được dùng làm việc với ActionScript - Thanh tùy chọn thả xuống: cho phép chuyển đổi qua lại loại biểu tượng

- Instance of: chọn swap để thay đổi biểu tượng cho đối tượng hiển thị

- Position and Size: thay đổi vị trí kích thước cho đối tượng

- Color effect: chọn hiệu ứng màu sắc cho đối tượng, bao gồm:Brightness, Tint, Advanced Alpha

- Display: với thuộc tính Blending, cho phép ta chọn chế độ pha trộn màu sắc cho Button - Tracking: với Options, bạn chọn Track as Button Track as MenuItem

- Filter: hoàn toàn tương tự với Filter làm việc với cơng cụ Text

Hình 3.4 – Bảng thuộc tính biểu tượng Button

+ Sử dụng Button tạo sẵn: vào Windows > Common Libraries > Button

+ Sử dụng Commands: bạn tạo khối hình thể, nhấp chọn Sau vào Commands > Make Button

3.3 Biểu tượng MovieClip

Là mẫu hoạt hình Flash tái sử dụng Khác với Graphic Button, MovieClip có riêng TimeLine với vơ số Frame Một MovieClip bao gồm nhiều biểu tượng Graphic, Button chí MovieClip Cũng tương tự Button, bạn cài đặt tên hiển thị cho để điều khiển ActionScript

Tạo hiệu ứng cho Movieclip: tìm hiểu cách tạo hoạt hình cho MovieClip chương

Các thuộc tính biểu tượng MovieClip

- Instance Name: tên hiển thị biểu tượng Được dùng làm việc với ActionScript

- Thanh tùy chọn thả xuống: cho phép chuyển đổi qua lại loại biểu tượng

- Instance of: chọn swap để thay đổi biểu tượng cho đối tượng hiển thị

- Position and Size: thay đổi vị trí kích thước cho đối tượng

- 3D Position and View: hiểu chỉnh vị trí khơng gian khung nhìn 3D

- Perspective Angle: hiệu chỉnh góc phối cảnh theo độ xa gần

- Vanishing Point: hiệu chỉnh tọa độ điểm triệt tiêu

CHƯƠNG CÁC BIỂU TƯỢNG TRONG FLASH

- 59 -

- Display: với thuộc tính Blending, cho phép ta chọn chế độ pha trộn màu sắc cho Button

- Tracking: với Options, bạn chọn Track as Button Track as MenuItem

- Filter: hoàn toàn tương tự với Filter làm việc với công cụ Text 3.4 Làm việc với Library

Library thư viện quản lý đối tượng import convert Để convert đối tượng ta kích chuột phải vào đối tượng chọn Convert to Symbol Khi đó, biểu tượng xuất Library Kích thước movie khơng bao gồm tồn đối tượng Library, bao gồm đối tượng sử dụng movie

Để import đối tượng từ bên vào Libray, ta chọn File > Import > Import to Library Sau đó, đối tượng chọn đưa vào Library

Hình 3.6 – Khu vực quản lý thư viện Library

TỔNG KẾT CHƯƠNG

Trong chương này, làm quen với ba loại biểu tượng Flash Chúng có vài điểm tương đồng vài điểm khác biệt Một điểm khác biệt chúng số Frame hỗ trợ cho biểu tượng khác nhau: Graphic – Frame, Button – Frame MovieClip – nhiều Frame

CHƯƠNG CÁC BIỂU TƯỢNG TRONG FLASH

- 61 -

CHƯƠNG TẠO HOẠT CẢNH 4.1 Tìm hiểu TimeLine

TimeLine vùng tương tác để tạo chuyển động movie Flash Để tạo chuyển động, TimeLine thay Frame theo thời gian

Hình 37.1 – Vùng TimeLine

Trong TimeLine, bạn dễ dàng thấy ba phần chính: Phần quản lý Layer (bên trái), Phần quản lý Frame (phía bên phải) Phần quản lý Cơng cụ (phía bên phải)

- Layer: quản lý lớp đối tượng Mỗi đối tượng Layer có TimeLine riêng Trong trường hợp minh họa trên, đối tượng Layer nằm TimeLine phía đối tượng Layer nằm TimeLine phía

- Thanh TimeLine: chứa nhiều Frame Khi tạo chuyển động, Frame thay cho Frame sau thay cho Frame trước Ta xem qua hành động cách kéo Frame (Frame đánh dấu màu đỏ) sang trái phải TimeLine

- Vùng công cụ - gồm công cụ sau đây: + Center Frame: xác định Frame trung tâm

CHƯƠNG TẠO HOẠT CẢNH

- 63 -

Hình 4.2 – Onion Skin

+ Onion Skin Outlines: cho phép hiển thị tồn hình ảnh đối tượng vùng Frame chọn Sự hiển thị bao gồm viền đối tượng

Hình 4.3 – Onion Skin Outlines

+ Edit Multiple Frames: cho phép hiển thị đối tượng gốc toàn đối tượng hiển thị theo hai chức Onion Skin Khi đó, ta chỉnh sửa đối tượng (Hình 44)

+ Các thơng số khác: Current Frame – vị trí Frame Frame rate – tốc độ chuyển động (tính số Frame giây) Elapsed Time – thời gian thực thi toàn Frame TimeLine

Một số chức làm việc với TimeLine

Khi làm việc với TimeLine, ta thường xuyên sử dụng đến hai phím tắt sau đây: + Phím F5: chèn Frame vào TimeLine (tương ứng với Insert Frame) Nếu vùng TimeLine TimeLine tạo Tween, tự động giãn vùng Tween (chèn thêm Frame vào vùng Frame tạo Tween, Frame tạo kế thừa Tween)

+ Phím F6: chèn KeyFrame vào TimeLine (tương ứng với Insert KeyFrame) Frame cuối chèn KeyFrame Với KeyFrame này, ta tạo điểm chốt cho hành động movie Khi kết hợp với Tween, tạo chuyển động mềm mại cho movie Flash

Chúng ta tham khảo ví dụ sau đây, để hiểu rõ hai phím tắt Trong ví dụ này, tạo hình chữ nhật có trắng viền đen (Hình 60) Tại Frame thứ 5, bạn nhấp vào Frame này, nhấn phím F5 Sau đó, bạn thay đổi độ lớn viền (thuộc tính Stroke = 5) – xem Hình 61 Giờ bạn kiểm tra độ lớn viền Frame Như bạn thấy đấy, viền tất hình chữ nhật Frame thay đổi thành

Bây giờ, bạn làm lạm lại ví dụ cách thay phím F5 phím F6 Bạn thấy thuộc tính Stroke khơng thay đổi Frame, thay đổi KeyFrame cuối (KeyFrame mà bạn hiệu chỉnh)

CHƯƠNG TẠO HOẠT CẢNH

- 65 -

Hình 4.6 – Chèn Frame phím F5

Hình 4.7 – Chèn KeyFrame phím F6

Hình 4.8 – Sao chép Cắt dán nhóm Frame

Để thực chức dán, bạn chọn vị trí cần dán nhóm Frame copy TimeLine Sau đó, kích chuột phải chọn Paste Frames

Hình 4.9 – Chép nhóm Frame chép cắt dán

CHƯƠNG TẠO HOẠT CẢNH

- 67 -

và KeyFrame tương ứng với vị trí kết thúc Clear KeyFrame tương tự Clear Frame, áp dụng cho KeyFrame Cịn Remove Frames xóa Frame lẫn đối tượng

Convert to KeyFrames Convert to Blank KeyFrames: chuyển đổi Frame thành KeyFrame Blank KeyFrame

Insert Blank KeyFrame: chèn Blank KeyFrame

Reverse Frames: cho phép lật ngược thứ tự nhóm Frame Để thực chức này, bạn bơi đên nhóm Frame, kích chuột phải chọn Reverse Frame Với chức này, bạn tạo chuyển động mang tính đối xứng

Tạo chuyển động nhờ vào kĩ thuật “Frame by Frame”

Đây kĩ thuật tạo chuyển động dựa sở kĩ thuật 24 hình/giây Các Frame thị Scene Sự hiển thị Frame tạo chuyển động cho đối tượng

Ta minh họa kĩ thuật “Frame by Frame” Ví dụ sau tạo hiệu ứng động cho kí tự từ “Flash”

Bước Sử dụng cơng cụ Text, tạo dịng văn có nội dung “Flash” Bước Chọn công cụ Selection Bấm vào dịng văn sau kích chuột phải và chọn Break Apart

Bước Nhấp chọn Frame thứ hai TimeLine Nhấp phím F6 Sau bấm chọn kí tự – kí tự F, dịch chuyển lên so với kí tự cịn lại hoặc thay đổi màu sắc

Chọn Frame thứ ba TimeLine Nhấp phím F6 Sau tiếp tục với kí tự thứ hai – kí tự l Q trình tiếp diễn kí tự cuối kí tự h

Bước Nhấp Ctrl+Enter để kiểm tra sản phẩm

Với kĩ thuật Frame by Frame, bạn hồn tồn tạo hoạt cảnh Nhưng nhược điểm kĩ thuật bạn muốn tạo hiệu ứng mềm mại bạn phải thao tác thời gian Flash cung cấp cho bạn phương pháp sau để tạo chuyển động với tên gọi Tween Có ba phương pháp Tween: Classic Tween, Motion Tween Shape Tween Về bản, chúng khơng có nhiều điểm tương đồng Chúng ta khảo sát ba loại Tween

4.2 Classic Tween

Classic Tween kĩ thuật tạo chuyển động cung cấp phiên từ Flash CS3 trở trước Trong phiên Flash CS5, Adobe trì kĩ thuật Về bản, thao tác với kĩ thuật Classic Tween ta cần phải sử dụng đến hai KeyFrame khởi đầu KeyFrame kết thúc Kể từ ấn CS4, Adobe đưa vào kĩ thuật gọi Motion Tween – kĩ thuật mà theo Adobe sử dụng đơn giản, không cần tạo KeyFrame rắc rối Classic Tween Mục đích tạo kĩ thuật Classic Tween tạo chuyển động cho đối tượng Khi sử dụng Classic Tween, đối tượng chuyển đổi thành hai biểu tượng Graphic (một biểu tượng cho KeyFrame biểu tượng cho KeyFrame kết thúc) Bạn sử dụng hiệu ứng 3D cho Classic Tween sử dụng chức swap symbol cho đối tượng thể Nhưng Adobe lưu lại kĩ thuật phiên CS5 dù kĩ thuật Motion Tween có nhiều ưu điểm kĩ thuật Classic Tween có ưu điểm riêng mà Motion Tween thay Một ưu điểm kĩ thuật Classic Tween cho phép chứa Frame Script

Các bước sử dụng Classic Tween để tạo hiệu ứng động

Ví dụ sau trình bày cho bạn phương pháp tạo bóng rơi nhờ vào kĩ thuật Classic Tween

Bước Trên khung sáng tác, bạn sử dụng công cụ Oval để tạo hình quả bóng trang trí cho theo hình bóng chuyền

CHƯƠNG TẠO HOẠT CẢNH

- 69 - Bước Nhấn Ctrl+Enter để kiểm tra kết

Đây ví dụ đặc trưng sử dụng Classic Tween – dùng để tạo chuyển động đối tượng Bạn hồn tồn sử dụng để hiệu chỉnh thuộc tính đối tượng, việc chức yếu dành cho Bạn cần lưu ý rằng, ví dụ trên, lần bạn nhấn phím F6 bạn tạo KeyFrame kết thúc KeyFrame KeyFrame kết thúc đóng chức KeyFrame mở đầu KeyFrame kết thúc sau Nghĩa lần bạn nhấp F6, bạn tạo thêm khoảng đánh dấu KeyFrame để tạo Classic Tween

Hình 4.11 – Kĩ thuật Classic Tween

Trong hình minh họa trên, Layer chứa bóng, Layer chứa (hình chữ nhật màu xanh) Các nút đen TimeLine Layer KeyFrame Các khoảng nút khoảng đánh dấu KeyFrame Classic Tween 4.3 Shape Tween

cơ chế Shape Tween, sử dụng thuật tốn Transform – nghĩa dịch chuyển điểm đánh dấu theo số Frame đến vị trí đánh dấu số Frame cuối

Các bước sử dụng Shape Tween để tạo hiệu ứng động

Trong ví dụ này, tạo hiệu ứng biến đường thẳng thành đường cong Bạn tạo hiệu ứng Tween cịn lại Đây ví dụ điển hình sử dụng Shape Tween

Hình 4.12 – Kĩ thuật Shape Tween

Bước 1 Dùng công cụ Line vẽ đường thẳng khung sáng tác.

Bước 2 Với cơng cụ Shape Tween, bạn tạo Tween trước chèn KeyFrame sau chèn KeyFrame Ta minh họa việc tạo Tween trước Bạn dùng công cụ Selection, bấm chọn đối tượng, kích chuột phải chọn Create Shape Tween

Bước Bấm chọn vào Frame 30 TimeLine, nhấp phím F6 để chèn KeyFrame kết thúc Bạn bấm chọn công cụ Add Anchor Point bấm vào vị trí giữa đường thẳng để bổ sung điểm điều khiển Tiếp đến, bạn chọn công cụ Convert Anchor Point để tạo điểm uốn Bạn bấm chọn điểm mà bạn vừa tạo, uốn đường thẳng thành đường cong

Bước Nhấn tổ hợp Ctrl+Enter để kiểm tra sản phẩm

CHƯƠNG TẠO HOẠT CẢNH

- 71 -

Khi sử dụng Shape Tween, tự động tạo biến hình theo thuật tốn định sẵn Nếu bạn muốn điều khiển biến hình này, Flash cung cấp cho bạn cơng cụ Shape Hint

Shape Hint điểm điều khiển sử dụng Shape Tween Để sử dụng chức này, bạn cần tạo Shape Tween cho đối tượng, sau vào menu Modify > Shape > Add Shape Hint (phím tắt Ctrl+Shift+H) Shape Hint xuất theo cặp: điểm Frame TimeLine Tween điểm Frame cuối Các Shape Hint đánh số a, b, c… Bạn quan sát hai hình vẽ sau

Hình 4.13 – Các cặp Shape Hint Frame đầu (trái) Frame cuối (phải) Khi sử dụng Shape Hint, điểm cặp (cùng số) tạo biến hình tương ứng, ln đảm bảo điểm cặp Frame thứ chuyển thành điểm cặp Frame cuối (điểm a hình bên trái biến thành điểm a hình bên phải, tương tự điểm b c)

Bằng cách bổ sung Shape Hint này, bạn điều khiển chuyển động đối tượng

Để gỡ bỏ Shape Hint, bạn việc chọn nó, kích chuột phải chọn Remove Hint

4.4 Motion Tween

Hình 4.14 – Kĩ thuật Motion Tween

Nếu so sánh với kĩ thuật Frame by Frame Classic Tween, bạn nên biết rằng, với kĩ thuật Motion Tween, bạn tối ưu kích thước file Flash xuất Với Motion Tween, bạn cịn hiệu chỉnh đường dịch chuyển, tọa độ, góc xoay, Filter, Blending… Nhờ vào cơng cụ Selection thuộc tính bảng Motion Editor

Các bước sử dụng Motion Tween để tạo hiệu ứng động

Trong ví dụ này, ta tạo hiệu ứng chuyển động theo hình cánh cung cho đối tượng vẽ Trong hình minh họa, đường màu xanh minh họa cho đường chuyển động đối tượng

Bước 1 Dùng cơng cụ Brush vẽ hình ảnh khung sáng tác.

Bước 2 Bấm vào cơng cụ Selection, nhấp chọn đối tượng vừa vẽ Kích chuột phải chọn Create Motion Tween Flash tự động tạo khoảng Frame mặc định để tạo chuyển động Nếu số lượng Frame không thỏa mãn nhu cầu xử dụng, bạn thay đổi cách đặt trỏ chuột vào vị trí cuối cùng vùng Frame đánh dấu Khi trỏ chuột có dạng , bạn nhấp chuột kéo sang trái sang phải

Bước Di chuyển hình vẽ sang vị trí Khi đó, bạn thấy khung sáng tác xuất mô tả chuyển động đối tượng (thanh màu xanh trong hình minh họa) Bạn sử dụng cơng cụ Selection để thay đổi dạng

CHƯƠNG TẠO HOẠT CẢNH

- 73 -

Hiệu chỉnh chuyển động hiệu ứng nâng cao với Motion Editor

Đây công cụ mạnh mẽ tích hợp với kĩ thuật Motion Tween Để sử dụng chức này, bạn tạo Motion Tween Sau đó, vào Windows>Motion Editor Khi đó, cửa sổ Motion Editor xuất

Hộp thoại Motion Editor chia làm hai phần: phần bên trái phần bên phải Phần bên trái chứa chức thông số liên quan, phần bên phải biểu đồ minh họa Ta hiệu chỉnh hai phần Các nhóm chức Motion Editor mà bạn cần quan tâm là:

- Basic Motion: dịch chuyển vị trí vật không gian ba chiều (theo tọa độ x, tọa độ y góc z)

Hình 4.15 – Bảng thuộc tính Motion Editor

- Transformation: xoay chuyển (skew) theo chiều x, y kéo giãn (scale) theo chiều x, y

- Color Effect: bấm vào biểu tượng dấu cộng để bổ sung vào Có hiệu ứng Alpha, Tint, Brightness Advanced color Nếu muốn loại bỏ, ta việc nhấp vào dấu trừ, chọn hiệu ứng cần xóa

- Filter: tương tự Filter cho văn Ta bổ sung cách bấm vào dấu cộng, loại bỏ cách bấm vào dấu trừ

- Eases: bổ sung thêm hiệu ứng khác Tạo chuyển động nhờ vào Motion Presets

Vùng chức Motion Presets cung cấp cho nhiều hiệu ứng làm sẵn Khi sử dụng hiệu ứng vùng chức này, đối tượng bạn không cần phải chuyển đổi sang biểu tượng Bạn thao tác trực tiếp đối tượng Dĩ nhiên, bạn áp dụng hiệu ứng cho biểu tượng Graphic, Button hay MovieClip

Để minh họa cho vùng chức này, ta xây dựng vài hiệu ứng hoạt hình sau đây:

Hiệu ứng bóng chuyển động: bạn tạo khối cầu dạng 3D hình vẽ Sau đó, bạn bấm chọn đối tượng, bấm tiếp vào khung Motion Presets chọn lựa hiệu ứng chuyển động tương ứng

Hình 4.16 – Chức Motion Presets: chọn hiệu ứng bounce-in-3D Ở ví dụ này, sử dụng loại chuyển động bounce-in-3D Sau chọn lựa hiệu ứng chuyển động, bạn nhấp nút Apply Khi kết hợp với Onion Skin, thấy dạng chuyển động hình minh họa

CHƯƠNG TẠO HOẠT CẢNH

- 75 -

Hình 4.17 – Chức Motion Presets: Motion Path

Hiệu ứng chữ chạy 3D: thông thường, kết thúc phim thời trung cổ, thông tin phim hiển thị theo dạng thức chữ chạy từ lên thu nhỏ dần Chúng ta sử dụng chức Motion Presets để tạo hiệu ứng

Hình 4.18 – Chức Motion Presets: hiệu ứng text-scroll-3D

Bạn nhập đoạn nội dung văn bản, sau chọn hiệu ứng text-scroll-3D vùng chức Motion Presets Nhấp Apply

Bài tập đề nghị: Hãy sử dụng kĩ thuật Tween kết hợp với công cụ tạo hiệu ứng 3D để tạo dựng hiệu ứng Motion Presets để thực hai hiệu ứng nêu trên:

a) Hiệu ứng bóng di chuyển không gian b) Chữ chạy 3D

4.5 Công cụ Bone Bind Công cụ Bone

Với cơng cụ Bone, bạn tạo chuyển động dựa khớp nối Các chuyển động lấy ví dụ khớp xương tay chân, khớp nối cần cẩu, hình rồng uốn lượn, rắn trườn,… Công cụ hữu ích đơn giản Đây công cụ bổ sung vào Adobe Flash CS4 Khi sử dụng công cụ này, ta cần phân biệt trường hợp sau:

- Trường hợp 1: Nếu đối tượng cần tạo khớp nối đối tượng liên tục (hình rắn trườn, rồng lượn…), ta sử dụng công cụ cách trực tiếp

- Trường hợp 2: Nếu đối tượng cần tạo khơng liên tục, cần có khớp nối (như khớp xương, khớp nối cần cẩu…), ta sử dụng công cụ sau convert phần thành biểu tượng

Tiếp theo, ta minh họa cho việc sử dụng công cụ Bone hai trường hợp

 Công cụ Bone trường hợp

- Bước 1 Bạn sử dụng công cụ Pencil Brush để tạo hình rắn. - Bước 2. Bấm chọn cơng cụ Bone, sau vẽ đường khớp nối hình minh họa

- Bước 3 Hãy sử dụng công cụ Selection để kiểm tra mối nối Để tạo hiệu ứng động, bạn nhấp chọn vào Frame (ví dụ Frame 20), nhấn phím F6 Cơ chế làm việc tự động công cụ Bone giúp tạo chuyển động nếu bạn hiệu chỉnh độ cong đối tượng Frame nhờ vào khớp nối Bạn hồn tồn khơng cần sử dụng đến kĩ thuật Tween.

- Bước 4 nhấp tổ hợp Ctrl+Enter để kiểm tra kết

CHƯƠNG TẠO HOẠT CẢNH

- 77 -

Hình 4.19 – Cơng cụ Bone trường hợp

 Công cụ Bone trường hợp

- Bước 1 Bạn tạo ba khối hình chữ nhật (tượng trưng cho phần cần cẩu) sau convert chúng thành đối tượng Graphic.

- Bước 2. Bấm chọn công cụ Bone, sau vẽ đường khớp nối hình minh họa

- Bước 3 Hãy sử dụng công cụ Selection để kiểm tra mối nối Chọn Frame 20, nhấn phím F6, sau thay đổi hình dạng cần cẩu cách điều chỉnh các mối nối

- Bước Nhấn tổ hợp Ctrl+Enter để kiểm tra

Nếu bạn gặp khó khăn việc điều khiển phận cần cẩu này, bạn dành chút thời gian để tìm hiểu thuộc tính đoạn nối cơng cụ Bone

Bảng thuộc tính đoạn nối công cụ Bone

Khi bạn nhấp chuột vào đoạn thẳng nối mối nối, bảng thuộc tính Properties thơng số hình 52

- Location: Position X Y (tọa độ nối), Length (độ dài nối), Angle (góc nghiêng nối), Speech (tốc độ xoay nối) - Joint Rotation: cho phép khơng cho phép nối xoay – tương ứng với Enable chọn hay không chọn

- Rotation Constrain: cho phép mối nối gốc nối dịch chuyển vùng từ Min đến Max

- Joint x Translation Joint y Translation: cho phép nối dịch chuyển theo chiều x hay chiều y Thuộc tính constraint cho hai trường

hợp hồn tồn tương tự thuộc tính constraint Rotation

- Spring: chức IK Bone, có hai thuộc tính Strength (số lượng Spring Khi giá trị lớn 0, khung sườn phản ứng lại với chuyển động vật lý có tỷ lệ thuận giá trị Strength chuyển động tổng thể) Damping (giá trị đề kháng Strength) Tùy chọn ảnh hưởng đến độ tắt dần chuyển động, xác định khoảng thời gian chhuyển động ban đầu thời gian IK Bone trở lại vị trí dừng nó) Đây tính cơng cụ phiên Flash CS5 này, mà Adobe bổ sung vào

Công cụ Bind

Công cụ phải dùng kết hợp với công cụ Bone Khi sử dụng công cụ Bone trường hợp 1, ta kết hợp với cơng cụ Bind Với cơng cụ Bind, bạn ép buộc nối phụ thuộc lẫn Khi sử dụng công cụ Bind, bấm vào nối, bốn điểm điều khiển nối (trong hình minh họa

Hình 4.21 – Bảng thuộc tính mối nối tạo công cụ Bone

Hình 4.22 – Thuộc tính Constrain

CHƯƠNG TẠO HOẠT CẢNH

- 79 -

Tương ứng với điểm điều khiển viền phần đối tượng điều khiển nối Để cho mối nối liên kết với mối nối khác, ta sử dụng công cụ Bind, bấm chọn nút điều khiển kéo thả vào vị trí nối khác (thanh nối mà điểm phụ thuộc vào)

4.6 Cơng cụ Deco

Là cơng cụ trang trí nghệ thuật Với cơng cụ này, ta có ba hiệu ứng tùy chọn: Vine Fill, Grid Fill, Symmetry Brush, 3D Brush, Building Brush, Decorated Brush, Fire Animation, Flame Brush, Flower Brush, Lightning Brush, Particle System, Smoke Animation Tree Brush

Hiệu ứng Vine Fill

Tạo hiệu ứng nghệ thuật dạng nho Khi bấm chọn dạng biểu tượng này, xuất bảng thuộc tính sau

• Leaf: biểu tượng tương ứng với biểu tượng Nếu bạn muốn thay đổi, bạn việc nhấp vào Edit chọn dạng symbol tương ứng Nếu bạn muốn đổi màu lá, bạn nhấp vào biểu tượng Color tương ứng với Leaf Nếu muốn sử dụng hình mặc định, bạn bấm chọn Default Shape

Hình 4.24 – Cơng cụ Deco với hiệu ứng Vine Fill

• Flower: hồn tồn tương tự tương ứng với biểu tượng hoa Nếu bạn muốn thay đổi màu hoa, bạn nhấp vào biểu tượng Color tương ứng với Flower Nếu muốn sử dụng hình mặc định, bạn bấm chọn Default Shape • Advanced Option: Branch Angle (góc xoay cành nho), Color (màu

của cành nho), Pattern Scale (kéo giãn mẫu cành nho) Segment Length (độ dài cành nho)

Hiệu ứng Grid Fill

Khi bấm chọn hiệu ứng Grid Fill, bảng thuộc tính có thuộc tính sau: • Fill: nhấp chọn edit để thay đổi biểu tượng Bấm vào biểu tượng color để

đổi màu cho biểu tượng Bấm vào Default Shape để chọn hình mặc định • Advanced Options: Horizontal Spacing (khoảng cách theo chiều ngang),

Vertical Spacing (khoảng cách theo chiều dọc) Pattern Scale (độ phóng to biểu tượng)

CHƯƠNG TẠO HOẠT CẢNH

- 81 -

Khi bấm chọn hiệu ứng Symmetry Brush, bảng thuộc tính thuộc tính sau đây:

• Module: bấm edit để thay đổi biểu tượng Bấm color để đổi màu cho biểu tượng Chọn Default Shape để chọn hình mặc định

• Advanced Options: Reflect Across Line (tạo cặp điểm đối xứng qua đường chuẩn), Reflect Across Point (tạo cặp điểm đối tứng qua điểm chuẩn), Rotate Around (tạo điểm dạng vòng), Grid Translation (tạo mảng điểm)

• Test Collisions: cho phép tránh tượng biểu tượng va chạm vào

Hiệu ứng 3D Brush

Hiệu ứng 3D Brush sử dụng để tạo kiểu phối màu từ nhiều đối tượng Mỗi thao tác phun màu hiệu ứng cần sử dụng tối đa đối tượng

Hình 4.27 – Công cụ Deco với hiệu ứng 3D Brush

Với hiệu ứng này, đối tượng phun theo hiệu ứng 3D (đối tượng gần, biểu tượng xa…) Để thay đổi đối tượng, bạn việc nhấp vào nút Edit, chọn đối tượng khác để thay Các đối tượng để thay phải biểu tượng Flash (movieclip, button graphic) Các tính mục Drawing Effect hồn tồn tương tự hiệu ứng Vine Grid

Trong mục Advanced Options có tùy chọn sau đây:

• Max objects: số lượng đối tượng tạo cực đại lần phun • Spray area: vùng phun (tính theo pixel)

• Distance scale: độ kéo giãn theo khoảng cách (độ phóng to – zoom)

• Random scale range: Tỉ lệ kéo giãn ngẫu nhiên (bao nhiêu số biểu tượng chịu tác động độ kéo giãn ngẫu nhiên)

• Random rotation range: tạo góc quay ngẫu nhiên cho biểu tượng Hiệu ứng Building Brush

Với hiệu ứng Building Brush, bạn tạo dựng tịa nhà cao tầng Cơng cụ hữu ích tác vụ muốn xây dựng đô thị sầm uất

Hình 4.28 – Cơng cụ Deco với hiệu ứng Building Brush Trong mục Advanced Options, có hai chức năng:

• Tùy chọn thả xuống: cho phép bạn lựa chọn mẫu nhà cao tầng Bạn có lựa chọn mẫu nhà cao tầng – skyscraper 1, skyscraper 2, skyscraper skyscraper Nếu bạn muốn tạo mẫu nhà ngẫu nhiên, bạn chọn Radom Building

• Building size: kích thước (theo chiều ngang) tòa nhà

Khi xây dựng tịa nhà, bạn cần lưu ý: sau chọn cơng cụ Deco chọn mẫu nhà, bạn nhấp chuột kéo dọc theo hướng lên phía Nếu độ cao tòa nhà phù hợp, bạn thả chuột

CHƯƠNG TẠO HOẠT CẢNH

- 83 - Hiệu ứng Decorated Brush

Với cơng cụ Decorated Brush, bạn tạo đường viền nghệ thuật theo mẫu cung cấp sẵn

Hình 4.29 – Cơng cụ Deco với hiệu ứng Decorated Brush Trong mục tùy chọn Advanced Option, bạn có tùy chọn:

• Tùy chọn thả xuống: có 20 dạng nghệ thuật đường viền cho bạn chọn lựa • Pattern color: chọn màu cho đường viền nghệ thuật

• Pattern size: kích thước biểu tượng nghệ thuật • Pattern width: độ rộng biểu tượng nghệ thuật Hiệu ứng Fire Animation

Hiệu ứng Fire Animation tạo lửa cháy sáng Nó hữu dụng tác vụ cần tạo dựng lửa

Đối với hiệu ứng này, mục Advanced Options có tùy chọn sau: • Fire size: kích thước lửa

• Fire speech: tốc độ cháy lửa

• Fire duration: hiệu ứng động lửa diễn frame Bạn thấy số keyframe hiển thị TimeLine Nhưng điều trường hợp tùy chọn End Animation không chọn

• End Animation: lửa tàn dần (nếu chọn), diễn tiến mãi (nếu không chọn)

• Fire spark: số lửa

Hình 4.30 – Cơng cụ Deco với hiệu ứng Fire Animation

Thông thường, tạo dựng hoạt cảnh có sử dụng đến lửa, bạn nên kết hợp với hiệu ứng tạo khói (Smoke Animation) mà tìm hiểu phần

CHƯƠNG TẠO HOẠT CẢNH

- 85 -

Hiệu ứng giúp tạo dựng phun màu theo hình dáng lửa Trong mục Advanced Options có tùy chọn:

• Flame size: kích thước lửa • Flame color: màu lửa

Hiệu ứng tương đối đơn giản Nó khơng có nhiều ứng dụng dự án thiết kế phim hoạt hình

Hiệu ứng Flower Brush

Hiệu ứng thật thú vị Nhờ vào nó, tạo cành hoa Với mục Advanced Options, ta có tùy chọn sau:

• Tùy chọn thả xuống: cho phép bạn chọn lựa loại hoa sau: Garden Flower, Rose, PoinSettia Berry

• Flower color: màu cho hoa • Flower size: kích thước hoa • Leaf color: màu cho

• Leaf size: kích thước

Hình 4.32 – Cơng cụ Deco với hiệu ứng Flower Brush • Fruit color: màu

• Tùy chọn branch: cho phép hiển thị cành hay khơng Nếu tùy chọn kích hoạt, bạn chọn hiệu ứng

• Branch color: màu cành Hiệu ứng Lightning Brush

Với mục Advanced Options, bạn có tùy chọn sau đây: • Lightning color: màu tia sáng

• Lightning scale: độ kéo giãn tia sáng

• Tùy chọn Animation: muốn tạo hiệu ứng động cho tia sáng • Beam width: độ rộng tia sáng

• Complexity: độ rối (độ phức tạp) chùm tia sáng

CHƯƠNG TẠO HOẠT CẢNH

- 87 -

Hiệu ứng tạo chùm hạt phóng từ nguồn phát Bạn thấy hữu ích nhiều tác vụ: phun bong bóng nước, phun hạt bụi…

Mục Drawing Effect có hai tùy chọn cho loại hạt Bạn thay đổi chúng hiệu ứng vine, grid 3D brush

Mục Advanced options có tùy chọn sau:

• Total length: diễn tiến hành động frame

• Particle generation: nguồn phát hạt diễn frame • Rate per frame: tốc độ frame

• Life span: hạt có thời gian tồn frame • Initial speech: tốc độ khởi tạo

• Initial size: kích thước khởi tạo

• Min initial direction: góc phun nhỏ • Max initial direction: góc phun lớn • Gravity: trọng lượng hạt

• Rotation rate: tốc độ quay vòng hạt Hiệu ứng Smoke Animation

Hiệu ứng tương tự với hiệu ứng Fire Animation Nó dùng để tạo hiệu ứng bóc khói Thường hiệu ứng sử dụng kết hợp với hiệu ứng Fire Animation

Hình 4.35 – Cơng cụ Deco với hiệu ứng Smoke Animation Trong mục Advanced options có tùy chọn sau đây:

• Smoke duration: diễn tiến hiệu ứng khói frame Cũng tương tự Fire Animation, số keyframe Timeline giá trị Smoke duration trường hợp tùy chọn End Animation khơng chọn

• End Animation: hiệu ứng khói bốc lên tan biến vào khơng khí (nếu tùy chọn chọn) khơng tan biến vào khơng khí (trong trường hợp tùy chọn khơng chọn)

• Smoke color: màu khói

• Background color: màu khói khói dần tan vào khơng khí Hiệu ứng Tree Brush

Hiệu ứng sử dụng để tạo loại khác Flash cung cấp cho ta nhiều dạng để sử dụng

Hình 4.36 – Công cụ Deco với hiệu ứng Tree Brush Trong mục Advanced options có tùy chọn sau đây:

• Tùy chọn thả xuống: cho phép bạn chọn lựa loại Flash cung cấp sẵn cho 20 loại khác

• Tree scale: độ kéo giãn • Branch color: màu cành • Leaf color: màu

• Flower/Fruit color: màu hoa

CHƯƠNG TẠO HOẠT CẢNH

- 89 -

phiên để đơn giản hóa cơng việc thiết kế cho người dùng, để mở rộng phạm vi đối tượng sử dụng – không dành cho người dùng chuyên nghiệp mà hướng đến người dùng phổ thông

4.7 Công cụ 3D Translation 3D Rotation Công cụ 3D Translation

Cơng cụ cho phép tạo chuyển động 3D cho đối tượng Như ta thảo luận trên, công cụ hoạt động đối tượng tạo Motion Tween

Ví dụ sau minh họa cho việc sử dụng cơng cụ 3D Translation Trong ví dụ này, ta tạo mặt phẳng cho phép chuyển động không gian chiều Để làm điều này, thao tác theo bước sau đây:

- Bước 1 Trên Layer 1, bạn hình bình hành (sử dụng cơng cụ hình chữ nhật công cụ Free Transform) để tượng trưng cho mặt phẳng Layer bạn tạo hệ tọa độ Descartes chiều hình minh họa

- Bước 2. Chọn hình bình hành, kích chuột phải chọn Create Motion Tween Sau đó, bấm chọn cơng cụ 3D Translation Bạn sử dụng công cụ để di chuyển mặt phẳng theo chiều x (trục ngang), y (trục đứng) z (điểm chấm trung tâm)

- Bước Để đảm bảo trục tọa độ mà ta tạo tồn song song với layer của mặt phẳng, ta hay chọn Frame TimeLine tương ứng với Frame cuối TimeLine mặt phẳng Sau nhấn phím F5

- Bước Nhấn tổ hợp Ctrl+Enter để kiểm tra kết quả. Công cụ 3D Rotation

Cơng cụ cho phép xoay chuyển 3D cho đối tượng Như ta thảo luận trên, công cụ hoạt động đối tượng tạo Motion Tween

Bạn thao tác hồn tồn tương tự ví dụ sau Nhưng đây, mặt phẳng xoay chuyển 3D không gian Để làm điều này, thao tác theo bước sau đây:

- Bước 1 Trên Layer 1, bạn hình bình hành (sử dụng cơng cụ hình chữ nhật cơng cụ Free Transform) để tượng trưng cho mặt phẳng Layer bạn tạo hệ tọa độ Descartes chiều hình minh họa

CHƯƠNG TẠO HOẠT CẢNH

- 91 -

- Bước Để đảm bảo trục tọa độ mà ta tạo tồn song song với layer của mặt phẳng, ta hay chọn Frame TimeLine tương ứng với Frame cuối TimeLine mặt phẳng Sau nhấn phím F5

TỔNG KẾT CHƯƠNG

Trong chương này, tìm hiểu cách tạo chuyển động cho đối tượng Ở đây, tìm hiểu kĩ thuật Frame by Frame, kĩ thuật Tween, công cụ tạo hoạt Bone, Bind, 3D, Deco

Kĩ thuật Frame by Frame cũ, hữu ích nhiều tác vụ Kĩ thuật Tween chia làm ba loại: Classic Tween, Motion Tween Shape Tween Mỗi cơng cụ có nét đặc trưng riêng Classic Tween Motion Tween có nhiều điểm tương đồng, chúng lúc thay cho nhau: Classic Tween hỗ trợ Action Frame cịn Motion Tween khơng; Motion Tween khơng cần tạo KeyFrame nên đơn giản hơn, hiệu Classic Tween; Motion Tween hỗ trợ hiệu ứng 3D cịn Classic Tween khơng

CHƯƠNG TẠO HOẠT CẢNH

- 93 -

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

ActionScript ngơn ngữ lập trình hướng đối tượng dùng để phát triển ứng dụng nhờ vào Adobe Flash Player Adobe AIR Ngôn ngữ lập trình ActionScript biên dịch bởi:

- Adobe Flex Builder - Adobe Flash Professional

- Command Line nhờ vào SDK

Cũng tương tự Java, sau biên dịch, ActionScript chuyển thành dạng bytecode mà có máy ảo ActionScript (AVM) hiểu Máy ảo ActionScript tích hợp bên Flash Player, Flash Plugin Adobe AIR

Ngơn ngữ lập trình ActionScript (AS) ngơn ngữ có cú pháp kết hợp Java Delphi (cú pháp từ khóa giống Java, cách khai báo giống Delphi) Nếu bạn làm quen với ngôn ngữ lập trình Java, làm quen với ngơn ngữ lập trình ActionScript, bạn cảm thấy đơn giản nhiều Các toán tử, câu lệnh tương tự Java Một điều đặc biệt, lớp ActionScript có cú pháp khai báo cách sử dụng giống với Java Dường Adobe thiết kế nên ngôn ngữ ActionScript theo chuẩn Java để tạo nên đơn giản quen thuộc với đa số người dùng

Bạn cần lưu ý rằng, thảo luận phiên 3.0 AS Đây phiên thời điểm AS ngôn ngữ hướng đối tượng Delphi (hay C++), nghĩa không tuyệt giao với lập trình hướng thủ tục (bằng chứng ta viết hàm bên ngồi lớp) AS ngơn ngữ phân biệt chữ hoa chữ thường

Một ví dụ kinh điển học ngơn ngữ lập trình ví dụ “Hello, world !” (xem hình 5.1) Thơng qua ví dụ kinh điển này, có nhìn tổng quan ngơn ngữ ActionScript

Bạn quan sát ví dụ minh họa viết ngôn ngữ lập trình ActionScript Bạn cần lưu ý rằng, đoạn chương trình viết bên ngồi lớp (thể tính lưỡng cực hướng đối tượng hướng thủ tục) Trong ví dụ này, bạn thấy nhiều điểm tương đồng AS với Java là: dấu comment (// - comment dòng /**/ - comment nhiều dòng), cách viết nội dung hàm (nằm cặp dấu {}) có khái niệm hàm (trả kiểu liệu không trả kiểu liệu)

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 95 -

Hình 5.1 – Giao diện ActionScript

Một điểm khác biệt AS so với Java Delphi chương trình nằm tự vùng soạn thảo (không giống Java phải hàm main, Delphi begin end) Nó nằm trước hay sau hàm khai báo Để quy ước trật tự sử dụng, ta sử dụng cú pháp (lệnh trước thực trước, lệnh sau thực sau) – nghĩa phần chương trình ln nằm phía sau ta đánh dấu dịng comment /*Chương trình chính*/

Bạn cần lưu ý rằng, AS ngôn ngữ kịch (scripting language), nên mang nhiều đặc trưng ngơn ngữ kịch Các câu lệnh nằm tự do, không thiết phải đặt hàm cụ thể nào, đặt trưng dễ nhận thấy ngôn ngữ kịch (như JavaScript, Jscript…)

Chúng ta tìm thấy nhiều điểm tương đồng khác biệt AS so với hai ngôn ngữ Java Delphi (nếu bạn tưng làm quen với hai ngôn ngữ này) Chúng ta tìm hiểu cú pháp ngơn ngữ lập trình AS Xin nhắc lại phiên ActionScipt mà ta thảo luận ACTIONSCRIPT 3.0 5.1 Các kiểu liệu

Có hai dạng số nguyên hỗ trợ AS kiểu số nguyên có dấu int số nguyên không dấu uint Cả hai loại số nguyên điều chiếm 4byte, nghĩa vùng giá trị int -231 đến 231-1 giá trị uint 0…232-1 Bạn lưu ý

rằng, kiểu liệu, có kiểu số ngun có chữ viết thường

b Kiểu số thực

Số thực dấu chấm động theo chuẩn IEEE-754 Số thực AS chiếm 32 bit Từ khóa khai báo Number Bạn lưu ý Number viết hoa chữ

c Kiểu Boolean

Kiểu Boolean AS có hai giá trị true false Bạn lưu ý Boolean viết hoa chữ đầu tiên, true false viết thường chữ

d Kiểu xâu String

Xâu kí tự đánh dấu từ Phần tử cuối xâu có số xâu.lengh-1 Kiểu xâu khai báo nhờ từ khóa String Bạn cần lưu ý String viết hoa chữ

e Kiểu mảng Array

Việc đánh dấu Array hoàn toàn tương tự String Kiểu Array viết hoa chữ

f Kiểu đối tượng Object

Tương tự kiểu Struct C Nhưng mềm dẻo nhiều Chúng ta thấy rõ điều qua chương trình giáo trình

 Để xử lý liệu liên quan đến kiểu liệu nguyên thủy ta phải

làm việc với lớp đối tượng tương ứng: kiểu int uint với lớp int uint, kiểu Number với lớp Number, kiểu String với lớp String, kiểu Array với lớp Array kiểu đối tượng Object Chi tiết phương thức xử lý lớp ta thảo luận sau tìm hiểu lớp AS

5.2 Biến Hằng

a Biến: có giá trị thay đổi Khi khai báo biến ta khai báo theo cú pháp sau:

var tên_biến:Kiểu_Dữ_Liệu [= giá_trị_khởi_tạo];

Khi khai báo biến, bạn phải sử dụng từ khóa var Ta lấy vài ví dụ khai báo biến AS

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 97 - var s:String = “Hello”;

var s:String = new String(“Hello”); var s:String = String(“Hello”); //Kết thúc tính tương đương

//Các dịng khai báo sau tương đương var ar:Array = new Array(“a”, “b”); var ar:Array = new Array(3);

//Kết thúc tương đương

var myAssocArray:Object = {fname:"John", lname:"Public"}; trace(myAssocArray.fname); // John

trace(myAssocArray["lname"]); // Public myAssocArray.initial = "Q";

trace(myAssocArray.initial); // Q

Bạn khởi tạo giá trị cho biến thời điểm khai báo biến khai báo biến khởi tạo giá trị cho biến sau

b Hằng: có giá trị khơng thay đổi Trong AS, để khai báo ta thay từ khóa var trong khai báo biến từ khóa const Bạn lưu ý khai báo bạn cần phải bổ sung giá trị cho Nghĩa cú pháp khai báo phải tuân theo quy tắc sau

const tên_hằng:Kiểu_Dữ_Liệu = giá_trị_khởi_tạo;

Bạn lưu ý rằng, giá trị khởi tạo không giống trường hợp khởi tạo cho biến có khơng, bắt buộc phải có

Các bạn quan sát khai báo sau const a:int = 1;

const s:String = “abc”;

5.3 Toán tử Biểu thức

Toán tử phép toán sử dụng AS Các giá trị sử dụng cho toán tử gọi toán hạng Biểu thức là tập hợp toán tử toán hạng xếp theo trật tự có ý nghĩa

Toán tử gán

Toán tử gán dùng để gán giá trị cho biến Ví dụ a = 5;

a = b + 2; Giá trị a giá trị b cộng thêm a = a + 1; Tăng giá trị a lên

a = b = c = 5;

Gán đồng thời nhiều giá trị Nó tương ứng với tập lệnh sau:

c = 5; b = c; a = b;

Toán tử thực phép tốn số học

Ngơn ngữ lập trình AS hỗ trợ tốn tử số học sau Toán tử Ý nghĩa

+ Phép cộng - Phép trừ * Phép nhân

/ Phép chia (chia nguyên số nguyên) % Chia lấy dư (chỉ với số nguyên)

Bạn lưu ý rằng, phép chia thực số nguyên số thực Nếu thực phép chia hai số ngun kết phép chia lấy phần ngun Cịn thực hai số thực, kết phép chia bình thường Như vậy, theo mặc định, hai số nguyên (hoặc thực) thực phép toán tương ứng trả kết ngun (hoặc thực) Nếu phép toán thực số nguyên số thực, tự động chuyển đổi kiểu cao (thành số thực) Vậy làm để thực phép chia cho 2, ta muốn nhận kết 1.5 Ta biết hai số nguyên, ta thực phép chia 3/2 ta thu số nguyên – kết phép chia nguyên 3/2, tức Muốn thu kết 1.5, bạn cần chuyển đổi dạng số thực cách sau:

• Khai báo số thực (bằng cách quy định kiểu liệu a:Number = 3, b:Number = 3.0, 2.0)

• Chuyển đổi kiểu liệu (Xem thêm phần toán tử chuyển đổi kiểu liệu) Toán tử logic

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 99 - Tốn tử &&

Phép tốn hai ngơi a&&b

true true true

true false false

false true false

false false false

Toán tử ||

Phép tốn hai ngơi

a||b

true true true

true false true

false true true

false false false

Toán tử dịch bit

Các toán tử sử dụng đến tính tốn số ngun cách sử dụng bit

Toán tử Tên gọi Ví dụ

& Phép “Và” bit 2&3=2

210=102

310=112

210=102

| Phép “hoặc” bit 2|3=3

210=102

310=112

310=112

^ Phép “hoặc loại”

bit 2^3=1

210=102

310=112

110=012

<< Dịch trái bit 2<<3=16 2*23=2*8=16 >> Dịch phải bit 2>>3=0 2/23=2/8=0

~ Phủ định bit ~2=1 210=102

110=012

Các toán tử bit, hoăc bit, loại bit phủ định bit tính sau: chuyển đổi số thập phân sang nhị phân tương ứng, sau sử dụng phép toán tương ứng cho bit theo vị trí Ví dụ 210=102, 310=112 ta thực phép toán tương ứng với bit Bit thứ

rằng phép tốn tuyển loại có chân trị hai bit tương ứng khác nhau, giống tương ứng 0(1^1=0^0=0, 1^0=0^1=1)

Các tốn tử << >> tính sau: a<<b=a*2b a>>b=a/2b Toán tử gán hợp

Khi muốn thay đổi giá trị biến, sử dụng cách viết thơng thường, nhiên AS hỗ trợ toán tử viết tắt

Tốn tử Ví dụ Ý nghĩa Phạm vi

+= a+=b a=a+b Phép toán số học

-= a-=b a=a-b Phép toán số học

*= a*=b a=a*b Phép toán số học

/= a/=b a=a/b Phép toán số học

%= a%=b a=a%b Phép toán số học

&= a&=b a=a&b Phép toán bit

|= a|=b a=a|b Phép toán bit

^= a^=b a=a^b Phép toán bit

>>= a>>=b a=a>>b Phép toán bit <<= a<<=b a=a<<b Phép toán bit Toán tử tăng giảm

Một cách viết thu gọn nữa, sử dụng tốn tử tăng giảm Nếu biểu thức a+=b, với b = ta viết thành a++ Tương tự, a-=b, b = ta viết a

Chúng ta lưu ý rằng, tốn tử có chút khác biệt Nó nằm trước nằm sau tốn hạng Có nghĩa có a++ ++a (tương ứng a a)

Phép toán Ý nghĩa

a++; Thực phép tốn trước, sau thực tốn tử ++a; Thực tốn tử trước, sau thực phép toán a ; Tương tự a++;

a; Tương tự ++a;

Ví dụ Cách thực thi

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 101 - b:int = 1;

a+=b++;

a+=++b;

a = 1, b =

Thực phép toán a+=b trước, sau thực phép tốn b++ Tức a=2, b=2

Thực phép tốn ++b trước, sau thực phép toán a+=b Tức b=3, a=5

Toán tử so sánh

Để thực việc so sánh giá trị hai biến, biểu thức; ta sử dụng tốn tử so sánh Giá trị phép toán so sánh trả kiểu bool

Toán tử Tên gọi Giá trị biểu thức “a Toán tử b”

Đúng Sai

== Bằng Nếu a b Nếu a khác b

!= Khác Nếu a khác b Nếu a b

> Lớn Nếu a lớn b Nếu a nhỏ b

< Bé Nếu a nhỏ b Nếu a lớn b

>= Lớn Nếu a lớn b

Nếu a nhỏ b <= Bé Nếu a nhỏ

bằng b Nếu a lớn b

Bạn cẩn thận sử dụng toán tử so sánh Hãy ý toán tử so sánh ==, khác với toán tử gán =

Toán tử điều kiện

Toán tử điều kiện có dạng cú pháp sau:

điều_kiện?kết_quả_1:kết_quả_2;

Kết trả giá trị kết_quả_1 điều_kiện đúng, ngược lại, điều_kiện sai, trả giá trị kết_quả_2

a:int = 1; b:int = 2; c:int;

c = (a>b)?a:b; trace(c);

2

Toán tử phân tách

Tốn tử kí hiệu dấu phẩy Nó dùng để phân tách hai hay nhiều biểu thức chứa biểu thức tương ứng

Ví dụ Kết

a:int; b:int; c:int;

c = (a=1, b=2, a+b); trace(c);

3

Toán tử chuyển đổi kiểu liệu

Toán tử dùng để chuyển đổi biến hay thuộc kiểu liệu sang kiểu liệu khác Giả sử bạn có biến int a = 3, int b = Khi thực phép chia để nhận kết thực, bạn cần viết sau: (Number)3/2 Bạn phải lưu ý số bị chuyển thành kiểu thực, việc thực phép chia số thực cho số nguyên trả kiểu thực 1.5 Nếu bạn viết 3/(float)2, kết tương tự Trong C, bạn viết (float)(3/2) kết lại khác Sở dĩ vì, thực phép chia nguyên 3/2 (kết 1), sau chuyển giá trị nguyên sang thực Nhưng với AS kết tương tự hai trường hợp

Cách biểu diễn chuyển đổi biến thuộc kiểu liệu này, sang kiểu khác thực kiểu chúng tương đương Bạn chuyển số thành số (sau học hướng đối tượng, bạn chuyển đối tượng tương đương) Bạn chuyển đổi từ số thành xâu, hay ngược lại Khi chuyển đổi, bạn sử dụng cú pháp sau: (kiểu_dữ_liệu)biến hoặc (kiểu_dữ_liệu)(biến) kiểu_dữ_liệu(biến)

Thứ tự ưu tiên toán tử

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 103 -

biểu thức phức tạp, bạn nên ý đến độ ưu tiên toán tử, điều dễ gây sai sót Trong bảng sau đây, chúng tơi xin đưa thứ tự ưu tiên toán tử lập trình AS

Mức ưu tiên Tốn tử Độ ưu tiên loại

1 :: Trái-sang-phải

2 () [] -> ++ (hậu tố) dynamic_cast static_cast reinterpret_cast const_cast typeid

Trái-sang-phải ++ (tiền tố) ~ ! sizeof new delete Phải-sang-trái

* &

+ - (dấu dương âm)

4 (type) (chuyển đổi kiểu) Phải-sang-trái

5 * ->* Trái-sang-phải

6 * / % Trái-sang-phải

7 + - (phép tốn cơng, trừ) Trái-sang-phải

8 << >> Trái-sang-phải

9 < > <= >= Trái-sang-phải

10 == != Trái-sang-phải

11 & Trái-sang-phải

12 ^ Trái-sang-phải

13 | Trái-sang-phải

14 && Trái-sang-phải

15 || Trái-sang-phải

16 ?: Phải-sang-trái

17 = *= /= %= += -= >>= <<= &= ^= |= Phải-sang-trái

18 , Trái-sang-phải

Các toán tử thực theo mức ưu tiên từ xuống Nếu tốn tử mức, thực theo độ ưu tiên loại

5.4 Các cấu trúc lệnh điều khiển 5.4.1 Câu lệnh if

Cú pháp

Thực lệnh 1; }else{

//biểu thức điều kiện sai Thực lệnh 1; }

Ví dụ

Ví dụ Kết

var a:int = 5;

if ((a%2==0)&&(a>0)){

trace(a+” số dương chẵn”); }else{

//biểu thức điều kiện sai

trace(a+” không số dương chẵn”); }

5 không số dương chẵn

Bạn lưu ý câu lệnh if lồng vào nhau, nghĩa bên câu lệnh if cịn chứa câu lệnh if khác Đây tình thường gặp

5.4.2 Câu lệnh switch Cú pháp

switch(tên_biến){ case giá_trị_1: Lệnh 1; break; …

case giá_trị_(n-1): Lệnh n-1;

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 105 -

Ví dụ Kết

var a:int = 2; switch(a){ case 0:

trace(“Số Không”); break;

case 1:

trace(“Số Một”); break;

default:

trace(“Không biết”); }

Không biết

5.4.3 Các câu lệnh lặp for, while do…while

Ngôn ngữ AS cung cấp cho ba dạng vòng lặp for: for, for…in for each…in

a Câu lệnh lặp for Cú pháp

for(var i:int = bt_khởi_tạo; bt_giới_hạn; bt_tăng){ Lệnh;

} Ví dụ

Ví dụ Kết

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

}

0

b Câu lệnh lặp for…in Cú pháp

} Ví dụ

Ví dụ Kết

var items:Array = new Array(1, 2, 3); for(var index in items){

trace(items[index]); }

1

Trong câu lệnh for…in này, biến index số Nó khai báo trực tiếp vòng lặp for – điểm đặt biệt vòng lặp for

c Câu lệnh lặp for each…in Cú pháp

for each(var item in Mảng){ Lệnh;

} Ví dụ

Ví dụ Kết

var items:Array = new Array(1, 2, 3); for each (var item in items){

trace(item); }

1

Khác với câu lệnh for…in, biến item câu lệnh for each…in phần tử mảng số trường hợp Nó khai báo trực tiếp vòng lặp for

d Câu lệnh lặp while

Nếu biểu thức điều kiện lặp lại trình thực thi lệnh Nghĩa câu lệnh while kiểm tra biểu thức điều kiện trước thực lệnh Nếu biểu thức điều kiện sai từ đầu lệnh khơng thực

Cú pháp

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 107 - Ví dụ

Ví dụ Kết

var i:int = 3; while (i>0){ trace(i); i ; }

e Câu lệnh lặp do…while

Thực lệnh, sau kiểm tra biểu thức điều kiện, biểu thức điều kiện lệnh tiếp tục thực Khác với lệnh while, lệnh do…while lệnh bên thực lần

Cú pháp do{ Lệnh;

} while(biểu_thức_điều_kiện); Ví dụ

Ví dụ Kết

var i:int = 3; do{

trace(i); i ;

} while (i>0);

3

5.4.4 Các lệnh continue, break return

Lệnh continue: lệnh cho phép nhảy qua vòng lặp thực lệnh

Ví dụ Kết

for (var i:int = 0; i<4; i++){ if(i%2==0) continue; else trace(i);

};

Lệnh break: cho phép khỏi vịng lặp

Ví dụ Kết

var i:int = 0; do{

trace(i);

if (i>=5) break; else i++;

} while (true);

0

Lệnh return: trả giá trị cho hàm (nếu return nằm hàm) kết thúc chương trình (nếu lệnh return nằm chương trình chính)

5.5 Hàm

a Khai báo sử dụng Cú pháp

function tên_hàm(ds_tham_số):kiểu_dữ_liệu_trả_về{ thân hàm;

} Ví dụ

Ví dụ Kết

function showMsg():void{ trace(“Hello”);

}

function Add(a:int, b:int):int{ return a+b;

}

showMsg(); trace(Add(1,2));

Hello

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 109 -

Tham trị Tham biến

function noSwap(a:int, b:int):void{ c:int = a;

a = b; b = c; }

a:int = 1; b:int = 2; noSwap(a, b); trace(a+”, “+b); //Kết là: 1,

function Swap(Obj:Object):void{ Obj.a = tempObj.x;

Obj.x = tempObj.y; Obj.y = tempObj.a; }

var myObj:Object = {x:1, y:2}; Swap(myObj);

trace(myObj.x+", "+myObj.y); //Kết là: 2,

c Hàm với tham số mặc định

Ví dụ Kết

function Add(a:int, b:int = 0, c:int = 0):int{ return a+b+c; } trace(Add(1)); trace(Add(1,2)); trace(Add(1,2,3));

Với tham số quy định mặc định, gọi hàm chúng khơng cần xuất tham số hàm, tham số nhận giá trị mặc định mà ta quy ước

d Hàm với số lượng tham số không xác định

Để làm việc với loại hàm chứa tham số dạng này, AS cung cấp cho ta công cụ gọi (rest) tham số

Ví dụ Kết

function Add( args):int{ var sum:int = 0;

for (var i:int = 0; i<args.length;i++) sum+=args[i];

return sum; }

trace(Add(1)); trace(Add(1,2)); trace(Add(1,2,3));

e Kiểu liệu hàm

Bạn khởi gán biến cho hàm khai báo Việc giúp bạn tạo hai hàm có chức giống

Ví dụ Kết

var Cong = function Add(a:int, b:int):int{ return a+b;

}

trace(Cong(1,2));

3

5.6 Lớp Đối tượng 5.6.1 Xây dựng lớp

Hàm xây dựng dựa theo cú pháp sau public class Tên_class{

//Khai báo thuộc tính lớp //Phương thức khởi tạo

//Phương thức getter setter //Các phương thức khác }

Trong đó, class từ khóa bắt buộc dùng để khai báo lớp Một lớp đối tượng bao gồm phương thức thuộc tính Các thuộc tính bao gồm tính chất mơ tả đối tượng Các phương thức giúp đối tượng thực thi hành động Khi khởi tạo đối tượng, thông thường ta xây dựng hàm tạo sử dụng phương thức setter để khởi gán giá trị cho đối tượng Phương thức getter giúp ta nhận giá trị từ thuộc tính đối tượng

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 111 - public class SinhVien{

private var ten:String; private var tuoi:uint;

public function SinhVien(ten:String, tuoi:uint){ this.ten = ten;

this.tuoi = tuoi; }

public function toString():String{

return “Tôi là: “+ten+”, “+tuoi+” tuổi.”; }

}

Trong ví dụ này, bạn lưu ý phương thức thuộc tính khai báo định public, protected private Với từ khóa private thuộc tính phương thức cho phép truy cập phương thức nội lớp Ngược lại, với từ khóa protected phạm vi truy xuất tất lớp package Với public phạm vi truy xuất tất lớp dù hay ngồi package

Với class có từ khóa định sau:

- dynamic: thuộc tính bổ sung vào thể lớp thời điểm runtime

- internal: nhìn thấy package - final: khơng cho phép thừa kế

- public: nhìn thấy đâu Tính thừa kế

AS ngôn ngữ đơn thừa kế, nghĩa lớp thừa kế từ lớp sở Để thể tính thừa kế, AS cung cấp cho ta từ khóa extends Khi thực thi tính kế thừa, lớp sở không chứa hàm tạo chứa hàm tạo mặc định (hàm tạo không đối số)

Ví dụ sau minh họa cho tính thừa kế Lớp Human có hai thuộc tính tên tuổi Lớp SinhVien kế thừa từ lớp Human này, bổ sung thêm thuộc tính ids Phương thức toString lớp SinhVien ghi chồng lên phương thức toString lớp sở Human nhờ từ khóa override

Ví dụ //Lớp sở Human

protected var ten:String; protected var tuoi:uint;

public function toStrings():String{

return "Tôi là: "+ten+", "+tuoi+" tuổi."; }

}

//Lớp thừa kế SinhVien

public class SinhVien extends Human{ private var ids:int;

public function SinhVien(ten:String, tuoi:uint, ids:int) { this.ten = ten;

this.tuoi = tuoi; this.ids = ids; }

override public function toString():String{ return this.ten+", "+this.tuoi+", "+this.ids; }

}

Giao diện interface

Dù tính đơn thừa kế phản ánh với thực tế thực thể, nhiên tính đa thừa kế mang lại cho ta sức mạnh lập trình hướng đối tượng Do vậy, đa số ngơn ngữ lập trình đơn thừa kế khác, AS bổ sung khái niệm giao diện – interface Tuy nhiên, theo định nghĩa giao diện ngơn ngữ lập trình hướng đối tượng khác, lớp abstract hồn hảo (abstract hồn tồn), cịn AS dường ta cần thay đổi khái niệm Sở dĩ vậy, AS khơng hỗ trợ lớp abstract Ta hiểu giao diện AS sau: giao diện lớp chứa khai báo phương thức, khơng chứa thuộc tính Một lớp thừa kế lớp sở, thực thi nhiều giao diện

Ví dụ sau minh họa việc tạo hai giao diện Animal Meo Lớp MeoDen thực thi hai giao diện

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 113 - function Go():void;

function Eat():void; }

//Giao diện Meo public interface Meo {

function Sound():void; }

//Lớp MeoDen thực thi hai giao diện Animal Meo public class MeoDen implements Animal, Meo{

public function MeoDen() { trace("Tôi Mèo đen."); }

public function Go():void{ trace("Tôi !"); }

public function Eat():void{ trace("Tôi ăn !"); }

public function Sound():void{ trace("Tôi kêu !"); }

}

5.6.2 Làm việc với đối tượng a Tạo thể lớp

Khi học lập trình hướng đối tượng, ta biết rằng: thực thể giới thực có hành động tính chất Khi xây dựng lớp để mơ tả thực thể ta dùng phương thức thuộc tính để mơ tả Một đối tượng thể lớp Ví dụ ta có lớp đối tượng SinhVien trên, tạo đối tượng ta sử dụng cú pháp sau

SinhVien sv = new SinhVien();

trường Flash không cho phép biên dịch file ActionScript cách riêng lẽ, file muốn thực thi cần sử dụng bên ActionScript phim Flash Ví dụ, bạn tạo dự án Flash, giả sử bạn đặt tên cho MainPrj.fla Bạn tiếp tục tạo ActionScript 3.0 đặt tên cho SinhVien, sau lưu file lại với tên SinhVien.as Trong file ActionScript này, bạn viết class Bạn quay trở lại với file MainPrj.fla, nhấn F9 để quay trở lại với giao diện viết Action Flash Trong giao diện này, bạn tạo đối tượng Giờ đây, bạn hồn tồn debug phim cách nhấn Ctrl+Enter

Với dự án phức tạp, ta cần tổ chức lớp theo package Để làm điều này, ta tạo thư mục với tên gọi khác (tên chúng tên package) Khi tạo lớp, bạn đặt package với cú pháp sau:

package Tên_Package{ //Khai báo lớp }

Điều giúp bạn quản lý tốt lớp Package hoàn toàn giống namespace NET Khi bạn làm điều này, bạn lưu ý Action Flash, bạn cần import lớp vào để sử dụng nhờ từ khóa import

import Tên_Package.Tên_Lớp; Bạn thử hồn tất ví dụ nhờ vào package b Đối tượng lớp số nguyên int uint

Hàm tạo

Tên hàm Chức

Hàm tạo int(Number) Hàm khởi tạo cho lớp int

toExponential(Number) Trả định dạng số dạng 3.1e+5 Ngoại lệ RangeError toString() Trả định dạng xâu số

valueOf() Trả giá trị nguyên thủy đối tượng int c Đối tượng lớp số thực Number

Tên hàm Chức

Hàm tạo int(Number) Hàm khởi tạo cho lớp int

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 115 -

valueOf() Trả giá trị nguyên thủy đối tượng Number Ngoài ra, lớp có xác định thêm tham số NaN – vô định, NEGATIVE_INFINITY – số âm vô cực, POSITIVE_INFINITY – số dương vô cực

d Đối tượng lớp String

Tên hàm Chức

Hàm tạo String(String) Hàm khởi tạo cho lớp String charAt(Number) Trả kí tự num

concat(…String) Ghép nối xâu thành xâu indexOf(String,

Number=0)

Trả vị trí tìm thấy xâu String kể từ vị thứ cho Phương thức định nghĩa danh sách hằng, nghĩa có hai đối số lastIndexOf(String,

Number)

Tương tự indexOf, tìm kiếm từ phải sang trái

localeCompare(String) So sanh hai xâu Nếu kết trả Nếu xâu ban đầu có độ dài lớn trả 1, ngược lại trả -1

replace(pattern, Obj) Thay pattern Obj xâu cho

search(pattern) Trả số pattern xâu cho split(pattern) Phân tách xâu thành xâu Kết trả

một mảng xâu substring(Number,

Number)

Trả xâu từ vị trí Number đầu với độ dài Number sau

toLowerCase(String) Chuyển tất kí tự hoa thành kí tự thường Xâu nguồn khơng thay đổi

toUpperCase(String) Chuyển tất kí tự thường thành kí tự hoa Xâu nguồn khơng thay đổi

valueOf() Trả giá trị xâu dạng kiểu nguyên thủy e Đối tượng lớp Array

Tên hàm Chức

Thuộc tính length Trả độ dài xâu Array(Number)

Array(…values)

Hàm tạo

pop() Phương pháp pop cho Stack

push() Phương pháp push cho Stack

reverse() Đảo mảng

sort() Sắp xếp mảng

toString() Chuyển sang xâu

5.6.3 Sự kiện chuột

Khi làm việc với kiện AS, ta cần cài đặt tên hiển thị cho đối tượng Chi tiết điều này, tìm hiểu kĩ mục 5.7 Để minh họa cho việc xử lý kiện chuột AS, ta minh họa kiện đối tượng stage (khung trình chiếu)

import flash.events.MouseEvent;

stage.addEventListener(MouseEvent.CLICK, func); function func(e:MouseEvent):void{

trace("Hello"); }

Để bổ sung kiện cho đối tượng, ta sử dụng hàm addEventListener Hàm có năm tham số, ba tham số cuối cài đặt ngầm định Ta quan tâm đến hai tham số đầu

- Tham số Event: kiện chuột, bàn phím, thay đổi kích thước, thay đổi cửa sổ kích hoạt,… Ở đây, ta chọn MouseEvent với phương thức tương ứng như: CLICK, DOUBLE_CLICK,…

- Tham số Function: hàm thực thi chức tương ứng Nó cần chứa tham số kiện tương tứng với tham số Event

5.6.4 Sự kiện bàn phím

Hồn toàn tương tự kiện chuột, ta thay MouseEvent KeyboardEvent, ta nắm bắt kiện phím tương ứng Bạn lưu ý rằng, phím quản lý lớp Keyboard AS

import flash.events.KeyboardEvent; import flash.ui.Keyboard;

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 117 - trace("Hello "); }

Sự kiện phím KeyboardEvent bao gồm KEY_UP KEY_DOWN 5.7 Đưa đối tượng vào ActionScript

Flash cho phép bạn tạo đối tượng công cụ vẽ Đưa đối tượng đối tượng cung cấp sẵn(như thành phần GUI) vào AS Để làm điều này, bạn cần chuyển đổi đối tượng bạn thành biểu tượng MovieClip Button Đối tượng Graphic khơng hỗ trợ

Sau đó, bạn kích chọn đối tượng Trong bảng thuộc tính, bạn nhập tên đối tượng thể cần tạo vào mục <Instance Name>, sau nhấp Enter Giờ đây, đối tượng bạn khởi tạo bạn thao tác với bên AS theo tên thể mà bạn vừa cài đặt

Hình 5.2 – Tạo tên thể cho đối tượng

Nếu bạn import đối tượng từ bên vào thư viện Library, bạn tạo lớp chứa (tức lớp để tạo đối tượng này)

Chúng ta xây dựng đoạn chương trình sau Import file âm vào trong Library Khi bấm chuột vào nút Play chơi file âm

- Trong Stage, bạn tạo nút Play (là biểu tượng Button) cài đặt tên thể cho btPlay

- Thực import file âm vào thư viện: vào File > Import > Import to Library Trong cửa sổ thư viện Library, bấm chọn file âm import vào, kích chuột phải chọn Properties (xem hình 5.3)

- Khi đó, xuất hộp thoại Properties sau

Hình 5.4 – Hộp thoai Properties đối tượng file âm

Bạn cần đánh dấu tích vào Export for ActionScript Trong Class, bạn nhập vào tên lớp xây dựng cho đối tượng âm (ví dụ myMusic) Ngay bên Base Class – tức lớp sở mà thừa kế Sau nhấp Ok Kết thúc thao tác trên, bạn nhận đối tượng btPlay lớp myMusic Tiếp theo, bạn bắt tay vào viết mã lệnh cho chương trình

- Nhấn F9 để mở khung soạn thảo ActionScript Bạn bổ sung kiện kích chuột cho đối tượng btPlay sau

import flash.events.MouseEvent;

btPlay.addEventListener(MouseEvent.CLICK, func); var Player:flash.media.Sound = new myMusic(); function func(e:MouseEvent):void{

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 119 -

Đối tượng Player thể lớp myMusic Khi bấm chuột vào nút btPlay, hàm func gọi đến Kết phương thức play đối tượng Player thực thi

5.8 Làm việc với XML a Đối tượng XML

Để làm việc với xml, ta sử dụng đối tượng XML Đối tượng có hàm khởi tạo sau:

var xml:XML = new XML( <books>

<book>Toán</book> <book>Lý</book> </books>

);

trace(xml.children()[0]);

Trong ví dụ này, ta có cấu trúc xml đơn giản Phương thức children trả mảng đối tượng books tức mảng book Ta truy cập chúng theo số - số đánh số từ

Ta trải nghiệm với cấu trúc xml theo định dạng khác sử dụng rộng rãi

var xml:XML = new XML( <books>

<book name=”Toán” description=”Lớp 12”>book1</book> <book name=”Lý” description=”Lớp 11”>book2</book> </books>

);

trace(xml.children()[0].attribute(“name”));

b Đọc file xml URLLoader

Trong trường hợp trên, ta làm việc với cấu trúc xml bên AS Để đọc file xml từ bên ngoài, bạn phải sử dụng đối tượng URLLoader Bạn quan sát mã nguồn sau:

import flash.events.Event;

var xmlloader:URLLoader = new URLLoader(); var xml;

xmlloader.load(new URLRequest("book.xml"));

xmlloader.addEventListener(Event.COMPLETE, success); function success(e:Event):void{

xml = new XML(e.target.data);

trace(xml.children()[0].attribute("name")); }

Đối tượng URLLoader khởi tạo nhờ vào phương thức load từ URLRequest Đối tượng URLRequest khởi tạo nhờ hàm tạo từ file xml định Chúng ta thao tác với file xml tải xong nhờ vào kiện Event.COMPLETE Dữ liệu từ file xml đọc lưu vào target.data Event

5.9 Vùng chức Code Snippets

Chúng ta tìm hiểu chi tiết nhóm chức tổ chức vùng Code Snippets Nhưng trước tiên, tìm hiểu chúng thơng qua ví dụ minh họa

Tạo đồng hồ treo tường

Trong ví dụ này, tìm hiểu cách tạo đồng hồ treo tường Bạn sử dụng công cụ vẽ để tạo cho đồng hồ theo ý thích bạn Nhưng bạn cần lưu ý vài điểm sau đây:

- Các kim quay phải nằm Layer riêng biệt Chúng phải MovieClip Tâm xoay kim quay phải nằm đầu

- Các phần cịn lại đồng hồ, tùy thuộc vào mục đích bạn, bạn tạo Layer khác nhau, Layer

Trong đồ hồ mà tạo, sử dụng Layer sau đây:

- Layer Oclock: chức phần khung đồng hồ, bề mặt đồng hồ

- Layer Node: chứa mốc thời gian (4 mốc thời gian)

- Layer Hours (chứa kim giờ), Layer Minutes (chứa kim phút), Layer Seconds (chứa kim giây)

- Layer Center: nút gốc kim quay

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 121 -

Hình 5.5 – Tạo đồng hồ kim quay bang chức Code Snippets

Chắc bạn thắc mắc Layer Action trường hợp dùng để làm Chúng ta biết sau

Đối với kim quay, bạn cần cài đặt tên thể cho Ví dụ tơi đặt tên cho đối tượng kim quay sau: kim hourobj, kim phút minobj, kim giây secobj

Hình 5.6 – Cài đặt tên thể cho MovieClip kim quay

Hình 5.7 – Vùng Code Snippets: Rotate Continuously

Khi đó, Flash chèn tự động Action Frame vào TimeLine khởi tạo nội dung Action cho bạn sau

minobj.addEventListener(Event.ENTER_FRAME, fl_RotateContinuously);

function fl_RotateContinuously(event:Event) {

//Soạn thảo mã chương trình minobj.rotation += 10;

}

Bây bạn thay đoạn mã hàm fl_RotateContinuously đoạn mã sau

var dd:Date = new Date();

hourobj.rotation = ((dd.getHours()>=12)?(dd.getHours()):(dd.getHours()-12))*30;

minobj.rotation = dd.getMinutes()*6; secobj.rotation = dd.getSeconds()*6;

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 123 -

liên tục (Rotate Continuously), đó, bạn khơng cần tương tác với đối tượng Timer

Giải thích: Để cho đồng hồ hoạt động đúng, ta cần bổ sung kiện thời gian cho Biến dd thuộc kiểu Date Ta sử dụng hàm khởi tạo Date() để khởi tạo giá trị cho biến dd Đối tượng thuộc kiểu Date có nhiều hàm tạo khác nhau, ta sử dụng hàm tạo không đối số Với hàm tạo này, đối tượng dd nhận giá trị thời gian Ta sử dụng phương thức getHours, getMinutes, getSeconds để lấy giờ, phút, giây tương ứng Ở đây, Flash sử dụng biến cố Event.ENTER_FRAME Với biến cố này, hành động liên tục cập nhập frame Bạn lưu ý mặc định, số Frame giây 24fps Do đó, bạn hồn tồn yên tâm thời gian đồng hồ bạn cập nhật đến 1/24 giây

Tiếp theo, thảo luận công thức tính góc quay Chúng ta biết kim phút kim giây quay vòng 60 phút 60 giây Nó tương ứng với số đo 3600 Như vậy, tương ứng với phút giây có số

đo 60 Nếu có số phút số giây tại, ta việc nhân với nhận

kết góc đo tương ứng với phút giây

Với kết khác Một vịng quay 3600 tương ứng với 12 giờ, đó, chiếm đến góc 300

Nên góc quay kim số nhân với 30 Một điều lưu ý nữa, thời gian hệ thống định dạng 24h có vài sai sót xảy Do đó, để đảm bảo đồng hồ hoạt động tốt, bạn nên kiểm tra điều kiện: số vượt ngưỡng 12, số số trừ 12, ngược lại giữ ngun kết Đây giá trị toán tử điều kiện mà ta sử dụng

Đến đây, bạn thắc mắc addEventListener lại áp dụng cho kim phút Câu trả lời khơng phải Bạn áp dụng cho đối tượng Bạn hiệu chỉnh ba đối tượng Action Frame khác Nhưng cách thực thi làm cho bạn tốn thời gian, việc quản lý nhiều Frame làm cho bạn cảm thấy rối Bạn hoàn toàn làm bạn muốn Nhưng bạn cần lưu ý đến phương châm lập trình – Càng đơn giản, nhỏ gọn đảm bảo đầy đủ nội dung tốt

Tạo Menu điều khiển cảnh quay Game

Hình 5.8 – Thứ tự Scene

Bạn trang trí cho Scene tùy ý Trên Scene Menu chứa ba MenuItem Result, Play Help hình bên Khi bạn nhấn vào Play, chương trình chuyển sang Scene Play để chơi game Khi bạn nhấn vào Result, chương trình chuyển đến Scene Result để xem kết Khi bạn nhấn vào Help, chương trình chuyển đến Scene Help để xem hướng dẫn chơi game Bạn lưu ý Scene Result, Play Help có Menu Back để trở lại Menu

Hình 5.9 – Scene Menu

Trong Scene lại, chưa nội dung liên quan menu Back để quay trở lại Scene Menu

Bây giờ, sử dụng chức Code Snippets để tạo hiệu ứng mà thảo luận

Trước tiên, ta tạo hiệu ứng Button cho MenuItem Bạn chọn Play, sau vào Commands > Make Button Lặp lại điều cho Help Result Ở Scene Play, Help, Result bạn bổ sung vào dòng lệnh

stop();

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 125 -

Tiếp theo, bạn nhấp vào nút Play Scene Menu, bấm chọn chức Code Snippets Bạn chọn nhóm TimeLine and Navigation Tiếp đến, bạn chọn chức Click to Go to Scene and Play Khi đó, Flash sinh đoạn mã sau

btPlay.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene); function fl_ClickToGoToScene(event:MouseEvent):void { MovieClip(this.root).gotoAndPlay(1, "Play"); }

Bạn cần thay đổi tên Scene cho phù hợp với Scene chuyển đến dòng lệnh

MovieClip(this.root).gotoAndPlay(1, "đổi tên Scene");

Bạn thực thao tác cho chức lại Cuối cùng, bạn nhấn tổ hợp Ctrl+Enter để kiểm tra kết

Nếu bạn muốn xây dựng dự án game hồn chỉnh, bạn lập trình game bạn vào Scene Play

Bảng chức vùng Code Snippets

Nhóm Chức Code Giải thích

A

cti

ons

Click to go to Web page movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToGoToWebPage); function fl_ClickToGoToWebPage(eve nt:MouseEvent):void { navigateToURL(new URLRequest("http://www.ado be.com"), "_blank"); }

Cho phép mở liên kết nhấp chuột vào đối tượng

 movieClip_1: đối

tượng ta nhấp chuột lên

 navigateToURL: phương thức mở liên kết Nó gồm hai tham số - URLRequest (được khởi tạo từ tham số String) tham số String quy định cách mở liên kết (_blank, _parent, _selft, _top) Custom

Mouse

//Đoạn mã

stage.addChild(movieClip_1);

Cursor movieClip_1.mouseEnabled = false; movieClip_1.addEventListene r(Event.ENTER_FRAME, fl_CustomMouseCursor); function fl_CustomMouseCursor(event: Event) { movieClip_1.x = stage.mouseX; movieClip_1.y = stage.mouseY; } Mouse.hide();

//Đoạn mã

movieClip_1.removeEventList ener(Event.ENTER_FRAME, fl_CustomMouseCursor); stage.removeChild(movieClip _1); Mouse.show();

đối tượng moveClip_1

 Thuộc tính

mouseEnabled = false: khơng cho phép kích hoạt chuột đối tượng moveClip_1

 Thuộc tính x, y

movieClip_1: hoành độ x tung độ y

đối tượng

movieClip_1

 stage.mouseX, stage.mouseY:

phương thức đối tượng stage (khung trình diễn) để xác định vị trí trỏ chuột khung trình chiếu

 Mouse.hide: phương

thức hide đối tượng Mouse cho phép ẩn hình dạng trỏ chuột

Đoạn mã 2: thay đổi hình dáng trỏ chuột sang dạng mặc định ban đầu

 removeEventListener : hủy kiện chuột đối tượng movieClip_1

 removeChild: xóa đối tượng khung trình chiếu stage

 Mouse.show: phương

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 127 -

của trỏ chuột theo mặc định

Drag & Drop movieClip_1.addEventListene r(MouseEvent.MOUSE_DOW N, fl_ClickToDrag); function fl_ClickToDrag(event:MouseE vent):void { movieClip_1.startDrag() ; } stage.addEventListener(Mouse Event.MOUSE_UP, fl_ReleaseToDrop); function fl_ReleaseToDrop(event:Mous eEvent):void { movieClip_1.stopDrag() ; }

Thực thao tác kéo thả đối tượng Đối tượng kéo thả movieClip_1 Để thực thao tác kéo đối tượng, ta kết hợp với kiện MOUSE_DOWN lên đối tượng triệu gọi phương thức startDrag Ngược lại, để dừng việc kéo đối tượng (thả đối tượng) ta kết hợp kiện MOUSE_UP đối tượng triệu gọi phương thức stopDrag

Play a MC movieClip_1.play(); Bắt đầu trình diễn movieClip_1

Stop a MC movieClip_1.stop(); Dừng việc trình diễn movieClip_1 Click to hide an Object movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToHide); function fl_ClickToHide(event:MouseE vent):void { movieClip_2.visible = false; }

Show an Object

movieClip_1.visible = true; Hiện đối tượng movieClip_1 Click to Position an Object movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToPosition); function fl_ClickToPosition(event:Mou seEvent):void {

movieClip_2.x = 200; movieClip_2.y = 100; }

Thay đổi vị trí đối tượng movieClip_2 nhấp chuột vào đối tượng movieClip_1 Thuộc tính x y giải thích

Click to Display a TextField movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToPosition); var fl_TF:TextField;

var fl_TextToDisplay:String = "Lorem ipsum dolor sit amet." function

fl_ClickToPosition(event:Mou seEvent):void

{

fl_TF = new TextField();

fl_TF.autoSize = TextFieldAutoSize.LEFT;

fl_TF.background = true;

fl_TF.border = true; fl_TF.x = 200; fl_TF.y = 100;

fl_TF.text = fl_TextToDisplay;

addChild(fl_TF);

Hiển thị đoạn văn vị trí định ta nhấp chuột vào đối tượng

 movieClip_1: đối mà

ta nhấp chuột lên

 fl_TF: đối tượng

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 129 - Random Number fl_GenerateRandomNumber(li mit:Number):Number { var randomNumber:Number = Math.floor(Math.random()*(li mit+1)); return randomNumber; } trace(fl_GenerateRandomNum ber(100));

nhiên Để tạo số ngẫu nhiên, ta sử dụng lớp Math

 Phương thức

random: khởi tạo số ngẫu nhiên

 Phương thức floor để

lấy sàn số thực Bởi phương thức random khởi tạo sô thực

Bring Object to the Front

for (var fl_ChildIndex:int = 0; fl_ChildIndex < this.numChildren; fl_ChildIndex++) { this.getChildAt(fl_Child Index).addEventListener(Mou seEvent.CLICK, fl_ClickToBringToFront); function fl_ClickToBringToFront(event :MouseEvent):void { this.addChild(event.curr entTarget as DisplayObject); }

Chuyển đối tượng chọn lên đối tượng khác Các đối tượng cần chuyển đổi thành movieClip Button

Simple Timer

var fl_TimerInstance:Timer = new Timer(1000, 30);

fl_TimerInstance.addEventList ener(TimerEvent.TIMER, fl_TimerHandler); fl_TimerInstance.start(); var fl_SecondsElapsed:Number = 1; function

Tạo đếm thời gian

Đối tượng

fl_TimerInstance thuộc lớp Timer Nó sử dụng phương thức khởi tạo có hai tham số delay repeatCount

 delay: độ trễ (tính

theo mili giây, 1ms=1/1000s)

fl_TimerHandler(event:Timer Event):void

{

trace("Seconds elapsed: " + fl_SecondsElapsed);

fl_SecondsElapsed++; }

lặp (sẽ dừng đếm đạt đến giá trị này)

 Phương thức start

của đối tượng fl_TimerInstance: đối tượng bắt đầu thi hành Ngược lại với phương thức phương thức stop

Countdown Timer

var

fl_SecondsToCountDown:Nu mber = 10;

var

fl_CountDownTimerInstance: Timer = new Timer(1000, fl_SecondsToCountDown); fl_CountDownTimerInstance.a ddEventListener(TimerEvent TIMER, fl_CountDownTimerHandler); fl_CountDownTimerInstance.s tart(); function fl_CountDownTimerHandler(e vent:TimerEvent):void { trace(fl_SecondsToCou ntDown + " seconds");

fl_SecondsToCountDo wn ;

}

Hoàn toàn tương tự đếm xuôi Giá trị fl_SecondsToCountDow n giá trị bắt đầu khởi tạo đếm ngược

m eLi n e gat io n

Stop at this Frame

stop(); Dừng trình diễn movie

tại Frame Click to Go

movieClip_1.addEventListene r(MouseEvent.CLICK,

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 131 -

fl_ClickToGoToAndStopAtFr ame(event:MouseEvent):void {

gotoAndStop(5); }

Click to Go to Frame and Play movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToGoToAndPlayFrom Frame); function fl_ClickToGoToAndPlayFrom Frame(event:MouseEvent):voi d { gotoAndPlay(5); }

Trình diễn movie nhảy đến Frame định Trong trường hợp Frame định

Click to Go to Next Frame and Stop movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToGoToNextFrame); function fl_ClickToGoToNextFrame(ev ent:MouseEvent):void { nextFrame(); }

Dừng trình diễn movie Frame

Click to Go to Previous Frame and Stop movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToGoToPreviousFram e); function fl_ClickToGoToPreviousFram e(event:MouseEvent):void { prevFrame(); }

Dừng trình diễn movie Frame phía trước

Click to Go to Next

movieClip_1.addEventListene r(MouseEvent.CLICK,

Scene and Play fl_ClickToGoToNextScene); function fl_ClickToGoToNextScene(ev ent:MouseEvent):void { MovieClip(this.root).ne xtScene(); }

danh sách Scene

Click to Go to Previous Scene and Play movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToGoToPreviousScen e); function fl_ClickToGoToPreviousScen e(event:MouseEvent):void { MovieClip(this.root).pre vScene(); }

Bắt đầu trình diễn từ cảnh quay trước danh sách Scene

Click to Go to Scene and Play movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToGoToScene); function fl_ClickToGoToScene(event: MouseEvent):void { MovieClip(this.root).got oAndPlay(1, "Scene 3"); }

Bắt đầu trình diễn đến cảnh quay định danh sách Scene Tham số thứ Frame định Scene tham số thứ

ni m ati o n Move with Keyboard Arrows stage.addEventListener(Keybo ardEvent.KEY_DOWN, fl_PressKeyToMove); function fl_PressKeyToMove(event:Ke yboardEvent):void

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 133 - {

case Keyboard.UP: {

movieClip_1.y -= 5; break;

}

case Keyboard.DOWN: {

movieClip_1.y += 5; break;

}

case Keyboard.LEFT: {

movieClip_1.x -= 5; break;

}

case Keyboard.RIGHT: {

movieClip_1.x += 5; break; } } } Move Horizontall y

movieClip_1.x -= 100; Di chuyển đối tượng theo chiều ngang

Move Vertically

movieClip_1.y -= 100; Di chuyển đối tượng theo chiều dọc

Rotate Once

movieClip_1.rotation += 45; Quay đối tượng lần với góc định (tính theo độ)

Rotate Continousl y movieClip_1.addEventListene r(Event.ENTER_FRAME, fl_RotateContinuously);

function fl_RotateContinuously(event:E vent) { movieClip_1.rotation += 10; } Animate Horizontall y movieClip_1.addEventListene r(Event.ENTER_FRAME, fl_AnimateHorizontally); function fl_AnimateHorizontally(event: Event) {

movieClip_1.x -= 10; }

Đối tượng chuyển động theo chiều ngang

Animate Vertically movieClip_1.addEventListene r(Event.ENTER_FRAME, fl_AnimateVertically); function fl_AnimateVertically(event:Ev ent) {

movieClip_1.y -= 10; }

Đối tượng chuyển động theo chiều dọc

Fade in a Movie Clip

movieClip_1.addEventListene r(Event.ENTER_FRAME, fl_FadeSymbolIn);

movieClip_1.alpha = 0; function

fl_FadeSymbolIn(event:Event) {

movieClip_1.alpha += 0.01;

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 135 - { movieClip_1.removeEv entListener(Event.ENTER_FR AME, fl_FadeSymbolIn); } }

Fade out a Movie Clip

movieClip_1.addEventListene r(Event.ENTER_FRAME, fl_FadeSymbolOut); movieClip_1.alpha = 1; function

fl_FadeSymbolOut(event:Even t)

{

movieClip_1.alpha -= 0.01; if(movieClip_1.alpha <= 0) { movieClip_1.removeEv entListener(Event.ENTER_FR AME, fl_FadeSymbolOut); } }

Cách thức biến đối tượng theo cách mờ dần (giảm dần độ alpha)

L

oad and U

nl

oad

Click to Load/Unlo ad SWF or

Image

movieClip_1.addEventListene r(MouseEvent.CLICK,

fl_ClickToLoadUnloadSWF); var fl_Loader:Loader;

var fl_ToLoad:Boolean = true; function

fl_ClickToLoadUnloadSWF(e vent:MouseEvent):void

{

if(fl_ToLoad)

Tải hủy tải tập tin swf tập tin ảnh nhấp chuột vào đối tượng movieClip_1 Biến fl_Loader sử dụng để tải dạng tập tin kể Biến fl_ToLoad để lưu trạng thái (đã tải – true chưa tải – false)

{

fl_Loader = new Loader(); fl_Loader.load(new URLRequest("http://www.help examples.com/flash/images/im age1.jpg")); addChild(fl_Loader); } else { fl_Loader.unload(); removeChild(fl_Loader) ;

fl_Loader = null; }

fl_ToLoad = !fl_ToLoad;

}

về tập tin theo địa định đối tượng URLRequest Để hủy tải, ta sử dụng phương thức unload Sau tải xong tập tin, ta bổ sung đối tượng Loader vào khung trình chiếu

Sau hủy bỏ việc tải, ta xóa đối tượng Loader khỏi khung trình chiếu giải phóng biến (gán cho giá trị null) Mỗi lần nhấp chuột lên đối tượng, ta thay đổi giá trị biến fl_ToLoad từ true thành false (nếu tải lần nhấp chuột hủy tải) ngược lại Click to Load Image from Library movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToLoadImageFromLib rary); function fl_ClickToLoadImageFromLib rary(event:MouseEvent):void { var libImage:MyImage = new MyImage(0,0);

var holder:Bitmap = new Bitmap(libImage);

addChild(holder); }

Tải hủy tải tập tin ảnh thư viện xuất cho ActionScript Trước tiên, ta cần import tập tin ảnh vào thư viện Flash Sau đó, từ tập tin ảnh này, ta tạo lớp đối tượng tương ứng (Tương tự xuất tập tin âm mục 5.7)

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 137 - from Stage = new LibrarySymbol();

addChild(fl_MyInstance);

này phải xuất cho ActionScript

Remove Instance from Stage

removeChild(movieClip_1); Xóa đối tượng movieClip_1 khỏi khung trình chiếu

Load External

Text

var fl_TextLoader:URLLoader = new URLLoader();

var

fl_TextURLRequest:URLReq

uest = new URLRequest("http://www.help examples.com/flash/text/lorem ipsum.txt"); fl_TextLoader.addEventListen er(Event.COMPLETE, fl_CompleteHandler); function fl_CompleteHandler(event:Ev ent):void {

var textData:String = new String(fl_TextLoader.data); trace(textData); } fl_TextLoader.load(fl_TextUR LRequest);

Tải đoạn văn từ bên Chức tương tự việc tải tập tin XML Bạn xem lại lời giải thích

A udi o an d V ide o Click to Play/Stop Sound movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToPlayStopSound); var fl_SC:SoundChannel; var fl_ToPlay:Boolean = true; function

fl_ClickToPlayStopSound(evt: MouseEvent):void

{

if(fl_ToPlay)

{

var s:Sound =

new Sound(new URLRequest("http://www.help

examples.com/flash/sound/son g1.mp3"));

fl_SC = s.play(); }

else {

fl_SC.stop(); }

fl_ToPlay = !fl_ToPlay; }

hiểu mục 5.7

Click to Stop All Sounds movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToStopAllSounds); function fl_ClickToStopAllSounds(eve nt:MouseEvent):void { SoundMixer.stopAll(); }

Dừng chơi tất âm movie

On Cue Point Event import fl.video.MetadataEvent; movieClip_1.addEventListene r(MetadataEvent.CUE_POINT , fl_CuePointHandler); function fl_CuePointHandler(event:Met adataEvent):void { trace(event.info.name); }

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 139 - fl_ClickToPlayVideo); function fl_ClickToPlayVideo(event:M ouseEvent):void { video_instance_name.play(); }

khiển nhạc/phim Đối tượng

video_instance_name tên thể thành phần điều khiển việc thi hành tập tin video âm (thường FLV playback) Click to Pause Video movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToPauseVideo); function fl_ClickToPauseVideo(event: MouseEvent):void { video_instance_name.pause(); }

Tạm dừng

Click to Rewind Video movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToPauseVideo); function fl_ClickToPauseVideo(event: MouseEvent):void { video_instance_name.seek(0); }

Quay trở lại vị trí ban đầu trình điều khiển media playback

Click to Set Video Source video_instance_name.addEven tListener(MouseEvent.CLICK, fl_ClickToSetSource); function fl_ClickToSetSource(event:M ouseEvent):void { video_instance_name.source = "http://www.helpexamples.co m/flash/video/water.flv"; }

Click to Seek to Cue

Point movieClip_1.addEventListene r(MouseEvent.CLICK, fl_ClickToSeekToCuePoint); function fl_ClickToSeekToCuePoint(ev ent:MouseEvent):void {

var cuePointInstance:Object = video_instance_name.findCue Point("Cue Point 1");

video_instance_name.se ek(cuePointInstance.time); }

Di chuyển đến Cue Point định (trong trường hợp Cue Point có tên Cue Point Phương thức seek đối tượng media playback hoạt động với tham số time (nhảy đến thời điểm), đó, ta cần chuyển từ đối tượng cue point sang tham số time tương ứng nhờ thuộc tính time

Create a NetStream

Video

var fl_NC:NetConnection = new NetConnection();

fl_NC.connect(null);

var fl_NS:NetStream = new NetStream(fl_NC);

fl_NS.client = {};

var fl_Vid:Video = new Video(); fl_Vid.attachNetStream(fl_NS ); addChild(fl_Vid); fl_NS.play("http://www.helpe xamples.com/flash/video/wate r.flv");

Đọc tập tin video từ Media Server nhờ vào đối tượng NetStream Phim sau tải trình chiếu trực tiếp stage khơng dùng đến trình FLV playback E ve nt H a ndl er s Mouse Click Event movieClip_1.addEventListene r(MouseEvent.CLICK, fl_MouseClickHandler); function fl_MouseClickHandler(event: MouseEvent):void { trace("Mouse clicked");

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 141 -

Over Event r(MouseEvent.MOUSE_OVE R, fl_MouseOverHandler); function fl_MouseOverHandler(event: MouseEvent):void { trace("Moused over"); }

chuột di chuyển qua đối tượng movieClip_1 Mouse Out Event movieClip_1.addEventListene r(MouseEvent.MOUSE_OUT, fl_MouseOutHandler); function fl_MouseOutHandler(event:M ouseEvent):void { trace("Moused out"); }

Hành động thực thi chuột di chuyển khỏi đối tượng movieClip_1

Key Pressed Event stage.addEventListener(Keybo ardEvent.KEY_DOWN, fl_KeyboardDownHandler); function fl_KeyboardDownHandler(eve nt:KeyboardEvent):void { trace("Key Code Pressed: " + event.keyCode);

}

Hành động thực thi phím nhấn (có thể KEY_DOWN, KEY_UP Trong trường hợp này, ta sử dụng KEY_DOWN Enter Frame Event addEventListener(Event.ENT ER_FRAME, fl_EnterFrameHandler); function fl_EnterFrameHandler(event:E vent):void { trace("Entered frame"); }

Để biết thêm thông tin phương thức thuộc tính đối tượng (cũng tham số phương thức này) xem thêm bảng tham khảo lớp đối tượng địa trợ giúp ActionScript Adobe

CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT

- 143 -

TỔNG KẾT CHƯƠNG

Trong chương này, tìm hiểu ngơn ngữ lập trình ActionScript Đây ngơn ngữ lập trình hướng đối tượng Về giống Java Nó biên dịch thành mã bytecode có máy ảo AVM hiểu Máy ảo AVM tích hợp Flash Player AIR

Bạn cung cấp kiến thức tảng AS 3.0: cú pháp, câu lệnh bản,… đặc biệt, bạn cung cấp kiến thức hướng đối tượng Bạn tìm hiểu cách đưa đối tượng mà bạn xây dựng hay đối tượng tồn vào ngôn ngữ ActionScript

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO 6.1 Xử lý âm thanh, hình ảnh video

a Import âm thanh, hình ảnh video vào thư viện

Mặc dù chức Import to Library hỗ trợ chức Import Video, bạn nên sử dụng chức cho âm hình ảnh Riêng với video, bạn nên sử dụng chức Import Video

Cả hai chức tổ chức menu File>Import b Xử lý âm

Sau import file âm vào thư viện, ta hiệu chỉnh thuộc tính Bạn chọn file âm vừa nhập vào, kích chuột phải chọn: - Properties

- Hoặc Edit with Soundbooth

Bảng thuộc tính âm có dạng sau

Hình 6.1 – Bảng thuộc tính âm

Bạn nghe qua âm nhờ vào chức Test, dừng chơi nhờ chức Stop, thay đổi file nguồn nhờ chức Import,… Đặc biệt, bạn thay đổi định dạng nén cho file âm nhờ vào Compression

Hình 6.2 – Giao diện SoundBooth CS5 Chúng ta thảo luận qua vài chức SoundBooth

- Trích xuất phần file âm thanh: bạn dùng trỏ chuột bôi đen phần âm biểu đồ phổ Kích chuột phải nhấp chọn Crop Sau nhấp Save As chọn định dạng xuất Để kiểm tra phần âm chọn có hay không, bạn kéo biểu diện trạng thái đến vị trí cần kiểm tra, sau nhấp Play

- Tạo hiệu ứng cho âm thanh: bạn chọn mục effect bên cạnh, chọn hiệu ứng cần áp dụng

Khi sử dụng âm phim Flash, bạn cần tạo riêng Layer cho Bạn cần đảm bảo phần âm bạn phải tương ứng với hoạt cảnh phim Điều giúp phim bạn thật hơn, sinh động

c Xử lý hình ảnh

Sau import file hình ảnh vào thư viện, ta hiệu chỉnh thuộc tính Bạn chọn file âm vừa nhập vào, kích chuột phải chọn: - Properties

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 147 -

Hình 6.3 – Bảng thuộc tính hình ảnh

Chức bảng thuộc tính tương tự với chức thuộc tính âm Đối với hình ảnh nén JPEG, bạn chọn độ nén cho hình ảnh để giảm kích thước tập tin sau xuất

Để xử lý hình ảnh Flash, Adobe cho phép ta chỉnh sửa chúng chương trình chuyên dụng Adobe Photoshop Có lẽ, chương trình mà bạn q quen thuộc

Hình 6.4 – Giao diện Adobe PhotoShop CS5 d Xử lý video

Để làm việc với video, Flash cung cấp cho ta tiện ích Adobe Media Encoder để chuyển tập tin video thành tập tin cho phép sử dụng Flash flv f4v

Để chuyển đổi, bạn việc chọn Export Setting hiệu chỉnh thông số cần thiết Với tiện ích này, bạn hiệu chỉnh vài thuộc tính cho đoạn video bạn

Hình 6.5 – Giao diện Adobe Media Encoder CS5

Ngồi ra, Flash cịn cho phép bạn hiểu chỉnh nâng cao với hai chương trình hỗ trợ kĩ xảo điện ảnh Adobe Premier Adobe After Effect

Khi import video vào Flash, bạn cho phép video mà bạn import vào nằm khung hình độc lập hay nhúng vào trình media playback (nghĩa chương trình có thành phần điều khiển chế độ chơi) Với việc tạo khung hình độc lập, ta tạo mặt nạ với hình thù phức tạp, tạo khung trình chiếu hấp dẫn Bạn tìm hiểu điều tìm hiểu kĩ mặt nạ

6.2 Tạo kĩ xảo điện ảnh với Flash

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 149 -

Kĩ xảo điện ảnh hiệu ứng tạo dựng nhờ cơng cụ máy tính để làm cho phim, chương trình truyền hình trở nên hấp dẫn Kĩ xảo điện ảnh phân làm hai dạng bản:

+ Kĩ xảo dành riêng cho chương trình truyền hình: hiệu ứng chuyển cảnh, hiệu ứng văn bản, hiệu ứng chương trình gameshow,…

+ Kĩ xảo dành riêng cho thước phim điện ảnh: hiệu ứng tạo sóng, tạo mây mù, phép thuật,…

Sự phân loại quy định giáo trình Chúng ta không vào thảo luận chi tiết dạng kĩ xảo Chúng ta sử dụng Flash công cụ để tạo số kĩ xảo thơng dụng

Kĩ xảo biến hình (kĩ xảo điện ảnh)

Một kĩ xảo biến hình (ví dụ nhân vật A dùng phép thuật để biến thành nhân vật B) thực chất kĩ thuật bấm máy Người quay phim quay hai hình ảnh hình nền, hai nhân vật có đứng Việc biến hình đơn tiếp diễn hai cảnh quay Để cho phim có thêm hiệu ứng đặc sắc, bạn sử dụng hiệu ứng động Flash (như bốc khói, tạo luồng sáng,…) để làm cho hiệu ứng thêm đẹp mắt Việc xây dựng hiệu ứng bạn tìm hiểu ví dụ sau

Bạn lưu ý rằng, bạn muốn tạo hiệu ứng ghép hình, Flash khơng hỗ trợ cho bạn Bạn dùng chương trình chuyên dụng Adobe After Effect Kĩ xảo gấu thổi lửa

Trong ví dụ này, sử dụng thước phim có hình gấu Chú gấu há miệng Khi đó, luồng ánh sáng màu đỏ (mà ta gọi lửa) phóng Kĩ xảo mong chờ thước phim cuối thước phim gấu thổi lửa

Đầu tiên, bạn tạo dự án Bạn import Video hình gấu vào (File Bear.flv thư mục Video CD đính kèm) Bạn hiệu chỉnh thuộc tính import liệu theo hình mơ tả hình bên

Sau đó, bạn nhấp vào Next Trong cửa sổ tiếp theo, bạn chọn Embbed Video nhấp Finish

Giờ đây, video mà bạn import vào nằm thư viện (nếu bạn chọn import to Library), nằm Stage (nếu bạn chọn import to Library) Để tạo kĩ xảo điện ảnh thảo luận trên, bạn thực bước sau

Bước Bạn kéo video thư viện vào Stage, sử dụng chức Align để hiệu chỉnh kích thước cho video trùng với kích thước Stage đặt trùng khớp lên Stage

Hình 6.7 – Hiệu chỉnh thuộc tính Align cho Video gấu Stage Video hình gấu đặt vào Layer Bạn sửa tên Layer thành Bear

Bước Tạo Layer, đặt tên cho Fire Bạn vẽ lên Layer hình chữ nhật màu đỏ, loại bỏ viền Tiếp theo, bạn convert thành MovieClip Trong bảng thuộc tính MovieClip này, bạn chọn Filter Blur, hiệu chỉnh độ BlurX BlurY 41

Bước Bạn kéo đánh dấu Frame TimeLine, xem vị trí cần tạo cầu lửa xuất Bạn bấm vào Frame tương ứng Layer Fire, nhấn phím F6 để tạo KeyFrame Kích chuột phải lên cầu lửa, chọn Create Motion Tween

Chọn Frame kết thúc việc phóng lửa kéo vị trí kết thúc Tween vị trí Frame Tại Frame bạn kéo giãn cầu lửa dài Trên vị trí bên Tween, bạn hiệu chỉnh vị trí cầu lửa khớp với miệng gấu (các vị trí đánh dấu đen TimeLine)

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 151 -

Hình 38 – Hiệu chỉnh vị trí phóng lửa Kĩ xảo chiến khơng hai chim

Bạn sử dụng video có tên Bird.flv thư mục Video CD đính kèm Cũng tương tự trường hợp Bạn tạo Layer Bird để chứa video mà bạn import vào Layer Light chứa quầng sáng đỏ bao quanh chim Bạn cần tạo Motion Tween để hiệu chỉnh vị trí quầng sáng di chuyển bao quanh chim Bạn cần hiệu chỉnh vị trí bắt đầu kết thúc quầng sáng phù hợp với vị trí xuất biến chim

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 153 -

Đây kĩ xảo tương đối đơn giản Bạn cần tạo hai Layer: Layer chứa nội dung video, Layer chứa hình người Bạn đặt người vào vị trí thích hợp cảnh quay, sử dụng Motion Tween (hay Classic Tween) để tạo quỹ đạo bay nhân vật

6.3 Tạo thước phim Flash tựa 3D

Flash mặc định không hỗ trợ đối tượng đồ họa 3D Nó khơng cung cấp cho công cụ để tạo phối màu 3D Flash cung cấp cho ta công cụ tạo dịch chuyển 3D quay theo góc khơng gian Nếu bạn thật muốn tạo đối tượng động 3D, khuyên bạn nên sử dụng đến chương trình chuyên dụng: Autodesk Maya lựa chọn hoàn hảo Tuy nhiên, bạn người yêu thích Flash, bạn sử dụng Plugin hỗ trợ 3D – FreeSpin3D Đây Plugin thú vị hỗ trợ 3D hồn hảo Nhưng Plugin có giá khơng rẻ chút Nếu bạn muốn trải nghiệm cảm giác miễn phí với đồ họa 3D Flash, bạn tạo dựng nhờ vào ngơn ngữ lập trình ActionScript Để tạo thước phim 3D ActionScript, thuận lợi xây dựng thư viện mã nguồn mở PaperVision3D Chúng tơi trình bày chi tiết thư viện chương cuối giáo trình Một khó khăn bạn cần có lượng kiến thức toán học vững để tạo dựng đối tượng đồ họa 3D Thư viện mã nguồn mở PaperVision3D cung cấp cho hầu hết trình soạn thảo ActionScript, chúng tơi trình bày Flex Buider trình soạn thảo ActionScript chuyên nghiệp

Dù không cung cấp cho ta công cụ chuyên dụng để thiết kế 3D, với kĩ thuật phối màu Gradient kĩ thuật Layer, tạo dựng thước phim có “cách nhìn 3D” Trong ví dụ sau đây, tơi trình bày cách xây dựng đoạn phim đánh golf Khi người đánh golf đánh vào bóng, bóng lăn rơi vào lỗ golf sân cỏ

Bước 1. Tạo Layer có tên Glass Bạn phối màu Linear Gradient, chọn chế độ màu hình bên

Bước 2. Tạo lỗ golf sân golf Tạo Layer tên hole Trên Layer này, bạn tạo hình Eclipse sau

Hình 6.12 – Trò chơi golf: Các bước tạo lỗ golf

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 155 -

Hình 6.13 – Trị chơi golf: Hồn tất lớp Hole

Bước 3. Tạo bóng golf Hãy sử dụng cơng cụ vẽ hình Eclipse, tạo khối hình trịn (giữ Shift kéo chuột) Sau hiệu chỉnh thuộc tính màu Gradient bên Quả bóng golf nằm Layer ball

Hình 6.14 – Trị chơi golf: Tạo bóng chơi golf

Hình 6.15 – Trò chơi golf: Tạo đánh golf

Lưu ý: bạn cần đặt Layer đánh bóng vào sau Layer bóng chơi golf Tiếp theo, bạn sử dụng kĩ thuật Motion Tween để tạo hiệu ứng đánh golf đánh vào bóng chơi golf Trong trường hợp bên dưới, sử dụng kết hợp công cụ 3D Rotation

Hình 6.16 – Trị chơi golf: Tạo cảnh đánh bóng

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 157 -

Bước Tạo hiệu ứng bóng lăn Tại Frame thứ Layer ball, bạn nhấn phím F6 để tạo KeyFrame Sau đó, sử dụng Motion Tween để tạo chuyển động cho bóng tiến phía lỗ đánh golf

Hình 6.17 – Trị chơi golf: Tạo cảnh bóng di chuyển

Đường di chuyển bóng chia làm hai phần: Phần 1 – từ vị trí ban đầu đến lỗ golf (Frame đến Frame 60) Phần 2 – Từ vị trí bề mặt lỗ golf xuống lỗ golf (Frame 60 đến Frame 65)

Bước Theo cách quan sát chúng ta, từ giai đoạn bóng bề mặt xuống đến lỗ golf, bóng biến Để thực điều này, ta sử dụng kĩ thuật Layer Bạn sử dụng công cụ Lasso, chọn Layer Glass phần hình minh họa bên

Hình 6.18 – Trị chơi golf: Kĩ thuật Layer

Lưu ý: Bạn nên sử dụng thuộc tính Lock cho Layer cịn lại (trừ Layer glass Layer hole)

Hình 6.19 – Trị chơi golf: Thanh TimeLine kĩ thuật Layer

Đến đây, bạn hoàn tất thước phim Tuy nhiên phim thật hơn, bổ sung thêm hiệu ứng đổ bóng Sau dự án hồn chỉnh

Hình 6.20 – Trị chơi golf: Dự án hồn chỉnh

Với dự án golf này, hi vọng bạn có cảm giác 3D sống động Chúng ta đơn sử dụng kĩ thuật đơn giản cung cấp Flash: hiệu ứng Shadow, hiệu ứng Gradient kĩ thuật Frame, kết thu thước phim tựa 3D

Nếu bạn muốn tạo hiệu ứng 3D tựa trái đất quay, bạn hồn tồn dựa vào hiệu ứng Khi đó, bạn cần ảnh hình ảnh trái đất phát họa mặt phẳng (chứ mặt cầu) Bạn kết hợp với công cụ Fill Color (bạn chọn kiểu Bitmap) với kĩ thuật Shape Tween Lúc này, bạn sử dụng công cụ Gradient Transform để tạo dịch chuyển ảnh khối hình trịn Đây cách thức thú vị đơn giản Bạn thực dự án xem tập

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 159 - 6.4 Ghép nối nhiều hoạt cảnh

Khi bạn xây dựng phim hoạt hình, bạn cần đến nhiều hoạt cảnh Việc ghép nối nhiều hoạt cảnh Flash thực tự động Bạn tạo cảnh quay khác Scene khác Các hoạt cảnh ghép nối tự động theo dãy Scene xếp

6.5 Kĩ thuật mặt nạ mask

Hình 6.21 – Kĩ thuật mặt nạ Mask

Mặt nạ kĩ thuật cho phép bạn tạo riêng khung trình chiếu với hình dạng phức tạp Mọi hoạt động trình chiếu bên mặt nạ

Để tạo mặt nạ, bạn cần tạo khung trình chiếu Để tạo khung này, bạn đơn vẽ hình thể Layer tạm gọi Layer Mask Bạn tiếp tục tạo thêm Layer thứ hai để tạo hoạt cảnh Để tạo mặt nạ, bạn đặt Layer Mask lên layer hoạt cảnh, kích chuột phải vào Layer Mask này, chọn Mask Nếu bạn có nhiều Layer hoạt cảnh cần tạo Layer Mask, bạn việc kéo chọn Layer vào Layer Mask khung Layer Đến đây, bạn tưởng tượng làm để tạo khung hình phức tạp cho video ? Layer Mask bạn tạo khung trình chiếu, Layer video layer hoạt cảnh Thế công việc bạn hoàn tất !

Ghi chú: việc sử dụng mặt nạ không buộc bạn phải áp dụng cho tồn cảnh quay Bạn sử dụng nhiều mặt nạ đồng thời cảnh quay Một mặt nạ có tác dụng cho lớp Layer chứa đối tượng

Một vài ví dụ sử dụng kĩ thuật mặt nạ Mask

Hình 6.22 – Mặt nạ động

Bạn sử dụng Motion Tween (hoặc Classic Tween) để tạo hiệu ứng dịch chuyển lớp mặt nạ dọc theo đường nghệ thuật Tiếp theo, bạn kích chuột phải lên lớp Mask, chọn Mask Lập tức lớp mặt nạ chuyển động tạo hiệu ứng xuất phần cho đối tượng hình nghệ thuật

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 161 -

Mặt nạ động tạo hiệu ứng thú vị Mặt nạ biến hình có chức khơng thú vị Bạn hồn tồn sử dụng hai loại mặt nạ tạo hiệu ứng hay trình chiếu Album ảnh

Ví dụ việc sử dụng mặt nạ di chuyển (draggable mask). Để tạo loại mặt nạ này, cần tạo đối tượng để làm mặt nạ Đối tượng phải biểu tượng movieclip button Thông thường, người ta sử dụng biểu tượng movieclip

Đầu tiên, bạn tạo hai Layer: Layer chứa ảnh (tạm gọi background), Layer tạo hình ngũ giác để làm mặt nạ (tạm gọi mask)

Hình 6.24 – Tạo draggable mask – Bước Để tạo hiệu ứng này, bạn cần sử

dụng ActionScript Ở đây, sử dụng ActionScript nhờ vào Code Snippets Bạn chọn đối tượng hình ngũ giác, bấm vào biểu tượng Code Snippets

Bạn chọn nhóm Actions > Drag and Drop Sau đó, bạn nhấp đơi chuột vào biểu tượng Bạn nhấn Ctrl+Enter để kiểm tra Tại thời điểm này, bạn di chuyển đối

Tiếp theo, sử dụng kĩ thuật Mask Bạn chọn Layer Mask, kích chuột phải, chọn Mask Bạn thu kết hình bên

Hình 39 – Tạo draggable mask – Bước

Bạn kiểm tra movie lần cách nhấn tổ hợp Ctrl+Enter Bạn thấy rằng, hiệu ứng mask hoạt động Tuy nhiên, bạn di chuyển đối tượng dùng làm mặt nạ Sở dĩ vì, bạn sử dụng hiệu ứng mask, đối tượng movieclip làm mặt nạ tự động ấn định thuộc tính buttonMode false Chúng ta cần thay đổi thuộc tính Bạn nhấn phím F9 để quay lại với khung soạn thảo ActionScript Sau đó, bổ sung dòng lệnh

movieClip_1.buttonMode = true;

Bạn tham khảo tồn mã lệnh chương trình bên movieClip_1.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);

function fl_ClickToDrag(event:MouseEvent):void{ movieClip_1.startDrag();

}

stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop); function fl_ReleaseToDrop(event:MouseEvent):void{

movieClip_1.stopDrag(); }

movieClip_1.buttonMode = true;

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 163 -

Hình 6.27 – Tạo Slide ảnh – Bước

Hiệu ứng cho mặt nạ Mask Bạn tạo hình chữ nhật có kích thước nhỏ, nằm góc bên phải khung trình chiếu

Hình 6.28 – Tạo Slide ảnh – Bước

F6) để chép toàn ảnh Frame thứ lên Frame đến 19 Chọn Layer Mask này, kích chuột phải chọn Mask

Hiệu ứng cho mặt nạ Mask Hoàn toàn tương tự với mặt nạ Mask1 Lần này, bạn tạo dãy Tại Frame 20 Layer Mask2, bạn nhấn phím F6, sử dụng cơng cụ PolyStar để tạo ngơi

Hình 6.29 – Tạo Slide ảnh – Bước

Kích chuột phải lên đối tượng này, chọn Create Motion Tween Hiệu chỉnh độ rộng Tween cho vị trí kết thúc nằm Frame 35 Layer Mask Tại Frame 39 Layer Pic2, nhấn phím F5 F6 để chép Frame 20 lên Frame từ 21 đến 39 Kích chuột phải lên Layer Mask 2, chọn Mask

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 165 -

Hình 6.30 – Tạo Slide ảnh – Bước

Bạn quan sát lại cách bố trí Frame TimeLine theo hình bên

Hình 6.31 – Tạo Slide ảnh – Bước

Để kiểm tra kết cuối Bạn nhấp tổ hợp phím Ctrl+Enter Hi vọng bạn hài long với hiệu ứng Bạn hồn tồn tạo hiệu ứng riêng bạn cách sử dụng hai loại mặt nạ nêu

6.6 Tạo nút nhấn điều khiển

Trong thư viện Flash cung cấp cho ta nhiều template nút điều khiển: nút điều khiển có kiểu dáng chuẩn Windows, nút điều khiển tạo sẵn Bạn tự tạo kiểu nút điều khiển cho riêng Trong phần này, tìm hiểu cách sử dụng nút điều khiển tạo sẵn để điều khiển phim Flash

Tạo nút Play Stop

Hình 6.32 – Tạo nút nhấn điều khiển

Tiếp đến, bạn cài đặt tên hiển thị cho Trong Action, bạn sử dụng chức quản lý kiện kích chuột Trong hàm kiện tương ứng, với hành động play, bạn dùng hàm play (nhưng bạn cần hiệu chỉnh cho đoạn phim không chơi tự động nhờ vào hàm stop), với hành động dừng phim bạn sử dụng hàm stop

Tạo PlayBack

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 167 -

Bạn cài đặt tên hiển thị cho đối tượng Slider playbar Trong khung soạn thảo Action, bạn viết nội dung sau

stop();

playbar.maximum = 300; var allowed:Boolean = false;

playbar.addEventListener(MouseEvent.MOUSE_MOVE, playbacknow); function playbacknow(e:MouseEvent):void{

if (allowed)

gotoAndPlay(playbar.value); }

playbar.addEventListener(MouseEvent.MOUSE_DOWN, PlayIt); function PlayIt(e:MouseEvent):void{

allowed = true; }

playbar.addEventListener(MouseEvent.MOUSE_UP, StopIt); function StopIt(e:MouseEvent):void{

allowed = false; }

Ở đoạn chương trình này, playbar.maximum gán số Frame Scene Biến allowed tương ứng với kiện chuột ấn xuống hay thả Khi kết hợp kiện ấn chuột di chuyển chuột Slider này, nhảy đến Frame định tiếp tục trình diễn nhờ vào hàm gotoAndPlay 6.7 Xuất Movie

Sau bạn hoàn chỉnh video, công việc bạn cần xuất Trước xuất bản, bạn cần hiệu chỉnh vài thông số liên quan mục Publish Setting Để xuất phim, bạn chọn chức Export Movie Trong hộp thoại xuất hiện, bạn chọn định dạng *.swf

Xuất tập tin cho thiết bị di động. Để xuất tập tin cho thiết bị di động, có hai hướng tiếp cận:

- Nếu thiết bị di động hỗ trợ flash lite dạng plugin: cần chọn lựa tạo dự án flash (chọn phiên flash lite phù hợp) Bạn cần lưu ý rằng, khơng phải dịng điện thoại hỗ trợ ActionScript 3, bạn cần lưu ý Sự hỗ trợ phụ thuộc vào phiên flash lite Việc xuất tập tin cho thiết bị di động hoàn toàn tự động, bạn sử dụng chức Export Movie

- Nếu thiết bị di động hỗ trợ Adobe AIR (như dịng máy tính bảng tablet): tạo dự án, cần chọn dự án Adobe AIR Việc xuất tập tin đóng gói để cài đặt Adobe AIR không diễn tự động Chúng ta cần thiết lập thơng số cấu hình cho Một tập tin cài đặt cho AIR có phần mở rộng *.air (nếu đính kèm tập tin chứng thực) *.airi (nếu chưa đính kèm tập tin chứng thực) Chúng ta cài đặt lên AIR tập tin chứng thực *.air Để thiết lập thông số cho tập tin cài đặt AIR, ta chọn File > Adobe Air Settings

a) Mục General

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 169 -

 File name: Tên tập tin sau cài đặt

 Apps name:Tên ứng dụng.

 Version: Tên phiên

 Apps ID: ID ứng dụng

 Description: vài đặt tả ứng dụng

 Copyright: quyền

 Windows Style: dạng hiển thị cửa sổ Windows dành cho ứng dụng AIR Có ba dạng hiển thị: System Chrome (theo hệ thống), Custom Chrome (tùy chỉnh) Transparent (trong suốt)

b) Mục Signature

Hình 6.35 – Thiết lập tập tin cài đặt air – Mục Signature

Tạo tập tin chứng thực Nếu chưa có tập tin chứng thực, bấm vào nút Create

 Publisher name: tên nhà xuất tạo tập tin

Hình 6.36 – Tạo tập tin chứng thực

 Organization name: tên tổ chức

 Country: quốc gia

 Password/Confirm password: mật bảo vệ nhập lại mật

 Type: thuật tốn mã hóa

 Save as: vị trí lưu tập tin chứng thực

c) Mục Icon: chọn biểu tượng cho chương trình Chúng ta cần tạo kích thước cho biểu tượng: 16x16, 32x32, 48x48 128x128

d) Mục Advanced

Hình 6.37 – Thiết lập tập tin cài đặt air – Mục Advanced

 Associated file type: chương trình quản lý tập tin

 Initial Windows Settings: thông số cửa sổ Windows – chiều rộng

(width), chiều cao (height), tọa độ x, tọa độ y, độ rộng tối đa (maximum width), độ cao tối đa (maximum height), độ rộng tối thiểu (minimum width), độ cao tối thiểu (minimum height), cho phép hiển thị chế độ cực đại (maximizable), cho phép hiển thị chế độ tối thiểu (minimizable), cho phép thay đổi kích thước (resizable), cho phép hiển thị (visible)

 Other settings: thiết lập khác – install folder (thư mục cài đặt),

program menu folder (thư mục hiển thị menu program)

Sau thiết lập xong thông số, bạn chọn Publish để xuất (hoặc nhâp Ok)

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 171 -

các nội dung trang web đặc biệt khơng có khung hình bao quanh đối tượng phim Flash

Hình 6.38 – Phim Flash với đối tượng mây, chim hải âu, dừa hoa Trong hình 6.38 trên, đối tượng hiển thị lên trình duyệt web màu Stage khơng hiển thị trình duyệt

Để tạo thước phim Flash suốt này, ta thay đổi phần thiết lập Publish Settings xuất tập tin Flash Dù màu ta có thiết lập màu nữa, với tùy chỉnh bên đây, màu phim suốt Bước Hãy thiết kế phim Flash với màu tùy chỉnh, cần lưu ý rằng, ta không phép sử dụng đối tượng, hình để làm hình cho thước phim

Bước Vào File > Publish Settings Trong hộp thoại ra, chọn thẻ Flash, chọn chức Windows Mode Transparent Windowsless Bước Nhấn Publish để xuất tập tin

Nếu muốn đưa phim vào website, ta cần mở tập tin htm lên chép đoạn mã sau:

<div id="flashContent" style=” width:100%; height:100%; margin-top:330px; margin-left:0px;”>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="index" align="middle">

<param name="movie" value="index.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#0066ff" /> <param name="play" value="true" />

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 173 - <param name="menu" value="false" /> <param name="devicefont" value="false" /> <param name="salign" value="" />

<param name="allowScriptAccess" value="sameDomain" /> <! [if !IE]> >

<object type="application/x-shockwave-flash" data="index.swf" width="550" height="400">

<param name="movie" value="index.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#0066ff" /> <param name="play" value="true" />

<param name="loop" value="true" />

<param name="wmode" value="transparent" /> <param name="scale" value="showall" />

<param name="menu" value="false" /> <param name="devicefont" value="false" /> <param name="salign" value="" />

<param name="allowScriptAccess" value="sameDomain" /> <! <![endif] >

<a href="http://www.adobe.com/go/getflash"><img

src="http://www.adobe.com/images/shared/download_buttons/get_flash_player. gif" alt="Get Adobe Flash player" /></a>

<! [if !IE]> > </object>

<! <![endif] > </object>

</div>

TỔNG KẾT CHƯƠNG

Trong chương này, làm quen với kĩ thuật Mask – kĩ thuật hữu ích Flash Bạn tạo mặt nạ chuyển động, mặt nạ biến hình mặt nạ di chuyển Bạn tạo nút nhấn, playback để chơi movie Đặc biệt hơn, bạn làm quen với cách xử lý âm thanh, hình ảnh video với chương trình chuyên dụng

CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO

- 175 -

CHƯƠNG THƯ VIỆN PAPERVISION3D 7.1 Giới thiệu PaperVision3D Adobe Flex Builder

PaperVision3D thư viện mã nguồn mở dành cho ActionScript để làm việc với đối tượng đồ họa 3D: xây dựng đối tượng 3D, tơ màu, tạo hoạt hình Đây lớp thư viện mạnh mẽ xây dựng ActionScript

PaperVision3D phát triển Carlos Ulloa Nhưng ngày này, đội ngũ lập trình viên quốc tế phát triển dựa dự án mở tên PaperVision3D Thư viện cung cấp địa website http://www.papervision3d.org

PaperVision3D sử dụng kết hợp với trình soạn thảo ActionScript như: Adobe Flex Builder, Adobe Flash Professional, FDT FlashDevelop Trong giáo trình này, chúng tơi trình bày trình soạn thảo Adobe Flex Buider Adobe Flex Buider là trình sáng tác RIA (Rich Internet Application) soạn thảo ActionScript chuyên nghiệp

Hình 7.1 – Adobe Flex Buider

CHƯƠNG THƯ VIỆN PAPERVISION3D

- 177 -

như trình ứng dụng Desktop… Về mặt soạn thảo ActionScript, Adobe Flex Builder tỏ vượt trội so với trình soạn thảo khác kể Adobe Flash Professional: chế độ soạn thảo chuyên nghiệp – bắt lỗi, sửa lỗi, biên dịch… Nếu bạn có kinh nghiệm sử dụng Eclipse IDE khơng khó khăn làm quen với Adobe Flex Buider

a Tạo dự án Flex Buider

Hình 7.2 –Tạo dự án Flex Buider Flex Project: tạo dự án RIA

Flex Library Project: tạo dự án thư viện

Flash Professional: tạo dự án Flash bao gồm dự án Flash chứa ActionScript ActionScriptProject: tạo dự án ActionScript

Tôi xin lưu ý đến bạn rằng, Adobe Flex Builder công cụ để soạn thảo ActionScript kết hợp với PaperVision3D công cụ để phát triển RIA cho web Do đó, làm quen với cách sử dụng dự án minh họa ví dụ giáo trình Nếu bạn quan tâm đến trình biên dịch này, hay sử dụng để phát triển RIA cho web, giới thiệu đến bạn giáo trình khác chuyên Adobe Flex Builder

b Thao tác với dự án Flex Builder

Mở dự án tồn tại: Trong sổ Package Explorer bên trái, bạn kích chuột phải chọn Import (hoặc vào File > Import)

Sau đó, bạn chọn Flex Builder Project (theo cách vào menu File) Import trực tiếp (theo menu kích chuột phải) Hộp thoại sau

Hình 7.3 – Import dự án

Bạn chọn Existing Projects into Workspace Nhấp Next Trong hộp thoại tiếp theo, bạn duyệt đến vị trí dự án bạn, sau nhấp Finish

Import theo tùy chọn Flash Builder sử dụng import dự án Flex Project (tức dự án RIA) Trong giáo trình này, khơng quan tâm đến trường hợp

Đóng nhiều dự án mở: bạn việc chọn dự án mở (nếu nhiều dự án, bạn nhấn phím Ctrl để chọn dự án khơng liên tục, phím Shift dự án liên tục cửa sổ Package Explorer) Sau đó, kích chuột phải chọn Close Project

CHƯƠNG THƯ VIỆN PAPERVISION3D

- 179 -

Trong menu thả xuống, bạn chọn Other Cửa sổ sau

Hình 7.5 – Lựa chọn chương trình biên dịch

Bạn nhấp đôi chuột vào Web Application (nếu muốn sử dụng thước phím Flash Player) Desktop Application (nếu muốn sử dụng thước phim Adobe AIR) Sau đó, bạn nhấp vào nút Run để thực thi dự án

Sau lựa chọn chương trình biên dịch theo bước nêu trên, từ thời điểm trở đi, biên dịch bạn việc chọn biểu tượng , menu thả xuống có menu với tên mà bạn thiết lập Bạn việc chọn menu để biên dịch dự án mà không cần phải lựa chọn thêm lần

Ghi chú: Phím tắt tương ứng với Debug Desktop Application – Alt+Shift+D,D phím tắt tương ứng với Debug Web Application – Alt+Shift+D,W

Làm việc với Workspace: Eclipse quản lý dự án theo workspace Một workspace chứa tập dự án để tiện cho việc quản lý Adobe Flex Builder xây dựng Eclipse quản lý dự án theo workspace Để chuyển đổi qua lại workspace, bạn vào File > Switch workspace > Other Trong cửa sổ xuất hiện, bạn duyệt đến vị trí workspace mà bạn chọn, sau nhấp Ok Adobe Flex Builder tự động tải tất dự án lên Adobe Flex Builder

7.2 Cấu hình cài đặt PaperVision3D cho Adobe Flex Buider Tải PaperVision3D: bạn truy cập vào địa sau

Hình 7.6 – Giải nén thư viện PaperVision3D

Tạo dự án thư viện ActionScript: bạn khởi động Adobe Flex Builder Kích chuột phải vào cửa sổ Package Explorer, chọn New > Flex Library Project Trong cửa sổ ra, bạn đặt tên cho dự án PV3D( tức PaperVision3D) Trong dự án mà bạn vừa tạo, có thư mục src, bạn copy toàn nội dung thư mục src mà bạn thu giải nén vào thư mục src (hoặc đơn giản, bạn sử dụng thao tác kéo thả)

Hình 7.7 – Thư mục src

CHƯƠNG THƯ VIỆN PAPERVISION3D

- 181 -

Tải FLARToolKit: ARToolKit thư viện tạo Hirokazu Kito viện Khoa học Cơng nghệ Nara – Nhật Bản Sau này, phát triển xuất đại học Washington FLARToolKit thư viện dành riêng cho Flash kể từ phiên 9.0 dựa ARToolKit Nó cung cấp cơng cụ cần thiết kết hợp với thư viện PaperVision3D để làm việc với hệ tọa độ giới thực: vị trí đặt camera, góc quay, độ chiếu sáng….Nó hồn tồn miễn phí dự án mã nguồn mở Bạn tải địa chỉ: http://www.libspark.org/browser/as3/FLARToolKit/branches/alchemy/bin/FLA RToolKit.swc?format=raw

Đưa thư viện FLARToolKit.swc vào dự án: kích chuột phải vào dự án ActionScript, chọn New > Folder Bạn đặt tên cho nó, ví dụ swc Sau đó, bạn copy file FLARToolKit.swc vào thư mục swc vừa tạo

Kích chuột phải vào dự án ActionScript này, chọn Properties Trong cửa sổ xuất hiện, bạn chọn ActionScript Build Path, chọn tiếp thẻ Library Path Sau đó, bạn nhấp vào nút Add SWC Folder Trong hộp thoại xuất hiện, bạn nhập tên thư mục chứa file FLARToolKit.swc – tức thư mục swc Sau nhấp Ok Bạn quan sát hình ảnh bên

Đưa thư viện PV3D vào dự án PV3DTest: kích chuột phải vào dự ActionScript này, chọn Properties, chọn ActionScript Build Path, sau chọn thẻ Library path Nhấp chọn nút Add Project chọn dự án thư viện PV3D

Giờ đây, bạn đơn bắt tay vào viết code để tạo kịch 3D Mọi thứ thật đơn giản lớp thư viện mà bạn vừa tải chứa đựng thư viện hàm lớn

7.3 Chương trình Hello, PaperVision3D !

Một cách thức học lập trình bắt tay vào để viết code cho chương trình đơn giản trước bắt đầu tìm hiểu chi tiết Ví dụ kinh điển đơn giản viết thông báo “Hello” Tuy nhiên, dự án này, không đưa thông báo “Hello” trên, mà tạo cầu 3D đơn giản không thêm đối tượng khác

Nếu bạn muốn bổ sung thêm lớp ActionScript, bạn kích chuột phải vào package Lession01 mà bạn tạo trên, chọn New > ActionScript Class

Theo cách tạo dự án ActionScript trên, Adobe Flex Builder mặc định sử dụng default package, bên package chứa lớp mặc định tên với dự án PV3DTest

Nội dung lớp sau package Lession01

{

import flash.display.Sprite;

// Thiết lập khung trình chiếu

public class PV3DTest extends Sprite {

public function Hello3D() {

//Viết code vào đây }

} }

CHƯƠNG THƯ VIỆN PAPERVISION3D

- 183 -

Trong đó, width độ rộng, height độ cao (được tính theo pixel); backgroundColor màu

Để bổ sung vào khung trình chiếu đối tượng cầu 3D, trước tiên, ta khởi tạo đối tượng cầu 3D nhờ hàm tạo cung cấp lớp Sphere

Sphere sp=new Sphere(arg0:MaterialObject3D, arg1:Number, arg2:int, arg3:int);

Trong đó, arg0 cách phối màu cho đối tượng sp, kiểu MaterialObject3D; arg1 – bán kính hình cầu, kiểu liệu Number; arg2, arg3 – số mãnh phân chia theo chiều ngang chiều dọc (số lượng mặt Spline) Tuy đối tượng sp tạo, chưa bổ sung vào khung trình chiếu Để bổ sung vào khung trình chiếu, ta phải sử dụng khung nhìn View Trong trường hợp này, ta sử dụng BasicView khung nhìn Lớp PV3DTest kế thừa lớp BasicView nhờ từ khóa extends Nhờ tính kế thừa này, lớp PV3DTest có phương thức scene.addChild lớp BasicView

scene.addChild(sp);

Tuy nhiên, bạn gộp hai dịng lệnh thành – gọn gàng hơn, bạn bắt đầu làm quen với ActionScript (hoặc Java, C#) bạn khơng nên viết tắt bên

scene.addChild(new Sphere(arg0:MaterialObject3D, arg1:Number, arg2:int arg3:int));

Cuối cùng, bạn bổ sung vào phương thức startRendering() để hiển thị đối tượng tạo theo cách phối màu chọn lên thiết bị hiển thị máy tính Sau chương trình Hello đầy đủ để tạo cầu 3D không gian package Lession01

{

import org.papervision3d.objects.primitives.Sphere; import org.papervision3d.view.BasicView;

[SWF(width="1420", height="800", backgroundColor="0x000000")]

public class PV3DTest extends BasicView {

public function PV3DTest() {

startRendering();//hoặc singleRender(); }

} }

Ghi chú: bạn sử dụng tổ hợp phím Ctrl+Space để sử dụng chế độ Auto Generate Code (chế độ gợi nhắc mã lệnh) Nhờ vào chế độ này, bạn soạn thảo văn nhanh đồng thời, bạn không mắc phải lỗi viết sai tên phương thức hay thuộc tính tên lớp Nếu bạn tạo đối tượng nhờ vào lớp thư viện khác, đó, bạn cần import thêm thư viện tương ứng Nhưng sử dụng tổ hợp phím này, việc import thư viện hoàn toàn tự động Bạn tạo thói quen sử dụng tổ hợp phím Mỗi bạn cần sử dụng phương thức đó, bạn viết vài kí tự đầu phương thức, sau sử dụng tổ hợp phím

Tạo hiệu ứng động cho đối tượng 3D:tương ứng với cầu 3D này, tạo chuyển động 3D tương ứng Chương trình sau minh họa chuyển động hình cầu khơng gian

Trong mơ hình này, đối tượng hình cầu quay theo khơng gian Khi quay khơng gian, quay theo chiều: theo chiều x – pitch; theo chiều y – yaw; theo chiều z – roll Ba phương thức có chung cú pháp pitch(arg0), yaw(arg0) roll(arg0) Ở đó, tham số arg0 góc quay tương ứng khung hình

package Lession01 {

import flash.events.Event;

import org.papervision3d.objects.primitives.Sphere; import org.papervision3d.view.BasicView;

[SWF(width="1420", height="800", backgroundColor="0x000000")]

public class PV3DTest extends BasicView {

private var sp:Sphere;

CHƯƠNG THƯ VIỆN PAPERVISION3D

- 185 - scene.addChild(sp);

addEventListener(Event.ENTER_FRAME, rotatenow); }

public function rotatenow(e:Event):void{ sp.yaw(5);

startRendering(); }

} }

Trong chương trình này, đối tượng sp sử dụng không phương thức khởi tạo, mà sử dụng phương thức rotatenow Do đó, đối tượng cần khai báo liệu thành viên lớp Trong phương thức khởi tạo, phương thức addEventListener triệu gọi tương ứng với kiện ENTER_FRAME Khi kiện xảy ra, hàm rotatenow gọi Trong trường hợp này, hình cầu quay theo chiều trục y – nhờ vào phương thức yaw Bạn hồn tồn tạo cách quay kết hợp ba phương thức yaw, pitch roll (hoặc hai phương thức trên)

Tạo hiệu ứng động cho đối tượng 3D theo chuyển động trỏ chuột: để tạo hiệu ứng động cho hình cầu theo chuyển động chuột, ta sử dụng phương thức kết hợp với tọa độ chuột Khi đó, hàm rotatenow viết sau

public function rotatenow(e:Event):void{ sp.yaw((1420-mouseX)*0.01); sp.pitch((800-mouseY)*0.01); startRendering();

}

7.4 Các đối tượng PaperVision3D 7.4.1 Các đối tượng hình thể

a Khởi tạo đối tượng hình thể Các đối tượng hình thể PaperVision3D đặt package org.papervision3d.objects.primitives

Đối tượng Phương thức khởi tạo Giải thích Cone (Hình nón) Cone( material:Material3DObjec t, radius:Number, height:Number, segmentsW:int, segmentsH:int )

Phương thức khởi tạo có tham số: -material: cách thức phối màu Đối tượng tìm hiểu mục

-radius: bán kính hình trịn đáy -height: chiều cao

-segmentsW: số phân mãnh xấp xỉ theo chiều rộng hình nón

-segmnetsH: số phân mãnh xấp xỉ theo chiều cao hình nón

Đối tượng hình nón trường hợp đặc biệt đối tượng Cylinder Tuy nhiên, bạn muốn tạo dựng hình nón, bạn nên sử dụng đối tượng đặc thù thay sử dụng đối tượng Cylinder

Hình 7.10 – Đối tượng Cone Cylinder

(Hình trụ hình chóp

Cylinder(

material:Material3DObjec t,

CHƯƠNG THƯ VIỆN PAPERVISION3D

- 187 - segmentsW:int, segmentsH:int, topRadius:Number, topFace:Boolean, bottomFace:Boolean )

theo chiều rộng hình

-segmentsH: số phân mãnh xấp xỉ theo chiều cao hình

-topRadius: bán kính hình trịn đỉnh Nếu hình trụ giá trị mặc định -1 giá trị radius Nếu tham số nhận giá trị 0, ta nhận hình nón Nếu tham số nhận giá trị nhỏ -1, trở thành hai hình nón chung đỉnh -topFace: cho phép bề mặt đỉnh có tơ màu hay khơng Nếu khơng tơ màu, có nghĩa rỗng phía

-bottomFace: tương tự topFace, áp dụng cho bề mặt đáy

Hình 7.11– Đối tượng Cylinder Plane (Mặt phẳng) Plane( material:Material3DObjec t, width:Number, height:Number, segmentsW:int, segmentsH:int )

Phương thức khởi tạo có tham số: -material: cách thức phối màu -width: chiều rộng mặt phẳng -height: chiều cao mặt phẳng -segmentsW: số phân mãnh xấp xỉ theo chiều rộng

-segmentsH: số phân mãnh xấp xỉ theo chiều cao

định 0) Tuy nhiên ta không tô màu cho mặt phẳng trường hợp khó nhận diện Chính lẽ đó, mặt phẳng khơng tơ màu, bạn nên sử dụng số phân mãnh khác 0; ngược lại, bạn nên sử dụng số phân mãnh mặt định

Hình 7.12 – Đối tượng Plane PaperPlane

(Chiếc tàu bay giấy)

PaperPlane(

material:Material3DObjec t,

scale:Number )

Phương thức khởi tạo có tham số: - material: cách thức phối màu - scale: độ phóng to vật thể

CHƯƠNG THƯ VIỆN PAPERVISION3D

- 189 - t

)

Hình 7.14– Đối tượng Arrow Sphere

(Hình cầu)

Sphere(

material:Material3DObjec t,

radius:Number, segmentsW: int, segmentsH:int )

Phương thức khởi tạo tham số: - material: cách thức tô màu - radius: bán kính hình cầu - segmentsW: số phân mãnh xấp xỉ theo chiều ngang

-segmentsH: số phân mãnh xấp xỉ theo chiều dọc

Hình 7.15 – Đối tượng Sphere Cube

(Hình hộp)

Cube(

material:Material3DObjec t,

width:Number, depth:Number,

Phương thức khởi tạo có tham số: - material: cách thức tơ màu

height:Number, segmentsH:int, segmentsS:int, segmentsT:int, insideFaces:int, excludeFaces:int )

- segmentsH: số phân mãnh xấp xỉ theo chiều ngang

- segments: số phân mãnh xấp xỉ theo chiều dọc (theo chiều xích đạo)

- segmentsT: số phân mãnh xấp xỉ theo chiều xâu

- insideFaces, excludeFaces: hiển thị mặt mặt

Hình 7.16 – Đối tượng Sphere

Các đối tượng gọi hình 3D nguyên thủy Nếu bạn muốn xây dựng hình thể 3D phức tạp, bạn dựa sở hình thể Để tạo đối tượng phức tạp, sử dụng chương trình thiết kế 3D chuyên nghiệp Maya, sau đó, ta import hình thể vào Flash để thiết kế theo kịch Chi tiết chúng tơi giới thiệu mục [7.5] Trong số phiên (chỉ phiên beta – phiên sử dụng thời điểm tại), ngồi đối tượng cịn có thêm đối tượng Stars – đối tượng ngơi 3D Vì tính phiên thử nghiệm, nên không đưa vào giáo trình

b Các phương thức thuộc tính hình thể

CHƯƠNG THƯ VIỆN PAPERVISION3D

- 191 -

tôi không sâu vào điều này, mà giải thích chức phương thức thuộc tính

Phương thức

Thuộc tính get set Giải thích

alpha:Number x x

Thuộc tính độ suốt, phân bố từ Giá trị alpha nhỏ độ suốt vật thể cao

x, y, z: Number x x

Tọa độ vật thể khơng gian: x- hồnh độ, y-tung độ, z-cao độ Tọa độ tính theo đối tượng chứa

rotationX, rotationY,

rotationZ:Number x x

Góc quay vật thể theo trục x, y, z tương ứng

scale, scaleX, scaleY,

scaleZ: Number x x

Độ phóng to theo ba chiều (scale) theo chiều x, y, z tương ứng với scaleX, scaleY, scaleZ

scene:SceneObject3D x x Sử dụng phương thức thuộc tính đối tượng scene sceneX, sceneY,

sceneZ: Number x

Tọa độ x, y, z đối tượng tương ứng với hệ tọa độ cảnh quay giới thực

Position:Number3D x x

Trả đối tượng Number3D, chứa thông số liên quan đến tọa độ vật thể DisplayObject3D

visible:Boolean x x Cho phép đối tượng hiển thị hay ẩn name:String x x Thiết lập tên cho đối tượng

id:int x x Thiết lập id cho đối tượng material:MaterialObje

ct3D x x

Thiết lập màu tô cho đối tượng

materials:MaterialList x x Thiết lập danh sách màu tô (áp dụng cho cube)

pitch(angle:Number):v oid

Quay liên tục theo trục x, lần quay góc angle

yaw(angle:Number):v odi

Tương tự trục y roll(angle:Number):vo

id

moveDown(distance: Number):void

Di chuyển liên tục đối tượng xuống moveUp(distance:Nu

mber):void

Di chuyển liên tục đối tượng lên moveBackward(distan

ce:Number):void

Di chuyển liên tục đối tượng sau moveForward(distance

:Number):void

Di chuyển liên tục đối tượng phía trước moveLeft(distance:Nu

mber):void

Di chuyển liên tục đối tượng sang trái moveRight(distance:N

umber):void

Di chuyển liên tục đối tượng sang phải addChild(child:Displa

yObject3D,

name:String):Display Object3D

Bổ sung đối tượng child lên vật thể đồng thời thiết lập tên cho name addChildren(parent:Di

splayObject3D):Displa yObjectContainer3D

Bổ sung tất đối tượng nằm parent lên DisplayObjectContainer3D

removeChild(child:Dis playObject3D):Displa yObject3D

Loại bỏ đối tượng child removeChildByName(

name:String):Display Object3D

Loại bỏ đối tượng có tên name addEventListener(type :String, listener:Function, useCapter:Boolean, priority:int, useWeakReference:Bo olean):void

Bổ sung event tương ứng với kiện xảy đối tượng

removeEventListener(t ype:String,

listener:Function, useCapter:Boolean):vo

CHƯƠNG THƯ VIỆN PAPERVISION3D

- 193 -

định set cho phép ghi Nếu ấn định get set, cho phép đọc ghi Get set áp dụng cho thuộc tính, khơng áp dụng cho phương thức

Trên chúng tơi trình bày phương thức thuộc tính thường hay sử dụng Bạn tham khảo tồn nội dung địa website papervision3d sau: http://www.papervision3d.org/docs/as3/

7.4.2 Đối tượng Material - Phối màu cho hình thể

Các đối tượng Material nằm package org.papervision3d.materials Trong package chứa đối tượng sau: BitmapAssetMaterial, BitmapFileMaterial, BitmapMaterial, ColorMaterial, MaterialsList, MovieAssetMaterial, MovieMaterial WireframeMaterial Ngồi ra, cịn chứa thêm số package khác như: utils, special, shaders, shadermaterials Hai gói shaders shadermaterials dùng để tạo hiệu ứng đổ bóng Chúng ta tìm hiểu vài lớp đối tượng số

a Phối màu WareframeMaterial Đối tượng WareframeMaterial nằm gói org.papervision3d.materials.WareframeMaterial

Hàm tạo đối tượng WareframeMaterial

WareframeMaterial wm = new WareframeMaterial(color:Number, alpha:Number, thickness:Number);

Trong đó,

• Tham số color quy định màu sắc chủ đạo

• Tham số alpha quy định độ suốt màu tơ

• Tham số thickness: quy định độ lớn đường viền cách tơ màu Ví dụ

scene.addChild(new Sphere(new WireframeMaterial(0x00ff00, 5, 4),400,20,20));

b Phối màu ColorMaterial Đối tượng ColorMaterial nằm gói org.papervision3d.materials.ColorMaterial

Hàm tạo đối tượng ColorMaterial

ColorMaterial cm = new ColorMaterial(color:Number, alpha:Number, interactive:Boolean);

Trong đó,

• Tham số color quy định màu sắc chủ đạo

• Tham số alpha quy định độ suốt màu tơ

• Tham số interactive: quy định tương tác vật thể viewport

Ví dụ

scene.addChild(new Sphere(new ColorMaterial(0x00ff00, 1, true), 400, 20, 20));

Hình 7.18– Tơ màu ColorMaterial

Như bạn thấy, hình thể phối màu theo dạng thức trơng giống hình 2D thơng thường Sở dĩ khơng sử dụng đến hiệu ứng light shader Nếu bạn kết hợp với hiệu ứng này, bạn nhận kết tốt Hiệu ứng đơn phối màu đặc (solid color) cho đối tượng hình thể

c Phối màu Bitmap Việc phối màu bitmap chia làm hai cách: nhúng trực tiếp ảnh bitmap vào phim Flash tải bitmap vào movie lần thực thi

Nhúng trực tiếp hình ảnh bitmap

CHƯƠNG THƯ VIỆN PAPERVISION3D

- 195 -

Trong trường hợp này, File Earth đặt thư mục với src, file actionscript nằm thư mục src, đường dẫn phải lùi cấp Bước Sử dụng hàm tạo đối tượng BitmapMaterial

var earthbmp:BitmapData = new EarthBmp().bitmapData;

var earthmaterial:BitmapMaterial = new BitmapMaterial(earthbmp); Tiếp theo, bạn triệu gọi đối tượng earthmaterial phương thức khởi tạo đối tượng hình thể cần phối màu

scene.addChild(new Sphere(earthmaterial, 400, 20, 20));

Hình 7.19 – Tơ màu BitmapMaterial Kết bạn nhận đối tượng hình cầu

Tải lên hình ảnh bitmap lần phim khởi động Hàm tạo đối tượng BitmapFileMaterial

var bm:BitmapFileMaterial=new BitmapFileMaterial(url:String, precise:Boolean)

Trong đó,

• Tham số url đường dẫn đến file ảnh • Tham số precise quy định độ xác

Ta sử dụng dịng lệnh sau để thu kết Hình 142

scene.addChild(new Sphere(new BitmapFileMaterial(“ /Earth.jpg”, true), 400, 20, 20));

Ghi chú: Trong đối tượng material, có ba đối tượng FlatMaterial, GouraudMaterial PhongMaterial tương ứng với ba thuật toán Shading tiếng: thuật toán FlatShading, thuật toán Shading Gouraud thuật toán Shading Phong Thuật toán Shading Gouraud nhanh độ xác khơng cao thuật tốn Phong1 Ngược lại, thuật tốn Phong lại có tốc độ

chậm, thuật tốn phối màu 3D tuyệt với – thể độ xác cao Chính lẽ đó, bạn muốn thước phim Flash hoạt động nhẹ nhàng, trường hợp cần Shading bề mặt khơng địi hỏi độ xác q cao, bạn nên sử dụng đối tượng GouraudMaterial Tuy nhiên, số phân mãnh đối tượng tương đối nhỏ, bạn sử dụng PhongMaterial Phương thức khởi tạo đối tượng tương đối giống nhau, nhiên cần triệu gọi đến đối tượng Lights Chúng ta quay lại sau tìm hiểu đối tượng Lights 7.4.3 Đối tượng Lights - Hiệu ứng ánh sáng

Trong hiệu ứng ánh sáng này, sử dụng phương thức khởi tạo cho đối tượng PointLight3D

var light:PointLight3D = new PointLight3D(showLight:Boolean, flipped:Boolean);

Trong đó,

• Tham số showLight cho phép ánh sáng hiển thị hay khơng hiển thị • Tham số flipped áp dụng cho đối tượng 3D tải từ file DAE Nó

chỉ vùng tác dụng ánh sáng khung ảnh

Đối tượng PointLight3D có phương thức thuộc tính tương đối giống với đối tượng hình thể Bạn tham khảo bảng muốn sử dụng phương thức hay thuộc tính

Bây giờ, sử dụng đối tượng PointLight3D phương thức khởi tạo ba đối tượng FlatMaterial, GouraudMaterial PhongMaterial

 var fm:FlatMaterial = new FlatMaterial(light:LightObject3D, lightColor:uint, ambientColor:uint, specularLevel:uint)

 var gm:GouraudMaterial = new GouraudMaterial(light:LightObject3D, lightColor:uint, ambientColor:uint, specularLevel:uint)

 var gm:PhongMaterial = new PhongMaterial(light:LightObject3D, lightColor:uint, ambientColor:uint, specularLevel:uint)

CHƯƠNG THƯ VIỆN PAPERVISION3D

- 197 - 7.4.4 Đối tượng Shader - Hiệu ứng đổ bóng

Để tạo hiệu ứng đổ bóng Shader, có ba thuật tốn tiếng: FlatShader, GouraudShader PhongShader tương tự với đối tượng FlatMaterial, GouraudMaterial PhongMaterial nêu Ba đối tượng có phương thức khởi tạo giống với FlatMaterial, GouraudMaterial PhongMaterial

7.4.5 Đối tượng ShadedMaterial

Ta sử dụng đối tượng để tạo màu tô cho vật thể Phương thức khởi tạo đối tượng chứa đối tượng Shader

 var sm:ShadedMaterial = new ShadedMaterial(material:BitmapMaterial, shader:Shader, compositeMode:int)

Theo cách khởi tạo này, cách phối màu bitmap, ta cịn sử dụng thêm hiệu ứng tạo bóng Kết thu hình ảnh gần với giới thực Bạn quan sát kĩ kết thu kết hợp bitmap hiệu ứng đổ bóng ShadedMaterial hình minh họa bên

Hình 7.20– Tơ màu ShadedMaterial 7.4.6 Đối tượng CompositeMaterial

Với đối tượng này, bạn bổ sung nhiều cách phối màu lúc cho vật thể Phương thức khởi tạo khơng chứa tham số

var cm:CompositeMaterial = new CompositeMaterial();

Để bổ sung material cho đối tượng cm, bạn sử dụng phương thức addMaterial đối tượng

cm.addMaterial(material:MaterialObject3D):void; 7.4.7 Đối tượng MaterialsList

Đối tượng MaterialsList sử dụng khởi tạo đối tượng Cube Phương thức khởi tạo cảu MaterialsList không chứa tham số

Để bổ sung material cho đối tượng ma, bạn sử dụng phương thức addMaterial

ma.addMaterial(material:MaterialObject3D, name:String);

Trong đó, tham số name tên mặt hình hộp: all (áp dụng cho tất cả), front (trước), back(sau), top(trên), bottom(dưới), right(phải) left(trái) 7.5 Import mơ hình 3D

Dù việc tạo dựng đối tượng đồ họa 3D PaperVision3D tương đối thuận lợi, nhiên để tạo dựng đối tượng đồ họa phức tạp giới thực tương đối phức tạp Do đó, cần sử dụng chương trình thiết kế đồ họa 3D chuyên nghiệp Maya, 3DsMax… Papervision3D hỗ trợ định dạng DAE Bạn sử dụng Maya để xuất tập tin Để tải đối tượng tập tin 3D vào Flash, ta sử dụng đối tượng org.papervision3d.objects.parsers.DAE

Hàm tạo đối tượng DAE tương đối đơn giản

var dae:DAE = new DAE(autoplay:Boolean, name:String, loop:Boolean); Trong đó,

 Tham số autoplay cho phép hành động đối tượng import từ

tập tin DAE thực thi hay không (bởi tập tin DAE chứa đối tượng 3D động)

 Tham số name quy định tên cho đối tượng DAE

 Tham số loop quy định lặp lại hành động cho đối tượng tập tin DAE

Để tải đối tượng tập tin DAE vào Flash, ta sử dụng phương thức load dae.load(url:String)

Trong đó, url địa tập tin DAE

Sau bạn tải đối tượng tập tin DAE vào Flash, bạn thao tác với đối tượng với đối tượng 3D khác tạo Papervision3D Một khó khăn gặp phải cần có hiểu biết chương trình thiết kế nhân vật 3D để đưa vào Flash Với chương trình chun nghiệp Maya khơng phải học nhanh được, bạn sử dụng tập tin DAE chia sẻ cộng đồng mạng để sử dụng

CHƯƠNG THƯ VIỆN PAPERVISION3D

- 199 -

Hình 44 – Google Sketchup

Bạn việc tìm kiếm mơ hình sau tải máy bạn Bạn nhận tập tin *.kmz Tập tin đọc Google Earth Tuy nhiên, chất tập tin tập tin nén Bạn giải nén chương trình WinRar bạn thu thư mục chứa tập tin DAE

TỔNG KẾT CHƯƠNG

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/. http://www.papervision3d.org/docs/as3/