カテゴリー別アーカイブ: Flash

テキスト入力の備忘録


随分久々になってしまいましたが、そろそろこちらを有効活用しようかなと思い始めています。

さて、Flashを使っているとブラウザやプレイヤーによってさまざまなバグと遭遇することがありますが、前に痛い目を見たのが「テキスト入力」。プレイヤーが一緒でもブラウザによって動作が違うなど、なかなか曲者です。

FileReferernceとテキスト入力

最も悩まされたのがこれ。IE7+Windowsで発生。FileReferenceでファイルをアップロードして文字情報を入力するようなものだったんですが、FileReference.browse()を実行した後、半角全角キーが効かなくなり、半角英数しか入力できなくなるという現象がありました。一度Flashからフォーカスを外せば治る(例えば検索バーにフォーカスを当てるとか)のですが、まあ、それを利用者に強要するわけにもいかない。さてどうしたものか。

結局、FileReferenceにイベントリスナをつけて、ファイルが選択された、あるいはファイルの選択がキャンセルされた時に、Flashへのフォーカスを当てなおせばいいようです。

これ、アップロードする部分と文字情報入力部分が離れてたもんで、危うく気づかないところでした。

private function windowActive():void{
if(Capabilities.os.substr(0, 3) != 'Win'){return;}
try{
ExternalInterface.call('function(){window.focus();document.getElementById("FlashのID").focus();}');
}
catch(err:Error){
trace(err.message);
}
}

try-catchしないとFlashIDEでデバッグした時にエラーになってしまうので一応。

Mac Leopard+Firefox3

上記の対策で、さてWindowsは動いたよかったよかったと思ってたんですが、今度は逆にMac LeopardのFirefox3で動かなくなってしまいました。仕方ないので、OS判定を入れることにしました。原因はそこにあったか不明ですが、とりあえずWin,Macともに動くようになりました。

Firefox2やSafari3では問題なかったのでMacというよりMac版Firefox3の問題だとは思いますが、何故起こったのか未だにわかりません。特に問題のあるコードでもなさそうなんですが。

Mac Tigerでの不具合

日本語の入力モードの変換にはIME.enabledのtruefalseやIME.conversionModeの切替で行いますが、IME.conversionModeが実は曲者だったようで、Mac Tiger環境下でJAPANESE_HIRAGANAに変更すると時々ブラウザごと落ちる場合がありました。実際には変更した瞬間ではなく、モードを変更し、違うフィールドに移った上で、2回以上変換キーを押すと落ちるという感じした。

  1. 日本語入力フィールドが2つあって、それぞれ、フォーカスが当たったらconversionModeを変更するようにした。
  2. 一方のフィールドにフォーカスが当たっているだけのときはいくら変換キーを押しても問題なし。
  3. しかしその後、他方のフィールドにフォーカスを当て、日本語を入力し、変換キーを押すと2回目でブラウザが落ちる

これはブラウザに関係なく、Mac Tiger環境では全てそうなりました。まあ、何かしらやり方が不味かったのかもしれませんが。とりあえず、IME.enabledの変更は効くようなので、そちらに逃げることでブラウザ強制終了は回避できるかと。自動で日本語入力にはできないことになりますが、落ちるよりはマシかなーとね。

もしかすると、TextFieldのrestrict設定の有無でも動作が変わるかもしれません。この辺りは要調査かな。

JSFLに触れてみる


前回FuseKitについて書きつつも何故かタイムラインでの作業をしていたら、いろいろ面倒なことがあることに気づいた。タイムラインベースで作成していると直感的にオブジェを置いたり動かしたりできるのはいい。でも中心点が真ん中になってないとか、画像の座標に小数点以下が含まれてて画像がぼけるとかでちょっと面倒な作業ができてしまう。

作ってる時は面倒だなぁと思うだけだったんですが、それを作り終わってさてどうしようとなった時に、「そうだ、JSFLってものがあるじゃないか」と思い当たったので、勉強がてら作成してみました。

最初はとっつきにくいと思ったんですが、ActionScript,JavaScriptがある程度分かれば、少しのサンプルと公式ドキュメントがあれば、ある程度のことはできそうです。

とりあえず、上記サイトさんを参考に、動きとしてはほぼ同じですが、ステージ上のオブジェクトの座標を四捨五入して配置しなおすものを作成してみた。

/**
 * ステージ上に配置されたオブジェクトの座標の小数点以下を四捨五入するjsfl
 */
var doc = fl.getDocumentDOM();
var aryLayers = doc.getTimeline().layers;
//各レイヤー
for(var i = 0; i < aryLayers.length; i++){
var aryFrames = aryLayers[i].frames;
//各フレーム
for(var j = 0; j < aryFrames.length; j++){
//キーフレームでなければ次へ
if(j != aryFrames[j].startFrame){continue;}
//各エレメント
var aryElements = aryFrames[j].elements;
for(var k = 0; k < aryElements.length; k++){
var elem = aryElements[k];
//インスタンスの場合
if(elem.elementType == 'instance'){
var mat = elem.matrix;
mat.tx = Math.round(mat.tx);
mat.ty = Math.round(mat.ty);
elem.matrix = mat;
}
//シェイプの場合は頂点を移動
else if(elem.elementType == 'shape'){
elem.beginEdit();
var aryVertices = elem.vertices;
for(var l = 0; l < aryVertices.length; l++){
var vtx = aryVertices[l];
var posX = Math.round(vtx.x);
var posY = Math.round(vtx.y);
vtx.setLocation(posX, posY);
}
elem.endEdit();
}
}
}
}

シェイプの時は無理矢理頂点を取って、四捨五入してみたら一応移動はしました。シェイプの元の大きさが変わってしまう場合があるので、使う方がいたら注意してください。

利用方法は、こちらを参考に。

普通は上記Configuration内にあるCommandsに入れるようです。付けたファイル名がそのままFlashIDEの「コマンド」のところに出ます。