手に入れたカメラはCanonのEOS 750QD

プログラムオートのモードしか無い、手軽に使えるコンセプトの一眼レフ
絞りとかシャッタースピードとか調整したかったけれど、いただき物なので贅沢は言わない。

CanonEFマウント。機械的にはFマウントということなのかな。
オートフォーカス等のレンズ操作をするため電気信号用の接点がある。もちろんレンズ側にも同じ規格のものを使わんといかん。
レンズのマウントは種類が多すぎて。。基本的にカメラとレンズはメーカ合わせるべきか。

レンズはCANON　ZOOM　LENS　EF　35-105mm

保護フィルタも付けていただきました。

家の近くの昔ながらのカメラ屋さんで、
フィルムと、バッテリも無かったので、電池を購入。
ISO４００　２４枚撮り　￥600程度

2CB5バッテリ　￥1800で買ったけれど。。ぼったくられた気がするな。。

別のカメラ屋さんで￥1200でした。お勉強代だと思うことにした。

バッテリの交換

一瞬どこにバッテリ入れるかわからなかったけれど、できた。

フィルムのセット

フィルムカバー（というのかな？）を開け、
フィルムの向きに注意してセット。
巻き取り方向が自然になるような向きにすればよい。
あと、カメラ本体側とフィルムの本体ケース（パトローネ）側に接点があるので（よくよく見てみてはじめて知った。多分フィルムがセットされているかどうかカメラ本体が認識するため？）
それに合わせるようにすればまず間違いなくセット出来ると思う。

フィルムセットしているところを写真に撮り忘れた。。ふた閉めて巻いてしまったので開けられなかった。。
フィルムを少し引き出し、先端をカメラ本体の赤いマークのところまで引き出す。
このときフィルムの穴を巻き取りの歯車部分（なんて言うのかわからない）に噛ませるようにする。

そうして、蓋を閉めると自動的に巻き取られる。
このカメラはプリワインド方式というものらしくて、セットすると自動的にすべて引っ張り出されて巻き取られ、撮影するたびにフィルム本体（パトローネ）へ戻っていくというものらしい。
こうするとカメラの背面カバーを開けてしまいフィルムが感光してしまっても、すでに撮影した分はすでにフィルム本体内にあるため保証される。らしい。すごい。

・・・


24枚すべて撮って、現像した結果は後日。
ファインダー越しにピントをあわせるのが難しいので（マニュアルフォーカスでがんばってみた）ほとんどピンボケしてるんじゃないかなと予想していたけれど。。。
まぁでも普段いかにオートフォーカスに頼ってるかと身に染みた。

<mt:Ignore>ブログ記事表示数を変数に格納</mt:Ignore>
<mt:SetVar name="entry_view_count" value="10">

<mt:Ignore>ブログ記事表示数変数を使用</mt:Ignore>
<mt:Entries lastn="$entry_view_count">

　hogehoge

</mt:Entries>

$を使わないとエラーで怒られる。
もしくは文字列をうけとれるモディファイアならentry_view_countっていう文字列として入ってしまい予期しない動作になる。

バイクをやっていると新しいものが欲しくなるようで、新しい物を買ったからと使わなくなった物を貰った次第です。

ペダル側のギヤがうまくトップギヤ（大きいギヤ）にチェンジできないので諦めてしばらく使ってたけれど、もしかして事故るんじゃないかと思いいじってみることにした。

調整前

ペダル側変速機のガイドプレートと呼ばれるものの位置が重要のようです。ギヤの上側のSHIMANO 9-SPEEDって書いてある三日月状のものがガイドプレート。
綺麗に掃除してなくて汚い画像で申し訳ありません。

調整後

ガイドプレートの高さを調整した。
ギヤの1～2mm上ぐらいという結構ぎりぎりのところまで調整して良いようです。

ガイドプレートの高さの調整に伴い、ワイヤのテンションが緩くなってしまったので調整。
テンション調整すると変速操作でガイドプレートの位置がうまくギヤ歯位置に移動してくれる。（ワイヤのアジャスタ等ついていないので調整がちょっと大変。）
その後、ガイドプレートの左右の位置も調整してチェーンが擦らないようにする。（後輪側のギヤをトップ（小さいギヤ）にして調整する。後輪ローギヤではどう頑張ってもチェーンがガイドプレートに当たる）
このときワイヤのテンションではなくて、調整用のボルトがあるので回して調整する。（あまりストロークの大きな調整はできないため、だいたいはワイヤのテンションで調整すること。）

上写真のように2つあるネジのうち、左側がローギヤ状態でのガイドプレート位置調整ネジ、右側がトップギヤ状態での調整ネジ

調整してなんとかスムーズな変速ができるようになりました。

ペダル側ギヤが2段なのでまだ調整が楽だったけれど、3段になるとどう調整しよう。。

参考

• ヤエスメディアムック 自転車ライフを楽しむ！大人のサイクリングビギナーズ

写真はコンパクトデジカメで自分で撮った某ふしぎ公園です。<\br> もともとミニチュアっぽい画像だったかもしれません。。

前処理

コントラストと明るさを上げます。コントラストは思い切って結構高くします。
写真によってはこれだけでも十分ミニチュアっぽく見えるかも。

ぼかしをかける

アルファチャンネル等を使って、ピントを合わせたい部分以外の選択範囲を作ります。このとき、グラデーション状に選択範囲を作り、だんだんピントがボケるようにします。

元画像を別のレイヤーに複製し、複製画像に対して作った選択範囲を使ってぼかしをかける部分のみ残し他は消します（delete）。あとの処理の確認のため、元画像のレイヤーは非表示にしておきます。

ぼかし（ガウス）を思いっきりかけます。（半径10.0pxくらい）もっと解像度が高い場合はもっとかける。

複製前の元画像とレイヤーを重ねるとできあがり。

アクションファイル

Photoshopアクションを作ったので使ってみてください。
MiniatureEffect.zip

