Nghiên cứu phần mềm Macromedia Flash & xây dựng Một số ứng dụng trong lĩnh vực quảng cáo

Nghiên cứu phần mềm Macromedia Flash & xây dựng Một số ứng dụng trong lĩnh vực quảng cáo

Lời mở đầu

Trong thời đại ngày nay, thế giới ngày càng trở nên thân thiết, gần gũinhau hơn nhờ vào sự phát triển không ngừng nghỉ của các phơng tiện truyềnthông, trong đó phải kể đến mạng thông tin toàn cầu Internet mà mảng WorldWide Web đang đóng một vai trò hết sức quan trọng nhờ vào tính phổ dụng vàtiện lợi của nó trong việc truyền bá thông tin Lĩnh vực này hiện nay hầu nh đangthu hút các bạn trẻ, đặc biệt là giới sinh viên, học sinh và những nhà thiết kếWeb chuyên nghiệp Do vậy việc thiết kế các ảnh động là nhu cầu không thểthiếu đối với các trang quảng cáo cũng nh trang web, với mục đích nhằm làm nóthêm phần sinh động hấp dẫn Mặc dù có rất nhiều công cụ phần mềm, nhngMacromedia Flash đợc coi là đáp ứng các yêu cầu hơn cả

Đợc sự hớng dẫn của thầy Nguyễn Văn Thiện, chúng em đã cố gắng thuthập thêm thông tin để hoàn thành bài Đồ án Tốt Nghiệp đợc giao

Chơng I: Tìm hiểu chung về phần mềm

Macromedia Flash

I/ Giới thiệu về Macromedia Flash

Năm 1995, khi hai chàng thanh niên Jonathan Gay và Robert Tatsumi xây dựng phần mềm FutureSplash Animator ( sau này trở thành Macromedia Flash) với niềm đam mê cháy bỏng từ thời thơ ấu, có lẽ cả hai đều không ngờ

có ngày sản phẩm của mình trở thành công cụ cơ bản của lĩnh vực thiết kế Web Flash gần nh đồng nghĩa với hoạt hình trên web “hoạt hình trên web” ”

Ngày nay, Macromedia Flash đã trở thành chuẩn thiết kế hình ảnh và hoạthình vectơ trên Web Không chỉ rất hữu ích cho ngời mới bắt đầu thiết kế Web,Flash còn là một công cụ không thể thiếu đợc của các chuyên gia khi cần tạo cácphần tử Web động, diễn cảm, bổ sung tính tơng tác cho các phần tử của trang,tạo ra các đoạn phim, sử dụng âm thanh…

Phiên bản Marcomedia Flash MX 2004 có nhiều cải tiến đáng kể trênnhiều mặt Từ sau phiên bản 4.0, Marcomedia đã tự khẳng định mình là hãnghàng đầu trong lãnh vực thiết kế Web Hiện nay Flash MX đợc sử dụng khá phổbiến tại Việt nam ở đây chúng ta đề cập đến phiên bản Marcomedia Flash MX

2004 (Version 7.0)

II/ C¬ b¶n vÒ Marcomedia Flash MX 2004

1 CÊu h×nh yªu cÇu

2 Cài đặt.

Mua phần mềm Flash hoặc vào http://www.macromedia.com để tải về

Mở file chứa bản setup của Marcomedia Flash MX 2004 (Hình1.1)

Hình 1.1

Nhấp vào biểu tợng để cài đặt

Hình1.2

Hình1.3

3 Tìm hiểu về giao diện vùng làm việc của Macromedia Flash

Vùng làm việc của Flash còn đợc gọi là môi trờng sáng tác, có một loạtcác bảng điều khiển đợc bố trí xung quanh Stage (vùng sáng tác) Các tập tinFlash đợc dựa trên các bảng tiến trình(Timeline) Đây là nơi tất cả các tài nguyêncủa bạn (chẳng hạn nh các đồ họa văn bản) đợc bố trí, sắp xếp Một con trỏkhung hình di chuyển dọc theo bảng tiến trình khi một tập tin đợc thể hiện trongtrình thể hiện Flash Player Hãy quan sát vùng làm việc phổ biến trong hình 1.4

và 1.5 Bạn sẽ tìm hiểu về cách làm việc của mỗi phần trong vùng làm việc (môitrờng sáng tác)

H×nh1.4

