Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[Flash]⑪キーボード入力の判定

  • keyクラスとは
  • キーの調べ方
    • 最後に押されたキーを調べる
    • いままさに押されているキーを調べる
  • キーを識別する数値
  • 入力した文字を調べ画面表示する
    • 文字をアニメーションするシンボルを作る
    • キー入力を感知

keyクラスとは

  • Flashでキーを押されたことを知るクラス
  • MovieClip.onKeyDownイベントでも認知できるが、そのムービークリップにフォーカスがある時しかうまくいかないので使い道が限られる
  • フォーカスに関係なくキーを認知

キーの調べ方

最後に押されたキーを調べる
  • Key.getCode()
  • Key.getAscii()
  • キーを押しっぱなしにするゲームには不向き
いままさに押されているキーを調べる
  • Key.isDown()
  • MovieClip.onEnterFrameイベント(フレームレートで設定された時間が経った)に割り当てた関数のなかでよく使われる

キーを識別する数値

キーコード
  • Key.isDownの引数として渡す、あるいはKey.getCode で返される数値
  • Enterキーやスペースバーなどの特殊なキーにはKeyクラスの定数も使える
/* どちらも同じ意味 */
if( Key.isDown(13) );
if( Key.isDown( Key.ENTER ) );
アスキー
  • Key.getAsciiで返される値
  • 押された文字を表す…大文字と小文字を区別
  • Aのアスキー値は65、aのアスキー値は97
  • String.fromCharCode()でアスキー値を文字に変換できる
/* keyStrに文字列”a”をセット */
var keyStr:String = String.fromCharCode( 97 );

入力した文字を調べ画面表示する

  • A~Zのキーを押すとその文字が回転しながら登場、大きくなりながら消える

f:id:akatonbo_web:20150608103440p:plain

文字をアニメーションするシンボルを作る
  • シンボルをダイナミックテキストで制作
  • ASリンゲージを[symLetter]で登録
  • スクリプトを記述
var letterText:TextField;
var letter: String;

/* 文字を表示 */
letterText.text = letter;
this.onEnterFrame = animateChar;

/* 文字をアニメーション */
function animateChar():Void
{
    this._xscale *= 1.5;
    this._yscale *= 1.5;
    this._rotation += 40;
    this._alpha -= 5;
    /* 透明になったら */
    if(this._alpha == 0)
        this.removeMovieClip();
}
キー入力を感知
var keyListener:Object = new Object();
/* キーが押された時のイベント登録 */
keyListener.onKeyDown = keyCheck;
/* キーにリスナーオブジェクトを登録 */
Key.addListener( keyListener );

/* キーをチェックする関数*/
function keyCheck():Void
{
    /*最後に押されたキーのキーコードを取得▶文字に変換してセット*/
    var keyCode:Number = Key.getCode();
    var keyStr:String = String.fromCharCode( keyCode );
    /* A~Zの場合ならattachLetter関数を呼ぶ */
    if( keyStr >= "A" && keyStr <= "Z" )
    attachLetter( keyStr );
}

/* インスタンスを生成する関数  */
function attachLetter( letter:String ):Void
{
    /* インスタンスを一番手前に作るために、深度を調べる */
    var depth:Number = this.getNextHighestDepth();
    /* リンゲージ識別子からインスタンス生成 */
    var letterMovie = this.attachMovie( "symLetter", "key" + depth, depth );
    /* 引き数からインスタンスに文字列をセット */
    letterMovie.letter = letter;
    letterMovie._x = 150;
    letterMovie._y = 80;
}