Aiさんという方からPano2VRのスキンについての質問メールを頂いた。 さらに当サイトの作品は「さらっと難しい動作をしていて、尊敬してます!!」などと過分なるお褒めの言葉も♪ たとえそれがお世辞でも誉められれば調子に乗るのが世の常、人の常。 そこで、ここはひとつ僭越ながら講義してみようと思うに至ったわけです。
というわけで、頼まれもしないのに勝手にPano2VRのSkinEditorについて講義をたれる第2回目は、Aiさんのメールにあったいくつかの質問の中から「同じボタンでスライドショーを次へ次へと進めていますが、どのような仕組みなのでしょうか？」についてお答えしたいと思う。 使うのは「コンテナ」と「Init」である。
| 免責事項 以下は、ネット等で知り得た知識に自分の経験を加味したものです。 従ってこれが正しいと主張するものではありません。 正解はこれだボケ！ と言うツッコミは優し目にお願いします。 |
まずは下記サンプルをご覧いただきたい。 これは高知県高知市の県庁前交差点で撮影したもので、同交差点は国道32号や同33号の起終点になっており、それを示す六角形の起終点標が置かれている。 下記サンプルでは「≪」あるいは「≫」をクリックすることで、その六角形の各面を見せるようにスライドショーが仕込んである。 また、左下の国道ボタンをクリックすることでスライドショーの表示非表示も可能である。
いかがだろうか。
では、各要素を見ていこう。 まずは種明かしから。 Aiさんのメールに「同じボタンでスライドショーを」とあるが、実は同じボタンではない。 同じ場所に表示させている複数のボタン、が正解である。（参照図#1） 構造を説明すると、最初にコンテナを作成し（ここではContainer-fotoと名付けている）、そのコンテナに背景となるfoto-background、そしてfoto01からfoto06までを格納。 さらにそれぞれのfotoを親とし子に左ボタン（foto※-L）と右ボタン（foto※-R）を格納していく。 つまり、右に進むボタン、あるいは左に進むボタンは各写真それぞれに付随しているのである。
そして、一番の親要素であるContainer-fotoにInitプロパティを施す。（参照図#2） InitとはInitialize（イニシアライズ）という風に自分は理解している、要するに初期化であると。 今回の例ではfoto01は透明度1に、それ以外は透明度0に初期化しているわけである。 そして親要素の透明度はそれぞれの子要素にも反映されるので、foto02からfoto06に格納されている各ボタンも透明度0となる。 もちろん各foto要素においてそれぞれの初期透明度を設定しても良いが、このように自要素のプロパティ画面ひとつで他要素の初期プロパティを一括コントロールする、そういう時にこのInitプロパティが有用だったりするのである。
次に写真をめくるために施した各ボタンのプロパティを見ていこう。 例としてfoto02の子要素であるfoto02-Lとfoto02-Rを見てみる。（参照図#3） foto02-Lにはクリックされたらfoto01を透明度1にし、自分の親要素であるfoto02を透明度0とするように仕込んである。 同様にfoto02-Rにはfoto02を透明度0にし、foto03を透明度1とするように仕込んである。 以下、すべての左ボタンには自分の親要素を透明度0にし左隣のfoto要素の透明度1にする、右ボタンには親要素を0にし右隣を1とする、このように仕込めば完成となる。
ちょっとくどくなるが一連の動作を言葉で説明するならば、パノラマが読み込まれる → Container-fotoは子要素の内foto01（含むfoto01-Lボタンとfoto01-Rボタン）のみを透明度1にする → foto01-Rボタンをクリック → foto01は透明度0になりfoto02（含むfoto02-Lボタンとfoto02-Rボタン）が透明度1になる・・・・、といった具合である。
最後に国道ボタンに施したプロパティを簡単に説明する。 国道ボタンにはContainer-fotoを対象にしたToggle Element Visibilityアクションを仕込んである。（参照図#4） これはその名の通り対象となる要素が可視状態なら不可視に、不可視状態なら可視状態へと切り換えるもの。 今回のサンプルではContainer-fotoの初期属性を可視にしてあるのでクリックすることで不可視へと、仮に初期属性を不可視にしてあるならば可視へと切り換えてくれるわけである。 以後は可視と不可視を交互に切り換えるプロパティとして働く。
以上、僭越ながらPano2VR SkinEditor講座でした。 なお、ここに示したやり方以外にもスライドショーを実現する方法はあると思いますので、あとは各自でいろいろと工夫してみてください。 次回の講義はPano2VRの得手不得手を取り上げたいと思っております。