BÀI 1: GIỚI THIỆU VỀ FLASH

BÀI 1: GIỚI THIỆU VỀ FLASH KHOA CÔNG NGHỆ THÔNG TIN TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI Bài giảng tin học cơ sở

Nội dung • Flash là gì? • Không gian làm việc của Flash • Timeline (đường thời gian) • Công cụ • Vùng chứa các cửa sổ thiết kế • Các thao tác cơ bản với Flash Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

Nội dung • Flash là gì? • Các thao tác cơ bản với Flash • Không gian làm việc của Flash • Timeline (đường thời gian) • Công cụ • Các panel hỗ trợ thiết kế Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

1. Flash là gì? • Công nghệ đa phương tiện (multimedia) • Kỹ thuật đồ họa vector  kích thước tệp rất nhỏ • Tạo ảnh động (.swf) • Được thông dịch bởi Flash Player • Có thể chạy trên trình duyệt web Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

1.1. Lịch sử phát triển của Flash • 4/1996: Future Splash • 11/1996: Macromedia Flash 1 • 6/1997: M. Flash 2 • 5/1998: M. Flash 3 • 6/1999: M. Flash 4 • 8/2000: M. Flash 5 • 3/2002: M. Flash MX (6) • 9/2003: M. Flash MX 2004 (7) • 9/2005: M. Flash 8 (Basic & Pro) • 4/2007: Adobe Flash CS3 Professional (9) • 2008: Adobe Flash CS4 Professional (9) Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

1.2. Các phần mở rộng của tệp flash • .swf (ShockWave Flash): • Là tệp hoàn thiện, đã được biên dịch và xuất bản (publish) từ .fla • Chỉ cần cài Flash Player để chạy hoặc chạy trực tiếp trên trình duyệt web • Chỉ xem mà không sửa được • .fla (FLAsh): Chứa các đối tượng của Flash • Cần cài cả bộ công cụ để tạo và chỉnh sửa • Có thể biên dịch và xuất bản ra .swf • .flp (Flash Project): Cho phép nhóm các tệp liên quan vào một dự án để quản lý và chia sẻ thuộc tính và tài nguyên • .flv (FLash Video): Các tệp video của flash, được tạo ra bởi Adobe Flash • .as (Action Script): Mã nguồn kịch bản hành động • .asc, .aso, .f4v, .xfl… Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

1.3. Các tính năng của Flash • Có thể nhúng hình ảnh, âm thanh động • Khả năng tương tác cao với người dùng • Có thể xuất ra nhiều loại tệp như .html, .exe, .jpg,… • Nhẹ, rất phù hợp khi nhúng vào các trang web Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

1.4. Ứng dụng của Flash • Thiết kế các phần mềm mô phỏng • Làm phim/phim hoạt hình • Tạo video, quảng cáo truyền hình • Tạo các trò chơi (game) • Chương trình chơi nhạc MP3, thiệp điện tử • Thiết kế web, lập trình • Soạn giáo án điện tử • … Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

2.1. Khởi động Flash • Cách 1: • Vào Start  All Programs  Macromedia  Macromedia Flash Professional 8 • Cách 2: • Nhấn đúp chuột vào biểu tượng Flash ở desktop Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

2.2. Tạo tệp Flash mới • Cách 1: • Bằng Start Page (trang bắt đầu khi vào Flash) • Chọn • Create New: Tạo một tệp trắng, tự thiết kế • Create from Template: tạo tệp theo các mẫu có sẵn • Cách 2: • Vào menu File  New • Cách 3: • Tổ hợp phím Ctrl + N Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

Cách 1: Qua Start Page • Có thể chọn ô “Don’t show again” để trang Start page không hiện lên trong các lần sau vào Flash • Chọn • Create New • Create from Template Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

Cách 2, 3: Qua menu hoặc Ctrl + N • General: Tạo tệp trắng • Templates: Tạo tệp từ các mẫu có sẵn Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