解凍後できるアクションファイルをPhotoshopのアクションパレットから読み込んでください。Photoshop6 と7で動作確認しています。
今のところ、VGA（高さが480ｐｘ）のみに対応し、画像の中央にピントが合う用になっています。

なんでミニチュアっぽくみえる？

ちょろっと考えてみて、自分なりの考察です。
まず、コントラストや明るさを上げることで不自然に色が際立ち、自然物ではなく作り物みないな感じになるのかなと。
また、普通の風景を撮ると、被写体がかなり遠くにいることになります。
通常レンズの特性上、被写体が遠くなればなるほど、ピントが合う奥行きの範囲が広くなります。（「被写界深度（ひしゃかいしんど）」という。）
逆に近くなると、被写界深度が浅くなり、限られた範囲でしかピントが合いません。（ピントが合っている部分より奥と手前がピンぼけする。）
なので風景写真に対して、手前と奥のピントをぼかせば、遠くに見える風景ではなく、近くにある小さなミニチュアに見えるんじゃないかな？

こんなの作ります。
ボタン押すと、マウスカーソルが変わって、お絵かきができますｗがしがし描いて楽しい♪

グラフィックの準備

「マウスカーソル用のペンのアイコン」・「ボタン用の画像」を準備。全てムービークリップとしてシンボル登録します。

今回は、ペンのアイコンは初めはステージ上に置かず、「リンケージ」でActionScriptに登録しておく。という形になります。ボタンは今までどおりステージ上に配置。

リンケージのしかた。

「ライブラリ」パレットでシンボルを選択。右クリック「リンケージ」を選択し、「ActionScriptに書き出し」「最初のフレームに書き出し」をチェック。識別子を「pen_cursor_Sym」とします（識別子は任意の文字列）。
これで、ActionScriptでペンのカーソルのシンボルが使える。

スクリプト書き書き

/*==============================
//各宣言
==============================*/
var pen_btn:MovieClip;	//ボタン
var cursor:MovieClip;	//カーソルへの参照

//イベント登録 ==========
//ボタンイベント
pen_btn.onPress = PressButton;//ボタン押
pen_btn.onRelease = ReleaseButton;		//ボタン離
pen_btn.onReleaseOutside = ReleaseOutsideButton;
//ボタン外でマウス離

/*==============================
	メソッド
==============================*/
//====================
//ボタン
//ボタン押
function PressButton()
{
	//(1)ボタン押されたムービー（インスタンスpen_btnで定義済み）
	pen_btn.btnDown();
}
//ボタン離
function ReleaseButton()
{
	//(1)ボタン離したムービー（インスタンスpen_btnで定義済み）
	pen_btn.btnUp();

	//マウスカーソル変更
	Mouse.hide();//(2)まずはマウスカーソル消去
								   
	//(3)リンケージしたペンカーソルをインスタンス化
	cursor = _root.attachMovie("pen_cursor_Sym","penCursor",1);
	
	//(4)インスタンス化されたカーソルをマウス位置へ
	cursor._x = _root._xmouse;
	cursor._y = _root._ymouse;
	//(5)以後、マウス動作イベントを割り振り
	cursor.onMouseMove = cursorMove;
}
//ボタン外でマウス離
function ReleaseOutsideButton()
{
	//(1)ボタン離したムービー（インスタンスpen_btnで定義済み）
	pen_btn.btnUp();
}

//====================
//マウス
function cursorMove()
{
	//(6)カーソル変更後、動くたびカーソル画像追従
	// → 擬似的にカーソルを動かしているようにする
	this._x = _root._xmouse;
	this._y = _root._ymouse;

	//(7)滑らかな動作のために、フレームレートに関係なく再描画
	updateAfterEvent();
}

ボタン押すとマウスカーソル変更

(1)ボタンムービー

ボタン押したときへこむ。離したとき戻る。これらのムービーはボタンのシンボルにスクリプト定義済み。これらボタンについての動作は以前のエントリ参考

(2)マウスカーソル消去

カーソル変更のボタンを押したら、カーソル置き換えを擬似的に行うため、まずはマウスカーソルを消す

(3)cursor = _root.attachMovie("pen_cursor_Sym","penCursor",1);

リンケージしたペンカーソルのシンボルpen_cursor_Symをインスタンス化して（インスタンス名penCursorとして）、cursorに割り当てる。3つ目の引数はステージ上での深度。

(4)インスタンス化されたカーソルをマウス位置へ

カーソルをマウスの位置へ移動。消したカーソルの代わりに、マウスに追従して動かしカーソルのように見せる。

(5)、(6)カーソル変更後、マウス動くたびにカーソル追従

カーソル置き換え後、マウスが動くたびにカーソルを追従させるため、onMouseMoveイベントに関数割り振り。イベントのたびに、カーソルの座標をマウスの座標とする。

(7)updateAfterEvent();

updateAfterEventでフレームレートに関係なく画面を更新。滑らかな動作が可能に。

ペンを動かしてみ？

というわけで、完成ー

今回のエントリは、ボタンを押すとカーソルが変わる部分だけです。線を描くところは次回以降に。

お絵かきツール？

色変えれるとか、消しゴムとか、使えるようになると楽しいかな？ｗ
あとは、全消去ボタンとか、マウスカーソル元に戻すとかも必要かな？
いろいろ試してみようと思う。

次回以降

• 今回作った、線の描き方をまとめ。
• キーボードの入力受け取り。
• 音を鳴らしてみる。
• 外部ファイル管理をしよう。
• プログレスバーを作ろう。

などなど。

よく使うものは、ActionScriptのライブラリとかにしようかな。

参考

• Design Bible FLASH制作工房 - 石原修一・岡村健一（著）

ヒトに頭を乗せてあげよう。
ドラッグ＆ドロップと、ドロップ先へスナップをしてみる。

グラフィックの準備

今回は、ヒトの体と、頭を二つ用意。それと今回は、頭を乗せたい位置に、透明なオブジェクトを用意。頭をそこにドロップすると、スナップ（吸い付くように固定）させるようにする。

