GRAFZ.NET 開発ブログ

flash利用で手動の画質最適化

Thu, 26 Jun 2008 22:16:00 +0900

今回はプログラミングから離れて、画像の圧縮と画質について考えてみました。

jpgファイルは、サイズの大きさと画像の複雑さに比例してファイル容量も大きくなっていきます。ところが、人間が画像を見るときを考えると、必ずしも画像中の複雑な部分が重要ではないんじゃないかとふとひらめきました。たとえば、草むらとか、じゃり道とか、複雑な画像にも関わらず、ファイル容量を食うんじゃないかと。草むらとかじゃり道なんて、少しくらいノイズが出てもいいんじゃないかと思うのは僕だけでしょうか？かと言って、画像全体の画質を下げてしまえば、（例えば）その画像に写っている人の顔にもノイズが入ってきます。

そこで、画像中を適当に分割してやって、それぞれの領域の画質を手動で設定してやる、ということをしてみます。複数のjpgをテーブルを組むのも手段の一つですが、読み込みの際に、明らかに分割されていることがバレてしまいます。ここではswfとしてひとつのファイルにまとめてしまいます。

では、サンプル画像の中身を見てみます。

要素としては、空、牛、草むらです。実にシンプルな写真ですね。南ドイツで撮ったものです。空の部分は、画質が下がるにつれてブロックノイズが出現してきます。ゆるやかなグラデーションを表現する為には画質80以上は必要です。幸い、空は単純な絵なため、画質を上げてもファイル容量は重くなりません。次に牛です。この写真で一番見せたい部分なので、画質を高めにしてモスキートノイズを防ぎます。領域が小さいため、画質を高めにしてもファイル全体の容量はそんなに上がりません。そして、草むら。ここは試しに思いっきり画質を下げて見ましょう。少しくらいブロックノイズが出てもよい、と判断しました。

これら部分部分の画質は、ライブラリの各要素のプロパティで設定できます。パブリッシュしたものが以下です。

flash player required.

比較の為、同じファイルサイズのjpgを以下に貼ってみました。草むらはjpgの方が精細ですが、空はブロックノイズ、牛にはモスキートノイズが出てしまっています。

ご参考になれば嬉しいです。m( __ __ )m

虫の動きをスクリプトで記述する

Fri, 6 Jun 2008 14:25:00 +0900

常に進行方向を向きながら回転する物体。その動きをスクリプトで記述してみます。動きをスクリプトで記述することのメリットは、パラメータを変えるだけで物の動きを制御できたり、また、手作業では不可能な動きを作り出せることもあることにあります。
今回はこれ↓をプログラミングしてみましょう。

flash player required.

回転運動をする物体のクラスを作成し、引数で渡すMovieClipのonEnterFrameハンドラをつかまえて動きをつけます。回転運動の中心の座標と、回転確度も指定できるようにします。以下、クラスの記述です。

class MyUnit{
  var mc:MovieClip;
  var nXCenter,nYCenter:Number;
  var nAngle:Number;
  var nCos,nSin:Number;
  function MyUnit(mcIn:MovieClip,nXCenterIn:Number,
      nYCenterIn:Number,nAngleIn:Number){
    this.mc = mcIn;
    this.nXCenter = nXCenterIn;
    this.nYCenter = nYCenterIn;
    this.nAngle = nAngleIn;

    this.nCos = Math.cos(this.nAngle);
    this.nSin = Math.sin(this.nAngle);

    var owner:Object = this;
    this.mc.onEnterFrame = function(){owner.McOnEnterFrame();}
  }
  function McOnEnterFrame(){
    var nX:Number = this.mc._x - this.nXCenter;
    var nY:Number = this.mc._y - this.nYCenter;
    var nXNew:Number = nX * this.nCos - nY * this.nSin + this.nXCenter;
    var nYNew:Number = nX * this.nSin + nY * this.nCos + this.nYCenter;
    this.mc._rotation = (180 / Math.PI) *
      Math.atan2(nYNew - this.mc._y,nXNew - this.mc._x);
    this.mc._x = nXNew;
    this.mc._y = nYNew;
  }
}

1行目：MyUnitという名前でクラスを作成します。もちろん何でも構いません。
2行目：回転運動をさせるMovieClip。そして、
3行目：（回転の）中心座標、
4行目：フレームあたりの回転確度。これらをコンストラクタの引数で受け取ります。
5行目：回転の計算に使用する変数。13-14行目で計算し、22-23行目で使用します。
6-7行目：ここからコンストラクタの記述。
8-11行目：受け取った引数をプロパティに格納します。
13-14行目：回転の計算に使用する変数。22-23行目で使用します。
16行目：MovieClipのスコープからクラスのメソッドにアクセスするための変数。
1７行目：onEnterFrameハンドラをオーバーライドします。19行目からのメソッドを実行します。
19行目：onEnterFrameハンドラで実行されるメソッド。
20-23行目：回転の計算。計算式の詳細は割愛させてください。たしか高校の数学でやった気が。
24-25行目：MovieClipが進行方向を向くようにします。atan2が便利。
26-27行目：MovieClipの新しい位置を代入。

そして、このクラスのオブジェクトを生成する記述は以下。

var oUnit:Object = new MyUnit(this.mcUnit,Stage.width * 0.5,Stage.height * 0.5,0.1);

mcUnitというのは、回転させる対象のMovieClip。回転の中心は、ステージの中心を指定します。回転確度の単位はここではラジアン。度数にしたい場合は、(度数)*(Math.PI / 180)を引数で渡せばOK。

