回転のアニメーションに関係するよく使う式を２つ書いておきます。

1. 角度と半径から座標を出す方法

回転のアニメーションなどで使います。
式はこんな感じ。

x座標 = Math.cos(角度 * Math.PI / 180) * 半径;
y座標 = Math.sin(角度 * Math.PI / 180) * 半径;

角度の数値を足しながら回転をするアニメーション

サンプルコードはこんな感じです。
半径40ピクセルの円を描いてアニメーションします。x,yで最後の方で足している320と50は中心位置のオフセット値。

var rot:Number=0;
ball.addEventListener( Event.ENTER_FRAME, scrollbana );

function scrollbana( event:Event ):void{
	var a:Number = 0.15;
	var b:Number = 0.7;

	event.target.x =Math.cos(rot * Math.PI / 180)*40+320;
	event.target.y =Math.sin(rot * Math.PI / 180)*40+50;

	rot+=10;
	if(rot>360)rot=0;	
}

2. 座標から角度を出す方法

さっきとは逆で、座標から角度を調べます。
目的のオブジェクトがある方向に回転するときなどに使います。
式はこんな感じ

角度 = Math.atan2(y座標,x座標) * 180 / Math.PI;

サンプル：矢印がマウスの方向へ向きます。

ソースコードはこちら。
矢印を中心にするために、矢印(event.target)のx座標,y座標をそれぞれ引いて0基点にしてます。

ball.addEventListener( Event.ENTER_FRAME, ballrot );
function ballrot( event:Event ):void{
	var rot = Math.atan2(stage.mouseY-event.target.y  ,  stage.mouseX - event.target.x ) * 180 / Math.PI;
	event.target.rotation = rot;
}

前回のイージングでマウスに追従するのと組み合わせると

回転になると、sinとかcosとか出てきてそれだけでなんかイヤですねーーー。

Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)

慣性がついてゴムで引っ張られたように戻って止まる移動。
前回の減速イージングほど使う頻度は多くないですけど知っておくと便利

基本は減速イージングと似ていますが、違いは”止まりにくい”という点です。
スピードが速ければ速いほど止まりにくい
を再現するための計算は下記のような感じで書けます。

動かしたいMC座標 +=（ 目的地座標 – 動かしたいMC座標 ) * 減速係数　+　前回の移動距離 * 慣性に関わる係数

前半部分までは、減速イージングと同じです。
違いは後ろの「前回の移動距離 * 慣性に関わる係数」が今回追加している式です。
例えば前回100移動していて係数が0.3とかなら30足されます。
前回多く移動（スピードが速い）していればしているほど、目的値を余計に移動してしまうので止まりにくくなって。移動距離によっては目的値を通り過ぎてしまうこともあります。

コードで書くとこんな感じ。
（toxとtoyは目的地がはいってるものとします）

var a:Number = 0.15;
var b:Number = 0.7;
	
lastx = ( tox - event.target.x)*a +  lastx*b ;
event.target.x += lastx;
lasty = ( toy - event.target.y)*a + lasty*b;
event.target.y += lasty;     

このサンプルは、1.5秒置きにランダムな目的値に向かってます。

↑のサンプルのソースコードはこんな感じです。

ball.addEventListener( Event.ENTER_FRAME, scrollbana );
var lastx:Number=0;
var lasty:Number=0;

function scrollbana( event:Event ):void{
	var a:Number = 0.2;
	var b:Number = 0.8;
	lastx = ( int(tox.text) - event.target.x)*a +  lastx*b ;
	event.target.x += lastx;
	lasty = (  int(toy.text)  - event.target.y)*a + lasty*b;
	event.target.y += lasty; 
}


var movtimer:Timer = new Timer(1500);
movtimer.addEventListener(TimerEvent.TIMER, timefunc);
movtimer.start();	

function timefunc(evt:TimerEvent){
	var rx = int(Math.random()*640);
	tox.text = rx.toString();
	var ry = int(Math.random()*100);
	toy.text = ry.toString();
}

マウスカーソルに追従するアニメとかで良くみかけます。

Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)

ZOZOTOWNにある、インテリアなど生活雑貨ショップZOZOHOMEのSHOP CGです。

