Flashを使ってみる
Posted by mito Fri, 24 Aug 2007 06:51:00 GMT
今日から数回にわたってAdobeから無料で公開されているFlex2SDKを使ってFlashを作る方法を紹介していきたいと思います．
はじめに
Flex2SDKを使ったFlashの作成方法には主に二通りあります．1つがActionScriptを使う方法，もう1つがMXMLというXMLベースの言語でUIを定義し，イベント処理をActionScriptで行うという方法です．そこで今回はより簡単にリッチなアプリケーションを開発できるMXML+ActionScript形式での方法について解説します．
環境構築
Flash作成環境の構築やコンパイルの方法などについては以下のサイトなどで解説されているのでそちらをご覧になってください．
今日のお題
サンプルに使えそうな簡単なネタは無いかと考え，今日はニコニコ動画のような入力したテキストが画面の右から左へ流れていくプログラムを書いてみました．
ソース解説
画面構成
このプログラムは図に示したような要素で構成されています．MXMLソースの中の該当部分から構造のみを抜き出すと次のようになります．
<mx:Application>
<mx:Panel>
<mx:Canvas />
<mx:ControlBar>
<mx:HBox>
<mx:Label/>
<mx:TextInput />
<mx:Button />
</mx:HBox>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
実行時の画面構成とMXMLにおけるタグの入れ子構造が対応しているのがわかると思います．
イベント処理の記述
次はActionScriptでイベント処理を記述していきます．例えばボタンを押したときの処理を書く場合は次のようになります．
これは"このボタンがクリックされたらInputText()メソッドを実行する"という意味になります．
では次に処理内容を記述します．イベント処理は<mx:Script>内に書きます．(この際スクリプトに使う文字列をXMLとして解釈させないようにスクリプト部分をCDATAセクションで囲う必要があります．)次に示すようにActionScriptはオブジェクト指向言語でJavaやJavaScript，C#などを使ったことのなる人なら簡単に理解できると思います．
private function InputText(){
//Labelをインスタンス化し位置や文字サイズ，色などのパラメータを設定
var label:Label = new Label();
label.text = input.text;
label.x = 600;
label.y = Math.random() * 200;
label.setStyle("fontSize", Math.random()*20 + 10);
label.setStyle("color", Math.random()*0xFFFFFF + 0xFF000000);
//Canvasにlabelを追加
field.addChild(label);
//label管理用配列にも追加
labelArray.push(label);
//テキスト入力ボックスを空にする
input.text = "";
}
これでボタンを押すと入力したテキストがCanvasに表示されるようになりました．しかしこれだけではテキストをスクロールさせることは出来ません．
テキストをスクロールさせる
表示したオブジェクトをアニメーションさせるにはTimerクラスを使って一定時間おきに位置を移動する処理を書く必要があります．
private function init(){
labelArray = new Array();
//10ミリ秒単位で無限にイベントを発生させるタイマー
timer = new Timer(10,0);
//イベントが発生するとonTickメソッドを呼び出す
timer.addEventListener(TimerEvent.TIMER,onTick);
//タイマーを開始
timer.start();
}
private function onTick(evt:TimerEvent):void{
//表示されているすべてのLabelを左に2pixel移動する
for each(var label in labelArray){
label.x -= 2;
//画面外に消えたLabelはリストから削除する
if(label.x + label.width < 0)
labelArray.splice(labelArray.indexOf(label,0),1);
}
}
これで一定時間おきにテキストがスクロールする処理が書けました．
まとめ
いかがだったでしょうか？MXMLとActionScriptを組み合わせることでUIとイベント処理を明確に分割しながら簡単にアプリケーションを作成できることがわかったかと思います．次回はもう少し複雑なプログラムを紹介する予定です．
