2008-10

9月から始まったプロジェクトも漸く終盤に差し掛かり、肩の荷が下りつつあるhunyaです。
こんにちは！
最近社内や自宅に篭っていることが多かった為、年末にかけてはおもいきり外に出たいと考えております。
社内のスタッフはもちろん他社・他業種の方とも積極的に交流していきたいです。
何か面白そうなイベントがありましたら、お声をかけて下さい。
是非参加させていただきますので！（できればosiさんも）

さて今回は、最近担当させて頂いた案件における技術的なメモを下記に記載します。

【映像制作案件】
■使用ツール：after effects、photoshop
■納品：DVD
■映像サイズ：1366×768
■参考
書き出し①
画面サイズ ：1366×768
フレームレート ：30
形式 ：mov（アニメーション）
時間 ：0;08;00;00
画質 ：フル画質
書き出しサイズ ：約25GB

書き出し②
画面サイズ ：683×384
フレームレート ：21
形式 ：mov(アニメーション)
時間 ：0;08;00;00
画質 ：フル画質
書き出しサイズ ：約6GB

■メモ
・各シーン毎にデザインpsdファイルを用意し、aftereffectsシーン内の各psdコンポジションと直に関連付ける。
→デザイン修正が入った場合、psdを修正すればaftereffectsシーンも更新される。
・タイムラインを操作している際に時々固まることがある為、2分の1画質で作業する。
・プレビューの際はコマ落ち防止の為、4分の1画質で
・必ずアクションセーフ内にシーンを構築する。アクションセーフ外はイメージが欠けることがある。

最初にflashで作成するかaftereffectsで作成するか迷ったが、効率と最終納品形態を考えてaftereffectsによって作成することを決めた。flashを使用してもmov形式やavi形式に書き出すことは可能であるが、その場合スクリプトが認識されない為actionscriptのメリットが活かせない。

書き出しサイズが大きすぎて担当者とのデータのやり取りに困った。
・上記参考①②供にサーバーへのコピーは可能。
・上記参考①②供に外付けHDへのコピーは不可能。(原因調査中)
・メール送信は勿論不可能。

・DVDに焼く際、10GB以下のmovファイルであればDVD作成ソフト内で調整可能
・DVD作成ソフト内で、画面サイズも調整可能。（引き伸ばされて表示される為、作成の際には画面比率に注意する。）

aftereffectsを使う上でのメリット
・豊富なエフェクトプラグイン
・タイムラインを全体的に見渡すことが可能。
・外部ファイルとの連携によりデザインの変更が容易。

【flashシステム制作案件】
■使用ツール：flash
■使用言語：actionscript2.0
■使用ライブラリ：casaframework、tweener、自作コマンドクラス
■メモ
・定数となる値全てを外部xmlにもたせて作業効率を図る。

■絶対に用意するクラス一覧
・Model.as
情報を格納する。
情報の更新と同時にイベントを配信する。

・SceneManager.as
現在のシーンの状態をチェックするクラス。
現在のシーンの状態を見て、Modelの値を変更する。

・Window.as
よく使われるウィンドウ（小窓）のクラスをスーパークラスにして共通化しておく。

表示・非表示とその際のアニメーション

・Command.as
任意のスクリプトを順番に実行したり、実行されたfunctionを記憶したりする。

・Debug.as
デバッグ管理クラス。traceを一つのクラスにまとめることでかなり効率が上がる。

・Path.as
各swfファイルのrootパスをここに格納しておく。

・loadingのクラス（swf、xml、外部イメージ読み込み用）
・phpと連携するクラス

■単体のクラスに絶対実装するもの
・初期化 initialize();
・値を削除する destroy();
・デバッグ debug();

■ナビゲーションについて
ナビゲーションクラスの作成
基本機能をスーパークラスにして共通化しておく。

ナビゲーション自体に演出が加わる場合、以下の方法で対応する。
・ナビゲーションのシンボルをさらにシンボルで包み、親のシンボルを操作することで対応。
・attachMovieを使う。attachMCにボタン機能も実装する。

■ローディングのスクリプトメモ　for CASA Framework
xmlもswfも同時に読み込む

 
import org.casaframework.load.LoadGroup;
import org.casaframework.load.media.MediaLoad;
import org.casaframework.math.Percent;
import org.casaframework.load.base.BytesLoadInterface;
import org.casaframework.load.data.xml.XmlLoad;
import org.casaframework.util.XmlUtil;
 
class ImporterIntroCommand extends Command
{
	private var model:Model;
	private var path:Path;
 
	private var stageTarget:MovieClip;
	private var bar:MovieClip;
 
	//xml
	private var xmlObject:Object;
	private var myXmlLoad:XmlLoad;
 
	//movieClip
	private var targetMain:MovieClip;
 
	private var targetMainFormMaskMC:MovieClip;
 
	//mcName
	private static var __mcMain:String = "main_mc";
 
	//url
	private static var __urlMain:String = "main.swf";
 
	//mcPosition
	private static var mainX:Number = 0;
	private static var mainY:Number = 0;
 
	//mediaLoad
	private var imageLoadMain:MediaLoad;
 
	var myLoadGroup;
 
	public function ImporterIntroCommand()
	{
		path = Path.create(this);
 
		//indexのパス
		stageTarget = path["index"];
 
		//loadingのパス
		bar = stageTarget["loadingBar"];
	}
 