HOMEということでまんま家なんですが、とにかくシンプルに家。
ちょっと面白みを加えるために、入り口の扉を変わった形にしています。

内装は、おしゃれなインテリアショップということで、そういうグッズが似合いそうな生活感はなくして真っ白いかっこいい部屋にしました。


入り口が変な形だった理由は・・・

見えますか？
HOME

3ds Maxライティング―必須理論から応用テクニックまで

flashムービーを作るときにもっとも基本になるのがムービークリップをアニメーションさせることだと思います。
actionscriptでムービークリップを動かす時に良く使うのが以下の仕組みで、
目的値に向かって減速していって最後に止まるというものです。
FLASHアニメのかっこよさげなものは、ほぼこれを使っておけば間違いないです。

減速する座標移動の計算は下記のとおりです。

動かしたいMC座標 +=（ 目的地座標 – 動かしたいMC座標 ) * 減速係数

目的座標を現在座標で引き算することで、目的値までの距離を出します。
その距離にたいして減速に関わる数値（0.1～0.3程度がいい動きします。）の値で掛けることで１回の移動距離が決まります。
それを+=で足すことで移動していきます。

ブルーの線が１回に移動する距離で、常に距離の10分4だけ進むので
近づけば近づくほど１回の移動距離が短くなっていきます。
これが減速していく理由です。

実際にはこんなコードになると思います。
ballを tox , toyで指定した場所まで移動。

ball.x += ( tox - ball.x ) * 0.3;
ball.y += ( toy - ball.y ) * 0.3;

ball.addEventListener( Event.ENTER_FRAME, scrollbana );
function scrollbana( event:Event ):void{
	var a:Number = 0.3;
	event.target.x +=  ( stage.mouseX - event.target.x)*a;
	event.target.y +=  ( stage.mouseY - event.target.y)*a;
}

複数のムービークリップが同時に動くときに使うとかっこいいかもですね
たとえば、画像ギャラリーなどで写真の絞り込みなんかに使うとか。
サンプル↓（下のall ,block,wallなどで絞り込みができます）

[ ダウンロード ]

これも前回のXMLの読み込みでやった方法でデータとしてXMLを読み込み、photoの数だけ写真を読み込み、その後categoryの属性によって絞り込むというものです。
XMLはこちら↓

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<root>
	<photo image="1.jpg" category="block" />
	<photo image="2.jpg" category="block" />
			/*　途中略　*/
	<photo image="18.jpg" category="sky" />
</root>

ちょっとしたムービーでも、イージングがかかってるだけど高品位に見えます。

Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)

ついに買いました。
Apple magic mouse

パッケージがすでにかっこいい。使い道がないけど捨てるに捨てられないケースです。

箱から出した状態。けっこう薄い。

ブルートゥースで単三２本なんだけど
以前までつかってた同じくワイヤレスのマイティーマウスより断然軽く感じる
形のせいなのかな？

そして、なにより気になる操作性。
ボタンがないから感覚がなくてどうなのかな？と不安もあったんだけど
クリックはいままでのマイティーと同じように本体が沈んでカチってなるタイプで
クリック感は同じです。
違いはやはりマウス本体をなぞって使う、様々なジェスチャー機能や、従来のホイール操作でのスクロール感など。
スクロールについては、凄く気持ちいい！！
指でスクロールする動きと画面のスクロールがぴったりマッチしていてとても自然
スクロールしていて気持ちいいです。
慣性もついてて滑らかに動くのでいままでのカチカチって段階のあるスクロールとは比べ物になりません。
iphoneの画面って指なぞるとスクロールとかあるけど、あれも指にぴったり動きがあってて自然です。まったく同じ感覚をPCのスクロールに持ってきた感じですね。
さすがアップル。

クリックと、ホイールと、ただ指を置いて休めているだけをどおやって見分けてるのか分かんないけど、まったく違和感なしに自然に使えてしまうのが凄い。
裏ではすごいこといっぱいやってんのかなー

２本指で左右に動かすことでサファリでは、ブラウザの戻る、進むに対応してるんだけどなれるととても便利。結局Macやってるときの多くの時間はブラウジングなので、そこが快適になるのはとても大きいです。

