ユーザーインターフェイスを作成する
コンポーネントを配置する
C++Builder XE2 を起動し、IDEのメニューより[ファイル]-[新規作成]-[FireMonkey HD アプリケーション - C++Builder]を選択します。
![](http://cz-cdn.shoeisha.jp/static/images/article/6575/ahapp2.jpg)
FireMonkey用の設計画面が表示されるので、まずフォーム自身を適当な大きさに修正します。
![](http://cz-cdn.shoeisha.jp/static/images/article/6575/ahapp3.jpg)
次に、画面右下のツールパレットよりTButtonとTImageをフォーム上にドラッグ&ドロップします。
![](http://cz-cdn.shoeisha.jp/static/images/article/6575/ahapp4.jpg)
TButtonは、画像の変化を開始させるために使います。大きさを適度に調整し、画面左下のオブジェクトインスペクタ上で、Textプロパティの値を次のように変更します。
プロパティ | 値 |
Text | スタート!制限時間は20秒です |
![](http://cz-cdn.shoeisha.jp/static/images/article/6575/ahapp5.jpg)
TImageには、画像を表示します。TImageについても、大きさを適度に調整しておきます。
画像を変化させる
FireMonkeyのTImageコンポーネントには、設定した画像を使ってアニメーションを行うことができるプロパティが用意されています。
設計フォームでTImageを選択し、オブジェクトインスペクタでBitmapプロパティの値列に表示された[...]ボタンをクリックします。「TBitmapAnimationの新規作成」を選択し、TBitmapAnimationを生成します。
![](http://cz-cdn.shoeisha.jp/static/images/article/6575/ahapp6.jpg)
オブジェクトインスペクタが BitmapAnimation1に切り替わるので、Durationプロパティを設定します。
プロパティ | 値 |
Duration | 20 |
この値は、アニメーションを実行する時間なので、今回の場合、変化している場所を見つけるまでの制限時間ということになります。
![](http://cz-cdn.shoeisha.jp/static/images/article/6575/ahapp7.jpg)
次に、実際の画像を設定しましょう。StartValue プロパティの[...]ボタンをクリックし「編集」を選択します。
![](http://cz-cdn.shoeisha.jp/static/images/article/6575/ahapp8.jpg)
表示されたビットマップエディタ上で、[読み込み]ボタンをクリックし、用意した画像(変化する前の画像)を指定して、[OK]ボタンを押します。
![](http://cz-cdn.shoeisha.jp/static/images/article/6575/ahapp9.jpg)
同様に StopValue プロパティの[...]ボタンをクリックし、変化した後の画像を設定します。