Tạo tệp Flash trắng • Flash Document: • Tạo tệp Flash mới có đuôi là .fla • Flash Slide Presentation • Tạo tệp trình diễn giống như Power Point với nhiều nội dung đa phương tiện • Có thứ tự trình diễn tuần tự • Flash Project • Tạo dự án chứa nhiều loại tệp khác nhau (.fla, .as, âm thanh, hình ảnh,…) • … Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

Tạo tệp từ các mẫu có sẵn • Advertising: Quảng cáo • Photo SlideShows: Trình diễn ảnh • Slide Presentations: Trình diễn giống như power point • Quiz: Câu hỏi • … Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

2.3. Mở tệp đã có • Cách 1: • Bằng Start Page (trang bắt đầu khi vào Flash) • Chọn • Open a recent item • Chọn Open • Hoặc chọn tệp trong danh sách (nếu có) • Cách 2: • Vào menu File  Open • Cách 3: • Tổ hợp phím Ctrl + O Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

2.3. Mở tệp đã có (2) • Chọn tệp muốn mở trong hộp hội thoại Open • Nhấn nút Open Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

2.4. Lưu tệp • Chọn menu File  Save hoặc Ctrl + S • Chọn thư mục lưu tệp vào trong phần Save in • Gõ tên tệp vào ô File name. Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

2.5. Đóng tệp tin hiện hành • Cách 1: Chọn menu File  Close • Tổ hợp phím: Ctrl + W hoặc Ctrl + F4 • Nhấn chuột trái vào biểu tượng Đóng của tệp đang mở Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

2.6. Nhập dữ liệu (Import) • Chèn hình ảnh, âm thanh, phim,… • Chọn File  Import: • Import to Stage (Ctrl+R): Chèn trực tiếp vào Timeline • Import to Library: Đưa vào thư viện, khi cần chỉ cần lấy trong thư viện ra sử dụng Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

2.7. Xuất dữ liệu (Export) • Chọn menu File  Export image • Xuất ra các tệp ảnh (Flash Image): .swf, .emf, .wmf, .eps, .ai, .dxf, .jpg, .gif, .bmp, .png • Chọn menu File  Export video • Xuất ra các tệp phim (Flash Movie): .swf, .flv, .avi, .wav, .mov, .jpg, .gif, .bmp, .png… Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

2.7. Xuất dữ liệu (2) • Chọn thư mục muốn xuất trong Save in • Gõ tên tệp muốn xuất trong File name • Chọn kiểu tệp muốn xuất trong Save as type Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

2.8. Thoát khỏi Flash • Cách 1: • Từ menu chọn File  Exit • Cách 2: • Nhấn tổ hợp phím Alt + F4 hoặc Ctrl + Q • Cách 3 • Nhấn vào nút Thoát ở góc phải màn hình Flash Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

3. Không gian làm việc của Flash Thanh menu Timeline Vùng thiết kế Thanh công cụ Thanh thuộc tính Các Panel hỗ trợ thiết kế Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

3. Không gian làm việc của Flash (2) • Thanh menu • Timeline (đường thời gian): • Nơi quan trọng nhất của Flash • Điều khiển và xây dựng mọi hoạt động của các đối tượng trong chương trình theo thời gian Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

3. Không gian làm việc của Flash (3) • Bảng thuộc tính • Nơi thiết lập các thuộc tính của các đối tượng như: tên, kích thước, màu sắc… • Nơi viết lệnh Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

3. Không gian làm việc của Flash (4) • Vùng thiết kế • Nơi đặt và sắp xếp đối tượng cần thiết kế cho chương trình Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

3. Không gian làm việc của Flash (5) • Thanh công cụ • Sẵn có trong toolbar cho phép vẽ, tô màu, chọn và chỉnh sửa các đối tượng hay các thành phần trong vùng thiết kế Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

3. Không gian làm việc của Flash (6) • Các panel hỗ trợ thiết kế • Mặc định có một số panel tiêu biểu • Các panel khác: Vào menu chọn Window, chọn panel muốn hiển thị. • Chỉ lấy ra các panel cần thiết, tránh đưa ra quá nhiều  rối và khó thao tác Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

4. Timeline • Các nút trên timeline Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

