<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>AEP Project</title>
	
	<link>http://ae-users.com/jp</link>
	<description>After Effects ユーザーコミュニティ</description>
	<lastBuildDate>Sun, 29 Aug 2010 15:06:53 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<image>
  <link>http://ae-users.com/jp</link>
  <url>http://ae-users.com/jp/../images/icon_32.png</url>
  <title>AEP Project</title>
</image>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/aeusers-jp" /><feedburner:info uri="aeusers-jp" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>続・手付けでは絶対に作りたくない動画</title>
		<link>http://feedproxy.google.com/~r/aeusers-jp/~3/uj1UTWF6oxg/</link>
		<comments>http://ae-users.com/jp/resources/2010/08/%e7%b6%9a%e3%83%bb%e6%89%8b%e4%bb%98%e3%81%91%e3%81%a7%e3%81%af%e7%b5%b6%e5%af%be%e3%81%ab%e4%bd%9c%e3%82%8a%e3%81%9f%e3%81%8f%e3%81%aa%e3%81%84%e5%8b%95%e7%94%bb/#comments</comments>
		<pubDate>Sun, 29 Aug 2010 15:06:53 +0000</pubDate>
		<dc:creator>BA</dc:creator>
				<category><![CDATA[RESOURCES]]></category>
		<category><![CDATA[TUTORIALS]]></category>

		<guid isPermaLink="false">http://ae-users.com/jp/?p=4938</guid>
		<description><![CDATA[



前回に続き、エクスプレッションを活用してＡＥのみで作った動画です。
今回の例では、異なる２つのコンポジションから位置情報を取得し、その影響力を変えることで、
手付けでは到底到達できないであろう動きを実現しています [...]]]></description>
			<content:encoded><![CDATA[
<p>
<img class="shutter" title="ba_sample_80_00" src="http://ae-users.com/jp/wp-content/uploads/2010/08/ba_sample_80_00.jpg" alt="" width="320" height="179" />
<br />
前回に続き、エクスプレッションを活用してＡＥのみで作った動画です。<br />
今回の例では、異なる２つのコンポジションから位置情報を取得し、その影響力を変えることで、<br />
手付けでは到底到達できないであろう動きを実現しています。<br />
<br />
動画とaepは<a href="http://baaaf.com/sample.html#80">こちら</a>。<br />
作成バージョンはＣＳ4です。<br />
<br />
<strong>■ＳＴＥＰ1　１つめの影響元となるコンポジションを作成する</strong><br />
<br />
30fps、640*360のコンポジションを作成します。<br />
&#8220;NullComp_A&#8221;と名付けます。<br />
<br />
ヌルレイヤーを出し、&#8221;A_1&#8243;と名前を変えます。<br />
位置に<br />
<br />
<span style="color: #33cccc;">radius=100;<br />
interval=360/(thisComp.numLayers);<br />
angle=degreesToRadians(index*interval);<br />
X=radius*Math.sin(angle);<br />
Z=-radius*Math.cos(angle);</span><br />
<br />
<span style="color: #33cccc;">[X+thisComp.width/2,thisComp.height/2,Z]</span><br />
<br />
と入力します。<br />
&#8220;A_1&#8243;を複製すると丸い形に均等に配置されます。<br />
(例では600個複製)<br />
配置の仕方は<a href="http://www.da-tools.com/AE/exp/jisen/position.html">da-tools</a>から参照させて頂きました<br />
<br />
<br />
<img class="shutter" title="ba_sample_80_01" src="http://ae-users.com/jp/wp-content/uploads/2010/08/ba_sample_80_01.jpg" alt="" width="320" height="179" />
<br />
<br />
<strong>■ＳＴＥＰ2　２つめの影響元となるコンポジションを作成する</strong><br />
<br />
30fps、640*360のコンポジションを作成します。<br />
&#8220;NullComp_B&#8221;と名付けます。<br />
<br />
ヌルレイヤーを出し、&#8221;B_1&#8243;と名前を変えます。<br />
位置に<br />
<br />
<span style="color: #00ccff;">wiggle(.5,300)</span><br />
<br />
と入力します。<br />
&#8220;B_1&#8243;を複製すると±300ピクセルの範囲にランダムに散らばります。<br />
Aと同じ個数複製します。<br />
<br />
<img class="shutter" title="ba_sample_80_02" src="http://ae-users.com/jp/wp-content/uploads/2010/08/ba_sample_80_02.jpg" alt="" width="320" height="179" />
<br />
<br />
<strong>■ＳＴＥＰ3　図形を作る</strong><br />
<br />
適当なサイズのコンポジションを出し、そこに図形を作ります。<br />
何でもよいですが、動きの面白さが活きるようシンプルな方がいいかもしれません。<br />
<br />
作例では、丸いシェイププレイヤーをウィグルでうねうねさせたものを作りました。<br />
<br />
<img class="shutter" title="ba_sample_80_03" src="http://ae-users.com/jp/wp-content/uploads/2010/08/ba_sample_80_03.jpg" alt="" width="120" height="120" />
<br />
<br />
<strong>■ＳＴＥＰ4　二つのコンポジションから影響を受ける仕組み</strong><br />
<br />
30fps、640*360のコンポジションを作成します。<br />
まず手始めにコントロール用のヌルを出し、&#8221;control&#8221;と命名、<br />
エフェクトの「スライダ制御」を適用します。<br />
<br />
次にＳＴＥＰ3で作った図形を配置し、<br />
「位置」に<br />
<br />
<span style="color: #33cccc;"><br />
PA=comp(&#8220;NullComp_A&#8221;).layer(&#8220;A_&#8221;+index).position;<br />
PB=comp(&#8220;NullComp_B&#8221;).layer(&#8220;B_&#8221;+index).position;<br />
I=thisComp.layer(&#8220;control&#8221;).effect(&#8220;スライダ制御&#8221;)(&#8220;スライダ&#8221;);<br />
PA*I+PB*(1-I)<br />
</span><br />
<br />
と入力します。<br />
図形を複製すると、スライダの数値に応じてNullComp_AとNullComp_Bから位置情報を取得します。<br />
100の時は円になり、0の時はランダム、50の時はその中間の位置になります。<br />
<br />
<img class="shutter" title="ba_sample_80_04" src="http://ae-users.com/jp/wp-content/uploads/2010/08/ba_sample_80_041.jpg" alt="" width="622" height="155" />
<br />
<br />
<strong>■ＳＴＥＰ5　仕上げ</strong><br />
<br />
スライダに適当にキーフレームを打ちアニメーションさせます。<br />
作例では図形ごとの時間差をつけたり、lookAtを使って常に次の図形の方を向くようにもしてあります。<br />
<br />
<img class="shutter" title="ba_sample_80_05" src="http://ae-users.com/jp/wp-content/uploads/2010/08/ba_sample_80_05.jpg" alt="" width="337" height="196" />
<br />
<br />
床を作り、ライトとカメラをセット、影と被写界深度をいい感じに調整します。<br />
<br />
<img class="shutter" title="ba_sample_80_06" src="http://ae-users.com/jp/wp-content/uploads/2010/08/ba_sample_80_06.jpg" alt="" width="337" height="196" />
<br />
<br />
最後に色味を好みに調整して完成です。<br />
<br />
ＡやＢの動きを変えたり、図形を変えるなどで多くのバリエーションが作れます。</p>

この投稿にタグはありません。タグはどなたでも追加出来ます！<span id="addbt">[<a onclick="jQuery('p#addtags').slideDown('fast');jQuery('#addbt').fadeOut('fast');">タグを追加する</a>]</span>
	<h4>関連する投稿</h4>
	<ul class="st-related-posts">
	<li>関連する投稿は見つかりませんでした。</li>
	</ul>

<img src="http://feeds.feedburner.com/~r/aeusers-jp/~4/uj1UTWF6oxg" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://ae-users.com/jp/resources/2010/08/%e7%b6%9a%e3%83%bb%e6%89%8b%e4%bb%98%e3%81%91%e3%81%a7%e3%81%af%e7%b5%b6%e5%af%be%e3%81%ab%e4%bd%9c%e3%82%8a%e3%81%9f%e3%81%8f%e3%81%aa%e3%81%84%e5%8b%95%e7%94%bb/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		<feedburner:origLink>http://ae-users.com/jp/resources/2010/08/%e7%b6%9a%e3%83%bb%e6%89%8b%e4%bb%98%e3%81%91%e3%81%a7%e3%81%af%e7%b5%b6%e5%af%be%e3%81%ab%e4%bd%9c%e3%82%8a%e3%81%9f%e3%81%8f%e3%81%aa%e3%81%84%e5%8b%95%e7%94%bb/</feedburner:origLink></item>
		<item>
		<title>エクスプレッション利用した３Ｄカメラの手ブレ演出</title>
		<link>http://feedproxy.google.com/~r/aeusers-jp/~3/-jfgavsYVac/</link>
		<comments>http://ae-users.com/jp/tutorials/2010/08/%e3%82%a8%e3%82%af%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e5%88%a9%e7%94%a8%e3%81%97%e3%81%9f%ef%bc%93%ef%bd%84%e3%82%ab%e3%83%a1%e3%83%a9%e3%81%ae%e6%89%8b%e3%83%96%e3%83%ac/#comments</comments>
		<pubDate>Tue, 24 Aug 2010 16:27:36 +0000</pubDate>
		<dc:creator>murasin</dc:creator>
				<category><![CDATA[TUTORIALS]]></category>
		<category><![CDATA[エクスプレッション]]></category>
		<category><![CDATA[カメラ]]></category>

		<guid isPermaLink="false">http://ae-users.com/jp/?p=4884</guid>
		<description><![CDATA[

はじめまして。むらしんと申します。
某読本を見て感化されたので、稚拙ながらちょっとしたネタを書きたいと思います。

画面に手ブレ効果を加える時に、僕はよくモーションスケッチを使って表現することがあります。
（ウィグル [...]]]></description>
			<content:encoded><![CDATA[
<p>
はじめまして。むらしんと申します。<br />
某読本を見て感化されたので、稚拙ながらちょっとしたネタを書きたいと思います。<br />
<br />
画面に手ブレ効果を加える時に、僕はよくモーションスケッチを使って表現することがあります。<br />
（ウィグルに比べて割と自然なブレ感がでるので&#8230;）<br />
しかし、モーションスケッチは３Dレイヤーやカメラ等に使用することができないため、<br />
３D配置したコンポジションデータに対してブレを加えるには普通のやり方ではできません。<br />
ここでは、ヌルオブジェクトに加えたブレをエクスプレッションを使ってカメラに作用させることで、<br />
３D配置した空間でも手ブレを表現する方法を説明します。<br />
<br />
今回は、３D空間上に３枚のレイヤー（[bg],[char01.png]、[text]）とカメラを配置させた、以下のコンポジションにブレ効果を付けてみましょう。<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/01.png" class="sb-img" rel="shadowbox[post-4884];player=img;"><img class="size-medium wp-image-4885 alignnone" src="http://ae-users.com/jp/wp-content/uploads/2010/08/01-400x255.png" alt="" width="400" height="255" /></a><br />
<br />
まず、ブレ要素の元となるヌルオブジェクトを作成します-①<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/02.png" class="sb-img" rel="shadowbox[post-4884];player=img;"><img class="size-medium wp-image-4886 alignnone" src="http://ae-users.com/jp/wp-content/uploads/2010/08/02-400x109.png" alt="" width="400" height="109" /></a><br />
<br />
このヌルオブジェクトに対してモーションスケッチでブレの動きを加えます-②<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/03.png" class="sb-img" rel="shadowbox[post-4884];player=img;"><img class="size-medium wp-image-4887 alignnone" src="http://ae-users.com/jp/wp-content/uploads/2010/08/03-400x173.png" alt="" width="400" height="173" /></a><br />
<br />
カメラ位置に対してエクスプレッションを追加-③<br />
<br />
（ショートカットはShift+Alt+^）<br />
&#8220;+&#8221;を入力したあと＠マークをヌルオブジェクトの位置にドラッグ＆ドロップします-④<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/04.png" class="sb-img" rel="shadowbox[post-4884];player=img;"><img class="size-medium wp-image-4888 alignnone" src="http://ae-users.com/jp/wp-content/uploads/2010/08/04-400x75.png" alt="" width="400" height="75" /></a><br />
<br />
これでヌルオブジェクトの動きがカメラの位置の動きに足されますが、ヌルオブジェクト<br />
を画面の中心においている場合、位置のパラメータにオフセットがかかっているので、<br />
<br />
このオフセット分を減算しておきます-⑤<br />
<br />
減算する量はコンポジションの画面サイズの半分の値になります。<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/05.png" class="sb-img" rel="shadowbox[post-4884];player=img;"><img class="size-medium wp-image-4889 alignnone" src="http://ae-users.com/jp/wp-content/uploads/2010/08/05-400x60.png" alt="" width="400" height="60" /></a><br />
<br />
この例では640*480で作成しているので、&#8221;-[320,240,0]&#8220;の項を追加します。<br />
（1280*720のHDサイズだったら&#8221;-[640,360,0]&#8220;）<br />
これで位置にブレが加わりましたが、カメラの向いている方向は変わらないため、<br />
再生すると違和感のある映像になってます。カメラの向きにもブレを加えましょう。<br />
目標点にも位置と同じようにエクスプレッションを追加しブレを付け足します-⑥<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/06.png" class="sb-img" rel="shadowbox[post-4884];player=img;"><img class="size-medium wp-image-4890 alignnone" src="http://ae-users.com/jp/wp-content/uploads/2010/08/06-400x60.png" alt="" width="400" height="60" /></a><br />
<br />
最終的なブレ量を調整します。これはエクスプレッションで追加した項を括弧て括って<br />
数値を乗算することで調整します。<br />
揺れを強くしたいなら1以上の数値を、弱くしたいならば1以下の数値を掛けましょう-⑦<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/07.png" class="sb-img" rel="shadowbox[post-4884];player=img;"><img class="size-medium wp-image-4891 alignnone" src="http://ae-users.com/jp/wp-content/uploads/2010/08/07-400x60.png" alt="" width="400" height="60" /></a><br />
<br />
この例では最終的に<br />
目標点：&#8221;+0.5*(thisComp.layer(&#8220;ヌル 1&#8243;).transform.position-[320,240,0])&#8221;<br />
位置：&#8221;+0.2*(thisComp.layer(&#8220;ヌル 1&#8243;).transform.position-[320,240,0])&#8221;<br />
の項を記述しました。<br />
<br />
ちなみに（目標点のブレ量）＞（位置のブレ量）にするとカメラの手ぶれっぽくなります。<br />
<br />
最後にモーションブラーをかけて完成です。<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/08.png" class="sb-img" rel="shadowbox[post-4884];player=img;"><img class="size-medium wp-image-4892 alignnone" src="http://ae-users.com/jp/wp-content/uploads/2010/08/08-400x299.png" alt="" width="400" height="299" /></a><br />
<br />
今回作った動画を比較したものとAEPファイルもありますのでこちらもどうぞ。<br />
本当はこの処理を自動化するスクリプトもあればいいんですが、<br />
まだ作れるほどの知識がないので、今後そちらも勉強してTIPSの方に投げたらいいなぁ・・・。<br />
<br />
<a rel="attachment wp-att-4894" href="http://ae-users.com/jp/tutorials/2010/08/%e3%82%a8%e3%82%af%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e5%88%a9%e7%94%a8%e3%81%97%e3%81%9f%ef%bc%93%ef%bd%84%e3%82%ab%e3%83%a1%e3%83%a9%e3%81%ae%e6%89%8b%e3%83%96%e3%83%ac/attachment/sampleaep/">sampleAEP.zip</a><br />
<br />
<a href="http://vimeo.com/14363715"><object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=14363715&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=14363715&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object><br /></a></p>


	タグ : <a href="http://ae-users.com/jp/tag/%e3%82%a8%e3%82%af%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3/" title="エクスプレッション" rel="tag nofollow">エクスプレッション</a>, <a href="http://ae-users.com/jp/tag/%e3%82%ab%e3%83%a1%e3%83%a9/" title="カメラ" rel="tag nofollow">カメラ</a><span id="addbt">[<a onclick="jQuery('p#addtags').slideDown('fast');jQuery('#addbt').fadeOut('fast');">タグを追加する</a>]</span><br />

	<h4>関連する投稿</h4>
	<ul class="st-related-posts">
	<li><a href="http://ae-users.com/jp/resources/2010/05/%e7%94%bb%e9%9d%a2%e3%81%ab%e9%9b%a8%e7%b2%92%e3%81%8c%e5%bd%93%e3%81%9f%e3%82%8b%e8%a1%a8%e7%8f%be/" title="画面に雨粒が当たる表現 (2010/5月/28)">画面に雨粒が当たる表現</a> (3)</li>
	<li><a href="http://ae-users.com/jp/tips/2010/05/%e6%89%8b%e4%bb%98%e3%81%91%e3%81%a7%e3%81%af%e7%b5%b6%e5%af%be%e3%81%ab%e4%bd%9c%e3%82%8a%e3%81%9f%e3%81%8f%e3%81%aa%e3%81%84%e5%8b%95%e7%94%bb/" title="手付けでは絶対に作りたくない動画 (2010/5月/27)">手付けでは絶対に作りたくない動画</a> (12)</li>
	<li><a href="http://ae-users.com/jp/resources/2009/04/%e3%83%91%e3%82%b9%e4%b8%8a%e3%81%ab%e3%83%a2%e3%83%8e%e3%82%92%e5%9d%87%e7%ad%89%e3%81%ab%e9%85%8d%e7%bd%ae%e3%81%99%e3%82%8b%e3%82%b3%e3%83%b3%e3%83%9dver70-pro/" title="パス上にモノを均等に配置するコンポ(ver7.0 pro) (2009/4月/26)">パス上にモノを均等に配置するコンポ(ver7.0 pro)</a> (2)</li>
	<li><a href="http://ae-users.com/jp/resources/2009/05/sp_wave2/" title="トンネルの中でうねうね (2009/5月/15)">トンネルの中でうねうね</a> (6)</li>
	<li><a href="http://ae-users.com/jp/resources/2009/12/createtargetedcamera-script/" title="ターゲットカメラを作成するスクリプト (2009/12月/04)">ターゲットカメラを作成するスクリプト</a> (4)</li>
</ul>

<img src="http://feeds.feedburner.com/~r/aeusers-jp/~4/-jfgavsYVac" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://ae-users.com/jp/tutorials/2010/08/%e3%82%a8%e3%82%af%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e5%88%a9%e7%94%a8%e3%81%97%e3%81%9f%ef%bc%93%ef%bd%84%e3%82%ab%e3%83%a1%e3%83%a9%e3%81%ae%e6%89%8b%e3%83%96%e3%83%ac/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		<feedburner:origLink>http://ae-users.com/jp/tutorials/2010/08/%e3%82%a8%e3%82%af%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e5%88%a9%e7%94%a8%e3%81%97%e3%81%9f%ef%bc%93%ef%bd%84%e3%82%ab%e3%83%a1%e3%83%a9%e3%81%ae%e6%89%8b%e3%83%96%e3%83%ac/</feedburner:origLink></item>
		<item>
		<title>メッシュワープで作るパノラマ画像（Reflect Map）</title>
		<link>http://feedproxy.google.com/~r/aeusers-jp/~3/bwviRs5IHrA/</link>
		<comments>http://ae-users.com/jp/resources/2010/08/%e3%83%a1%e3%83%83%e3%82%b7%e3%83%a5%e3%83%af%e3%83%bc%e3%83%97%e3%81%a7%e4%bd%9c%e3%82%8b%e3%83%91%e3%83%8e%e3%83%a9%e3%83%9e%e7%94%bb%e5%83%8f%ef%bc%88reflect-map%ef%bc%89/#comments</comments>
		<pubDate>Tue, 17 Aug 2010 14:13:16 +0000</pubDate>
		<dc:creator>movi</dc:creator>
				<category><![CDATA[RESOURCES]]></category>

		<guid isPermaLink="false">http://ae-users.com/jp/?p=4867</guid>
		<description><![CDATA[

＜8月19日 更新＞
	プロジェクトファイルに パノラマ画像を After Effectsのエフェクト（CC Sphereとサードパーティプラグイン）で、鏡面反射（Reflect Map）として使えるマップに変換する [...]]]></description>
			<content:encoded><![CDATA[
<p>
<strong>＜8月19日 更新＞</strong><br />
	<li>プロジェクトファイルに パノラマ画像を After Effectsのエフェクト（CC Sphereとサードパーティプラグイン）で、鏡面反射（Reflect Map）として使えるマップに変換するコンポジションを追加しました。</li>
CC Sphere<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/img_0130.jpg" class="sb-img" rel="shadowbox[post-4867];player=img;"><img class="alignnone size-thumbnail wp-image-4880" title="img_0130" src="http://ae-users.com/jp/wp-content/uploads/2010/08/img_0130-190x190.jpg" alt="" width="190" height="190" /></a><br />
Zaxwerks ProAnimator<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/img_0131.jpg" class="sb-img" rel="shadowbox[post-4867];player=img;"><img class="alignnone size-thumbnail wp-image-4881" title="img_0131" src="http://ae-users.com/jp/wp-content/uploads/2010/08/img_0131-190x190.jpg" alt="" width="190" height="190" /></a><br />
<br />
<hr /><br />
After Effectsの3Dレイヤーやサードパーティの3Dプラグインを使って作成したシーンで、パノラマ画像を作るプロジェクトファイルを作ってみました。<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/img_0128.jpg" class="sb-img" rel="shadowbox[post-4867];player=img;"><img class="alignnone size-thumbnail wp-image-4868" title="AE_Panorama" src="http://ae-users.com/jp/wp-content/uploads/2010/08/img_0128-190x190.jpg" alt="" width="190" height="190" /></a><br />
計算で作られた曲線ではなく、メッシュワープを使って手作業でサンプルのパノラマ画像をトレースしているので、繋ぎ目が浮き上がったりしています。<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/img_0126.jpg" class="sb-img" rel="shadowbox[post-4867];player=img;"><img class="alignnone size-thumbnail wp-image-4869" title="AE_Panorama_2" src="http://ae-users.com/jp/wp-content/uploads/2010/08/img_0126-190x190.jpg" alt="" width="190" height="190" /></a><br />
<br />
<strong>プロジェクトファイル</strong>： <a href="http://gimon.blog.ocn.ne.jp/file_demo/AE_Panorama_Test_05.zip">Download（CS4/CS5対応）</a><br />
<br />
<strong>パノラマ画像 サンプル</strong>：<a href="http://gimon.blog.ocn.ne.jp/file_demo/Panorama_Sample.zip">Download（トレース用）</a><br />
<br />
＜使い方ビデオ＞<br />
<br />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="295" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube-nocookie.com/v/scKrH0K_bio?fs=1&amp;hl=ja_JP&amp;rel=0&amp;color1=0x2b405b&amp;color2=0x6b8ab6" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="480" height="295" src="http://www.youtube-nocookie.com/v/scKrH0K_bio?fs=1&amp;hl=ja_JP&amp;rel=0&amp;color1=0x2b405b&amp;color2=0x6b8ab6" allowscriptaccess="always" allowfullscreen="true"></embed></object><br />
<br />
ビデオでは、 LightWave 3D シーンで「Textured Environment」を使って、パノラマ画像を背景にしています。<br />
<br />
これは、After Effectsのプラグイン「Trapcode Horizon」の様なものです。<br />
<br />
プロジェクトファイルには、「Textured Environment」用のパノラマに変換するコンポジションも入っています。<br />
<br />
パノラマ画像のサンプルファイルは、メッシュワープを修正する場合にお使いください。</p>

この投稿にタグはありません。タグはどなたでも追加出来ます！<span id="addbt">[<a onclick="jQuery('p#addtags').slideDown('fast');jQuery('#addbt').fadeOut('fast');">タグを追加する</a>]</span>
	<h4>関連する投稿</h4>
	<ul class="st-related-posts">
	<li>関連する投稿は見つかりませんでした。</li>
	</ul>

<img src="http://feeds.feedburner.com/~r/aeusers-jp/~4/bwviRs5IHrA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://ae-users.com/jp/resources/2010/08/%e3%83%a1%e3%83%83%e3%82%b7%e3%83%a5%e3%83%af%e3%83%bc%e3%83%97%e3%81%a7%e4%bd%9c%e3%82%8b%e3%83%91%e3%83%8e%e3%83%a9%e3%83%9e%e7%94%bb%e5%83%8f%ef%bc%88reflect-map%ef%bc%89/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://ae-users.com/jp/resources/2010/08/%e3%83%a1%e3%83%83%e3%82%b7%e3%83%a5%e3%83%af%e3%83%bc%e3%83%97%e3%81%a7%e4%bd%9c%e3%82%8b%e3%83%91%e3%83%8e%e3%83%a9%e3%83%9e%e7%94%bb%e5%83%8f%ef%bc%88reflect-map%ef%bc%89/</feedburner:origLink></item>
		<item>
		<title>Starglow風の効果を自動で作成するスクリプト</title>
		<link>http://feedproxy.google.com/~r/aeusers-jp/~3/jJwwvFhIncs/</link>
		<comments>http://ae-users.com/jp/tips/scripts-show/2010/08/starglow%e9%a2%a8%e3%81%ae%e5%8a%b9%e6%9e%9c%e3%82%92%e8%87%aa%e5%8b%95%e3%81%a7%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b%e3%82%b9%e3%82%af%e3%83%aa%e3%83%97%e3%83%88/#comments</comments>
		<pubDate>Sun, 08 Aug 2010 13:21:56 +0000</pubDate>
		<dc:creator>takumi_kashima</dc:creator>
				<category><![CDATA[TIPS - スクリプト]]></category>
		<category><![CDATA[TIPS - スクリプト紹介]]></category>
		<category><![CDATA[Scripts]]></category>
		<category><![CDATA[Starglow]]></category>

		<guid isPermaLink="false">http://ae-users.com/jp/?p=4847</guid>
		<description><![CDATA[



Trapcode Starglowのような効果をAfterEffectsの標準エフェクトだけで作成するスクリプトです。
使い方
効果を適用したいレイヤーをタイムライン上で選択した状態でスクリプトを実行します。
パ [...]]]></description>
			<content:encoded><![CDATA[
<p>
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/sgs1.jpg" class="sb-img" rel="shadowbox[post-4847];player=img;"><img class="alignnone size-full wp-image-4848" src="http://ae-users.com/jp/wp-content/uploads/2010/08/sgs1.jpg" alt="" width="640" height="360" /></a><br />
<br />
Trapcode Starglowのような効果をAfterEffectsの標準エフェクトだけで作成するスクリプトです。<br />
<h4>使い方</h4>
効果を適用したいレイヤーをタイムライン上で選択した状態でスクリプトを実行します。<br />
<h4>パラメータ</h4>
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/sgs0.png" class="sb-img" rel="shadowbox[post-4847];player=img;"><img class="alignnone size-full wp-image-4849" src="http://ae-users.com/jp/wp-content/uploads/2010/08/sgs0.png" alt="" width="365" height="581" /></a><br />
<br />
自動作成されたヌルオブジェクトからパラメータを操作することで、効果を調整することができます。<br />
<br />
カラー-色相：30、カラー-オフセット：0<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/sgs2.jpg" class="sb-img" rel="shadowbox[post-4847];player=img;"><img class="alignnone size-full wp-image-4850" src="http://ae-users.com/jp/wp-content/uploads/2010/08/sgs2.jpg" alt="" width="640" height="360" /></a><br />
<br />
カラー-色相：30、カラー-オフセット：170<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/08/sgs3.jpg" class="sb-img" rel="shadowbox[post-4847];player=img;"><img class="alignnone size-full wp-image-4851" src="http://ae-users.com/jp/wp-content/uploads/2010/08/sgs3.jpg" alt="" width="640" height="360" /></a><br />
<h4>ダウンロード</h4>
CS4用とCS5用のスクリプトが別になっているのでご注意ください。<br />
<br />
<a class="dl" href="http://ae-users.com/files/uploader/src/up0033.zip">ダウンロード</a></p>


	タグ : <a href="http://ae-users.com/jp/tag/scripts/" title="Scripts" rel="tag nofollow">Scripts</a>, <a href="http://ae-users.com/jp/tag/starglow/" title="Starglow" rel="tag nofollow">Starglow</a><span id="addbt">[<a onclick="jQuery('p#addtags').slideDown('fast');jQuery('#addbt').fadeOut('fast');">タグを追加する</a>]</span><br />

	<h4>関連する投稿</h4>
	<ul class="st-related-posts">
	<li><a href="http://ae-users.com/jp/resources/2010/03/pencilfx-script/" title="色鉛筆風エフェクトスクリプト＆スケッチ風プリセット (2010/3月/17)">色鉛筆風エフェクトスクリプト＆スケッチ風プリセット</a> (9)</li>
	<li><a href="http://ae-users.com/jp/tips/scripts-show/2010/03/%e8%87%aa%e5%8b%95%e3%81%a7%e3%83%95%e3%82%a7%e3%83%bc%e3%83%89%e3%82%a4%e3%83%b3%e3%83%bb%e3%82%a2%e3%82%a6%e3%83%88%e3%81%95%e3%81%9b%e3%82%8b%e3%82%b9%e3%82%af%e3%83%aa%e3%83%97%e3%83%88%ef%bc%9akd/" title="自動でフェードイン・アウトさせるスクリプト：kd_AutoFade (2010/3月/21)">自動でフェードイン・アウトさせるスクリプト：kd_AutoFade</a> (4)</li>
	<li><a href="http://ae-users.com/jp/tips/scripts-show/2010/05/%e6%97%a5%e6%9c%ac%e8%aa%9e%e7%89%88%e3%81%a7%e5%8b%95%e3%81%8b%e3%81%aa%e3%81%84%e3%82%b9%e3%82%af%e3%83%aa%e3%83%97%e3%83%88%e3%82%92%e5%8b%95%e3%81%8f%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8b/" title="日本語版で動かないスクリプトを動くようにする（Skydome, Quick effects palette） (2010/5月/18)">日本語版で動かないスクリプトを動くようにする（Skydome, Quick effects palette）</a> (9)</li>
	<li><a href="http://ae-users.com/jp/tips/scripts-show/2009/08/useful_scripts/" title="多分あると便利なスクリプト (2009/8月/04)">多分あると便利なスクリプト</a> (2)</li>
	<li><a href="http://ae-users.com/jp/resources/2009/03/translate-expression-script-japanese/" title="他言語で設定されたエクスプレッション制御の記述を起動中の言語に変換するスクリプト (2009/3月/29)">他言語で設定されたエクスプレッション制御の記述を起動中の言語に変換するスクリプト</a> (7)</li>
</ul>

<img src="http://feeds.feedburner.com/~r/aeusers-jp/~4/jJwwvFhIncs" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://ae-users.com/jp/tips/scripts-show/2010/08/starglow%e9%a2%a8%e3%81%ae%e5%8a%b9%e6%9e%9c%e3%82%92%e8%87%aa%e5%8b%95%e3%81%a7%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b%e3%82%b9%e3%82%af%e3%83%aa%e3%83%97%e3%83%88/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		<feedburner:origLink>http://ae-users.com/jp/tips/scripts-show/2010/08/starglow%e9%a2%a8%e3%81%ae%e5%8a%b9%e6%9e%9c%e3%82%92%e8%87%aa%e5%8b%95%e3%81%a7%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b%e3%82%b9%e3%82%af%e3%83%aa%e3%83%97%e3%83%88/</feedburner:origLink></item>
		<item>
		<title>Trapcode Particularのパラメータを日本語化したデスクトップの画像を作ってみました。</title>
		<link>http://feedproxy.google.com/~r/aeusers-jp/~3/b3kwm2dU8J0/</link>
		<comments>http://ae-users.com/jp/tips/2010/07/trapcode-particular%e3%81%ae%e3%83%91%e3%83%a9%e3%83%a1%e3%83%bc%e3%82%bf%e3%82%92%e6%97%a5%e6%9c%ac%e8%aa%9e%e5%8c%96%e3%81%97%e3%81%9f%e3%83%87%e3%82%b9%e3%82%af%e3%83%88%e3%83%83%e3%83%97%e3%81%ae/#comments</comments>
		<pubDate>Tue, 27 Jul 2010 09:38:54 +0000</pubDate>
		<dc:creator>徒</dc:creator>
				<category><![CDATA[TIPS 全般]]></category>

		<guid isPermaLink="false">http://ae-users.com/jp/?p=4840</guid>
		<description><![CDATA[

初投稿です。

Particularになかなかなじめなくて、日本語の翻訳でもあればと思いつきで作ってみました。

訳自体は　http://themaze.blog38.fc2.com/ 様のサイトからお借りさせていた [...]]]></description>
			<content:encoded><![CDATA[
<p>
初投稿です。<br />
<br />
Particularになかなかなじめなくて、日本語の翻訳でもあればと思いつきで作ってみました。<br />
<br />
訳自体は　<a href="http://themaze.blog38.fc2.com/">http://themaze.blog38.fc2.com/</a> 様のサイトからお借りさせていただきました。<br />
<br />
画像サイズ自体は　1920×1200です。<br />
<br />
なので、サイズ的にも、見易さ的にも　もはや個人的な使用目的で作っていたので<br />
<br />
あまり使いやすいとは言えないと思います。<br />
<br />
一応、1440×900で表示した場合、真ん中のパラメーター部分が画面いっぱいになるようになるはず・・・です。<br />
<br />
アイコンを置いていないサブモニタなどに表示させるといいかもしれません。<br />
<br />
それでも、どなたかの役に立てばと思い投稿させていただきました。<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/07/Desctop-original.jpg" class="sb-img" rel="shadowbox[post-4840];player=img;"><img class="alignnone size-large wp-image-4841" src="http://ae-users.com/jp/wp-content/uploads/2010/07/Desctop-original-650x406.jpg" alt="" width="650" height="406" /></a><br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/07/Desctop-original.jpg" class="sb-img" rel="shadowbox[post-4840];player=img;"><br />
<br />
http://ae-users.com/jp/wp-content/uploads/2010/07/Desctop-original.jpg</a><br />
<br />
翻訳してくださいました、<a href="http://themaze.blog38.fc2.com/">http://themaze.blog38.fc2.com/</a>様のサイトには感謝を申し上げます。</p>

この投稿にタグはありません。タグはどなたでも追加出来ます！<span id="addbt">[<a onclick="jQuery('p#addtags').slideDown('fast');jQuery('#addbt').fadeOut('fast');">タグを追加する</a>]</span>
	<h4>関連する投稿</h4>
	<ul class="st-related-posts">
	<li>関連する投稿は見つかりませんでした。</li>
	</ul>

<img src="http://feeds.feedburner.com/~r/aeusers-jp/~4/b3kwm2dU8J0" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://ae-users.com/jp/tips/2010/07/trapcode-particular%e3%81%ae%e3%83%91%e3%83%a9%e3%83%a1%e3%83%bc%e3%82%bf%e3%82%92%e6%97%a5%e6%9c%ac%e8%aa%9e%e5%8c%96%e3%81%97%e3%81%9f%e3%83%87%e3%82%b9%e3%82%af%e3%83%88%e3%83%83%e3%83%97%e3%81%ae/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		<feedburner:origLink>http://ae-users.com/jp/tips/2010/07/trapcode-particular%e3%81%ae%e3%83%91%e3%83%a9%e3%83%a1%e3%83%bc%e3%82%bf%e3%82%92%e6%97%a5%e6%9c%ac%e8%aa%9e%e5%8c%96%e3%81%97%e3%81%9f%e3%83%87%e3%82%b9%e3%82%af%e3%83%88%e3%83%83%e3%83%97%e3%81%ae/</feedburner:origLink></item>
		<item>
		<title>RGB2CMY</title>
		<link>http://feedproxy.google.com/~r/aeusers-jp/~3/Z7qp5OFTz1o/</link>
		<comments>http://ae-users.com/jp/resources/2010/07/rgb2cmy/#comments</comments>
		<pubDate>Tue, 06 Jul 2010 08:25:52 +0000</pubDate>
		<dc:creator>t_e_t_s_u_o</dc:creator>
				<category><![CDATA[RESOURCES]]></category>
		<category><![CDATA[TUTORIALS]]></category>

		<guid isPermaLink="false">http://ae-users.com/jp/?p=4819</guid>
		<description><![CDATA[

RGB分離して、スクリーン合成すると元に戻りますが、今回はRGBをCMYにして、乗算合成して元に戻す方法についてです

CMYはRGBの補色ということなのですが、色を反転するだけではなく、明るさも反転しないとただの反 [...]]]></description>
			<content:encoded><![CDATA[
<p>
RGB分離して、スクリーン合成すると元に戻りますが、今回はRGBをCMYにして、乗算合成して元に戻す方法についてです<br />
<br />
CMYはRGBの補色ということなのですが、色を反転するだけではなく、明るさも反転しないとただの反転になってしまいます。<br />
<br />
ここでチャンネルコンバイナーを使用してまずはRをCに変えます。<br />
チャンネルコンバイナーの変更オプションを赤にして、ターゲットを明度のみに、その下の反転スイッチをONにします<br />
これで赤の明るさの逆ができたので、この白部分をシアンにすればいいことになります。<br />
方法はなんでもいいのですが、ここではUnmultを使用して、明るさからアルファチャンネルを作成して、シアンで塗りつぶしてみます。<br />
Unmultがない場合はチャンネルコンバイナーでも明るさからアルファを作れるので、もう一度チャンネルコンバイナーを適用して、変更オプションを明度、ターゲットをアルファのみにしてもいいと思います<br />
またはシアン平面を作成して、ルミナンスマットしてもいいと思います。<br />
<img src="http://ae-users.com/jp/wp-content/uploads/2010/07/CMY_02.png" alt="" title="CMY_02" width="334" height="380" class="alignleft size-full wp-image-4824" />
<img src="http://ae-users.com/jp/wp-content/uploads/2010/07/CMY_C.png" alt="" title="CMY_C" width="300" height="300" class="alignleft size-full wp-image-4828" />
<hr /><br />
このようにして残りのGからM、BからYを作成します。<br />
<br />
最後に3つをまとめて乗算合成します。<br />
白平面を作成して一番下に配置すると、元通りになっていると思います。<br />
<br />
印刷っぽくしたければ、CMYそれぞれのコンポ内で網点を作成するなどすれば、それっぽくなるかも。<br />
調整は難しいかもしれませんが、いろいろ試してみてください～<br />
<img src="http://ae-users.com/jp/wp-content/uploads/2010/07/CMY_dot.png" alt="" title="CMY_dot" width="500" height="500" class="alignleft size-full wp-image-4822" />
<hr /><br />
このCMYは厳密に印刷の色にはならないので注意してください。あくまでも雰囲気です<br />
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/b07VLpKFClA&#038;fs=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/b07VLpKFClA&#038;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object><br />
<hr /><br />
サンプルプロジェクトはAE7.0<br />
プラグインはUnmult、Formを使用しています<br />
<br />
<a class="dl" href="http://ae-users.com/jp/wp-content/uploads/2010/07/RGB2CMY.zip">ダウンロード</a><br />
<br />
<br />
</p>

この投稿にタグはありません。タグはどなたでも追加出来ます！<span id="addbt">[<a onclick="jQuery('p#addtags').slideDown('fast');jQuery('#addbt').fadeOut('fast');">タグを追加する</a>]</span>
	<h4>関連する投稿</h4>
	<ul class="st-related-posts">
	<li>関連する投稿は見つかりませんでした。</li>
	</ul>

<img src="http://feeds.feedburner.com/~r/aeusers-jp/~4/Z7qp5OFTz1o" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://ae-users.com/jp/resources/2010/07/rgb2cmy/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://ae-users.com/jp/resources/2010/07/rgb2cmy/</feedburner:origLink></item>
		<item>
		<title>エクスプレッションでつくるロゴデザイン「LogoTransform」</title>
		<link>http://feedproxy.google.com/~r/aeusers-jp/~3/Yt5oAVsG4CI/</link>
		<comments>http://ae-users.com/jp/tips/2010/07/%e3%82%a8%e3%82%af%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a7%e3%81%a4%e3%81%8f%e3%82%8b%e3%83%ad%e3%82%b4%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%8clogotransform/#comments</comments>
		<pubDate>Sat, 03 Jul 2010 16:24:58 +0000</pubDate>
		<dc:creator>Toyo</dc:creator>
				<category><![CDATA[RESOURCES]]></category>
		<category><![CDATA[TIPS 全般]]></category>
		<category><![CDATA[TUTORIALS]]></category>
		<category><![CDATA[エクスプレッション]]></category>
		<category><![CDATA[エフェクト]]></category>

		<guid isPermaLink="false">http://ae-users.com/jp/?p=4788</guid>
		<description><![CDATA[ロゴを変形させるエフェクトの紹介です。エクスプレッション製ですので、改変等自由に行えます。]]></description>
			<content:encoded><![CDATA[
<p>
<a href="http://ae-users.com/jp/wp-content/uploads/2010/07/c87657c554bba34604b1ce8f70794d62.png" class="sb-img" rel="shadowbox[post-4788];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/07/c87657c554bba34604b1ce8f70794d62-650x406.png" alt="" width="650" height="406" class="alignnone size-large wp-image-4789" /></a><br />
<br />
<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12986370&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=12986370&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object><br /><br />
お久しぶりです。とよです。<br />
今回は、ロゴがバラバラの状態から徐々に組み上がって行く演出をする為のエフェクトを、<br />
エクスプレッションを使用して作ってみました。<br />
具体的な使い方および、エクスプレッションの解説はニコニコ動画上で行っています。<br />
アカウントをお持ちでない方もいらっしゃると思うので、<br />
動画を貼付けたブログのURLを貼っておきます。<br />
<br />
<a href="http://toa-cinematograph.blogspot.com/2010/07/logotransform.html">ブログ：cinema+graph</a><br />
<br />
ダウンロードファイルはアニメーションプリセットのデータです。<br />
AEのプリセットフォルダに入れてください。CS４環境で制作しています。<br />
<a class="dl" href='http://ae-users.com/jp/wp-content/uploads/2010/07/LogoTransform.zip'>LogoTransform</a><br />
</p>


	タグ : <a href="http://ae-users.com/jp/tag/%e3%82%a8%e3%82%af%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3/" title="エクスプレッション" rel="tag nofollow">エクスプレッション</a>, <a href="http://ae-users.com/jp/tag/%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88/" title="エフェクト" rel="tag nofollow">エフェクト</a><span id="addbt">[<a onclick="jQuery('p#addtags').slideDown('fast');jQuery('#addbt').fadeOut('fast');">タグを追加する</a>]</span><br />

	<h4>関連する投稿</h4>
	<ul class="st-related-posts">
	<li><a href="http://ae-users.com/jp/resources/2010/05/%e7%94%bb%e9%9d%a2%e3%81%ab%e9%9b%a8%e7%b2%92%e3%81%8c%e5%bd%93%e3%81%9f%e3%82%8b%e8%a1%a8%e7%8f%be/" title="画面に雨粒が当たる表現 (2010/5月/28)">画面に雨粒が当たる表現</a> (3)</li>
	<li><a href="http://ae-users.com/jp/tips/2009/04/%e3%82%a8%e3%82%af%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e5%88%b6%e5%be%a1%e3%81%ae%e7%b5%90%e5%90%88/" title="エクスプレッション制御の結合 (2009/4月/16)">エクスプレッション制御の結合</a> (5)</li>
	<li><a href="http://ae-users.com/jp/tips/2010/04/%e3%82%a8%e3%82%af%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a7%e3%81%a4%e3%81%8f%e3%82%8b%e6%8c%af%e5%8b%95%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88%e3%80%8cpuyo/" title="エクスプレッションでつくる振動エフェクト「Puyo」 (2010/4月/16)">エクスプレッションでつくる振動エフェクト「Puyo」</a> (16)</li>
	<li><a href="http://ae-users.com/jp/resources/2009/12/%e8%8b%b1%e8%aa%9e%e7%89%88%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88%e5%90%8d%e3%82%92%e6%97%a5%e6%9c%ac%e8%aa%9e%e7%89%88%e3%81%a7%e4%bd%bf%e7%94%a8/" title="英語版エフェクト名を日本語版で使用するプリセット集 (2009/12月/28)">英語版エフェクト名を日本語版で使用するプリセット集</a> (12)</li>
	<li><a href="http://ae-users.com/jp/tips/2010/05/%e6%89%8b%e4%bb%98%e3%81%91%e3%81%a7%e3%81%af%e7%b5%b6%e5%af%be%e3%81%ab%e4%bd%9c%e3%82%8a%e3%81%9f%e3%81%8f%e3%81%aa%e3%81%84%e5%8b%95%e7%94%bb/" title="手付けでは絶対に作りたくない動画 (2010/5月/27)">手付けでは絶対に作りたくない動画</a> (12)</li>
</ul>

<img src="http://feeds.feedburner.com/~r/aeusers-jp/~4/Yt5oAVsG4CI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://ae-users.com/jp/tips/2010/07/%e3%82%a8%e3%82%af%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a7%e3%81%a4%e3%81%8f%e3%82%8b%e3%83%ad%e3%82%b4%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%8clogotransform/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		<feedburner:origLink>http://ae-users.com/jp/tips/2010/07/%e3%82%a8%e3%82%af%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a7%e3%81%a4%e3%81%8f%e3%82%8b%e3%83%ad%e3%82%b4%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%8clogotransform/</feedburner:origLink></item>
		<item>
		<title>アニメ制作者のためのAfterEffectsプラグイン作成入門(第６回)　Effectプラグインの構造・ユーザーインターフェース</title>
		<link>http://feedproxy.google.com/~r/aeusers-jp/~3/zi110xhm3L8/</link>
		<comments>http://ae-users.com/jp/resources/2010/06/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-7/#comments</comments>
		<pubDate>Sat, 12 Jun 2010 16:18:16 +0000</pubDate>
		<dc:creator>bry-ful</dc:creator>
				<category><![CDATA[RESOURCES]]></category>
		<category><![CDATA[TUTORIALS]]></category>
		<category><![CDATA[program]]></category>
		<category><![CDATA[プラグイン]]></category>

		<guid isPermaLink="false">http://ae-users.com/jp/?p=4661</guid>
		<description><![CDATA[

Effectプラグイン
今回はEffectプラグインについて解説します。
第２回の投稿でEffectプラグインの概要を説明していますので、まずそれに目を通しておいてください。今回はその補足的な内容になり、主にエフェク [...]]]></description>
			<content:encoded><![CDATA[
<p>
<h4>Effectプラグイン</h4>
今回はEffectプラグインについて解説します。<br />
第２回の投稿でEffectプラグインの概要を説明していますので、まずそれに目を通しておいてください。今回はその補足的な内容になり、主にエフェクトコントロールに表示されるインターフェースについてがメインとなります。<br />
<h4>EventCheckプラグイン</h4>
Effectプラグインは最初に<strong>EntryPointFunc</strong>関数が呼び出され、引数のセレクタ(PF_Cmd)によって処理を分岐させて実行します。この詳細はドキュメントに説明されていますが、あまり実感できなかったので、それを確認するプラグインを作成してみました。<br />
<br />
EventCheckのダウンロード<br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/ap/06/EventCheck.zip">EventCheck.zipのダウンロード</a><br />
<br />
このプラグインは特に解説することはありません。単純にセレクタ毎にダイアログに最低限の情報を表示するだけのエフェクトです。ソースも入っていますが、とりあえず<strong>EventCheck-MT.aex</strong>をインストールして動作を確認してみてください。<br />
Effectプラグインの各イベントがどのようなタイミングで発生しているか体感できます（滅茶苦茶うっとおしいので、体感できたらアンインストールしましょう）<br />
<br />
ダイアログの表示はWindows APIを直接呼び出して表示しています。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/eventcheck.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4668" src="http://ae-users.com/jp/wp-content/uploads/2010/06/eventcheck.png" alt="" width="281" height="245" /></a><br />
<br />
<strong>out_flags</strong>に<strong>PF_OutFlag_I_DO_DIALOG</strong>を設定してありますので、エフェクトコントロールに<strong>オプション</strong>がっ表示されています。<strong>PF_Cmd_DO_DIALOG</strong>セレクタでダイアログを表示させれば、オプションダイアログを表示できます。僕はDebug時変数の表示とかさせるときによく使ってます。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/eventcheck02.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4669" src="http://ae-users.com/jp/wp-content/uploads/2010/06/eventcheck02.png" alt="" width="338" height="79" /></a><br />
<br />
このプラグインを登録した状態でAfter Effectsをいろいろ操作していると、思いがけないタイミングでいろいろなイベントがプラグインに発生してることが体感できます。<br />
<br />
極稀に、登録した後エフェクトコントロールから削除してもイベントが発生し続ける事があります。流石にプロジェクト自体を新たに作成すればイベントはなくなりますが、キャシュのタイミングはなかなか予測しづらいので困ります。<br />
<h4>エフェクトコントロール</h4>
エフェクトコントロールに表示されるインターフェースは、<strong>ParamsSetup</strong>で設定します。<br />
<br />
インターフェースの構築はプラットホーム依存があり、Windows APIを直接呼び出さないといけない事やコールバック関数を多用しないといけないこともありかなり難易度が高いです。そのためSDKでは簡単に作成できるように基本となるコントロールが用意されています。<br />
<br />
<strong>Param_Utils.h</strong>でマクロ定義されていて、実際には<strong>add_param</strong>コールバック関数を呼び出すことで実装されています。これらを使えば、Windows/Macintosh両方で使えるコントロールが容易に使うことができます。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control00.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4674" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control00.png" alt="" width="331" height="247" /></a><br />
<br />
サンプルとして第３回で作成した<strong>スケルトン</strong>を使います。上の図は<strong>MySkeleton.aex</strong>のエフェクトコントロールで、今回説明するコントロールがすべて設定されています。<br />
また、プログラマが自由にインターフェースを作成出来るカスタムコントロールもSDKには用意されていますが、かなり複雑でWindows/Macで別のコードを作成する必要があります。今回カスタムコントロールの作成には触れません（僕自身作ったことがないので^^;）<br />
<h4>PF_ADD_COLOR</h4>
色を指定するコントロールを登録します。カラーピッカーを表示させたり、スポイトで色を拾う事ができます。<br />
<strong>Param_Utils.h</strong>で定義されたこれらのマクロは、<strong>PF_ParamDef	 def</strong>構造体変数を内部で使用しています。def変数は使いまわすので、AEFX_CLR_STRUCTマクロで毎回初期化します。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control01_color.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4675" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control01_color.png" alt="" width="326" height="116" /></a><br />
<table border="1">
<tbody>
<tr>
<th>引数ナンバー</th>
<th>型</th>
<th>説明</th>
</tr>
<tr>
<td>第１引数</td>
<td>char配列(文字列)</td>
<td>表示されるキャプション文字列</td>
</tr>
<tr>
<td>第２引数</td>
<td>A_char</td>
<td>デフォルトの色のR値</td>
</tr>
<tr>
<td>第３引数</td>
<td>A_char</td>
<td>デフォルトの色のG値</td>
</tr>
<tr>
<td>第４引数</td>
<td>A_char</td>
<td>デフォルトの色のB値</td>
</tr>
<tr>
<td>第５引数</td>
<td>A_long</td>
<td>パラメータコントロールのインデックス値</td>
</tr>
</tbody>
</table>
ここの色はPF_Pixel(8bit)カラーになります。残念ながらPF_Pixel16(16bit)カラーのパラメータを扱う方法は不明です。一部のプラグインで実装している物がありますが、多分カスタムパラメータを独自に作成しているのだと思われます。<br />
まぁ、現在のところディスプレイが24bitのものしか表示できないのでPF_Pixel16(16bit)カラー無駄っぽいです。<br />
<br />
パラメータの獲得はRender関数で以下のように行います。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control01_color_get.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4684" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control01_color_get.gif" alt="" width="399" height="30" /></a><br />
<br />
params配列には、ParamSetupで登録された順番でパラメータの値がありますので、同じインデックス値を指定して構造体のメンバから値を取り出します。<br />
<h4>PF_ADD_SLIDER</h4>
整数値を指定するスライダを表示するコントロールを登録します。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control02_slider.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4678" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control02_slider.png" alt="" width="430" height="144" /></a><br />
<table border="1">
<tbody>
<tr>
<th>引数ナンバー</th>
<th>型</th>
<th>説明</th>
</tr>
<tr>
<td>第１引数</td>
<td>char配列(文字列)</td>
<td>表示されるキャプション文字列</td>
</tr>
<tr>
<td>第２引数</td>
<td>A_long</td>
<td>数値入力する場合の最小値</td>
</tr>
<tr>
<td>第３引数</td>
<td>A_long</td>
<td>数値入力する場合の最大値</td>
</tr>
<tr>
<td>第４引数</td>
<td>A_long</td>
<td>スライダーでの最小値</td>
</tr>
<tr>
<td>第５引数</td>
<td>A_long</td>
<td>スライダーでの最大値</td>
</tr>
<tr>
<td>第６引数</td>
<td>A_long</td>
<td>デフォルトの値</td>
</tr>
<tr>
<td>第７引数</td>
<td>A_long</td>
<td>パラメータコントロールのインデックス値</td>
</tr>
</tbody>
</table>
整数値の範囲は、-32000から32000の間になります。型をA_longとしてますが、内部的にはPF_Fixedで処理されているらしくA_shortになります。範囲外の数値は無視されるようです。<br />
<br />
パラメータの獲得は以下のとおりです。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control02_slide_get.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4697" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control02_slide_get.gif" alt="" width="378" height="39" /></a><br />
<h4>PF_ADD_FIXED</h4>
固定小数を指定するコントロールを登録します。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control03_fixed.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4683" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control03_fixed.png" alt="" width="429" height="190" /></a><br />
<table border="1">
<tbody>
<tr>
<th>引数ナンバー</th>
<th>型</th>
<th>説明</th>
</tr>
<tr>
<td>第１引数</td>
<td>char配列(文字列)</td>
<td>表示されるキャプション文字列</td>
</tr>
<tr>
<td>第２引数</td>
<td>double</td>
<td>数値入力する場合の最小値</td>
</tr>
<tr>
<td>第３引数</td>
<td>double</td>
<td>数値入力する場合の最大値</td>
</tr>
<tr>
<td>第４引数</td>
<td>double</td>
<td>スライダーでの最小値</td>
</tr>
<tr>
<td>第５引数</td>
<td>double</td>
<td>スライダーでの最大値</td>
</tr>
<tr>
<td>第６引数</td>
<td>double</td>
<td>デフォルトの値</td>
</tr>
<tr>
<td>第７引数</td>
<td>A_long</td>
<td>表示される小数部の桁数</td>
</tr>
<tr>
<td>第８引数</td>
<td>A_long</td>
<td>１で％を表示する</td>
</tr>
<tr>
<td>第９引数</td>
<td>A_long</td>
<td>不明</td>
</tr>
<tr>
<td>第１０引数</td>
<td>A_long</td>
<td>パラメータコントロールのインデックス値</td>
</tr>
</tbody>
</table>
引数はdouble扱いですが、内部でPF_Fixed(A_long)へ変換されています。<br />
<br />
パラメータの獲得は以下のとおりです。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control03_fixed_get.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4698" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control03_fixed_get.gif" alt="" width="384" height="35" /></a><br />
<h4>PF_ADD_PERCENT</h4>
パーセントを指定するコントロールを登録します。実際は<strong>PF_ADD_FIXED</strong>と同じものです。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control04_per.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4699" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control04_per.gif" alt="" width="296" height="101" /></a><br />
<table border="1">
<tbody>
<tr>
<th>引数ナンバー</th>
<th>型</th>
<th>説明</th>
</tr>
<tr>
<td>第１引数</td>
<td>char配列(文字列)</td>
<td>表示されるキャプション文字列</td>
</tr>
<tr>
<td>第２引数</td>
<td>double</td>
<td>デフォルトの値</td>
</tr>
<tr>
<td>第３引数</td>
<td>A_long</td>
<td>パラメータコントロールのインデックス値</td>
</tr>
</tbody>
</table>
パラメータの獲得方法は<strong>PF_ADD_FIXED</strong>と同じです。<br />
<h4>PF_ADD_CHECKBOX</h4>
チェックボックスを登録します。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control04_cb1.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4713" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control04_cb1.gif" alt="" width="220" height="137" /></a><br />
<table border="1">
<tbody>
<tr>
<th>引数ナンバー</th>
<th>型</th>
<th>説明</th>
</tr>
<tr>
<td>第１引数</td>
<td>char配列(文字列)</td>
<td>表示されるキャプション文字列</td>
</tr>
<tr>
<td>第２引数</td>
<td>char配列(文字列)</td>
<td>チェックボックスのキャプションの文字列</td>
</tr>
<tr>
<td>第３引数</td>
<td>PF_Boolean</td>
<td>デフォルトの値。TRUEでON</td>
</tr>
<tr>
<td>第４引数</td>
<td>A_long</td>
<td>不明</td>
</tr>
<tr>
<td>第５引数</td>
<td>A_long</td>
<td>パラメータコントロールのインデックス値</td>
</tr>
</tbody>
</table>
パラメータの獲得は以下のとおりです。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control04_cb_get.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4707" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control04_cb_get.gif" alt="" width="454" height="37" /></a><br />
<br />
何故か型キャストをしないとエラーになります。<br />
<h4>PF_ADD_ANGLE</h4>
角度入力のUIを登録します。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control05_rot.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4716" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control05_rot.gif" alt="" width="252" height="97" /></a><br />
<table border="1">
<tbody>
<tr>
<th>引数ナンバー</th>
<th>型</th>
<th>説明</th>
</tr>
<tr>
<td>第１引数</td>
<td>char配列(文字列)</td>
<td>表示されるキャプション文字列</td>
</tr>
<tr>
<td>第２引数</td>
<td>PF_Fixed</td>
<td>デフォルトの値。TRUEでON</td>
</tr>
<tr>
<td>第３引数</td>
<td>A_long</td>
<td>パラメータコントロールのインデックス値</td>
</tr>
</tbody>
</table>
パラメータの獲得は以下のとおりです。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control05_rot_get.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4719" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control05_rot_get.gif" alt="" width="386" height="35" /></a><br />
<br />
型はPF_Fixedの値となっています。<br />
<h4>PF_ADD_POPUP</h4>
ポップアップメニューを登録します。<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control06_pop.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4720" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control06_pop.gif" alt="" width="361" height="116" /></a><br />
<table border="1">
<tbody>
<tr>
<th>引数ナンバー</th>
<th>型</th>
<th>説明</th>
</tr>
<tr>
<td>第１引数</td>
<td>char配列(文字列)</td>
<td>表示されるキャプション文字列</td>
</tr>
<tr>
<td>第２引数</td>
<td>A_long</td>
<td>ポップアップメニューの要素数</td>
</tr>
<tr>
<td>第３引数</td>
<td>A_long</td>
<td>ポップアップメニューのデフォルト値</td>
</tr>
<tr>
<td>第４引数</td>
<td>char配列(文字列)</td>
<td>ポップアップメニューに表示される文字列</td>
</tr>
<tr>
<td>第５引数</td>
<td>A_long</td>
<td>パラメータコントロールのインデックス値</td>
</tr>
</tbody>
</table>
第４引数は”AAAA|BBBB|CCC&#8221;といった表記になります。第３引数は、１から始まるインデックスになります。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control06_pop2.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4721" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control06_pop2.gif" alt="" width="258" height="56" /></a><br />
<br />
獲得は以下のとおりです。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control06_pop_get.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4722" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control06_pop_get.gif" alt="" width="392" height="39" /></a><br />
<br />
これも１から始まるインデックス値となります。<br />
<h4>PF_ADD_POINT</h4>
位置指定のUIを登録します。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control07_pos.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4723" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control07_pos.gif" alt="" width="458" height="121" /></a><br />
<table border="1">
<tbody>
<tr>
<th>引数ナンバー</th>
<th>型</th>
<th>説明</th>
</tr>
<tr>
<td>第１引数</td>
<td>char配列(文字列)</td>
<td>表示されるキャプション文字列</td>
</tr>
<tr>
<td>第２引数</td>
<td>PF_Fixed</td>
<td>デフォルト位置のX座標をパーセントで指定</td>
</tr>
<tr>
<td>第３引数</td>
<td>PF_Fixed</td>
<td>デフォルト位置のY座標をパーセントで指定</td>
</tr>
<tr>
<td>第４引数</td>
<td>PF_Boolean</td>
<td>パラメータの値を画面内に収めるか、画面外を許すか決めるフラグ。 TRUEで画面内に収まる。</td>
</tr>
<tr>
<td>第５引数</td>
<td>A_long</td>
<td>パラメータコントロールのインデックス値</td>
</tr>
</tbody>
</table>
獲得は以下のとおりです。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control07_pos_get.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4724" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control07_pos_get.gif" alt="" width="405" height="57" /></a><br />
<br />
値はPF_Fixed(固定小数)なので注意してください。位置を決めるピッカーは、画面が拡大表示されている場合は小数有りで値が帰ってきます。<br />
<h4>PF_ADD_TOPIC / PF_END_TOPIC</h4>
コントロールをグループ表示するマクロです。<strong>PF_ADD_TOPIC</strong>と<strong>PF_END_TOPIC</strong>に挟まれて登録されたUIはグループ化しされて、表示・非表示を切り替えられます。<br />
<br />
グループ開始は以下のように登録します。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control08_topic.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4725" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control08_topic.gif" alt="" width="337" height="101" /></a><br />
<br />
グループ終了は以下のように登録します。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/control08_topic_end.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img class="aligncenter size-full wp-image-4726" src="http://ae-users.com/jp/wp-content/uploads/2010/06/control08_topic_end.gif" alt="" width="271" height="55" /></a><br />
<br />
このマクロにはパラメータがありませんので、獲得はないです。<br />
<h4>エクスプレッション制御</h4>
Effectプラグインの中でちょっと変わったもので<strong>エクスプレッション制御</strong>関係のプラグインがあります（標準プラグイン）<br />
これらは画像エフェクトは無く、ただエクスプレッション用のパラメータを実装するためだけのプラグインです。<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/exctrl.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/06/exctrl.png" alt="" width="372" height="106" class="aligncenter size-full wp-image-4731" /></a><br />
<br />
今まで僕はこのプラグインはout_flagsかコールバック関数を使って画面描画を停止した特別なプラグインだと思っていました。今回調べてわかったのですが、実はしっかりRenderイベントが発生していて、描画用のoutput画像が確保されているようです。ちゃんと32bit描画まで対応してました。<br />
このプラグインは単純に画像のコピー(PF_COPYかな）を行うプラグインに適当な入力パラメータを登録したもので<strong>普通のEffectプラグイン</strong>でした。<br />
<br />
描画対象のレイヤにこのプラグインを登録すると、描画時に無駄なメモリが消費されるって意味でもあります。<br />
ヌルレイヤか、ガイドレイヤに登録しないとかなりもったいないというか、レンダリング時に不安定な動作を起こす原因にも成りかねません(実際はキャッシュの関係でそこまでは深刻でないと思いますけど）<br />
<hr /><br />
エクスプレッション制御関係のプラグインがただのEffectプラグインならば、多分初心者が一番作りやすく、有効な使い道に出来るネタになります。<br />
スクリプトを作成する時に一番面倒なのがユーザーインターフェースで、エクスプレッション制御を多用しがちですが、汎用コントロール故に結構使いづらかったので、そこをプラグインで作っておけば、使用時に楽になるかなぁとか。<br />
というわけで、エクスプレッション制御のプラグインとして <strong>ColorControls</strong>と<strong>画面動制御</strong>の二つのサンプルプラグインを作ってみました。<br />
<h4>エクスプレッション制御を作る ColorControls</h4>
<strong>ColorControls</strong>は、複数のカラーパラメータをもったプラグインです。標準の「カラー制御」を１０個並べた物と同じ機能になります。<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/colorcontrols.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/06/colorcontrols.png" alt="" width="387" height="315" class="aligncenter size-full wp-image-4732" /></a><br />
<br />
スクリプト作成時に色の置き場に使えるものです。おまけで画面に色をサンプル表示する機能もつけてあります。<br />
さすがに簡単なプラグインなので説明はなしで、詳細はソースを参照してください。<br />
<br />
ColorControlsのソース<br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/ap/06/ColorControls.zip">ColorControls.zipのダウンロード</a><br />
<h4>エクスプレッション制御を作る 画面動制御 ShakeControl</h4>
<strong>画面動制御</strong>プラグインは、スクリプトで画面動を実装するときに必要なパラメータをまとめたものです。専用なのでユーザーが使い易くなると思います。<br />
 <a href="http://ae-users.com/jp/wp-content/uploads/2010/06/shakecontrol.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/06/shakecontrol.png" alt="" width="378" height="243" class="aligncenter size-full wp-image-4739" /></a><br />
<br />
これも簡単なプラグインなので、詳細はソースを参照してください。ただ、そのままビルドすると問題が発生します。<br />
画面動制御のソース<br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/ap/06/ShakeControl.zip">ShakeControl.zipのダウンロード</a><br />
<h4>プラグインの日本語表示</h4>
<strong>画面動制御</strong>プラグインは、僕がほとんどやらない日本語表示のプラグインです。単純に、PiPLリソース定義ファイルのName要素を<strong>&#8220;画面動制御&#8221;</strong>にしただけですが、普通にビルドすると下図のように文字化けが発生します。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/shakecontrol_miss.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/06/shakecontrol_miss.png" alt="" width="381" height="187" class="aligncenter size-full wp-image-4744" /></a><br />
<br />
cppのコードから設定したパラメータの文字列は正常ですが、PiPLリソース関係の文字列はすべて文字化けします。<br />
原因はリソース作成時に使うPiPLtool.exeが日本語に対応していないというとっても素敵な物です。こいつのおかげでプラグイン作成を挫折した人はかなり多そうです。<br />
ビルドを行ってから、VSのソリューションに登録されているｒｃファイルを右クリックしてコード表示させると、<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rc_miss.gif" class="sb-img" rel="shadowbox[post-4661];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/06/rc_miss.gif" alt="" width="295" height="321" class="aligncenter size-full wp-image-4745" /></a><br />
<br />
見事に文字化けしています。<br />
<br />
対処はちょっと面倒ですが可能です。以下の手順で正常に日本語を表示させることができます。<br />
<ol>
<li>まず、リビルドを行う。<br />
rファイルに定義されているコマンドラインでrcファイルを更新させます。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/sc01.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/06/sc01.png" alt="" width="286" height="79" class="aligncenter size-full wp-image-4746" /></a><br />
</li>
<li>ｒｃファイルを右クリックしてコードの表示。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/sc02.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/06/sc02.png" alt="" width="407" height="135" class="aligncenter size-full wp-image-4748" /></a><br />
</li>
<li>文字化している箇所を特定して、正常な物に書き換える。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/sc03.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/06/sc03.png" alt="" width="188" height="33" class="aligncenter size-full wp-image-4749" /></a><br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/sc04.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/06/sc04.png" alt="" width="184" height="34" class="aligncenter size-full wp-image-4750" /></a><br />
<br />
目安として文字列の先頭に&#8221;￥ｘ０？&#8221;という文字があり、末尾には&#8221;￥０&#8221;が０個から３個あるはずなので、その間を書き換えます。<br />
</li>
<li>ビルドを行う。(リビルドではない。間違えてリビルドしたら最初からやり直し)<br />
rcファイルのみが更新されているので、それのみがビルドされてaexファイルが出力される。<br />
</li>
</ol>
<br />
これで文字化けは治るはずですが、リビルドするとまたもとに戻ってしまうので注意が必要です。<br />
<h4>PiPltoolX.exe</h4>
上記の手順があまりにも面倒なので、PiPLtool.exeと同様な機能を持つコマンドを作成しました。<br />
<br />
PiPltoolX.exeのダウンロード (実行には.NetFramework3.5のインストールが必要)<br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/ap/06/PiPltoolX.zip">PiPltoolX.zipのダウンロード</a><br />
PiPltoolX.exeのソースのダウンロード(VC# 2008で作成 )<br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/ap/06/PiPltoolX_src.zip">PiPltoolX_src.zipのダウンロード</a><br />
<br />
使い方は、PiPLtool.exeと同じフォルダに移動します（Examples\Resourcesフォルダ）<br />
次に、日本語表示を行いたいリソース定義ファイルをVC++のIDEで右クリック。プロパティのカスタムビルドステップ：コマンドラインの項目を表示させます。<br />
<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/PiPLx.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/06/PiPLx.png" alt="" width="562" height="298" class="alignnone size-full wp-image-4765" /></a><br />
<br />
このコマンドラインでPiPLToolが指定されているので、これをPiPLToolXに修正すれば、あとは普通にリビルドすればOKになります。<br />
<br />
あと、<strong>PiPLToolX.exe</strong>はリソース定義のすべてには対応していませんので注意してください。日本語表示を行わない限りはなるべく標準のPiPLTool.exeを使用してください。<br />
<h4>PixelReplace.aex　/ PixelSelector.aex</h4>
今回これだけだと寂しいのでパラメータインターフェースのサンプルとして<strong>PixelReplace.aex</strong>と<strong>PixelSelector.aex</strong>も作成しました。<br />
<br />
PixelReplaceはF&#8217;s ColorChangeと同じ機能、PixelSelectorはF&#8217;s SelectColorと同じ機能を持つものです。違いは入力系のコーディングを工夫してパラメータの数を自由に出来るようにしたものです。<br />
ターゲットの色が８色から２４色へ増やしています。若干ですが実行速度も最適化してあります。置き換える色の不透明度もいじれるようにもしてあります。<br />
<br />
プログラム自体はこれも簡単なものなのでソースを参照してください。<br />
<br />
PixelReplace<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/PixelReplace.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/06/PixelReplace.png" alt="" width="437" height="545" class="alignnone size-full wp-image-4776" /></a><br />
PixelReplaceのダウンロード<br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/ap/06/PixelReplace.zip">PixelReplace.zipのダウンロード</a><br />
<br />
<br />
PixelSelector<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/PixelSelector.png" class="sb-img" rel="shadowbox[post-4661];player=img;"><img src="http://ae-users.com/jp/wp-content/uploads/2010/06/PixelSelector.png" alt="" width="328" height="338" class="alignnone size-full wp-image-4777" /></a><br />
PixelSelectorのダウンロード<br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/ap/06/PixelSelector.zip">PixelSelector.zipのダウンロード</a><br />
<br />
この二つはもう少し修正してF&#8217;s Pluginに加える予定です。実は上のサンプルコードは既に16Bit対応は完了したものになってますので、普通に業務に使えるはずです。<br />
<h4>次回予告</h4>
前回・前々回と難しめな内容だったので、今回は簡単な内容にしてみました。その分解説も端折りました。もしもっと詳しい解説が欲しいと要望があれば、追加説明もするつもりです。<br />
<br />
予定していた「Effectsプラグインのユーザーインターフェース」は今回でやってしまったので、次回は<strong>「プラグイン作成時のTips」</strong>です。</p>


	タグ : <a href="http://ae-users.com/jp/tag/program/" title="program" rel="tag nofollow">program</a>, <a href="http://ae-users.com/jp/tag/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3/" title="プラグイン" rel="tag nofollow">プラグイン</a><span id="addbt">[<a onclick="jQuery('p#addtags').slideDown('fast');jQuery('#addbt').fadeOut('fast');">タグを追加する</a>]</span><br />

	<h4>関連する投稿</h4>
	<ul class="st-related-posts">
	<li><a href="http://ae-users.com/jp/resources/2010/06/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-6/" title="アニメ制作者のためのAfterEffectsプラグイン作成入門(第５回)　スパッタリングプラグインを作成 (2010/6月/04)">アニメ制作者のためのAfterEffectsプラグイン作成入門(第５回)　スパッタリングプラグインを作成</a> (13)</li>
	<li><a href="http://ae-users.com/jp/resources/2010/05/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-5/" title="アニメ制作者のためのAfterEffectsプラグイン作成入門(第４回)　オリジナルノイズフィルタを作ってみよう！ (2010/5月/23)">アニメ制作者のためのAfterEffectsプラグイン作成入門(第４回)　オリジナルノイズフィルタを作ってみよう！</a> (5)</li>
	<li><a href="http://ae-users.com/jp/resources/2010/05/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-3/" title="アニメ制作者のためのAfterEffectsプラグイン作成入門(第２回)　とりあえず作ってみよう！ (2010/5月/09)">アニメ制作者のためのAfterEffectsプラグイン作成入門(第２回)　とりあえず作ってみよう！</a> (6)</li>
	<li><a href="http://ae-users.com/jp/tutorials/2010/05/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-2/" title="アニメ制作者のためのAfterEffectsプラグイン作成入門(第１回)　SDKをコンパイルしてみよう! (2010/5月/05)">アニメ制作者のためのAfterEffectsプラグイン作成入門(第１回)　SDKをコンパイルしてみよう!</a> (8)</li>
	<li><a href="http://ae-users.com/jp/tutorials/2010/05/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac/" title="アニメ制作者のためのAfterEffectsプラグイン作成入門(第０回) (2010/5月/05)">アニメ制作者のためのAfterEffectsプラグイン作成入門(第０回)</a> (10)</li>
</ul>

<img src="http://feeds.feedburner.com/~r/aeusers-jp/~4/zi110xhm3L8" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://ae-users.com/jp/resources/2010/06/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-7/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>http://ae-users.com/jp/resources/2010/06/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-7/</feedburner:origLink></item>
		<item>
		<title>アニメ制作者のためのAfterEffectsプラグイン作成入門(第５回)　スパッタリングプラグインを作成</title>
		<link>http://feedproxy.google.com/~r/aeusers-jp/~3/xYWmynWetro/</link>
		<comments>http://ae-users.com/jp/resources/2010/06/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-6/#comments</comments>
		<pubDate>Thu, 03 Jun 2010 16:48:36 +0000</pubDate>
		<dc:creator>bry-ful</dc:creator>
				<category><![CDATA[RESOURCES]]></category>
		<category><![CDATA[TUTORIALS]]></category>
		<category><![CDATA[program]]></category>
		<category><![CDATA[プラグイン]]></category>

		<guid isPermaLink="false">http://ae-users.com/jp/?p=4544</guid>
		<description><![CDATA[

スパッタリングとは
この業界に入って知ったテクニックで驚いたのが、「画面動」・「サブリナ」・「スパッタリング」

新人時代、動画の出来があまり良くない爆発のカットを、演出さんが「画面動」・「サブリナ」・「スパッタリン [...]]]></description>
			<content:encoded><![CDATA[
<p>
<h4>スパッタリングとは</h4>
この業界に入って知ったテクニックで驚いたのが、「画面動」・「サブリナ」・「スパッタリング」<br />
<br />
新人時代、動画の出来があまり良くない爆発のカットを、演出さんが「画面動」・「サブリナ」・「スパッタリング」を追加することでびっくりするほど見栄えのいいものに変えていたのに凄い衝撃を受けたことがあります。最近ではいろいろな事情があってサブリナが使われなくなり、デジタルになってからスパッタリングもほとんど見られなくなりました。<br />
<br />
と、言う事で今回のネタは「スパッタリング」<br />
知らない人の為に説明すると、細かい網に絵の具を乗せてブラシでこすって細かな粒をセルに吹き付けるテクニックのことで、昔は爆発とかには必ず入ってたものです（水面の波とか、雨しぶきとかにも）<br />
<h4>プラグインの仕様を考える</h4>
アルゴリズムとしてはかなり簡単なもので以下のようになります。<br />
<ol>
	<li>描画位置を決める。</li>
	<li>決めた描画位置付近に適当な数の粒を描画する。</li>
	<li>以上の描画を適当な回数繰り返す。</li>
</ol>
というように簡単ですが、それゆえにパラメータ化するのは結構面倒です。<br />
今回のプラグインは、描画位置を決める方法を３種類としてプラグインを分けて作成します。<br />
実際に業務で使う時に楽になるように以下の方法で描画位置を決めます。<br />
<ul>
	<li>範囲で指定。<br />
TopLeft/BottomRightの２点の位置パラメータから</li>
	<li>範囲の中心で指定。<br />
中心位置・半径等のパラメータから</li>
	<li>画像のアルファー情報から<br />
画像のアルファーの値から描画する位置を決める。</li>
</ul>
その描画位置から複数の粒を描画する方法は、予め粒子のデータを作成しておいて単純にコピーするにします。粒子の描画のアルゴリズムを考えるより現実的な手段をとります。<br />
<h4>sputteringRect</h4>
まずは、矩形範囲にスパッタリングするプラグイン「<strong>sputteringRect</strong>」について説明します。<br />
<br />
まずは、ソースのダウンロード。<br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/ap/05/sputteringRect_src.zip">sputteringRect_src.zipのダウンロード</a><br />
<br />
<hr />パラメータは以下のようにしてあります。<br />
<table border="1">
<tbody>
<tr>
<th>パラメータ名</th>
<th>型</th>
<th>説明</th>
</tr>
<tr>
<td>seed</td>
<td>A_long</td>
<td>乱数の初期化の数値。</td>
</tr>
<tr>
<td>value</td>
<td>A_long</td>
<td>粒子の発生起点の数</td>
</tr>
<tr>
<td>opacity_rand</td>
<td>PF_Fixed</td>
<td>粒子の不透明度の最大値</td>
</tr>
<tr>
<td>TopLeft</td>
<td>PF_Point</td>
<td>発生範囲の左上の座標</td>
</tr>
<tr>
<td>BottomRight</td>
<td>PF_Point</td>
<td>発生範囲の右下の座標</td>
</tr>
<tr>
<td>point_value</td>
<td>A_long</td>
<td>一つの発生起点から描画される粒子の数</td>
</tr>
<tr>
<td>point_length</td>
<td>A_long</td>
<td>一つの発生起点から描画される粒子の位置の最大距離</td>
</tr>
<tr>
<td>size</td>
<td>A_long</td>
<td>粒子の大きさ（小のみ・中のみ・大のみ・小＋中・小＋中＋大の５種類あり）</td>
</tr>
<tr>
<td>color1 &#8211; 4</td>
<td>PF_Pixel</td>
<td>粒子の色（最大４色）</td>
</tr>
<tr>
<td>color_Max</td>
<td>A_long</td>
<td>粒子の色の最大数の指定</td>
</tr>
<tr>
<td>Blend with original</td>
<td>PF_Booleanl</td>
<td>元画像を表示するかしないか</td>
</tr>
</tbody>
</table>
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect01.png" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-full wp-image-4559" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect01.png" alt="" width="634" height="347" /></a><br />
<br />
<hr />描画のメインコードは以下の通り。いろいろ見慣れない変数・関数名がありますが、後で説明します。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect02.gif" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-full wp-image-4562" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect02.gif" alt="" width="510" height="874" /></a><br />
メイン(MainRender8)から描画用のコードは分離して関数化してあります。その際にパラメータの記述を簡潔にするためにパラメータはすべて構造体として、ポインター渡しにしてあります。<br />
<br />
<strong>sputDrawPrm</strong>は、粒子描画関数(SputDataDraw)のパラメータ用の構造体。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect03.gif" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-full wp-image-4567" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect03.gif" alt="" width="249" height="156" /></a><br />
<strong>rotPrm</strong>は、角度計算関数(rotCalc)のパラメータ用の構造体。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect04.gif" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-full wp-image-4568" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect04.gif" alt="" width="247" height="103" /></a><br />
<br />
特に難しいコードではありませんが、補足説明します。<br />
<br />
194行目の無駄っぽいループは、案の定rand関数が変な結果を出したので追加したものです。<br />
<br />
203行目は回転の乱数を求めている部分ですが、固定小数の桁あふれ防止のためちょっと変な感じになってます。<br />
<br />
205行目の処理は、あまりにも丸く綺麗に粒子が並んでしまったので、乱雑さを出すために5分の1の確率で距離を2倍にしています。本当はパラメータ化した方が良さそうな部分です。<br />
<h4>SputDataDraw8 粒子の描画</h4>
粒子の描画は、<strong>SputDataDraw</strong>関数が行っています。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect05.gif" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-large wp-image-4571" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect05-650x512.gif" alt="" width="650" height="512" /></a><br />
<strong>spudDrawPrm</strong>構造体のメンバは以下のとおりで、描画に必要な最低限のパラメータをまとめてあります。<br />
<table border="1">
<tbody>
<tr>
<th>メンバ名</th>
<th>型</th>
<th>説明</th>
</tr>
<tr>
<td>data</td>
<td>PF_PixelPtr</td>
<td>描画画面の先頭アドレス</td>
</tr>
<tr>
<td>width</td>
<td>A_long</td>
<td>描画画面の横幅ピクセル</td>
</tr>
<tr>
<td>widthTrue</td>
<td>A_long</td>
<td>描画画面の実際の横幅ピクセル</td>
</tr>
<tr>
<td>height</td>
<td>A_long</td>
<td>描画画面の縦幅ピクセル</td>
</tr>
<tr>
<td>ｘ</td>
<td>A_long</td>
<td>粒子を描画するX座標(整数値)</td>
</tr>
<tr>
<td>y</td>
<td>A_long</td>
<td>粒子を描画するY座標(整数値)</td>
</tr>
<tr>
<td>opa</td>
<td>PF_Fixed</td>
<td>描画する粒子の不透明度</td>
</tr>
<tr>
<td>sptIdx</td>
<td>A_long</td>
<td>描画する粒子のデータ配列のインデックス</td>
</tr>
</tbody>
</table>
描画する色は、8bit/16bitで分けたかったので、構造体に入れていません。<br />
<br />
<strong>sptIdx</strong>は粒子のパターンデータ配列のインデックスで、今回50個のデータを用意してあります。<br />
50以上の値は、1ピクセルの点として扱うことにしています。135行目からのコードがそれに相当します。<br />
<br />
<strong>opa</strong>は、不透明度は桁あふれ防止のため、呼び出す前に4ビットシフトしてあるので、ここでは12ビットシフトになっています(8bitサイズなので本当は必要ないけど、念のため)<br />
<br />
<strong>SPT_SIZE</strong>と<strong>SPT_VALUE</strong>は、粒子のパターンデータ配列にアクセスするためのマクロです、<strong>sputteringData.h</strong>で定義してあります。<br />
<br />
後は、単純に二重ループでデータの転送を行っています。<br />
今回合成先・合成元のピクセルデータのアルファー値は最大値でないので、ピクセル同士のブレンド合成を行っています。<br />
<h4>ピクセルの合成（通常） blendPixel</h4>
ピクセルの合成は、アルファーの値がどちらかが最大値ならば計算は楽ですが、お互いが透明な場合は少し考える必要があります。僕は全然検討もつかずハマってましたが、googleで検索してやっと見つけました。<br />
<br />
<a href="http://ae-users.com//d.hatena.ne.jp/GOCHA/20071027/alphablend">悟茶辞苑ッの2007-10-27 土曜日「RGBAのアルファブレンドに感激 -続・レイヤー処理- 」の記事</a><br />
<br />
このHPにそのものズバリがあり、そのままコーディングしたものが以下のものです。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect06.gif" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-full wp-image-4574" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect06.gif" alt="" width="496" height="396" /></a><br />
除算が3回も入っていてまだ最適化の余地はありそうですが、特に問題なく使ってます。<br />
<h4>粒子データを用意する</h4>
粒子データは本当は、実際にスパッタリングした物をスキャンして使おうと思っていましたが、近所の文房具屋にはスパッタリングの道具が打っていなかったので、Photoshopで手書きしました。（僕が小学校の頃は図工の時間でやっていて文房具屋でも売ってましたが最近はやらないみたいです）<br />
<br />
データが用意できたらそれをCで扱える形式に変換します。今回は、C#で簡単なツールを作成したので、それで変換します。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect07.png" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-full wp-image-4577" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect07.png" alt="" width="600" height="479" /></a><br />
<br />
粒子データはギリギリのサイズに切り出しておいてください。その時縦横のサイズは同じにしておきます。<br />
Exportすれば、以下のファイルが出力されます。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect08.gif" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-full wp-image-4578" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect08.gif" alt="" width="519" height="482" /></a><br />
<br />
面倒だったので、マクロ定義なども出力しています。<br />
<br />
実行ファイル<strong>pic2c.exe</strong><br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/ap/05/pic2c.zip">pic2c.zipのダウンロード</a><br />
ソース（C# 2008 express editionで作成）<br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/ap/05/pic2c_src.zip">pic2c_src.zipのダウンロード</a><br />
<h4>テーブル参照</h4>
ここで僕が多用している<strong>テーブル参照</strong>のテクニックについて説明します。<br />
<br />
テーブル参照のメリットは<br />
<ol>
	<li>計算を予め終わらせておくので、高速化が望める。</li>
	<li>ソースを簡略化して簡単にコーディングできるようになる。</li>
</ol>
とあります。<br />
しかし、最近のPCでは除算とか小数の計算とかびっくりするほど早くて高速化のメリットはかなり無くなりました。逆にCPUのキャッシュの恩恵を受けられないので、かえって遅くなる場合も多々あります。<br />
そのため僕は主にコーディングを楽にするために使ってます。デメリットは、実行バイナリのファイルサイズが増えるとかテーブルサイズが意外とバカに出来ないサイズになってしまいメモリが勿体無いとか、そもそもテーブル作るのが面倒とかあります。<br />
<br />
具体的に説明するためにAfter Effects用のjavaScriptを作成してみます。<br />
<br />
<strong>AfterEfefctsとじゃんけんゲーム</strong><br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/ap/05/jyan_jsx.zip">jyan_jsx.zipのダウンロード</a><br />
アーカイブに二つスクリプトがはいってますが、動作は同じものになります。<br />
グー・チョキ・パーの3個のボタンがあるダイアログが表示されるので、適当に選ぶとジャンケンの結果が表示されます。<br />
<br />
その１のジャンケン判定のコードは、以下の通り。<br />
<br />

<div class="wp_syntax"><div class="code"><pre class="expression" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> jyanStr<span style="color: #009900;">&#40;</span>v<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> ss <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #F0A090; font-weight: bold;">switch</span> <span style="color: #009900;">&#40;</span>v<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">:</span> ss <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;グー&quot;</span><span style="color: #339933;">;</span>break<span style="color: #339933;">;</span>
		<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">:</span> ss <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;チョキ&quot;</span><span style="color: #339933;">;</span>break<span style="color: #339933;">;</span>
		<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">:</span> ss <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;パー&quot;</span><span style="color: #339933;">;</span>break<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #F0A090; font-weight: bold;">return</span> ss<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> dlg <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> jyankenDialog<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;AfteEffectsとじゃんけんゲーム その１&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> player <span style="color: #339933;">=</span> dlg.<span style="color: #660066;">execute</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">// 0:グー 1:チョキ 2:パー</span>
<span style="color: #F0A090; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span>player<span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;=</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span><span style="color: #009900;">&#40;</span>player<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> computer <span style="color: #339933;">=</span> Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">12</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">%</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//0-2の整数を返す</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> kekka <span style="color: #339933;">=</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// 0:引き分け 1:palyer勝利 2:player負け</span>
	<span style="color: #F0A090; font-weight: bold;">switch</span> <span style="color: #009900;">&#40;</span>player<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">:</span> <span style="color: #006600; font-style: italic;">// グー</span>
			<span style="color: #F0A090; font-weight: bold;">switch</span> <span style="color: #009900;">&#40;</span>computer<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">:</span> kekka <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> <span style="color: #F0A090; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">:</span> kekka <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> <span style="color: #F0A090; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">:</span> kekka <span style="color: #339933;">=</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span> <span style="color: #F0A090; font-weight: bold;">break</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #F0A090; font-weight: bold;">break</span><span style="color: #339933;">;</span>
		<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">:</span> <span style="color: #006600; font-style: italic;">// チョキ</span>
			<span style="color: #F0A090; font-weight: bold;">switch</span> <span style="color: #009900;">&#40;</span>computer<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">:</span> kekka <span style="color: #339933;">=</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span> <span style="color: #F0A090; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">:</span> kekka <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> <span style="color: #F0A090; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">:</span> kekka <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> <span style="color: #F0A090; font-weight: bold;">break</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #F0A090; font-weight: bold;">break</span><span style="color: #339933;">;</span>
		<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">:</span> <span style="color: #006600; font-style: italic;">// パー</span>
			<span style="color: #F0A090; font-weight: bold;">switch</span> <span style="color: #009900;">&#40;</span>computer<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">:</span> kekka <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> <span style="color: #F0A090; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">:</span> kekka <span style="color: #339933;">=</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span> <span style="color: #F0A090; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">:</span> kekka <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> <span style="color: #F0A090; font-weight: bold;">break</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #F0A090; font-weight: bold;">break</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> s <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;じゃんけん勝負<span style="color: #000099; font-weight: bold;">\n</span><span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
	s <span style="color: #339933;">+=</span><span style="color: #3366CC;">&quot;;Palyer : &quot;</span> <span style="color: #339933;">+</span>jyanStr<span style="color: #009900;">&#40;</span>player<span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
	s <span style="color: #339933;">+=</span><span style="color: #3366CC;">&quot;;AfterEfefcts : &quot;</span> <span style="color: #339933;">+</span>jyanStr<span style="color: #009900;">&#40;</span>computer<span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span><span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #F0A090; font-weight: bold;">switch</span><span style="color: #009900;">&#40;</span>kekka<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">:</span> s <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;引き分け<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>break<span style="color: #339933;">;</span>
		<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">:</span> s <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;あなたの勝ち<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>break<span style="color: #339933;">;</span>
		<span style="color: #F0A090; font-weight: bold;">case</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">:</span> s <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;あなたの負け<span style="color: #000099; font-weight: bold;">\n</span>”;break;
	}
	alert(s);
}</span></pre></div></div>

<br />
<br />
見やすいようにswitch文で処理してますが、if分で書いても多少短くなる程度です。<br />
その2はテーブル参照でジャンケン判定を実装したもので以下のようになります。<br />
<br />

<div class="wp_syntax"><div class="code"><pre class="expression" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> dlg <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> jyankenDialog<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;AfteEffectsとじゃんけんゲーム その２&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> player <span style="color: #339933;">=</span> dlg.<span style="color: #660066;">execute</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">// 0:グー 1:チョキ 2:パー</span>
<span style="color: #F0A090; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span>player<span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;=</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span><span style="color: #009900;">&#40;</span>player<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> computer <span style="color: #339933;">=</span> Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">12</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">%</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//0-2の整数を返す</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> kekkaTbl <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> kekkaStrTbl <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;引き分け&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;あなたの勝ち&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;あなたの負け&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> jyanTbl <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;グー&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;チョキ&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;パー&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> s <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;じゃんけん勝負<span style="color: #000099; font-weight: bold;">\n</span><span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
	s <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;Palyer : &quot;</span> <span style="color: #339933;">+</span> jyanTbl<span style="color: #009900;">&#91;</span>player<span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
	s <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;AfterEfefcts : &quot;</span>  <span style="color: #339933;">+</span> jyanTbl<span style="color: #009900;">&#91;</span>computer<span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span><span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
	s <span style="color: #339933;">+=</span> kekkaStrTbl<span style="color: #009900;">&#91;</span>kekkaTbl<span style="color: #009900;">&#91;</span>player <span style="color: #339933;">*</span> <span style="color: #CC0000;">3</span> <span style="color: #339933;">+</span> computer<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #F0A090;">alert</span><span style="color: #009900;">&#40;</span>s<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<br />
<br />
なんと、半分以下になっています。テーブルを作成するのが面倒ですが便利な関数を呼び出す気分で使えます。<br />
このスクリプトではテーブル参照を２重で行ってますが、それをひとつにまとめればさらに短いコードに変えられます。<br />
<br />
余談ですが、AfterEfefctsは意外とジャンケンが強いです。作成時10回連続で負けたので、バグがあるのかとハマってましたが、単純に運の問題でした。<br />
<h4>粒子をランダムに選び出す。</h4>
描画する粒子を選ぶ方法は、要素数２００のジャンプテーブル(<strong>sputteringCircle_Params</strong>の<strong>sputRandTable</strong>)に５１種類のインデックス番号を適当に配置してランダムに選び出すことで実装しています。<br />
sizeパラメータは、ジャンプテーブルへの配置の仕方を変えているだけで、描画関数内ではただランダムに選ぶだけです。<br />
<br />
<strong>sputteringRect.cpp</strong>の<strong>SetupSputData</strong>関数でジャンプテーブルの初期化を行っています。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect09.gif" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-medium wp-image-4607" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect09-223x400.gif" alt="" width="223" height="400" /></a><br />
<br />
for文の嵐になってますが、<strong>size</strong>のパラメータに合わせて適当な数値を入力しているだけです。<br />
<br />
同様に粒子の色も配列で確保しておいて、ランダムに選び出してます。<br />
<h4>乱数</h4>
スパッタリングでは粒子の描画のばらつき具合が重要なので、乱数発生に注意しています。<br />
今回<strong>FR_RAND(LO,HI)</strong>・<strong>FM_RAND</strong>の二つのマクロを定義しています。<br />
<br />
#define FR_RAND(LO,HI) (A_long)( F_RAND() * (HI &#8211; LO + 1.0) / (1.0 + F_RAND_MAX))<br />
#define FM_RAND(HI) (A_long)( F_RAND() * (HI + 1.0) / (1.0 + F_RAND_MAX))<br />
<br />
この公式は乱数発生の基本的なもので、FR_RANDは範囲乱数を求めるもの、FM_RANDは最大数値を指定するものです。<br />
精度を上げる為実数計算を含んでいるのですこし実行速度が遅くなりますが、まあ無視していいレベルです。実はまだ精度的に納得できないモノですが、速度との折り合いで僕は我慢して使っています。<br />
<br />
乱数発生は画像処理ではかなり根底問題で毎回苦労します。<br />
<br />
F&#8217;s ScreenShakeDir.aexでは自前で乱数テーブルを用意しています。画面動では精度の良い乱数であっても見た目のばらつきと一致しないので、テーブルの数値は計算で求めないで実際の画面動を見ながら手で入力しました。実際に見てもらえばわかりますが、範囲も100までで(8Bit長も使っていない)乱数テーブルとしてはかなりいい加減なものですが、結果的に一番満足しています。<br />
<br />
有名な<a href="http://www.math.sci.hiroshima-u.ac.jp/~m-mat/MT/mt.html">Mersenne Twister</a>の乱数発生アルゴリズムも試した事がありますが、かなり精度の良い乱数は得られますが、それが画面には反映されずかえってばらつきが均一になり見た目の乱雑さが失われしまいました。結局速度のことを考えて標準関数で乱雑さをアルゴリズムで補ってます。<br />
<br />
乱数とアニメ撮影技術の関わりを考えていくと、人間工学やらエントロピーとか難しい所に到達してもう僕のスキルでは手に負えません。最近ではすぐに諦めて簡単な方法に走ってしまいます。<br />
<br />
今回の<strong>sputteringRect</strong>では、粒子の大きさの発生ではジャンプテーブルで発生分布をばらつかせていたり、粒子の発生距離は、適当な確率でパラメータ自身を変化させて見た目のバラつきを発生させています。<br />
<h4>sputteringCircle</h4>
<strong>sputteringCircle</strong>はスパッタリングの描画範囲を、その中心位置・半径パラメータで決めているもので描画事態は<strong>sputteringRect</strong>と同じものです。<br />
<br />
パラメータは以下の通りです。<br />
<table border="1">
<tbody>
<tr>
<th>パラメータ名</th>
<th>型</th>
<th>説明</th>
</tr>
<tr>
<td>seed</td>
<td>A_long</td>
<td>乱数の初期化の数値。</td>
</tr>
<tr>
<td>value</td>
<td>A_long</td>
<td>粒子の発生起点の数</td>
</tr>
<tr>
<td>opacity_rand</td>
<td>PF_Fixed</td>
<td>粒子の不透明度の最大値</td>
</tr>
<tr>
<td>Pos</td>
<td>PF_Point</td>
<td>発生範囲の中心位置</td>
</tr>
<tr>
<td>Radius</td>
<td>A_long</td>
<td>発生範囲の半径の最大値</td>
</tr>
<tr>
<td>Aspect</td>
<td>PF_Fixed</td>
<td>発生範囲の縦横比</td>
</tr>
<tr>
<td>length_scale</td>
<td>PF_Fixed</td>
<td>発生点と中心との距離のスケール率</td>
</tr>
<tr>
<td>Anchor_enabled</td>
<td>PF_boolean</td>
<td>スケールの中心を有効にする</td>
</tr>
<tr>
<td>Anchor</td>
<td>PF_Point</td>
<td>スケールの中心</td>
</tr>
<tr>
<td>point_value</td>
<td>A_long</td>
<td>一つの発生起点から描画される粒子の数</td>
</tr>
<tr>
<td>point_length</td>
<td>A_long</td>
<td>一つの発生起点から描画される粒子の位置の最大距離</td>
</tr>
<tr>
<td>size</td>
<td>A_long</td>
<td>粒子の大きさ（小のみ・中のみ・大のみ・小＋中・小＋中＋大の５種類あり）</td>
</tr>
<tr>
<td>color1 &#8211; 4</td>
<td>PF_Pixel</td>
<td>粒子の色（最大４色）</td>
</tr>
<tr>
<td>color_Max</td>
<td>A_long</td>
<td>粒子の色の最大数の指定</td>
</tr>
<tr>
<td>Blend with original</td>
<td>PF_Booleanl</td>
<td>元画像を表示するかしないか</td>
</tr>
</tbody>
</table>
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect11.png" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-full wp-image-4619" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect11.png" alt="" width="636" height="383" /></a><br />
length_scaleとAnchorのパラメータは爆発なんかに適応させる場合にこのパラメータだけで指定できれば楽そうだなって意図で採用してあります。<br />
<br />
アルゴリズムは以下のようになります。<br />
<ol>
	<li>Posの位置からRadius(半径の距離)Aspect(縦横比)とlength_scale/Anchorを考慮して描画点決める。</li>
	<li>描画点から最大point_lengthの位置にpoint_value分の粒子を描画。</li>
	<li>上の描画をvalue回繰り返す。</li>
</ol>
第3回目の記事で作成した<strong>Firework</strong>プラグインとほぼ同じアルゴリズムになっています。<br />
以下は<strong>MainRender</strong>関数の重要な部分を抜き出したものです。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect10.gif" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-large wp-image-4614" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect10-650x525.gif" alt="" width="650" height="525" /></a><br />
<h4>sputteringAlpha</h4>
<strong>sputteringAlph</strong>aはスパッタリングの描画範囲を、画像のAlpha値で求めるもので描画事態は<strong>sputteringRect</strong>と同じものです。<br />
Alphaが決められた閾値以上のピクセルを対象に適当な確率で描画点を発生させています。そのままだと細い線とか面積の少ない部分にあまり描画が行われなくなってしまうので、境界部分は個別に発生の確率を変えられるようにしてあります。<br />
<br />
パラメータは以下の通りです。<br />
<table border="1">
<tbody>
<tr>
<th>パラメータ名</th>
<th>型</th>
<th>説明</th>
</tr>
<tr>
<td>seed</td>
<td>A_long</td>
<td>乱数の初期化の数値。</td>
</tr>
<tr>
<td>value(%)</td>
<td>PF_Fixed</td>
<td>不透明部分の粒子の発生確率</td>
</tr>
<tr>
<td>edge_value(%)</td>
<td>PF_Fixed</td>
<td>境界部分の粒子の発生確率</td>
</tr>
<tr>
<td>opacity_rand</td>
<td>PF_Fixed</td>
<td>粒子の不透明度の最大値</td>
</tr>
<tr>
<td>point_value</td>
<td>A_long</td>
<td>一つの発生起点から描画される粒子の数</td>
</tr>
<tr>
<td>point_length</td>
<td>A_long</td>
<td>一つの発生起点から描画される粒子の位置の最大距離</td>
</tr>
<tr>
<td>size</td>
<td>A_long</td>
<td>粒子の大きさ（小のみ・中のみ・大のみ・小＋中・小＋中＋大の５種類あり）</td>
</tr>
<tr>
<td>color1 &#8211; 4</td>
<td>PF_Pixel</td>
<td>粒子の色（最大４色）</td>
</tr>
<tr>
<td>color_Max</td>
<td>A_long</td>
<td>粒子の色の最大数の指定</td>
</tr>
<tr>
<td>Blend with original</td>
<td>PF_Booleanl</td>
<td>元画像を表示するかしないか</td>
</tr>
</tbody>
</table>
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect12.png" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-large wp-image-4626" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect12-650x294.png" alt="" width="650" height="294" /></a><br />
<br />
このプラグインでは、境界線を識別して保存するために1画面分の配列を作成しています。少しでもメモリを節約するためにA_u_charの配列にしています。<br />
<strong>sputteringAlpha.cpp</strong>の<strong>Render</strong>で配列用のメモリを確保しています。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect13.gif" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-full wp-image-4629" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect13.gif" alt="" width="625" height="419" /></a><br />
<br />
境界線の識別は<strong>sputteringAlphaMain8.cpp</strong>の<strong>MainRender8</strong>関数で行っています。高速化のの為に上下左右1ピクセルは無視して識別を行い、境界線・不透明部分と数値を分けて退避用の外列に値を書きこみます。アドレス計算はオフセット値を予め計算してジャンプテーブルを作成して行っています。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect14.gif" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-full wp-image-4632" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect14.gif" alt="" width="566" height="738" /></a><br />
<br />
描画はNoise04Lvと同じようなコーディングになっています。<br />
<a href="http://ae-users.com/jp/wp-content/uploads/2010/06/rect15.gif" class="sb-img" rel="shadowbox[post-4544];player=img;"><img class="aligncenter size-full wp-image-4637" src="http://ae-users.com/jp/wp-content/uploads/2010/06/rect15.gif" alt="" width="528" height="807" /></a><br />
<h4>このサンプルプラグインについて （F&#8217;s Pluginsへ）</h4>
この３個のプラグインはパラメータの扱いが違うだけで描画ルーチンは同じものです。何故分けたかというと、実際にスパッタリングを行う場面を考えて使いやすいように考えたからです。<br />
プログラム的には一つにすることは可能ですが、エフェクトコントロールがこれ以上増えて見づらくなるのが嫌いという理由もあります。<br />
<br />
あと、このプラグインはサンプル用に作ったもので、よく見れば<strong>Firework</strong>/<strong>Noise04Lv</strong>を少し修正しただけに過ぎません。でも、意外と業務に使えそうな雰囲気になってきたので<strong>sputRandTable</strong>をもっとましにするとか、16bit化するとかしてからF&#8217;s Pluginsとして公開配布するつもりです。<br />
<br />
2010/06/05追記<br />
早速作りました。<br />
Windows版 F&#8217;s sputtering<br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/FsPlugins/FsSputtering.zip">FsSputtering.zipのダウンロード</a><br />
Maｃintosh版 F&#8217;s sputtering(beta)<br />
<a class="dl" href="http://bry-ful.ddo.jp/BRY/software/FsPlugins/FsSputtering-Mac.dmg">FsSputtering-Mac.dmgのダウンロード</a><br />
<br />
AEP projectサンプル版から以下の項目を修正してあります。<br />
<ul>
	<li>16Bit対応</li>
	<li>粒子のテクスチャを修正。<br />
50個から60個へ増やした。サイズを修正。</li>
	<li>sizeのパラメータを修正。</li>
	<li>suputteringSplashを追加。</li>
	<li>MT版とMacintosh版を作成</li>
</ul>
ソース・プロジェクトはWindows版のアーカイブ内に入っています。<br />
<h4>次回予告</h4>
次回は予定通り「<strong>Effectsプラグインの構造</strong>」です。<br />
<br />
この記事は全部で全10回と予定してましたが、少し短くなって全８回程度になります。</p>


	タグ : <a href="http://ae-users.com/jp/tag/program/" title="program" rel="tag nofollow">program</a>, <a href="http://ae-users.com/jp/tag/%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3/" title="プラグイン" rel="tag nofollow">プラグイン</a><span id="addbt">[<a onclick="jQuery('p#addtags').slideDown('fast');jQuery('#addbt').fadeOut('fast');">タグを追加する</a>]</span><br />

	<h4>関連する投稿</h4>
	<ul class="st-related-posts">
	<li><a href="http://ae-users.com/jp/resources/2010/06/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-7/" title="アニメ制作者のためのAfterEffectsプラグイン作成入門(第６回)　Effectプラグインの構造・ユーザーインターフェース (2010/6月/13)">アニメ制作者のためのAfterEffectsプラグイン作成入門(第６回)　Effectプラグインの構造・ユーザーインターフェース</a> (4)</li>
	<li><a href="http://ae-users.com/jp/resources/2010/05/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-5/" title="アニメ制作者のためのAfterEffectsプラグイン作成入門(第４回)　オリジナルノイズフィルタを作ってみよう！ (2010/5月/23)">アニメ制作者のためのAfterEffectsプラグイン作成入門(第４回)　オリジナルノイズフィルタを作ってみよう！</a> (5)</li>
	<li><a href="http://ae-users.com/jp/resources/2010/05/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-3/" title="アニメ制作者のためのAfterEffectsプラグイン作成入門(第２回)　とりあえず作ってみよう！ (2010/5月/09)">アニメ制作者のためのAfterEffectsプラグイン作成入門(第２回)　とりあえず作ってみよう！</a> (6)</li>
	<li><a href="http://ae-users.com/jp/tutorials/2010/05/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-2/" title="アニメ制作者のためのAfterEffectsプラグイン作成入門(第１回)　SDKをコンパイルしてみよう! (2010/5月/05)">アニメ制作者のためのAfterEffectsプラグイン作成入門(第１回)　SDKをコンパイルしてみよう!</a> (8)</li>
	<li><a href="http://ae-users.com/jp/tutorials/2010/05/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac/" title="アニメ制作者のためのAfterEffectsプラグイン作成入門(第０回) (2010/5月/05)">アニメ制作者のためのAfterEffectsプラグイン作成入門(第０回)</a> (10)</li>
</ul>

<img src="http://feeds.feedburner.com/~r/aeusers-jp/~4/xYWmynWetro" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://ae-users.com/jp/resources/2010/06/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-6/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		<feedburner:origLink>http://ae-users.com/jp/resources/2010/06/%e3%82%a2%e3%83%8b%e3%83%a1%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aeaftereffects%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e4%bd%9c%e6%88%90%e5%85%a5%e9%96%80%e7%ac%ac-6/</feedburner:origLink></item>
		<item>
		<title>光沢のある球面の表現</title>
		<link>http://feedproxy.google.com/~r/aeusers-jp/~3/2goDDQ4ezso/</link>
		<comments>http://ae-users.com/jp/tutorials/2010/06/coated_ball/#comments</comments>
		<pubDate>Mon, 31 May 2010 15:40:53 +0000</pubDate>
		<dc:creator>yama_ko</dc:creator>
				<category><![CDATA[TUTORIALS]]></category>
		<category><![CDATA[デフォルトプラグインのみ]]></category>
		<category><![CDATA[標準エフェクトのみ]]></category>
		<category><![CDATA[鏡面反射]]></category>

		<guid isPermaLink="false">http://ae-users.com/jp/?p=4520</guid>
		<description><![CDATA[光沢のある球面の表現方法をご紹介します。AfterEffects完結、標準プラグインのみです。アプローチ・考え方に重点を置きます。]]></description>
			<content:encoded><![CDATA[
<p>
AEP Night vol.2のプチコンペティション応募作品を題材に、そのアプローチと実際の方法をご紹介します。<br />
<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12069906&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=12069906&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object><br /><br />
今回とりあげるのはこのシーンの球面の表現です。こちらはAfterEffects完結（標準プラグインのみ）で作っています。エフェクト一つ一つは単純ですし、複雑なエクスプレッションを書いてるわけでもありません。表面的な部分よりも内面的なアプローチ・考え方を重点的に扱います。<br />
<p style="text-align: center"><img class="size-full wp-image-4522  aligncenter" src="http://ae-users.com/jp/wp-content/uploads/2010/05/coated_ball_00.jpg" alt="" width="640" height="360" /></p>
汎用性を度外視しているので実用的ではないかもしれませんが、お役に立てれば幸いです。<br />
<h3>アプローチ</h3>
「それっぽく見えれば良い」が基本方針です。手を抜いてもよいという意味ではありません。<br />
この表現の目的は「リアル感」です。このとき、重視すべきは「リアルに近いか」ではなく、「視聴者がリアルと感じやすいかどうか」というのがポイントです。場合によっては3Dのレイトレーシングや実写より効果的な表現もあるでしょう。<br />
<h3>球を作る</h3>
まずは球の形状を感じさせるため、以下のステップを踏むことにしました。実際はこれに到るまで写真や3DCG等をよく見比べ、なぜ球と感じるかを考えます。実物のビー玉などがあれば理想的です。<br />
私は光学やレンダリングに詳しくないので誤解を招く表現かもしれませんが、仮に各ステップを以下のように呼びます。<br />
<ul>
	<li>基本色</li>
	<li>アンビエントライト</li>
	<li>ハイライト</li>
	<li>映り込み</li>
</ul>
<img class="aligncenter size-full wp-image-4523" src="http://ae-users.com/jp/wp-content/uploads/2010/05/coated_ball_01.jpg" alt="" width="640" height="320" />
<br />
AfterEffectsの機能は主にカラーカーブ、CC Sphereを使います。<br />
<h4>基本色</h4>
球そのものの色です。光源を意識しつつ、カラーカーブの放射状をベースに適当に作ります。<br />
<p style="text-align: center"><img class="size-full wp-image-4524  aligncenter" src="http://ae-users.com/jp/wp-content/uploads/2010/05/coated_ball_02.jpg" alt="" width="320" height="320" /></p>
<br />
<h4>アンビエントライト</h4>
こちらも円とカラーカーブで。モードを加算にしています。<br />
周りがある程度明るいという前提が元になります。ちなみに個人的には4つのステップのうち最も納得しづらかった部分です。いわゆるWeb2.0風アイコンやMacOSのUIなど、認識が記号化されているのかもしれません。<br />
<p style="text-align: center"><img class="size-full wp-image-4525  aligncenter" src="http://ae-users.com/jp/wp-content/uploads/2010/05/coated_ball_03.jpg" alt="" width="320" height="320" /></p>
<br />
<h4>ハイライト</h4>
白色の平面を引き、適当にマスクを切ります。電気や太陽など、一点の光源を見慣れているという前提を用います。<br />
<p style="text-align: center"><img class="size-full wp-image-4526  aligncenter" src="http://ae-users.com/jp/wp-content/uploads/2010/06/coated_ball_04.jpg" alt="" width="320" height="320" /></p>
<br />
<h4>映り込み</h4>
映り込ませる画像を別コンポ作り、CC Sphereで丸めます。この画像のアスペクト比を2:1にすると扱い易いです。解像度はかなり大きめに。<br />
画像内容は情報がないので、正解がありません。<br />
まず窓や建物など、四角形のものが身の回りに多いという前提で、平面にCC Grid Wipeをかけたものを置いています。<br />
加えて付近の別の球を想定し、似たような円を作っておきます。このとき左右反転をしておきましょう。また、文字などなるべく「左右逆になっている」ことがわかりやすい情報をもたせると効果的です。<br />
<p style="text-align: center">
<img class="size-full wp-image-4528       aligncenter" style="margin-left: auto;margin-right: auto;border: 0px initial initial" src="http://ae-users.com/jp/wp-content/uploads/2010/06/coated_ball_06.jpg" alt="" width="640" height="320" /></p>
<p style="text-align: left">これらは独立しているので、それらが独立していることを認識させるために多少ばらばらに動かします。</p>
<p style="text-align: left">透明度やCC Sphereの回転も基本的にトライアンドエラーで調整していきます。</p>
<p style="text-align: center"><img class="size-full wp-image-4527  aligncenter" src="http://ae-users.com/jp/wp-content/uploads/2010/06/coated_ball_05.jpg" alt="" width="320" height="320" /></p>
<br />
<h3>球の凹みをつくる</h3>
次に凹み部分を作るため、以下のステップを踏みます。<br />
<ul>
	<li>境界付近の反射の歪み</li>
	<li>凹み部分</li>
	<li>文字部分</li>
</ul>
主にCC RadialWipeと3Dレイヤーを使います。<br />
<h4>境界付近の反射の歪み</h4>
今回、最も印象を左右するポイントです。<br />
調整レイヤーで全体にCC Radial Wipeをかけ、穴をあけます。この効果によって歪みを認識させ、centerを動かすことで擬似的に球の回転を認識させます。もちろん動かせる範囲が限られますし、パースもかかりません。一次近似になります。振り子の運動は単振動と扱えるのと同じです。<br />
ハイライトや映り込みを巻き込むような動きになると効果的です。<br />
<p style="text-align: center"><img class="size-full wp-image-4529  aligncenter" src="http://ae-users.com/jp/wp-content/uploads/2010/06/coated_ball_07.jpg" alt="" width="320" height="320" /></p>
<br />
<h4>凹み部分</h4>
円を作り、cc Radial Wipeの Centerに重ね、穴が見えなくなるよう動かします。「円」エフェクトを使い、エクスプレッションでそれぞれのcenterを揃えると調整しやすいです。<br />
境界部分をぼかし、色の変化もトライアンドエラーでつけていきます。<br />
<p style="text-align: center"><img class="size-full wp-image-4530  aligncenter" src="http://ae-users.com/jp/wp-content/uploads/2010/06/coated_ball_08.jpg" alt="" width="320" height="320" /></p>
<br />
<h4>文字部分</h4>
この部分だけ3Dレイヤーの回転を使っています。<br />
先程のcenterと見た目上の動きを揃えます。<br />
文字にベベルをかけて、文字が刻み込まれていることを認識させます。（今回は「ベベルアルファ」を使っています）<br />
最終的にわずか数1,2pxの線になりますが、印象が大きく異なるポイントです。<br />
徐々に光源の相対角度が変わることになるので、それを相殺するようにベベルの角度を変化させるとベターです。<br />
<p style="text-align: center"><img class="size-full wp-image-4531  aligncenter" src="http://ae-users.com/jp/wp-content/uploads/2010/06/coated_ball_09.jpg" alt="" width="320" height="320" /></p>
<br />
<h3>おわりに</h3>
最後にコンポを複製し、環境光的な要素は全て同じに、互いの映り込みや回転は独立に動きをつけていきます。被写界深度や色調補正も重要な要素です。<br />
ある表現を狙うとき、なぜそのような認識に繋がるのかを常に考えることが大切なのではないかと思います。<br />
<br />
他のシーンについて<br />
<a href="http://www.yama-ko.net/blog/?p=181">http://www.yama-ko.net/blog/?p=181</a><br />
これを作ることになった経緯みたいなもの<br />
<a href="http://www.yama-ko.net/blog/?p=178">http://www.yama-ko.net/blog/?p=178</a><br />
<br />
<a class="dl" href="http://ae-users.com/jp/wp-content/uploads/2010/06/coated-ball.zip">Download</a><br />
<ul>
	<li>Version: AfterEffects CS4</li>
	<li>License: Free for all</li>
</ul></p>


	タグ : <a href="http://ae-users.com/jp/tag/%e3%83%87%e3%83%95%e3%82%a9%e3%83%ab%e3%83%88%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%81%ae%e3%81%bf/" title="デフォルトプラグインのみ" rel="tag nofollow">デフォルトプラグインのみ</a>, <a href="http://ae-users.com/jp/tag/%e6%a8%99%e6%ba%96%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88%e3%81%ae%e3%81%bf/" title="標準エフェクトのみ" rel="tag nofollow">標準エフェクトのみ</a>, <a href="http://ae-users.com/jp/tag/%e9%8f%a1%e9%9d%a2%e5%8f%8d%e5%b0%84/" title="鏡面反射" rel="tag nofollow">鏡面反射</a><span id="addbt">[<a onclick="jQuery('p#addtags').slideDown('fast');jQuery('#addbt').fadeOut('fast');">タグを追加する</a>]</span><br />

	<h4>関連する投稿</h4>
	<ul class="st-related-posts">
	<li><a href="http://ae-users.com/jp/resources/2009/03/chromatic-abberation/" title="カメラの色収差をエクスプレッションで簡易再現 (2009/3月/25)">カメラの色収差をエクスプレッションで簡易再現</a> (5)</li>
	<li><a href="http://ae-users.com/jp/resources/2009/04/sp_wave/" title="うねうねとすすむパイプ (2009/4月/17)">うねうねとすすむパイプ</a> (5)</li>
	<li><a href="http://ae-users.com/jp/tutorials/2009/09/%e3%80%8cuse-the-forcemotionblurluke%e3%80%8d/" title="「Use the ForceMotionBlur,Luke」 (2009/9月/26)">「Use the ForceMotionBlur,Luke」</a> (7)</li>
	<li><a href="http://ae-users.com/jp/tutorials/2010/01/particleline/" title="3D空間を進む光線 without Particular (2010/1月/03)">3D空間を進む光線 without Particular</a> (14)</li>
</ul>

<img src="http://feeds.feedburner.com/~r/aeusers-jp/~4/2goDDQ4ezso" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://ae-users.com/jp/tutorials/2010/06/coated_ball/feed/</wfw:commentRss>
		<slash:comments>20</slash:comments>
		<feedburner:origLink>http://ae-users.com/jp/tutorials/2010/06/coated_ball/</feedburner:origLink></item>
	</channel>
</rss>
