Ebook hướng dẫn và thiết kế website bằng macromedia flash phần 1 TS hoàng vân anh

Đặt ra câu hỏi này vì nếu không hiểu rõ tính năng và ứng dụng của một chương trình, bạn sẽ rất khó có thể khai thác và sử dụng nó đúng mục đích để tạo ra các sản phẩm ưng ý.. Các trình d

TS.HOÀNG VÂN ANH

HƯỚNG DẪN VÀ THIẾT KẾ WEBSITE

NHÀ XUẤT GIÁO DỤC - 2009

THlếr Kế MULTIM€Dlfl CHO ujeesire

Trong chưong này chúng ta sẽ tìm hiểu về:

Tọỉ SQO phỏỉ sử dụng Flash?

Đặt ra câu hỏi này vì nếu không hiểu rõ tính năng và ứng dụng của một chương trình, bạn sẽ rất khó có thể khai thác và sử dụng nó đúng mục đích

để tạo ra các sản phẩm ưng ý Vậy Flash có những ưu điểm gì?

dữ liệu đầy đủ và liên tục Các trình duyệt Web sẽ hiển thị dữ liệu hình ảnh trước khi toàn bộ tập tin Flash được tải về), ưu thế và lợi ích của kỹ thuật này sẽ được trình bày đầy đủ trong các bài thiết kế

Khả năng lập trình và tương tác tTong các trang Web

Multimedia là gì?

Multimedia hay còn gọi là đa phương tiện: là môi trường sử dụng nhiều loại phưong tiện để truyền đạt một thông điệp, một ý tưởng thông qua âm thanh, hình ảnh, sự tương tác Vậy vai ừò và ý nghĩa của Multimedia trên môi trường Internet và sự liên quan của nó với phần mềm thiết kế Flash như thế nào? Chúng ta cổ thể hình dung qua đồ tíiỊ dưới đây:

Các file có âm thanh vâ hình ảnh được thiết kế

và xuất ra từ Flash

Multimedia

Các trình duyệt Web hiển thị nội dung và hình ảnh các file Flash

Các úng dụng CỦQ Flash trong thiết ké Đa phuong tiện

Chương I

Trong chương này chúng ta sẽ tim hiểu về:

■ Cài đặt và khởi động chương trình.

■ Cách sử dụng bảng công cụ Tool Box.

■ Cách sử dụng các bảng tham số thuộc tính đối tượng và các cửa

Hệ điều hành Windows (tốt nhất là Windows XP)

Ngoài ra bạn cài đặt thêm chương trình bổ trợ cho việc play và xuất file có đuôi MOV như chương trình Quicktime

Khởi động và chạy chưoTig trình

Muốn chạy được chưoTig trình Flash thì trước tiên bạn phải cài đặt chương trình sẵn trên máy tính Sau khi được cài đặt, biểu tượng của chương trình ứiường nằm trên màn hình Desktop và xuất hiện frong tìianh menu Start nên bạn chỉ cần click chuột để khởi động chương trinh (hình 1.1.)

Hình 1.1

1.2 Làm quen VỚI glQO diện vò vùng làm vỉệc (Uưork fìrea) trong ứiuong trình

Khi lần đầu iàm quen với chương trình, ta nên thử tạo mới một file dựa theo gợi ý của thư viện Template bởi vì nó sẽ giúp người thiết kế dễ hình dung ra một file Flash mẫu được thiết kế và bố trí thế nào Sau đó, ta có thể nhấn tổ họp 2 phún Ctrl + Enter để Preview (xem kết quả nội dung file)

Để thực hiện được thao tác trên, làm theo các bước sau:

Bước ỉ: Clìek chuột vào một trong các mục của bảng Create from

Template Ví dụ: Photo SlideShows (hình 1.3)

8

Hình 1.3

Bước 2: Xuất hiện cửa sổ mới New from Template (hình 1.3) Trong

cửa sổ này, tại mục Templates sẽ liệt kê tất cả các mẫu tìiiết kế sẵn có trong mục được ehọn Trong bảng này thư viện chương trình chỉ có một mẫu duy nhất tên là Modem Photo SlideShow và trong mục Preview cho phép bạn xem trước hình ảnh và kích cỡ của mẫu đang chọn Nếu đồng ý với mẫu lựa chọn này bạn click vào nút OK hoặc nhấn phím Enter để kết thúc lệnh

