GIỚI THIỆU VỀ PHẦN MỀM FLASH VÀ MACROMEDIA FLASH PROFESSIONAL 8

Một phần của tài liệu THIẾT KẾ PHẦN MỀM MÔ PHỎNG HỖ TRỢ HỌC TẬP VÀ GIẢNG DẠY MÔN CNCĐHA (Trang 61 - 91)

1. Nội dung thiết kế tốt nghiệp:

3.1GIỚI THIỆU VỀ PHẦN MỀM FLASH VÀ MACROMEDIA FLASH PROFESSIONAL 8

Adobe Flash (trước đây có tên là Macromedia Flash) là một nền tảng đa phương tiện do hãng Macromedia tạo ra và hiện nay được hãng Adobe phát triển và phân phối. Kể từ khi ra đời vào năm 1996, Flash đã trở thành một phương thức phổ biến để bổ sung hoạt hình và tương tác cho các trang Web.Flash là một công cụ soạn thảo để người sử dụng có thể thiết kế và phát triển để tạo các trình chiếu, các ứng dụng và các nội dung khác mà cho phép tương tác với người sử dụng. Những dự án Flash có thể là những hoạt hình đơn giản, những video và để xây dựng các ứng dụng Internet đa phương tiện. Chúng ta có thể làm các ứng dụng truyền thông bằng Flash rất phong phú bao gồm hình ảnh, âm thanh, video và các hiệu ứng đặc biệt khác. Flash rất thích hợp để tạo nội dung cho các trang Web bởi vì dung lượng file Flash rất nhỏ. Các hình ảnh mà chúng ta vẽ trong Flash là các ảnh vectơ thay vì ảnh bitmap. Đồ họa vectơ yêu cầu bộ nhớ tối thiểu và không gian lưu trữ nhỏ hơn so với ảnh bitmap, vì thế các đoạn phim của chúng ta sẽ tải xuống nhanh hơn và mịn hơn. Ngoài ra, các đồ họa vectơ còn có ưu điểm là ta thể thay đổi kích thước mà không làm giảm chất lượng của ảnh.

3.1.1 Lịch sử ra đời

Chương trình Flash là đứa con tinh thần của Janathan Gay, người đã phát triển ý tưởng này từ khi còn là sinh viên và mở rộng nó khi làm việc cho Silicon Beach Software.

Tháng một năm 1993, Jonathan Gay, Charlie Jackson và Michelle Welsh mở một công ty phần mềm nhỏ có tên là FutureWave Software và cho ra đời sản phẩm đầu tiên là SmartSketch viết từ C++. Đây là một ứng dụng vẽ hình họa dùng cho máy tính dùng bút cài hệ điều hành PenPoint, SmartSketch được thiết kế để giúp cho việc vẽ đồ họa vi tính dễ dàng như vẽ trên giấy. Khi PenPoint thất bại trên thị trường, SmartSketch được chuyển sang cho Microsoft Windows và MacOS. Khi mạng Internet bắt đầu bùng nổ, FutureWave bắt đầu nhận ra rằng công cụ vẽ hoạt hình cho

của hãng Macromedia lúc bấy giờ. Năm 1995, hãng chỉnh sửa SmartSketch bằng cách đưa thêm tính năng tạo hoạt hình từng khung một và phát hành nó với cái tên FutureSplash Animator cho cả Macintosh và PC. Khi đó, công ty đã nhận thêm lập trình viên thứ hai là Robert Tatsumi, họa sĩ Adam Grofcsik và chuyên viên quảng cáo Ralph Mittman. Tatsumi chú trọng lập trình cho giao diện người sử dụng của phần mềm biên tập còn Gay viết mã cho phần tạo đồ họa bằng toán học cũng như plug-in cho trình duyệt. Sản phẩm được chào hàng cho Adobe và được Microsoft sử dụng với những ứng dụng đầu tiên trên MSN. Tháng 12 năm 1996, Macromedia đã giành được phần mềm tạo hoạt hình này và phát hành nó với cái tên Flash (kết hợp Future và SpLASH từ tên gốc do FutureWave đặt). Tháng 12 năm 2005, hãng Adobe đã mua lại Macromedia và giành quyền sở hữu công nghệ Flash.