4.1. Layer (lớp) • Layer (lớp) • Chứa các đối tượng • Độc lập với nhau • Có thể có nhiều lớp • Nên đặt tên lớp theo tính gợi nhớ nào đó hoặc theo ý nghĩa của các đối tượng thuộc về lớp • Chọn 1 layer: • Các đối tượng của layer được chọn theo trong vùng thiết kế • Timeline tương ứng của layer (dùng để điều khiển và kiểm soát các đối tượng thuộc lớp đó) cũng hiển thị bên cạnh Layer được chọn Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

Các thao tác với layer • Tạo mới layer , xóa • Khóa layer: • Nhấn vào cột bên cạnh layer muốn khóa • Không tác động được các đối tượng trong lớp bị khóa • Ẩn layer: • Nhấn vào cột bên cạnh layer muốn ẩn (sau khi ẩn thì bên cạnh layer là ) • Ẩn/hiện lớp trong giai đoạn thiết kế để dễ quan sát và thao tác với các lớp khác chứ không có tác dụng khi chạy Các layer Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

4.2. Folder (Thư mục) • Một chương trình có thể gồm rất nhiều lớp • Khó quản lý • Dùng thư mục để tổ chức và quản lý lớp • Gom các lớp có đặc điểm chung (về chức năng,…) vào thành một thư mục • Có thể tạo mới hoặc xóa thư mục Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

4.3. Frame (khung) • Khi thiết kế, các đối tượng, lệnh, chuyển động… đều được thể hiện trên timeline • Sau khi dịch và chạy, chương trình được thực hiện từ Frame đầu đến Frame cuối • Khi thiết kế cần có Frame và Frame là nơi chứa đựng những thiết kế của bạn trong Timeline • Tùy theo chức năng mà Frame có hình dạng, màu sắc và tên gọi khác nhau Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

Frame - về cấu trúc, hình dáng – 4 loại • Frame không có màu bên trong • Trống, không chứa gì • Frame không có màu bên trong và chứa chữ a • Không chứa gì nhưng chứa lệnh • Nhấn F9 sẽ thấy các dòng lệnh trong thanh Action • Frame có màu sẫm bên trong • Chứa đối tượng • Frame có màu sẫm bên trong và chứ chữ a • Chứa đối tượng và có lệnh bên trong Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

Frame - về chức năng – 3 loại • Frame • Tạo ra một hay nhiều Frame gắn liền với Frame sẵn có phía trước (hai frame liên thông với nhau) • Thừa hưởng những gì Frame trước đang có • Khi thêm đối tượng vào thì Frame phía trước cũng CÓ đối tượng ấy • KeyFrame • Tạo ra một hay nhiều Frame đi kèm với Frame sẵn có phía trước (riêng biệt nằm cạnh nhau) • Thừa hưởng những gì Frame trước đang có • Khi thêm đối tượng vào thì Frame phía trước KHÔNG có đối tượng ấy • Blank KeyFrame • Tạo ra một hoặc nhiều Frame trắng không có gì cả Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

Nội dung • Flash là gì? • Các thao tác cơ bản với Flash • Không gian làm việc của Flash • Timeline (đường thời gian) • Công cụ • Vùng chứa các cửa sổ thiết kế Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

5. Công cụ - 4 nhóm • Công cụ (Tools): • Tập các công cụ giúp vẽ và thao tác với các hình và các đối tượng, văn bản trong vùng thiết kế. • Khung nhìn (View): • Trợ giúp điều khiển việc quan sát vùng thiết kế, bao gồm vị trí và mức độ phóng to, thu nhỏ • Màu sắc (Colors): • Giúp điều khiển màu của các nét (đường) và đổ màu vào các hình. • Tùy chọn (Options): • Thay đổi khi bạn lựa chọn các công cụ khác nhau để đưa ra các tùy chọn khác cho các công cụ này. • Mỗi nhóm lựa chọn đi kèm với các công cụ tương ứng. Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