Bưởc 3: Cửa sổ thiết kế của File mở ra như hình minh hoạ với một

màn hình thiết kế và vô số các bảng thuộc tính (hình 1.4)

Hình 1.4

Nếu là người mới bắt đầu học Flash thì từng vùng công cụ, thuộc tính

và thiết kế đổi với bạn là hoàn toàn mới mẻ Nhưng ta có thể nhấn nút Play

những cách để thực hiện như sau:

Qrl+Enter Ctrl+Shift+Enter ctrl+Alt 4-Enter

t e s t H o v ie

Debug Movie Test Scene Delete ASO Files Delete ASO Files and Test Movie Loop Playback

Play Ail Scenes Enable Simple Frame Actions Ctrl+Alt+F Enable Simple Buttons Ctr!-f Alt+B

V Enable Live Preview Mute'Sounds Ctrl+Alt+M

10

Hình 1.6

2 HƯỚNG DẨN VẢTHIỀtKẾ 8

Lun ý ta có thể tạo ra nhiều cửa sổ Preview cho nhiều file đang mở trong cùng một lúc (hình 1.7).

f :7 Thanh thước điều

H t> ỉđ í Mt» im«! Ho«v Tut <aaMndt Cotttg« Wndrx m>

» « S É » « < « « « « « » ( « * $ ! ? ,

Các bảng điều khiển thư viện, đối tượng, các hiệu ứng và thuộc tính

1.3 Cách sử dụng các menu lộnh

Việc sử dụng các menu lệnh frong Flash hoàn toàn không phức tạp nếu chú ý tìiì sẽ nhận thấy nó được tập hợp và quản lý theo tìmg chức năng riêng biệt:

file tài liệu của Flash

chương trinh này hồ trợ

file đang thiết kế

12

■ Close AH: Đóng tất cả các cửa sổ các file đang thiết kế.

thư viện mẫu của chưcmg trình

xem danh sách các tập tin trước khi xuất ra cần phải thiết lập trước ữong Publish Setting

ý là tất cả các file ĩiày mặc định đều nằm chung trong thư mục lưu file tàiliệu gốc Flash

kiếm các đối tượng trong của sổ thiết kế Ngoài ra nó còn chứa các công cụ cho phép thiết lập lại các phím và lệnh điều khiển trong chương trình

clipboard

13

■ Paste: Dán nội dung hiện thời của clipboard vào vùng cửa sổ thiết

kế đang mở

đúng vị ữí cũ của đối tượng được chọn

cửa sổ thiết kế

thiết kế

sổ thiết kế

dựng chưcmg trình nhanh hơn

14

ắííicror^ÌHÍ» FtasW Bíisic 8 - |\intitíeđ'1 *3

Éciỉt Vì&ỷt in s e rt M odify

p

File Eci\t Vteyv In s e rt

Undo Select None

R e p e at Select None

£3

Ốo

«>■

V

C c

O pin:

P aste in C e n te r Paste S p e c ia l

Find and R eplace Find N e xt Tim eline

Zoom Ngoài ra nó còn cho phép hiển thị các chế độ hỗ trợ thiết kế như thanh thước kẻ (Ruler), lưôi (Grid), các đường Guide giúp cho người thiết

kế có thể căn chỉnh dễ dàng các đối tượng trong bản thiết kế

File Edit View Insert Modify Text Commands Control Window Help

Took Qoio

H m

2oom Out Magnificatlcn

Ctrl4-' 25

ỵ p

o □ ^ Rulers

Grid Guides

■ Go to: Di chuyển đến các khung (frame) và cảnh (Scene) của file đang được mở.

vào các ô lưới hoặc các đối tượng khi đang vẽ hoặc di chuyển

được chọn

đặt trên đối tượng

hiệu ứng thiết kế như: Symbols, thanh thước Timeline quản lý các lóp (Layer), các chuyển động (animation) cùa các đổi tượrtg Ngoài ra còn chèn

vào file Flash đang tìiiết kế

vào các đối tượng trong cửa sổ file thiết kế

16

Timeline ĩim eỉine Effects Scene

Macromedia Flash Bask 0 - [Untitled-1

File Edit View Insert Modify Text Commands Control

tính và hiệu ứng của các đối tượng

ỠM aciomedia Flash Basic 0 “ [Untitted'2*]

ỉ Fie Edt View Insert

độ chuyền động cùa các frame và đơn vị hiển ihị cho thanh thước Timeline

■ Convert to Symbol: Chuyển đổi thuộc tính một đổi tượng thành các đổi tượng Symbol khác.

biừnap thành cáe đối tượng ảnh dạng vector

đối tựợng ảnh riêng biệt

Bitmap)

trong cửa sổ thiết kế

■ Timeline Effect: Chỉnh sủa và thay đổi lại các hiệu ứng gán cho

6 Menu Text (hình 1.14): quản lý các công việc liên quan đến đốitượng đạng chữ: Chinh sửa, căn chỉnh, định dạng các thuộc tính của các

dòng hay mộl đoạn

■ Scroilable; Tạo cáe text box cuốn.

các lỗi trong soạn thảo Text

Í' 72

96 120

Hình 1.14

phần mở rộng jsfl) và chạy chương trình Ngoài ra nó còn cho phép lưu lại

và quản lý các lệnh vừa thực hiện

# MicTome^la Fla^ B^^

File Edit View Insert Modify Text Goiitmpids Control Window Help

■ ^' , '' ^ Manage Saved Commands, •

■ Get More Commands: MỞ để nhập một JavaScript vào file Flash đang mở.

việc chạy và điều khiển cảc Player để chạy preview các file flash

File E dt View Insert Modify Text CcMĩimẳíìds "cS^roi Window H ^p ,

Play <<y| S cenes

^ ^ ^ £ n a l:^ Simple Fram e Actions ^ ^ C trl+A lt+F

^ ’ Enable Simple B uttons ^ Ctrl+Alt+B

ự Enabfe Live Preview Mute Sounds Ctrl+Alt-Ỉ-M

I p p u f f i p I I I Ỉ M Ì Ì I Í Ì Ỉ HHlỊỈ^ỈilìhhliìilĩíìHÌih iüiiilliiliiiui y v j m vv vy V y m y y vy yy yyy yv

r

Hình 1.16

trong cửa sổ thiết kế

■ Loop PlayBack: Thực hiện lại các chuyến động trong cửa sổ tiến trình khi nó chạy đến frame cuối cùng.

Flash Khi tắt tính năng này, việc phát lại sẽ kết thúc ở khung hình cuối cùng của cảnh hiện tại

kỳ hành động nào của khung hình đã được xác lập

làm việc phản ánh các trạng thái Up, Over, Down, Hit ứng với tác động cùa chuột và ửiực hiện một số hành động được gán cho nút

bảng thuộc tính Các bảng này cho phép sử dụng nhiều tham số hơn để điều khiển hay thay đổi thuộc tính của các đối tượng

Q Macromedia Flash Batic 8

-Pile e đ t View In s e rt M odtfy T ext Commaods Control Wiodovv H d p

Cascade Tile y- 1 Uf ititled-2*

"••"■nil.Mihlilit)