Các phiên bản của chương trình biên tập Flash:

- FutureSplash Animator (1996): Phiên bản đầu tiên của Flash với công cụ biên tập cơ bản và một bảng tiến trình.

- Macromedia Flash 1 (1996): Phiên bản được Macromedia đặt tên lại

- Macromedia Flash 2 (1997): Phát hành cùng Flash Player 2, tính năng mới: thư viện đối tượng

- Macromedia Flash 3 (1998): Phát hành cùng Flash Player 3, tính năng mới: phần tử movieclip, tích hợp JavaScript, player độc lập hoặc trong suốt.

- Macromedia Flash 4 (1999): Phát hành cùng Flash Player 4, tính năng mới: biến bên trong, trường nhập dữ liệu, ActionScipt cải tiến và MP3 có thể stream.

- Macromedia Flash 5 (2000): Phát hành cùng Flash Player 5, tính năng mới: ActionScript 1.0 (dựa trên chuẩn ECMAScript, rất giống với JavaScript), hỗ trợ XML, Smartclip, định dạng văn bản HTML.

- Macromedia Flash MX (bản 6) (2002): Phát hành cùng Flash Player 6, tính năng mới: một bộ mã hóa/giải mã video, unicode, các thành phần giao tiếp người dùng, khả năng nén, API vẽ vector bằng ActionScript

- Macromedia Flash MX 2004 (bản 7): Phát hành cùng Flash Player 7, tính năng mới: ActionScript 2.0, cho phép lập trình hướng đối tượng, đáp ứng có sẵn, hỗ trợ khử năng cưa cho văn bản, tạo hiệu ứng tự động cho bảng tiến trình

- Macromedia Flash MX Professional 2004 (bản 7) (2003): Phát hành cùng Flash Player 7, tính năng mới có thêm: tạo presentation bằng slide giống như PowerPoint của Microsoft, tích hợp web service, nhập video, thành phần Media Playback, và nhiều thành phần khác hỗ trợ tạo ứng dụng web...

- Macromedia Flash 8 (2005): gồm 2 bản Basic và Professional với tính năng mới nổi bật là xử lý video, biên tập phần mềm cho ứng dụng di động. Bản Professional có thêm nhiều chức năng biên tập đồ họa như các bộ lọc, khả năng trộn màu...

- Adobe Flash CS3 Professional (bản 9) (2007): Phiên bản đầu tiên dưới cái tên của Adobe, hỗ trợ hoàn toàn cho ActionScript 3.0, cho phép chuyển đổi nhiều nội dung thành ActionScript, tăng cường khả năng tích hợp, giao tiếp với các phần mềm khác của Adobe như Photoshop hoặc Illustrator.

- Adobe Flash CS4 Professional (bản 10) (2008): Cho phép dựng đồ họa 3 chiều, tạo hoạt hình hướng đối tượng, engine cho văn bản tăng cường và nhiều cải tiến mới hơn cho ActionScript 3.0.

3.1.2 Các phần tử cơ bản của Flash

Trước tiên, sau khi khởi động chương trình Flash 8, chúng ta phải mở một file Flash bằng cách chọn Flash Document trong mục Create New.

Giao diện cơ bản của Flash có thể chia làm 6 phần như sau: - Menu (Highlight màu đỏ).

- Thanh công cụ (Highlight màu vàng).

- Vùng điều khiển chính (Highlight màu xanh chuối). - Vùng thiết kế (Highlight màu hồng).

- Bảng Panel hỗ trợ thiết kế (Highlight màu cam).

Hình 3.1 - Hình minh họa giao diện làm việc của Flash

Các bảng thuộc tính, Panel hỗ trợ hay Action có thể được đóng mở bằng cách click vào tên của chính nó. Vùng màu tím (Bảng thuộc tính Properties và bảng viết lệnh Actions) và màu cam (Bảng Panel hỗ trợ thiết kế) có thể đóng mở nhanh bằng công tắc còn vùng Timeline có thể đóng mở bằng nút Timeline.

