ファイヤープロジェクト
ボタンとActionScript(Ming/C++)
2006-08-22T07:00+09:00   matsu
Ming(C++版)で,ボタンを押したらActionScriptを実行するFlashコンテンツを作成してみる.
今回のサンプルは,図形が一つとボタン("<*"とか"*>"と表示されているもの)が二つ. このサンプルの以下の特徴について記述していく.
  • ボタンはマウスカーソルが乗ると,巨大化する.
  • 図形は最初は右回りにくるくる回っている.
  • "<*"ボタンを押すと図形が左に,"*>"ボタンを押すと図形が右に移動し,図形の回転の向きも変わる.
まず,サンプルのソースは以下.
Makefileはこれ. ビルドしたサンプルで作成したswf.
サンプルでは,ボタンは
SWFButton *
createTextButton(SWFFont *font, const char *symbol,
                 const int height)
にて作成する.
SWFButton *button = new SWFButton();
ボタンは作成しただけでは見えない. これは,作成しただけではどう見えるかが指定されていないからであってその見え方は以下で指定する.
button->addShape(text, SWFBUTTON_UP | SWFBUTTON_HIT);
...省略...
button->addShape(text, SWFBUTTON_OVER);
...省略...
button->addShape(text, SWFBUTTON_DOWN);
ここでは,テキストオブジェクトをボタンの表示に使用している.
SWFButton#addShape(SWFCharacter *character, byte flags)
第一引数はSWFCharacterで,これは以下の親クラスである.
  • SWFFontCharacter
  • SWFPrebuiltClip
  • SWFShape
  • SWFSprite
  • SWFMorph
  • SWFText
  • SWFTextField
  • SWFButton
第二引数にてボタンの状態を,第一引数にてその状態におけるボタンの表示図形を設定する. ボタンの状態は,ming.hに記述されているが,主なものは以下である.
SWFBUTTON_DOWN
ボタンが押された
SWFBUTTON_OVER
ボタンの上にマウスカーソルがある
SWFBUTTON_UP
ボタンが押されていない
SWFBUTTON_HIT
これだけ特殊で,ボタンの押下可能範囲を指定するのに指定する.
ボタンを作成したら,そのボタンが押された時のアクションを登録するが,それについては後述する.
一般のFlashでMovie Clipと言われているものは,MingではSWFSpriteと呼んでいる. Flashコンテンツは,まず根っこにMovieを配置し,その上にコンポーネントを置く. SWFSpriteは,そのコンポーネントとしてMovieに配置されつつも,Movieとは別個のタイムラインを持つMovieとして振舞う. これを使用すると,親Movieの動画は停止しているのに,その上に乗っているSWFSpriteの動画は動いているといったことができる. SWFSpriteはメソッド名が違ったり,メソッドが少なかったりするものの,基本的にはSWFMovieと同じように作成し,操作する. SWFSpriteの作成と操作はサンプルでは,
SWFSprite *
createSprite(SWFFont* font, const char* symbol,
             const int height, const int rotate_step)
で行っている. まず,オブジェクトを作成し,フレームレートを設定する.
  SWFSprite *sprite = new SWFSprite();
  sprite->setNumberOfFrames(FRAME_RATE);
フレームレートの設定メソッド名は,何故かSWFMovieと異なる. サンプルではこのSWFSpriteに,文字列を配置し,回転させる.
  // テキストを作成
  SWFText *text = new SWFText();
  text->setFont(font);
  text->setColor(0x0, 0x0, 0x0, 0xff);
  text->setHeight(height);
  text->addString(symbol);

  // テキストを配置
  SWFDisplayItem *item = sprite->add(text);

  // 配置したテキストを回転.
  for (int i = 0; i < 360; i += abs(rotate_step)) {
    sprite->nextFrame();
    item->rotate(rotate_step);
  }
さて,サンプルではcreateSpriteの呼び出しは,二回行われている. createSpriteで作成するSWFSpriteは,サンプルの見た目上,観点する図形の部分にあたる. これは,押下したボタンに応じて,右回転と左回転が切り替わるので,その回転の向きに応じて,SWFSpriteを二つ作成している.
  // 右MovieClipの作成
  SWFSprite *sprite_right = createSprite(font, "|",
                              MOVIE_TEXT_HEIGHT, ROTATE_STEP_RIGHT);
