func09

そういえば来週はコリンムック神のセミナーだった。

セミナー行くよーって人 連絡を乞う mitsuru.haga@gmail.com http://twitter.com/func09

–

追記： セミナー後 コリン・ムック「今から始めるActionScript 3.0」に行ってきました

Flvプレーヤーにシーク機能を付けたいのですが・・

このフォーラムで、シーク機能について質問が投げられていたので作ってみた。

Flex2でFLVプレイヤーを作ろうと思ったら、ボタンなどの標準コンポーネントを使って 簡単に実装できちゃうんですが、シークバーはちょっとポイントが要ります。 でもだからといって、コンポーネントを作らないといけないわけじゃなくて、 HSliderとスクリプトだけでなんとかできちゃいます。

こんな感じになる。それっぽいでしょ？

コントローラを配置

まずはFLVを表示するためのVideoDisplayクラスと シークするためのHSliderクラスを準備

FLVの再生位置とシークバーを同期させる

これだけでもFLVは再生されるので、再生されている位置とシークバーを同期させてみます。 ここからは基本的に編集するのは

のみ

スライダーの最小値と最大値を決定します。 最大値にビデオの総時間をバインディングされるようにしておき さらにビデオの再生位置に変更があるたびに、スライダーの値とビデオの再生時間が同期するように仕込む。 これで、再生時間 / 総再生時間みたいなことを気にしないでも、スライダーが勝手に計算してくれます。

スライダーからの変更をビデオに反映する

次にスライダーからビデオの再生位置を変更できるようにします。 HSliderに次の行を追加します。 [xml] change=”{ if(myVD.stateResponsive) myVD.playheadTime = myHS.value }” [/xml]

VideoDisplay#stateResponsiveはビデオが応答可能かどうかの判定メソッドです。 まだ動画がロードされていなかったり、ビジーな状況を回避しつつ スライダーのvalueをそのままビデオの再生位置時間に代入します。 これはスライダーとビデオの扱う単位を「秒」で揃えているから可能になっています。 Flexでは往々にして、コントロール間で扱う単位を揃えたり 中間に変換するアダプターメソッドを噛ますと、生産性があがりますね。

見た目や精度を向上する

さて、ここまでで一応実装完了しているのですが 使ってみると、ドラッグ中はビデオに再生位置が反映されなかったり 再生位置をスライダーのつまみの位置だけで確認しなければならなかったり ちょっと不親切です。

HSliderにさらに、下の処理を追加。 [xml] liveDragging=”true” showTrackHighlight=”true” [/xml]

Slider#liveDraggingは、つまみのドラッグ中にもchangeイベントを発行しつづけるためのフラグです。 Slider#showTrackHighlightは、スライダーの始点からつまみまでを色つけするスタイルプロパティ。

完成

以下は全コードです。

嫁が書いた、僕の似顔絵アニメ。 良くモニタを見ながら髪をウネウネ触っている癖の細部にわたってまで表現されている。

とても似ていると評判なので、ブログのプロフィールに使ってみた。

http://eyevio.jp/ eyeVioの動画プレイヤーの新バージョンがリリースされた模様。

Flashでプレイヤー作成を引き続き担当しました。 動画はうちの猫です。

今回からプレイヤーのサイズが変更可能になっていて そのロジックがちょっとおもしろいです。使ってる人には全然おもしろくないかもですが 作ってる側としては楽しかった。

最近xacti hd1000を買ったのですが、Youtube、Googleビデオと比較して 明らかに画質が良いので、別に自分で作ってるからというわけでもなく eyeVioを使っています。オススメです。

AS2での話だと思うんだけど

[js] NaN >= 1; // true [/js]

この判定おかしくね？

調べたらここにあったよ。 http://www.fumiononaka.com/TechNotes/Flash/FN0108015.html

NaNを使った数値の比較演算子（<=,>=）は、なんか変な感じとのこと。