^ iibh

| y y y , ihhhh

* Ịhhhh

bhhl ilbhlih

■bhhh

ịj hf»riỉhhh

Hinh f.17

Toolbar

Duplicate Windown: Nhân đôi khung cửa sổ làm việc hiện thời

Foolbar: Cho phép ấn hiện các công cụ ữên ứtanh công cụ

Timeiine: Án hay hiện thanh thước Timeline

Tools: Án hay hiện bộ công cụ Toolbox

21

■ Properties: Án, hiện bàng thuộc tính các đối tượng.

ra các đổi tượng có khả năng điều khiển được

Sound, Action Script ữong một file Flash

tượng trong một cửa sổ thiết kế.

■ Component Inspector: Hiệu chỉnh các tham số của các Compnents

History

trờ lại trạng thái ban đầu

10 Menu Help : quản lý các trợ giúp cung cấp cho người thiết kếnhững thông tin về phần mềm cũng như bộ thư viện hưcmg dẫn sử dụng chưong trình Điều đặc biệt là trong Flash có cả hỗ trợ về chức năng sử

^ dụng chương trình cũng như phần hỗ trợ về lập trình Action Script

1.4 H ộp công cụ Toolbox

Hộp công cụ này dùng để thiết kế các đổi tượng như các ảnh vector, chữ,

