Các bài hướng dẫn cơ bản về Flash

Không ai có thể nghi ngờ và hoài nghi bất cứ điều gì về sức mạnh và tiện ích của Flash mang lại cho thế giới Internet ngày nay. Bài viết sau sẽ hướng dẫn các bạn những bước cơ bản và đơn giản nhất để xây dựng, sử dụng Flash theo cách riêng.

Những kiến thức cần nắm rõ: WWW, HTML và cách xây dựng 1 trang web.

Flash là gì?

- Là 1 ứng dụng đồ họa được sử dụng rộng rãi trên các trang web

- Với khả năng sáng tạo và đáp ứng gần như vô hạn, không có gì là quá khó tưởng tượng với Flash

- Sử dụng các ảnh đồ họa vector, có nghĩa là các bức ảnh có thể được co giãn với bất kỳ kích thước mà không làm giảm chất lượng

- Không yêu cầu quá khắt khe về các chương trình chuyên dụng và kỹ năng làm việc

So sánh Flash với ảnh động (Animated Images) và Java Applets: khi tiến hành so sánh những ứng dụng này, ta có thể dễ dàng nhận ra những sự khác biệt sau

- Flash có tốc độ tải nhanh hơn nhiều so với ảnh động

- Cho phép người dùng tương tác trực tiếp lên các đối tượng trong đó, còn ảnh động thì không

- Flash không yêu cầu quá nhiều về kỹ năng xử lý, đối với java applets thì ngược lại

Làm thế nào để xem được Flash

- Theo 1 cuộc khảo sát được tiến hành vào tháng 9/2000, công ty mẹ của MediaMetrix, đã tiến hành điều tra về tổng số các trình duyệt web được cài đặt sẵn Flash, kết quả thật bất ngờ khi có tới 96.4% tổng số trình duyệt đáp ứng được điều này. Nếu chưa có chương trình hỗ trợ Shockwave Player, bạn có thể tải về và cài đặt tại đây.

Làm thế nào để tạo được Flash

- Công cụ nhất thiết cần có là chương trình hỗ trợ, các bạn có thể lựa chọn giữa các ứng dụng tạo mẫu sẵn có hiện nay, hoặc tốt nhất là sử dụng Adobe Flash Lite hoặc Flash CS3 Pro, với phiên bản dùng thử 30 ngày tại đây.

Bắt đầu từ đâu

- Sau khi cài đặt thành công Flash CS3 Pro, các bạn nên tham khảo các mẫu có sẵn trong chương trình.

Nhúng file Flash vào trang HTML sau khi tạo thành công 1 file Flash (hoặc có thể sử dụng những file có sẵn trong Template), bạn lưu lại dưới định dạng *. fla, cụ thể chọn File > Save As, và đặt tên bất kỳ, ví dụ: Somefilename.fla

- Sau đó, mở file Flash vừa tạo ra, chọn File > Export Movie, lưu dưới định dạng somefilename.swf, và lưu vào thư mục chứa trang web.

- Mở trang web vừa được tạo ra và chèn đoạn mã sau vào:

<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>

- Đây là đoạn mã tối thiểu để nhúng file Flash bất kỳ vào trình duyệt, biểu tượng vỡ làm 2 phần sẽ xuất hiện trên trang web nếu trình duyệt chưa được cài đặt plug-in dành cho Flash

- Trên đoạn mã trên có 2 thẻ cần chú ý là <embed> và <object>, bởi vì thẻ <object> sẽ được nhận ra bởi Internet Explorer, còn Netscape chỉ có thể nhận biết thẻ <embed> và hoàn toàn không nhìn thấy thẻ <object>

- Nhập địa chỉ vào đường dẫn của trình duyệt dưới dạng: http://localhost:8080/ somefilename.swf (ví dụ)

Tìm hiểu thêm về chương trình Flash: đoạn mã trên là những gì tối thiểu nhất về Flash khi muốn nhúng vào trang HTML, nhưng do yêu cầu thực tế thì chúng ta hầu như không chỉ đơn thuần sử dụng đoạn mã trên, các bạn cần chú ý thêm những đặc tính sau:

- classid là 1 thuộc tính quan trọng của thẻ <object>, chức năng chính là báo cho Internet Explorer kích hoạt plug-in ActiveX nếu chưa được cài đặt đầy đủ

- pluginspage là thuộc tính của thẻ <embed>, nó sẽ hiển thị đầy đủ đường dẫn đến trang hỗ trợ Shockwave nếu trình duyệt Netscape chưa được cài đặt

Chương trinh Flash đầy đủ hỗ trợ và tích hợp các thuộc tính này giúp bạn:

