Trong cửa sổ này, chúng ta có thể điền serial vào – tương ứng với Provide a serial number (nếu đ~ có một số serial), ngược lại, hãy chọn Install this product as a trial (nếu các bạn mu[r]
(1)(2)ĐẶNG NGỌC HOÀNG THÀNH
SCRIPT VÀ KĨ
THUẬT HOẠT HÌNH
(Giáo trình giảng dạy Flash CS5 ActionScript 3.0)
(3)(4)LỜI NÓI ĐẦU
dobe Flash phần mềm chuyên nghiệp để tạo c|c thước phim hoạt hình, c|c 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 c|c 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 c|c chương v{ Phần giúp
bạn đọc hoàn thiện c|c thước phim hoạt hình c|c 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 – điều mà chưa có gi|o trình n{o đề cập đến
Khi biên soạn gi|o trình n{y, tơi đ~ cố gắng hồn thiện Tuy nhiên, khơng thể tránh khỏi sai sót Tơi mong nhận đóng góp ý kiến quý báu bạn độc c|c bạn đồng nghiệp Mọi thư từ đóng góp xin gửi địa email sau dnhthanh@hueic.edu.vn myhoangthanh@yahoo.com
Huế, tháng 08/2010
Chân thành cảm ơn !
(5)(6)PHỤ LỤC
LỜI NÓI ĐẦU
CHƯƠNG GIỚI THIỆU VỀ FLASH 10
1.1 Sơ lược đồ họa vector lịch sử đời Flash 10
1.2 So sánh Flash với Silverlight JavaFx 13
1.3 C{i đặt Adobe Flash CS5 14
1.4 Giới thiệu Adobe Flash CS5 17
1.4.1 Các chế độ tùy biến giao diện 19
1.4.2 Tạo dự án cho desktop mobile 20
1.4.3 Layer, Frame, Scene Movie 22
1.4.4 Vùng công cụ Tools 25
1.4.5 Vùng thuộc tính Properties 25
1.4.6 Vùng soạn thảo ActionScript 26
1.4.7 Các vùng chức kh|c 28
Tổng kết chương 35
CHƯƠNG CÁC CÔNG CỤ VẼ CƠ BẢN 37
2.1 Các công cụ Pencil, Brush Erase 37
2.2 Cơng cụ vẽ hình 39
2.3 Công cụ Text 48
2.4 Công cụ chọn Selection Lasso 50
2.5 Các công cụ đổ màu Paint Bucket, Ink Bottle bắt màu EyeDropper 51
2.6 Công cụ Free Transform Gradient Transform 53
(7)2.8 Làm việc với c|c đối tượng 59
Tổng kết chương 62
CHƯƠNG CÁC BIỂU TƯỢNG TRONG FLASH 64
3.1 Biểu tượng Graphic 64
3.2 Biểu tượng Button 66
3.3 Biểu tượng MovieClip 68
3.4 Làm việc với Library 69
Tổng kết chương 70
CHƯƠNG TẠO HOẠT CẢNH 72
4.1 Tìm hiểu TimeLine 72
4.2 Classic Tween 79
4.3 Shape Tween 81
4.4 Motion Tween 83
4.5 Công cụ Bone Bind 88
4.6 Công cụ Deco 92
4.7 Công cụ 3D Translation 3D Rotation 104
Tổng kết chương 107
CHƯƠNG LẬP TRÌNH VỚI ACTIONSCRIPT 109
5.1 Các kiểu liệu 111
5.2 Biến Hằng 112
5.3 Toán tử Biểu thức 113
5.4 Các cấu trúc lệnh điều khiển 121
5.4.1 Câu lệnh if 121
(8)5.4.3 Các câu lệnh lặp for, while v{ do…while 123
5.4.4 Các lệnh continue, break return 126
5.5 Hàm 127
5.6 Lớp v{ Đối tượng 130
5.6.1 Xây dựng lớp 130
5.6.2 Làm việc với đối tượng 134
5.6.3 Sự kiện chuột 137
5.6.4 Sự kiện bàn phím 138
5.7 Đưa đối tượng vào ActionScript 139
5.8 Làm việc với XML 141
5.9 Vùng chức Code Snippets 143
Tổng kết chương 170
CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO 172
6.1 Xử lý âm thanh, hình ảnh video 172
6.2 Tạo kĩ xảo điện ảnh với Flash 177
6.3 Tạo thước phim Flash tựa 3D 181
6.4 Ghép nối nhiều hoạt cảnh 188
6.5 Kĩ thuật mặt nạ mask 188
6.6 Tạo nút nhấn điều khiển 196
6.7 Xuất Movie 198
6.8 Xuất tập tin Flash suốt trình duyệt 202
Tổng kết chương 207
CHƯƠNG THƯ VIỆN PAPERVISION3D 209
(9)7.2 Cấu hình v{ c{i đặt PaperVision3D cho Adobe Flex Buider 213
7.3 Chương trình Hello, PaperVision3D ! 216
7.4 C|c đối tượng PaperVision3D 220
7.4.1 C|c đối tượng hình thể 220
7.4.2 Đối tượng Material - Phối màu cho hình thể 228
7.4.3 Đối tượng Lights - Hiệu ứng ánh sáng 232
7.4.4 Đối tượng Shader - Hiệu ứng đổ bóng 233
7.4.5 Đối tượng ShadedMaterial 233
7.4.6 Đối tượng CompositeMaterial 233
7.4.7 Đối tượng MaterialsList 234
7.5 Import mơ hình 3D 234
Tổng kết chương 236
BÀI TẬP THỰC HÀNH 238
BÀI THỰC HÀNH SỐ 238
BÀI THỰC HÀNH SỐ 239
BÀI THỰC HÀNH SỐ 240
BÀI THỰC HÀNH SỐ 240
BÀI THỰC HÀNH SỐ 242
BÀI THỰC HÀNH SỐ 243
(10)(11)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ở l{ c|c điểm ảnh (pixel) Mỗi ảnh đồ họa điểm
là 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, bạn
thấy rõ điểm ảnh Hãy quan sát ví dụ ảnh sau
(12)Đồ họa Fractal: sử dụng thuật toán đệ quy Nếu quan t}m đến dạng đồ họa này, tham khảo thêm tài liệu liên quan đến đồ họa Fractal hay hình học Fractal
Hình – Đồ 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
(13)Hình – Đồ họa vector
Định dạng Flash mà làm quen đ}y thuộc v{o đồ họa vector Flash thường sử dụng để tạo hiệu ứng động Xét phạm trù đó, có nhiều điểm tương đồng với kĩ thuật tạo video (kĩ thuật 24 hình/giây) Nhưng có ưu điểm phim tạo Flash khơng bị vỡ hạt phóng to (trừ trường hợp phim có chứa c|c đối tượng đồ họa điểm) V{ đặc biệt, kích thước phim tạo Flash nhỏ gọn so với c|c định dạng phim khác
Lịch sử đời Flash
(14)Với phiên Adobe Flash CS4, công ty Adobe đ~ bổ sung vào cho Flash tính mạnh mẽ: hỗ trợ nhiều định dạng import liệu; bổ sung cơng cụ tạo hoạt hình mạnh mẽ Bone, Bind, 3D Translation, 3D Rotation,…
Phiên Flash l{ CS5 (cho đến năm 2010) Hiện nay, Adobe đ~ tạo ấn mã nguồn mở cho Flash l{ cơng nghệ Flex Một công nghệ đời sớm hỗ trợ tạo giao diện web – RIA Flex công nghệ hứa hẹn đem lại nhiều lợi nhuận cho Adobe (nhờ vào trình phát triển Adobe Flex Buider) Nó đối thủ lớn công nghệ Silverlight Microsoft JavaFx Sun (nay mua lại Oracle)
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 c{ng len lỏi vào ngóc ngách xã hội C|c website l{ nơi cung cấp thông tin, trao đổi v{ 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ỏ l{ 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 l{ đồ 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 đ~ qu| 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 yê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 c|c dòng điện thoại)
Silverlight mặc dầu đời sau Flash, với hậu thuẩn tập đo{n
(15)ứ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 n{y hoạt động tốt Windows, Linux MacOS Nhưng điều đ|ng tiếc JavaFx lại đời muộn màng
Với tuổi đời cao, lượng người dùng có kinh nghiệm lớn, lập trình viên nhà phát triển đ~ qu| quen thuộc với Flash Flash v{ phát triển khoảng thời gian dài Flash có ba định hướng trọng tâm: phát triển RIA cho web, tạo c|c chương trình ứng dụng thơng qua Adobe Air cho desktop Flash Lite cho c|c dòng di động tạo thước phim trình diễn Trong năm 2010, W3C đ~ đưa chuẩn – chuẩn HTML – hứa hẹn 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 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, bạn 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
(16)Hình – Cấu trúc thư mục bên đĩa DVD c{i đặt Flash CS5 Hãy nhấp đơi chuột vào tập tin Set-up.exe, đó, có cửa sổ sau đ}y
Hình – M{n hình ch{o đón c{i đặt Adobe Master CS5
H~y đọc qua c|c đ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
(17)Sau đó, bạn nhấp Next 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 qu| 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
Hình – Cửa sổ Serial Number
(18)Hình – 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 Ngoài ra, 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) Ngoà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 l{ phần mềm chuyên xử lí đồ họa vector, Fireworks l{ 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
Ở mục Location bên dưới, bạn chọn vị trí mà bạn c{i đặt Theo mặc định, c{i đặt v{o thư mục C:\Program Files\Adobe Bạn cần lưu ý dung lượng ổ đĩa d{nh cho việc c{i đặt Bạn cần đảm bảo dung lượng để cài đặt – Total install phải nhỏ dung lượng ổ đĩa cịn trống – Available Sau đó, nhấp vào nút Install chờ đợi cho qu| trình c{i đặt hồn tất Để kết thúc qu| 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
(19)- Vào Start > All Programs
- Chọn Adobe Master Collection CS5 - Chọn Adobe Flash Professional
Hình – Khởi động Adobe Flash Professional CS5
Khi đó, m{n hình Splash – m{n hình ch{o đón Adobe Flash Professional CS5 sau đ}y
(20)Hình 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 c|c 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|c 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