Biến đồ họa thành các nút trong Flash Catalyst

• Có Thể 19, 2024

Bây giờ chúng tôi đã nhập tệp dự án danh mục đầu tư PhotoshopLayout.sheet của chúng tôi vào Adobe^R Tốc biến^R Chất xúc tác^TM và đã khám phá không gian làm việc Catalyst, chúng tôi sẵn sàng làm việc điều hướng cho danh mục đầu tư của chúng tôi.

Ngay bây giờ, chúng tôi chỉ có một trang, hoặc tiểu bang, cho dự án của chúng tôi. Chúng tôi cần tạo thêm hai trang để có thể hiển thị một logo khác nhau trên mỗi trang.

1. Trong bảng Pages / States, chúng tôi sẽ nhấp vào nút Sao y hai lần. Điều này sẽ cung cấp cho chúng tôi Trang2 và Trang3. Nhưng, tất cả đều giống nhau. Hãy quan tâm đến điều đó.

2. Nhấp vào biểu tượng Trang1 và chuyển đến bảng điều khiển Lớp. Mở thư mục Logo. Chúng tôi chỉ muốn logo 1 hiển thị trên trang này. Tắt khả năng hiển thị cho logo 2 và 3.

3. Nhấp vào biểu tượng Trang2 và tắt khả năng hiển thị cho logo 1 và 3. Bật khả năng hiển thị cho logo 2.

4. Nhấp vào biểu tượng Trang3 và tắt khả năng hiển thị cho logo 1 và 2. Bật khả năng hiển thị cho logo 3.

Tiếp theo, chúng tôi sẽ tạo các nút cho danh mục đầu tư của chúng tôi. Chúng tôi có một hình thu nhỏ cho mỗi logo. Đây sẽ là các nút.

5. Quay trở lại Trang1 bằng cách nhấp vào biểu tượng trong bảng điều khiển Trang / Bang. Trong bảng điều khiển Lớp, mở thư mục Hình thu nhỏ. Trên Artboard, nhấp vào hình thu nhỏ cho logo 1. Khi bạn thực hiện việc này, bạn sẽ thấy HUD mở và bảng Thuộc tính sẽ thay đổi.

Trước tiên hãy làm việc trong HUD. Đây là nơi chúng tôi sẽ nói với Catalyst rằng chúng tôi muốn biến hình ảnh bitmap này thành một nút.

6. Trong phần Chuyển đổi tác phẩm nghệ thuật, nhấp vào Chuyển đổi tác phẩm nghệ thuật thành thành phần và chọn Nút từ danh sách thành phần. HUD sẽ thay đổi để cung cấp cho chúng tôi các điều khiển mới cho nút của chúng tôi. Mở rộng danh sách Tương tác tùy chỉnh và sau đó nhấp vào biểu tượng Plus. Chọn On Click từ danh sách. Bạn sẽ nhận được một menu thả xuống khác gọi là Do Action. Từ menu này, chọn Play Transition to State. Từ menu thả xuống Chọn trạng thái, chọn Trang1 vì chúng tôi muốn nút này đưa người xem đến Trang1.

7. Nhấp vào hình thu nhỏ cho logo 2 và lặp lại bước trước đó. Đặt Chọn trạng thái thành Trang2.

8. Nhấp vào hình thu nhỏ cho logo 3 và lặp lại bước trước đó. Đặt Chọn trạng thái thành Trang3.

Hãy kiểm tra các nút của chúng tôi. Từ thanh thực đơn, nhấp vào Tệp - Chạy dự án. Nó sẽ mở trong trình duyệt web của bạn. Khi bạn nhấp vào từng nút, logo chính xác sẽ hiển thị.

Trong hướng dẫn tiếp theo, chúng tôi sẽ làm mờ nút cho logo hiển thị và thêm chuyển tiếp giữa các trang.

Bản quyền 2018 Adobe Systems Incorporated. Đã đăng ký Bản quyền. (Các) ảnh chụp màn hình sản phẩm Adobe được in lại với sự cho phép của Adobe Systems Incorporated. Adobe, Photoshop, Album Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Đóng góp, Cap activate, Flash Catalyst và Flash Paper là / là [a] nhãn hiệu đã đăng ký [s] hoặc nhãn hiệu [s] của Adobe Systems Incorporated tại Hoa Kỳ và / hoặc các quốc gia khác.