ra66it blog

著者の大重美幸さんにAdobe Flash CS4 詳細!ActionScript3.0入門ノートを送っていただきました。献本とかはじめてで、ドキドキしてます。

大重美幸さんのAS3本としては、Adobe Flash CS3 詳細! ActionScript 3.0 入門ノートとAdobe Flash CS3 詳細! ActionScript3.0入門ノート2がありますが、今回はそれらの内容を初心者向けに再構成された内容になっています。

表紙の帯には「これを読め！！」と書かれていますが、まさに「これを読め！！」ば一通りの事はできる印象でした。まだざっと見た感じではありますが、特にライブラリを使って簡単に解決するのではなく、基本的な原理を解説してくれているので、ライブラリに頼ることなくまずは基本を押さえなさい、というメッセージが込められている感じがしました。

初心者の人がつまずきそうな、イベントの処理やクラス定義など丁寧に解説してあるので、何度も何度も読み返して体で覚えて行くのがいいのではないでしょうか。僕もAdobe Flash CS3 詳細! ActionScript 3.0 入門ノートを何度も何度も読み返して、徐々にクラスの考え方を理解していました。

また、図形の描画、新しいテキストエンジン、ビットマップとビットマップデータ、XMLの処理やブラウザ、サーバープログラムとの連携などなど、後半はCS4の新しい部分も含めて知りたかった内容もたくさんあったので、手を動かしながら読み進めたいと思います。

• ActionScript3入門ノート CS4

tags：as as3 本 

FlexUG@大阪の帰りに、名駅の本屋さんによって、初めてのActionScript3.0を買いました。まだパラパラと見ただけですが、これからAS3を勉強する人や、僕みたいなところどころ抜けてる人とかにいい本なんじゃないかなと。

if文やらfor文、関数など基本的なところから、プロパティ、メソッド、イベント、クラス…、モーション、描画、テキスト、サウンド、ビデオ、XMLまで一通り網羅している感じです。初めてにしては盛り込み過ぎじゃないかとも思いますが（oreilly.co.jp -- Online Catalog: 初めてのActionScript 3.0 から目次を見る事ができます。）、順番に頭から見てけば、理解できるのかな？また、ちょっと深い難しい話はコラムのような形で軽く紹介もしてたりします。（3.7 イベントリスナーの削除のところで、ガベージコレクションの話が載っていた。僕よく分かってないですGC。勉強勉強）あと、個人的に気になったのは、最後の15章：プログラミングデザインとリソースという章があり、プログラミングデザインの方法論をいくつか紹介してくれています。僕はこのあたりは全く知識がないので、あとでじっくり読もうかなと思っています。

僕がAS3を触りだしたのが、Flash談義 | ra66it.net にある すごく楽しかった Flash 談義のログをまとめてみたよ - てっく煮ブログ（今読んでもおもしろい）を読んで、触発されて、Foundation ActionScript 3 Animation: Making Things Move!を買って、そのソースをひたすら書き写す日々が２ヶ月？ぐらいやって、そこから少しずつas3も書けるようになってきました。（まだ全然だけど。。。）それとあわせて、勉強会もいい刺激になっています。やっぱなんかいついつまでにやるってのが無いとなかなかやれないので、、、。

そんなわけで、ちょっとしたネタを見せ合う会やら、勉強会やらやってますので、興味のある方は是非〜。

tags：as3 本 

プリミティブな映像装置として、ソーマトロープやフェナキスチスコープが有名ですが、いずれも何かしらの動力により回転運動を繰り返すことで、残像効果を発生させ、像をアニメーションさせている。

厳密にいえば、PCでの表示自体が残像効果を用いたものではあるが、そこはいったん置いておいて、Box2Dの物理エンジンによる動力（重力やら初速度を与える力）を使って、静止画の連番の像をアニメーションできないかを実験してみました。

で作ったのもは、 http://ra66it.net/lab/choi200804/B2DE7.html です。