Môi trờng sáng tác có thể đợc chia ra thành một số vùng dựa trên tínhnăng của chúng Mỗi vùng chứa đựng nhiều điều khiển khác nhau

Menu: các menu trong Flash cũng giống nh các menu trong phần lớn các

phần mềm ứng dụng khác mà bạn sử dụng Menu của Flash bao gồm các lệnhphổ biến của Flash nh Save, Copy, Paste và Help cùng với các lệnh riêng củaphần mềm

Bảng tiến trình ( Timeline): các tập tin SWF có thể đợc thể hiện trên một

bảng tiến trình và điều này cho thấy lịch sử của Flash vốn là một chơng trình dựatrên hoạt hình Một bảng tiến trình bao gồm một loạt các khung hình nằm trongmột hàng Các khung hình có thể là trống, có thể chứa nội dung hoặc có thể làkhung hình khóa Bảng tiến trình có thể là một lớp hoặc nhiều lớp chồng lênnhau, chứa đựng các phần tử và mã lệnh tạo nên tập tin SWF Mỗi lớp có một

dòng khung hình Một con trỏ khung hình đợc dùng để di chuyển qua lại trongcác tiến trình và chọn khung hình hiện tại khi bạn đang làm việc.

Bảng điều khiển: các bảng điều khiển giúp bạn kết hợp các hồ sơ Flash

lại với nhau trong Flash vì chúng cung cấp các kiểm soát đến hầu nh mọi thứ màbạn cần để tạo hoặc sửa đổi một ứng dụng Bạn có thể mở và đóng các bảng điềukhiển bằng cách sử dụng menu Windows, vì thế bạn có thể có nhiều hoặc một sốbảng điều khiển mở cùng một lúc Bảng điều khiển Tool chứa một số lớn công

cụ mà bạn có thể sử dụng để chọn, tạo hoặc chỉnh sửa nội dung trong hồ sơ

Vùng sáng tác (Stage): nằm ở giữa các bảng điều khiển là Stage, đóng

vai trò làm vùng thấy đợc trong ứng dụng của bạn Stage là nơi bạn đặt cácmedia chẳng hạn nh đồ họa, nhấn nút, hoạt hình và các trờng tơng tác trên biểumẫu

Các thẻ hồ sơ và thanh soạn thảo: trong Windows, mỗi tập tin bạn mở

sẽ có một thẻ hồ sơ gắn với nó Các thẻ hồ sơ giúp bạn di chuyển qua lại giữacác hồ sơ đợc mở trong Flash Thanh soạn thảo nằm ngay phía dới các thẻ hồ sơgiúp bạn di chuyển qua lại giữa các phần tử của tệp tin Flash Một trong số cácmenu thả xuống trên thanh soạn thảo sẽ kiểm soát việc phóng to thu nhỏ Stage

và Menu kia để dùng đợc chọn một phần tử trong stage để chỉnh sửa

Đặc điểm thẻ hồ sơ chỉ có trong Windows Trên các máy Mac, mặc định thanh soạn thảo nằm ngay phía dới bảng tiến trình Để thay đổi vị trí của các thẻ hồ sơ lên phía trên hoặc xuống dới bảng tiến trình, hãy nhấn Shift + Alt và nhấp đúp chuột (Windows) hoặc Command + Shift và nhấp đúp chuột (Mac).

Sẽ không thấy các thẻ hồ sơ nếu bạn đang làm việc trên máy PC và Stage cha đợc mở cực đại Nếu bạn không thẻ các thẻ hồ sơ mới, hãy nhấp vào nút Maximize trên thanh tiêu đề của Stage.

Bảng kiểm soát property: bảng kiểm soát Property là một bảng điều

khiển theo ngữ cảnh, hiển thị các thông tin và các thuộc tính có thể chỉnh sửanhững gì mà bạn đang chọn trong Stage Nếu không có gì đợc chọn (hoặc bạn

đang chọn Stage), bạn có thể thay đổi thuộc tính của Stage và bản thân hồ sơ

đang mở Mặc định, bảng kiểm soát Property sẽ nằm phía dới Stage Nếu bảngkiểm soát cha đợc mở, hãy mở nó bằng cách chọn Ctrl+F3 (Windows) hoặcCommand + F3 (Mac)

4 Các khái niệm, thao tác cơ bản

4.1/Các Khái Niệm Cơ Bản:

• Thuộc tính (Properties): là các tính chất áp dụng cho đối tợng (lớp,

hình vẽ,… )

• Lớp (Layer): là nơi chứa các hình vẽ, đối tợng, đợc xem là thành phần tiến

trình hoạt hình Các lớp đợc xếp chồng lên nhau (che phủ nhau), có bao nhiêulớp cũng đợc

• Lớp dẫn (Guide Layer): là lớp dùng làm khung, sờn để bố trí các lớp khác.

• Khung (Frame): cửa sổ thao tác.

• Tập tin FLA: Tập tin chứa mã nguồn của Flash.

• Tập tin SWF: Tập tin đã chuyển sang hoạt hình của Flash.

4.2/Các Thao Tác Cơ Bản

Định Trang: File\Page setup.

Menu View:

 Goto: Chuyển dẫn các khung hoặc các ảnh trong Film đang làm việc

 Zoom in, Zoom Out: Phóng to, thu nhỏ cửa sổ làm việc

 Magnification: Điều chỉnh tỉ lệ cửa sổ làm việc (Show Frame, Show All:

Hiện 1, tất cả các khung làm việc)

 Outlines: Chuyển toàn bộ các đối tợng trên khung làm việc ra dạng đờng

nét không có tô màu để làm việc nhanh hơn

 Fast: Tắt tính năng bỏ đờng răng ca (antialiasing) để vẽ nhanh hơn

 Antialias: Làm trơn các đờng nét ngoài của hình vẽ (trừ text)

 Antialias Text: Làm trơn các đờng nét ngoài của hình vẽ kể cả văn bản.

 Timeline: Hiển thị cửa sổ tiến trình

 Work Area: Hiển thị hoặc che đi vùng làm việc

 Rulers: Hiện ẩn cây thớc

 Grid\Show Grid: Hiện ẩn đờng lới (ô lới)

 Grid\Snap to Grid: Bật tắt tính năng cho đối tợng bám dính ô lới

 Grid\Edit Grid: Điều chỉnh ô lới.(Accuracy: chính xác)

 Guiders: Các chế độ cho lớp dẫn

 Hide Edges: Hiện ẩn gờ bao quanh đối tợng

 Hide Panels: Hiện ẩn các Panel (instance, info, character, mixer)

Menu Windows:

 New Window: Mở cảnh làm việc trong cửa sổ mới

 Toolbasr : Trình bày Toolbar (Main, Status, Controller)

 Tools: Hiện ẩn thanh công cụ Tools

 Panels: Hiện các thành phần cửa sổ làm việc khác

 Panel set: Bố trí lại các thành phần cửa sổ dạng mặc định

 Save Panel Layout: Ghi lại bố trí của một thành phần cửa sổ

 Close All Panel: §ãng tÊt c¶ c¸c thµnh phÇn cöa sæ kh¸c

 Action, Movie Explorer, Output, Debugger: Më c¸c cöa sæ chøc n¨ng

kh¸c…

 Cascade, Tile: s¾p c¸c cöa sæ lµm viÖc theo líp, l¸t g¹ch.

C C THAO T C: ÁC THAO TÁC: ÁC THAO TÁC:

4.2.1/ Arrow Tool (V) : dùng chọn, drag, sắp đặt các đối tợng vẽ Trong đó

có 3 lựa chọn là (Hiện ra ở dới thanh công cụ khi chọn arrow tool)

 Snap to objects: các đối tợng vẽ sẽ bám dính vào lới hoặc các đối tợng

gần kế khi di chuyển, quay, co dãn

 Smooth: làm mềm các đờng và hình dạng đơn giản

 Straighten: làm thẳng các đờng và hình dạng đơn giản.

4.2.2/ Sub select tool (A): dùng chọn đối tợng, thành phần của hình.

4.2.3/ Line Tool (N): dùng vẽ các đờng thẳng.

4.2.4/ Lasso Tool (L): chọn đối tợng làm việc với các tính năng đặc biệt hơn.

(chọn xong double click) Trong đó có 3 lựa chọn là:

 Magic wand: dùng chọn các đối tợng với vùng có hình dạng bất kỳ

 Magic wand properties: xác lập các thuộc tính cho Magic wand

 Polygon mode: dùng chọn các đối tợng theo đờng đa giác bất kỳ.

Hình 1.6 (Công cụ Tools)

4.2.5/ Text Tool (T): công cụ dùng tạo văn bản (Muốn xuống dòng nhấn

Enter)