Bây giờ chúng ta sẽ tìm hiểu từng vùng làm việc:

3.1.2.1 Menu

Hình 3.2 - Hình minh họa thanh menu của Flash

Gồm nhiều chức năng có nhiệm vụ điều khiển tổng quát cho file Flash.

3.1.2.2 Thanh công cụ (Toolbox) (adsbygoogle = window.adsbygoogle || []).push({});

- Công cụ Arrow (mũi tên): Sử dụng công cụ này để chọn đối tượng. Chúng ta có thể nhấp vào một đối tượng để chọn nó, nhấp đúp để chọn một đối tượng và tất cả các thành phần của nó hoặc kéo công cụ mũi tên để tạo một hộp chọn nhằm chọn tất cả những gì nằm trong phạm vi hộp chọn này.

Hình 3.3 – Thanh công cụ Flash

- Công cụ Line (vẽ đường): Sử dụng công cụ này để vẽ các đường thẳng. Giữ phím Shift khi chúng ta muốn vẽ các đường nằm ngang, thẳng đứng hoặc nghiêng 450. - Công cụ Pen (bút mực): Sử dụng công cụ này để vẽ các đường cong. Công cụ Pen sẽ vẽ các đường cong Bezier (là những đường cong với các nút kiểm soát mà chúng ta vẫn có thể dùng để kiểm soát đường cong).

- Công cụ Oval (Công cụ Ôvan): Sử dụng công cụ này để vẽ các đối tượng hình Ovan. Giữ phím Shift để vẽ các đường tròn.

- Công cụ Pencil (bút chì): Sử dụng công cụ này để vẽ từng điểm hoặc các đường tự do.

Định dạng nét vẽ gồm 3 thuộc tính:

- Straighten: Sau khi vẽ, nét vẽ gần như thẳng sẽ tự động hiệu chỉnh thành các

đường thẳng.

- Smooth: Sau khi vẽ, nét vẽ gần như cong sẽ tự động hiệu chỉnh thành các

đường cong.

- Ink: Sau khi vẽ, nét vẽ gần như sẽ giữ nguyên hiện trạng mà chúng ta thao tác.

- Công cụ Free Transform (biến đổi tự do): Sử dụng công cụ này để thay đổi hình dạng của đối tượng.

- Công cụ Ink Bottle (hộp mực): Sử dụng công cụ này để bổ sung hoặc sửa đổi màu của một đường.

- Công cụ Eyedropper (ống nhỏ mắt): Sử dụng công cụ này để chọn màu từ một đối tượng, để chúng ta có thể chọn được cùng một màu cho các hình vẽ của mình.

- Công cụ Hand (bàn tay): Sử dụng công cụ này để kéo Stage và tất cả các đối tượng tới các vị trí khác. Điều này có thể sẽ rất hữu ích nếu chúng ta phóng quá lớn và không thấy hết được toàn bộ Stage và chúng ta muốn làm việc với các phần khác nhau của Stage.

- Màu vẽ: Nhấp vào biểu tượng này để chúng ta mở hộp chọn màu, chúng ta có thể chọn màu dùng cho nét vẽ từ hộp này.

- Màu tô: Nhấp vào biểu tượng này chúng ta mở hộp chọn màu tô hoặc một màu gradient dùng để tô phía trong các đối tượng đã được vẽ.

Hình 3.4 - Bảng màu tô

- Màu mặc định: Nhấp vào biểu tượng này để chuyển màu nét vẽ thành màu đen và màu tô thành màu trắng.

- Không màu: Nhấp vào biểu tượng này để thay đổi màu vẽ hoặc màu tô hiện tại (phụ thuộc vào màu nào đang được chọn) thành không màu. Chúng ta không thể chọn tùy chọn này trong một số trường hợp nếu điều đó không có ý nghĩa (chẳng hạn như thiết lập màu nét vẽ thành không màu khi chúng ta vẽ một đường thay vì cho một đối tượng được tô).

