Thiết kế banner động bằng Adobe Edge Animate không dùng flash

Lượt xem: 4027

Trên thực tế trong các dự án web, chúng ta thường có nhu cầu thiết kế có “banner động” với hàm ý rằng trên đó có các hoạt cảnh (animation)chuyển động và nhiều nội dung khác. Ngoài ra chúng cần tạo ra chuyển động mượt mà, nhẹ nhàng, và hỗ trợ cả khả năng tương tác với người dùng. Một trong số các giải pháp thường thấy trước đây là sử dụng Flash, tuy nhiên hiện tại Flash lại không được hỗ trợ trên phần lớn các loại thiết bị di động do đó giải pháp sử dụng HTML5, CSS3, và JavaScript có vẻ như đang là 1 lựa chọn phù hợp hơn. Với công cụ Adobe Edge Animate, chúng ta có thể nhanh chóng tạo ra được các “nội dung động và có tính tương tác\\\" mà không cần phải viết code.

 

Phần 1: Giới thiệu Adobe Edge Animate

Adobe Edge Animate là một sản phẩm của hãng Adobe danh tiếng. Edge Animate là công cụ hỗ trợ desinger thiết kế các chuyển động trên giao diện trực quan (tương tự như Flash Professional), từ nội dung đã thiết kế đó, Adobe Edge Animate sẽ phát sinh tự động mã nguồn dưới dạngHTML5, CSS3, Javascript để chúng ta có được “nội dung động” hoàn chỉnh để tích hợp vào các dự án phát triển Web của mình.

Chắc chắn code được phát sinh sẽ không tuyệt vời và tối ưu bằng những đoạn code tự viết. Nhưng nếu xét về mặt tốc độ ra thành phẩm và khả năng đáp ứng yêu cầu, rõ ràng công cụ này tỏ ra khá hiệu quả. Tuy không thể chuyên nghiệp như Flash Professional, nhưngEdge Animate vẫn tạo ra các chuyển động mượt mà và quan trọng là kết quả được xuất ra dưới dạng HTML5, CSS3, có sự trợ giúp của Javascript, Jquery

Các khái niệm, nguyên lý chuyển động tương tự như Flash. Do đó, nếu các bạn đã từng sử dụng Adobe Flash thì việc làm quen tool này sẽ thuận lợi và dễ dàng hơn. Tuy nhiên, nếu bạn chưa biết gì về Adobe Flash cũng không sao, chúng tôi sẽ giới thiệu và hướng dẫn chi tiết bằng hình ảnh cũng như giải thích rõ những khái niệm cơ bản về nó.

Đầu tiên chúng ta cần tiến hành cài đặt Adobe Edge Animate: các bạn cần download công cụ này tại trang chủ của Adobe theo địa chỉ sau đây: http://html.adobe.com/edge/animate/ rồi tiến hành cài đặt bình thường như tất cả các phần mềm khác.

Không gian làm việc chính của Adobe Edge Animate bao gồm các thành phần chính như sau:

Adobe-Edge-Animate-01

  • ­Thanh công cụ: dưới hệ thống menu là thanh công cụ. Edge Animate hỗ trợ bạn một số công cụ cơ bản để tạo hình, hiệu chỉnh nhanh đối tượng. ­
  • Properties Panel: Mỗi đối tượng đều có các thuộc tính riêng như kích thước, màu nền, màu viền, đổ bóng... Vùng thuộc tính Properties giúp bạn quản lý, chỉnh sửa các thuộc tính như vậy cho từng đối tượng. ­
  • Stage: hiểu nôm na nó giống như một sân khấu, nơi mà các diễn hoạt sẽ xảy ra, các đối tượng là các diễn viên, sẽ được designer sắp xếp lịch diễn trên sân khấu đó. Stage ở đây mà một giao diện trực quan, cho phép bạn sắp xếp các đối tượng và tạo chuyển động cho chúng trên đó. Khi bạn lưu lại, nó sẽ xuất cho bạn file html hiển thị và chuyển động trên trình duyệt như những gì bạn thực hiện trên Stage. ­
  • Timeline Panel: là nơi bạn điều khiển các diễn hoạt cho từng đối tượng. (chúng tôi sẽ giải thích chi tiết hơn khi đi vào ví dụ cụ thể trong các bài sau) ­
  • Elements Panel: là nơi chứa các thành phần trang web (giống như Layer trong Flash, Photoshop). Bạn có thể cho phép tắt/hiển thị thành phần, khóa chúng... Chúng được phát sinh khi bạn tạo đối tượng trên Stage. Có 1 lưu ý quan trọng là: các đối tượng trênStage được sắp xếp giống như layer, đối tượng ở trên sẽ đè lên đối tượng ở dưới. Như hình bạn thấy, đối tượng rectangle nằm dưới ellipse

Adobe-Edge-Animate-02

  • ­ Library Panle: nơi quản lý hình ảnh, font chữ, symbols,... (những đối tượng import từ bên ngoài vào)

Adobe-Edge-Animate-03

Hy vọng các bạn sẽ tải và cài đặt công cụ hữu ích này để sẵn sàng cho phần kế tiếp của chuỗi bài viết về Adobe Edge Animate này. Trong phần tiếp theo, chúng tôi sẽ hướng dẫn các bạn sử dụng phần mềm này để tạo một hiệu ứng chuyển động cụ thể. Chúng tôi cũng hy vọng, sẽ nhận được các phản hồi, góp ý và cả các đoạn demo hay do chính các bạn thực hiện.

 

 

Theo Itstudent.net

Bình luận