それぞれインスタンス名をbody,head1,head2,head_hitとする。
また、head_hitは、選択して「プロパティ」の「カラー」を「アルファ」モードにして、値を0％にする。（透明にして見えなくする。）図ではわかりやすく色をつけてるだけ。

スクリプト書き書き

//------------------------------
//各種宣言
//------------------------------
//ムービークリップ宣言
var head1:MovieClip;		//(1)
var head2:MovieClip;		//(1)
var body:MovieClip;		//(1)
var head_hit:MovieClip;		//(1)

//イベントへ割り振り
//head1
head1.onPress = StartMove1;	//(2)
head1.onRelease = StopMove1;	//(2)
//head2
head2.onPress = StartMove2;	//(2)
head2.onRelease = StopMove2;	//(2)

//------------------------------
//メソッド
//------------------------------

// head1 ------------------------------
//head1の移動開始
function StartMove1()
{
	//head1の中心をマウス位置へ。
	//こうすることでオブジェクトの真ん中を持つことになる。
	this._x = _xmouse;	//(3)
	this._y = _ymouse;	//(3)
	//ドラッグ開始
	this.startDrag();		//(4)
}
//head1の移動終了
function StopMove1()
{
	//ドロップ先のオブジェクト取得
	var target  = eval(this._droptarget);	//(5)
	//ドラッグ終了
	this.stopDrag();			//(4)

	//ターゲットにドロップされたなら..
	if(target==head_hit){			//(5)
		//ターゲットと同じ座標へスナップ
		this._x = target._x;		//(5)
		this._y = target._y;		//(5)
	}
}

// head2 ------------------------------
//head2の移動開始
function StartMove2()
{
	this.onEnterFrame = Move2;	//(6)
}
//head2の移動終了
function StopMove2()
{
	delete this.onEnterFrame;	//(6)
}
//head2の動き
function Move2()
{
	this._x = _xmouse;	//(6)
	this._y = _ymouse;	//(6)
}

二つの方法でドラッグ＆ドロップを実現

(1)各種変数宣言

ムービークリップを宣言してスクリプトで操作できるようにする。頭をスナップする位置をオブジェクトで判定するため、head_hitも定義。

(2)イベント割り振り

各オブジェクトに、動作開始と終了するイベントを割り振り。
今回は、動作開始はマウスボタン押したとき、終了は離したときになる。head1とhead2は違う方法でドラッグ＆ドロップを実現するため、別の関数を割り振りしている。

(3)オブジェクトをマウス位置へ (head1)

_xmouse,_ymouseはマウス位置の座標（グローバル座標：ステージ上での位置）。オブジェクトの端の方でドラッグ開始でも、マウスとオブジェクト中心の位置が合うようにしている。

(4)startDrag(),stopDrag()

ActionScriptで用意されているドラッグ＆ドロップ実現するための関数。こんなもの用意されてるなんて便利！ｗここらへんでのthisはhead1のこと。（詳しくは、関数を呼び出すオブジェクトのこと)
startDragをすると、次にstopDragが呼ばれるか、別のstartDragが呼ばれるかするまでマウスにオブジェクトを追従させる。

(5)ドロップ先のオブジェクト取得

マウスを放したときに、重なってるオブジェクトを取得。_droptargetプロパティはそのオブジェクトのパスが格納されている。さらにevalでそのパスからオブジェクトの参照を取得。
オブジェクトが無い場合は、undefinedになる。
その後、if(target == head_hit)でhead1とhead_hitが重なっているかを判定。trueなら座標を与えてスナップさせるようにする。

(6)head2は別の方法でドラッグ＆ドロップを実現

ドラッグ開始でhead2のonEnterFrameイベントに関数を割り振ることでフレームごとにマウスに追従するようにすれば良い。ドロップの時にはonEnterFrameに割り振られた関数をdelete

頭を動かしてください。

というわけで、完成ー

ちょっと問題が。。

head2を早く動かすと。。
うまく追従しないことがわかる。フレームごとの動作なので、フレームレートより早い動きにはどうしても付いていけないということ。

head1はhead2よりも滑らかに動く^^
でもまだちょっとぎこちない。。方法はありそうなので調べてみましょう。

次回以降

• キーボードの入力受け取り。
• 音を鳴らしてみる。
• 外部ファイル管理をしよう。
• プログレスバーを作ろう。

などなど。

参考

• Design Bible FLASH制作工房 - 石原修一・岡村健一（著）

JavaScriptの全てのオブジェクトには、hasOwnPropertyというメソッドが定義されている。

var Class = function(){}
Class.prototype = {
	hoge : 'piyo'
};
var obj = new Class();
alert(obj.hasOwnProperty(`hoge`));//(1-1)false
obj.hoge = 'fuga';
alert(obj.hasOwnProperty(`hoge`));//(1-2)true

hasOwnPropertyを使うと、そのオブジェクトにメンバがあるかどうかを返す。
(1-1)の時点では、obj.prototypeにプロパティhogeがあるだけで、objには無く、(1-2)ではobjにhogeがあるのでtrue。
この例だと最終的には、objにもobj.prototypeにもhogeがあるということ。

new演算子の動き

なんかちょっとわかりやすいのみつけたのです。
prototype図示とnewの挙動 - web newbie
からたどって。。
JavaScriptのnew演算子の意味 - Days on the Moon
ここらから引用と自分なりに勉強して書かせていただきました。っと、このあたりを見つけたので今回のエントリ書けたです。感謝。

prototype指向はこうするとわかりやすい！ - web newbie

• 1:prototypeとオブジェクトの関連を図でイメージする。
• 2:newの挙動を把握する。

new演算子の挙動 - Days on the Moon

JavaScript における new 演算子の動作は大まかにいって以下のとおりである。(new F() とした場合。)