- Bảng tùy chọn (Ô tùy chọn):Nhiều công cụ có các thiết lập tùy chọn xuất hiện trong bảng tùy chọn ở hộp công cụ. Muốn biết các tùy chọn làm gì, hãy giữ con trỏ chuột phía trên biểu tượng của mỗi tùy chọn một thời gian cho đến khi một hộp giải thích nhỏ xuất hiện kế bên con trỏ chuột.

- Công cụ Subselect: Công cụ này dùng để sửa đổi các đường mà chúng ta đã vẽ bằng bút mực.

- Công cụ Lasso (dây thòng lọng): Sử dùng công cụ này để tạo ra một vùng chọn tùy ý. Điều này sẽ giúp chúng ta chọn bất kì đối tượng nào có trong vùng chọn.

- Công cụ Text (văn bản): Sử dụng công cụ này để bổ sung một hộp văn bản. Nhấp một lần để tạo một hộp văn bản, chúng ta có thể mở rộng theo hướng ngang hoặc kéo để tạo ra một hộp văn bản có chiều rộng cố định.

- Công cụ Rectangle (hình chữ nhật): Sử dùng công cụ này để vẽ hình chữ nhật. Giữ phím Shift để vẽ hình vuông. Phụ thuộc vào tùy chọn mà chúng ta đã chọn, hình chữ nhật sẽ có góc vuông hoặc bo tròn.

- Công cụ Brush (cọ vẽ): Sử dụng công cụ này để vẽ tự do. Công cụ này có một số tùy chọn kiểm soát hiệu ứng được tạo ra bằng cách sử dụng nó.

Look Fill: Không cho tô màu nền. Brush size: kích thước của nét cọ. Brush shape: hình dạng của nét cọ.

Brush Mode: chế độ cọ khi vẽ. Trên biểu tượng thì nét cọ màu đỏ, hình tròn màu xanh được xem là một đối tượng có sắn trước đó có viền khung xanh đậm và nền màu xanh nhạt hơn, chúng ta có thể quan sát hình dưới đây để biết tính chất.

Paint Normal (nét cọ thông thường): nét sau chồng lên nét trước, kể cả viền.

Paint Fills (nét cọ nền): chỉ cho phép cọ đè lên màu nền, không đè viền. (adsbygoogle = window.adsbygoogle || []).push({});

Paint Behind (nét cọ sau): nét cọ nằm dưới đối tượng đã có trước đó.

Paint Selection (nét cọ vùng chọn): chỉ nét nằm trong vùng chọn được hiển thị.

Paint Inside (nét cọ bên trong): chỉ có những nét nằm trong được hiển thị, chúng ta phải kéo cọ từ trong vùng muốn vẽ ra ngoài thì nó mới được chấp nhận là vùng bên trong, và nét vẽ sẽ hiện trên vùng chúng ta muốn.

- Công cụ Fill Transform: Sử dụng công cụ này để thay đổi hình dạng và vị trí tô màu gradient.

- Công cụ Eraser (tẩy xóa): Sử dụng công cụ này để xóa các vùng trên bản vẽ. Chúng ta có các chế độ tẩy xóa như sau:

Eraser shape: hình dạng của cục tẩy.

Faucet: hút màu của các đối tượng riêng biệt, 1 màu/ hút.

Cách xóa:

Eraser Normal (xóa thông thường): xóa cả nền và khung viền.

Eraser Fills (xóa nền): chỉ xóa màu nền. Eraser Lines (xóa viền): chỉ xóa màu viền.

Eraser Selected Fills (xóa nền vùng chọn): chỉ những đối tượng trong vùng chọn bị xóa (không có viền).

Eraser Inside (xóa bên trong): xóa đối tượng từ trong ra ngoài, chúng ta kéo chuột từ vùng xóa ra bên ngoài, vùng được xóa được tính cho tới khung viền đầu tiên thì dừng.

Khi chúng ta sử dụng công cụ Eraser, Flash tự động làm mịn các cạnh còn lại của đối tượng. Cũng như với tất cả các công cụ vẽ khác, việc làm mịn này sẽ làm giảm tính phức tạp của đối tượng bằng cách vẽ cạnh với số điểm ít nhất có thể được. Kết quả cuối cùng là một tập tin nhỏ hơn về kích thước, cung cấp khả năng tải xuống nhanh hơn một khi tập tin của chúng ta được đưa lên một website nào đó.