4.2.6/ Pen Tool (P): dùng tạo các nét thẳng hoặc cong.

4.2.7/ Oval Tool (O): dùng vẽ hình tròn hoặc Ellipse.

4.2.8/ Rectangle Tool: dùng vẽ hình vuông hoặc hình chữ nhật, chỉ có 1 lựa

chọn là:

 Round Rectangle radius: dùng định góc tròn cho đỉnh (Corner radius)

4.2.9/ Pencil Tool (Y): dùng vẽ đờng bằng tay Có 1 lựa chọn là Pencil

Mode, khi chọn thì sẽ hiện ra 3 lựa chọn nữa gồm có:

 Straighten: vẽ đờng thẳng, trơn, gấp khúc;

 Smooth: vẽ đờng mềm mại, đờng cong;

 Ink: không làm gì với nét vẽ.

4.2.10/ Brush ( B ): Vẽ theo nét cọ Gồm có:

 Brush mode:

o Paint normal: vẽ trên vùng làm việc (đè);

o Paint Fills: vẽ các vùng có thể tô màu nhng không vẽ trên các đờng

nét;

o Paint behind: vẽ quanh các đối tợng, không đè, chỉ vẽ dới các

hình;

o Paint inside: vẽ bên trong vùng đợc tô màu, không vẽ đè lên nét,

nếu không có vùng tô màu thì vẽ không có tác dụng;

o Paint selection: chỉ vẽ bên trong vùng tô màu đã đợc chọn.

 Brush size: chọn kích thớc nét vẽ

 Brush shape: chọn nét vẽ

 Lock fill: bật tắt kiểu tô màu gradient.

4.2.11/ Ink Bottle Tool (S): dùng thay đổi nét bao quanh hình( màu nét) 4.2.12/ Paint Bucket Tool (K): dùng tô màu các hình đợc tạo ra từ đờng viền

(màu bên trong hình)

Gap size: chọn một cách tô trong hình:

o Don t close gap:’t close gap: hình không lỗ hở; Close

o small gaps: hình có lỗ nhỏ;

o Close medium

o Close large gaps: hình có lỗ hở lớn;

 Lock fill: bật tắt chế độ tô với kiểu màu Gradient.

4.2.13/ Dropper Tool (I): dùng cho phép lấy mẫu tô, kiểu đờng nét của một

đối tợng rồi áp dụng mẫu tô đó vào một đối tợng khác (chọn 1 mẫu rồi quét vào

1 mẫu khác)

4.2.14/ Eraser Tool (E) : dùng xóa đờng nét, vùng tô màu hoặc các định

dạng khác

 Eraser mode: chọn chế độ xóa:

o Erase normal: xóa nét và màu tô;

o Erase fill: chỉ xóa màu tô;

o Erase lines: chỉ xóa đờng nét;

o Erase selected fills: chỉ xóa vùng tô màu đang chọn, không xóa

nét;

o Erase inside: Xóa bên trong 1 vùng có tô màu, không xóa nét.

 Faucet: xóa đờng nét và vùng tô màu

 Eraser shape: chọn nét xóa.

4.2.15/ Hand Tool (H): dùng di chuyển “hoạt hình trên web”.bằng tay” quanh vùng làm việc 4.2.16/ Zoom Tool (M, Z): dùng phóng to, thu nhỏ vùng làm việc

 Enlarge: phóng to vùng làm việc

 Reduce: thu nhỏ vùng làm việc.

4.3/Các Thao Tác Chọn

 Chọn thông thờng: click đâu chọn đó

 Chọn đờng nét và màu tô : Double click

 Chọn đờng bao quanh: chọn công cụ Arrow Tool, tạo đờng bao quanh

 Phân đoạn bằng đờng thẳng: tạo hình, chọn công cụ Pencil Tool, chọn

Ink, vẽ cắt lát (slicing) qua hình ta đợc 2 hình phân đoạn

Kết nối các hình: (chỉ dùng cho hình trên cùng lớp, cùng màu và không có đờng

nét) Chọn 1 hình kéo lên hình kia, chúng sẽ kết nối thành 1

Thao tác trên hình:

 Modify\Shape\Convert lines to fills: Chuyển đờng nét thành hình dạng