FLVのダウンロード状態を監視するタイマーが [js] var loadedRatio:Number = ns.bytesLoaded / ns.bytesTotal; if( loadedRatio >= 1 ) { //監視終了 } [/js] みたいな判定式で抜けるようなプログラムを書いていたんだけど 数回に１回、タイマーが１発目で終了しているバグが見つかって 追求したらNaNのせいだった。

これからは、NaNが入る可能性があるNumber型の変数を条件に使う場合は [js] if( !isNaN(loadedRatio) && loadedRatio >= 1 ){} [/js] とするようにしよう。

ちなみにAS3は期待通りの挙動らしい。

ガヤアニメ http://gaya-gaya-gaya.blogspot.com/

嫁のサイトです。

嫁はフリーランスでFlashのアニメ作家をしていまして フリーランスのくせにサイトがないという由々しき事態をやっと脱却したので もしアニメやイラストの仕事があれば、是非。

あ、僕にもフリーランスの仕事ください、是非。

同じFlash使いですが、 タイムラインを何千フレームも使う人間と かたやタイムラインは１つしか使わない人間が （_rootにjp.func09.hogehoge.Application.main( _root );で終わる） つがいというのもおかしな話ですな。

そろそろ嫁は臨月で、来年には人生初めての親になります。 うーん、それもまたおもしろそう。

と、普段はあまり書かないプライベートな事なんぞ書いてみた。

FlexでXMLSocketする必要があったので、テスト用にサーバを書いてみたよ。 自信はないので、1%も保証はないけど一応動く。

ソースファイル

まずはRubyのソース

Read More…

[js] import mx.logging.ILogger; import mx.logging.Log;

var logCategoryName:String = “ConnectionLog”

var logger:ILogger = Log.getLogger(logCategoryName); logger.info(‘connect..’); logger.error(‘connect error..’); logger.worn(‘connect worn’); logger.fatal(‘connect fatal’); [/js]

こんな感じ？

ログレベルは fatal < worn < error < info

僕は各クラスごとにログカテゴリを設定してるんで、全エントリーを使って コンストラクタん中で、こんな感じに。

[js] var logger:ILogger = Log.getLogger( describeType(this).@name.toString().match(/::(.*)/)[1] ); [/js]

あとは、環境によって、TraceとかLocalConnectionとか、ログの出力方法を切り替えたいなと。

mx.logging.targetsあたりを弄るのかな？

こんな感じ？

[js] import flash.utils.describeType; String(describeType(this).@name).match(/::(.*)/)[1]; [/js]

ActionScript3.0 Animation Making Things Move!を読み始めました。 英語よめねー。

で、読んでいるうちに何か作りたくなったので 簡単にこさえてみた。お絵かきツール。 実はFlashでお絵かきツールって作ったこと無かったのよねぇ。

下の灰色四角の中でマウスをクリックすると線が描けます。

概要

1. マウスを押したら、描画開始
2. マウスを放すまで、描画しつづける
3. マウスを放したら、描画終了

と、誰が作ってもこんな感じだと思います。 1時間くらいで作れるように、あまり機能は求めません。

作ったクラスは

paint.Paint お絵かきツールのメインクラス

paint.Background 背景

paint.Canvas 絵を描くカンバス

paint.Brush ブラシ。サイズとか色とか

本当は背景クラスはカンバスを継承した方がいいような気がしますが それは今後追求したくなったら、やろう。

おソース

[js] /** * お絵かきツールのメインクラス * @author mitsuru.haga@gmail.com * @version 0.1 */

package paint {

import paint.*;
import flash.display.Sprite;
import flash.events.*;

public class Paint extends Sprite{

    //  ブラシ
    protected var brush:Brush;

    //  ブラシコレクション
    protected var brushCollection:Array = [];

    //  カンバス
    protected var canvas:Canvas;

    //  背景
    protected var background:Background;

    /**
    * コンストラクタ
    */
    public function Paint(){
        initialize();
    }

    /**
    * 初期化
    * @return
    */
    protected function initialize():void{

        //  ブラシを配列にどんどん追加
        brushCollection.push( new Brush( 'Red', 5, 0xFF0000 ) );
        brushCollection.push( new Brush( 'Blue', 5, 0x0000FF ) );
        brushCollection.push( new Brush( 'Green', 5, 0x00FF00 ) );

        //  ランダムにブラシを決定する
        brush = brushCollection[ uint( Math.random()*brushCollection.length ) ];

        //  背景を作る
        background = new Background();
        background.buttonMode = true;
        background.width = stage.stageWidth;
        background.height = stage.stageHeight;
        background.addEventListener( MouseEvent.MOUSE_DOWN, onCanvasMouseDownHandler );
        background.addEventListener( MouseEvent.MOUSE_UP, onCanvasMouseUpHandler );
        addChild( background );

        //  カンバスを作る
        canvas = new Canvas();
        canvas.addEventListener( MouseEvent.MOUSE_DOWN, onCanvasMouseDownHandler );
        canvas.addEventListener( MouseEvent.MOUSE_UP, onCanvasMouseUpHandler );
        addChild( canvas );

    }

    /**
    * マウスを押した場合
    * 線を描く準備
    * @param    e
    * @return
    */
    protected function onCanvasMouseDownHandler( e:MouseEvent ):void {
        trace( 'draw start' );
        brush = brushCollection[ uint( Math.random()*brushCollection.length ) ];
        canvas.graphics.lineStyle( brush.thickness, brush.color, 1 );
        canvas.graphics.moveTo( mouseX, mouseY );
        canvas.addEventListener( Event.ENTER_FRAME, drawingHandler );
    }

    /**
    * マウスを放した場合
    * 線を描くの終わり
    * @param    e
    * @return
    */
    protected function onCanvasMouseUpHandler( e:MouseEvent ):void {
        trace('draw finish');
        canvas.graphics.endFill();
        canvas.removeEventListener( Event.ENTER_FRAME, drawingHandler );
    }

    /**
    * マウスを押している間
    * 線を描き続ける
    * @param    e
    * @return
    */
    protected function drawingHandler( e:Event ):void{
        trace('drawing');
        canvas.graphics.lineTo( mouseX, mouseY );
    }
}

} [/js]

感想

ふーん、実に簡単。 気分が乗ったら、Flexのコンポーネントにするくらいの事をしてみたい。 最近Flexばかりだったけど、素のActionScript3ってのも漢らしくていいなと最近思う。

ダウソ

ソースファイル