- Công cụ Zoom (thu phóng): Sử dụng công cụ này để phóng to hoặc thu nhỏ bản vẽ. - Chuyển đổi màu: Nhấp vào biểu tượng này để hoán chuyển màu vẽ thành màu tô.

3.1.2.3 Vùng điều khiển chính (Timeline)

Thanh thước Timeline sắp xếp và điều khiển nội dung của đoạn phim trong các Layer và các frame. Công cụ chính của thanh thước Timeline là các Layer, frame và Playhead.

Các Layer trong đoạn phim ở phần đầu của thanh thước Timeline được hiển thị thành cột bên trái của Timeline. Trong Frame có các Layer xuất hiện thành cột bên phải của tên Layer. Ở đầu của thanh thước Timeline chỉ ra số lượng Frame có trong đoạn phim.

Nút Playhead chỉ ra Frame hiện hành đang được hiển thị trong vùng Stage. Vùng trạng thái thanh thước Timeline (ở bên dưới của thanh thước) hiển thị số Frame hiện hành, số Frame trong một giây và thời gian dự tính diễn hoạt trong Frame hiện hành. Mỗi khung hình trong phim Flash biểu diễn một lần thể hiện của phim ở một thời điểm cụ thể trong suốt quá trình phát lại. Nếu chúng ta thiết lập chế độ mặc định là 12 khung hình trong một giây, khi đó mỗi khung hình sẽ thường xuất hiện trong khoảng 1/12 giây trước khi phim dịch chuyển sang khung hình kế tiếp.

Trong Flash có 2 loại khung hình: - Khung hình thông thường. - Khung hình khóa.

Sự khác nhau và giống nhau của hai loại khung hình này cũng khá dễ hiểu:

- Trong suốt quá trình phát lại, tất cả các khung hình đều được thể hiện trong cùng một độ dài thời gian (trừ khi chúng ta sử dụng một mã ActionScript nào đó để sửa đổi quá trình phát lại).

- Chúng ta chỉ có thể bổ sung các thành phần vào trong khung hình khóa. Việc chúng ta đưa cái gì vào không thành vấn đề, chỉ có điều là chúng ta chỉ có thể thực hiện trong khung hình khóa.

Hình 3.5 - Hình minh họa vùng điều khiển chính (Timeline)

- Chỉ có Flash là có thể đưa các thành phần vào trong khung hình thông thường. Chúng ta không thể thực hiện được bất kì điều gì một cách trực tiếp đối với một khung hình nếu như đó không phải là khung hình khóa.

a.Thêm, xóa và di chuyển khung hình:

Khi chúng ta làm việc với các phim Flash của mình, chúng ta sẽ thấy thường xuyên cần phải thêm, xóa và di chuyển các khung hình trong bảng tiến trình. Menu Insert cung cấp một số lệnh mà bạn có thể sử dụng để sửa đổi các khung hình trong bảng tiến trình.

Lệnh Phím tắt Mô tả

Frame F5 Thêm một số khung hình tại điểm chèn.

Remove SHIFT + F5 Loại bỏ các khung hình được chọn ra Frame khỏi bảng tiến trình.

chép nội dung của khung hình khóa phía trước vào nó. (adsbygoogle = window.adsbygoogle || []).push({});

Blank Keyframe F7 Thêm một khung hình khóa mới và không sao chép nội dung của khung hình khóa phía trước vào nó.

Clear keyframe SHIFT + F6 Chuyển đổi khung hình khóa thành một khung hình thường.

Nếu chúng ta muốn loại bỏ các khung hình trong bảng tiến trình, ta chỉ cần kéo các khung hình với chuột. Chúng ta có thể kéo khung hình bắt đầu hoặc khung hình kết

Một phần của tài liệu THIẾT KẾ PHẦN MỀM MÔ PHỎNG HỖ TRỢ HỌC TẬP VÀ GIẢNG DẠY MÔN CNCĐHA (Trang 61 - 91)