• 1:新しいオブジェクトを作る。
• 2:1 で作ったオブジェクトの [[Prototype]] 内部プロパティ (__proto__ プロパティ) に F.prototype の値を設定する。
  • F.prototype の値がオブジェクトでないのなら代わりに Object.prototype の値を設定する。
• 3;F を呼び出す。このとき this の値は 1 で作ったオブジェクトとし、引数には new 演算子とともに使われた引数をそのまま用いる。
• 4:3 の返り値がオブジェクトならそれを返す。そうでなければ 1 で作ったオブジェクトを返す。

ここで「オブジェクトである」というのはプリミティブ値 (文字列、数値、真偽値、undefined 、null) ではないということだ。
new String("string") 、new Number(123) 、new Boolean(true) はオブジェクトだが "string" 、123 、true はオブジェクトではない。

というわけで。。

コード見ながらnewの動きを整理

var Class = function(){}
Class.prototype = {
	hoge : 'piyo'
};
var obj = new Class();		//(2-1)
alert(obj.hasOwnProperty(`hoge`));	//(2-2)false
obj.hoge = 'fuga';			//(2-3)
alert(obj.hasOwnProperty(`hoge`));	//(2-4)true

• 1: (2-1)でnewすると、新しいオブジェクト{}を作る。
• 2: 作ったオブジェクトの__proto__にClassのprototypeが格納している参照を格納。

  ここでClass.prototypeがオブジェクトでないなら、Object.prototype(の参照)を格納。ここではClass.prototypeはオブジェクト{hoge:'piyo'}なのでこれの参照を格納する。

• 3: 関数Class()を呼び出し。

  ここでthisには新しく作ったオブジェクト{}への参照が格納される。newした時に与えられた引数でClass()を実行

• 4: 全てが終わったら、newはオブジェクト{}への参照を返す。

という感じ？

prototypeと__proto__は分けて考えたほうが良いらしいです。前者は関数オブジェクトの雛形。後者は作られたオブジェクトが実行時に参照するときのもの。なるほど。（なので、上でobj.prototypetと書いてたのは、obj.__proto__と記述したほうが良いのかな。）

図で示すとわかりやすいprototype

こんなコード。ほげほげうるさいけれど我慢ｗ

var Class = function(){};

Class.prototype = { prop : 'hogehoge' };
var hoge = new Class();			//(3-1)
alert(hoge.prop);		//hogehogeと出力

Class.prototype = { prop : 'piyopiyo' };
var piyo = new Class();			//(3-2)
alert(piyo.prop);		//piyopiyoと出力

var fuga = new Class();			//(3-3)
Class.prototype = { prop : 'fugafuga' };
alert(fuga.prop);		//(3-5)piyopiyoと出力
fuga.__proto__.prop = 'piyofuga';

alert(hoge.prop);		//hogehogeと出力
alert(piyo.prop);		//piyofugaと出力
alert(fuga.prop);		//piyofugaと出力

の、オブジェクトの様子を図示してみた。

黒線がnewによるオブジェクトの作成。各色の線が各参照先を示す。数字はオブジェクト作成やチェーンが作られる順番。

(3-1)でvar hoge作成時に、Class.prototypeが指しているのは、{ prop : 'hogehoge' }で、hoge.__proto__はこれを参照する。
var piyoも同様(3-2)

ここで、var fugaの作成時(3-3)に、Class.prototypeが指しているのは{ prop : 'piyopiyo' }のままなので、fuga.propは'fugafuga'でなく、'piyopiyo'となる(3-5)ということ。
（(3-4)で{ prop : 'fugafuga' }を作っているが、これを参照するつながりはできていない。）

その後、fuga.__proto__.propの値を変更すると、{ prop : 'piyopiyo' }オブジェクトのpropプロパティを変更することになる。すると、fugaだけでなく、piyoの__proto__も同じオブジェクトを指しているので、piyo.propも'piyofuga'になる。ということ。