買おうか迷っていたときに、友人から「もう戻れない」というコメントをもらってから気になってしまって結局買ったんだけど。
同じコメントです。

もう普通のマウスには戻れません。

マイティーマウスよりボタンが少ないから、いままでサブボタンに割り振っていたエクスポーズが使えなくなったのがちょっと残念だけど、エクスポーズは画面四隅に割り振ることで解決しました。

それよりも普段のスクロール感の使い心地が優先です。
久々に満足のできる良いものを買った。

購入はApple storeで

ワイヤレスマウスには、エネループ必須です。


5,250円→2,150円 SANYO eneloop 充電器 単3形4個セット (単3形・単4形兼用) N-TG1S

前回のAS3でXML読み込みから、読み込んだだけじゃなにもならないので
よく企業ページなどで見かけるスクロールバナーのFLashを外部読み込みXMLで作りました。バリューコマースとかUnited arowsとか

バナー画像をjpg,pngなどで準備して、そのファイル名とリンク先URLをXMLで記入すれば使えます。
PHPなどのサーバーサイド技術と連携すれば、管理画面でバナー登録してFLASHの更新などができるようになります。

使い方

サイズ変更しない場合
デフォルトサイズは全体が640×40ピクセルで、１つのバナーサイズは160×40ピクセルになってます。
160×40ピクセルのバナー画像を準備して
banner_data.xmlをテキストエディタで開きバナーファイルの分だけ書き換えます。

<?xml version="1.0" encoding="utf-8"?>
<root>
	<banner image="バナー画像.jpg" link="リンク先"  target="_blank" />
	<banner image="バナー画像.jpg" link="リンク先"  target="_blank" />
	<banner image="バナー画像.jpg" link="リンク先"  target="_blank" />
</root>

scrbanner.swfをページに張り付ければOKです。

バナーサイズを変更したい場合は
scrbanner.flaを開いて、Flash上でステージサイズを任意サイズに変更してください
また、1つのバナーサイズはscrbanner.asファイルの
10,11行目の2か所を変更すればOKです。

