Posts Tagged ‘Clock’

取材記と見せかけて

火曜日, 9 月 1st, 2009

ダウト。見せかけてって自分で最初からバラしてますけど。
-2009/9/2追記-作例のFlashが見られなかったのは、kenbundenをkebundenと間違えていたから+ブログ名指定(Fumiaki_KUBOTA)をしないとアップロードディレクトリにアクセスできないから、でしたorz
objectタグの対応状況も知りたいので、時計が見られなかったとか、時計が動いていないとか気付かれた方は、是非ブラウザなどの環境情報と共にコメント欄に書き込んでください。参考にします。
あ、あとコメントに何箇所かウソ書いてたのに気付いたので直しました。

取材記はこの次に来る予定です。…予定です。
一応、例の記事で宣言したとおり、今まで交互に書くのを何とか維持しているので、折角だから続けよう。
今回はFlashに手を出しました、って話です。タイトルからは欠片も読み取れませんが。
内容と関係ないタイトルをつける癖(?)はどうにかした方がいいと思うよ、自分。
真・タイトルはMTASCで始めるActionScript2.0とでもして置きましょうか。

目次

  1. 言わずと知れたFlash
  2. 微妙にマイナなActionScript
  3. MTASC
  4. 作例
  5. 気付いたこと&参考ページ等

言わずと知れたFlash
えー言わずもがなですが、皆さんAdobe Flash Playerはご存知かと思います。
ご存知、ないのですか?コレですよコレ。
皆さんもゲームとかゲームとかゲームとか、Youtubeとかニコニコ動画とか、時々アップローダとか、お世話になってると思いますが、そんな技術の話です。
ゲームばっかりだな。でもリンクしたサイトはお勧めなので、遊んでみてね(オイ)。
その昔はMacromedia Flash Playerと言いまして、Macromediaという会社が扱っていたのですが、今は昔の話です。
正確にはFlashは動画規格とそれを作るためのソフト、Flash Playerが動画を再生するためのソフト、なんですが、あんまり区別しませんね。

微妙にマイナなActionScript
そのFlashの中で、処理手順なんかを記述するためのスクリプト言語がActionScriptな訳です。
Flashは有名だけれどもActionScriptとなるとグンと知名度が下がりますよね。Google先生に拠れば、Flash->17,200,000件に対してActionScript->1,880,000と検索結果が一桁違いますね。
ベクターデータをアニメーションさせる機能と、それをボタンのように扱って次の処理を行う機能が組み合わさることで、Flashは非常に高い表現力を実現している訳ですねー。
その処理を記述するための言語がActionScriptで、ECMAScriptの拡張なので、JavaScriptの親戚と言って良いでしょう。実際瓜二つです。
とはいえ、大分違う所もあります。当然ながらグラフィック関連とか(JavaScriptの場合は基本的にグラフィカルな機能はありませんので)。
どちらにしろ、このテの言語にあまり馴染みがないので戸惑う所は多々ありますが…。
単純な処理能力は十分すぎるほどあるようです。しばしばASと略されますが、某陸戦用機動兵器とは無関係です。多分。

MTASC
普通、FlashはAdobeのAdobe Flash CS3とかCS4なんてソフトを使って作ります。
とは言えFlashの仕様は公開されているので、そこまでメジャーではないもののFlashを作成するためのツールはAdobe以外からもリリースされています。
Windows限定で良ければParaFla!とかSuzukaが開発者が日本人(つまり主要なドキュメントが日本語!)、完全フリーといった理由で日本では割とメジャーだと思います。
これらはGUIベースの開発環境で、どちらかと言えばAdobe Flashを触ったことがある人が乗り換えるような使い方を意図して開発されていると思われます。
それに対して、CUIのActionScriptコンパイラのMTASC(Motion-Twin ActionScript 2 Compiler)つーものがありまして、私はこちらを使い始めた所です。
なんていうか、やっぱりGUIは使い方を覚えるだけでも一苦労な面があるので、今回は(も?)敢えてCUIでActionScript入門してみました。
因みに、名前の通りMTASCはAS2.0対応ですが3.0対応ではありません。reademeを見ると、MTASCでAS3.0に対応する予定はないが、3.0相当なhaXeという言語を開発中なので、3.0が利用したい人はそちらをどうぞとのこと。
うーんでも折角だからActionScriptをやりたいじゃないですか。更に新しい言語に手を出すのー?みたいな。
haXe自体は謳い文句を聞く限りかなり魅力的なんだけどね…。かなり。
勿論CUI&ActionScript2.0のみの使い方では、限界も多いので、そこは他のソフトと併用することでカバーしましょう。
swf->XML->swfなんてことができる、swfmillとかそんなソフトもあるらしいです。
声を大にして言いたいのは、「Flashと言えどAdobeにお金を払う以外の選択肢もあるのだ!!!!」という事でしょうか。
Adobeに恨みはありませんが、ポイントは”金”です。…ソフトウェアベンダがどうやって開発費を賄うのかとか冷静に考えると怖くなりますが。
MTASCは特にインストールと言った手続きは必要なく、バイナリを解凍してパスを通せばもう使えます。
こういう手間の掛らないソフトってステキ。当然レジストリにも無痕跡(だと思う)。

