忍者ブログ
 >admin |  >entry |  yukku++Blog 
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

[SWF] DistortImageTest.swf

Flash Player 9 が必要です。

Matrix クラスを使えばどんな形にでもなると思ったけど、台形変形は一筋縄には行かないのね。
ってわけでいろんな人のブログのエントリーを見るうちに DistortImageクラス にたどり着く。
リンク先の demo より、四角形の四頂点を自在に扱って、変形が出来るようになるクラス。
原理としては四角形を三角形に分割してどーのこーのしているらしい。
下部のスライドバーで分割数を変更できるので、その様子がわかる。
もとは Sandy という3Dを表現するためのクラス群のひとつだったらしいのだが、最新版には含まれていなかった。
何かに統合かなんかされたのだろうか?ってか Sandy のサンプル見てるとすごいな…。
下手すると Flash だけで初期のプレステくらいのゲーム作れちゃうんじゃないか…?
3Dにはまだクビを突っ込んでないけど(突っ込めるほどスキルはないが)やってみたいな。
さて、長くなったがテストサンプルとソース。これもサンプルのソースを参考。
頂点に mx:button をそのまま利用でカコワルイ。画像はウチのねこちゃん。
四頂点を設定するだけで変形できるからすごく簡単だなぁ。
あと、せっかくフルスクリーンも試したかったのに、SWFだけで設定できないみたい。
HTMLに埋め込んで、タグの allowFullScreen を true にしないとダメみたい。
マンドクセー。ので、Enter を押してもフルスクリーンになりません。エラー出ます。
保留ってことで。
// @Main.as
import mx.controls.*;
import flash.display.*;
import flash.events.*;
import flash.ui.Keyboard;
import DistortImage;

[SWF (backgroundColor = "#FFFFFF", width = "640", height = "480", frameRate = "12")]
[Embed(source = 'assets/testimg.jpg')]
private var myImg:Class; 
private var bmp:Bitmap = new myImg();
private var shape:Shape = new Shape();
private var di:DistortImage = new DistortImage(320, 240, 2, 2);

public function Init():void
{
	stage.addChild(shape);
	// ついでにフルスクリーンモードのテストも兼ねておこう。
	stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
}

private function keyDown(evt:KeyboardEvent):void
{
	switch (evt.keyCode)
	{
		case Keyboard.ENTER:
			stage.displayState = StageDisplayState.FULL_SCREEN
		break;
	}
}

private function onEnterFrame():void
{
	shape.graphics.clear();
	shape.graphics.lineStyle(1, 0xEEEEEE, 0.3);
	// setTransform を使って四頂点を point で指定するだけで変形できる
	di.setTransform(shape.graphics, 
	bmp.bitmapData, 
	// 上から左上、右上、右下、左下の順
	getObjectCenter(tl), 
	getObjectCenter(tr), 
	getObjectCenter(br), 
	getObjectCenter(bl)
	);
}

private function getObjectCenter(btn:DisplayObject):Point
{
	// 各ボタン(ドラッグポイント)の中心を求めて point を返す関数
	var center:Point = new Point()
	center.x = btn.x + btn.width / 2;
	center.y = btn.y + btn.height / 2;
	return center
}

<?xml version="1.0" encoding="utf-8"?>
<!-- @DistortImageTest.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="Init()" enterFrame="onEnterFrame()" layout="absolute">
    <mx:Script source="Main.as" />
    <mx:Button id="tl" x="20" y="20" width="24" height="24" buttonMode="true" mouseDown="tl.startDrag()" mouseUp="tl.stopDrag()" />
    <mx:Button id="tr" x="340" y="20" width="24" height="24" buttonMode="true" mouseDown="tr.startDrag()" mouseUp="tr.stopDrag()" />

    <mx:Button id="bl" x="20" y="260" width="24" height="24" buttonMode="true" mouseDown="bl.startDrag()" mouseUp="bl.stopDrag()" />
    <mx:Button id="br" x="340" y="260" width="24" height="24" buttonMode="true" mouseDown="br.startDrag()" mouseUp="br.stopDrag()" />
</mx:Application>
PR

[SWF] MotionDetector 0.0.1

Flash Player 9 が必要です。

・必要なもの:

  • Webカメラ
  • 多少のマシンスペック