右下のUIから数値を入力して、生成する静止画の連番に位置と初速度を与えます。（x,yが位置、vx,vyが初速度）

x:-100, y:200, vx:1500, vy:0

x:150, y:600, vx:900, vy:-2750

x:250, y:650, vx:0, vy:-3000

x:0, y:550, vx:2400, vy:-2300

初速度（vxとかvy）がある一定の値を超えると（1500ぐらい？）Box2DFlashAS3で生成しているオブジェクトが安定した表示に切り替わり（上の画像のような状態）、Box2DFlashAS3を映像装置の動力として使うことができた。

作りとしては、まずflaファイル側はムービークリップに静止画の連番をシーケンスで読み込みました。flvファイルを読み込んだりとかもしたんですが、最終的に静止画の連番に落ち着いた。しかしながら、はじめ90秒分2700枚もの静止画を並べていたが、ちょっと重くなってしまうために、900枚の連番に数を減らした。JPEGの圧縮率も30%まで下げた。

ソースは以下の通り

package{
	import flash.display.Sprite;
	import flash.events.Event;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	
	public class Box2DExample7 extends Sprite{
		var _bodyDef:b2BodyDef;
		var _boxDef:b2BoxDef;
		var _count:int;
		public function Box2DExample7(){
			addEventListener(Event.ENTER_FRAME, Update, false, 0, true);
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.minVertex.Set(-1000.0, -1000.0);
			worldAABB.maxVertex.Set(1000.0, 1000.0);
			var gravity:b2Vec2 = new b2Vec2(0.0, 300.0);
			var doSleep:Boolean = true;
			m_world = new b2World(worldAABB, gravity, doSleep);
			_bodyDef = new b2BodyDef();
			_boxDef = new b2BoxDef();
			_bodyDef.userData = new PhysGround();
			_bodyDef.userData.width = _boxDef.extents.x * 2; 
			_bodyDef.userData.height = _boxDef.extents.y * 2; 
			addChild(_bodyDef.userData);
			m_world.CreateBody(_bodyDef);
		}
		
		public function Update(e:Event):void{
			if(_count < 900){
				_count ++;
			} else {
				_count = 1;
			}
			
			_bodyDef = new b2BodyDef();
			_boxDef = new b2BoxDef();
			_boxDef.extents.Set(66.5, 50);
			_boxDef.density = 1.0;
			_boxDef.friction = 0.5;
			_boxDef.restitution = 0.2;
			_bodyDef.AddShape(_boxDef);
			_bodyDef.userData = new MVI_0419_0000_2();
			_bodyDef.userData.gotoAndStop(_count);
			_bodyDef.userData.width = _boxDef.extents.x * 2; 
			_bodyDef.userData.height = _boxDef.extents.y * 2; 
			_bodyDef.position.x = x_stepper.value;
			_bodyDef.position.y = y_stepper.value;
			_bodyDef.linearVelocity = new b2Vec2(vX_stepper.value,vY_stepper.value);
			m_world.CreateBody(_bodyDef);
			addChild(_bodyDef.userData);
			trace(numChildren);
			m_world.Step(m_timeStep, m_iterations);
			for (var bb:b2Body = m_world.m_bodyList; bb; bb = bb.m_next){
				if (bb.m_userData is Sprite){
					bb.m_userData.x = bb.m_position.x;
					bb.m_userData.y = bb.m_position.y;
					bb.m_userData.rotation = bb.m_rotation * (180/Math.PI);
				}
			}
		}
		public var m_world:b2World;
		public var m_iterations:int = 10;
		public var m_timeStep:Number = 1/30;
	}
}

なんかほぼ、Box2DFlashAS3のサンプルのままですが。MVI_0419_0000_2をnewした後に、gotoAndStopで表示する画像を切り替えている。画面の外に出てしまったspriteは消す処理を書かないと行けないんだが…。

