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

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ế.. Các fil

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ề:

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

V Enable Live Preview

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).

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

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ế

Macromedia F la sh Basic 8 [Untitied4^

H m

2oom Out Magnificatlcn

Ctrl4-' 25

ỵ p

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

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

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

độ 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

View

■ừ Q,

Pont Untitled-2* 1 ^ *

Í' 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^^

■ 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

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)

p ^ ■

^ iibh

| y y y , ihhhh

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

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

□▼

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

a ; Zoom tool; Phóng to, thu nhỏ kích thước bản vẽ

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

<»K Fill Color; ộ đổ màu nề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ó

» ỉ «% empty «jraryCtiH-L

: •

« so $5 » ÌS J-V

A

! SNt+F3 ị

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

Để ử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

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

Backgroưnđ fom ents: White

Select fofeground colof: OK

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

0 , H ' \ ,

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

|\ A dobe Photoshop - pw i psđ ® 100% (l-ocus R0t(/8|j

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

ịT Tàhom à v Ị Regiar v | IP 25 pi strong v j Ề : ' ỉ M H ^

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

■ Bước 2; Sau khi click vào biểu tượng Custom Shape tool thì hiện

lên biểu tượng Shape ở phía bên phải của biểu tượng Custom Shape Bạn bấm chuột vào nút hình tam giác trên biểu tượng này sẽ xuất hiện bảng gồm các hình shape mẫu vẽ sẵn của thư viện chương trình (hình 2.12)

Hinh 2.12

Sau khi hình shape đã được tạo, nhấn tổ họp phím Ctrl + Enter để tạo đường Selection cho hình vừa tạo

này (hình 2.13) Bước này nên làm vì sau này nếu muốn thay đổi hình dạng hay màu sắc sẽ dễ dàng hơn là bạn để tẳt.cả trên cùng một lóp

37

_ • • ; ; ^ ^ - Q Q

h Layers '‘■ ■ C fe ^ ẹ b s'''lỄ ạ ỉh s^ ^' ^ Normal V I Opacity: 100% > I

■ - •♦'-•'''i»*

Fill: 100% > ị Locki o 'h Ũ

: * c

Hình 2.13

Toolbox thành hai màu đỏ và đen Trỏ chuột vào biểu tượng Gradient tool trên Toolbox (hình 2.14)

■ Bước ố: Sau khi đã tạo hình thứ nhất cho logo, ta tạo thêm chữ

vào hình Trỏ chuột vào công cụ Type tool trên Toolbox và gõ dòng chữ AnZ

Sử dụng thêm tính năng của công cụ Type tool để tạo hình cho dòng chữ này đẹp hơn

Bước 7: Trỏ chuột vào biểu tượng Create Warped Text trên thanh công

cụ Toolbar (hình 2.15), khi đó sẽ hiện lên bảng Warp Text Bạn chọn một trong các hiệu ứng chữ để tạo hình (hình 2.16)

C ô n g c ụ W a r p e d T e x t

^ Adob« i>twtoshop' riogo2'copf

Ví dụ, chọn hiệu ứng Arc với các tham sổ Bend = +63, Horizotal Disortion = 33 thì hình ảnh sẽ như sau:

Kích thước của chữ cần tăng lớn lên một chút, bạn thiết lập Size lên khoảng cỡ 30

chữ AnZ đồng thời chinh sửa lại thuộc tính cho dòng chữ này, bạn sẽ có một logo hoàn chỉnh

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

Banner chia làm hai loại: ảnh tĩnh và ảnh động Một banner động phải

là các đoạn phim được ưình duyệt hỗ trợ còn banner tĩnh thi có thể thiết kế đơn thuần trên các chương trình 2D ở đây bạn có thể chọn Photoshop vì đây là chương trình tương đối dễ làm và màu sắc cũng phù họp với tiêu chuẩn về màu và hình ảnh xuất ra của Website

Một Banner nằm ở trên đầu và phía bên phải Logo ữong một trang Web Banner và Logo thường có kích thước không giới hạn nhưng cần lưu

ỷ về độ dài của banner và Logo khi chèn vào phải hợp lý với độ rộng màn hình hiển thị của ừang Web Vậy trong banner nên trình bày thế nào và nó

40

chứa những gì ở bên trong ? Thưòng một banner hay chứa những nội dung sau: câu khẩu hiệu, những biểu ngữ mới, những hình ảnh quảng cáo, hoạ tiết liên quan đến chủ sở hữu Website đó Ví dụ Website của công ty

Internet — Kết nối toàn cầu”

ở phía trên ta đã có 3 bài tập thiết kế về Logo của 3 đổi tượng khác nhau là : Trung tâm đào tạo ngoại ngữ Focus, Siêu thị sách trực tuyển và Công ty quảng cáo AnZ Vậy để tiện cho việc trình bày, ta sẽ tạo ra 3 banner của 3 đối tượng trên bằng ảnh tĩnh Kích thước chiều cao của mỗi banner có thể thiết lập tối đa là 150 đem vị pixel và chiều rộng có thể đặt là

500 đcm vị pixel

Bài ỉập 4: Thiết kế banner cho trung tâm đào tạo ngoại ngữ Focus

bạn có để màu trắng hoặc có thể pha màu nền;

Tool với cỡ chữ 30 và di chuyển như hình mẫu

SHARE TO BE SHARED

và thêm một lóp mới sau đó bạn đổ màu lên lớp ảnh vừa tạo

Ằ tạo hình

LET SHARE TO BE SHARED

ảnh vừa tạo

LET SHẦRÌ TO BE SHARED

TRUNCi TÂM NCÌOẠI NGỪ Fcx:us

Bước 5: Thêm một số hình hoạ tiết ữang trí để banner không bị

đoTi điệu

□ □

LET SHARE TO BE SHARED

TRUNU TẢM NÜOAI NŨỬ FOCUS

Gợi ý: Bạn tạo ra 5 hình vuông như hình mẫu trên rồi đổ nền màu trắng Sau đó tạo Stroke cho khối hình vuông này bằng cách vào menu Edit chọn lệnh Stroke

□

' '1 RUNO TÂM NGOẠI NGỮ FOCUS

Đến đây bạn đã thiết kế xong một banner đơn giản của trung tâm ngoại ngữ Focus Bạn có thể thêm các hình ảnh và hoạ tiết nhưng tránh lạm dụng42