動きを決定する要素にランダムな数値を加えてやることで、生命感のある飽きさせない動きなども表現できるかもしれません。そのようなことは、スクリプト制御だからこそ可能な表現ですね。

ご参考になれば嬉しいです。m( __ __ )m

MovieClipLoaderで画像をロードする

Sat, 24 May 2008 08:27:00 +0900

ダウンロードしたswfファイルの中に、さらに画像などを読み込む方法といえば、loadMovieがまず思いつきます。このメソッドはURLを指定してやるだけでよくて、記述が簡単なんですが、難がひとつあります。それは、ロードが完了したタイミングをつかまえられない、ということ。つまり、読み込みが完了した直後にその画像を非表示にする、などということができません。
そういったニーズを満たしてくれるのが、MovieClipLoader。このクラスのオブジェクトに、リスナーオブジェクトを追加してやることで、画像読み込みに関連するいろいろなイベント、例えばエラー処理や読み込み完了など、を処理することができます。今日はもっとも基本的なパターンとして、「画像読み込みが完了するまではloading表示、完了したらloadingを消して、画像を表示」という挙動のクラスを設計してみます。

ざっくりとした仕様としては、StartLoadメソッドで画像の読み込みを開始して、ロード完了と同時に画像を非表示化。表示・非表示はShowメソッド、Hideメソッドで行う、という感じです。読み込みが完了する前のタイミングでShowが呼ばれたとしても、読み込み完了と同時に表示されるように時間差をクッションしてやる、というのがコツです。以下ソースコードです。

class MyPictureUnit{
  var mc:MovieClip;
  var oLoader:MovieClipLoader;
  var oListener:Object;
  var fVisible,fLoaded:Boolean;
  function MyPictureUnit(){
    this.mc = _root.createEmptyMovieClip("mcSample",_root.getNextHighestDepth());
    this.mc.createEmptyMovieClip("mcPicture",_root.getNextHighestDepth());

    this.mc.createTextField("tfLoading",_root.getNextHighestDepth(),0,0,0,0);
    this.mc.tfLoading.autoSize = true;
    this.mc.tfLoading.text = "loading...";

    this.oListener = new Object();
    var owner:Object = this;
    this.oListener.onLoadComplete = function(){owner.OnLoadComplete();}
    this.oLoader = new MovieClipLoader();
    this.oLoader.addListener(this.oListener);

    this.fLoaded = this.fVisible = false;

    this.StartLoad();
  }
  function StartLoad(strFilename:String){
    this.oLoader.loadClip(strFilename,this.mc.mcPicture);
  }
  function OnLoadComplete(){
    this.fLoaded = true;
    this.mc.tfLoading._visible = false;
    this.mc.mcPicture._visible = this.fVisible;
  }
  function Show(){
    this.fVisible = true;
    this.mc.mcPicture._visible = this.fLoaded;
  }
  function Hide(){
    this.fVisible = false;
    this.mc.mcPicture._visible = false;
  }
}

1行目：MyPictureUnitという名前でクラスを作成します。もちろん何でも構いません。
2行目：このmcの上に、loading表示のTextField、画像を貼り付けるmcを載せます。
3-4行目：MovieClipLoaderオブジェクトと、イベント処理用のリスナーオブジェクト。
5行目：ロードが完了したかどうか、表示が要求されたかどうかを格納するフラグ。
6行目：ここからコンストラクタです。
7行目：2行目のmcを作成します。ここではルート直下を指定していますが、任意でも可です。
8行目：さらにその上に画像を貼り付けるためのmcPictureというMovieClipを作成します。
10行目：tfLoadingという名前で、loading表示のためのTextFieldを作成します。大きさは(0,0)ですが、
11行目：autoSizeにして文字の大きさにTextFieldが変形されるようにしてあります。
12行目：tfLoadingに文字列を設定。please wait...でもよいです。もちろん。
14行目：イベント処理のためのリスナーオブジェクトを作成します。
15行目：oListenerのスコープから外にアクセスするための変数。後で使います。
16行目：画像の読み込みが完了したらOnLoadCompleteというメソッドが呼ばれるようにします。詳細は27行目で。
17行目：MovieClipLoaderオブジェクトを作成し、
18行目：14行目で作成したリスナーオブジェクトを登録します。
20行目：5行目のフラグをfalseで初期化します。
22行目：StartLoadメソッドで画像の読み込みを開始します。
24行目：StartLoadメソッドは何かというと、
25行目：17行目で作成したMovieClipLoaderオブジェクトに画像のファイル名と読み込み先のMovieClip(2行目で作成済み)を指定して画像の読み込みを開始します。
27-31行目：画像の読み込みが完了したときに呼ばれます。フラグfLoadedをtrueにし、loading表示を非表示にし、このタイミングで既にShowメソッドが呼ばれていた場合のみ読み込んだ画像を表示させます。
32-35行目：画像の表示させるためのメソッドで、fVisibleは30行目で使用。画像がまだ読み込まれている場合のみ、画像を表示させます。
36-39行目：Showメソッドの逆。

という具合です。このクラスの使用方法は、例えば以下のようになります。rootでの記述です。

var oPicture:Object = new MyPicture();
this.oPicture.StartLoad("sample.jpg");
this.oPicture.Show();

1行目：ページ上部で作成したMyPictureUnitクラスのオブジェクトを作成し、
2行目：ファイル名を指定して画像の読み込みを開始します。
3行目：画像を表示させます。読み込みが完了していない場合は、完了と同時に表示し、既に完了している場合は即時に表示されます。このShowメソッドを呼び出すタイミングは任意で、例えばボタンなどに割り当ててもOKです。

ご参考になれば嬉しいです。m( __ __ )m