作例
実際作ってみたよ、ということで、時計です。何の変哲もないアナログクロック。

でもワタクシ、この埋め込みタグのブラウザ互換性って所でまた詰まったり…。ここを参考に(つーかコピペ)いたしました。
ほんとブラウザブラザーズ(血縁ないだろ)には悩まされてばかりです。ふぅ。
欲しい人がいるか分かりませんが、一応ソース掲載。たったの60行余り。
あ、AS2.0はJavaScriptらしくなく(?)、割と型チェックが厳密です。あとvarは常に要ります。

class Clock{
	private var R:Number=80;//Radious-別にprivateにする意味は全くないんですが、気分の問題です。
	private var x_size:Number=240;//書き出し時のサイズ
	private var y_size:Number=160;
	private var dialPlate:MovieClip;
	private var hands:MovieClip;
	private var PI:Number=Math.PI;//単なる別名
	function Clock(){//コンストラクタ。
		var t = this;
		dialPlate=_root.createEmptyMovieClip('dP',100);//文字盤
		hands=_root.createEmptyMovieClip('h',200);//針-実はここで定義する意味はなかった
		dialPlate._x=x_size/2;
		dialPlate._y=y_size/2;
		setDialPlate(dialPlate);
		var intervalID:Number=setInterval(this,'redraw',500);
	}
	public function setDialPlate(mc:MovieClip):Void{//文字盤を作る。
		mc._visible=false;
		var texts:Array=new Array();
		var tf:TextFormat=new TextFormat('_sans',15,0x000000,false,false,false);
		for(var i:Number=1;i<13;i++){
			texts[i]=mc.createTextField(''+i,10+i,0,0,30,30);
			texts[i]._x=R*0.7*Math.sin(i*PI/6)-((i>9)?10:6);
			texts[i]._y=-R*0.7*Math.cos(i*PI/6)-10;
			texts[i].setNewTextFormat(tf);
			texts[i].text=''+i;
		}
		mc.beginFill(0xcc9966,100);//茶色の塗り色
		mc.lineStyle(5,0x333333,100);//灰色の線色
		mc.moveTo(0.9*R*Math.cos(0),0.9*R*Math.sin(0));
		var cos_N:Number=1/Math.cos(PI/8);
		for(var i:Number=0;i<8;i++){//八分割円の描画
			mc.curveTo(0.9*R*Math.cos((2*i+1)*PI/8)*cos_N,0.9*R*Math.sin((2*i+1)*PI/8)*cos_N,0.9*R*Math.cos((i+1)*Math.PI/4),0.9*R*Math.sin((i+1)*Math.PI/4));
		}
		mc.endFill();
		mc._visible=true;
	}
	public function redraw():Void{//実際に針を描画するヤツ。
		if(hands){hands.removeMovieClip()}
		var hands:MovieClip=_root.createEmptyMovieClip('hands',200);
		hands._x=x_size/2;
		hands._y=y_size/2;
		var now:Date=new Date();
		var h:Number=now.getHours();
		var m:Number=now.getMinutes();
		var s:Number=now.getSeconds();
		var theta:Array=new Array();
		h%=12;//12で正規化…というのだろうか
		theta[3]=h+m/60+s/3600;//PI/6-つまり文字の間隔-を単位とする
		theta[4]=m/5+s/300;
		theta[5]=s/5;
		for(var i:Number=3;i<6;i++){
			hands.lineStyle(7-i,0x000000,100);
			hands.moveTo(0,0);
			hands.lineTo(i*R*Math.sin(PI*theta[i]/6)/8,-i*R*Math.cos(PI*theta[i]/6)/8);
		}
	}
	static function main():Void{//エントリポイント。Clockのインスタンスを作るだけ。
		var c=new Clock();
	}
}
色々と実用性皆無な書き方をしていますね。
あんまり褒められたコードじゃありませんな。