- Chọn File > Publish, Flash sẽ tự động sinh mã bao gồm các thẻ <object>, <param>, và <embed>, đồng thời gán thêm các thuộc tính như classid và pluginspage

- Mở mã trang HTML mà Flash vừa tạo ra, xem và chèn đoạn mã trên vào nơi bạn muốn đặt file Flash.

- Nhớ đặt tên file tương ứng trong thư mục chứa trang web

- Mở trình duyệt, gõ địa chỉ tương tự như bước trên và thưởng thức thành quả của bạn

Tìm hiểu về Flash Tweening: thuật ngữ Tweening ra đời từ "in between", với Tweening bạn có thể di chuyển giữa các keyframe khác nhau, tạo hoặc chèn thêm/bớt các hiệu ứng, và sau đó để chương trình Flash tạo lại các frame trong khoảng thay đổi đó.

Các bước thực hiện:

- Tạo 1 vòng tròn nhỏ ở bên trái khu vực Stage, bằng cách lựa chọn bút vẽ vòng tròn tại cửa sổ công cụ bên tay trái, sau đó vẽ vòng tròn với kích thước tùy ý.

- Chọn tiếp Arrow, kích đúp vào vòng tròn để lựa chọn đối tượng

- Tiếp theo, chúng ta phải chuyển đổi đối tượng vòng tròn thành symbol, chúng ta sẽ làm được nhiều hơn với 1 đối tượng symbol. Từ menu chính, chọn Modify > Convert to Symbol, đặt tên cho symbol là Ball. Bấm OK

- Di chuyển tới Frame 10 trong dòng Timeline bằng cách chọn dòng có màu xám dưới Frame 10, kích chuột phải chọn Insert Keyframe, hành động này sẽ nhân bản file ảnh. Keyframe sẽ định nghĩa các hành động, các thay đổi trong từng khung hình. Người sử dụng sẽ tạo ra những keyframe quan trọng trong Timeline và chương trình Flash sẽ tạo những frame còn lại bên trong đó.

- Bước tiếp theo, lựa chọn vòng tròn và di chuyển đối tượng về bên phải 1 khoảng cách tùy ý

- Chọn vị trí bất kỳ giữa Frame 1 và Frame 10, kích chuột phải và Create Motion Tween

- Sau đó, kiểm tra kết quả bằng cách Control > Test Movie

Hướng dẫn về Flash Tweening: sau đây là 1 số thao tác cơ bản để di chuyển 1 đối tượng từ vị tri này sang vị trí khác theo đường dẫn cố định

- Chọn Window > Common Libraries > Graphics, lựa chọn hình ảnh bạn muốn sử dụng, trong ví dụ này dùng ảnh chú chuột màu xanh

- Kích vào bức ảnh và kéo, thả nó vào bên ngoài viền của vùng khung hình Stage

- Di chuyển tới Frame 40 trong phần Timeline, làm tiếp tương tự như ví dụ trên, kích vào dòng màu xám dưới Frame 40, nhấn chuột phải và chọn Insert Keyframe

- Tiếp theo chọn vị trí bất kỳ giữa Frame 1 và Frame 40, kích chuột phải và chọn Create Motion Tween

- Kích chuột phải lên Layer 1 (chọn đúng vùng Layer, sẽ chỉ định rõ ràng các Layer tương ứng), chọn Add Motion Guide tại menu popup, chương trình Flash sẽ tự động chèn thêm 1 lớp motion guide vào đầu Layer 1, lớp này có tác dụng vẽ lên các đường, các quỹ đạo di chuyển mà các symbol sẽ bám vào đó.

- Kích chuột vào lớp Motion Guide Layer để đảm bảo rằng đó là lớp đang được kích hoạt, sau đó sử dụng công cụ Pencil, thiết lập chế độ Pencil Mode ở giá trị Smooth

- Vẽ 1 đường tùy ý, bắt đầu ở vị trí bức ảnh và kết thúc ở phía bên kia Stage

- Trở lại Frame 1 tại đường Timeline, chọn công cụ Arrow, và thiết lập giá trị Snap to Objects trong bảng giá trị.

- Đặt bức ảnh vào vị trí trung tâm của đường motion guide (chính là đường kẻ được vẽ bằng công cụ Pencil bên trên), trung tâm bức ảnh bây giờ được đánh dấu +, 1 vòng tròn nhỏ màu đen sẽ xuất hiện khi bức ảnh được nhập vào motion guide. Nhả chuột ra khi bức ảnh được kéo đến hết đường kẻ.

- Quay trở lại Frame 40, làm tương tự như trên, đặt và kéo bức ảnh vào vị trí giữa cho tới cuối motion.

- Kiểm tra kết quả bằng Control > Test Movie