	public function execute():Void
	{
		importer();
	}
 
	private function importer():Void
	{
		myXmlLoad = new XmlLoad("data.xml");
		myXmlLoad.addEventObserver(this, XmlLoad.EVENT_LOAD_COMPLETE, "onXmlLoad");
 
		model = Model.create(this);
		initialize();
	}
 
	private function initialize():Void
	{
		//targetSide = stageTarget.createEmptyMovieClip(__mcSide, 5);
		//targetFooter = stageTarget.createEmptyMovieClip(__mcStep, 6);
		targetMain = stageTarget["mainMC"].createEmptyMovieClip(__mcMain, stageTarget["mainMC"].getNextHighestDepth());
 
		targetMain._x = mainX;
		targetMain._y = mainY;
 
		imageLoadMain = new MediaLoad(targetMain , __urlMain);
 
		myLoadGroup = new LoadGroup();
 
		yomiStart();
	}
 
	private function onXmlLoad(sender:XmlLoad):Void
	{
		//trace("onXmlLoad" + "xml_complete");
		xmlObject = XmlUtil.xmlToObject(myXmlLoad.getXml())['setting'];
		new XmlSetModel(xmlObject).setModel();
	}
 
	function yomiStart():Void{
		//parcentage
 
		this.myLoadGroup.addLoad(myXmlLoad);
		this.myLoadGroup.addLoad(this.imageLoadMain);
 
		this.myLoadGroup.addEventObserver(this, LoadGroup.EVENT_LOAD_PERCENT, "onGroupLoadPercent");
		this.myLoadGroup.addEventObserver(this, LoadGroup.EVENT_LOAD_ERROR, "onGroupLoadError");
		this.myLoadGroup.addEventObserver(this, LoadGroup.EVENT_LOAD_COMPLETE, "onGroupLoadComplete");
		this.myLoadGroup.addEventObserver(this, LoadGroup.EVENT_LOAD_START, "onGroupLoadStart");
 
		this.myLoadGroup.start();
 
	}
 
	private function onGroupLoadPercent(sender:LoadGroup, progress:Percent):Void
	{
		bar.gotoAndStop("loading");
		bar["loadingText"].gotoAndStop(1);
		bar["grade"].play();
	}
 
	private function onGroupLoadError(sender:LoadGroup, failedLoad:BytesLoadInterface):Void
	{
		this.myLoadGroup.removeLoad(failedLoad);
		this.myLoadGroup.start();
	}
 
	private function onGroupLoadComplete():Void
	{
		bar.gotoAndPlay("complete");
		bar["loadingText"].gotoAndStop(2);
		bar["grade"].stop();
 
		model["nextScene"] = "scene1";
	}
 
	private function onGroupLoadStart():Void
	{
		bar.gotoAndPlay("start");
		bar["loadingText"].gotoAndStop(1);
 
	}
 
	private function onGroupLoadStop():Void
	{
	  //trace("[onGroupLoadStop]");
	}
}
 

■php連携時のスクリプトメモ

 
import org.casaframework.util.XmlUtil;
 
class ChargePhpLoading extends PhpLoad
{
	private var cxsm:ChargeXmlSetModel;
	public function ChargePhpLoading()
	{
		super();
		cxsm = new ChargeXmlSetModel();
	}   
 
	/*********************************************
	 *
	 * [ボタンクリックでPHPと通信] onReleaseのfunction
	 */
	public function loadPhp():Void
	{
		var scope:ChargePhpLoading = this;
 
		sendData["testData"] = model["test"];	
 
		loadData.onLoad = function(success:Boolean):Void
		{
			if(success){
				scope.xmlParse(this);
			}else{
				trace("error");
			}
		}
		sendData.sendAndLoad(model["domain"] + "test.php", loadData, "POST");
	}
 
	private function xmlParse(__xml:XML):Void
	{
		xmlObject = XmlUtil.xmlToObject(__xml)['setting'];
 
		trace(xmlObject);
		trace("n");
		trace(mx.data.binding.ObjectDumper.toString(xmlObject, true, true))
 
		cxsm.setModel(xmlObject);
	}
}
 

雑文・乱文申し訳ありません。

今回は歩行のアニメーションについて書きます。
人物モデルを自然にサイクルアニメーションさせるのは、基本的なことなのですが結構難しいです。
しばらく手付けモーションをしていなかったので、久しぶりに作ってみるとおかしなものができてしまいました。

というわけで参考までに、実際の人間の歩行アニメーションを画像で載せてみます。

以下の画像は、人間が歩くときの腰の動きと、手足の振り方を黄緑色の線で表したものです。
3つの視点から腰の動きを見てみると、歩く際どのくらい上下左右に動いているのかがよく分かります。
正面からの画像を見ると、腰の軌跡はU字型に動いてますね。
側面の画像から、2本の足が重なる時(地面についている方の足がのびる時)、腰の高さは頂点になっていることも分かります。
逆に足を前についた時、腰は最も下がっています。

4つの画像からいろいろな事が発見できると思うので、参考にしてみて下さい。

皆様ご無沙汰しております。hunyaです。
最近、何かと忙しい時期が続いておりまして、私の方は更新が滞っております。

本日、社内で話題になっていたサイト→http://www.ekiongfx.com/
かっこよくて、気持ちいいです。

http://www.sonicjam.co.jp/special/v1/
3D