FLVPlayer制作(2)～ラベルの作成～

AIRやFLASHなどを表示するのに不便なので、ブログから自作サイトに移転します。

『N2-Works移転先 』

今後はこちらで更新を行っていきます。


【TextField】

labelを作成するにはTextFieldクラスを使用します。


/* テキストフィールドの作成 */
var input:TextField = new TextField();
// 位置X
input.x = {int}; 
// 位置Y
input.y = {int};
// 幅
input.width = {uint};
// 高さ
input.height = {uint};
// 表示文字列
input.text = {String};
// true:背景色を付加
input.background = {boolean};
// 背景色カラーコード
input.backgroundColor = {uint};
// true:枠線を付加
input.border = {boolean};
// 枠線色カラーコード
input.borderColor = {uint};


ここで注意しないといけないのは、TextField単体ではlabel内のフォントなどを設定できないという点です。 あくまでもフォントを設定するのはTextFormatクラスで行うからです。以下にTextFormatクラスの設定を示します。


label_format:TextFormat = new TextFormat();
// 文字色カラーコード
label_format.color = {uint};
// フォント名(ここでは等幅フォントを使用)
label_format.font = "_等幅";
// フォントサイズ
label_format.size = {uint};

作成したTextFormatインスタンスをTextFieldクラスに設定するわけですが、ここでも注意するべき点があります。それはlabelに初期文字列が存在するかどうかで設定方法が違うということです。


// 設定時にLabelに文字列が存在する場合
input.SetFormatType({TextFormat});


// 設定時にLabelに文字列が存在しない場合
input.defaultFormat = {TextFormat};


また、TextFieldはプロパティの設定によってはTextBoxも作成できます。以下のプロパティの設定で使い分けて下さい。


// true:文字列を選択可能

input.selectable = {boolean};

// TextBoxの場合以下を設定

input.type = TextFieldType.INPUT;


これぐらいを知っておけば、大体対応できると思います。

きちんとプロパティを知りたい人は参考資料(URL )をご参照下さい。

FLVPlayer制作(1)

AIRやFLASHなどを表示するのに不便なので、ブログから自作サイトに移転します。

『N2-Works移転先 』

今後はこちらで更新を行っていきます。


ActionScript3.0のコーディングに慣れるため、FlvPlayerを制作することにしました。

で、早速ですがもう出来ています(笑)


とりあえず制作過程で詰まった点や、仕様に悩まされた点などを書き残しておこうと思います。


まず最初に機能仕様を決めました。


[機能仕様]

1)FLVファイルを再生/一時停止/停止することが出来る。

2)Airアプリではないので、再生ファイルパスはテキストボックスで入力。

3)2)のテキストボックスに再生中に別のファイルパスを入力しても再生できる。

4)動画のシークをスライダーバーで実行できる。

5)4)のシークを実装するため、FLVファイルの再生時間を再生前に取得・表示できる。

6)音量の調節をスライダーバーで実行できる。

7)リピートをすることができる。

8)1)～7)の機能を操作するコントロールパネルを用意する。

9)8)のコントロールパネルはFLVファイルの実行前は常に表示、再生後は画面の下部1/4の領域にマウスが移動した時のみ表示を行う。

10)今回は勉強のついでということでデザインはできるだけ簡素な物にし、制作期間を短くする。


以上が制作前に決めた機能仕様です。


また、以下の書籍・HPを参考にしました。


「ActionScript3.0 ポケットリファレンス」 著：馬場ぎんが \,2480-(税なし)

Adobe® Flex™ 2 リファレンスガイド （HP）


出来上がった画面は以下のようなシンプルな物になっております。


N2-Works-N2FlvPlayer Ver0.9


次回から、機能仕様の項目ずつ詰まりやすい箇所を解説していきます。

FlashDevelopの設定

AIRやFLASHなどを表示するのに不便なので、ブログから自作サイトに移転します。

『N2-Works移転先 』

今後はこちらで更新を行っていきます。


FlashDevelopのBeta7とFlex_sdk3で開発をすることにしたのですが、FlashDevelopの表示は全て英語なので

日本語化パッチでも出ていないか探してみると、どうやら設定XMLをいじれば日本語に出来るみたいです。


{FlashDevelopインストールパス}\FirstRun\Settings\以下の*.xml

文字コードはUTF-8。


次にライブラリを追加するGlobalClassPathを設定しようと思い

[tools]→[Global ClassPathes]にパスを入力するも認識しないみたいです。

ただそのパスにasファイルを置くと、補完機能は機能します。


GlobalClassPathとして機能させるためには、上記の設定では駄目で、

{Flex_sdk3インストールパス}\frameworks\flex-config.xmlの

<source-path>タグの中にパスを書けばOKです。

初期状態ではコメントアウトされているので注意が必要です。


またBuildですが、

[projects]→[propaties]のOutputタブのNo output, only pre/post build commandsにチェックし、自前でコマンドを実行する方が確実です。


[projects]→[propaties]のBuildタブのpre buildかpost buildに


mxmlc -default-size {幅} {高さ} -default-background-color={0xカラーコード} -default-frame-rate={フレームレート} -output {出力パス} {ソースパス}


という風に設定すればOKです。


後、Debugについてですが、


[tools]→[Settings]→[FlashViewer]→[External Player Path]にデバッグ版のFlashPlayerのパスを設定すれば良いようです。


デバッグ版のFlashPlayerは


{flex_sdk3インストールパス}\runtimes\player\win\FlashPlayer.exeを実行すればインストール出来ます。

設定するパスも上記のパスでOKです。


後は[projects]→[propaties]のOutputタブのTest Movieのコンボボックスが

Play in external playerに合っていればデバッグ時にPlayerが起動するはずです。


ちなみにtraceの出力先は

C:\Users\[ユーザ名]\AppData\Roaming\Macromedia\Flash Player\Logs\flashlog.txtです。

(ただし上記はVista使用時のパスです。またFlashDevelopのversionによっても違うようです)


これだけ設定しておけば、とりあえずは開発できそうです。

本当にこのFlashDevelopのコード補完機能は強力なので助かりますね。