Born Neet

Flashの勉強しなきゃなぁと思ってたら、ちょうど良いタイミングで、
Flashの要となるスクリプト言語「ActionScript」とは？（1/3） ─ ＠IT
なんて記事が出てたのでやってみた。

Hello, world!そのままは面白くないので、単純なお絵かきFlashを作ってみることにした。

ActionScript（っていうかFlash自体）初めてで、かなり手探りだったけどなんとか完成。
（ソースとswfは続きに。トップにFlashが表示されると重くなるので）

[感想]

JavaのSwingみたいだなぁというのが第一印象。
構文もそうだけど、コンパイルのもっさり感とか（笑）

っていうかお絵かき機能があまりにも簡単に実現できて軽くショック！
(x)html2presenの時（canvasでやった）の苦労はなんだったんだ～！

とまぁ一応できたけど、やっぱ1回入門書読みたいな。
どっかに本ぐらい体系的にまとまってるAS3のサイトないかなぁ…。

[参考]

• Sprite - AdobeR Flex? 2 リファレンスガイド
  ここは必須っぽい
• ActionScript3 (mxmlc) でのコンパイルを100倍速にする方法 - 川o・-・）＜2nd life
  もうこれがなきゃやってらんない！
• CodeZine：フリーのFlashコンパイラMTASCを使ってお絵かきツールを作る（Flash, お絵かき, MTASC, ActionScript）
  この記事がきっかけでお絵かき機能を付けようと思った
• はじめてのActionScript3 - クジラ Flash ActionScript3 Tips
  クラス名-config.xmlの書き方等、基本のお勉強
• FN0607002 - Spriteクラス - Flash : テクニカルノート
  サンプルがわかりやすかった
• ActionScript3.0 お絵かきツール - kozy.heteml.jp
  お絵かきについてかなり参考にした
• object および embed タグの使用
  これも調べないとわからなかった…

[サンプル]

下の枠内をドラッグすると緑の線が引けます。
ただそれだけです。

[ソース]

たったこれだけで絵が描ける、asすげー！

Hello.as

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;

	public class Hello extends Sprite {

		private var drawArea:Sprite;
		private var isDown:Boolean = false;
	
		public function Hello() {

			drawArea = new Sprite();
			drawArea.graphics.beginFill(0xFFFFFF);
			drawArea.graphics.drawRect(1, 1, 348, 198);
			drawArea.graphics.endFill();
								
			drawArea.graphics.lineStyle(3, 0x00FF00);
    		
			addChild(drawArea);

			drawArea.addEventListener(MouseEvent.MOUSE_DOWN, start);
			drawArea.addEventListener(MouseEvent.MOUSE_MOVE, move);
			drawArea.addEventListener(MouseEvent.MOUSE_UP, end);

		}
		
		private function start(e:MouseEvent):void {
			isDown = true;
			drawArea.graphics.moveTo(drawArea.mouseX, drawArea.mouseY);
		}
	    
		private function move(e:MouseEvent):void {
			if(isDown) drawArea.graphics.lineTo(drawArea.mouseX, drawArea.mouseY);
		}

		private function end(e:MouseEvent):void {
			isDown = false;
		}
	}
}

Hello-config.xml

<flex-config>
	<default-size>
		<width>350</width>
		<height>200</height>
	</default-size>
</flex-config>

以上です。
久々の長文疲れた(>_<)

[追記]

細かい誤字脱字とかを修正。（2008/05/31）

[追記2（2008/08/31）]

貼り付けたHTML(object & embedタグ)はこんな感じ。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="350"
height="200" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0">
<param name="movie" value="http://file.blog.bornneet.com/Hello.swf" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="quality" value="high" />
<embed src="http://file.blog.bornneet.com/Hello.swf" width="350" height="200" play="true" loop="true" quality="high" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>

久々に見たら気になったので。

っていうかborderの付け方がひどい…
（1px分小さい白でfillRectして背景の色を残してるw）