ちなみに、(3-4)でClass.prototypeは{ prop : 'fugafuga' }を参照するようになるが、このあとnewでオブジェクトが作られないかぎり{ prop : 'fugafuga' }を__proto__で参照するオブジェクトは存在しないことになる。
大事なのは、{}も、(どこかよくわからん場所に作られる名前の無い）オブジェクトなんだということか。

だいぶわかってきた！

でも、サンプルコードがわかりにくかったか。。あとは実践だな。

参考

• prototype図示とnewの挙動 - web newbie
• JavaScriptのnew演算子の意味 - Days on the Moon

(勝手に)参考にさせていただいてありがとうございます。

上にあるようなのを作ります。
ActionScriptで結構簡単にできちゃう。

グラフィックの準備

ヒトの絵(以下グラフィック)を準備する。
頭と体の2種類をFlashで読み込んで、それぞれシンボル化

スクリプト書き書き

前回作ったボタンを追加。さらにメインのシーンの同じフレームに、頭と体のシンボルをドラッグ＆ドロップでインスタンス追加。
体に頭をくっつけるように配置。ぺたっ。（初期位置）

そいえばアクションの書き方前回やってない。。ので少しだけ。
「ウィンドウ→アクション」でアクションのパレットを表示。
その状態でタイムラインのフレームを選択すると、パレットの名前が「アクション - フレーム」となりフレームにスクリプトががしがし書けます。
自分で手でコーディングするときは、アクションパレットの右上のほうのオプションで、ノーマルモードからエキスパートモードに。

というわけで、インスタンス追加したらさらに同じフレームに以下のアクションを追加。

//------------------------------
//各種宣言
//------------------------------
//ムービークリップ宣言
btn1:MovieClip;		//(1)
head:MovieClip;		//(1)
body:MovieClip;		//(1)
//移動速度
var movestep = 3;		//(1)
//頭の初期位置記憶
var start_x = head._x;	//(1)
var start_y = head._y;	//(1)

//イベントへ割り振り
btn1.onRelease = btnUp;
btn1.onPress = btnDown;

//------------------------------
//メソッド
//------------------------------

//ボタン離したあと
function btnUp(){
	btn1.upbtn();		//ボタン自体の動作
	if(!this.onEnterFrame){
		this.onEnterFrame = moveHead;	//(2)
	}else{
		delete this.onEnterFrame;	//(3)
		movestep = 3;			//(4)
		head._x = start_x;	//(4)
		head._y = start_y;	//(4)
	}
}

//ボタン押した瞬間
function btnDown()
{
	btn1.bottombtn();		//ボタン自体の動作
}

//頭の動作
function moveHead()
{
	movestep ++;		//(5)
	head._y -= movestep;	//(5)
}

ひとつひとつ説明を

(1) 各種変数宣言

ムービークリップを宣言してスクリプトで操作できるようにするとか、ボタンもう一回押したら元に戻したいので初期位置の記憶とかしてます。

(2) this.onEnterFrame = moveHead;

this（ここではthisはメインのステージを指す）のonEnterFrame（フレームレートごとに呼ばれるイベント）に、headを動かす関数を割り当て。こうすると、ボタンを押した後にheadが動いていく。

(3) delete this.onEnterFrame;

もう一度ボタンが押されたら、ムービー停止して初期位置に戻したいので、onEnterFrameに割り当てた関数をdelete。それ以降はまたボタンが押されない限り動かないようにする。
ボタンが、スタートかストップかの判定はonEnterFrameに関数が割り当てられているかで判定してる。（この判定がいいのかどうかは不明。動いてるからいいかｗ）

(4) リセット

ムービーが始まる前に予め記憶した値でリセット。ムービーを最初に戻す。

(5) headを動作させる

加速度を持った動作。headのy座標をデクリメント（yは下方向が正なので、上方向へ動かす場合はマイナスで）
そいえば言い忘れてたけれど、_yとか_xはMovieClipクラスのメンバ(ビルトインクラス:すでにActionScriptのほうで定義してあるクラス)で、ムービークリップの座標を操作したり、取得したり。
この関数をonEnterFrameに割り当てることでフレームレートごとに動作するようになる。

ボタンぽちっと動作確認。

というわけで、完成ー

次は。。

Flashでドラッグ＆ドロップをしてみよう。結構簡単らしいよ。

参考

• FLASHRAVE
• Design Bible FLASH制作工房 - 石原修一・岡村健一（著）
• FLASH-FACTORY - Flash-Workers（著）
• プロが教えるFlashアイデア工房 - MdN Mook

３Ｄデータのファイルっていろんなフォーマットがある。いろいろ勉強中。
普段は3次元空間上のx,y,zの点郡データをそのままテキストで書くだけでできるobjファイルというフォーマットを使ってます。
３Ｄの世界ではよく使われてるのかな？

フリーであります。

なんか重いページだ。。
Rapidform Free Viewer(だったかな？)へ頑張ってたどってください。

３Ｄデータを見るだけで加工はできませんが、まぁ見るだけなら。
点の距離とか断面とか見れます。
objファイル読み込み可能。

とりあえずサンプル

# sample.obj

v	-1.0	-1.0	1.0
v	1.0	-1.0	1.0
v	1.0	1.0	1.0
v	-1.0	1.0	1.0
v	-1.0	-1.0	-1.0
v	1.0	-1.0	-1.0
v	1.0	1.0	-1.0
v	-1.0	1.0	-1.0

f	1	2	3	4
f	1	4	8	5
f	2	1	5	6
f	3	2	6	7
f	4	3	7	8
f	5	8	7	6

をエディタで書いて、sample.objとかいった感じでファイル名つけて保存。 Rapidformを起動して、ファイルオープンすると見れる。

こんな感じ

objファイルフォーマット

v x y z w
頂点データ

各頂点の3次元座標値を表す。4つ目のwは。。4次元？(省略可)

f v1 v2 v3 v4
面データ

面を構成する点を選ぶ。
たとえば「f 1 2 3 4」だったら頂点データの1番目、2番目、3番目、4番目(省略可)の点を結んで面を作る。といった感じ。
点を3つしか選ばなければ、3角形の面。4つ選べば3角形2枚使って自動で四角形の面を描いてくれる。

#
コメント

#以降その行はコメントアウトされる。
ソフトウェアによっては必要な情報を書き込んだりすることも。ソフトの仕様による。
Rapidformでは無くても関係ないです。

まだまだobj

点と面だけでなく、テクスチャとかも貼れます。また後日。
他には線とか、曲面とかもできるらしいけれど、Rapidformのビューワで扱うのはできないみたい。

そのた

久しぶりにShade使おうかなぁ。objファイル読めるらしい。

参考

objファイル仕様 リファレンス（English）

• obj_spec [pdf]
• OBJ (テキスト)

上にあるようなのを作ります。
これのためにIllustratorでヒトを描いたｗ（そちらのほうが時間かかってますｗ）
Macromedia Flashの使い方もなかなか難しいのでそこの勉強もしながら。。
とりあえずまずはボタンだけつくってみましょー。

ボタンの準備

ボタンの絵(以下グラフィック)を準備する。
押す前と押してへこんでるグラフィックの2枚を用意。
グラフィックごとにIllustratorからswf形式でファイルへ書き出し。Macromedia Flashで同ファイルを「ファイル→読み込み」するとできる。
Illustratorから直接コピペしてもできる時あるけれど、あまり複雑なグラフィックだとうまくいかないことが多い（汗）ので注意。特に文字とか。

タイムラインと関数の設定

Flashを起動すると、シーンの真っ白キャンバスが出てくる。これがメインの画面で、ここにシンボルを追加していってムービーを作り上げます。プログラミングの「オブジェクト指向」みたいな感じ？
まずは、「シンボル」の作製。これは「クラス」かな？

メニューの「挿入→新規シンボル」で「ムービークリップ」を作ります。名前はお好きに。
そこで出てきたキャンバスに、2フレーム準備して、準備した2枚の絵を例の「読み込み」でそれぞれフレームに分けて配置。どちらもキャンバス上で中央の同位置に配置する。（下図レイヤー１）
各フレームの長さが長くしてあるのは各フレームのラベル(upとかbottomとか)を見やすくするためなので各1フレームずつで十分です。

レイヤー２のアクションに、

function bottombtn(){
	gotoAndPlay("bottom");	
}			//(1-1)
function upbtn(){
	gotoAndPlay("up");	
}			//(1-2)

と、いよいよActionScriptを書き込む。

bottombtn()を呼び出すと、フレームラベル"bottom"へ移動。各フレームの開始にはstop();で止まるようにしてある(レイヤー３)ので、ボタンがへこんだグラフィックを表示して止まるようになっている。
同じくupbtn()を呼び出すと、フレームラベル"up"へ移動。ボタンの押す前のグラフィックを表示して停止。

ちなみに、フレーム"stop_up"と"stop_down"には、

stop();

だけ記述。

これでボタンのシンボルが完成！

イベントの設定

最初のシーンに戻って、ここに作ったシンボルを追加していきます。

「ウィンドウ→ライブラリ」を押すと、ライブラリのパレットが出てきて、先ほど作ったシンボルがリストにできてる。 そこからシーンのキャンバスへドラッグ&ドロップすると、シーンにシンボルが追加されて、ムービー上に見えるようになります。どんどんたくさん追加できます＾＾

プログラミングで言えばクラスからインスタンスを作るのと同じ？1つのクラスからたくさん同じようなオブジェクトができる！
シンボルから作られたこれも同じく「インスタンス」と呼びます。作ったインスタンスの「プロパティ」から名前をつけます。ここでは"btn"にしましょう。

レイヤーを追加して、新しいレイヤーの同じフレーム位置に以下のスクリプトを記述。

//ムービークリップ宣言
var btn:MovieClip;		//(2-1)

//イベントへ割り振り
btn.onRelease = btnUp;	//(2-2)
btn.onPress = btnDown;	//(2-3)

//------------------------------
//メソッド
//------------------------------

//ボタン離したあと
function btnUp(){
	btn.upbtn();	//インスタンス"btn"のupbtn()を呼び出し
}				//(2-4)

//ボタン押した瞬間
function btnDown(){
	btn.bottombtn();	//インスタンス"btn"のbottombtn()を呼び出し
}				//(2-5)

ひとつひとつ説明を。
(2-1)でキャンバスに作ったインスタンスをActionScriptで制御できるように宣言。ただのグラフィックでなく、ムービー動作するのでMovieClip型(クラス)で宣言。

(2-2)(2-3)はイベントへ関数を割り振りしています。
MovieClipなどのクラスは、イベントハンドラというものをもっており、たとえばMovieClip.onEnterFrameは設定フレームレート時間ごとに処理される。MovieClip.onPressはインスタンス上でマウスボタンが押されたら処理される。など。
このイベントハンドラに実際の処理を定義した関数を割り振った。

(2-4)(2-5)はイベントハンドラに渡す処理関数の定義。

これでボタン押すたびに処理してくれます。

ボタンをぽちっとな

というわけで、作ったボタン。

押している間だけへこむ。とまぁ、これだけです＾＾

実は。。

シンボルのタイプに「ボタン」っていうのがあって、それ使うと簡単にボタンが作れます。なんと。
イベントの取得の仕方も他にやり方あるのでそっちも勉強しよう。。
え、ActionScriptにもprototypeとかあるの！？

参考

• FLASHRAVE
• Design Bible FLASH制作工房 - 石原修一・岡村健一（著）
• FLASH-FACTORY - Flash-Workers（著）
• プロが教えるFlashアイデア工房 - MdN Mook

空のクラスを作る。

var Class = function() {};	//(1-1)
function Class() {};		//(1-2)

二通りの書き方だけれどやってることは同じ。で、これって関数じゃん？

空じゃないクラスを作ってみる。

2次元の点を表すPointクラス

var Point = function(_x,_y){
	this.x = _x,
	this.y = _y,
	this.DisplayPoint = function(){
		alert(this.x+','+this.y);
	}
};	//(2-1)

function Point( _x, _y ) {
	this.x = _x;
	this.y = _y;
	this.DisplayPoint = function(){
		alert(this.x + ',' + this.y);
	};
	return this;
};	//(2-2)

こちらも書き方二通り((2-1),(2-2))。もっといろんな書き方ありそう。
ここまできて、あぁこれってクラスのコンストラクタか！と気づいた。確かに関数。コンストラクタで初期化することが、クラスからオブジェクトを作るっていうこと。
newして新しいオブジェクトを作るということに納得。引数も与えられます。(3-1)

var position1 = new Point( 10, 20 );	//(3-1)
var position2 = new Point( 150, 230 );	//たくさん作れる！
position1.DisplayPoint();		//'10,20'を表示 (3-2)
position1.DisplayPoint();		//'150,230'を表示 (3-3)

このときのthisはPointでなく、それぞれposition1、position2に渡され、そのオブジェクトを指す。
クラスを使えば同じプロパティを持つオブジェクトをたくさん簡単に作れる。

プロトタイプ prototype

JavaScript特有の難しいところ＾＾
ここでは箇条書きのメモ程度に。。

• オブジェクトは全てprototypeプロパティというものを持っている
• 特に指定せずにオブジェクトを作ったときにはprototypeにはデフォルト指定される。
• オブジェクトのあるプロパティにアクセスしようとして、プロパティが無ければprototypeに無いかどうかを暗黙に参照する
• prototypeにプロパティを自由に追加 / 代入できる

prototypeはオブジェクトの雛形。という説明をちらほら見るけれど、よくわからないです。。

プロトタイプによる初期化

コンストラクタでない、オブジェクト初期化方法。
とりあえずやってみる。

var Point = function( _x, _y) {
	this.x = _x;
	this.y = _y;
};	//(4-1)
var position1 = new Point( 10, 20 );	//(4-2)

Point.prototype = {
	DisplayPoint : function() {
		alert(this.x + ',' + this.y);
	}
};	//プロトタイプによる初期化 (4-3)

var position2 = new Point( 10, 20 );	//(4-4)

position1.DisplayPoint();		//未定義！(4-5)
position2.DisplayPoint();		//'10,20'を表示(4-6)

もうすでに定義してあるクラスのコンストラクタに新しく定義を追加するイメージ。なのかな？

クラスに定義するのと、オブジェクトのプロトタイプに定義するのとは微妙に(だいぶ？)違う。指定する名前がクラス内に無ければ、prototypeを暗黙に参照する。
なので、プロパティにアクセスするとき、クラス内にもprototypeにも同じ名前のプロパティがある場合はクラス優先。という風にアクセスする順番がある。このことは後のプロトタイプチェーンのときに重要。

newでオブジェクトが作られるときに、そのクラスのプロトタイプを参照して、そこからプロパティやメソッドを継承する。
逆に言えば、クラスからオブジェクトがnewして作られる前にプロトタイプに格納しないとそのオブジェクトでは定義されていないので注意。(4-5)

プロトタイプチェーン

オブジェクトのプロトタイプには、オブジェクトを代入することができる。
というか、prototypeプロパティもオブジェクトなのでprototypeも内部にprototypeを持っている。というわけのわからないことに。。

このことを利用して、プロトタイプチェーンという不思議なことができるらしい。

var Class1 = function(){
	this.Func1 = function(){
		alert('Func1');
	};
};				//(5-1)

var Class2 = function(){
	this.Func2 = function(){
		alert('Func2');
	};
};				//(5-2)

Class2.prototype = new Class1();	//(5-3)
var test = new Class2();		//(5-4)

test.Func1();	//'Func1'を表示(5-5)

(5-4)でtestはClass2のオブジェクトなのに、(5-5)で、Func1()が正しく実行できます。
"プロパティが無ければprototypeを暗黙に参照する。"ので、

Class2 → Class2.prototype(= Class1 )

というふうに「チェーン」したようなつながりの関係ができる。
このプロトタイプチェーンは、「クラスの継承」みたいなものだな。

目的のプロパティがClass1にも無い場合はさらに、Class1→Class1.prototypeと探していく。ここでClass1.prototypeには特に指定していないので、Objectというものが（暗黙的に）指定される。全てのオブジェクトは最終的に、Object(クラス)に行き着き、Object.prototypeはnullで終わりになっている。
Objectまで探して見つからなければそのプロパティは未定義ということになる。

全部書くと、
Class2 → Class2.prototype (= Class1 ) → Class1.prototype (= Object ) → Object.prototype (= null )
という感じの継承になってる。

prototypeはもっと勉強しよう

この1回で終わらせるつもりが、なんかまだ良くわかってないのでprototypeについてまた別途勉強していこう。
次回以降予定予定
さらにprototype
newについて
イベント処理しよう
prototype.jsを使おう

その他

FireBugを導入した。すごく便利。

参考

• 入門Ajax 増補改訂版 - 高橋登史朗（著）
• JavaScriptを洗練させるPrototype.js - Think'IT -
]]> tag:color-chips.net,2007:/exp_note//9.174 2007-05-13T12:13:28Z 2007-05-17T00:13:37Z
JavaScriptにおけるオブジェクト指向についてまとめまとめメモメモ。...
まさ http://color-chips.net/ JavaScriptにおけるオブジェクト指向についてまとめまとめメモメモ。
]]> 空のオブジェクト作成

