Flashでタイピングゲームを作っていて、ページ読み込み時にFlashにフォーカスがあたらなくて使いづらいなと思いやり方を調べてみた。ページ読み込み時にjavascriptでfocus();するといいらしいが、firefoxでフォーカスできない。

Javascriptのfocusはこんな感じ。
swfobjectを使っている場合は、addLoadEventやaddDomLoadEventのイベントで呼べばいい。

	var flashObjectId =  "sample";
	var expressInstallPath = "../../../js/libs/swfobject/expressInstall.swf";
	var flashTargetVersion =  "9.0.0";
	var flashvars = {};
	var params = {};
	swfobject.embedSWF("StartFocusSapmle.swf",flashObjectId, "320", "240", flashTargetVersion,expressInstallPath, flashvars, params);

	function setFocusOnFlash() {
	  var fl = document.getElementById(flashObjectId);
	  if (fl) { fl.focus(); }
	}

	if (swfobject.hasFlashPlayerVersion(flashTargetVersion)) {
		swfobject.addLoadEvent(setFocusOnFlash);
		//swfobject.addDomLoadEvent(setFocusOnFlash);
	}

ただ、これだとfirefoxはだめ。調べているうちにwmodeをopaqueかtransparentに設定すればいいという情報が。いろいろ試してみると、

ページ読み込み後にFlashに自動フォーカスするサンプル(wmode:”window”)

ページ読み込み後にFlashに自動フォーカスするサンプル(wmode:”opaque”)

ページ読み込み後にFlashに自動フォーカスするサンプル(wmode:”transparent”)

確かに、wmodeをopaqueかtransparentに設定するとフォーカスがあたった。
ただし、このwmodeは曲者で、opaqueやtransparentに設定すると日本語に入力がおかしくなる。firefoxでは、まともに入力さえできない。
flash側からExternalInterfaceでjavascriptのfocus();をやってみたりしたが実現できず。断念。

今回のタイピングゲームは英数字だけなのでこれでいいのだが、普通に使うのには中途半端だ。
英語にかぎればこれでなんとかなる（日本語の入力をするFlashを作ることもあまりないのだけど）

今回はこれでいこう。

	var flashObjectId =  "sample";
	var expressInstallPath = "../../../js/libs/swfobject/expressInstall.swf";
	var flashTargetVersion =  "9.0.0";
	var flashvars = {};
	var params = {wmode:"transparent"};
	swfobject.embedSWF("StartFocusSapmle.swf",flashObjectId, "320", "240", flashTargetVersion,expressInstallPath, flashvars, params);

	function setFocusOnFlash() {
	  var fl = document.getElementById(flashObjectId);
	  if (fl) { fl.focus(); }
	}

	if (swfobject.hasFlashPlayerVersion(flashTargetVersion)) {
		swfobject.addLoadEvent(setFocusOnFlash);
		//swfobject.addDomLoadEvent(setFocusOnFlash);
	}

※あと、opaqueやtransparentモードにすると、FlashのEvent.ACTIVATE、Event.DEACTIVATEイベントが拾えないみたいだ。きもちわるい
サンプルソース

package com.cubdesign.sample.startfocus {
	import fl.controls.Label;
	import fl.controls.TextInput;

	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.external.ExternalInterface;

	/**
	 * @author takeo
	 */
	public class StartFocusSapmle extends Sprite {
		private var label : Label;
		private var text : TextInput;

		public function StartFocusSapmle() : void {
			if (stage) {
				init();
			} else {
				addEventListener(Event.ADDED_TO_STAGE, init);
			}
		}

		private function init(e : Event = null) : void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
			stage.addEventListener(Event.ACTIVATE, windowActivete);
			stage.addEventListener(Event.DEACTIVATE, windowDeActivete);

			drawBackground();

			label = new Label();
			label.text = "読み込み完了";
			addChild(label);

			label.move(100, 70);

			text = new TextInput();
			addChild(text);

			text.move(100, 100);

			//ExternalInterface.call("setFocusOnFlash");

			text.setFocus();
		}

		private function drawBackground() : void {
			var g : Graphics = this.graphics;
			g.beginFill(0xffffcc);
			g.drawRect(0, 0, 320, 240);
			g.endFill();
		}

		/**
		 * フォーカスアウト
		 */
		private function windowDeActivete(event : Event) : void {
			label.text = "windowDeActivete";
		}

		/**
		 * フォーカスイン
		 */
		private function windowActivete(event : Event) : void {
			label.text = "windowActivete";
			text.setFocus();
		}
	}
}