Các bài hướng dẫn cơ bản về Flash (Phần 1) doc

Các bài hướng dẫn cơ bản về Flash (Phần 1)

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