var person = {};			//(1-1)
if(!person) var person = {};		//(1-2)
var person = window.person || {};	//(1-3)

(1-1)で、これでオブジェクト作成。
また、名前空間の衝突を避けるために、(1-2)とか、(1-3)とかみたいにすると、すでにその名前空間が存在するかどうかを確認してくれて、不用意な上書きされずに済む。

オブジェクトのプロパティ

var person = {
	name : 'someone',
	MyName : function(){
		alert(this.name);
	}
};			//(2-1)

alert(person.name);	//(2-2) 'someone'を表示
person.NyName();	//(2-3) 'someone'を表示

(2-1)のようにして、オブジェクトにプロパティを定義。
(2-2)、(2-3)は同じ結果になります。
.(ドット)でオブジェクトのプロパティにアクセスできる。
また、thisポインタみたいなことができる。
ここら辺は普通。

プロパティの追加

なんか途中でプロパティを追加できるらしい。ここら辺から不思議でよくわからなくなってくる。。

person.age = 20;	
person.MyAge = function(){
	alert(this.age);
};			//(3-1)

person.MyAge();		//(3-2) '20'を表示

実行中に定義を追加するとか不思議な感じだけど、ここら辺はまだなんとかわかる。
(3-1)の結果、(3-2)で新しくプロパティが追加されたのがわかる。

