Wii向けフラッシュコンテンツでユーザビリティを高めるコツ

初めまして、現在静岡支社勤務のtaiyohと言います。

codereposでもtaiyohの名前で登録させて頂いております。宜しくお願いします。

さて早速ですが、今更ですが、Wiiネタを書かせていただきます。

ミュージシャンがたまに言う「つくって半年ほど放置してた曲ですが…」みたいな状態です。

半年どころかまるまる1年ですが。

WiiではブラウザにOperaを採用しており、Flash Playerはバージョン7が搭載されているのは周知の通りだと思います。

HTMLを表示した場合、anchorタグのonMouseOverイベントでバイブレーションが起こりますが、

flashでのボタンのonMouseOverイベントでは、そのWii特有のユーザビリティの恩恵に預かることができません。

そこで、ちょっとトリッキーですが、こんなコードを書いてみました

サンプル向けに切り出したもので、案件に関わる変数名や、不要な処理は全て省いています

なお、これはAS2とJSの連携技で、Flash7ではExternalInterfaceが使えないので

Flash / JavaScript Integration Kitが必要です。

//AS側
//onMouseイベントで呼び出される
function call_vibration() {
    var proxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);
    proxy.call("make_vibration", _root._xmouse, _root._ymouse);
};

//JS側
var make_vibration = function(x, y) {
    x -= 8;
    y -= 8;
    var div = document.createElement("div");
    div.style.cssText = "position:absolute;width:40px;height:40px;left:"+x+"px;top:"+y+"px";
    div.id = "thislink";
    div.innerHTML = '<a href="javascript:void(0)">    </a>';
    document.body.appendChild(div);
    setTimeout(function(){ document.body.removeChild(div); }, 150);
};

つまり、リンクとして表したいボタンのonmouseイベントでcall_vibration関数を実行しておくようにすると、

イベント発火時に、マウスカーソル付近にanchorタグの入ったdivノードを差し込む仕掛けです

自動的にonmouse状態となり、リモコンが震えます。

そして、150msでノードを削除するようにしてるので、超反応の人でない限り、クリックするのはそう簡単ではないと思います。

cssの指定で、あらかじめ a { text-decoration: none; } を指定しておくことで、mouseoverの時でも色が変わることはありません。

なお、JS側のmake_vibration関数内の各種数値については、お好みの数値に差し替えていただいて結構です。

Flash / JavaScript Integration Kitの使い方について

過去の僕のブックマークをさらってみたところ、yoshiwebさまの

Flash / JavaScript Integration Kit の使い方 - yoshiweb.NET

を参考にさせていただいてました。ありがとうございます!