GIÁO TRÌNH SCRIPT VÀ KĨ THUẬT HOẠT HÌNH (Lưu hành nội bộ)

GIÁO TRÌNH SCRIPT VÀ KĨ THUẬT HOẠT HÌNH (Lưu hành nội bộ)

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ộ) Huế, tháng 06/2011 Blank Page -2- 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 3.4 Làm việc với Library 59 -3- 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 Tổng kết chương 143 CHƯƠNG CÁC HIỆU CHỈNH NÂNG CAO 145 6.1 Xử lý âm thanh, hình ảnh video 145 -4- 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 TÀI LIỆU THAM KHẢO 209 -5- Blank Page -6- 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 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 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 Mang tính chất tổng hợp Gồm chương Phần giúp bạn đọc hoà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 A Huế, tháng 06/2011 Blank Page -8- 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, thấy rõ điểm ảnh Hãy quan sát ví dụ ảnh sau Hình 1.1 – Đồ họa điểm Đồ 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 CHƯƠNG GIỚI THIỆU VỀ FLASH 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 Khơng có nhiều định dạng đồ họa điểm hỗ trợ chế độ transparent (hay chế độ màu alpha) Nhưng với đồ họa vector, tính hỗ trợ cách hoàn hảo Với đồ họa vector, chương trình chỉnh sửa thiết kế đồ họa ln hỗ trợ chế độ lớp Layer, với đồ họa điểm, có vài định dạng hỗ trợ lớp Layer (như psd photoshop) Định dạng Flash mà làm quen 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 đố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 định dạng phim khác - 10 - CHƯƠNG THƯ VIỆN PAPERVISION3D 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)); Trong cách này, bạn lưu ý hình ảnh dùng làm màu tơ cần phải đính kèm với file Flash theo cấu trúc thư mục – tức file ảnh jgp nằm cấp với thư mục chứa file Flash sau biên dịch - 195 - CHƯƠNG THƯ VIỆN PAPERVISION3D 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 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ó 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) Đối tượng light nguồn sáng phát ra, kiểu LightObject3D Tham số lightColor quy định màu chiếu sáng, tham số ambientColor quy định màu phối xung quanh (do hiệu ứng từ nguồn sáng khác bao quanh), tham số specularLevel định mức phản xạ màu vật thể Tên đầy đủ Bùi Tường Phong Sinh năm 1942, 1975 Ông nhà khoa học hàng đầu giới đồ họa máy tính người Việt Nam - 196 - CHƯƠNG THƯ VIỆN PAPERVISION3D 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ố var ma:MaterialsList = new MaterialsList(); - 197 - CHƯƠNG THƯ VIỆN PAPERVISION3D Để 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 chuyên 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 Một địa hữu ích để bạn khai thác thư viện hình ảnh DAE http://www.sketchup.google.com Đây dự án miễn phí google cung cấp cho ta mơ hình 3D tuyệt vời - 198 - CHƯƠNG THƯ VIỆN PAPERVISION3D 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 Với dự án này, có nhiều mơ hình 3D để khai thác sử dụng dự án hoạt hình 3D - 199 - CHƯƠNG THƯ VIỆN PAPERVISION3D TỔNG KẾT CHƯƠNG Trong chương này, giới thiệu đến bạn cách sử dụng lớp thư viện PaperVision3D để tạo đối tượng đồ họa 3D cách thức tạo chuyển động giới thực Đây thư viện mã nguồn mở xây dựng ActionScript Hi vọng bạn có nhìn tổng quan đồ họa 3D Với thư viện PaperVision3D này, bạn tạo dựng cho thước phim 3D đơn giản game 3D đơn giản - 200 - CHƯƠNG THƯ VIỆN PAPERVISION3D Blank Page - 201 - BÀI TẬP THỰC HÀNH Để phát triển kĩ thiết kế lập trình Flash CS5 ActionScript3.0, đề nghị bạn thực thực hành sau BÀI THỰC HÀNH SỐ SỬ DỤNG CÔNG CỤ VẼ CƠ BẢN Hãy sử dụng công cụ vẽ để tạo nội dung sau Stage: Tạo Layer đổi tên thành BauTroi Chọn biểu tượng bảng màu Chọn Stroke color = None, Fill Color = Linear Gradient Chọn chế độ đổ màu Extends Color Trong kiểu đổ màu cầu vồng này, bạn chọn hai màu: màu đen (mã màu #000000) đến màu đen trắng (mã màu #999999), màu đen phía trên, màu đen trắng phía Sử dụng cơng cụ Rectangle, tạo hình chữ nhật Layer Sử dụng bảng hiệu chỉnh Align để can chỉnh kích thước vị trí cho hình chữ nhật trùng khớp với kích thước Stage Tạo Layer đổi tên thành MatTrang Chọn biểu tượng Oval với thuộc tính Stroke Color = None, Fill Color màu Radial Gradient (màu có mã màu #FFFF00, màu có mã màu #FFFFFF) Hãy sử dụng cơng cụ Gradient Transform để hiệu chỉnh kích thước vịng màu bên lớn đặt mặt trăng vào vị trí thích hợp tranh Sử dụng công cụ PolyStar để tạo màu vàng nhạt, kích thước 20x20 Convert ngơi sang biểu tượng Graphics đặt tên Sao Chọn công cụ Spray Brush, chọn biểu tượng cho Sao Hiệu chỉnh thông số sau: Scale width = 20% Scale height = 25% Chọn ba tùy chọn Random Scaling, Rotate Symbol Random Rotation Hiệu chỉnh kích thước Brush width=height=300px, Brush Angel 90 CW Tạo Layer đặt tên Sao Hãy quét nhanh công cụ Spray Brush lên Layer để tạo nhỏ bầu trời Tạo Layer đặt tên KhungCua Sử dụng cơng cụ Rectangle Primitive để tạo hình chữ nhật có kích thước width=200, height=150, chọn Fill color None, Stroke color màu đen, loại đường viền style stippled, kích thước đường viền 5px Sử dụng công cụ Deco để đổ màu nghệ thuật (cành hoa nho) cho khung cửa sổ Tạo Layer đặt tên NgoiNha Hãy sử dụng công cụ cần thiết để vẽ nên nhà mơ ước bạn Lưu ý: sử dụng màu sắc thật hài hòa đêm tối Tạo Layer đặt tên DamMay Hãy sử dụng công cụ Pen để tạo nên đám mây có viền cong Tơ màu cho màu xanh nhạt (mã màu #66CCCC) loại bỏ viền Tạo Layer đặt tên ConNguoi Hãy sử dụng công cụ cần thiết để phát họa chân dung cô gái ánh trăng Tạo Layer đặt tên DenLong Hãy phát họa đền lồng đặt vào tay gái Tạo Layer đặt tên CayCoi Hãy phát họa hình rặng tre cổ thụ Chọn màu sắc hợp lý 10 Tạo Layer đặt tên TieuDe Sử dụng công cụ Text để soạn thảo Layer nội dung “Ánh Trăng Trên Quê Hương” BÀI THỰC HÀNH SỐ SỬ DỤNG BIỂU TƯỢNG VÀ TẠO HOẠT CẢNH Hãy sử dụng ảnh chứa đối tượng vẽ để thực thi thực hành số Hãy chuyển đổi MatTrang Layer thành biểu tượng MovieClip đặt tên cho MatTrang Hãy sử dụng Classic Tween để tạo hiệu ứng động cho mặt trăng Mặt trăng có hai hiệu ứng động là: đổ bóng mờ di chuyển Để tạo hiệu ứng bóng mờ, sử dụng thuộc tính Filter=Blur MovieClip Các thao tác sử dụng Classic Tween Hãy xóa bỏ ngơi bầu trời Trong thư viện, chọn lại biểu tượng Graphic Sao mà bạn tạo Bạn chuyển đổi thành MovieClip Sử dụng Motion Tween để tạo hiệu ứng tăng giảm độ suốt (thuộc tính Alpha MovieClip) Thuộc tính thay đổi từ 80% đến 100% Tiếp tục sử dụng công cụ Spray Brush, lần bạn chọn biểu tượng cho MovieClip Sao Hiệu chỉnh thông số tương tự thực hành số Sau đó, quét lên Layer Sao Hãy sử dụng công cụ Bone để tạo chuyển động cho đôi chân cô gái Các phần cịn lại khơng cần tạo chuyển động Bạn kết hợp với Motion Tween để tạo di chuyển (thay đổi vị trí ảnh) cho gái Sử dụng Motion Tween để tạo chuyển động cho đám mây Các đám mây chuyển động theo dạng thức 3D (kết hợp công cụ 3D Rotation 3D Translation) Hãy tạo Layer đặt tên BienHinh Trên Layer này, bạn tạo ngũ giác Sử dụng Shape Tween để tạo hiệu ứng biến hình cho hình thể thành hình ngơi năm cánh Hãy đặt vào vị trí thích hợp - 203 - BÀI THỰC HÀNH SỐ SỬ DỤNG BIỂU TƯỢNG VÀ TẠO HOẠT CẢNH (TIẾP THEO) Hãy sử dụng công cụ tạo hoạt hình (Tween, Bone, Bind, 3D,…) để tạo VideoClips Lưu ý này, sinh viên cần kết hợp với hát Nội dung phim nội dung hát phải tương đối phù hợp Bài hát dài không phút BÀI THỰC HÀNH SỐ LẬP TRÌNH VỚI ACTIONSCRIPT Trong thực hành này, bạn cần hoàn tất nội dung sau: Tạo đối tượng bóng cơng cụ Oval Sau đó, chuyển đổi thành biểu tượng MovieClip Cài đặt tên thể cho QuaBong Hãy xóa bóng Stage Mở khung soạn thảo ActionScript, bạn viết ActionScript để tạo chuyển động 3D cho bóng, thay đổi thuộc tính alpha chuyển động Sự thay đổi thuộc tính alpha qui định theo thời gian (thay đổi từ 80% đến 100%) Tạo Scene Trên Scene này, bạn sử dụng hai ảnh Hiệu chỉnh kích thước cho chúng Kích thước chúng khơng q lớn, cho ta đặt chúng Stage khoảng trống Sử dụng đối tượng Tween để tạo hoạt hình cho hai ảnh Để tạo hoạt hình nhờ vào Tween ActionScript, bạn thao tác hướng dẫn sau: Hãy đưa hai đối tượng ảnh vào thư viện, sau chuyển đổi chúng thành biểu tượng MovieClip, đặt tên cho chúng Anh1 Anh2 Bạn quan sát mã chương trình sau import fl.transitions.easing.*; import fl.transitions.Tween; var OneTween:Tween; var TwoTween:Tween; Ở đây, bạn sử dụng package fl.transition Đối tượng Tween đưa vào để sử dụng Các hiệu ứng động đưa vào qua dòng lệnh thứ Tiếp theo, bạn tạo chuyển động cho đối tượng nhờ vào đối tượng Tween Cách sử dụng Tween tương tự bạn tạo Thread OneTween = new Tween(Anh1, "y", Bounce.easeOut, 50, 100, 3, true); OneTween.start(); - 204 - TwoTween = new Tween(Anh2, "y", Bounce.easeOut, 250, 300, 3, true); TwoTween.start(); Đối tượng Tween có phương thức khởi tạo Tween(Object, String, Function, Number, Number, Number, Boolean) Object đối tượng mà ta áp dụng hiệu ứng Tween; String tên thuộc tính mà ta sử dụng – “x”, “y”,…; Function tên phương thức áp dụng – chi tiết bạn thử nghiệm với chức Add New Items to Script với gói fl.transition.easing; Number thứ Number thứ hai hai biên chuyển động Number thứ ba số lần chuyển động (duration), tham số Boolean mặc định sử dụng true Hãy kiểm tra xem thử hoạt động hồn hảo hay khơng Đây thực cách tạo chuyển động hoàn hảo Tạo dự án khác Trong dự án có ba file: file main.fla, file human.as, file student.as File main.fla khung trình diễn Các file cịn lại sử dụng lớp File human.as lớp chứa hai thuộc tính Name:String Age:int bốn phương thức void SetName(String), String GetName(void), void SetAge(int) int GetAge(void) Lớp student kế thừa lớp Human Ngồi ra, cịn có thêm thuộc tính ID:String hai phương thức void SetID(String), String GetID(void) Quay trở lại với khung trình diễn chính, bạn phát họa hình người Sau đó, bạn convert sang biểu tượng MovieClip Cài đặt tên hiển thị cho ConNguoi Cuối bạn xóa khỏi stage Trên khung trình diễn này, bạn tạo Button ba textbox kèm theo ba label Ba label có nội dung là: Tên, Tuổi, MãSV Ba textbox cịn lại tương ứng dùng để nhập nội dung theo ba trường (Name, Age ID) Khi người dùng nhập liệu nhấp nút Add, hình người hiển thị bên Đồng thời, bên cạnh thông tin đối tượng (Tên, Tuổi MãSV) Trong thực hành này, bạn tạo dự án gồm bốn file: main.fla, solutions.as, solution1.as solution2.as Trên stage main có ba textbox ba label tương ứng để nhập số a, b c Một nút nhấn để giải phương trình, label để hiển thị kết File solutions.as interface chứa hai phương thức DoSolution ToString Hai lớp solution1.as solution2.as hai lớp thực thi giao diện solutions.as Phương thức DoSolution đối tượng solution1.as giải phương trình bậc 1, phương thức DoSolution đối tượng solution2.as giải phương trình bậc hai Phương thức ToString hai đối tượng có nhiệm vụ in nghiệm cuối Đối tượng solution1.as chứa hai thuộc tính a:Number b:Number Đối tượng solution2.as chứa ba thuộc tính a:Number, b:Number c:Number Sau bạn hoàn tất yêu cầu này, hi vọng bạn hiểu rõ giao diện - 205 - BÀI THỰC HÀNH SỐ XÂY DỰNG PHIM QUẢNG CÁO BẰNG FLASH Hãy xây dựng thước phim quảng cáo giới thiệu phim có sử dụng kĩ xảo điện ảnh Đoạn phim quảng cáo có đội dài trình diễn khoảng phút Trong phim phải sử dụng âm có lời thuyết trình chữ lời thuyết minh (những đoạn phim sử dụng lời thuyết minh đánh giá cao) Để xây dựng thước phim quảng cáo này, bạn cần sử dụng phim hồn chỉnh Sau đó, bạn cắt lấy đoạn phim hay phim để tạo phim quảng cáo hoàn chỉnh (nếu khơng có phim hồn chỉnh, bạn liên hệ với giảng viên để cung cấp đoạn phim mẫu) BÀI THỰC HÀNH SỐ HOÀN TẤT DỰ ÁN VÀ XUẤT BẢN Hãy vận dụng kiến thức học giáo trình này, bạn lựa chọn dự án sau đây: Các dự án Dự án Tạo dự án Game Flash kết hợp với ActionScript theo yêu cầu sau a) Màn hình Splash (scene 1): hiển thị bốn Menu: Play, Score, Help Quit Play cho phép người dùng chuyển sang hình thứ hai (scene 2), hình này, người dùng chơi game Score cho phép hiển thị kết chơi, hình tương ứng với scene Help cho phép chuyển sang hình trợ giúp (scene 4), hình hiển thị vài thông tin game, cách chơi game b) Nội dung game game hành động, game thể thao, game học tập cần phải điều khiển chuột bàn phím c) Nếu người dùng hồn tất việc chơi game, thông số mà người chơi đạt được: Họ Tên (nhập vào từ đầu), điểm Dữ liệu đọc từ file data.xml Dự án Tạo dự án phim hoạt hình Flash kết hợp với ActionScript theo yêu cầu sau a) Phim mô tả chủ đề phải có cấu trúc (có kịch bản) b) Phim có độ dài khơng 10 phút c) Có Playback để điều khiển d) Có sử dụng âm thanh, tiếng nói (phải đồng với đối tượng phim) e) Không chấp nhận Clip nhạc Dự án Tạo dự án kĩ xảo điện ảnh Flash kết hợp với ActionScript theo yêu cầu sau - 206 - a) Tạo thước phim có sử dụng kĩ xảo điện ảnh (chỉ chấp nhận kĩ xảo điện ảnh, khơng chấp nhận kĩ xảo truyền hình) b) Phim có độ dài khơng 10 phút c) Các kĩ xảo phải sử dụng phù hợp với nội dung, số lượng kĩ xảo không 10 d) Thước phim cuối phải có nội dung - 207 - Blank Page - 208 - TÀI LIỆU THAM KHẢO [1] Nguyễn Trường Sinh Lập trình ActionScript cho Flash, Tập NXB Lao động Xã hội, 2007 [2] Nguyễn Công Minh Tự học nhanh Flash CS4 Pro cho người học NXB Hồng Đức, 2009 [3] Robert Reinhardt and Snow Dowd Flash CS4 Professional Wiley Publishing, 2009 [4] Todd Perkins CD Video Training Flash CS4 Professional Essential Training Lynda.com, 2009 [5] Todd Perkins CD Video Training ActionScript in Flash CS4 Lynda.com, 2009 [6] Roger Braunstein Actionscript 3.0 Wiley Publishing 2010 [7] Tim Jones, Barry J Kelly, Allan S Rosson, David Wolfe Foundation Flash: Cartoon Animation Apress, 2007 - 209 -