で、ちょい絶では、たけいくんの発表すごかったですね。ustream越しの人とかにもうけが良かったみたいですし。今後の発表でもホラーロボットを発表するPCにつけておいてほしい。なにか質問があるときは、それ越しでするみたいな。なんだろ、個人的には、積極的にしゃべらせたくなった。ちょっと不思議な感覚を味わった。
参考：
http://d.hatena.ne.jp/hidep22/20080419/1208602137

tags：as3 Box2DFlashAS3 ちょい絶 アニメーション 

GAINERをはじめてやりたかったマトリックスLEDができた。

read more... »

tags：as3 GAINER 

土日は、名古屋と大阪でFlashのActionScriptの勉強会でした。WCAN mini AS vol.4 「ActionScript やっとかめ！」と第11回 大阪てら子「なぎまぐの Flash ライブコーディング featuring たけし（休）」に参加してきました。

WCAN mini AS vol.4 「ActionScript やっとかめ！」

発表は以下のような感じでした。

• Gainerの小林茂さん「AS3×Gainer×Funnel」（発表資料）
• kimuchaさん「Tween系ライブラリの紹介」（発表資料）
• アダムスパンダさん「地味ぃ〜にパラパラまんが（AIRで）」（発表資料）
• 僕「ASでの12色環へのアプローチ」（発表資料） <- 発表資料がんばってASで書いたけど、地味やった。言うの忘れたし。。。
• 杉浦さん「AIRでアプリ作成」（※タイトルメモってなかったです。）
• bigchu「ベジェ曲線」（※タイトルメモってなかったです。）
• ll_koba_llさん「Box2DFlashAS3」（発表資料）

bigchuとll_koba_llさんの発表が個人的には面白かったです。今回プレゼン資料をASで作ろうって言っていて、僕もがんばって作ったんですが、なんかBox2DFlashAS3プレゼンに持ってかれたなぁ。あと２次会のロボットの話とかかなり熱かった。

おぼえがきリンク：

• Adobe MAX Japan 2007 レポート
• YCAM 山口情報芸術センター - エデュケーション -
• FUNNEL
• MAKE: Japan: Make + 小林茂 - Phillipの東京レポート
• TweenLiteを試してみる (connect.to.blog())
• Adobe® Flex™ 3 Language Reference
• Developing AIR Applications with Adobe Flex 3
• public var むらけん:Flasher; » ColorPickUperクラス作ってみた。
• Welcome to the new Sodaplay | sodaplay.com <- これです、飲み会でずっと名前が出てこなかったやつ。。。でもサイト変わってて自分の知ってるやつやなかったですが、、、。
• Yet Another Dynamic Presentation!
• S6 と XPath の紹介
• はてなブックマーク - yokozunatのブックマーク / wcanminias4
• S5: A Simple Standards-Based Slide Show System

第11回 大阪てら子「なぎまぐの Flash ライブコーディング featuring たけし（休）」

• なぎまぐさん
• タケシさん（休）
• さくーしゃ　[Saq.] 第11回 大阪てら子でつくったやつ <- ヤベー、隣で見ちゃった。ソースもあるよ。。。

前、名古屋に来てもらったので、大阪にも行かないとねってことで、行ってきました。てら子の方では、なぎまぐさんとたけしさんがライブコーディングをするという話だったんですが、たけしさんが体調不良のため、急遽、さくーしゃさんがライブコーディングを見せてくれました。冬だし雪でもつくろかって、、、。1ピクセルのビットマップを落とす所から、だんだんだんだんすごくなっていく。（すごくなってく様子はここでみれます。）雪積もらそっかって、、、。さすがっす。そしてめちゃくちゃ早かった。やっぱflexbuilderとかええなぁと思いました。ほしいなぁ。なぎまぐさんは3Dでぐるぐる回るオブジェクトをライブコーディングで見せてくれました。いいキャラですね。とても楽しかった。名古屋のWCAN mini ASでもbigchuとかocchii105さんとかが3Dをライブラリを使わないで作っていたので、結構、その辺と情報交換できたら面白いのかなぁと思いました。大阪とかあんま来たことなかったんですが、結構近いっすね。また遊びにきたいと思います。名古屋にも遊びにきてください。