5.1. Nhóm Colors • Stroke Color • Chọn màu viền cho các đối tượng sắp vẽ • Fill Color • Đổ màu nền cho các đối tượng sắp vẽ • Black and White • Ngay lập tức chuyển màu viền thành đen (#ffffff) và màu nền thành trắng (#000000) • No Color • Thiết lập màu lựa chọn (viền hoặc nền) không được tạo ra khi vẽ • Swap Colors • Đổi hai màu viền và nền cho nhau Stroke Color Fill Color Black and White Swap Colors No Color Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

5.2. Nhóm View • Hand Tool (H) • Chọn vào đây để kéo toàn bộ vùng thiết kế sao cho có thể xem các vùng nào đó rõ ràng hơn, đặc biệt khi phóng to thu nhỏ • Nếu giữ Shift khi kéo: Chỉ cho phép kéo một góc 45o hoặc ngang hoặc thẳng đứng • Có thể nhấn đúp chuột vào Hand Tool hoặc Ctrl + 2 để đưa vùng thiết kế về vị trí và kích thước vừa màn hình • Zoom Tool (M, Z) • Khi nhấn chuột vào đây thì nhóm Options sẽ hiện ra hai nút tương ứng. • Các phím tắt: • Ctrl + +: Phóng to, Ctrl + -: Thu nhỏ • Ctrl + 1: 100%; Ctrl + 2: 200%; Ctrl + 4: 400%, Ctrl + 8: 800% Hand Tool (H) Zoom Tool (M, Z) Enlarge (Phóng to) Reduce (Thu nhỏ) Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

5.3. Nhóm Tools • Là nhóm phức tạp nhất, gồm nhiều công cụ nhỏ Subselection Tool Selection Tool Gradient Transform Tool Free Transform Tool Line Tool Lasso Tool Pen Tool Text Tool Oval Tool Rectangle Tool PolyStar Tool Pencil Tool Brush Tool Ink Bottle Tool Paint Bucket Tool Eraser Tool Eyedropper Tool Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

5.3.1. Nhóm Tools (2) • Subselection Tool • Để chọn một đối tượng để di chuyển hoặc thay đổi hình dạng bên góc cạnh của đối tượng • Selection Tool • Để chọn đối tượng để di chuyển hoặc thay đổi hình dạng bên trong đối tượng • Chọn bằng cách nhấn vào chúng hoặc nhấn ra ngoài và kéo một hình chữ nhật xung quanh chúng • Free Transform Tool • Để thay đổi các góc cạnh của các đối tượng được chọn • Gradient Transform Tool • Điều chỉnh đổ gradient (tô dốc) hoặc bitmap của màu nền trên hình Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

5.3.1. Nhóm Tools (3) • Lasso Tool • Được sử dụng để chọn đối tượng • Magic Wand: Khoanh vùng đối tượng bằng nét vẽ tùy ý • Magic Wand Properties: Khoanh vùng đối tượng • Polygon Mode: Khoanh vùng bằng đường gấp khúc • Line Tool • Vẽ đường thẳng • Pen Tool • Vẽ hình khối theo điểm • Text Tool • Tạo văn bản Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

5.3.1. Nhóm Tools (4) • Oval Tool • Vẽ hình oval và đường tròn • Retangle Tool • Vẽ hình chữ nhật • Polystar Tool • Vẽ hình đa giác đều • Pencil Tool • Vẽ đường con tùy ý • Brush Tool • Sử dụng như cọ vẽ Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

5.3.1. Nhóm Tools (5) • Ink Bottle Tool • Sử dụng để tô màu viền • Paint Bucket Tool • Sử dụng để tô màu nền • Eyedroper Tool • Sử dụng để lấy màu của đối tượng nào đó sắp chọn • Eraser Tool • Sử dụng để xóa, tẩy Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

6. Các panel hỗ trợ thiết kế • Project Panel • Align Panel • Color Mixer • Color Swatches Panel • Info Panel • Scene Panel • Transform Panel • Library Panel • Common Library Panel • History Panel Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

6.1. Project Panel • Quản lý và thao tác một cách tập trung các tệp trong một dự án Flash • Window  Project hoặc Shift+F8 Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

BÀI 1: GIỚI THIỆU VỀ FLASH