・遊び方: 左のウィンドウがそれぞれ、
  • 左上:カメラの映像
  • 左下:動いた場所が白く表示される
  • 右上:背景に無いものを抽出
  • 右下:背景に設定された映像
右の設定はそれぞれ、
  • BlurDegree:検出の輪郭の曖昧さ
  • DetectionAccuracy:オブジェクト抽出の精度
となっています。
一度、右下の[CaptureBG]のボタンをクリックして背景を決定します。
すると、右上には背景には無かった物体のみを抽出します。
まぁ、テキトーにいじればなんとなく意味は分かるはず。
基本的には映像を表示するだけのものなので他に機能はありません。
カメラとBitmapData周りの勉強中…。
今度はちょっとでもゲームっぽいのを作りたい。

・二階調化(二値化) bitmapData.threshold() をつかって閾値により、塗りつぶしを行う。 ------------------------------------------------------------------------------------------
threshold(sourceBitmap: BitmapData , sourceRect: Rectangle , destPoint: Point , operation: String , threshold: Number , [color: Number ], [mask: Number ], [copySource: Boolean ]) : Number
しきい値に照らしてイメージのピクセル値をテストし、テストに合格したピクセルに新しいカラー値を設定します。
threshold() メソッドを使用するとイメージ内のカラー範囲を分離して置換し、イメージピクセルに対しその他の論理演算を実行することができます。
パラメータ:
sourceBitmap:BitmapData - 使用する入力ビットマップイメージ。
sourceRect:Rectangle - 入力として使用するソースの領域を定義する矩形。
destPoint:Point - 現在の BitmapData (インスタンス)内のポイント。
operation:String - 比較演算子をストリングとして渡す。
threshold:Number - 閾値の基準となる値。
color:Number - 閾値条件を満たした場合にピクセルを塗りつぶすカラー値。
mask:Number - カラーコンポーネントを分離するときに使用するマスク。(論理積)
copySource:Boolean - true でしきい値テスト失敗時に、ソースイメージのピクセル値がターゲットイメージにコピーされます。
戻り値:Number - 変更されたピクセル数。
------------------------------------------------------------------------------------------

var dist:bitmapData = new bitmmapData(100, 100);
var rect:Rectangle = new Rectangle(0, 0, dist.width, dist.height);
var pt:Point = new Point(0, 0);
dist.threshold(dist, rect, pt, "<=",0xAARRGGBB ,0xAARRGGBB , 0xAARRGGBB , false);
スケールモードの変更
定数 文字 効果
StageQuality.LOW "low" 画質低
StageQuality.MEDIUM "medium" 画質中
StageQuality.HIGH "high" 画質高
StageQuality.BEST "best" 画質最高
なし "autolow" 画質低→高
なし "autohigh" 画質高→低

定数か文字を stage.quality に代入する。
ex) 画質を最高に設定する。
stage.quality = StageQuality.BEST;
stage.quality = "best";
スケールモードの変更
定数 文字 効果
StageScaleMode.EXACT_FIT "exactFit" 縦横比を変えてフィット
StageScaleMode.NO_BORDER "noBorder" 縦横比を変えずにフィット
StageScaleMode.NO_SCALE "noScale" 100% 表示
StageScaleMode.SHOW_ALL "showAll" すべて表示

ex) noScale に設定する。
stage.scaleMode = StageScaleMode.NO_SCALE;
ステージ表示モードの変更
プロパティ 効果
StageDisplayState.FULL_SCREEN フルスクリーンモード
StageDisplayState.NORMAL 通常(ウィンドウ)モード

ex) FULL_SCREEN/NORMAL に設定する。
stage.displayState = StageDisplayState.FULL_SCREEN
stage.displayState = StageDisplayState.NORMAL
[AS3 Ref] Stage
// 埋込み記述
[Embed(source = "/assets/Arial.ttf", fontName = "Arial", mimeType = 'application/x-font', flashType = 'true' )]

var Font_Arial:Class;
var myText:TextField = new TextField();

// 埋め込みフォントを有効にする。
myText.text = "test"
myText.embedFonts = true;
addChild(myText);

// 書式のインスタンスを作って、myTextにセットする。
var format:TextFormat = new TextFormat;
format.font = "Arial";
myText.setTextFormat(format);
ちょとばかし、3DCGをかじってる。ほんの少し。いや、舐めた程度か。
作品の一つ二つ公開でききればいいのだけれど、まともな作品と呼べるものはなし。
関連ソフトのリンクメモ