おぼえがきリンク：

• Flash & ActionScript 勉強会「てら子」のまとめ
• CAFE CHARBON　北堀江　カフェ　シャルボン
• FN0408001 - イベントの委譲 - Flash : テクニカルノート
• 画像補間法
• flatmountain
• Wiij - Wikipedia, the free encyclopedia
• IAMAS 2008 » イベント
• sand/light AS3 experiment at asluv :: actionscript love
• interactive water AS3 experiment at asluv :: actionscript love
• wind blowing through hair - interactive AS3 experiment at asluv :: actionscript love <- か、髪の毛
• はてなブックマーク - yokozunatのブックマーク / てら子11

あっ！たこ焼き食べるの忘れた。。。

tags：as3 GAINER WCAN mini AS やべー 小旅行 大阪 

※左のボタンでフルスクリーン表示することができます。右の２つのボタンで、おくりを行ってください。

発表の資料のソース一式（720 KB）

とりあえず、発表終わったので公開します。詳しい解説は後日ブログに書きたいと思います。一つ言い忘れたんですが、プレゼンツールもASで作りました。こちらもソースを入れておきました。なにかあれば、お知らせいただけるとありがたいです。

---追記---
http://ra66it.net/cctool/cctool.zip
上記のアドレスにasのソースファイルも含むColorCircleToolをアップしました。使い方などは readme をお読みください。また後日ブログの方にも記事を書くと思います。

tags：as3 WCAN mini AS 

ll_koba_llさんがコメントをくれたので、試してみた。4KBになりました。ただ、やっぱりBitmapそのままだと回転するときにギザギザになるからスムージングかけたんだけど、そうするとそうするでぼやけるなぁと。まあ、でも4KBだし。前作ったやつ（※3.4MB）のほうが描写はきれいだけど、、、。でも重さ的に使えないかなぁ。

var b:BitmapData = new BitmapData(tf.width, tf.height);
b.draw(tf);
var bp:Bitmap = new Bitmap(b,"never",true);
var d:DisplayObject = this.targetContainer.addChild(bp);

d.blendMode = BlendMode.MULTIPLY;

Bitmapの処理あんまよく理解してなかったなぁ。pixelSnappingとか初めて知ったし。テキストフィールドごとBitmapにしてしまうので、背景がついてしまう。BlendModeを変えて透けるようにしました。以下ソースの一部。。。メモです。だから、来週のAS勉強会の準備をするんだってば。

