Flashなブログ [ 動くWebは好きですか？]

最近のFlash案件でハマった事

新作のリリースが無いと、こうも更新が少ないとは…という事で、久々に技術的な投稿でも。

#最近やった案件で、Flashのゲームを作りました（どこのどのゲームかは内緒ｗ）

ランキング登録などは仕様で含まれていましたが、システムは別途外注との事でシステム屋さんとは直接お話ができないもどかしい状態でのデバッグに戸惑いつつ…頑張ってみました。そこでハマった事項をご紹介。

1）入力テキストを用意したが、なぜか送信してみると改行コードが混じる

悩みました。ランキングに登録するために普通に入力テキスト用意しただけなのに…そこにHN（ハンドルネーム）でも入力してもらって送信（Submit）ボタン押してもらうだけなのに。最後に気がついたのが入力テキストのプロパティ。なんと…いつの間にか「複数行」設定になっていました。

え？　複数行設定にしただけで、勝手に改行コードが含まれるってどういう事ですか？　仕様なんですね？
ここに気付かず、しょうがなく改行コードを削除するメソッドを作って、そこを通して送信する仕組みまで作っちゃいましたよ。。

2）Windowsで入力テキストにインライン入力できない

はい、これ検索すると出てくるのは「wmode」「transparent」ですね。私も最初これだと思いました。しかし今回は違ったようです。どうやら入力できないのではなく、Flashの左上のへんなところに入力された文字が出るようです。

1でも書いたように、入力テキストは普通に置いているだけ…ん？普通に？　そういえば仕様変更からアニメーションの途中に入力する枠を出して欲しいという事で、ステージに直接置かずMC内に入れ、更にそのMCにマスクをかけていたのだった。

まさか…、MCは基本なので違うと勝手に判断し、マスクを除去してみました。すると入力できるではありませんか。なんですか？マスク使ってごにょごにょするとインライン入力出来なくなるなんて。。これも仕様なんですね。わかります……いや、やっぱり1も2も分かりません……

3）半角と全角の文字数制限？

例えば半角20文字、全角10文字の入力制限を入力テキストにかけたいとします。ただFlash内のテキスト入力に存在する「文字数制限」は、あくまでも長さなので半角全角（1バイト・2バイト文字）を問いません。よって半角のために20文字と設定すれば全角でも20文字打ててしまいます。

そこで入力テキストに文字が入力確定された時（onChanged）に、一文字ずつ取り出しcharCodeAtで半角範囲内かどうかをチェックさせ、希望のバイト数（上の例で言えば20バイト）を超えた時にそれ以降の文字を切り捨てる処理を作りました。これで無事にバイト数制限が出来たわけです。

ま、実装せずに終わっちゃったんですけどね…(笑)