気付いたこと&参考サイト
やーこういう短いコードだと、はっきり言って全くオブジェクト指向の意味ありませんね。
私そこまでOOP好きじゃないし。ある程度より複雑だったり大きかったりすれば確かに便利ですけど。
でもそこまで大きなコード滅多に書きませんしね。
今回は参考文献にAdobeのリファレンスは余り使いませんでした。別にAdobeに含みがあるわけではなく、MSDNもそうですがああいうサイト構成はちょっと見難いと思う。
やっぱり最後はコレを見るしかないのではありますが。
そもそもMTASCに出会う切欠になったのは、この記事です。なんか気まぐれで"actionscript コンパイラ"って打ってみたんですよね。
よく考えれば(るまでもなく)、SuzukaやParaFla!はコンパイラではないわけで…。
所詮Webの世界はテキストベースですから、MTASCって名前が分かるか分からないかで手に入る情報が全然違いますね。
MTASCと入力して一番上に出てくるのがこのサイトですね。サンプルも参考になります。
実質一クラスの極めて限られたコードしかコンパイルできませんが、swf server side compilerなんてものも公開されていますので、お試しにはいいかも。
最も、普通はパス通すだけの方が寧ろ簡単だと思いますが。出先からとか職場のPCでパス変えられなくて不便とか、そう言う時にはいいかも。
最初はいつも通りサクラエディタ使ってたんですが、良いキーワードファイルとかを探せなかったので、偶然見つけたひまわりとサクラで有名な、クジラ飛行机さんのas2editを使っています。御免なさいWindows専用です。
結構便利です。でも検索機能は実質機能してないみたい。設定が足りないか?
ASのサンプルスクリプト類は、こんな所とか、こことかを参考にしました。
ここではビルトインクラスのメソッドとプロパティの一覧がありますが、メニューにはないので、前の記事に戻って見て下さいw
ちょっとしたときに便利です。最も、引数とか分からないので、それは別個に確認する必要がありますが。そういう意味でもas2editを入れて、stdフォルダを指定する方が楽ですね。
順番が逆になりましたが、気付いたこととか。
描画用の関数群なんですが、AS2だと二次Bezierとか直線しか描画できないので、正円ですら近似して描かないといけません。
実験した所、6分割だとまだ不自然ですね。8分割だとかなり拡大しても違和感ないです。これもどっかのサイトに書いてありましたが。
直線や曲線、面それ自体をオブジェクトとして扱う機能はAS2にはありません。多分3でもないでしょう。
MovieClipよりも下の階層については、直接触るAPIは用意されていないようです。
拡大縮小してもジャギーが出ませんので、内部的にはベクトルデータが保持されているに違いないのですが、そのレベルには触れません。
識別子が尽きるからでしょうか…。
そのため、一度書いた線を消すには基本的にMovieClipごと削除するしかない、のはちょっと不便。
やはりアニメーションを提示する、といった使い方を想定されたプログラムだということでしょう。
ある程度まとまった単位で描画や変形、修正を行うことまでしか想定していません。
同一MovieClipに描いた図形は、当然同じ深度(Depth.画面垂直方向にレイヤが積み重なるイメージですね)を持つ訳ですが、実際には新しく描画されたものが単純に上書きしていく、という仕様のようです。
おそらく内部的なDepthを持っているのでしょう。また線を増やすと明確に動作が重くなりますので、生成された線一本一本についてデータが保持されているみたい。
ビットマップへの変換などは基本的に行っていない様子。Flash8以降だとそういう機能(BitMap処理)もあるようですが。
ああ、時が足りぬ…。
残念ながら出かける時間が迫っております。これにて一旦お別れでござるー。