package net.ra66it.draw{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.DisplayObjectContainer;
	import flash.display.Graphics;

	//カスタムクラス
	import net.ra66it.xml.XMLloader;
	import net.ra66it.draw.GraphXmlAnalytic2;
	import com.yokozunat.utils.BitmapFilterUtil;
	import com.yokozunat.draw.Ball;

	//text
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	import flash.text.TextFieldAutoSize;
	import flash.text.AntiAliasType;

	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.DisplayObject;
	import flash.display.BlendMode;

	import flash.system.Capabilities;

	public class Graph extends Sprite {
		private var xmlLoader:XMLloader;
		private var mainXml:XML;
		private var targetContainer:DisplayObjectContainer;

		//配列
		private var newsIDAry:Array;
		private var newsTitleAry:Array;
		private var newsSiteURLIDAry:Array;
		private var newsAccessCountAry:Array;

		//描画
		var g:Graphics;
		function Graph(xmlUrl:String, container:DisplayObjectContainer) {
			this.targetContainer = container;

			//UTF-8だからtrue
			var isUnicode:Boolean = true;
			//XMLファイルを読み込む
			this.xmlLoader = new XMLloader(xmlUrl, isUnicode);
			this.xmlLoader.addEventListener(XMLloader.LOAD_COMPLETE, onXMLloaded);
		}
		/**============================================================================================
		* XML読み込み完了
		============================================================================================*/
		private function onXMLloaded(event:Event):void {
			//XMLオブジェクトを受け取る
			this.mainXml = this.xmlLoader.getXML();
			var graphXmlAnalytic2:GraphXmlAnalytic2 = new GraphXmlAnalytic2();
			this.newsIDAry = graphXmlAnalytic2.getNewsIdAry(this.mainXml);
			this.newsTitleAry = graphXmlAnalytic2.getNewsTitleAry(this.mainXml);
			this.newsSiteURLIDAry = graphXmlAnalytic2.getSiteURLIDAry(this.mainXml);
			this.newsAccessCountAry = graphXmlAnalytic2.getAccessCountAry(this.mainXml);

			setDrawGraph();
		}
		private function setDrawGraph():void {
			var tmpSprite:Sprite = new Sprite;
			g=tmpSprite.graphics;
			//g.lineStyle(1,0x6600CC,1);
			g.beginFill(0xcccc66);
			g.moveTo(10,400);
			
			var n:Number=0;
			var lastX:Number;
			
			for (var i:int=0; i < newsIDAry.length; i++) {
				
				n=this.newsAccessCountAry[i]/180;
				g.lineTo(i * 1 * 400/newsIDAry.length+10, 400 - n);
				
				var myBall:Ball = new Ball(5,0x333300);
				myBall.x = i * 1 * 400/newsIDAry.length+10;
				myBall.y = 400 - n;
				tmpSprite.addChild(myBall);
				
				setText(myBall.x,myBall.y,this.newsTitleAry[i]);

			}
			g.lineTo((i-1) * 1 * 400/newsIDAry.length+10, 400);
			g.lineTo(10,400);
			g.endFill();

			var filter:BitmapFilterUtil = new BitmapFilterUtil;

			filter.getBevel(tmpSprite);
			filter.getDropShadow(tmpSprite);

			this.targetContainer.addChild(tmpSprite);
		}
		function setText(X:Number, Y:Number, Title:String):void {
			var tf:TextField = new TextField();
			
			//tf.embedFonts = true;
			tf.autoSize = TextFieldAutoSize.LEFT;
			tf.antiAliasType = AntiAliasType.ADVANCED;
			tf.defaultTextFormat = getTextFormat(10);
			tf.selectable = false;
			tf.mouseEnabled = true;
			tf.multiline = true;
			tf.wordWrap = true;
			tf.width = 400;
			tf.height = 300;
			//tf.x = X;
			//tf.y = Y-10;

			tf.text = "";

			for (var i:int = 0; i<30; i++) {
				tf.text = Title;
			}
			//tf.rotation = -70;
			//this.targetContainer.addChild(tf);
			var b:BitmapData = new BitmapData(tf.width, tf.height);
			b.draw(tf);
			var bp:Bitmap = new Bitmap(b,"never",true);
			var d:DisplayObject = this.targetContainer.addChild(bp);
			
			d.x = X;
			d.y = Y-10;
			d.rotation = -70;
			d.blendMode = BlendMode.MULTIPLY;
		}
		private function getTextFormat(fontSize:Number):TextFormat {
			var format:TextFormat = new TextFormat();
			format.size = fontSize;
			format.leading = fontSize*0.5;
			format.color = "0x333300";
			var whatOs:String = Capabilities.os;
			if (whatOs.slice(0,3) == "Mac") {
				format.font = "ヒラギノ角ゴ Pro W6";
			} else if (whatOs.slice(0,3) == "Win") {
				format.font = "ＭＳ Ｐゴシック";
			} else {
				format.font = "sans-serif";
			}
			return format;
		}
	}
}

tags：as3 asメモ