Blender Metasequoia Gimp XSI Mod Tool Terragen

タッチパッドのボタンの片方だけ「カチッ」ってクリック感がないので、修理できないか、
あと、メモリの増設が出来ないか見てみるつもりで分解してみた。
もし、分解・改造を考えている人がいたら、参考になれば、と写真も掲載。

cartina001.jpg

まずは裏のネジをはずしていく。ちなみに色は同じ大きさのネジです。
本体の後ろのヒンジ部分にもあるのではずします。また、ドライブのベゼルに隠れて二本あります。
ベゼルは三つのツメで固定されているので、ドライブ裏の金属カヴァーを外して、ツメを外します。
ベゼルを外したら金属カヴァーを付け直しておきましょう。
ネジを外したら、ドライブ側から裏蓋を持ち上げて外します。

cartina002.jpg

メモリは標準DDR 512MBなので、512MBが一枚、空スロットが一つでした。
最大メモリ容量がわからないので、どこまで増やせるかわかりませんが、1GBくらいには出来るでしょう。
赤く囲った部分のツメを外すことでキーボードが外れます。
ツメを外した後に配線を外すために、一度表にして、キーボードを持ち上げ、配線を外します。
基盤のネジを外していきます。ヒンジ部に無線LAN、ディスプレイ、スイッチの配線があるので、それも外しましょう。

cartina003.jpg

チップセットの前の二つのスイッチがタッチパッドのボタンです。
基盤に半田付けされていて、近くにはコンデンサなどがぎっしり。

cartina004.jpg

赤く囲った部分はタッチパッド、キーボードの配線です。
コレに気がつかずに基盤を持ち上げたため、無理やり抜く結果となってしまいました。
幸い大丈夫でしたが、キーボード->タッチパッド->基盤 の順にやるべきです。

cartina005jpg

と、まぁ。こんな感じなわけですが。 結局このあと何もせずに元に戻しました。
換えの部品もメモリも用意していたわけでもないので何も出来なかったから。
ただいたずらに分解したかった衝動でやってみました。
でも、クリック感に違和感があるのも事実だし、メモリも増やしたいんだけど、
秋葉原に行く機会も無いしなぁ。メモリも意外に高い。
512MBでも5000円強はするのね…。DDR2だったらよかったのに。
急ぎではないからメモリが安くなったら増設しよう。そうしよう。

その後、メモリーだけ増設。計1GBとなりました。
それほど体感的に変化は無いけど、Firefoxがちょっと重かったのが改善されたかな。

初心者には難題?といわれるクラスとインスタンスの関係について理解できた!はず。

つまり、インスタンスはクラスというテンプレートをコピーして作られたものだから、
作られたインスタンスはクラスからプロパティやらメソッドをもらっている、と。

[インスタンス名].[インスタンスメソッド]();
で呼び出せるのか。
いろいろな本にも書いてあったしネットにもあったけどなかなか理解できなかったよ。

以下カスタムクラスの定義テンプレ。
package パッケージ名{
    public クラス名{
        // クラスのプロパティ
        public static var 変数名:タイプ;
        public static const 定数名:タイプ;
        
        // クラスのメソッド
        public static function メソッド名():タイプ{
            // ステートメント
       };

        // コンストラクタ
        public function クラス名() {
           // ステートメント
        }

        // インスタンスのプロパティ
        public static var 変数名:タイプ;
        public static const 定数名:タイプ;
        
        // インスタンスのメソッド
        public static function メソッド名():タイプ{
            // ステートメント
       };
    }
}
クラスは
「クラスプロパティ」         クラス自体のもつプロパティ
「クラスメソッド」            クラス自体のもつメソッド
「コンストラクタ」            インスタンスを作る時に実行される関数
「インスタンスプロパティ」作られたインスタンスが持つプロパティ
「インスタンスメソッド」   作られたインスタンスが持つメソッド
の五つで構成されて、それぞれ不要なら省略可能ということ。
[2]  [3]  [4]  [5]  [6]  [7]  [8]  [9
プロフィール
Name :
yukku
カレンダー
06 2024/07 08
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
ブログ内検索
Twitter
Ads
アクセス解析
忍者ブログ [PR]