Hiệu ứng hover, scale, tooltip cho nút Nút điều khiển Autotour

Dưới đây là phiên bản hoàn chỉnh cho nút Tạm dừng / Tiếp tục Autotour trong Krpano, có thêm:

  • ✅ Hiệu ứng hover (phóng to)

  • ✅ Scale mặc định

  • ✅ Tooltip khi di chuột

✅ Mã XML: Nút điều khiển Autotour với hiệu ứng hoàn chỉnh

<!-- Nút Tạm dừng / Tiếp tục -->
<layer name="autotour_btn"
url="pause.png"
keep="true"
align="righttop"
x="20" y="20"
scale="0.5"
handcursor="true"
tooltip="Tạm dừng tour"
onhover="tween(scale, 0.6, 0.3);"
onout="tween(scale, 0.5, 0.3);"
onclick="toggle_autotour();" />

✅ Mã toggle logic

<!-- Toggle trạng thái -->
<action name="toggle_autotour">
if(autotour_enabled,
set(autotour_enabled, false);
set(layer[autotour_btn].url, 'play.png');
set(layer[autotour_btn].tooltip, 'Tiếp tục tour');
,
set(autotour_enabled, true);
set(layer[autotour_btn].url, 'pause.png');
set(layer[autotour_btn].tooltip, 'Tạm dừng tour');
call(continue_autotour);
);
</action>

✅ Hành động khởi động và tiếp tục autotour

<action name="startup">
set(autotour_enabled, true);
loadscene(scene1);
</action><action name=“continue_autotour”>
if(autotour_enabled,
delayedcall(5, loadscene(scene2, null, MERGE, BLEND(1)); );
);
</action>

🎨 Gợi ý icon:

  • pause.png: hình icon tạm dừng.

  • play.png: hình icon phát lại.
    Bạn nên đặt chúng trong thư mục tour/skin/ và cập nhật đường dẫn tương ứng, ví dụ:

url="skin/pause.png"

Dưới đây là phiên bản nâng cao cho nút Tạm dừng / Tiếp tục Autotour, với:

✅ Các tính năng:

  1. Hiệu ứng hover (phóng to)

  2. Tooltip dạng “bong bóng” tùy chỉnh

  3. Bóng đổ nhẹ + chữ rõ ràng

  4. Thay đổi nội dung tooltip tùy theo trạng thái

✅ CODE HOÀN CHỈNH

1. Nút chính: autotour_btn

<layer name="autotour_btn"
url="skin/pause.png"
keep="true"
align="righttop"
x="20" y="20"
scale="0.5"
handcursor="true"
onclick="toggle_autotour();"
onhover="show_autotour_tooltip(); tween(scale, 0.6, 0.2);"
onout="hide_autotour_tooltip(); tween(scale, 0.5, 0.2);" />

2. Tooltip tùy chỉnh: autotour_tooltip

<layer name="autotour_tooltip"
type="text"
visible="false"
text="Tạm dừng tour"
css="padding:6px 12px; background:#000000cc; color:#fff; border-radius:6px; font-size:14px; box-shadow:0px 2px 6px rgba(0,0,0,0.5);"
align="righttop"
x="70"
y="22"
zorder="2"
background="true"
roundedge="10"
edge="left"
autoalpha="true"
alpha="0"
/>

3. Hành động xử lý Tooltip

<action name="show_autotour_tooltip">
set(layer[autotour_tooltip].visible, true);
tween(layer[autotour_tooltip].alpha, 1, 0.3);
</action><action name=“hide_autotour_tooltip”>
tween(layer[autotour_tooltip].alpha, 0, 0.3);
delayedcall(0.3, set(layer[autotour_tooltip].visible, false););
</action>

4. Hành động Toggle Autotour

<action name="toggle_autotour">
if(autotour_enabled,
set(autotour_enabled, false);
set(layer[autotour_btn].url, 'skin/play.png');
set(layer[autotour_tooltip].text, 'Tiếp tục tour');
,
set(autotour_enabled, true);
set(layer[autotour_btn].url, 'skin/pause.png');
set(layer[autotour_tooltip].text, 'Tạm dừng tour');
call(continue_autotour);
);
</action>

🔁 Ví dụ thêm: Scene gọi autotour có điều kiện

<scene name="scene1" title="Cảnh 1" onstart="if(autotour_enabled, delayedcall(5, loadscene(scene2)); );">
...
</scene>

Xem thêm

Dự án

VR360 – Virtual tour

Điện thoại
 or
Zalo
Facebook Twitter Youtube Wordpress

Dự án

Dịch vụ

Liên hệ