package  {
	import flash.display.*;
	import flash.events.*;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	
	public class scrbanner extends MovieClip {
		
		public const SCR_WIDTH:int = stage.stageWidth; 	//画面の横幅設定
		public const BNR_WIDTH:int = 160; 	//バナーの横幅設定
		public const BNR_HEIGHT:int = 40; 	//バナーの縦幅設定
		
		private const BNR_NUM:int = SCR_WIDTH / BNR_WIDTH; //1画面に入るバナー数
		private var loadURL:String;
		public var loadxml : XML;

ダウンロード

スクロールの解説

今回のスクロールはXMLに登録された分だけ表示して、繰り返し無限ループします。
無限ルールの方法は、１ループ分のバナーの塊の後ろに、もう１ループくっつけて１回ループが終わった時点で最初の位置に戻る。という処理を行ってます。
見た目には無限ループしてるように見えるという仕組みです。

ループするには、ステージ表示エリアに入る分のバナー（例だと４つ）を最後尾に追加しておく必要があります。

ただし。バナー数がステージに入る数より多いときは、単純に後ろに４つ追加でいいのですが、もし、バナー数がステージに入る数より少なかった場合はちょっと面倒になります。
下記図参照。

この場合、ステージを超える数までバナーの塊を繰り返して、ステージエリアを超えたら（赤い線）そこからステージの数分追加という処理をしています。
以下今回のサンプルコード。BNR_NUMにはステージに入るバナーの数がはいってます。

var i:int=0;
				while (i<BNR_NUM){　　//ステージを超えるまで繰り返し
					for each(var element:XML in xmlList){
						//バナー作成
						bannermc[i]=new bannerclass(element.@image);
						bannermc[i].x = i * BNR_WIDTH;
						scrollmc.addChild(bannermc[i]);
						i++;
					}
				}
				//バナーの数　*　サイズで、スクロールの判定用に、全体の最大サイズを設定 （左へスクロールなので　-1をかける）
				scrollmc.bannerwidth = i * BNR_WIDTH *-1 ;
				
				//永久スクロール用に、画面に入る数のバナー数を、最後にまた１から追加
				var lastfour:int=i;
				while (i-lastfour<BNR_NUM){
					for each( element in xmlList){
						//バナー作成
						bannermc[i]=new  bannerclass(element.@image);																																					
						bannermc[i].x = i * BNR_WIDTH;
						scrollmc.addChild(bannermc[i]);
						i++;
						if(i-lastfour>=BNR_NUM) break;
					}
				}

Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

actionscript3.0になってからXML関連がとても扱いやすくなりました。
E4Xというものでアクセスできるとか

まずASのXML読み込み処理自体はこんな感じで、URL Requestを作って読み込ます。

var url : URLRequest = new URLRequest("読みたいファイル名.xml");
url_loader = new URLLoader();
url_loader.load(url);
url_loader.addEventListener (Event.COMPLETE,LoaderInfoCompleteFunc);

//読み込みが終わったら
function LoaderInfoCompleteFunc (event : Event) {
	var loadxml:XML = new XML(url_loader.data);
	/*
		いろいろ処理
	*/
}

いろいろ処理の部分でXMLを解析して様々な処理をするんですが
そこが目的のデータにアクセスがしやすくなってます。
基本は.　で階層をたどって
@を使うと属性の内容をとれます。

例えばこんなXMLで

<root>
	<shop id="112">
		<name>apple</name>
		<url>http://apple.co.jp</url>
	</shop>
	<shop id="52">
		<name>microsoft</name>
		<url>http://microsoft.co.jp</url>
	</shop>
	<shop id="32">
		<name>sony</name>
		<url>http://sony.co.jp</url>
	</shop>
</root>

2番目のshop の要素idを表示したい場合は

trace(loadxml.shop[1].@id);

結果は52です。

3番目のshop のnameの内容を表示したい場合は

trace(loadxml.shop[2].name);

結果はsony
という感じでドットシンタックスで分かりやすく目的の情報にたどり着けます。

あと、shopノードの数だけ繰り返してnameを表示したい場合は
XMLListを作って

var xmlList:XMLList = loadxml.shop;
for each(var element:XML in xmlList){
	trace(element.name);
}

結果は
apple
microsoft
sony
です。
as2から比べたらとても分かりやすくなりました。

今回のサンプルファイルはこちら

Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

forza3は、レース終了後にリプレイを見ることができるんだけど
レースゲームなら大体ついてる、カメラが自動で切り替わってかっこよく見せてくれるあれです。

なんと、forza3はその後、好きな所を抜き出してネットにアップロードできるのです。
XBOX360からアップロード後はforzamotorsport.netでXBOXと同じユーザーでログインするとマイフォルツァの中にマイムービーという項目でアップロードされています。
同じようにムービーだけではなくフォトも送ることができるので、これからブログの記事を書くときに重宝しそうです。

今やってる、筑波サーキットのAクラスのリプレイ。
22Bの車体がぼろぼろ・・・

タイムアタックなんで１台でさみしい感じですが、ネット対戦のレースなんかだったら盛り上がりそうです。
ちなみにタイムアタックは、現在58秒台で前回13573位だったのが6000位台まであがりました！

ただ、forza３の悪いところなんですが、全体的に説明不足で、ネットで見つけるまでそんな機能があること知りませんでした。
説明書も薄くて何も書いてないし、ゲーム内でもメインの流れに関しては丁寧なんだけどそれ以外がまったく説明されない。
今回のも、保存したリプレイを選択するとアップロードしますか？っていうからYESで保存してもいくらやってもアップロードされずに困った。
実はそのメニューは、XBOX同士で見るためのアップロードで、
さっき紹介したforzHPにアップするには、
リプレイを再生中に指定した場所からムービー保存できる機能でムービーを作ってから、そのムービーを選択しないとアップロードできないらしいということをネットで調べてようやく理解。

それと、ムービーはWMV形式になるんだけど、そのままだとYOUTUBEにアップできない形式らしいので、別なソフトで変換しないとだめなのが面倒
今回は、Flashに同梱のFlash video encoderでFLVにしてからUPしました。
YOUTUBE上げたい人いっぱいいるだろうに。
ムービーの時間が最大３０秒というのもおしい・・・・
凄いんだけど、なんか詰めがあまい感じ

とはいえ自分のプレイがネットにアップできるのは可能性がいろいろあって楽しいです。

5,658円 ネット対戦が熱い！Forza Motorsport 3(フォルツァ モータースポーツ 3)


18,621円 安くなったXbox 360 アーケード(HDMI端子搭載)

23,300円 HDD付で快適プレー。Xbox 360(60GB:HDMI端子搭載)

11/13（金）より3DCGパース界の巨匠、戸澤 徹氏、渡邉 泰裕氏のお二人で結成されたデザインユニットRagaRのいままでの作品を展示した個展が開催されています。
場所は、あの、デザインホテル 「クラスカ」で！

さらに、RagaRとして日本橋に事務所を構えて、ついに法人化されるということです。
おめでとうございます！！

RagaRさんは、wonderwallのお仕事や、ZOZOTOWNのCGで多くの実績を残されておりますが、その作品のほとんどを今回の展示でみることができます。

ということで金曜はオープニングパーティーということで参加してまいりました。

スペシャルゲストでwonderwallの片山 正通さんも参加してのトークセッションがあり今までのお仕事の裏話などなどがあり、最近だとthe sohoや、nike id のお仕事など、とても面白いお話が聞けました。

しかも、恐縮ですが、後半は、私もSTARTTODAYとしてディレクターのJUN WATANABEと共にトークセッションに参加させていただきました。
作品もちらりと出していただいたり。

１時間ちょっとの間ですが、RagaRさんのCG制作に対する考えかたや、その実績にたいする片山さんからの信頼など、RagaRの両氏のすごさを改めて実感したのでした。

余談ですがRagaRだけにドリンクは、ラガービール？と思いきやハイネケンでした。

RagaR展は11/19（木）まで、まだまだやっておりますので、みなさん是非足をはこんでみてください。とってもかっこいいCGが盛りだくさんです。
RagaR展のご案内PDF

あと、11月24日（火）放送のNHKのプロフェッショナルは片山正通さんなので要チェックです。
最近wonderwallさんのホームページがリニューアルしてかっこいいことなってます。
ホームページは中村 勇吾さんのところらしい。んーやっぱ凄い。

コールオブデューティーの新作が日本ではスクエニから12/10に発売される。
このトレイラーの映像も凄すぎます、これがゲーム画面とは・・
実写かデモムービーかと思っちゃうけど、画質といいシステムといいCODは世界トップクラスのゲームですなぁ。12/10が待ち遠しい。
なんか宇宙っぽい絵もあるのが気になる。
でも日本版がスクエニからってなんか不思議。
そういえば以前にdiabloも日本版はカプコンが発売してたな。

さらに凄い記録の情報で
すでに発売されている、北米版では初日で700万本が売れて、売上3億1000万ドルという記録を達成したらしい。
やっぱすげーゲームだ。

こんなビッグタイトルなのに日本ではあまり知られていないというのが残念。
FPSってジャンルがあんまり人気ないのかね・・
戦争もので不謹慎ってのもあるのかな、一応反戦ゲームっていってますけどねメーカーは

北米のみなんだけど
Modern Warfare 2 Prestige Edition
ってのが本物のナイトスコープ付きで$149というなんともお買い得な値段。
これ↓

日本でもでたらいいのになー
ナイトスコープ装着で、夜ふかしゲーマーでも暗闇の視界はばっちりだ

あと、今回貼った動画でblogのメインエリアのサイズちょっと変更。
youtubeの動画サイズが横320ピクセルの次が640ピクセルだったので
そのサイズも貼れるようにblogのメインエリアが620ピクセルだったのを20ピクセル拡大
最初からこのサイズにしとけばよかったーーー！

6323円　12/10発売。XBOX360 コール オブ デューティ モダン・ウォーフェア2

２が出る前に前作をやっておこう！！

2330円 XBOX360 コール オブ デューティ4 モダン・ウォーフェア

23,300円 HDD付で快適プレー。Xbox 360(60GB:HDMI端子搭載)