22

It Selection Tool; Chọn đối tượng

ti Sub Selection Tool: Chọn đối tượng dạng Vector

n Free Transform; Thay đồi hình dạng, vị trí, kích thước

3 Gradient Transform: Dịch chuyển thay đổi vị trí vùng

màu bị Gradient

/ Line Tool: Tạo các đoạn thẳng

p Lasso Tool: Chọn lựa các vùng ảnh bitmap ngẫu nhiên

â Pen Tool ; Tạo các đường cong

A Tạo các chữ vâ các hàng chữ

o Oval Tool; Tạo các ảnh vector dạng tròn

□▼

Rectangle Tool: Tạo các đối tượng có dạng vuông (lưu

ý là công eụ vẽ này có thêm một số thuộc tính có thể lâm thay đổi đối tượng thành dạng bầu dục)

o Poly Start; Tạo ra các đa giác lồi, lõm hoặc phằng Pencil Tool: Tạo ra các đường thẳng hoặc hình vê ngẫu nhiên

Brush Tool; Tạo ra các đường thẳng vả hình vẽ ngẫu nhiên nhưng có một số thuộc tính kèm theo cho phép tạo ra các hiệu ứng đặc biệt

e> Ink Bottle Tool: Đổ màu đường viền đối tượng ảnh

c7 Eraser: Công cụ xoá ảnh đổi tLPợng ảnh vector có kèm

theo các thuộc tính với các hiệu ứng đặc biệt

0 Hand tool: Công cụ cho phép di chuyển các vùng bản vê

Stroke Color: ố đổ màu viển đối tượng ảnh vector

23

1.5 Cách sử dụng cốc bỏng thuộc tính đốỉ tuọng và cỏc cùo sổ Panel

Các bảng ứiuộc tính này chứa các tham số ứiay đổi hình dạng hay hiệu ứng của các đổi tượng Vì số lưọng bảng khá nhiều nên ở đây chúng ta chỉ tìm hiểu một số bảng hay được sử dụng Để kích hoạt hay tắt các bảng này ta

sừ dụng menu Window Sử dụng bảng nào, kích chuột vào tên bảng đó và nó

>Adtt0ftK

» 'prap*«íw pirw it^

Qrl+A»+K '■ ►'ỔSõr ■'

ỉl V Ltbrary - U n H d e é-t ITv aíi+Aỉỉ+'ỉ , unCỊíteứ-ỉ V -v; ;-èJ CUM-F2 í

» ỉ «% empty «jraryCtiH-L

: •

« so $5 » ÌS J-V

A

! SNt+F3 ị

Ct.t+I Cwnpc*wití QrHF7 Componer* Inspect« A)t+f7 Other Paneh

Panel Action (hình 1.19): Cho phép viết và gắn các đoạn mã Script

vào các đối tượng trong bản thiết kế

Panel Movie Explorer (hình 1.20): Quản lý ẩn hiện các đối tượng

dạng Text, Symbol, Action Script, Frame và Layer

Panel Align & Info & Transform (hình 1.21): Quàn lý canh lề và

dịch chuyển vị trí của các đối tượng

24

Panel library (hình 1.23): Cho phép quản iý các Symbol, thư mục và

các hiệu ứng cho các Symbol trong bản vẽ

Panel Timeline (hình 1.24):

■ Quản lý các frame chuyển động đồng thời di chuyển qua lại giữa các khung cảnh (Scene)

Chương 2

■ Thiết kế các Logo.

■ Thiết kế các banner tĩnh và động.

■ Chèn các Logo và banner vào trong một Website Flash.

• Thiết kế các menu lệnh và kết nối chúng với các URL.

Để ửiiết kế một Website hoàn chỉnh bạn cần phải thiết kế và chuẩn bị đầy đủ các file dữ liệu như âm thanh (nhạc nền, nhạc nén như: MP3, -AU,

•MIDI), file ảnh tĩnh (logo, Banner, ảnh nền, ảnh trang trí, ảnh dữ liệu như: GIF, JPEG, PNG), hình ảnh động (các định dạng phim như AVI, MOV,

•FLV, SWF ) Một Website được thiết kế thành công là do sự đóng góp một phần không nhỏ của việc bố trí sắp xếp hợp lý các dữ liệu này