オブジェクト2つ考えてみる

(4-1)のように、オブジェクトdogを新しく追加する。

var dog = {
	name : 'hana',
	age : 5
};			//(4-1)

person.MyName();	//(4-2) 'someone'を表示
person.MyAge();		//(4-2) '20'を表示
dog.MyName = person.MyName;	//(4-3)
dog.MyAge = person.MyAge;	//(4-3)
dog.MyName();		//(4-4) 'hana'を表示
dog.MyAge();		//(4-4) '5'を表示

(4-3)で関数を代入するなんて不思議なことしてます^^
関数をオブジェクトとみなしてこういうことができるらしい。。確かに定義するときもfunction()が付いてるだけで他のプロパティと似てる。
JavaScriptでは関数もオブジェクトとみなして、関数オブジェクトって言うらしいです(そのまんまｗ

関数の実装は同じだけれど、thisで指されるものがオブジェクト(personとdog)ごとに違うので結果が異なってくる。( (4-2)と(4-4) )

まだまだつづくよ

JavaScriptって同じコトやるのにいろんな書き方あるからまとめないと。。むむ。早く動かせるもの作りたい(＞＿＜；)

次回以降予定。
JavaScriptのクラスについて。
prototypeチェーンについて。
prototype.jsを使おう。
イベント処理しよう。

参考

• 入門Ajax 増補改訂版 - 高橋登史朗（著）
• JavaScriptを洗練させるPrototype.js - Think'IT -
]]> tag:color-chips.net,2007:/exp_note//9.172 2007-05-12T12:56:07Z 2007-05-27T16:28:31Z
その１から少し時間あいてしまった（汗 ここでは少し残してた注意点を。 ...
まさ http://color-chips.net/ その１から少し時間あいてしまった（汗
ここでは少し残してた注意点を。
]]> グレースケール画像とカラー画像について

