Xibo チュートリアル Vol.10「V4.3で生まれ変わったタッチ(Interactive)インターフェースでタッチコンテンツをつくります!」

 チュートリアルは一旦終わったつもりだったのですが、Xiboを4.3に上げたところタッチのインターフェースがこのバージョンより大幅な変更となり、前つくったタッチのチュートリアルは使えないレベルになっていたので、V4.3 タッチ(Interactive)の作り方のチュートリアルつくりました!
 はじめてこのバージョン使う人は前のタッチのインターフェースに比較して直感的にわかりやすくなりましたのでご安心を!

 一番大きく変わったのはInteractiveモードというインターフェースができたことです。真ん中上にある紙ヒコーキアイコンのボタンを押すと、Intaractiveモードに切り替わります。これは主にタッチによる画面遷移を設定するためのモードです。

 まず、最初にInteractiveウィジェットを配置します。左メニューのウィジェット 紙ヒコーキアイコンのInteractiveを選択。"Button" "リンク" "Interactive Zone"のウィジェットが出現します。これはそれぞれ、そのボタン、リンク、ゾーンにタッチすると、リンク先に遷移するものになります。

1)同じレイアウト内でのタッチ

 まずは同じレイアウト内でのタッチについて。レイアウト内にInteractive Zone と Buttonの ウィジェットを二個配置してみてください。Interactiveゾーン内のコンテンツをボタンで切り替えるサイネージをつくってみたいと思います。

 次にこのウィジェットにアクションを設定します。右上のヒコーキアイコンをクリックするとInteractiveモードに切り替わります。"Add an Action"で配置したウィジェットにアクションを設定します。
 アクション”ウィジェットに移動” トリガー”タッチ/クリック” トリガー”アクションをつけたいウィジェット(ボタン)” 目標”アクションを反映したいウィジェット” ロードするウィジェット”画像、動画やウィジェットなどでも可”
 トリガーや目標の番号は勝手に採番されてこれは変えられないようなのですが、そのアクションが反映されるウィジェットに対して→がつきます。ウィジェットにカーソルを合わすと + マークが出るのですがこれを目標までドラッグしてもアクションをつけることができます。視覚的にはずいぶんわかりやすくなりましたが前のバージョンとはやり方が全く変わりました。と言っても前のバージョンでつくったレイアウトもこの方式に自動で変換されて使えます。
 プレビューはInteractiveモードを解いて、再生ボタンを押せば従来通りできます。

2)レイアウトを渡ってのタッチ

 レイアウトを渡ってのタッチもやり方は同じです。呼び出したいレイアウトにはまず識別コード(前は識別子コードでしたが呼び名が変わった。レイアウトの編集からつけることができます)をつけます。これは前のバージョンも同じです。
 Interactiveモードにして、左下のsearch for layouts で飛びたい先のレイアウトを配置しておきます。
 アクション”レイアウトに移動” トリガー”タッチ/クリック” トリガー”アクションをつけたいウィジェット(ボタン)” レイアウトコード”飛びたい先のレイアウト識別コード”。この操作もドラッグでもできます。

 前のバージョンだとどこにアクションついていて、どこが目標になっているか視覚的にわからなかったのですが、一目でわかるようになりました。
 タッチができるようになったのは2年以上前でしたが、インターフェースが生まれ変わって使いやすくなりましたので、是非ともみなさまもタッチコンテンツつくってみてください!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です