Toàn bộ các ảnh tĩnh và động có ứiể sử dụng một phần mềm thiết kế 2D như Photoshop, Illustrator, Corel để dựng hình ảnh trước Sau đó bạn

có thể import vào trong thư viện của một thư mục Web Project trong Flash

để sử dụng và xuất bản Sử dụng một phần mềm thiết kế 2D sẽ giúp sản

phẩm tạo hình đẹp và hấp dẫn hơn.

2 1 T h iết kổ Logo

Logo được coi là hình ảnh đại diện của công ty, tổ chức, doanh

nội dung rất quan trọng Một Logo bao gồm hình ảnh và chữ hoặc có thể chỉ có hình ảnh Dưới đây là các bài tập nhỏ hưỏTig dẫn thiết kế một sổ mẫu Logo sử dụng phần mềm Photoshop Khi ứiiết kế cần chú ý Logo chiếm một phần diện tích không lớn trong một ừang Web Thường bạn quy định kích thước logo từ 50 - 150 pixel là vừa đủ cho phần trang trí bên trên Vị trí Logo chính của một Website thường nằm ở trên đỉnh và phía bên trái của một trang Web Banner thường nằm về phía bên phải

28

Bài tập 1: Thiết kế Logo trung tâm đào tạo Ngoại ngữ Focus

FOCilS Centre

bắt đầu Ta ciick chuột vào menu File - New thiết lập một khung ảnh có

này vào trang Web mà kích ứiước của nó lớn hơn khung chèn thi ta vẫn có thể cắt bớt phần thừa đi

Hinh 2.1

29

Fte Edt Image» Layer Srtact f k t t «ew Vrtndow ' m ip

,Q^ \ ' : ;ĩ- ^

V \ ; Ly]AnU>«6»* styWi

.„L L p_ ^ I" u»«« ' OmiwH'-UlvttKX

i ^Ị j.

Select fofeground colof: OK

Thiểt lập Irâng màu Rjreground vè

Backgr^nd nìàu chợ^ỡ tụựng vỂỉầ tạo

0 , H ' \ ,

định dạng font chữ, cỡ chữ, vị trí trên thanh Toolbar như hình vẽ 2.10

^ R l e Edit image Layer Select Hter View Window Help

Hình 2.10

Ngoài mẫu thiết kế trên bạn có thể thay đổi màu sắc, dịch chuyển hình ảnh để tạo ra những mẫu logo khác nhau

FOCUS Centre

FOCUS

Centre

Bài tập 2: Thiết kế Logo siêu thị bán sách trực tuyến

chữ nhật nhỏ góc ữên trái của khung ảnh Sau đó đặt trên Layer ảnh mới Bạn nên đặt mỗi một đổi tưọTig ảnh trên một Layer khác nhau vì khi tạo hiệu ứng cho từng lớp ảnh hay muốn chỉnh sửa lại sẽ dễ dàng hơn rất nhiều Dùng công cụ Gradient tool trên Toolbox để đổ hai màu trộn lên đối tượng ảnh vừa tao:

thời nhấn tồ hợp phím Ctrl + T để thay đổi lại kích thước và vị trí của 2 lớp ảnh đó:

và định dạng chữ trên khung thiết kế như sau:

35

■ Bước 4: Tạo tiếp một Layer chữ nữa ữên khung ảnh để ữang trí

thêm cho Logo

BOOKS

O N L i N E

siêu THỊ SÁCH TR ựC TUYẾN

Bài tập 3: Thiết kế Logo Công ty quảng cáo ANZ

Cũng tương tự 2 bài tập ữên, bạn thiết lập bản thiết kế với kích thước tương tự Trong bài này ta sẽ sử dụng đến thư viện các hình mẫu Shape cổ sẵn của chưcmg trình Bây giờ ta bắt đầu vào việc thịết kế và dựng hình logo cho công ty quảng cáo ANZ

box sau đó trên thanh Tool bar trỏ chuột tiếp vào biểu tượng Custom Shape