なんて感じです。不況で仕事の量や質が変わりつつあり近年ですが、忙しい折にはこんなハマりの神が降りてくる事も。最近珍しく忙しいので、また近いうちに降りてくるやも知れません。。(^ ^;

IEのActiveX挙動の仕様変更

『やはり』と思う方が多いんでしょうね。

遡る事一年半、IEの挙動が変わった。プラグインを必要とするファイルの埋め込み(object/embed/appletタグが対象)などでクリック動作を強要させるものだ。

それが来年春、解除(という言い方が正しいかどうかは別として)されるらしい。元は特許侵害の対応策としての挙動だったのだが、Flashを表示する度にクリックさせられたり、Web制作人としてはJavaScriptを使いつつ回避したりと面倒な事がなくなるわけだ。

ただ悪い事ばかりではなかったと思う。回避策としてだけでなく使い勝手も良いSWFobjectなど有用なコードが多くの制作人に認知されたりしたわけで、これらのコードはこの規制が解除されても使われ続けるのではないだろうか。

　→ IE公式ブログの記事(英文)

Wiiリモコンで操るFlash・サイト

久しぶりの更新なんですが、新作の発表じゃありません。(ザンネン…)

WiiのインターネットチャンネルではOperaを使ってインターネットブラウズが可能なんですが、もちろんFlashコンテンツも見る事ができます。ただ、Playerのバージョンがちと低い為に新しい表現は今の所できません。。

今更なんですがWii＋Flashの情報を見ました。つまりWiiリモコンの「クリック以外の動作でFlashを操れないか」というものです。以下リンク先で勉強しました。(まだ難しいんですネ…)

　→trick7.com

ただ、もう一つ問題があるんですよね。。Wiiの処理速度です。Wii用のゲームには最適化されているのでしょうが、インターネットチャンネル＋ブラウザ＋FlashPlayerという観点から見ると、スペックがそれほど良くないPCで見るよりも動作が遅いんですよ。。

色々と問題もありますが、Wiiの本体アップデート・インターネットチャンネルのアップデートでどこまで改善されるかというトコロを見守りつつ、Wiiリモコンで操作するFlashゲーム案を考えたいと思います。

#あぁー早くWiiリモコンの「捻り」とか「傾き」とか使いたいなぁー

スクリプト難航記 [ Flashでスクリーンセーバー ]

久々の記事だが、BLOG de GAMEの更新ではないところがイタい感じ…。すみません、年末進行の作業に追われ、ほとんど仕事以外の事を最近していないのです。…で、今日はFlashでスクリーンセーバー制作のお話を少し。

仕事でスクリーンセーバーを作るのは初めてではないが、久しぶり。注文内容は「1024*768をメイン解像度としてターゲットにしつつ、それよりも解像度が低い場合は画面サイズにそって縮小。それよりも高い場合は回りにマージンが付くように」との指示。

今回はFlashで作ったswfをscreentimeというソフトを通してスクリーンセーバー用インストーラを作成する手順。Flashで普通に作ったもの(もちろんスクリプトを入れたければ好きなだけ入れて良い)を、screentimeで選択してインストーラ作成を選ぶだけの簡単作業。ただscreentimeのMac用はMacOS9＋OSX用のインストーラ作成しかできないので、Win用スクリーンセーバーを作りたければWin用のscreentimeを使うべし。

普通に作ったところ1024*768以上のサイズで見て拡大されてしまった。(*1)
また、次の手順でFlash内でスクリプト処理した(*2)ところ、拡大はされずにマージンがとれたが、白ではなく黒マージンが付いてしまった。今回のデザイン的に「白」が望ましいため、これはダメだ。(*3)

試行錯誤の末ようやく出来上がった。スクリーンセーバー再生のパネル設定において「フルスクリーン」を指定しておいたのだが、果たして合っているのだろうか。ｗ

■Flashの中での拡大縮小の処理 *1

　Stage.scaleModeを使い拡大や余白の処理をする(この他にもexactFit/noBorderがあるが割愛)

Stage.scaleMode = "noScale"; // デザインサイズそのままに表示
Stage.scaleMode = "showAll"; // モニタ解像度（再生サイズ）にそって比率維持のまま拡大縮小

■モニタ解像度によって拡大縮小処理の分岐 *2　※全角スペースで整形中

　System.capabilities.screenResolutionX：モニタ解像度（再生サイズ）の幅　単位：pixel
　System.capabilities.screenResolutionY：モニタ解像度（再生サイズ）の高さ　単位：pixel

fscommand("fullscreen", true);
w = System.capabilities.screenResolutionX;
h = System.capabilities.screenResolutionY;
if(w >= 1024){
　Stage.scaleMode = "noScale";
}else {
　Stage.scaleMode = "showAll";
}

※環境によって完全ではないが、MacとWinでは取得される数字が微妙に異なる場合があるらしい

■マージン黒問題

これはどうやら設定ではなく、screentimeの仕様らしい。スクリーンセーバー再生の設定で「ノーマルサイズ」を選んだとき、内容がそれよりも小さい場合に余白が付くが、OSX10.4使用時にマージンが黒になってしまう。これはscreentime3.xでは修正されているようだが、それ以下のバージョンでは現在回避不可能っぽい。(回避方法をもしご存知の方がいたら報告お願いいたします！)

そして背景やMCをモニタ解像度（再生サイズ）によって大きさ・位置など変更したい場合はリスナーを設定して処理させてみましょう。

■リスナー設定でサイズ変更による処理をさせる

myListener = new Object();
myListener.onResize = function(){
　// MCの大きさや位置などを整えるスクリプト処理
}
Stage.addListener(myListener);

CookClock設置方法 [ブログアクセサリ]

http://cookclock.kayac.com/cook.swf?version=20051116&category=12&sub_category=22

当店のお客様から、質問がありました。『CookClock』って、Yahoo！ブログに貼れるんですか？』と。(どこかで見たくだりだって？)
実際見てもらうと分かりますが、これもラクガキボード同様、javascriptを使って動いています。つまりjavascriptから実際に書き出されるコードをひも解き、最終的なWikiコードにすれば良いという事になります。

■1　先ずはBlogDeco
…で利用登録しましょう。それからCookClockのパーツ紹介ページへ飛ぶと「さっそく貼り付ける」というタブが見えると思いますので、それをクリックしましょう。それからレシピの種類とカテゴリを選びます。

■2　タグ発行
その後に「タグを発行する」ボタンを押しましょう。javascriptを使った2行程度のタグが出てきます。その中で『src="○○○"』という部分がありますので、その「○○○」部分をコピーしてブラウザのアドレス欄に貼付け→ジャンプ。出て来たページでブラウザの「ソースを表示」としてみるとdocument　.write　から始まる数行が見られると思います。その5行目のvalue=から『http://cookclock.kayac.com/cook.swf?version=2005XXXX』こんな感じの部分を、そして7行目のvalue=から『&category=XX&sub_category=XX』部分を抜き出し、あわせて一つのURLとします。

■3　出来たURLをWiki文法で記載
『http://cookclock.kayac.com/cook.swf?version=2005XXXX&category=XX&sub_category=XX』こんなアドレスが出来上がるはずですので、それをWiki文法で[[embed(http://cookclock.kayac.com/cook.swf?version=2005XXXX&category=XX&sub_category=XX,0,150,300)]]なんて、書いてあげましょう。

■4　注意
この貼り付けた記事を修正する時には注意が必要です。それは修正の時、URLの一部(&sub_あたり)が勝手に書き換えられてしまう事があるからです。念のため、出来たURLはテキストなどで保存し、いつでもコピー＆ペーストで貼れるようにしておいた方が良いと思われます。また、現在URL内に「version=2005xxxx」と、日付が付けられていますが、これがずっと同じ日付ではどんな挙動になるか、まだ検証していないため、少し時間を置いて試してみてください。(^ ^;

※『＆』を『＆＃38；(実際に入力する際には全て半角)』に置き換えておくと、一度は化けずに済むかも知れません
※上記貼付け例ではWikiテーブルを使ったセンター揃えを適用しています