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();
}
}
}