- Nếu tốc độ di chuyển của đối tượng quá nhanh, bạn có thể điều chỉnh được việc này bằng menu Modify > Movie, hộp thuộc tính xuất hiện, trường giá trị Frame Rate hiển thị bao nhiêu khung hình sẽ hoạt động trong 1 giây, giá trị càng lớn thì tốc độ hoạt động của các symbol càng nhanh và ngược lại.

Tìm hiểu về Flash Tint Tweening: với tính năng Tint Tweening, bạn có thể thay đổi màu sắc hiển thị của bất kỳ đối tượng nào.

- Chọn menu Insert > New Symbol, để áp dụng hiệu ứng Tint thì tất cả các đối tượng phải được chuyển đổi về dạng symbol

- Đặt tên cho symbol vừa tạo là changecolor, chọn Graphic trong mục Behavior, và OK. Bạn sẽ được chuyển đến phần tạo symbol trong chương trình Flash

- Chọn tiếp công tụ Text, thiết lập giá trị Text > Size > 36 và Bold để tạo chữ cỡ to và đậm

- Gõ dòng chữ với nội dung bất kỳ vào khung hình, ở ví dụ này là Color Changing Text

- Quay trở lại bước chọn movie bằng cách Edit > Edit Movie

- Chèn symbol bạn vừa tạo xong vào movie, chọn Window > Library, lựa chọn symbol changecolor và kéo thả đối tượng và giữa khung hình

- Chèn tiếp keyframe vào Frame 15 và 30

- Tiếp theo, chọn Frame 15, kích chuột phải và chọn Panels > Effect

- Tiếp đến, lựa chọn Tint, bảng màu cụ thể sẽ xuất hiện, thiết lập giá trị như sau R=0, G=255, B=0

- Nhấn chuột vào dòng Timeline bất kỳ chỗ nào giữa Frame 1 và Frame 15, kích chuột phải và chọn Create Motion Tween

- Làm tương tự như trên với Frame 15 và 30

- Kiểm tra kết quả bằng cách Control > Test Movie

Hướng dẫn về Flash Shape Tweening: tính năng này giúp bạn chuyển đổi qua lại giữa các đối tượng khác nhau

- Chọn công cụ viết chữ Text, thiết lập giá trị Text > Size > 48 và Bold để tạo chữ cỡ to và đậm
- Gõ chữ bất kỳ vào khung hình, ở ví dụ này là Hello
- Kích chuột phải vào dòng chữ vừa tạo, chọn Panels > Align
- Trong hộp Align, bấm nút To Stage trước tiên, tiếp theo chọn Align Horizontal Center và Align Vertical Center, sau đó đóng hộp Align lại
- Tiếp đến, sử dụng công cụ Arrow Tool, chọn dòng chữ, Modify > Break Apart từ cửa sổ menu popup
- Chèn tiếp các keyframe vào vị trí Frame 24, 50 và 51
- Tiếp đến, xóa dòng chữ Hello tại vị trí Frame 24, và viết tiếp chữ khác vào vị trí đó, ở đây là World, cỡ chữ 48, kiểu chữ bold

- Lặp lại các thao tác như trên, kích chuột phải vào dòng chữ, chọn Panels > Align, tiếp theo lựa chọn các giá trị trong ô Align, To Stage trước tiên, lần lượt theo sau là Align Horizontal Center và Align Vertical Center. Sau khi thiết lập các giá trị xong, đóng ô Align lại

- Chọn tiếp công cụ Arrow Tool, Modify > Break Apart từ menu popup

- Chèn thêm 1 keyframe vào Frame 26

- Kích đúp vào keyframe tại vị trí Frame 1, sẽ xuất hiện 1 cửa sổ popup nhỏ, chọn thẻ Frame, thiết lập thông số Tweening thành Shape. Sau đó đóng cửa sổ lại

- Làm tương tự như vậy với Frame 51, tại cửa sổ popup chọn thẻ Frame Actions, kích vào dấu +, chọn tiếp Basic Actions > Go To, và đóng cửa sổ lại

- Kiểm tra kết quả bằng cách Control > Test Movie

Hướng dẫn tạo nút bấm đơn giản: ví dụ sau sẽ hướng dẫn bạn chèn ảnh, chuyển đổi thành đối tượng nút bấm, chèn thêm đường dẫn URL để tạo link.

- Đầu tiên, File > Import để nhập 1 bức ảnh bất kỳ, sau đó chuyển thành nút. Sau khi Open 1 bức ảnh bất kỳ, file ảnh đó sẽ được lưu vào thư viện

- Tiếp theo, lựa chọn ảnh bằng công cụ Arrow. Sau đó chuyển đối tượng image thành symbol, tiếp theo Insert > Convert to Symbol, đặt tên cho symbol vừa tạo là button, chọn giá trị Button từ danh sách Behavior và OK