có thể tô màu

 Modify\Shape\Expand fill: mở rộng vùng tô màu của một hình (expand:

mở ra ngoài, Inset: mở vào trong, Distance: khoảng mở)

 Modify\Shape\Soften fill edges: làm mềm đờng biên của hình (Distance:

khoảng cách giữa biên mềm và biên ngoài, Step: số bớc của biên mềm)

 Modify\Transform\Scale: co dãn

 Modify\Transform\Rotatean: xoay

 Modify\Transform\Flip …: lật ngang, dọc :

 Modify\Transform\Edit Center: chỉnh tâm hình che phủ.

Đặt thuộc tính cho khung: Modify\Movie hiện hộp thoại:

 Frame rate: chứa tốc độ hoạt cảnh cho frame

 Dimension: kích thớc ngang dọc cho frame

 Match: khung vừa với máy in hoặc nội dung

 Background color: chọn màu nền cho frame

 Rulers unit: chọn đơn vị đo trên thớc làm việc.

Thao tác văn bản: chọn, menu Text chọn các mục sau:

 Character: hiện cửa sổ thành phần Character

 Paragraph: hiện cửa sổ thành phần Paragraph

 Tách rời văn bản: chọn, Modify\Break Apart (có thể sửa từng ký tự, tô

màu… )

Canh biên: cho hiện cửa sổ thành phần Align (Window\Panels\Align | Ctrl + K) Chọn 1 trong:

 Align left edge: Canh các đối tợng có trục trái bằng nhau

 Align horizontal center: canh các đối tợng có trục giữa ngang bằng nhau.

 Align right edge: canh các đối tợng có trục phải bằng nhau

 Align top edge: canh các đối tợng có cạnh trên bằng nhau

 Align vertical center: canh các đối tợng có trục giữa đứng bằng nhau

 Align bottom edge: canh các đối tợng có cạnh đáy bằng nhau

 Distribute top edge: canh cho khoảng cách giữa các cạnh trên của các

đối tợng bằng nhau

 Distribute vertical center: canh cho khoảng cách giữa các trục giữa

ngang của đối tợng bằng nhau

 Distribute bottom edge: canh cho khoảng cách giữa các cạnh đáy của

các đối tợng bằng nhau

 Distribute left edge: canh cho khoảng cách giữa các cạnh trái của đối

t-ợng bằng nhau

 Distribute horizontal center: canh cho khoảng cách giữa các trục giữa

đứng của các đối tợng bằng nhau

 Distribute right edge: canh cho khoảng cách giữa các cạnh phải của đối

 Match width and height: tơng tự nh 2 cái trên gộp lại

 Space evenly vertically: canh cho khoảng cách giữa các đối tợng bằng

nhau (không giữa trên trục giữa mà 2 bên cạnh) trên trục tung

 Space evenly horizontally: canh cho khoảng cách giữa các đối tợng bằng

nhau ( không giữa trên trực giữa mà 2 bên cạnh) trên trục hoành

Chơng II: Xây dựng Một số ứng dụng

trong lĩnh vực Quảng cáo

i/Một số hiệu ứng

1 Hiệu ứng chuyển động từ hình sang chữ.

Tạo layer có tên là Welcome

Chọn File\Import\Import to stage (Ctrl + R) để chọn tập tin hình ảnh đa

vào Stage (vùng sáng tác)

Hình 2.1Hình ảnh đợc đa vào nếu có kích thớc quá lớn ta có thể thu nhỏ kích thớc

đúng nh ý muốn

Đa hình đợc chọn vào vị trí ta làm trên Stage (vùng sáng tác)

Chọn công cụ Selection Tool (công cụ chọn đối tợng) để chọn hình ảnh Tiếp theo đó chọn Menu Modify\Break Apart (Crtl + B) để tách hình đợc chọn ở trên ra thành đối tợng Shape

Hình 2.2

Chọn vào Key Frame đầu tiên của layer Welcome, mở bảng thuộc tính Properties, chọn shape

Hình2.3

Chọn Key Frame thứ 50 nhấn phím F7 để tạo một Key rỗng

Dùng công cụ Text Tool viết dòng chữ “hoạt hình trên web” Welcome To Quảng Ninh” vào Key rỗng này

Chọn công cụ Selection Tool (chọn đối tợng) để chọn dòng chữ đã viết Tiếp đó chọn Menu Modify\Break Apart (2 lần) Di chuyển Timeline hoặc nhấn

tổ hợp phím để xem thử