...省略...
  // 左MovieClipの作成
  SWFSprite *sprite_left = createSprite(font, "|",
                             MOVIE_TEXT_HEIGHT, ROTATE_STEP_LEFT);
SWFSpriteを作成したら,それをSWFMovieに配置し,位置を設定する.
  SWFDisplayItem *sprite_right_item = movie->add(sprite_right);
  sprite_right_item->moveTo((MOVIE_SIZE_X / 2), (MOVIE_SIZE_Y / 4));
それから,後述するActionScriptから,このSWFSpriteオブジェクトを指定できるように,名前をつけておく.
  sprite_left_item->setName("sprite_left");
最後に,このSWFSpriteが,Movie上にロードされる際に実行するActionを指定する.
  sprite_left_item->addAction(new SWFAction(" \
_root.sprite_left._visible = false; \
"), SWFACTION_ONLOAD);
Actionの内容は,右SWFSpriteは左SWFSpriteを非表示とし,左SWFSpriteは右SWFSpriteを表示とするものである. これで全体として,サンプルのMovie読み込み時は,右回転の図形が表示され,左回転の図形は表示されない動きとなる.
ActionScriptは,JavaScriptの標準規格ECMAスクリプトをベースに作成された,Flashコンテンツ用スクリプト言語である. HTMLコンテンツがJavaScriptによって,複雑であったりインタラクティグな動作が可能となったのと同様,FlashコンテンツはActionScriptによって,さまざまな制御が可能なコンテンツとなる. ActionScriptはFlash 5から組み込まれ,Flash MX 2004ではActionScript 2.0というバージョンになっている.
MingはActionScriptにも対応しており,本頁のサンプルでは,ロードされた際の動作と,ボタンが押下された際の動作を記述している(※). ActionScriptは,SFWActionオブジェクトをnewする際に指定し,各表示コンポーネントには,このSFWActionを登録する. まず,SFWSpriteへのSFWActionの登録.
  sprite_left_item->addAction(new SWFAction(" \
_root.sprite_left._visible = false; \
"), SWFACTION_ONLOAD);
これは,
_root.sprite_left._visible = false;
というActionScriptを表すSFWActionを生成し,SFWSpriteの表示アイテムに設定している.
SWFDisplayItem#addAction(SWFAction *action, int flags)
第一引数は実行するSFWAction,第二引数はSFWActionが実行されるキックとなるイベントである. イベントには以下がある.
SWFACTION_ONLOAD
該当表示アイテムがロードされた
SWFACTION_ENTERFRAME
該当表示アイテムがフレーム内に入った
SWFACTION_UNLOAD
該当表示アイテムがアンロードされた
SWFACTION_MOUSEMOVE
マウスが動いた
SWFACTION_MOUSEDOWN
マウスが押された
SWFACTION_MOUSEUP
マウスがあがった
SWFACTION_KEYDOWN
キーボードのキーが押された
SWFACTION_KEYUP
キーボードのキーがあがった
SWFACTION_DATA
?
ところで,先の
_root.sprite_left._visible = false;
というActionScriptは,_rootのsprite_leftという名前のオブジェクトの変数_visibleをfalseに,つまり非表示にするものである. _rootは,文字通り根っことなるオブジェクト,SWFMovieオブジェクトと考えてよいと思う. その_rootに配置されたsprite_leftは,Ming上で,
  sprite_right_item->setName("sprite_right");
として名前をつけておいたものである.
SWFDisplayItem#setName(const char *name)
が,該当表示アイテムをActionScriptから指定できるように名前づけるものであることは先述した. さて,右ボタンへのActionScriptの登録を見てみる.
  button_right->addAction(new SWFAction(" \
_root.sprite_right._visible = true; \
_root.sprite_right._x += 10; \
_root.sprite_left._visible = false; \
_root.sprite_left._x += 10; \
"), SWFBUTTON_MOUSEDOWN);
これはまずsprite_rightを表示し,x座標を10加えることによって移動し,sprite_leftを非表示にし,x座標を10加えることによって移動している.
※ ActionScriptを記述する際には,本家のディクショナリが役立った.
matsu(C)
Since 2002
Mail to matsu