主にグレースケール画像(モノクロ画像)として(BITMAOPINFOHEADERのbiBitCountの値が)8bit、カラー画像として24bitの画像を使います。
。。というよりこの2種類の画像しか扱ったことが無い(汗)ので、この二つを例にしますｗ

グレースケール画像とカラー画像とは扱い方が少し違います。正確にはbiBitCount=8以下と16以上での扱いが違い、少し面倒な点も。
biBitCount=8以下の画像では、カラーテーブルが存在し、画像データの各ピクセルの数値がカラーテーブルの番号を示します。
biBitCount=16以上の画像では、カラーテーブルが無く、画像データの各ピクセルの数値そのものが色を示します。



たとえばbiBitCount=24の画像(以下24bit画像)では8bit(=1Byte)でそれぞれR,G,Bの輝度(0～255)を示し、3Byteのデータで1つのピクセルを示すことになり、



biBitCount=8の画像(以下8bit画像)では1Byteで1つのピクセルを示し、この場合は予め用意されたカラーテーブルの番号が格納されている。

BITMAPFILEHEADERのbfOffBitsについて

その１で後回しにしたBITMAPFILEHEADERのbfOffBits(画像ファイルの先頭から画像データ領域までのオフセット)について。

カラーテーブルを用いている場合、画像データまでにカラーテーブルを書き込む領域があるのでその分オフセットを考慮しなければいけない。(これ書いているうちに自分で作った処理が間違っていることに気づいた（汗）
つまり、8bit画像では、
bfOffBits=sizeof(BITMAPFILEHEADER)+sizeof(BITMAPINFOHEADER)+sizeof(RGBQUAD)*256 = 1078
24bit画像では、
bfOffBits=sizeof(BITMAPFILEHEADER)+sizeof(BITMAPINFOHEADER)= 54
となる。
(biBitCount=16以上では常にbfOffBits=54,biBitCount=8以下ではカラーテーブルのサイズによってbfOffBitsの値は変わることになる)

カラーデータの配置

最後にもう1つ注意点として、24bit画像の図からもわかるように、色のデータは常にB(青),G(緑),R(赤)の順番になっている。(※R,G,Bの順番で無いことに注意！)
グレースケール画像では気づかないけれど、カラー画像だとこの色の順番を間違えると全然違う画像になったりするので注意を。

というわけでこの仕様どおりにメモリ確保＆ファイル読み込み、格納すればOK
ここまでできれば画像処理の準備万端ｗ心置きなく処理ができます(笑)

参考

• Visual Basic ＆ Visual C++による デジタル画像処理入門 - 酒井幸市(著)
• Windows bitmap - Wikipedia -
• ビットマップファイルの構造 - Tips of VC++ -

その３へ？

まだ見落としてる点がありそう。。(汗
まだまだ勉強していきます。画像処理技術のまとめもしていきます。

]]> tag:color-chips.net,2007:/exp_note//9.167 2007-05-03T10:00:50Z 2007-05-07T21:15:46Z
cssの勉強にと参加しました。 画像の使用を極力控えてかっこいいCSSデザインを...
まさ http://color-chips.net/ cssの勉強にと参加しました。
画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会
エディタとブラウザ(Firefox)を開いてカタカタとコーディング。3時間程度で作りました。細かいところは気にせず（汗）
作ったのがそのうち公開されるはずｗ
こちら↓に掲載させていただいております
color-chips.net Style
やってて気づいたことなどを。
]]> 正しい文書構造に素直に従ったcssを組むとcssハックが少なく済む

今回はhtmlがもう決められていたので楽でした(しかも自分で組むのと違って綺麗な文書構造。勉強になります)。css組むだけｗ
実際組むときはブラウザごとにcssの解釈が違うので(みんな独自にわがままにブラウザ作ってるのでここが面倒なところ。)、cssハックに大変時間がかかる(汗)
普段Firefoxで見ながら全部タグ手打ちで組んで、IE6で時々確認。ハッキング。の繰り返しで作ってます。他のブラウザは。。ははｗ
でも、今回cssハックが少なく。というよりぜんぜんやってなく、でもFFでもIEでも同じように見れました。正しい文書構造にしたがって素直なcss組むとこうなのかなー。と。

初めてエラスティックレイアウトにしてみました

「エラスティック(elastic)レイアウト」：伸び縮みするレイアウト。(ブラウザによって)文字サイズが変わっても、全体のレイアウトが崩れないようなWebデザインのこと。らしいですｗ(知らなかった)
普段は「固定幅レイアウト」(ボックスのサイズなどをかっちり固定値指定のデザイン)しかしてなかったので勉強にと挑戦しました。見やすくて結構いいかも。
使い分けできるといいと思った。動かしたくないところはpx単位で指定して、文字サイズ等々でレイアウト崩したくないところはem単位やex単位で指定。といった風に。
ちなみに「リキッドレイアウト」なんてものもあります。ブラウザのウィンドウサイズによって変更されるレイアウト。この場合は%単位で値を指定。ウィンドウの真ん中に表示させたいとか、中央そろえとかに使いますな。

参考

• Web標準の教科書- XHTMLとCSSで作る"正しい"Webサイト - 益子貴寛(著)
• 画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会
]]>