Bố trí đáp ứng

Hippani Animator Một Cuộc Du lịch Nhanh Các hướng dẫn

Bắt đầu Nhấp nháy tam giác Sử dụng thời hạn Thêm nút Nút nhấn bằng ảnh Các kịch bản trong thời gian Chơi ngược lại Thêm thêm cảnh Mở trang Web Tham gia hai bộ phim Văn bản bóng Hình ảnh bóng Mờ quá trình chuyển đổi Cắt ra hình ảnh Làm cho làn sóng Tạo mặt nạ Vòng lặp vòng lặp Bằng cách sử dụng Pivot Points Làm việc với các lớp Sự hiểu biết kịch bản ID Thêm YouTube Video Kiểm soát thời gian Thêm âm thanh Thêm dung JavaScript Thu giữ bàn phím Làm việc với các đầu vào và các hình thức Khung kiểm soát với JavaScript Giữ nút Tạo ra một Loop trò chơi Bố trí đáp ứng Mở rộng HTML Tạo ứng dụng điện thoại Cơ sở dữ liệu XML Xuất bản trên WordPress Xuất bản trên Facebook Các hướng dẫn Video

Giao diện

Các Trình đơn và Thanh công cụ Sở thích Timeline Thư viện Trình biên tập Trình chơi Xuất khẩu Trình chỉnh sửa Ảnh Trình chỉnh sửa Hình vẽ Font Bộ nạp

Hoạt hình

Phim Cảnh Khung

Đối tượng Dung JavaScript Biên tập viên dịch thuật Giấy phép Hãy so sánh các phiên bản Có gì mới không

Tạo ra một Loop trò chơi

Mở rộng HTML

Hướng dẫn này chứng tỏ làm thế nào để tạo bố trí đáp ứng sử dụng JavaScript. Thêm hai hộp vào thư viện. Thực hiện một màu đỏ và một màu xanh lá cây. Những hộp là chỉ là ví dụ. Bất kỳ hình dạng hoặc các đối tượng có thể được sử dụng.

Thêm các hộp để trình biên tập.

Sắp xếp các hộp, do đó, họ điền vào các bên trái và bên phải. Để lại một biên giới xung quanh họ.

Điều này bây giờ là một ví dụ về một trang web với nội dung trên các bên trái và bên phải. Nó sẽ nhìn tốt trên một trình duyệt web máy tính để bàn hoặc một điện thoại ở chế độ ngang. Thật không may, cách bố trí này sẽ không hoạt động tốt trong chế độ chân dung. Hoặc là, hai hộp phải được thu nhỏ nhỏ để phù hợp với, hoặc mở rộng để điền vào màn hình, và cắt ở hai bên của các hộp.

Tình trạng này là nơi bố trí phản ứng nhanh là cần thiết. Trong chế độ chân dung, một hộp nên di chuyển trên khác. Để làm điều này, chúng tôi cần phải di chuyển các hộp bằng cách sử dụng JavaScript. Điều này có nghĩa là tắt 'Sử dụng thời gian' cho cả hai hộp và thiết lập một 'Kịch bản ID'.

Để di chuyển các hộp bên ngoài các giới hạn của bộ phim, chúng tôi cần phải tắt clip trong các thuộc tính bộ phim.

Nơi tốt nhất để sắp xếp các hộp là trong các 'Chỉnh cỡ' sự kiện phim.

Các chức năng mà chúng ta cần là GetLeft, GetTop, GetWidth và GetHeight. Các chức năng này cho các giới hạn của trình duyệt web hoặc thiết bị bằng cách sử dụng các tọa độ của bộ phim. Khi clip được bật, các giá trị này trở về các giới hạn của bộ phim. Nếu bạn đang sử dụng 'Không' phim quy mô, GetLeft và GetTop sẽ luôn luôn trở lại 0 và có thể được bỏ qua.

Đầu tiên cho phép sắp xếp hai hộp để một điền vào phía bên tay trái và khác điền vào phía bên phải.

BoxA.SetBounds(GetLeft(),GetTop(),GetWidth()/2,GetHeight());
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());

Tiếp theo, chúng tôi sẽ thêm một biên giới của kích thước 10. Giá trị này 10 là không nhất thiết phải theo điểm ảnh, nó là ở quy mô tương tự của bộ phim. Sử dụng bộ phim quy mô 'Không' cho tất cả mọi thứ để trong pixel.

var Border=10;
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);

Cuối cùng, chúng tôi sẽ kiểm tra để xem nếu chiều rộng của trình duyệt web hoặc thiết bị là ít hơn chiều cao. Khi điều đó xảy ra, sắp xếp lại các hộp theo chiều dọc.

var Border=10;
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}

Bây giờ bạn có thể nhìn thấy, nếu bạn thay đổi kích cỡ các cầu thủ, hai hộp sẽ sắp xếp mình tự động. Những hai hộp có thể dễ dàng được thay thế bằng các hình dạng và các đối tượng. Ví dụ này có thể được mở rộng để xử lý phức tạp hơn bố trí.

Tạo ra một Loop trò chơi

Mở rộng HTML

Tài liệu này được dịch từ tiếng Anh, bằng cách sử dụng một dịch giả trực tuyến. Chúng tôi xin lỗi nếu bạn tìm thấy bất kỳ sai lầm. Nếu bạn muốn giúp chúng tôi làm cho chỉnh. Đó là một trình soạn thảo bản dịch ở Hippani Animator (trong trình đơn trợ giúp). Chúng tôi cho ra miễn phí giấy phép phím cho ai đó sửa chữa hơn 100 cụm từ. Xin vui lòng liên hệ để biết thêm chi tiết.