Tạo một cuốn sách tương tác

//www.youtube.com/embed/2Ej9nN2Pj0E

Giới thiệu:

Đây là một hướng dẫn để dạy bạn cách tạo một cuốn sách tương tác cơ bản bằng cách sử dụng hyperPad. Bằng cách làm theo hướng dẫn này, bạn sẽ hiểu các khái niệm cần thiết để ghép nối một cuốn sách.

Cấu trúc dự án:

Một dự án hyperPad được chia thành Các Cảnh, Đối Tượng và Hành Vi.

Cảnh:

Cảnh chứa tất cả các đối tượng cho ứng dụng của bạn và là một cách tuyệt vời để tổ chức các phần khác nhau cấu thành ứng dụng của bạn. Ví dụ, bạn có thể sử dụng một cảnh mới cho mỗi trang của một cuốn sách.

Đối tượng:

Các đối tượng là các mục riêng lẻ trong cảnh. Điều này bao gồm bất kỳ văn bản hoặc hình minh họa nào. Mỗi đối tượng có thể có các hành vi riêng của nó.

Hành vi:

Các hành vi là những gì làm cho cảnh và các đối tượng của bạn tương tác và sống động.

Nhập hình ảnh:

Bạn có thể nhập hình ảnh và minh họa từ Album Camera, Photo Stream và Drop Box. hyperPad sẽ tự động tạo hình ảnh không retina cho bạn, vì vậy khi bạn tạo hình minh họa hãy nhớ làm việc với kích thước hình ảnh 2048×1536. Kích thước hình ảnh tối đa mà Tapabl có thể nhập là 2048×2048 pixel.

Thêm vào đó, vì hyperPad hiện không hỗ trợ phông chữ hoặc văn bản giàu, bạn cũng nên nhập văn bản của bạn dưới dạng PNG có nền trong suốt.

Khi bạn đã nhập tất cả hình ảnh của mình, bạn có thể mở Ngăn Đối Tượng để bắt đầu thêm chúng vào cảnh của bạn.

Thêm Hành Vi:

Việc làm cho các đối tượng của bạn tương tác rất dễ dàng trong hyperPad.

Đầu tiên chạm vào đối tượng mà bạn muốn làm cho nó tương tác. Sau đó từ Thuộc Tính Đối Tượng, chạm vào nút “Hành Vi” để mở trình chỉnh sửa hành vi.

Đối với hướng dẫn này, tương tác chúng ta muốn tạo ra là khi người đọc chạm vào đối tượng, nó sẽ di chuyển đến một vị trí cụ thể.

Từ danh mục “Nhập”, kéo hành vi “Bắt đầu chạm” vào canvas.

Theo mặc định, hành vi bắt đầu chạm tự động chọn đối tượng hiện tại. Nhưng bạn có thể thay đổi điều này bằng cách chạm vào đồ họa đối tượng trong thuộc tính hành vi.

Kế tiếp kéo vào hành vi “Di chuyển đến Điểm”, và kết nối nó với “Bắt đầu chạm” bạn đã thêm ở bước trước. Hành vi “Di chuyển đến Điểm” sẽ di chuyển đối tượng đến một điểm đã chọn trên Canvas.

Bạn có thể nhập vị trí cụ thể bằng cách điền vào các trường đầu vào X/Y nằm trong “Thuộc Tính Hành Vi”. Bạn cũng có thể chọn vị trí để di chuyển một cách trực quan.

Để làm điều này một cách trực quan, chạm vào đồ họa đối tượng trong thuộc tính hành vi. Chọn đối tượng mà bạn muốn di chuyển, sau đó di chuyển mục tiêu màu xanh đến vị trí mong muốn.

Khi bạn đã hài lòng với vị trí, hãy chạm vào biểu tượng dấu kiểm để chấp nhận vị trí mới. Lưu ý rằng các trường X và Y trong thuộc tính hành vi được tự động điền.

Nếu bạn nhấn “Chơi” bây giờ, bạn sẽ thấy rằng nó hoạt động chính xác như các hành vi được sắp xếp. Đối tượng sẽ di chuyển sau khi bạn chạm vào nó.

Lật trang & Cảnh:

Bây giờ bạn đã có trang đầu tiên với các tương tác được thiết lập, bạn có thể muốn thêm các trang bổ sung, và khả năng vuốt giữa chúng.

Có một vài cách khác nhau mà chúng ta có thể thêm cử chỉ vuốt. Bạn có thể thêm hành vi vào một đối tượng cụ thể trong cảnh của bạn, hoặc thêm nó vào các Hành Vi Toàn Cục để nó ảnh hưởng đến tất cả các cảnh trong cuốn sách của bạn.

Đối với hướng dẫn này, hãy thêm cử chỉ vuốt vào Hành Vi Toàn Cục để chúng ta không phải thêm nó cho mỗi cảnh mới.

Để bắt đầu, hãy mở “Menu Tạo” bằng cách nhấn vào biểu tượng ở góc trên bên trái.

Sau đó chạm vào nút “Hành Vi Toàn Cục” ở dưới cùng để mở trình chỉnh sửa hành vi. Các hành vi bạn thêm ở đây sẽ ảnh hưởng đến toàn bộ dự án của bạn và thực thi khi bạn tải mỗi cảnh.

Kế tiếp kéo vào hành vi “Vuốt trái”, và chạm vào nó một lần khi nó đã được thêm vào canvas để mở thuộc tính hành vi.

Lưu ý trạng thái chuyển đổi “Vuốt trên bất kỳ thứ gì”. Nếu công tắc này được đặt thành “Tắt”, thì bạn phải vuốt trên một đối tượng cụ thể để sự kiện kích hoạt. Đặt công tắc ở vị trí “Bật”, để bạn có thể vuốt trên bất kỳ thứ gì và không bị giới hạn trong việc vuốt trên một đối tượng cụ thể.

Ghi chú: Nếu bạn thêm một hành vi “Vuốt” vào hành vi toàn cục, nó sẽ không có một đối tượng cụ thể nào được chọn. Đối tượng mà bạn bị giới hạn là “Nền”. Nếu bạn không đặt công tắc ở vị trí “Bật”, điều này có thể trông như hoạt động. Nhưng nếu bạn thêm các đối tượng khác che phủ nền, chúng có thể can thiệp vào việc vuốt, đặc biệt nếu chúng có các hành vi đầu vào cảm ứng khác được thêm vào.

Kế tiếp thêm một hành vi Tải Cảnh Tiếp Theo và kết nối nó với hành vi Vuốt. Điều này sẽ tự động tải cảnh tiếp theo ngay khi bạn vuốt ngón tay của mình về phía bên trái của màn hình.

Nếu bạn không có bất kỳ cảnh nào khác trong dự án của mình, thì cảnh hiện tại sẽ được tải lại. Thêm vào đó, nếu bạn đang ở cảnh cuối trong dự án của bạn, thì cảnh tiếp theo sẽ là cảnh đầu tiên trong danh sách các cảnh.

Bây giờ bạn có thể thêm một cảnh mới vào dự án của mình. Nếu bạn nhấn play, bạn sẽ thấy rằng cử chỉ vuốt của bạn hoạt động trong cả hai cảnh mà không cần thêm bất kỳ hành vi bổ sung nào.

Kết luận:

Đó chính là tất cả những gì bạn cần biết để tạo một cuốn sách tương tác trên hyperPad. Bạn có thể thử nghiệm với các hành vi khác nhau để tạo ra nhiều kiểu tương tác cho các cuốn sách của bạn.