Thiết kế web Flash không cần viết code

Đây là bài viết Thiết kế web Flash không cần viết code trong box Multimedia & Đồ Họa, một box của chuyên mục Thủ Thuật; Flash Catalyst CS5: Thiết kế web Flash không cần viết code Adobe Flash Catalyst (FC) là một công cụ thiết ...

kết quả từ 1 tới 4 trên 4
  1. TTThao - 03-07-2010 11:14 AM
    Flash Catalyst CS5: Thiết kế web Flash không cần viết code

    Adobe Flash Catalyst (FC) là một công cụ thiết kế chuyên nghiệp mới thuộc bộ Adobe Creative Suite 5, cho phép bạn tạo ra các giao diện ứng dụng và nội dung tương tác mà không cần phải viết bất kỳ một dòng code nào. Bạn có thể sử dụng Flash Catalyst để tạo các quảng cáo tương tác, sản phẩm hướng dẫn, danh mục đầu tư thiết kế và các giao diện người dùng cho các ứng dụng đa phương tiện, ứng dụng web.

    Hướng dẫn này dựa trên dự án mẫu của tác giả Tanya Heins từ adobe.com, giúp bạn có những khái niệm cơ bản để làm quen với chương trình tuyệt vời này!

    Trước hết bạn cần tải dự án mẫu tại:
    http://download.macromedia.com/pub/developer/flashcatalyst/intro_to_flash_catalyst.zip
    . File nén này cung cấp cho bạn một thư mục chứa: tập tin nguồn .ai, tập tin nguồn .psd để bạn thực hành, tập tin hoàn thành .fxp để bạn tham khảo, cùng các thành phẩm.
    Thiết kế web Flash không cần viết code

    1. THIẾT KẾ GIAO DIỆN TRONG PHOTOSHOP / ILLUSTRATOR:

    Nội dung bài viết chỉ sử dụng tập tin nguồn .psd được thiết kế trên Photoshop, bạn có thể tìm hiểu thêm việc thiết kế giao diện trên Illustrator thông qua tập tin nguồn .ai kèm theo.

    Trước hết, bạn cần mở tập tin ecotours_ui.psd, lưu ý cấu trúc (hoặc thứ tự) của các lớp trong tập tin này để về sau có thể tự thiết kế và xây dựng giao diện người dùng của riêng bạn cho Flash Catalyst.
    Thiết kế web Flash không cần viết code
    Minh họa cấu trúc lớp của file ecotours_ui.psd
    Nhóm background chứa các yếu tố chung cho tất cả các trang hay các thành phần trong thiết kế.
    Nhóm navigation chứa các lớp văn bản và hình đồ họa cho các nút. Những yếu tố này sẽ được chuyển đổi thành các nút chức năng khi import vào Flash Catalyst.
    Nhóm page chứa nội dung cụ thể cho mỗi trang.
    Nhóm header chứa những thành phần phía trên đầu trang.

    Khi tạo các giao diện cho riêng bạn trên Photoshop, bạn thiết kế các thành phần càng chi tiết càng tốt, mỗi thành phần sẽ thuộc một lớp riêng. Điều này sẽ giúp cho việc xử lý tập tin psd trong Flash Catalyst dễ dàng hơn nhiều. Ví dụ như bạn đã thiết kế tất cả các thành phần như thanh cuộn, trình đơn thả xuống, các trạng thái nút,… khi đó trong Flash Catalyst bạn chỉ cần bật hoặc tắt các lớp.

    2. NHẬP MỘT THIẾT KẾ PHOTOSHOP VÀ FLASH CATALYST:
    Sau khi thiết kế giao diện trên Phostoshop theo nguyên tắt đã trình bày ở trên, bạn có thể nhập nó vào Flash Catalyst để làm việc tiếp

    - Mở Flash Catalyst > trên màn hình Welcome, trong mục Create New Project from Design File, bạn nhấn vào tùy chọn From Adobe Photoshop PSD file…
    Thiết kế web Flash không cần viết code
    - Cửa sổ Import xuất hiện > bạn hãy tìm đến nơi chứa file PSD đã thiết kế > nhấn nút Open sau khi đã chọn file
    Thiết kế web Flash không cần viết code
    - Lúc này xuất hiện cửa sổ Importing Adobe Photoshop File bạn hãy chờ giây lát
    Thiết kế web Flash không cần viết code
    - Trong cửa sổ Photoshop Import Options, bạn có thể thay đổi các tùy chỉnh, tốt nhất nên chọn Keep editable để có thể chỉnh sửa về sau.
    Thiết kế web Flash không cần viết code
    - Bạn có thể tùy chỉnh thêm bằng cách nhấn chuột vào nút Advanced... Tùy chỉnh này cho phép bạn thiết lập chi tiết các lớp được giữ lại để chỉnh sửa hoặc trộn các lớp thành một. Nhấn OK sau khi hoàn tất thiết lập.

    Sau khi nhập xong, giao diện sẽ xuất hiện chính xác như bạn đã thiết kế trên Photoshop. Flash Catalyst bố trí các công cụ và các bảng chức năng như hình sau:
    Thiết kế web Flash không cần viết code
    - Pages / States: quản lý các trang hoặc các trạng thái của đối tượng. Hiện tại chúng ta chỉ mới có một trang duy nhất.
    - Heads Up Display (HUD): được thiết kế giúp bạn dễ dàng truy cập nhanh các lệnh liên quan đến các đối tượng được chọn trong canvas (vùng làm việc).
    - Layers panel: quản lý các thành phần thông qua các lớp và nhóm lớp (biểu tượng thư mục).
    - Tools panel: chứa các công cụ cho phép bạn hiệu chỉnh hoặc tạo thêm các đối tượng vào giao diện ứng dụng.
    - Ngoài ra, Flash Catalyst còn cung cấp thêm các bảng chức năng khác như Timeline panel, Properties panel,…
    Lưu ý: Nếu bảng Timeline hiện lên, bạn nên nhấn đôi chuột để ẩn nó đi vì hiện tại chúng ta chưa dùng đến chức năng này.

    Một vài phím tắt khi làm việc:
    - Ctrl + spacebar + nhấn chuột hoặc khoanh vùng: phóng to vùng đang làm việc.
    - Ctrl + Alt + spacebar + nhấn chuột: thu nhỏ vùng đang làm việc.
    - Nhấn giữ spacebar + kéo thả: di chuyển vùng làm việc.
    Nếu bạn đã quen làm việc với các phím tắt trong Photoshop thì trong Flash CataLyst này các phím tắt cũng tương đương.

    3. LÀM VIỆC VỚI CÁC TRANG VÀ CÁC TRẠNG THÁI:
    Khi làm việc với một dự án Flash Catalyst thường chúng ta sẽ cần phải tạo ra nhiều hơn một screen cho các ứng dụng hoặc website. Mỗi screen như vậy có thể được gọi là trang (Page) hay trạng thái (state)
    - Trang (page): thường được sử dụng để mô tả các hình thức, nội dung khác nhau của một ứng dụng hoặc website.
    - Trạng thái (state): thường dùng để miêu tả những trạng thái của nút (up, down, over, disabled,…) hay đối tượng.

    a. Tạo các trang / trạng thái khác nhau:
    Pages và States là khái niệm trung tâm trong Flash Catalyst. Bạn có thể có nhiều trạng thái hoặc nhiều trang đại diện cho các hướng nhìn khác nhau. Người sử dụng sẽ điều hướng giữa các trang khác nhau tùy theo kế hoạch chuyển hướng do bạn thiết kế.
    - Bạn nhấn chuột vào nút Duplicate State hai lần để tạo thêm hai trang mới hoặc nhiều hơn tùy vào thiết kế của bạn.
    - Nhấn đúp chuột vào vùng tiêu đề của mỗi trang và đổi lại tên lần lượt là location, tour, gallery ứng với ba lĩnh vực chính của dự án. Lưu ý: Tên tiêu đề cho các trang không thể có khoảng trắng.
    Thiết kế web Flash không cần viết code
    Tiếp theo chúng ta sẽ tìm hiểu cách kiểm soát khả năng hiển thị các lớp của từng trang / từng trạng thái.

    b. Quản lý khả năng hiển thị các lớp:
    Việc quản lý các thành phần trong Flash Catalyst được kiểm soát bằng bảng Layers. Đây là nơi chứa tất cả các thành phần liên quan đến dự án của bạn.

    - Với trang được chọn, bạn có thể nhấn biểu tượng con mắt để ẩn những lớp liên quan, hoặc nhấn chuột vào vị trí đó để xuất hiện biểu tượng con mắt nhằm hiện các thành phần.
    - Ví dụ, bạn chọn trang location trong bảng Pages / States, tắt các thành phần toure page, toure over đi, đồng thời mở các thành phần location page, location over lên chúng ta sẽ có giao diện trang như hình:
    Thiết kế web Flash không cần viết code

    c. Thêm chuyển hướng giữa các trang hoặc các trạng thái:
    Tiếp theo chúng ta sẽ tạo ba nút điều hướng bên trái của trang web, khi nhấn vào một nút sẽ chuyển trang trang tương ứng.
    - Chọn các đối tượng mà bạn muốn chuyển đổi thành nút > trong bảng HUD, mục Convert Artwork to Component, chọn Button
    Thiết kế web Flash không cần viết code
    - Sau khi đối tượng đã được chuyển đổi thành Button, các HUD sẽ thay đổi để hiển thị các tùy chọn cho button như Up, Over, Down và Disabled. Bạn nên đổi tên nút trong bảng Layer để tiện quản lý, ví dụ nút này được đổi tên là tour_button.
    Thiết kế web Flash không cần viết code
    - Nhấp đôi vào nút để chuyển sang chế độ chỉnh sửa nút. Lúc này bảng Pages / States sẽ chuyển sang hiển thị các trạng thái của nút.
    Thiết kế web Flash không cần viết code
    - Nhấn chuột vào văn bản muốn làm nhãn > trong bảng HUD, mục Convert to Button Part, đánh dấu chọn mục Label
    Thiết kế web Flash không cần viết code
    - Trong bảng Layers bên phải, bạn có thể tắt mở các thành phần cho các bạn trạng nút bẳng cách nhấn vào biểu tượng con mắt. Ví dụ, bạn sẽ tắt lớp nền cho trạng thái up, đổi màu nên cho trạng thái over,… Bạn cũng có thể dùng bảng công cụ để thêm các yếu tố đồ họa mà trên tập tin nguồn PSD chưa có.
    - Bạn nên đổi tên tổng quát cho các lớp trong nút này để có thể tái sử dụng, bằng cách nhấn đôi chuột vào tên cần đổi, sau đó nhập vào tên mới.
    Thiết kế web Flash không cần viết code
    - Như vậy bạn đã hoành thành được một nút, bạn sẽ cần phải tạo thêm hai nút điều hướng. Bạn cần trở về trang đầu cấp bằng các nhân chuột vào dòng tên dự án ở dưới thanh Pages / States (xem hình minh họa).
    Thiết kế web Flash không cần viết code
    - Khi nút đang được chọn, bạn có thể thay đổi tên nhãn trong mục Label của bảng Properties. Khi thay đổi nội dung khác, tên này sẽ được cập nhật cho phần nhãn mà bạn đã thiết lập ở các bước trên.
    Thiết kế web Flash không cần viết code
    - Sao chép và dán nút này cho đến khi bạn có thêm hai trường hợp nữa. Thay đổi tên nút trong bảng Layer và nội dung Label tương ứng cho hai nút điều hướng: location và gallery.
    - Vào menu Modify > Align, để canh chỉnh cho ngay hàng.
    - Để các nút này hiển thị trên tất cả các trang, bạn chọn nút > nhấn chuột phải lên nút > Share To State > All States.
    Thiết kế web Flash không cần viết code
    - Lặp lại thao các cho hai nút còn lại

    d. Tạo tương tác giữa các trang và các trạng thái:
    Sau khi các nút hoàn thành bạn cần tạo ra sự tương để điều hướng giữa các nội dung trong ứng dụng.
    - Chọn nút cần điều hướng > nhấp đôi chuột vào dòng Interactions để mở rộng bảng này > nhấn chọn Add Interaction > nhấn vào Choose State, chọn thành phần muốn điều hướng đến
    Thiết kế web Flash không cần viết code
    - Khi ở trong trang location, thì nút location_buttion sẽ không thể nhấn được nữa. Để được như vậy, trong trang location, chọn nút location_button bỏ chọn Enabled của bảng Properties. Lúc này trạng thái Disabled được hiển thị.
    Thiết kế web Flash không cần viết code
    - Lặp lại các bước trên cho hai nút còn lại.

    Các bài viết liên quan tới Thiết kế web Flash không cần viết code:

  2. TTThao - 03-07-2010 11:16 AM
    e. Xem trước dự án:
    Bây giờ, bạn đã hoàn thành các tương tác và điều hướng trong dự án. Bạn có thể xem trước kết quả bằng cách:
    - Vào menu File > chọn Run Project (hoặc thao tác nhanh bằng tổ hợp Ctrl+Enter). Flash Catalyst sẽ mở trình duyệt web mặc định trên máy bạn để hiển thị kết quả.
    Thiết kế web Flash không cần viết code
    - Nhấn chuột vào các nút điều hướng để kiểm tra.
    Thiết kế web Flash không cần viết code


    4. TẠO MỘT CỬA SỔ POPUP CHO DỰ ÁN:
    Trong phần này, bạn sẽ thêm một trang mới cho dự án của bạn. Trang này sẽ hiển thị dạng popup khi bạn nhấn chuột vào mục tour finder.
    Thiết kế web Flash không cần viết code
    - Trong bảng Pages / States, nhấn nút Duplicate States để thêm một thành phần mới, đặt tên là tour_finder_popup. Trong bảng Layer bạn cho hiển thị thư mục tour finder popup map và ẩn những lớp không cần thiết.
    Thiết kế web Flash không cần viết code
    - Trở lại trang tour, chọn các thành phần của tour finder và chuyển nó thành tour_finder_button. Người sử dụng sẽ nhấn vào nút này để điều hướng đến tour_finder_popup.
    Thiết kế web Flash không cần viết code
    - Bạn cũng cần một nút tắt popup, nên bạn cần chuyển dấu x của trang tour_finder_popup thành close_map_button với thao tác tương tự.
    Thiết kế web Flash không cần viết code
    - Sử dụng bảng điều khiển tương tác Interactions để điều hướng: khi nhấn vào nút tour_finder_button sẽ chuyển đến trang tour_finder_popup, khi nhân vào nút close_map_button sẽ chuyển trở lại trang tour.
    Thiết kế web Flash không cần viết code Thiết kế web Flash không cần viết code
    - Trước khi bắt đầu tạo hiệu ứng chuyển tiếp giữa các trang, bạn nên xem trước dự án một lần nữa để đảm bảo các nút hoạt động đúng như mong đợi

    5. HIỆU ỨNG CHUYỂN TIẾP GIỮA CÁC TRANG / CÁC TRẠNG THÁI:
    Trong phần này, bạn sẽ tạo diễn hoạt chuyển tiếp giữa các trang / các trạng thái. Hãy mở bảng TimeLines lên bằng cách nhấn đôi chuột vào tên của nó.
    Thiết kế web Flash không cần viết code
    Bên trái TimeLines cung cấp cho bạn một danh sách State Transitions chứa tất cả các bước chuyển tiếp cho các trang. Bên phải là dòng thời gian chuyển co những trang đang được chọn. Trong dòng thời gian, bạn có thể tạo ra các hành động chuyển tiếp (fade, scale, move, resize, rotate) giữa hai trang hay hai trạng thái. Những diễn hoạt chuyển tiếp này còn có thể áp dụng cho những thành phần trên trang.

    a. Tạo diễn hoạt chuyển tiếp với nút Smooth Transition:
    - Chọn một thành phần trong danh sách State Transitions muốn áp dụng hiệu ứng
    - Trong thanh dưới cùng của bảng TimeLines, nhấp vào mũi tên bên cạnh nút Smooth Transition. Lúc này sẽ xuất hiện bảng Smooth Transition Options. Tại đây bạn có thể thiết lập như sau:
    + Thời gian chuyển tiếp Dutation = 0.75 giây
    + Chọn Smart Smoothing trong mục Timing để chuyển mượt
    + Đánh dấu chọn vào mục Overwrite existing effects nếu muốn ghi đè lên các chuyển tiếp đang có.
    Thiết kế web Flash không cần viết code
    - Với những thiết lập như trên, bạn có thể nhanh chóng áp dụng cho các trang còn lại bằng cách nhấn vào nút Smooth Transition.
    - Lặp lại các thao tác trên cho tất cả các trang trong danh sách State Transitions.
    - Nhấn Ctrl+Enter để kiểm tra đã diễn hoạt chuyển tiếp đã thực hiện.

    b. Tùy chỉnh một quá trình chuyển tiếp:
    Bây giờ, chúng ta sẽ tạo ra một chuyển tiếp liên quan đến face, move và scale. Bạn có thể dùng chuyển tiếp này cho giữa trang tourtour_finder_popup.
    - Chọn trang tour trong bảng Pages / States
    - Cho hiển thị thư mục tour_finder_popup_map trong bảng Layer > chọn lớp world-map-gray
    - Chọn công cụ Tranfrom (Q) từ bảng công cụ, đặt chuột ở góc và kéo nhỏ đối tượng này cỡ bằng hình tour finder của trang tour. Nhớ giữ phím Shift khi kéo để duy trì tỷ lệ (giúp đối tượng không biến dạng).
    Thiết kế web Flash không cần viết code
    - Để bắt đầu quá trình tạo chuyển tiếp, bạn hãy ẩn thư mục tour finder popup map trong bảng Layer đi
    - Trở lại bảng TimeLines, nhấn nút Smooth Transition cho hai chuyển tiếp tour - tour_finder_popup và ngược lại tour_finder_popup – tour. Lúc này, bạn sẽ có được diễn hoạt chuyển tiếp face, move và scale. Với bước chuyển đổi Resize, bạn phải chắc chắn rằng có một kiểu Easing được chọn trong bản Properties
    Thiết kế web Flash không cần viết code
    - Trong quá trình thực hiện, bạn có thể nhấn nút PlayThiết kế web Flash không cần viết code để xem thử kết quả của quá trình chuyển tiếp.
    - Bạn có thể điều chỉnh thời gian bằng kéo dài hoặc thu ngắn các thanh chuyển đổi. Ngoài ra bạn còn có thể di chuyển nó đến những thời điểm khác nhau:
    Thiết kế web Flash không cần viết code
    - Ctrl+Enter để kiểm tra kết quả toàn diện.

    6. XUẤT BẢN MỘT DỰ ÁN ĐỂ PHÂN PHỐI:
    Như vậy chúng ta đã hoàn thành về cơ bản một dự án. Bây giờ, bạn cần phải xuất bản dự án để phân phối.
    Vào menu File > chọn Publish to SWF/AIR… > nhấn nút Browse để chọn nơi lưu khác (nếu muốn) > chọn thêm các tùy chọn cần thiết > nhấn Publish. Flash Catalyst sẽ tạo ra một thư mục kết quả với hai phiên bản của dự án:
    - Thư mục deploy-to-web thích hợp cho việc upload lên một máy chủ web.
    - Thư mục run-local cho phép bạn kiểm tra kết quả ngay trên máy tính của bạn.
    Thiết kế web Flash không cần viết code

    7. LỜI KẾT:
    Mặc dù, hướng dẫn trên chỉ giúp bạn tạo được một ứng dụng đơn giản, nhưng nó cung cấp những bước cơ sở để bạn bắt đầu tiếp cận Flash Catalyst.

    Mọi góp ý, thắc mắc bạn có thể gửi về thachtruongthao@gmail.com

    THẠCH LONG (e-CHIP 242 – 02/07/2010)

  3. roseplates - 06-04-2011 10:37 AM
    Cái này là phần mềm được viết sẵn để dành cho người mới học thiết kế web chứ cái web làm từ CS5 này có cho cũng không thể sử dụng để kinh doanh được vì chả có cái tính năng gì. Đặc biệt với kiểu thiết kế web seo sẽ rất kiêng kị việc sử dụng flash trong thiết kế. Thậm chí với 1 trang thiết kế web giá rẻ nhưng do công ty chuyên nghiệp tự thiết kế cũng hơn đứt cái CS5 rùi. Nhưng học không phải không có lợi vì nó giúp ta bước đầu để đi lên làm designer chuyên nghiệp. ^^





    Tags :
    Thiet ke web (http://www.url.vn)
    |
    Thiet ke web gia re (http://www.thietkewebvietnam.net)
    |
    Thiet ke web Ha Noi (http://www.thietkewebhanoi.vn)
    |
    Thiet ke web seo (http://www.thietkewebseo.com)

  4. lanngoc0423 - 23-03-2012 01:52 PM
    nhìn phức tạp quá nhỉ.............