- Kích chuột phải vào ảnh, chọn Actions, hộp thoại Object Actions hiện ra, kích vào biểu tượng dấu +, và Basic Actions > Get URL. Nhập giá trị đường dẫn đầy đủ của 1 trang web bất kỳ nào đó, ở ví dụ này là http://www.w3schools.com/

- Chọn tiếp giá trị target tại trường Window, đóng cửa sổ Object Actions lại

- Kiểm tra kết quả bằng cách Control > Test Movie

Hướng dẫn tạo nút bấm đơn giản 2: ví dụ sau sẽ giúp bạn tạo đối tượng nút bấm theo cách riêng, tạo hiệu ứng mouse-over và chèn link.

- Bắt đầu, chọn Insert > New Symbol, đặt tên cho symbol vừa tạo là button. Thực hiện các thao tác như ví dụ trên, chọn giá trị Button từ danh sách Behavior, OK. Tại dòng Timeline, bạn sẽ thấy 4 giá trị mặc định sẵn có: up, over, down, hit

- Lựa chọn công cụ Rectangle, sử dụng Fill Color với màu đỏ nhẹ, vẽ 1 hình chữ nhật nho nhỏ trong khung hình. Tiếp đến, sử dụng công cụ Text, điền Click Me đè lên hình chữ nhật đó, đổ màu cho dòng chữ bằng màu đậm

- Lựa chọn Arrow, di chuyển dòng chữ vào giữa hình chữ nhật.

- Thêm keyframe vào Over State trong dòng Timeline. Thuộc tính Over State sẽ chỉ định, khai báo những hành động xảy ra khi bạn di chuyển chuột qua nút bấm

- Lựa chọn đối tượng hình chữ nhật và đổ 1 màu khác, ví dụ xanh nhạt

- Chọn tiếp Edit > Edit Movie để quay lại bước chọn movie

- Chọn Window > Library để xác định vị trí nút bấm, kéo thả nút bấm vào khung hình

- Kích chuột phải vào khung ảnh, chọn Action từ menu popup

- Trong hộp Object Actions chọn biểu tượng có dấu +, tiếp theo Basic Actions > Get URL

- Nhập đường dẫn URL đầy đủ và cụ thể, ở ví dụ này là http://www.w3schools.com/

- Chọn thuộc tính target tại trường Window, đóng cửa sổ Object Actions

- Kiểm tra kết quả bằng cách Control > Test Movie

Hướng dẫn về Flash Animation:

- Tạo 1 file Flash mới, viết 1 dòng chữ với nội dung bất kỳ với công cụ Text

- Lựa chọn tiếp công cụ arrow, kích lên dòng chữ vừa tạo để lựa chọn, sau đó chuyển đổi đối tượng từ text thành symbol bằng menu Insert > Convert to Symbol, đặt tên cho symbol là text, tiếp tục chọn thuộc tính đồ họa graphic từ danh sách Behavior, cuối cùng OK

- Di chuyển tới vị trí Frame 30 tại Timeline, kích chuột phải vào trường này và chọn Insert Keyframe

- Tiếp theo chọn bất kỳ vị trí Timeline nào trong khoảng Frame 1 và Frame 30, kích chuột phải và chọn Create Motion Tween

- Quay trở lại Frame 30 của Timeline, và di chuyển dòng chữ xuống phía dưới góc phải

- Chọn đúng đối tượng dòng chữ text, chọn Modify > Transform > Flip Horizontal

- Kiểm tra kết quả bằng Control > Test Movie. Dòng chữ text sẽ di chuyển từ vị trí đầu tiên (được định nghĩa tại frame 1) tới vị trí thứ 2 (frame 2) hoặc ngược lại nếu bạn chuyển 2 frame đó cho nhau.

Hướng dẫn chèn âm thanh trong Flash

- Sau khi tạo 1 văn bản Flash mới, chọn File > Import, xác định vị trí file âm thanh muốn nhúng vào Flash và chọn Open, file âm thanh sẽ được lưu trong thư viện của file Flash

- Kích vào lớp frame đầu tiên của Layer 1 của phần Timeline, chọn tiếp Window > Panels > Sound

- Cửa sổ popup hiện ra (Sound), và chọn đúng file âm thanh mà bạn vừa nhập vào thư viện, chọn tiếp Stream trong trường Sync

- Tiếp đến, tìm đến frame 50 trong dòng Timeline, kích chuột phải và chọn Insert Frame

- Kiểm tra kết quả bằng cách Control > Test Movie

Trên đây là bài hướng dẫn những bước cơ bản nhất để tạo ra 1 file Flash với những tính năng đơn giản nhất.