<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	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"
	>

<channel>
	<title>ColorVFX</title>
	<atom:link href="http://www.colorvfx.com/Blog/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://www.colorvfx.com/Blog</link>
	<description>to color this world</description>
	<pubDate>Wed, 08 Apr 2009 06:37:23 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.5.1</generator>
	<language>en</language>
			<item>
		<title>42 New Open</title>
		<link>http://www.colorvfx.com/Blog/?p=57</link>
		<comments>http://www.colorvfx.com/Blog/?p=57#comments</comments>
		<pubDate>Wed, 11 Mar 2009 21:08:29 +0000</pubDate>
		<dc:creator>Noise</dc:creator>
		
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.colorvfx.com/Blog/?p=57</guid>
		<description><![CDATA[ • 這篇不是教學喔~
• 是要公布好消息～



這一篇不是教學～～

而是要公布好消息：就是我與幾名同事成立了自己的公司了～

公司叫做「ColorKat 影像創作」 網址：www.colorkat.com ，網站上有我們的作品集可以欣賞喔～

我們主要的營業方向為廣告後期特效製作、網路廣告製作、教育訓練、2D 3D影片規劃整合等等
是一間比較注重後期製作的Production House，希望將來能越來越茁壯～

各位看到這篇文章的同好們，請你們舉手打個字，留下些祝福的話吧 :D :D :D]]></description>
			<content:encoded><![CDATA[<p><a rel="lightbox" href="../../AE/images/42-New_Open.jpg"> <img class="alignleft" style="border: 0pt none; float: left;" src="../../AE/images/00-Title_0042.jpg" border="0" alt="" width="300" height="70" align="left" /></a><span class="style116">• 這篇不是教學喔~<br />
• 是要公布好消息～</span></p>
<p><span id="more-57"></span><img src="http://www.colorvfx.com/AE/images/42-New_Open.jpg" alt="" /></p>
<p>這一篇不是教學～～</p>
<p>而是要公布好消息：就是我與幾名同事成立了自己的公司了～</p>
<p>公司叫做「<span style="color: #800000;"><strong>ColorKat 影像創作</strong></span>」 網址：<a href="http://www.colorkat.com" onclick="javascript:pageTracker._trackPageview ('/outbound/www.colorkat.com');">www.colorkat.com</a> ，網站上有我們的作品集可以欣賞喔～</p>
<p>我們主要的營業方向為廣告後期特效製作、網路廣告製作、教育訓練、2D 3D影片規劃整合等等<br />
是一間比較注重後期製作的Production House，希望將來能越來越茁壯～</p>
<p>各位看到這篇文章的同好們，請你們舉手打個字，留下些祝福的話吧 <img src='http://www.colorvfx.com/Blog/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> :D <img src='http://www.colorvfx.com/Blog/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.colorvfx.com/Blog/?feed=rss2&amp;p=57</wfw:commentRss>
		</item>
		<item>
		<title>41 Text Effect</title>
		<link>http://www.colorvfx.com/Blog/?p=55</link>
		<comments>http://www.colorvfx.com/Blog/?p=55#comments</comments>
		<pubDate>Mon, 24 Nov 2008 11:24:34 +0000</pubDate>
		<dc:creator>Noise</dc:creator>
		
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.colorvfx.com/Blog/?p=55</guid>
		<description><![CDATA[  • 利用一個內建效果製作3D文字
• 利用效果＋Expression製作文字特效影片
Download Project &#124;  


這一篇將會教你，利用一些內建的效果做出3D文字，再加一堆有的沒的效果，讓整段影片看起來很炫很酷～


準備素材
1．新增Comp（Command+N）（Ctrl+N），720x486，長度為6秒180格，取名 3D Text。（圖例）
2．新增Solid（Command+Y）（Ctrl+Y），選個舒服的藍色，取名 Royal Blue Solid 1。 （圖例）
3．新增Text層，打上ColorVFX（隨你高興啦～），字的大小不要超出畫面，也不要太小。（圖例）
4．新增Camera，Preset選50mm，其他不用調整。


Step1：製作3D立體文字
1．Solid圖層上，新增效果「Shatter」，      會看到如圖效果。
接下來就是要設定「Shatter」效果了，所有3D文字的設定都在這裡面。
2． View 改為「Rendered」。Shape&#62;Pattern 改為「Custom」。Custom Shatter Map選取文字層「ColorVFX」。Textures &#62; Camera System 改為「Comp Camera」。（圖例）
3．快速鍵「C」，調整Camera角度，就可以看到文字是有厚度的了。（圖例）
4．底下文字層的眼睛符號關掉。（圖例）

5．Extrusion Depth調整厚度。Gravity 重力關掉設為0。Lighting Type改為「Point Source」。
Meterial調整如圖。
6．設定 Camera Keyframe 動作，做出類似如下的動態。
[Media=66]

Step2：製作背景、前景
1．新增Solid（Command+Y）（Ctrl+Y），黑色。Ctrl+D複製一層。
2．下面的Solid層添加「Ramp」效果，做出漸層「黑→深藍」的背景。（圖例）
3．上面的Solid層新增Mask       ，圈出如圖的大致範圍，之後要疊在最上層當做前景。（圖例）


Step3：製作文字圖層的基本特效
1．將「3DText」拖到2個Solid層中間。（圖例）
2．添加「CC Scale Wipe」效果，Stretch設為50，Direction設為270度，Center開啟小碼表圖案設定Keyframe。（圖例）
3．Center的動作大致上這樣設定： 第0格[643,243]、 第60格[121,243]、第150格[81,243]、第180格[592,243]
結果應該如影片所示：
[Media=67]

Step4：強調光效
1． 複製一層「3DText」，添加效果「Find Edges」「Fast Blur」「Fast Blur 2」
2．「Find Edges」選取 [...]]]></description>
			<content:encoded><![CDATA[<p><a rel="lightbox" href="../../AE/images/41-Text_Effect.jpg"> <img src="../../AE/images/00-Title_0041.jpg" border="0" alt="" width="300" height="70" align="left" /></a> <span class="style116">• 利用一個內建效果製作3D文字<br />
<span class="style116">• 利用效果＋Expression製作文字特效影片</span></span><br />
<a href="../../AE/project/41-Text_Effect/41-Text_Effect.zip">Download Project</a> |  <a href="../../AE/project/41-Text_Effect/41-Text_Effect.zip"><span id="more-55"></span></a></p>
<p><img src="../../AE/images/00-Title_Big_0041.jpg" alt="" width="550" height="120" /></p>
<p class="style110" align="left">這一篇將會教你，利用一些內建的效果做出3D文字，再加一堆有的沒的效果，讓整段影片看起來很炫很酷～</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">準備素材</span></h3>
<p class="style110" align="left">1．新增Comp（Command+N）（Ctrl+N），720&#215;486，長度為6秒180格，取名 3D Text。<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-01.png">（圖例）</a></p>
<p class="style110" align="left">2．新增Solid（Command+Y）（Ctrl+Y），選個舒服的藍色，取名 Royal Blue Solid 1。 <a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-02.png">（圖例）</a></p>
<p class="style110" align="left">3．新增Text層，打上ColorVFX（隨你高興啦～），字的大小不要超出畫面，也不要太小。<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-03.png">（圖例）</a></p>
<p class="style110" align="left">4．新增Camera，Preset選50mm，其他不用調整。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step1：製作3D立體文字</span></h3>
<p class="style110" align="left">1．Solid圖層上，新增效果「Shatter」，      會看到<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-05.png">如圖效果。</a></p>
<p class="style110" align="left">接下來就是要設定「Shatter」效果了，所有3D文字的設定都在這裡面。</p>
<p class="style110" align="left">2． View 改為「Rendered」。Shape&gt;Pattern 改為「Custom」。Custom Shatter Map選取文字層「ColorVFX」。Textures &gt; Camera System 改為「Comp Camera」。<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-06.png">（圖例）</a></p>
<p class="style110" align="left">3．快速鍵「C」，調整Camera角度，就可以看到文字是有厚度的了。<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-07.png">（圖例）</a></p>
<p class="style110" align="left">4．底下文字層的眼睛符號關掉。<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-08.png">（圖例）</a></p>
<p class="style110" align="left">5．Extrusion Depth調整厚度。Gravity 重力關掉設為0。Lighting Type改為「Point Source」。<br />
Meterial調整<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-09.png">如圖</a>。</p>
<p class="style110" align="left">6．設定 Camera Keyframe 動作，做出類似如下的動態。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step2：製作背景、前景</span></h3>
<p class="style110" align="left">1．新增Solid（Command+Y）（Ctrl+Y），黑色。Ctrl+D複製一層。</p>
<p class="style110" align="left">2．下面的Solid層添加「Ramp」效果，做出漸層「黑→深藍」的背景。<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-10.png">（圖例）</a></p>
<p class="style110" align="left">3．上面的Solid層新增Mask       ，圈出如圖的大致範圍，之後要疊在最上層當做前景。<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-11.png">（圖例）</a></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step3：製作文字圖層的基本特效</span></h3>
<p class="style110" align="left">1．將「3DText」拖到2個Solid層中間。<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-12.png">（圖例）</a></p>
<p class="style110" align="left">2．添加「CC Scale Wipe」效果，Stretch設為50，Direction設為270度，Center開啟小碼表圖案設定Keyframe。<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-13.png">（圖例）</a></p>
<p class="style110" align="left">3．Center的動作大致上這樣設定： 第0格[643,243]、 第60格[121,243]、第150格[81,243]、第180格[592,243]</p>
<p class="style110" align="left">結果應該如影片所示：</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step4：強調光效</span></h3>
<p class="style110" align="left">1． 複製一層「3DText」，添加效果「Find Edges」「Fast Blur」「Fast Blur 2」</p>
<p class="style110" align="left">2．「Find Edges」選取 [Invert]。 「Fast Blur」「Fast Blur 2」設定一個是橫向的，一個是直向的。</p>
<p class="style110" align="left">3．<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-14.png">詳細設定請看圖例。</a></p>
<p class="style110" align="left">4．上層「3DText」Mode改為「Add」 。</p>
<p class="style110" align="left">5．按「T」調整透明度，第50格[80]、第57格[20]、第150格[20]、第157格[80]。</p>
<p class="style110" align="left">目前動態如下：</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step5：製作畫面抖動效果</span></h3>
<p class="style110" align="left">最後要再添加一些畫面抖動的效果，讓整段影片完成度更高一點。</p>
<p class="style110" align="left">1． 新增一個 Adjustment Layer ，添加「Tint」「Directional Blur」</p>
<p class="style110" align="left">2．「Tint」：先將Amount Tint設為50，再添加Expression『wiggle(15,50)』。</p>
<p class="style110" align="left">3．「Directional Blur」：90度、Blur Length添加Expression『wiggle(30,10)』。<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-15.png">（圖例）</a></p>
<p class="style110" align="left">4．將2層「3DText」的Parent都指定到「Adjustment Layer」</p>
<p class="style110" align="left">5．「Adjustment Layer」按「P」調整位置，添加Expression『wiggle(10,15)』</p>
<p class="style110" align="left">
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step6：抖太多&#8230;&#8230;拿掉一些</span></h3>
<p class="style110" align="left">1．「Adjustment Layer」按「U」打開所有有設定Keyframe的項目，剛好就是3個Expression的設定。<a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-16.png">（圖例）</a></p>
<p class="style110" align="left">2． 選取「Tint &gt; Amount to Tint」後，選取目錄「Animation &gt; Keyframe Assistant &gt; Convert Expression to Keyframes」，這樣做就會把Expression的動態通通變成Keyframe了，然後把第61~150格中間的Keyframe通通殺掉即可。</p>
<p class="style110" align="left">3．重複把3個有Expression的地方都做一樣的動作，只留下前2秒和最後1秒的Keyframe就好。     <a rel="lightbox" href="../../AE/project/41-Text_Effect/images/41-17.png">（圖例）</a></p>
<p class="style110" align="left">最後的影片成品： 也可以看<a href="../../AE/project/41-Text_Effect/images/Step6.mov">MOV大檔</a></p>
<p class="style110" align="left">
<p class="style110" align="left">
<p><strong><img class="alignleft" style="float: left;" src="../../AE/images/space.gif" alt="" width="680" height="80" align="left" /></strong></p>
<p class="style110" align="center">
<p style="text-align: center;">
<p style="text-align: center;"><span style="color: #993300;">如果</span><span style="color: #993300;">對這篇教學有興趣，可以下載範例檔案來練習，有任何使用上的問題，歡迎留言討論</span></p>
<p style="text-align: center;">
<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="../../AE/images/DownloadBall.swf" /><embed type="application/x-shockwave-flash" width="100" height="100" src="../../AE/images/DownloadBall.swf"></embed></object><a href="../../AE/project/41-Text_Effect/41-Text_Effect.zip"><img style="border: 0pt none;" src="../../AE/images/DownloadNow.png" alt="" width="285" height="100" /></a></p>
<p class="style110" align="left">
]]></content:encoded>
			<wfw:commentRss>http://www.colorvfx.com/Blog/?feed=rss2&amp;p=55</wfw:commentRss>
		</item>
		<item>
		<title>40 After Effects CS4</title>
		<link>http://www.colorvfx.com/Blog/?p=54</link>
		<comments>http://www.colorvfx.com/Blog/?p=54#comments</comments>
		<pubDate>Sun, 16 Nov 2008 22:09:22 +0000</pubDate>
		<dc:creator>Noise</dc:creator>
		
		<category><![CDATA[Basic]]></category>

		<category><![CDATA[AE]]></category>

		<category><![CDATA[CS4]]></category>

		<guid isPermaLink="false">http://www.colorvfx.com/Blog/?p=54</guid>
		<description><![CDATA[  
• 新版本的AE CS4很不錯，有些功能滿好用的
• 了解一下有那些新增功能吧



After Effects CS4 上市了，新增了一些不錯的好功能，介面也很好看，網路上已經有不少詳盡的介紹文了，這邊我就大概說明一下我注意到的部份，如果有遺漏的，將來再慢慢補上。
Adobe 出版新軟體的時間越來越快了，雖然有人會覺得搞屁啊，一套都還沒學會又出一套，但是請想想，新軟體總是會加入一些新思維，或是補足一些之前的不足，至少表示軟體公司不斷在進步，這對於軟體使用者來說，絕對算是好事的吧！
如果我們拿 Combustion 跟 After Effects 來比較，Combustion裡有一些很強很讚的常用工具沒錯，但是Combustion的新版本竟然只多加了一個調色的方式？？？這樣也算新版本？反觀 AE，雖然是一套很被所謂「高階」使用者瞧不起的軟體，但是他進步的速度實在還不賴，真要比較起來，Flame跟AE，我倒寧願選擇AE來使用。
＠＠廢話太多，來看AE CS4的一些新功能介紹吧～


Part1：歡迎畫面
一進入AE CS4第一眼就有個不同的地方，就是歡迎畫面，這裡面有些還不錯的貼心功能喔
．
1．這裡會顯示最近使用過的專案檔，方便快速開啟。
2．Open Project：開啟舊的專案檔（等於Command＋O / Ctrl＋O）
New Composition：新增一個Comp（等於Command＋N / Ctrl＋N）
Design Center：這會開啟瀏覽器，連結到Adobe為AE製作的幫助中心。上面會有一些還不錯的新資訊。
Browse Templates：開啟Bridge CS4。
3．Help：線上幫助中心｜New Features：線上新功能說明｜Video Tutorials：線上視頻教學(這裡很讚喔)
4．每日小技巧，一共有283個耶，還真多。下方的搜尋區是對應Tips的，例如搜尋「Keyframe」會出現24條跟Keyframe有關的小技巧。


Part2：新介面

分頁標籤變成方形的了，比較漂亮也比較不佔空間。
整個介面包括Icon、文字等等，都變得比較「硬」一點，也簡潔了一點，整體觀感上來說，感覺變得更專業了。


Part3：透過Photoshop匯入3D 素材
大致講解一下流程：
1．在Photoshop CS4中打開 *.3ds檔（3D 格式檔案）。
2．儲存成PSD檔。
3．在AE 中匯入PSD檔，就可以在AE中使用3D物件了，讚～
這個功能真的很不賴，以後有很多好玩的新方式來做東西了。


Step4：搜尋
AE可能是因為之前Effects &#38; Presets的搜尋功能做的還不錯．CS4版中就加了一大堆的搜尋介面進去了，目前看起來應該還不錯，專案大的時候，搜尋其實是很有用的，但是前提是製作專案要有規範在，否則就算要搜，可能也無從下手吧。
 


Step5：Comp迷你流程圖


可以利用迷你流程圖快速切換不同的Comp，這個功能～～超級棒～～

Step6：輸出專案給Flash使用


AE中輸出成XFL檔，到Flash中開啟即可，這個功能也很讚，終於不用再用Flash的陽春動畫功能了 :D


Step7：Mocha for After Effects
超強的追蹤軟體，現在也跟AE結合了～ 這個好！！
以前的Mocha有介面混亂的問題，現在這一版希望有改善。
Mocha的使用方式網路上搜尋一下官網，教的滿詳細的，將來有機會再出一個Mocha的教學給大家。



Step8：後記
以上這些，是我覺得對於工作上比較重要的一些變化，當然還有其他的一些新功能，如有需要了解，其實上官網看會最清楚，例如這裡有AE所有的特徵功能介紹：就介紹的很詳細
http://www.adobe.com/products/aftereffects/features/

以上是這幾天大致上摸了一下AE CS4以後的觀點，基於普及度的原因，本網站的教學至少在2008年內還是會以CS3版本為主，明年開始，應該就會全面改用CS4來教學了～ :D


如果對這篇教學有興趣，可以下載範例檔案來練習，有任何使用上的問題，歡迎留言討論 ]]></description>
			<content:encoded><![CDATA[<p><a rel="lightbox" href="../../AE/images/40-AE_CS4.jpg"> <img src="../../AE/images/00-Title_0040.jpg" border="0" alt="" width="300" height="70" align="left" /></a> <span class="style116"><br />
• 新版本的AE CS4很不錯</span>，有些功能滿好用的<br />
<span class="style116">•</span> 了解一下有那些新增功能吧<br />
<a href="../../AE/project/40-AE_CS4/40-AE_CS4.html" target="_new"><span id="more-54"></span></a></p>
<p><img src="../../AE/images/00-Title_Big_0040.jpg" alt="" width="550" height="120" /></p>
<p class="style110" align="left">After Effects CS4 上市了，新增了一些不錯的好功能，介面也很好看，網路上已經有不少詳盡的介紹文了，這邊我就大概說明一下我注意到的部份，如果有遺漏的，將來再慢慢補上。</p>
<p class="style110" align="left">Adobe 出版新軟體的時間越來越快了，雖然有人會覺得搞屁啊，一套都還沒學會又出一套，但是請想想，新軟體總是會加入一些新思維，或是補足一些之前的不足，至少表示軟體公司不斷在進步，這對於軟體使用者來說，絕對算是好事的吧！</p>
<p class="style110" align="left">如果我們拿 Combustion 跟 After Effects 來比較，Combustion裡有一些很強很讚的常用工具沒錯，但是Combustion的新版本竟然只多加了一個調色的方式？？？這樣也算新版本？反觀 AE，雖然是一套很被所謂「高階」使用者瞧不起的軟體，但是他進步的速度實在還不賴，真要比較起來，Flame跟AE，我倒寧願選擇AE來使用。</p>
<p class="style110" align="left">＠＠廢話太多，來看AE CS4的一些新功能介紹吧～</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Part1：歡迎畫面</span></h3>
<p class="style110" align="left">一進入AE CS4第一眼就有個不同的地方，就是歡迎畫面，這裡面有些還不錯的貼心功能喔</p>
<p class="style110" align="left"><img src="../../AE/project/40-AE_CS4/images/40-01.png" alt="" width="668" height="533" />．</p>
<p class="style110" align="left">1．這裡會顯示最近使用過的專案檔，方便快速開啟。</p>
<p class="style110" align="left">2．Open Project：開啟舊的專案檔（等於Command＋O / Ctrl＋O）</p>
<p class="style110" align="left">New Composition：新增一個Comp（等於Command＋N / Ctrl＋N）</p>
<p class="style110" align="left">Design Center：這會開啟瀏覽器，連結到Adobe為AE製作的幫助中心。上面會有一些還不錯的新資訊。</p>
<p class="style110" align="left">Browse Templates：開啟Bridge CS4。</p>
<p class="style110" align="left">3．Help：線上幫助中心｜New Features：線上新功能說明｜Video Tutorials：線上視頻教學(這裡很讚喔)</p>
<p class="style110" align="left">4．每日小技巧，一共有283個耶，還真多。下方的搜尋區是對應Tips的，例如搜尋「Keyframe」會出現24條跟Keyframe有關的小技巧。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Part2：新介面</span></h3>
<p class="style110" align="left"><img src="../../AE/project/40-AE_CS4/images/40-02.png" alt="" width="502" height="87" /></p>
<p class="style110" align="left">分頁標籤變成方形的了，比較漂亮也比較不佔空間。</p>
<p class="style110" align="left">整個介面包括Icon、文字等等，都變得比較「硬」一點，也簡潔了一點，整體觀感上來說，感覺變得更專業了。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Part3：透過Photoshop匯入3D 素材</span></h3>
<p class="style110" align="left">大致講解一下流程：</p>
<p class="style110" align="left">1．在Photoshop CS4中打開 *.3ds檔（3D 格式檔案）。</p>
<p class="style110" align="left">2．儲存成PSD檔。</p>
<p class="style110" align="left">3．在AE 中匯入PSD檔，就可以在AE中使用3D物件了，讚～</p>
<p class="style110" align="left">這個功能真的很不賴，以後有很多好玩的新方式來做東西了。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step4：搜尋</span></h3>
<p class="style110" align="left">AE可能是因為之前Effects &amp; Presets的搜尋功能做的還不錯．CS4版中就加了一大堆的搜尋介面進去了，目前看起來應該還不錯，專案大的時候，搜尋其實是很有用的，但是前提是製作專案要有規範在，否則就算要搜，可能也無從下手吧。</p>
<p class="style110" align="left"><img src="../../AE/project/40-AE_CS4/images/40-04.png" alt="" width="236" height="202" /> <img src="../../AE/project/40-AE_CS4/images/40-05.png" alt="" width="289" height="185" /><img src="../../AE/project/40-AE_CS4/images/40-03.png" alt="" width="312" height="126" /></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step5：Comp迷你流程圖</span></h3>
<p class="style110" align="left"><img src="../../AE/project/40-AE_CS4/images/40-07.png" alt="" width="418" height="93" /></p>
<p><img src="../../AE/project/40-AE_CS4/images/40-06.png" alt="" width="332" height="187" /></p>
<p class="style110" align="left">可以利用迷你流程圖快速切換不同的Comp，這個功能～～超級棒～～</p>
<h3 class="style110"><span class="style8">Step6：輸出專案給Flash使用</span></h3>
<p class="style110" align="left"><img src="../../AE/project/40-AE_CS4/images/40-08.png" alt="" width="547" height="133" /></p>
<p class="style110" align="left">
<p class="style110" align="left">AE中輸出成XFL檔，到Flash中開啟即可，這個功能也很讚，終於不用再用Flash的陽春動畫功能了 <img src='http://www.colorvfx.com/Blog/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step7：Mocha for After Effects</span></h3>
<p class="style110" align="left">超強的追蹤軟體，現在也跟AE結合了～ 這個好！！</p>
<p class="style110" align="left">以前的Mocha有介面混亂的問題，現在這一版希望有改善。</p>
<p class="style110" align="left">Mocha的使用方式網路上搜尋一下官網，教的滿詳細的，將來有機會再出一個Mocha的教學給大家。</p>
<p class="style110" align="left"><img src="../../AE/project/40-AE_CS4/images/40-09.png" alt="" width="569" height="335" /></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step8：後記</span></h3>
<p class="style110" align="left">以上這些，是我覺得對於工作上比較重要的一些變化，當然還有其他的一些新功能，如有需要了解，其實上官網看會最清楚，例如這裡有AE所有的特徵功能介紹：就介紹的很詳細</p>
<p class="style110" align="left"><a href="http://www.adobe.com/products/aftereffects/features/" onclick="javascript:pageTracker._trackPageview ('/outbound/www.adobe.com');">http://www.adobe.com/products/aftereffects/features/</a></p>
<p class="style110" align="left">
<p class="style110" align="left">以上是這幾天大致上摸了一下AE CS4以後的觀點，基於普及度的原因，本網站的教學至少在2008年內還是會以CS3版本為主，明年開始，應該就會全面改用CS4來教學了～ <img src='http://www.colorvfx.com/Blog/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p class="style11" align="center"><img src="../../AE/images/space.gif" alt="" width="680" height="80" /></p>
<p><script type="text/javascript"><!--
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,8,0','width','100','height','100','src','../../images/DownloadBall','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../../images/DownloadBall' ); //end AC code
// --></script></p>
<p class="style110" align="center"><span style="color: #800000;">如果對這篇教學有興趣，可以下載範例檔案來練習，有任何使用上的問題，歡迎留言討論 </span><noscript></noscript></p>
]]></content:encoded>
			<wfw:commentRss>http://www.colorvfx.com/Blog/?feed=rss2&amp;p=54</wfw:commentRss>
		</item>
		<item>
		<title>39.Timeline4 - 4 Types</title>
		<link>http://www.colorvfx.com/Blog/?p=53</link>
		<comments>http://www.colorvfx.com/Blog/?p=53#comments</comments>
		<pubDate>Sun, 02 Nov 2008 19:26:40 +0000</pubDate>
		<dc:creator>Noise</dc:creator>
		
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.colorvfx.com/Blog/?p=53</guid>
		<description><![CDATA[  • Timeline教學第四部
• 調整Keyframe的四種型態
Download Project &#124; 



上一篇講解了After Effects中關於Keyframe的3種調整模式，分別是
➊「Layer bar 模式」 ➋「Value 模式」 ➌「Speed 模式」
這一篇要接著說的是，在Timeline中，Keyframe的形態，一共有4種形態，大部分在以前講過，但我還是會再提一次。前三種與運動方式關係較密切，Easy Ease則是跟「速率」較有關。



1：AE Keyframe 的第一種型態： Hold（保持不變）
保持住現在狀態不變，直到下一個Keyframe出現。這種形態應該很容易理解，我就不多花篇幅介紹了。



2：AE Keyframe 的第二種型態：Linear（直線）
直線性運動。這種形態應該也很容易理解，也可以看之前的教學Step5的部份。



3：AE Keyframe 的第三種型態：Bezier（貝茲曲線）
可任意調整的形態，貝茲曲線的使用請看之前的教學有詳細的說明了。



4：AE Keyframe 的第四種型態：Easy Ease（平順速率）
這種形態下，AE會將運動的速率「平順化」。




4：四種型態在Speed模式下的樣子：
請對照上面每種類型的圖，如果不清楚的話建議不要看這一步驟。
Hold：因為沒有運動產生，所以速率都是『每秒速率 0 個Pixel』。


Linear：Keyframe直線運動狀態下，速率是保持不變動的，所以每2個keyframe間速率是保持一樣的，目前看到數值為『每秒速率540個Pixel左右』-『每秒速率575個Pixel左右』-『每秒速率550個Pixel左右』。


Bezier：速率基本上跟Linear接近，但是因為貝茲曲線的影響，所以AE在Keyframe接點的位置作了「平順」的調整，目前看到數值為『每秒速率550個Pixel左右』。


Easy Ease：這是一種特別的速率方式，Easy Ease的特點就是將速率調整為『慢 ➞ 快 ➞ 慢』。
目前數值為『每秒速率 從 0 到 800 左右再降到 0』。



5：Easy Ease 試做：
1．新增Comp，NTSC 90格，把斑馬圖丟進Timeline面板準備做動作。
2．分別在第0、20、40、60格位移圖層做Keyframe動作。（圖例）
3．AE預設中，路徑的速率是『線性平均分配』的，這沒甚麼不對，但是在真實物體的運動上，速率平均分配感覺上就會怪怪的很不順。（圖例）
4．因此，我們把所有的Keyframe選起來，按『F9』，把所有Keyframe套用『Easy Ease』。
5．套用過『Easy Ease』的路徑會變成：離Keyframe近的時候速度放慢，離Keyframe遠的時候速度變快。這樣子的動作才會比較順，比較像真實的物體運動。（圖例）
6．『Easy Ease』與『Linear』的Keyframe形狀是不一樣的，請看圖例。
好了，Easy Ease 的觀念其實就這樣而已，不要想的太複雜，他的功能就是：『把速率調整的比較平順』


6：Easy Ease 真的平順嗎？
雖然Easy Ease是拿來把keyframe的速率弄順的方式，但是『慢 ➞ 快 ➞ 慢』的速率有時候是很怪的，如果覺得奇怪的話，建議你使用『Auto [...]]]></description>
			<content:encoded><![CDATA[<p><a rel="lightbox" href="../../AE/images/39-Timeline4_4Types.jpg"> <img src="../../AE/images/00-Title_0039.jpg" border="0" alt="" width="300" height="70" align="left" /></a> <strong></strong><span class="style116">• Timeline教學第四部</span><br />
<span class="style116">•</span><span class="style116"> 調整Keyframe的四種型態</span><br />
<a href="../../AE/project/39-Timeline4_4Types/39-Timeline4_4Types.zip">Download Project</a> | <span id="more-53"></span></p>
<p><img src="../../AE/images/00-Title_Big_0039.jpg" alt="" width="550" height="120" /></p>
<p class="style110" align="left">上一篇講解了After Effects中關於Keyframe的3種調整模式，分別是<br />
<span class="style128">➊「Layer bar 模式」 ➋「Value 模式」 ➌「Speed 模式」</span></p>
<p class="style110" align="left">這一篇要接著說的是，在Timeline中，Keyframe的形態，一共有4種形態，大部分在以前講過，但我還是會再提一次。前三種與運動方式關係較密切，Easy Ease則是跟「速率」較有關。</p>
<p class="style110" align="center"><img src="../../AE/project/39-Timeline4_4Types/images/39-01.png" alt="" width="456" height="79" /></p>
<p class="style110" align="left">
<h3><span class="style8">1：AE Keyframe 的第一種型態： Hold</span><span class="style8">（保持不變）</span></h3>
<p class="style110" align="left">保持住現在狀態不變，直到下一個Keyframe出現。這種形態應該很容易理解，我就不多花篇幅介紹了。</p>
<p class="style110" align="left"><img src="../../AE/project/39-Timeline4_4Types/images/39-02.png" alt="" width="293" height="159" /></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">2：AE Keyframe 的第二種型態：Linear（直線）</span></h3>
<p class="style110" align="left">直線性運動。這種形態應該也很容易理解，也可以看<a href="../?p=50">之前的教學</a>Step5的部份。</p>
<p class="style110" align="left"><img src="../../AE/project/39-Timeline4_4Types/images/39-03.png" alt="" width="293" height="159" /></p>
<p class="style110" align="left">
<h3><span class="style8">3：AE Keyframe 的第三種型態：Bezier</span><span class="style8">（貝茲曲線）</span></h3>
<p class="style110" align="left">可任意調整的形態，貝茲曲線的使用請看<a href="../?p=50">之前的教學</a>有詳細的說明了。</p>
<p class="style110" align="left"><img src="../../AE/project/39-Timeline4_4Types/images/39-04.png" alt="" width="293" height="159" /></p>
<p class="style110" align="left">
<h3><span class="style8">4：AE Keyframe 的第四種型態：Easy Ease</span><span class="style8">（平順速率）</span></h3>
<p class="style110" align="left">這種形態下，AE會將運動的速率「平順化」。</p>
<p class="style110" align="left"><img src="../../AE/project/39-Timeline4_4Types/images/39-05.png" alt="" width="293" height="159" /></p>
<p class="style110" align="left">
<p class="style110" align="left">
<h3><span class="style8">4：四種型態在Speed模式下的樣子：</span></h3>
<p>請對照上面每種類型的圖，如果不清楚的話建議不要看這一步驟。</p>
<p class="style110" align="left"><span class="style122">Hold：</span>因為沒有運動產生，所以速率都是『每秒速率 0 個Pixel』。</p>
<p class="style110" align="left"><img src="../../AE/project/39-Timeline4_4Types/images/39-06.png" alt="" width="377" height="199" /></p>
<p class="style110" align="left">
<p class="style110" align="left"><span class="style122">Linear：</span>Keyframe直線運動狀態下，速率是保持不變動的，所以每2個keyframe間速率是保持一樣的，目前看到數值為『每秒速率540個Pixel左右』-『每秒速率575個Pixel左右』-『每秒速率550個Pixel左右』。</p>
<p class="style110" align="left"><img src="../../AE/project/39-Timeline4_4Types/images/39-07.png" alt="" width="377" height="199" /></p>
<p class="style110" align="left">
<p class="style110" align="left"><span class="style122">Bezier：</span>速率基本上跟Linear接近，但是因為貝茲曲線的影響，所以AE在Keyframe接點的位置作了「平順」的調整，目前看到數值為『每秒速率550個Pixel左右』。</p>
<p class="style110" align="left"><img src="../../AE/project/39-Timeline4_4Types/images/39-08.png" alt="" width="377" height="199" /></p>
<p class="style110" align="left">
<p class="style110" align="left"><span class="style122">Easy Ease：</span>這是一種特別的速率方式，Easy Ease的特點就是將速率調整為『慢 ➞ 快 ➞ 慢』。</p>
<p class="style110" align="left">目前數值為『每秒速率 從 0 到 800 左右再降到 0』。</p>
<p class="style110" align="left"><img src="../../AE/project/39-Timeline4_4Types/images/39-09.png" alt="" width="377" height="199" /></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">5：Easy Ease 試做：</span></h3>
<p class="style110" align="left">1．新增Comp，NTSC 90格，把斑馬圖丟進Timeline面板準備做動作。</p>
<p class="style110" align="left">2．分別在第0、20、40、60格位移圖層做Keyframe動作。<a rel="lightbox" href="../../AE/project/39-Timeline4_4Types/images/38-01.png">（圖例）</a></p>
<p class="style110" align="left">3．AE預設中，路徑的速率是『線性平均分配』的，這沒甚麼不對，但是在真實物體的運動上，速率平均分配感覺上就會怪怪的很不順。<a rel="lightbox" href="../../AE/project/39-Timeline4_4Types/images/38-02.png">（圖例）</a></p>
<p class="style110" align="left">4．因此，我們把所有的Keyframe選起來，按『F9』，把所有Keyframe套用『Easy Ease』。</p>
<p class="style110" align="left">5．套用過『Easy Ease』的路徑會變成：<span class="style122">離Keyframe近的時候速度放慢，離Keyframe遠的時候速度變快</span>。這樣子的動作才會比較順，比較像真實的物體運動。<a rel="lightbox" href="../../AE/project/39-Timeline4_4Types/images/38-03.png">（圖例）</a></p>
<p class="style110" align="left">6．『Easy Ease』與『Linear』的Keyframe形狀是不一樣的，請看<a rel="lightbox" href="../../AE/project/39-Timeline4_4Types/images/38-04.png">圖例</a>。</p>
<p class="style110" align="left">好了，Easy Ease 的觀念其實就這樣而已，不要想的太複雜，他的功能就是：<span class="style129">『把速率調整的比較平順』</span></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">6：Easy Ease 真的平順嗎？</span></h3>
<p class="style110" align="left">雖然Easy Ease是拿來把keyframe的速率弄順的方式，但是『慢 ➞ 快 ➞ 慢』的速率有時候是很怪的，如果覺得奇怪的話，建議你使用『Auto Bezier』，這兩種速率方式都有各自適合的使用時機，這裡很說明清楚，就靠各位多多使用才能熟悉了。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">7：結語</span></h3>
<p class="style110" align="left">這一篇其實沒有講很多東西，但是要跟上一篇一起研究，其實這些功能的組合方式是很複雜麻煩的，</p>
<p class="style110" align="left">3種模式加上4種形態，然後彼此互相交叉使用，真的要搞懂其實不容易啊～</p>
<p class="style110" align="left">但是好消息是，在真正的作業上&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;才不會用到多複雜的組合呢，頂多調調貝茲曲線跟速率就夠了。</p>
<p class="style110" align="left">
<h3><span class="style8">Timeline裡關於Keyframe的快速鍵：</span></h3>
<p>不用真的背起來啦～記那麼多東西幹嘛，大概知道就好了<br />
<strong>Layer Bar 模式下快速鍵 </strong><br />
將 Keyframe 設定成 Linear 或是 Auto Bezier：Command (Control) + 點擊 keyframe<br />
將 Keyframe 設定成 Linear 或是 Hold：Command+Option (Control+Alt) + 點擊 keyframe<br />
打開 Keyframe 參數視窗：Option (Alt) + double-click keyframe</p>
<p class="style110" align="left"><strong>Graph Editor 模式下快速鍵</strong><br />
快速開關 Graph Editor 模式：Shift+F3<br />
將 Keyframe 設定成 Linear 或是 Auto Bezier：Option (Alt) + click keyframe<br />
Speed 模式下，斷開/連結 操作控制點：Option (Alt) +  點擊操作控制點<br />
Speed 模式下，打開 Keyframe 參數視窗：雙擊 keyframe</p>
<p class="style110" align="left"><strong>共用快速鍵 </strong><br />
將 Keyframe 設定成 Hold 或是 Auto Bezier：Command+Option+H (Control+Alt+H)<br />
移動 keyframe 往前 1 格：Option (Alt) + 左方向鍵<br />
移動 keyframe 往後 1 格：Option (Alt) + 右方向鍵<br />
移動 keyframe 往前後 10 格：上列再加上 Shift 鍵即可</p>
<p class="style110" align="left">
<p class="style110" align="left">
<p><strong><img class="alignleft" style="float: left;" src="../../AE/images/space.gif" alt="" width="680" height="80" align="left" /></strong></p>
<p class="style110" align="center">
<p style="text-align: center;">
<p style="text-align: center;"><span style="color: #993300;">如果</span><span style="color: #993300;">對這篇教學有興趣，可以下載範例檔案來練習，有任何使用上的問題，歡迎留言討論</span></p>
<p style="text-align: center;">
<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="../../AE/images/DownloadBall.swf" /><embed type="application/x-shockwave-flash" width="100" height="100" src="../../AE/images/DownloadBall.swf"></embed></object><a href="../../AE/project/39-Timeline4_4Types/39-Timeline4_4Types.zip"><img style="border: 0pt none;" src="../../AE/images/DownloadNow.png" alt="" width="285" height="100" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.colorvfx.com/Blog/?feed=rss2&amp;p=53</wfw:commentRss>
		</item>
		<item>
		<title>38.Timeline3 - 3 Modes</title>
		<link>http://www.colorvfx.com/Blog/?p=52</link>
		<comments>http://www.colorvfx.com/Blog/?p=52#comments</comments>
		<pubDate>Sun, 26 Oct 2008 17:07:05 +0000</pubDate>
		<dc:creator>Noise</dc:creator>
		
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.colorvfx.com/Blog/?p=52</guid>
		<description><![CDATA[ • Timeline教學第三部
• 調整Keyframe的三種模式



繼續講解AE裡最最麻煩的『Timeline』部分，After Effects中關於Keyframe一共有3種調整模式，這3種模式是負責不同的部份但卻又會互相影響的，因此很容易被搞混，就連使用多年的user都 不見得搞得懂，所以這一篇先把這3種模式搞清楚比較重要。


1：AE Keyframe 在Timeline中的第一種模式：Layer Bar

Layer bar 模式：
在Timeline中最單純的模式，方便調整keyframe前後位置使用的，一般動畫其實只要用到這種模式就很夠了，建議如果一次學所有模式學到很混亂的話，不妨先把第一種學好就夠了。



2：AE Keyframe 在Timeline中的第二種模式：Value
Graph Editor 中的 Value 模式：
在Timeline中必須先切換到Graph Editor模式（圖例）。
接著在Timeline下方還需要點Graph Type來選取Value模式（圖例）。
這種模式調整的是『線性型態』，也就是常見的貝茲曲線。貝茲曲線的說明請看第36篇教學。
第二種模式跟第一種模式比較有關連，彼此很容易混淆。



3：AE Keyframe 在Timeline中的第三種模式：Speed
Graph Editor 中的 Speed 模式：
在Timeline中必須先切換到Graph Editor模式（圖例）。
接著在Timeline下方還需要點Graph Type來選取 Speed 模式（圖例）。
這種模式調整的是『速率』，跟前面兩種比較無關，很單純是在控制速度而已。



4：三種模式的用途及特性
1．Layer bar 模式：單純調整Keyframe的前後位置。
2．Value 模式：調整貝茲曲線的形狀。
3．Speed 模式：單純調整速率。


5：各種數值在三種模式中的應用
首先要說明的是，在AE中製作動態影片，最基本的5個數值：P、A、S、R、T，他們在Timeline中並不是每一種模式下都能使用。請看接下來的分析。我把三種模式加上數字來說明。
「Layer bar 模式」 「Value 模式」 「Speed 模式」
P：Position 位置：	只能使用  及  ，「Value 模式」是在檢視畫面中直接調整的
A：Anchor point 軸心：只能使用  及  ，「Value 模式」 無法調整。
S：Scale 縮放：、、 都在Timeline中調整。
R：Rotation [...]]]></description>
			<content:encoded><![CDATA[<p><a rel="lightbox" href="../../AE/images/38-Timeline3_3Modes.jpg"> <img src="../../AE/images/00-Title_0038.jpg" border="0" alt="" width="300" height="70" align="left" /></a><span class="style116">• Timeline教學第三部</span><br />
<span class="style116">• 調整Keyframe的三種模式</span><br />
<span id="more-52"></span></p>
<p><img src="../../AE/images/00-Title_Big_0038.jpg" alt="" width="550" height="120" /></p>
<p class="style110" align="left">繼續講解AE裡最最麻煩的『Timeline』部分，After Effects中關於Keyframe一共有3種調整模式，這3種模式是負責不同的部份但卻又會互相影響的，因此很容易被搞混，就連使用多年的user都 不見得搞得懂，所以這一篇先把這3種模式搞清楚比較重要。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">1：AE Keyframe 在Timeline中的第一種模式：Layer Bar<br />
</span></h3>
<p class="style110" align="left"><span style="color: #800000;"><strong><span class="style123">Layer bar 模式</span></strong>：</span></p>
<p class="style110" align="left">在Timeline中最單純的模式，方便調整keyframe前後位置使用的，一般動畫其實只要用到這種模式就很夠了，建議如果一次學所有模式學到很混亂的話，不妨先把第一種學好就夠了。</p>
<p class="style110" align="left"><img src="../../AE/project/38-Timeline3_3Modes/images/38-05.png" alt="" width="629" height="86" /></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">2：AE Keyframe 在Timeline中的第二種模式：Value</span></h3>
<p class="style110" align="left"><span style="color: #800000;"><strong><span class="style123">Graph Editor 中的 Value 模式</span>：</strong></span></p>
<p class="style110" align="left">在Timeline中必須先切換到Graph Editor模式<a rel="lightbox" href="../../AE/project/38-Timeline3_3Modes/images/38-06.png">（圖例）</a>。</p>
<p class="style110" align="left">接著在Timeline下方還需要點Graph Type來選取Value模式<a rel="lightbox" href="../../AE/project/38-Timeline3_3Modes/images/38-07.png">（圖例）</a>。</p>
<p class="style110" align="left">這種模式調整的是『線性型態』，也就是常見的貝茲曲線。貝茲曲線的說明請看<a href="../?p=50">第36篇</a>教學。</p>
<p class="style110" align="left">第二種模式跟第一種模式比較有關連，彼此很容易混淆。</p>
<p class="style110" align="left"><img src="../../AE/project/38-Timeline3_3Modes/images/38-08.aep.png" alt="" width="514" height="275" /></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">3：AE Keyframe 在Timeline中的第三種模式：Speed</span></h3>
<p class="style110" align="left"><strong><span style="color: #800000;"><span class="style123">Graph Editor 中的 Speed 模式</span>：</span></strong></p>
<p class="style110" align="left">在Timeline中必須先切換到Graph Editor模式<a rel="lightbox" href="../../AE/project/38-Timeline3_3Modes/images/38-06.png">（圖例）</a>。</p>
<p class="style110" align="left">接著在Timeline下方還需要點Graph Type來選取 Speed 模式<a rel="lightbox" href="../../AE/project/38-Timeline3_3Modes/images/38-09.png">（圖例）</a>。</p>
<p class="style110" align="left">這種模式調整的是『速率』，跟前面兩種比較無關，很單純是在控制速度而已。</p>
<p class="style110" align="left"><img src="../../AE/project/38-Timeline3_3Modes/images/38-10.aep.png" alt="" width="505" height="303" /></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">4：三種模式的用途及特性</span></h3>
<p class="style110" align="left">1．<strong><span class="style123">Layer bar 模式</span></strong>：單純調整Keyframe的前後位置。</p>
<p class="style110" align="left">2．<strong><span class="style123">Value 模式</span></strong>：調整貝茲曲線的形狀。</p>
<p class="style110" align="left"><span class="style110">3．</span><strong><span class="style123">Speed 模式</span></strong>：單純調整速率。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">5：各種數值在三種模式中的應用</span></h3>
<p class="style110" align="left">首先要說明的是，在AE中製作動態影片，最基本的5個數值：P、A、S、R、T，他們在Timeline中並不是每一種模式下都能使用。請看接下來的分析。我把三種模式加上數字來說明。</p>
<p><strong><span style="color: #800000;"><img src="../../AE/project/38-Timeline3_3Modes/images/001.png" alt="" width="16" height="16" /><span class="style110">「Layer bar 模式」</span> <img src="../../AE/project/38-Timeline3_3Modes/images/002.png" alt="" width="16" height="16" /><span class="style110">「Value 模式」</span> <img src="../../AE/project/38-Timeline3_3Modes/images/003.png" alt="" width="16" height="16" /><span class="style110">「Speed 模式」</span></span></strong></p>
<p class="style110" align="left">P：Position 位置：	只能使用 <img src="../../AE/project/38-Timeline3_3Modes/images/001.png" alt="" width="16" height="16" /> 及 <img src="../../AE/project/38-Timeline3_3Modes/images/003.png" alt="" width="16" height="16" /> ，<img src="../../AE/project/38-Timeline3_3Modes/images/002.png" alt="" width="16" height="16" />「Value 模式」是在檢視畫面中直接調整的</p>
<p class="style110" align="left">A：Anchor point 軸心：只能使用 <img src="../../AE/project/38-Timeline3_3Modes/images/001.png" alt="" width="16" height="16" /> 及 <img src="../../AE/project/38-Timeline3_3Modes/images/003.png" alt="" width="16" height="16" /> ，<img src="../../AE/project/38-Timeline3_3Modes/images/002.png" alt="" width="16" height="16" /><span class="style128"><span class="style129">「Value 模式」</span></span> 無法調整。</p>
<p class="style110" align="left">S：Scale 縮放：<img src="../../AE/project/38-Timeline3_3Modes/images/001.png" alt="" width="16" height="16" />、<img src="../../AE/project/38-Timeline3_3Modes/images/002.png" alt="" width="16" height="16" />、<img src="../../AE/project/38-Timeline3_3Modes/images/003.png" alt="" width="16" height="16" /> 都在Timeline中調整。</p>
<p class="style110" align="left">R：Rotation 旋轉：<img src="../../AE/project/38-Timeline3_3Modes/images/001.png" alt="" width="16" height="16" />、<img src="../../AE/project/38-Timeline3_3Modes/images/002.png" alt="" width="16" height="16" />、<img src="../../AE/project/38-Timeline3_3Modes/images/003.png" alt="" width="16" height="16" /> 都在Timeline中調整。</p>
<p class="style110" align="left">T：Opacity 透明度：<img src="../../AE/project/38-Timeline3_3Modes/images/001.png" alt="" width="16" height="16" />、<img src="../../AE/project/38-Timeline3_3Modes/images/002.png" alt="" width="16" height="16" />、<img src="../../AE/project/38-Timeline3_3Modes/images/003.png" alt="" width="16" height="16" /> 都在Timeline中調整。</p>
<p class="style110" align="left">
<p class="style110" align="left">看起來很複雜？簡單說明，比較不一樣的就是「Position」「Anchor point」的調整方式跟別人不一樣。</p>
<p class="style110" align="left">「Position」在畫面上會形成可以看的到的路徑，因此路徑的<img src="../../AE/project/38-Timeline3_3Modes/images/002.png" alt="" width="16" height="16" />「Value 模式（貝茲曲線）」是在畫面上直接調整的，在Timeline中的Valeu 模式是不能調整貝茲曲線的。<a rel="lightbox" href="../../AE/project/38-Timeline3_3Modes/images/38-11.png">（圖例）</a></p>
<p class="style110" align="left">「Anchor point」更特別，這個數值『不能』調整貝茲曲線，也就是說畫面上不會出現路徑給你調整，同時，在Timeline中的Valeu 模式下也是同樣不能調整貝茲曲線的。<a rel="lightbox" href="../../AE/project/38-Timeline3_3Modes/images/38-12.png">（圖例）</a></p>
<p class="style110" align="left">
<p class="style110" align="left"><strong><span style="color: #ff0000;"><span class="style127">＊重點＊</span></span></strong>：「Position」「Anchor point」對於<span class="style128">➋</span>「Value 模式（貝茲曲線）」的調整方式比較特別，至於其他任何數值，都可以在Timeline中的三種模式下調整。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">6：三種模式的建議使用時機</span></h3>
<p class="style110" align="left">不斷強調三種模式：Layer bar(keyframe位置)、Value(貝茲曲線)、Speed(速率)</p>
<p class="style110" align="left">依照製作上的經驗，這三種模式常見的使用順序就是：Layer bar →         Value → Speed</p>
<p class="style110" align="left">首先，先在Layer Bar模式下建立Keyframe。</p>
<p class="style110" align="left">再來，如有需要，調整Value模式的貝茲曲線（非必要）</p>
<p class="style110" align="left">最後，如有需要，調整Speed模式的速率（非必要）</p>
<p class="style110" align="left">
<p class="style110" align="left">其中第二、第三項都不是很必要的，第二、第三項也不一定要照順序來，但是有個規範出來，對於製作時比較不會搞混。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">7：結語</span></h3>
<p class="style110" align="left">這一篇希望各位學習的人員可以清楚的是：三種模式的不同功能，基本上他們是很不同的，請不要搞混。</p>
<p class="style110" align="left">當了解了三種模式之後，下一篇會繼續講解Keyframe的4種型態：Hold、Linear、Auto Bezier、Easy Ease。</p>
<p class="style110" align="left">
<p class="style11" align="center">
<p><strong><img class="alignleft" style="float: left;" src="../../AE/images/space.gif" alt="" width="680" height="80" align="left" /></strong></p>
<p class="style110" align="center">
<p style="text-align: center;">
<p style="text-align: center;"><span style="color: #993300;">如果</span><span style="color: #993300;">對這篇教學有任何使用上的問題，歡迎留言討論</span></p>
<p style="text-align: center;">
<p style="text-align: center;">
]]></content:encoded>
			<wfw:commentRss>http://www.colorvfx.com/Blog/?feed=rss2&amp;p=52</wfw:commentRss>
		</item>
		<item>
		<title>37 Neon</title>
		<link>http://www.colorvfx.com/Blog/?p=51</link>
		<comments>http://www.colorvfx.com/Blog/?p=51#comments</comments>
		<pubDate>Sun, 19 Oct 2008 18:01:15 +0000</pubDate>
		<dc:creator>Noise</dc:creator>
		
		<category><![CDATA[Tutorial]]></category>

		<category><![CDATA[AE]]></category>

		<guid isPermaLink="false">http://www.colorvfx.com/Blog/?p=51</guid>
		<description><![CDATA[




  •霓虹燈光字效
•不需要用到任何特效製作
Download Project &#124; 

本來要講解Timeline裡的Keyframe設定的，但是剛好做了一個好玩又漂亮的效果，所以決定先放這效果的教學好了。Keyframe教學延後～
再來，先說明一件事：以後效果名不打全部的路徑了，好長好麻煩的，請多用Effect面板的搜尋功能（圖例）。


Step1：
1．『Command(CTRL)＋N』新增Comp，HDV/HDTV 720 29.97規格，150格（圖例）。
2．將環境改為16bpc，甚麼是16bpc？請看這一篇教學。
3．『Command(CTRL)＋Y』新增一層Solid，顏色不管，Size同Comp。
4．新增效果『Ramp』，設定如（圖例）。
5．新增效果『Colorama』，設定如（圖例）。
6．新增一個圓形的Mask，大概把位置移到中間偏下方，位置如（圖例），Mask Feather設定成400（圖例）。


Step2：建立文字
1．新增Comp，400*400、150格，取名『V』。（圖例）
2．新增文字層，輸入 V 一個字母就好，字的顏色請選黑色，字的Size為300，字放在畫面正中間。（圖例）
3．文字層上按右鍵新增Layer Style &#62;『Outer Glow』及『Stroke』（圖例）
4．『Outer Glow』及『Stroke』的設定請看圖例。這個步驟請把背景透明關掉，因為做出來的效果只是字的邊邊很細很淡的暈邊而已。

5．接著，請將字的顏色改成"透明"，點擊文字面板透明符號即可（圖例），改完後，字的暈邊應該會變成兩層。



Step3：文字動作、複製
1．打開Position的Expression面板，輸入『wiggle(20,2)』（圖例）
2．接下來請將這層文字複製10次，一共11層，所有層的Blending Mode都改成『Add』。
3．把每一層的字體換成不同的字體，但是形狀不要差太多，改好後應該是這樣的。
4．再來，請把最上面一層的Expression移除，這一層不需要晃動。
5．上面一層的Layer Style &#62; Stroke 裡面的Opacity由20改為50。

這一步驟完成後應該像這樣：
[MEDIA=60]


Step4：複製成其他文字
1．將Comp『V』複製成『F』、『X』
2．打開Comp『F』，雙擊每一層Layer會把當層的文字選取起來，然後直接輸入 F，把選到的層文字改成F。
3．重複以上動作，把Comp『F』裡的每一層文字都改成 F 。

4．打開Comp『X』，把每一層文字都改成 X 。
[MEDIA=61]
[MEDIA=62]

Step5：組合文字
1．將Comp『V』拉到Comp『Neon』裡，Blending Mode設定成『Classic Color Dodge』
2．Layer層複製三次，一共四層文字層。
3．第一層『V』，加效果『Fast Blur』，數值15。
4．第二層『V』，加效果『Fast Blur』，數值90，Blending Mode改成『Color Dodge』。
5．第三層『V』，透明度改成50。

這一步驟完成後應該像這樣：
[MEDIA=63]

Step6：其他
1．現在要將『F』『X』也放上並套用相同效果。有簡單快速的方式，請看接下來的步驟。
2．選取四層『V』，按「Command(Ctrl)＋D」複製，複製完把新複製的四層Layer移到最上方，保持新增的四層Layer選取狀態。
3．選取project面板中的Comp『F』，按下「Command(Ctrl)＋Option(Alt)＋/」，把Timeline中的四層『V』置換成『F』。
4．再按一次「Command(Ctrl)＋D」複製，複製完把新複製的四層Layer移到最上方，保持新增的四層Layer選取狀態。
5．選取project面板中的Comp『X』，按下「Command(Ctrl)＋Option(Alt)＋/」，把Timeline中的四層『F』置換成『X』。
看不看的懂啊，看不懂的話，請直接看視訊教學～（也有MOV檔可看）

這一步驟完成後應該像這樣：
[MEDIA=64]

Step7：多做一些
也可以直接看MOV大檔比較清楚
[MEDIA=65]



如果對這篇教學有興趣，可以下載範例檔案來練習，有任何使用上的問題，歡迎留言討論


]]></description>
			<content:encoded><![CDATA[<p class="style110" align="left">
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style11" align="center">
<p><a rel="lightbox" href="../../AE/images/37-Neon.jpg"> <img src="../../AE/images/00-Title_0037.jpg" border="0" alt="" width="300" height="70" align="left" /></a> <span class="style116">•霓虹燈光字效</span><br />
<span class="style116">•不需要用到任何特效製作</span><br />
<a href="../../AE/project/37-Neon/37-Neon.zip">Download Project</a> | <a href="../../AE/project/37-Neon/37-Neon.zip"><span id="more-51"></span></a></p>
<p class="style110" align="left">
<p class="style110" align="left">本來要講解Timeline裡的Keyframe設定的，但是剛好做了一個好玩又漂亮的效果，所以決定先放這效果的教學好了。Keyframe教學延後～</p>
<p class="style110" align="left">再來，先說明一件事：以後效果名不打全部的路徑了，好長好麻煩的，請多用Effect面板的搜尋功能<a rel="lightbox" href="../../AE/project/37-Neon/images/37-00.png">（圖例）</a>。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step1：</span></h3>
<p class="style110" align="left">1．『Command(CTRL)＋N』新增Comp，HDV/HDTV 720 29.97規格，150格<a rel="lightbox" href="../../AE/project/37-Neon/images/37-01.png">（圖例）</a>。</p>
<p class="style110" align="left">2．將環境改為16bpc，甚麼是16bpc？請看<a href="../?p=20">這一篇教學</a>。</p>
<p class="style110" align="left">3．『Command(CTRL)＋Y』新增一層Solid，顏色不管，Size同Comp。</p>
<p class="style110" align="left">4．新增效果『Ramp』，設定如<a rel="lightbox" href="../../AE/project/37-Neon/images/37-02.png">（圖例）</a>。</p>
<p class="style110" align="left">5．新增效果『Colorama』，設定如<a rel="lightbox" href="../../AE/project/37-Neon/images/37-03.png">（圖例）</a>。</p>
<p class="style110" align="left">6．新增一個圓形的Mask，大概把位置移到中間偏下方，位置如<a rel="lightbox" href="../../AE/project/37-Neon/images/37-04.png">（圖例）</a>，Mask Feather設定成400<a rel="lightbox" href="../../AE/project/37-Neon/images/37-05.png">（圖例）</a>。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step2：建立文字</span></h3>
<p class="style110" align="left">1．新增Comp，400*400、150格，取名『V』。<a rel="lightbox" href="../../AE/project/37-Neon/images/37-06.png">（圖例）</a></p>
<p class="style110" align="left">2．新增文字層，輸入 V 一個字母就好，字的顏色請選黑色，字的Size為300，字放在畫面正中間。<a rel="lightbox" href="../../AE/project/37-Neon/images/37-07.png">（圖例）</a></p>
<p class="style110" align="left">3．文字層上按右鍵新增Layer Style &gt;『Outer Glow』及『Stroke』<a rel="lightbox" href="../../AE/project/37-Neon/images/37-08.png">（圖例）</a></p>
<p class="style110" align="left">4．『Outer Glow』及『Stroke』的設定請看<a rel="lightbox" href="../../AE/project/37-Neon/images/37-09.png">圖例</a>。這個步驟請把背景透明關掉，因為做出來的效果只是字的邊邊很細很淡的暈邊而已。</p>
<p class="style110" align="left"><a rel="lightbox" href="../../AE/project/37-Neon/images/37-10.png"><img src="../../AE/project/37-Neon/images/37-10.png" alt="" width="180" height="174" /></a></p>
<p class="style110" align="left">5．接著，請將字的顏色改成&#8221;透明&#8221;，點擊文字面板透明符號即可<a rel="lightbox" href="../../AE/project/37-Neon/images/37-11.png">（圖例）</a>，改完後，字的暈邊應該會變成兩層。</p>
<p class="style110" align="left"><a rel="lightbox" href="../../AE/project/37-Neon/images/37-12.png"><img src="../../AE/project/37-Neon/images/37-12.png" alt="" width="180" height="164" /></a></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step3：文字動作、複製</span></h3>
<p class="style110" align="left">1．打開Position的Expression面板，輸入『wiggle(20,2)』<a rel="lightbox" href="../../AE/project/37-Neon/images/37-13.png">（圖例）</a></p>
<p class="style110" align="left">2．接下來請將這層文字複製10次，一共11層，所有層的<a href="../?p=44">Blending Mode</a>都改成『Add』。</p>
<p class="style110" align="left">3．把每一層的字體換成不同的字體，但是形狀不要差太多，改好後應該是<a rel="lightbox" href="../../AE/project/37-Neon/images/37-14.png">這樣的</a>。</p>
<p class="style110" align="left">4．再來，請把最上面一層的Expression移除，這一層不需要晃動。</p>
<p class="style110" align="left">5．上面一層的Layer Style &gt; Stroke 裡面的Opacity由20改為50。</p>
<p class="style110" align="left">這一步驟完成後應該像這樣：<br />
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step4：複製成其他文字</span></h3>
<p class="style110" align="left">1．將Comp『V』複製成『F』、『X』</p>
<p class="style110" align="left">2．打開Comp『F』，雙擊每一層Layer會把當層的文字選取起來，然後直接輸入 F，把選到的層文字改成F。</p>
<p class="style110" align="left">3．重複以上動作，把Comp『F』裡的每一層文字都改成 F 。</p>
<p class="style110" align="left">4．打開Comp『X』，把每一層文字都改成 X 。<br /><br />
<h3 class="style110"><span class="style8">Step5：組合文字</span></h3>
<p class="style110" align="left">1．將Comp『V』拉到Comp『Neon』裡，<a href="../?p=44">Blending Mode</a>設定成『Classic Color Dodge』</p>
<p class="style110" align="left">2．Layer層複製三次，一共四層文字層。</p>
<p class="style110" align="left">3．第一層『V』，加效果『Fast Blur』，數值15。</p>
<p class="style110" align="left">4．第二層『V』，加效果『Fast Blur』，數值90，<a href="../?p=44">Blending Mode</a>改成『Color Dodge』。</p>
<p class="style110" align="left">5．第三層『V』，透明度改成50。</p>
<p class="style110" align="left">這一步驟完成後應該像這樣：<br />
<h3 class="style110"><span class="style8">Step6：其他</span></h3>
<p class="style110" align="left">1．現在要將『F』『X』也放上並套用相同效果。有簡單快速的方式，請看接下來的步驟。</p>
<p class="style110" align="left">2．選取四層『V』，按「Command(Ctrl)＋D」複製，複製完把新複製的四層Layer移到最上方，保持新增的四層Layer選取狀態。</p>
<p class="style110" align="left">3．選取project面板中的Comp『F』，按下「Command(Ctrl)＋Option(Alt)＋/」，把Timeline中的四層『V』置換成『F』。</p>
<p class="style110" align="left">4．再按一次「Command(Ctrl)＋D」複製，複製完把新複製的四層Layer移到最上方，保持新增的四層Layer選取狀態。</p>
<p class="style110" align="left">5．選取project面板中的Comp『X』，按下「Command(Ctrl)＋Option(Alt)＋/」，把Timeline中的四層『F』置換成『X』。</p>
<p class="style110" align="left"><strong>看不看的懂啊，看不懂的話，請直接看</strong><a href="../../AE/project/37-Neon/Player.html" target="_blank">視訊教學</a>～（也有<a href="../../AE/project/37-Neon/images/37-Toturial.mov">MOV檔</a>可看）</p>
<p class="style110" align="left">這一步驟完成後應該像這樣：<br />
<h3 class="style110"><span class="style8">Step7：多做一些</span></h3>
<p class="style110" align="left">也可以直接看<a href="../../AE/project/37-Neon/images/37-Step7.mov">MOV大檔</a>比較清楚<br />
<p><strong><img class="alignleft" style="float: left;" src="../../AE/images/space.gif" alt="" width="680" height="80" align="left" /></strong></p>
<p class="style110" align="center">
<p style="text-align: center;">
<p style="text-align: center;"><span style="color: #993300;">如果</span><span style="color: #993300;">對這篇教學有興趣，可以下載範例檔案來練習，有任何使用上的問題，歡迎留言討論</span></p>
<p style="text-align: center;">
<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="../../AE/images/DownloadBall.swf" /><embed type="application/x-shockwave-flash" width="100" height="100" src="../../AE/images/DownloadBall.swf"></embed></object><a href="../../AE/project/37-Neon/37-Neon.zip"><img style="border: 0pt none;" src="../../AE/images/DownloadNow.png" alt="" width="285" height="100" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.colorvfx.com/Blog/?feed=rss2&amp;p=51</wfw:commentRss>
	<enclosure url="http://www.colorvfx.com/AE/project/37-Neon/images/37-Step3.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/37-Neon/images/37-Step4F.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/37-Neon/images/37-Step4X.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/37-Neon/images/37-Step5.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/37-Neon/images/37-Step6.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/37-Neon/images/37-Step7.flv" length="1" type="video/x-flv"/>
	</item>
		<item>
		<title>36.Timeline2：Basic Animation</title>
		<link>http://www.colorvfx.com/Blog/?p=50</link>
		<comments>http://www.colorvfx.com/Blog/?p=50#comments</comments>
		<pubDate>Tue, 30 Sep 2008 20:37:01 +0000</pubDate>
		<dc:creator>Noise</dc:creator>
		
		<category><![CDATA[Basic]]></category>

		<category><![CDATA[AE]]></category>

		<guid isPermaLink="false">http://www.colorvfx.com/Blog/?p=50</guid>
		<description><![CDATA[ •基本功，動作的基本觀念
•講解Timeline面板前要先懂的部分
Download Project &#124;                
Keyframe在AE裡確實是個讓很多人頭大的問題，Keyframe的內容很多，也很複雜，但是了解keyframe之前，我想先講一下「基本的 動畫觀念」，先了解基本的動畫觀念以後，再看下一次發佈的Timeline Keyframe教學就會更容易學習了。


準備素材
隨你高興拿甚麼圖來用～ 或是用這篇範例檔裡的圖也可以。


Step1：基本動作
Keyframe動畫裡最最基本的製作觀念就是：讓物體從「A」移動到「B」。而這個「A、B」就是Keyframe。
1．將zebra.tif拉到Timeline面板，選取「zebra.tif」Layer層，
2．按「P」打開Position控制項，點擊Stopwatch符號（圖例）以設定keyframe。
3．第1格畫面將圖移到右下角（圖例）第60格畫面將圖移到左下角（圖例）
4．按空白鍵預覽，圖片從右下角（A點）移動到了左下角（B點），這就是最基本的Keyframe動畫。


Step2：『Auto Bezier』
接下來，我們在第30格的位置再加上一個動作，讓路徑變成：從「A」移動到「B」再移動到「C」。
1．時間移到第30格，將圖片往上移動，這時會產生新的Keyframe（圖例）
2．點選「zebra.tif」Layer層的Position全選所有的Keyframe，你可以看到圖片在路徑上的走法。（圖例）
3．路徑上的每一個Keyframe都會有前後兩個控制點，但是頭尾的Keyframe只會有一個控制點。（圖例）
4．通常，我們做完動作之後，AE就會自動幫我們把路徑變順暢，這時候的控制點叫做『Auto Bezier』，這就是頂頂大名的『貝茲曲線』。
5．關於『貝茲曲線』的知識，請上網搜尋就好了，有很多相關教學可以參考，而且幾乎所有的繪圖軟體都會用到貝茲曲線，這是很基本的繪圖知識，請不懂的人多多善用Google查詢。


Step3：『Continuous Bezier』
1．接著，我們來調整一下貝茲曲線的控制點吧。
2．貝茲曲線的控制基本上是前後影響的，所以稱之為Continuous Bezier，但是這個名稱不用記，沒啥意義啦～
3．下面的視頻，就是預設貝茲曲線的控制調整方式。（圖例）
[MEDIA=56]

Step4：『Bezier』
1．這一部分，貝茲前面沒加任何字眼來限制他了，所以貝茲現在是「自由」的了，可以隨便亂調。
2．按著『Option（Alt）鍵』調整貝茲曲線的某一點，調整完後放開『Option（Alt）鍵』，繼續調整其他點。
3．下面的視頻，就是任意調整貝茲曲線的方式。（圖例）
[MEDIA=57]

Step5：『Liner』
1．線性路徑，就是直直走～，沒有曲線的走法。
2．按住『Option+Command（Alt+Ctrl）』，游標移到Keyframe點上會變成這個符號
3．下面的視頻，就是調整貝茲曲線為直線                    的方式。
[MEDIA=58]

Step6：『Liner＋Bezier』
1．已經變成Liner狀態的Keyframe點，按住『Option+Command（Alt+Ctrl）』輕輕點一下放開，他又會變回Auto Bezier的狀態。（圖例）
2．已經變成Liner狀態的Keyframe點，按住『Option+Command（Alt+Ctrl）』輕輕點一下不放開，他會變成一邊是Liner狀態，另一邊是 Bezier的狀態。（圖例）
3．按住『Option+Command（Alt+Ctrl）』在路徑的任何一個位置上點擊，會在該處新增一個Keyframe。
4．下面的視頻，就是調整貝茲曲線為直線+貝茲曲線的方式。
[MEDIA=59]
後記：
1． 基本的Keyframe動畫差不多就是這樣，用位移來講解比較容易理解 ，當然，透明度、軸心、縮放、旋轉等等等等，甚至plugin裡的某個效果裡的某個小參數，只要這個參數前面有「Stopwatch小碼表」圖案的話，通 通都可以做成Keyframe動畫，所以了解最基本的觀念後，再去深入了解其他部分，這樣循序漸進的學習才會是有成效的。
2．下一篇要開始講解Timeline面板中的keyframe了，這個部分不好講也不好學，所以有可能一篇講不完，或許會到2-3篇吧，寫了才知道，讓我們一起進步吧～～～








如果對這篇教學有興趣，可以下載範例檔案來練習，有任何使用上的問題，歡迎留言討論







]]></description>
			<content:encoded><![CDATA[<p><a rel="lightbox" href="../../AE/images/36-Timeline2_Basic_Animation.jpg"> <img src="../../AE/images/00-Title_0036.jpg" border="0" alt="" width="300" height="70" align="left" /></a><span class="style116">•基本功，動作的基本觀念<br />
•講解Timeline面板前要先懂的部分</span><br />
<a href="../../AE/project/36-Timeline2_Basic_Animation/36-Timeline2_Basic_Animation.zip">Download Project</a> |                <span id="more-50"></span></p>
<p class="style110" align="left">Keyframe在AE裡確實是個讓很多人頭大的問題，Keyframe的內容很多，也很複雜，但是了解keyframe之前，我想先講一下「基本的 動畫觀念」，先了解基本的動畫觀念以後，再看下一次發佈的Timeline Keyframe教學就會更容易學習了。</p>
<p class="style110" align="left">
<h4 class="style110"><span class="style8">準備素材</span></h4>
<p class="style110" align="left">隨你高興拿甚麼圖來用～ 或是用這篇<a href="../../AE/project/36-Timeline2_Basic_Animation/36-Timeline2_Basic_Animation.zip">範例檔</a>裡的圖也可以。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step1：基本動作</span></h3>
<p class="style110" align="left">Keyframe動畫裡最最基本的製作觀念就是：讓物體從「A」移動到「B」。而這個「A、B」就是Keyframe。</p>
<p class="style110" align="left">1．將zebra.tif拉到Timeline面板，選取「zebra.tif」Layer層，</p>
<p class="style110" align="left">2．按「P」打開Position控制項，點擊Stopwatch符號<a rel="lightbox" href="../../AE/project/36-Timeline2_Basic_Animation/images/36-01.png">（圖例）</a>以設定keyframe。</p>
<p class="style110" align="left">3．第1格畫面將圖移到右下角<a rel="lightbox" href="../../AE/project/36-Timeline2_Basic_Animation/images/36-02.png">（圖例）</a>第60格畫面將圖移到左下角<a rel="lightbox" href="../../AE/project/36-Timeline2_Basic_Animation/images/36-03.png">（圖例）</a></p>
<p class="style110" align="left">4．按空白鍵預覽，圖片從右下角（A點）移動到了左下角（B點），這就是最基本的Keyframe動畫。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step2：『Auto Bezier』</span></h3>
<p class="style110" align="left">接下來，我們在第30格的位置再加上一個動作，讓路徑變成：從「A」移動到「B」再移動到「C」。</p>
<p class="style110" align="left">1．時間移到第30格，將圖片往上移動，這時會產生新的Keyframe<a rel="lightbox" href="../../AE/project/36-Timeline2_Basic_Animation/images/36-04.png">（圖例）</a></p>
<p class="style110" align="left">2．點選「zebra.tif」Layer層的Position全選所有的Keyframe，你可以看到圖片在路徑上的走法。<a rel="lightbox" href="../../AE/project/36-Timeline2_Basic_Animation/images/36-05.png">（圖例）</a></p>
<p class="style110" align="left">3．路徑上的每一個Keyframe都會有前後兩個控制點，但是頭尾的Keyframe只會有一個控制點。<a rel="lightbox" href="../../AE/project/36-Timeline2_Basic_Animation/images/36-06.png">（圖例）</a></p>
<p class="style110" align="left">4．通常，我們做完動作之後，AE就會自動幫我們把路徑變順暢，這時候的控制點叫做『Auto Bezier』，這就是頂頂大名的『貝茲曲線』。</p>
<p class="style110" align="left">5．關於『貝茲曲線』的知識，請上網搜尋就好了，有很多相關教學可以參考，而且幾乎所有的繪圖軟體都會用到貝茲曲線，這是很基本的繪圖知識，請不懂的人多多善用Google查詢。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step3：『Continuous Bezier』</span></h3>
<p class="style110" align="left">1．接著，我們來調整一下貝茲曲線的控制點吧。</p>
<p class="style110" align="left">2．貝茲曲線的控制基本上是前後影響的，所以稱之為Continuous Bezier，但是這個名稱不用記，沒啥意義啦～</p>
<p class="style110" align="left">3．下面的視頻，就是預設貝茲曲線的控制調整方式。<a rel="lightbox" href="../../AE/project/36-Timeline2_Basic_Animation/images/36-07.png">（圖例）</a></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step4：『Bezier』</span></h3>
<p class="style110" align="left">1．這一部分，貝茲前面沒加任何字眼來限制他了，所以貝茲現在是「自由」的了，可以隨便亂調。</p>
<p class="style110" align="left">2．按著『Option（Alt）鍵』調整貝茲曲線的某一點，調整完後放開『Option（Alt）鍵』，繼續調整其他點。</p>
<p class="style110" align="left">3．下面的視頻，就是任意調整貝茲曲線的方式。<a rel="lightbox" href="../../AE/project/36-Timeline2_Basic_Animation/images/36-08.png">（圖例）</a></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step5：『Liner』</span></h3>
<p class="style110" align="left">1．線性路徑，就是直直走～，沒有曲線的走法。</p>
<p class="style110" align="left">2．按住『Option+Command（Alt+Ctrl）』，游標移到Keyframe點上會變成<a rel="lightbox" href="../../AE/project/36-Timeline2_Basic_Animation/images/36-09.png">這個符號</a></p>
<p class="style110" align="left">3．下面的視頻，就是調整貝茲曲線為直線                    的方式。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step6：『Liner＋Bezier』</span></h3>
<p class="style110" align="left">1．已經變成Liner狀態的Keyframe點，按住『Option+Command（Alt+Ctrl）』輕輕點一下<span class="style124">放開</span>，他又會變回Auto Bezier的狀態。<a rel="lightbox" href="../../AE/project/36-Timeline2_Basic_Animation/images/36-10.png">（圖例）</a></p>
<p class="style110" align="left">2．已經變成Liner狀態的Keyframe點，按住『Option+Command（Alt+Ctrl）』輕輕點一下<span class="style124">不放開</span>，他會變成一邊是Liner狀態，另一邊是 Bezier的狀態。<a rel="lightbox" href="../../AE/project/36-Timeline2_Basic_Animation/images/36-11.png">（圖例）</a></p>
<p class="style110" align="left">3．按住『Option+Command（Alt+Ctrl）』在路徑的任何一個位置上點擊，會在該處新增一個Keyframe。</p>
<p class="style110" align="left">4．下面的視頻，就是調整貝茲曲線為直線+貝茲曲線的方式。</p>
<p class="style110" align="left">
<p class="style110" align="left"><span class="style8">後記：</span></p>
<p class="style110" align="left">1． 基本的Keyframe動畫差不多就是這樣，用位移來講解比較容易理解 ，當然，透明度、軸心、縮放、旋轉等等等等，甚至plugin裡的某個效果裡的某個小參數，只要這個參數前面有「Stopwatch小碼表」圖案的話，通 通都可以做成Keyframe動畫，所以了解最基本的觀念後，再去深入了解其他部分，這樣循序漸進的學習才會是有成效的。</p>
<p class="style110" align="left">2．下一篇要開始講解Timeline面板中的keyframe了，這個部分不好講也不好學，所以有可能一篇講不完，或許會到2-3篇吧，寫了才知道，讓我們一起進步吧～～～</p>
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style11" align="center">
<p><strong><img class="alignleft" style="float: left;" src="../../AE/images/space.gif" alt="" width="680" height="80" align="left" /></strong></p>
<p class="style110" align="center">
<p style="text-align: center;">
<p style="text-align: center;"><span style="color: #993300;">如果</span><span style="color: #993300;">對這篇教學有興趣，可以下載範例檔案來練習，有任何使用上的問題，歡迎留言討論</span></p>
<p style="text-align: center;">
<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="../../AE/images/DownloadBall.swf" /><embed type="application/x-shockwave-flash" width="100" height="100" src="../../AE/images/DownloadBall.swf"></embed></object><a href="../../AE/project/36-Timeline2_Basic_Animation/36-Timeline2_Basic_Animation.zip"><img style="border: 0pt none;" src="../../AE/images/DownloadNow.png" alt="" width="285" height="100" /></a></p>
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style110" align="left">
]]></content:encoded>
			<wfw:commentRss>http://www.colorvfx.com/Blog/?feed=rss2&amp;p=50</wfw:commentRss>
	<enclosure url="http://www.colorvfx.com/AE/project/36-Timeline2_Basic_Animation/images/Step3.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/36-Timeline2_Basic_Animation/images/Step4.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/36-Timeline2_Basic_Animation/images/Step5.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/36-Timeline2_Basic_Animation/images/Step6.flv" length="1" type="video/x-flv"/>
	</item>
		<item>
		<title>35.Transformers</title>
		<link>http://www.colorvfx.com/Blog/?p=48</link>
		<comments>http://www.colorvfx.com/Blog/?p=48#comments</comments>
		<pubDate>Mon, 22 Sep 2008 04:00:54 +0000</pubDate>
		<dc:creator>Noise</dc:creator>
		
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.colorvfx.com/Blog/?p=48</guid>
		<description><![CDATA[ •利用AE做出類似「變形金剛」的效果
•製作不困難，觀念才重要
Download Project &#124;                


不久前的案子，客戶想要製作「魔術方塊」的翻轉效果，雖然最後電視上片的時候並不是甚麼「魔術方塊」，但製作過程中測試了一段翻轉效果，乍看起來還滿像「變形金剛」的，效果還不賴，在這分享給各位～
製作過程不難，只是很繁複要有耐心慢慢做，因為太多，所以這篇我只教其中一段的變化方式，其他部分如果想研究，請看下載的範例檔裡面的 "Phone-Cube.aep" 。

這就是這篇教學要做的，從左邊手機翻轉成右邊的手機。



準備素材
1．先下載範例檔，解壓縮後裡面有2張圖要用到：「V6_Black.tif」「V9_Red.tif」。
2．將這兩張圖丟到AE中，等等要在AE中切開他們～
3．新建Comp，取名「V6_Black」，720x486、D1/DV NTSC、90格長度。（圖例）
4．新建Comp，取名「V9_Red」，720x486、D1/DV NTSC、90格長度。(同上啦～名字不同而已)


Step1：V6的切割！！
1．將圖檔「V6_Black.tif」拉到Comp「V6_Black」裡，Layer改名為「V6_01」，開啟3D模式。（圖例）
1.b．忘了打～ Scale設定成XYZ都是 57 。
2．為了方便接下來精準的切割，新增效果 Transition &#62; Linear Wipe 兩次，並將效果參數調整如圖例。
3．結果應該是手機只剩下左上角1/6的畫面，其他被隱藏了。接下來設定他的軸心，這裡必須要考慮到3D環境。
4．選取Layer「V6_01」，按 Y 將軸心位置移到剩下畫面的正中間，也可以參考我的數值直接修改。（圖例）
目前的畫面應該是這樣的：



Step2：複製並修改
1．現在要將剩下的部分通通做出來，點選「V6_01」，按Ctrl+D五次，讓Layer一共有六層。
2．要重複的事有兩樣： 一．Linear Wipe 的修改。 二．軸心位置的修改
3．Linear Wipe 的修改請直接參照 [V6_01] 、 [V6_02] 、 [V6_03] 、 [V6_04] 、 [V6_05] 、 [V6_06]。
4．軸心位置的修改也請直接參照圖例。
目前的畫面應該是這樣的：



Step3：切割另一隻手機V9_Red
1．打開Comp「V9_Red」，重複上面Step1與Step2的所有步驟，做出V9的六層切割畫面。
2．Linear Wipe 的修改請直接參照 [V9_R01] 、 [...]]]></description>
			<content:encoded><![CDATA[<p><a rel="lightbox" href="../../AE/images/35-Transformers.jpg"> <img src="../../AE/images/00-Title_0035.jpg" border="0" alt="" width="300" height="70" align="left" /></a><span class="style116">•利用AE做出類似「變形金剛」的效果</span><br />
<span class="style116">•製作不困難，觀念才重要</span><br />
<a href="../../AE/project/35-Transformers/35-Transformers.zip">Download Project</a> |                <span id="more-48"></span></p>
<p><img src="../../AE/images/00-Title_Big_0035.jpg" alt="" width="550" height="120" /></p>
<p class="style110" align="left">不久前的案子，客戶想要製作「魔術方塊」的翻轉效果，雖然最後電視上片的時候並不是甚麼「魔術方塊」，但製作過程中測試了一段翻轉效果，乍看起來還滿像「變形金剛」的，效果還不賴，在這分享給各位～</p>
<p class="style110" align="left">製作過程不難，只是很繁複要有耐心慢慢做，因為太多，所以這篇我只教其中一段的變化方式，其他部分如果想研究，請看下載的範例檔裡面的 &#8220;Phone-Cube.aep&#8221; 。</p>
<p class="style110" align="left">
<p class="style110" align="center">這就是這篇教學要做的，從左邊手機翻轉成右邊的手機。</p>
<p class="style110" align="center"><img src="../../AE/project/35-Transformers/images/35-01.png" alt="" width="400" height="321" /></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">準備素材</span></h3>
<p class="style110" align="left">1．先下載<a href="../../AE/project/35-Transformers/35-Transformers.zip">範例檔</a>，解壓縮後裡面有2張圖要用到：「V6_Black.tif」「V9_Red.tif」。</p>
<p class="style110" align="left">2．將這兩張圖丟到AE中，等等要在AE中切開他們～</p>
<p class="style110" align="left">3．新建Comp，取名「V6_Black」，720&#215;486、D1/DV NTSC、90格長度。<a rel="lightbox" href="../../AE/project/35-Transformers/images/35-03.png">（圖例）</a></p>
<p class="style110" align="left">4．新建Comp，取名「V9_Red」，720&#215;486、D1/DV NTSC、90格長度。(同上啦～名字不同而已)</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step1：V6的切割！！</span></h3>
<p class="style110" align="left">1．將圖檔「V6_Black.tif」拉到Comp「V6_Black」裡，Layer改名為「V6_01」，開啟3D模式。<a rel="lightbox" href="../../AE/project/35-Transformers/images/35-04.png">（圖例）</a></p>
<p class="style110" align="left">1.b．忘了打～ Scale設定成XYZ都是 57 。</p>
<p class="style110" align="left">2．為了方便接下來精準的切割，新增效果 Transition &gt; Linear Wipe 兩次，並將效果參數調整<a rel="lightbox" href="../../AE/project/35-Transformers/images/35-05.png">如圖例</a>。</p>
<p class="style110" align="left">3．結果應該是手機只剩下左上角1/6的畫面，其他被隱藏了。接下來設定他的軸心，這裡必須要考慮到3D環境。</p>
<p class="style110" align="left">4．選取Layer「V6_01」，按 Y 將軸心位置移到剩下畫面的正中間，也可以參考我的數值直接修改。<a rel="lightbox" href="../../AE/project/35-Transformers/images/35-06.png">（圖例）</a></p>
<p class="style110" align="left">目前的畫面應該是這樣的：</p>
<p class="style110" align="left"><img src="../../AE/project/35-Transformers/images/35-07.png" alt="" width="360" height="268" /></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step2：複製並修改</span></h3>
<p class="style110" align="left">1．現在要將剩下的部分通通做出來，點選「V6_01」，按Ctrl+D五次，讓Layer一共有六層。</p>
<p class="style110" align="left">2．要重複的事有兩樣： 一．Linear Wipe 的修改。 二．軸心位置的修改</p>
<p class="style110" align="left">3．Linear Wipe 的修改請直接參照 <a rel="lightbox[V6]" href="../../AE/project/35-Transformers/images/35-V01.png">[V6_01]</a> 、 <a rel="lightbox[V6]" href="../../AE/project/35-Transformers/images/35-V02.png">[V6_02]</a> 、 <a rel="lightbox[V6]" href="../../AE/project/35-Transformers/images/35-V03.png">[V6_03]</a> 、 <a rel="lightbox[V6]" href="../../AE/project/35-Transformers/images/35-V04.png">[V6_04]</a> 、 <a rel="lightbox[V6]" href="../../AE/project/35-Transformers/images/35-V05.png">[V6_05]</a> 、 <a rel="lightbox[V6]" href="../../AE/project/35-Transformers/images/35-V06.png">[V6_06]</a>。</p>
<p class="style110" align="left">4．軸心位置的修改也請直接參照<a rel="lightbox" href="../../AE/project/35-Transformers/images/35-09.png">圖例。</a></p>
<p class="style110" align="left">目前的畫面應該是這樣的：</p>
<p class="style110" align="left"><img src="../../AE/project/35-Transformers/images/35-10.png" alt="" width="360" height="268" /></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step3：切割另一隻手機V9_Red</span></h3>
<p class="style110" align="left">1．打開Comp「V9_Red」，重複上面Step1與Step2的所有步驟，做出V9的六層切割畫面。</p>
<p class="style110" align="left">2．Linear Wipe 的修改請直接參照<a rel="lightbox[V9]" href="../../AE/project/35-Transformers/images/35-R01.png"> [V9_R01] </a>、<a rel="lightbox[V9]" href="../../AE/project/35-Transformers/images/35-R02.png"> [V9_R02] </a>、<a rel="lightbox[V9]" href="../../AE/project/35-Transformers/images/35-R03.png"> [V9_R03] </a>、<a rel="lightbox[V9]" href="../../AE/project/35-Transformers/images/35-R04.png"> [V9_R04] </a>、<a rel="lightbox[V9]" href="../../AE/project/35-Transformers/images/35-R05.png"> [V9_R05] </a>、<a rel="lightbox[V9]" href="../../AE/project/35-Transformers/images/35-R06.png"> [V9_R06] </a>。</p>
<p class="style110" align="left">3．軸心位置的修改也請直接參照<a rel="lightbox" href="../../AE/project/35-Transformers/images/35-12.png">圖例。</a></p>
<p class="style110" align="left">目前的畫面應該是這樣的：</p>
<p class="style110" align="left"><img src="../../AE/project/35-Transformers/images/35-11.png" alt="" width="359" height="266" /></p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step4：</span></h3>
<p class="style110" align="left">1．新建Comp，取名「V6-&gt;V9R」，720&#215;486、D1/DV NTSC、35格長度。<a rel="lightbox" href="../../AE/project/35-Transformers/images/35-01.png">（圖例）</a></p>
<p class="style110" align="left">2．把「V6_Black」「V9_Red」這兩個Comp裡面的所有layer拷貝到「V6-&gt;V9R」，並把順序排成<a rel="lightbox" href="../../AE/project/35-Transformers/images/35-13.png">圖例</a>。</p>
<p class="style110" align="left">3．再來要做假3D方塊，首先就是要把所有的紅棕手機藏起來，選取所有的V9_XXX Layer，按 R ，做旋轉的動作，第1格<a rel="lightbox" href="../../AE/project/35-Transformers/images/35-14.png"> 設定</a>，第11格<a rel="lightbox" href="../../AE/project/35-Transformers/images/35-15.png"> 設定</a>。<br />
<p class="style110" align="left">4．把V6所有的Layer都連結父層到V9的相對名稱上：V6_01對應V9_R01、V6_02對應V9_R02 .. &#8230;. &#8230;..<a rel="lightbox" href="../../AE/project/35-Transformers/images/35-16.png">（圖例）</a><br />
<p class="style110" align="left">5．調整一下每個Layer的位置，大概調成<a rel="lightbox" href="../../AE/project/35-Transformers/images/35-17.png">這樣即可～</a><br />
<h3 class="style110"><span class="style8">Step5：結束了～</span></h3>
<p class="style110" align="left">1．基本上，到Step4就結束了，其他的應用可以自行發揮。</p>
<p class="style110" align="left">2．依照慣例～我還是會做更多一點東西出來，請看豐富一點的成品</p>
<p>也可以看<a href="../../AE/project/35-Transformers/images/Final.mov">MOV大檔<br />
</a>
<h3><span class="style8">後記：</span></h3>
<p>這一篇其實沒有甚麼操作技巧，也沒有用到甚麼特效，最主要的是製作的觀念，如果你是照著我所有的數值一個一個打進去，說真的，對你的製作功力並不會有太大 的幫助，如果可以，請你試著看懂我的另一個範例檔，或是做出一樣的影片，那一個檔案裡的東西才是製作上真正的精華所在。</p>
<p class="style110" align="left">當然，如果你是初學者，看不懂另一個檔案的內容那是很正常的，也請不要氣餒，多練習多想，久了就會了。</p>
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style11" align="center">
<p><strong><img class="alignleft" style="float: left;" src="../../AE/images/space.gif" alt="" width="680" height="80" align="left" /></strong></p>
<p class="style110" align="center">
<p style="text-align: center;">
<p style="text-align: center;"><span style="color: #993300;">如果</span><span style="color: #993300;">對這篇教學有興趣，可以下載範例檔案來練習，有任何使用上的問題，歡迎留言討論</span></p>
<p style="text-align: center;">
<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="../../AE/images/DownloadBall.swf" /><embed type="application/x-shockwave-flash" width="100" height="100" src="../../AE/images/DownloadBall.swf"></embed></object><a href="../../AE/project/35-Transformers/35-Transformers.zip"><img style="border: 0pt none;" src="../../AE/images/DownloadNow.png" alt="" width="285" height="100" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.colorvfx.com/Blog/?feed=rss2&amp;p=48</wfw:commentRss>
	<enclosure url="http://www.colorvfx.com/AE/project/35-Transformers/images/Step4-1.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/35-Transformers/images/Step4-2.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/35-Transformers/images/Step4-3.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/35-Transformers/images/Final.flv" length="1" type="video/x-flv"/>
	</item>
		<item>
		<title>34.Wave Character</title>
		<link>http://www.colorvfx.com/Blog/?p=47</link>
		<comments>http://www.colorvfx.com/Blog/?p=47#comments</comments>
		<pubDate>Mon, 15 Sep 2008 04:00:00 +0000</pubDate>
		<dc:creator>Noise</dc:creator>
		
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.colorvfx.com/Blog/?p=47</guid>
		<description><![CDATA[  •利用數種效果疊加出文字特效
•再度送上一個文字特效的變化
Download Project &#124; 
Wave Character

水波字幕特效-這篇是結合6種效果,就可做出水波的字幕特效,不需很複雜的動作,也能做出有質感的字效,只要照著這些步驟,就能做出一樣的,也能改變其他參數,也會有不同的效果出來.
這一篇需要用到『Sapphire』的Plugin，還有一個Preset檔，Preset檔可下載，Sapphire請自行下載測試版使用。

Step0：準備工作
1．新建Comp，取名「TEXT」，720x486、D1/DV NTSC、90格長度。（圖例）
2．首先打上一組字幕，中文英文都可以，選擇任一種字型，打什麼當然隨便啦～

Step1：新增Effect - Inner/Outer key
新增 Effect &#62; Keying &#62; Inner/Outer Key
原本的白字會變成有點透明，不是全白的字，然後在Edge Thin &#62; 設定前後2個 keyframe，這是設定字變細程度，接著在 Edge Feather &#62;同樣設定前後2個 Keyframe，參數越大效果越明顯，最後就讓字完全回到原來的樣子。（設定圖例）
[MEDIA=45]
Step2：新增Effect - WipeBlobs
新增Effect &#62; Sapphire Transitions &#62; S_WipeBlobs
加上這效果可以讓字Wipe出現，在 Wipe Percent &#62; 設定前後2個 Keyframe ，從參數大到0，字就會Wipe出現。（設定圖例）
[MEDIA=46]
Step3：新增Preset - PS_OuterGlow
新增 Preset設定 &#62; PS_OuterGlow ，如果你沒有這個Preset設定的話，請下載。
在 Bluriness &#62;設定前後2個 Keyframe，從參數大到0。加上Blur效果就會比較柔。（設定圖例）
[MEDIA=47]
Step4：新增Effect - CC Drizzle
新增 Effect &#62; Simulation &#62; CC [...]]]></description>
			<content:encoded><![CDATA[<p><a rel="lightbox" href="../../AE/images/34-Wave_Character.jpg"> <img src="../../AE/images/00-Title_0034.jpg" border="0" alt="" width="300" height="70" align="left" /></a> <span class="style116">•利用數種效果疊加出文字特效</span><br />
<span class="style116">•再度送上一個文字特效的變化</span><br />
<a href="../../AE/project/34-Wave_Character/34-Wave_Character.zip">Download Project</a> | <span id="more-47"></span></p>
<h1 class="style121">Wave Character</h1>
<p><img src="../../AE/images/00-Title_Big_0034.jpg" alt="" width="550" height="120" /></p>
<p class="style110" align="left"><span class="style122">水波字幕特效-</span>這篇是結合6種效果,就可做出水波的字幕特效,不需很複雜的動作,也能做出有質感的字效,只要照著這些步驟,就能做出一樣的,也能改變其他參數,也會有不同的效果出來.</p>
<p class="style110" align="left">這一篇需要用到『Sapphire』的Plugin，還有一個Preset檔，Preset檔可<a href="../../AE/project/34-Wave_Character/PS_OuterGlow.ffx">下載</a>，Sapphire請自行下載測試版使用。</p>
<h3 class="style110"><span class="style8">Step0：準備工作</span></h3>
<p class="style110" align="left">1．新建Comp，取名「TEXT」，720&#215;486、D1/DV NTSC、90格長度。<a rel="lightbox" href="../../AE/project/34-Wave_Character/images/34-01.png">（圖例）</a></p>
<p class="style110" align="left">2．首先打上一組字幕，中文英文都可以，選擇任一種字型，打什麼當然隨便啦～</p>
<h3 class="style110"><span class="style8">Step1：新增Effect - Inner/Outer key</span></h3>
<p class="style110" align="left">新增 Effect &gt; Keying &gt; Inner/Outer Key</p>
<p>原本的白字會變成有點透明，不是全白的字，然後在Edge Thin &gt; 設定前後2個 keyframe，這是設定字變細程度，接著在 Edge Feather &gt;同樣設定前後2個 Keyframe，參數越大效果越明顯，最後就讓字完全回到原來的樣子。<a rel="lightbox" href="../../AE/project/34-Wave_Character/images/34-02.png">（設定圖例）</a><br />
<h3><span class="style8">Step2：新增Effect - WipeBlobs</span></h3>
<p>新增Effect &gt; Sapphire Transitions &gt; S_WipeBlobs<br />
加上這效果可以讓字Wipe出現，在 Wipe Percent &gt; 設定前後2個 Keyframe ，從參數大到0，字就會Wipe出現。<a rel="lightbox" href="../../AE/project/34-Wave_Character/images/34-03.png">（設定圖例）<br />
</a>
<h3 class="style110"><span class="style8">Step3：新增Preset - PS_OuterGlow</span></h3>
<p>新增 Preset設定 &gt; PS_OuterGlow ，如果你沒有這個Preset設定的話，請<a href="../../AE/project/34-Wave_Character/PS_OuterGlow.ffx">下載</a>。<br />
在 Bluriness &gt;設定前後2個 Keyframe，從參數大到0。加上Blur效果就會比較柔。<a rel="lightbox" href="../../AE/project/34-Wave_Character/images/34-04.png">（設定圖例）</a><br />
<h3 class="style110"><span class="style8">Step4：新增Effect - CC Drizzle</span></h3>
<p>新增 Effect &gt; Simulation &gt; CC Drizzle，這個效果就是重點了，很明顯能看到有水波效果出現。<br />
接著調整 &gt; Drip Rate &gt;  這是設定連漪的數量,參數越大數量越多，<br />
&gt; Displacement &gt; 調整連漪的清晰程度，<br />
&gt; Spreading &gt; 調整連漪擴散範圍，設定前後2個 Keyframe，從參數大到0，這樣連漪就會從有到完全消失。<a rel="lightbox" href="../../AE/project/34-Wave_Character/images/34-05.png">（設定圖例）</a><br />
<h3 class="style110"><span class="style8">Step5：新增Effect - 4-Color Gradient</span></h3>
<p>新增 Effect &gt; Generate &gt; 4-Color Gradient<br />
Blending Mode &gt; 選擇 Add 這樣字效就會帶有顏色，看起來會更豐富。<a rel="lightbox" href="../../AE/project/34-Wave_Character/images/34-06.png">（設定圖例）</a><br />
<h3 class="style110"><span class="style8">Step6：新增Effect - CC Glasst</span></h3>
<p>新增 Effect &gt; Stylize &gt; CC Glass<br />
Height 設定為10，Softness設定前後 Keyframe。<a rel="lightbox" href="../../AE/project/34-Wave_Character/images/34-07.png">（設定圖例）</a></p>
<p class="style110" align="left"><br />
每個效果都能調整更多的參數，可以多去試一試，將會有不同感覺的字效產生。</p>
<p class="style110" align="left">
<h3 class="style110"><span class="style8">Step7：當然不能只有黑底白字～</span></h3>
<p>另外找了張圖做合成，合成部分就不多寫了，請自行看範例檔研究。<br />
看最後成品，也有<a href="../../AE/project/34-Wave_Character/images/Step-Final.mov">MOV大檔</a><br /><a rel="lightbox" href="../../AE/project/34-Wave_Character/images/34-03.png"> </a></p>
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style11" align="center">
<p><strong><img class="alignleft" style="float: left;" src="../../AE/images/space.gif" alt="" width="680" height="80" align="left" /></strong></p>
<p class="style110" align="center">
<p style="text-align: center;">
<p style="text-align: center;"><span style="color: #993300;">如果</span><span style="color: #993300;">對這篇教學有興趣，可以下載範例檔案來練習，有任何使用上的問題，歡迎留言討論</span></p>
<p style="text-align: center;">
<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="../../AE/images/DownloadBall.swf" /><embed type="application/x-shockwave-flash" width="100" height="100" src="../../AE/images/DownloadBall.swf"></embed></object><a href="../../AE/project/34-Wave_Character/34-Wave_Character.zip"><img style="border: 0pt none;" src="../../AE/images/DownloadNow.png" alt="" width="285" height="100" /></a></p>
<p><a rel="lightbox" href="../../AE/project/34-Wave_Character/images/34-03.png"> </a><a rel="lightbox" href="../../AE/project/34-Wave_Character/images/34-03.png"> </a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.colorvfx.com/Blog/?feed=rss2&amp;p=47</wfw:commentRss>
	<enclosure url="http://www.colorvfx.com/AE/project/34-Wave_Character/images/Step-01.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/34-Wave_Character/images/Step-02.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/34-Wave_Character/images/Step-03.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/34-Wave_Character/images/Step-04.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/34-Wave_Character/images/Step-05.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/34-Wave_Character/images/Step-06.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/34-Wave_Character/images/Step-Final.flv" length="1" type="video/x-flv"/>
	</item>
		<item>
		<title>33.Hypothesized 3D</title>
		<link>http://www.colorvfx.com/Blog/?p=46</link>
		<comments>http://www.colorvfx.com/Blog/?p=46#comments</comments>
		<pubDate>Mon, 08 Sep 2008 16:32:12 +0000</pubDate>
		<dc:creator>Noise</dc:creator>
		
		<category><![CDATA[Tutorial]]></category>

		<category><![CDATA[AE]]></category>

		<category><![CDATA[Effect]]></category>

		<guid isPermaLink="false">http://www.colorvfx.com/Blog/?p=46</guid>
		<description><![CDATA[ •利用數種效果疊加出文字特效
•文字特效的變化千奇百怪，先送上一個
Download Project &#124; 


虛擬3D分子的字幕特效
字幕特效有上千萬種，只要一點小變化，就會很不一樣，通常客戶只會說個感覺，不外乎就是有氣質啦，或是很炫的字效，當中的感覺就必須要看整個畫面，來設計 適合的字幕特效，適當的字幕能加強整個畫面的張力，所以這篇教學就是結合4種效果，做出虛擬3D分子的字幕特效，讓你用合成軟體也能做出像3D質感的字幕 效果。

Step1：準備工作
1．新建Comp，取名「TEXT」，720x486、D1/DV NTSC、70格長度。（圖例）
2．打上一組字幕，中文英文都可以，選你最喜歡的一種字型（圖例）
3．就這樣，沒甚麼好準備的啦～ XD

Step2：新增四種效果
1．新增 Effect &#62; Generate &#62; 4-Color Gradient，原本的白字會變成有４種色彩，也可隨意改成你喜歡的任何顏色（設定圖例）



2．新增Effect &#62; Glow &#62; 加上這個效果是為了跑光，當然也有其他的做法，
Glow Threshold &#62; 設定前後2個 keyframe，讓跑光從左到右。
Glow Colors &#62; 選 「A&#38;B Colors」（設定圖例）



3．新增 Effect &#62; Simulation &#62; CC Ball Action
Grid spacing &#62; 是調整字裡球體的數量多少，參數越大球體數量越少，這裡用 4。
Ball size &#62; 調整球的大小，這裡用 56。
Scatter &#62; 設定前後2個 Keyframe，參數可以隨意調整，這個是調整分子的擴散範圍。
Twist Angle &#62; 調整字的旋轉，一樣前後設定2個 Keyframe，就會產生旋轉效果。（設定圖例）



4．最後再新增 Effect &#62; Trapcode &#62; Starglow
Streak [...]]]></description>
			<content:encoded><![CDATA[<p class="style110" align="left"><a rel="lightbox" href="../../AE/images/33-Hypothesized_3D.jpg"> <img src="../../AE/images/00-Title_0033.jpg" border="0" alt="" width="300" height="70" align="left" /></a><span class="style116">•利用數種效果疊加出文字特效</span><br />
<span class="style116">•文字特效的變化千奇百怪，先送上一個</span><br />
<a href="../../AE/project/33-Hypothesized_3D/33-Hypothesized_3D.aep">Download Project</a> | <span id="more-46"></span></p>
<p class="style110" align="center"><img src="../../AE/images/00-Title_Big_0033.jpg" alt="" width="550" height="120" /><br />
<span class="style122">虛擬3D分子的字幕特效</span><br />
字幕特效有上千萬種，只要一點小變化，就會很不一樣，通常客戶只會說個感覺，不外乎就是有氣質啦，或是很炫的字效，當中的感覺就必須要看整個畫面，來設計 適合的字幕特效，適當的字幕能加強整個畫面的張力，所以這篇教學就是結合4種效果，做出虛擬3D分子的字幕特效，讓你用合成軟體也能做出像3D質感的字幕 效果。</p>
<h3 class="style110"><span class="style8">Step1：準備工作</span></h3>
<p class="style110" align="left">1．新建Comp，取名「TEXT」，720&#215;486、D1/DV NTSC、70格長度。<a rel="lightbox" href="../../AE/project/33-Hypothesized_3D/images/33-01.png">（圖例）</a></p>
<p class="style110" align="left">2．打上一組字幕，中文英文都可以，選你最喜歡的一種字型<a rel="lightbox" href="../../AE/project/33-Hypothesized_3D/images/33-02.png">（圖例）</a></p>
<p class="style110" align="left">3．就這樣，沒甚麼好準備的啦～ XD</p>
<h3><span class="style8">Step2</span><span class="style8">：新增四種效果</span></h3>
<p class="style110" align="left">1．新增 Effect &gt; Generate &gt; 4-Color Gradient，原本的白字會變成有４種色彩，也可隨意改成你喜歡的任何顏色<a rel="lightbox[step1]" href="../../AE/project/33-Hypothesized_3D/images/33-04.png">（設定圖例）</a></p>
<p class="style110" align="left"><img src="../../AE/project/33-Hypothesized_3D/images/33-03.png" alt="" width="320" height="214" /></p>
<p class="style110" align="left">
<p class="style110" align="left">2．新增Effect &gt; Glow &gt; 加上這個效果是為了跑光，當然也有其他的做法，<br />
Glow Threshold &gt; 設定前後2個 keyframe，讓跑光從左到右。<br />
Glow Colors &gt; 選 「A&amp;B Colors」<a rel="lightbox[step1]" href="../../AE/project/33-Hypothesized_3D/images/33-06.png">（設定圖例）</a></p>
<p class="style110" align="left"><img src="../../AE/project/33-Hypothesized_3D/images/33-08.png" alt="" width="320" height="213" /></p>
<p class="style110" align="left">
<p class="style110" align="left">3．新增 Effect &gt; Simulation &gt; CC Ball Action<br />
Grid spacing &gt; 是調整字裡球體的數量多少，參數越大球體數量越少，這裡用 4。<br />
Ball size &gt; 調整球的大小，這裡用 56。<br />
Scatter &gt; 設定前後2個 Keyframe，參數可以隨意調整，這個是調整分子的擴散範圍。<br />
Twist Angle &gt; 調整字的旋轉，一樣前後設定2個 Keyframe，就會產生旋轉效果。<a rel="lightbox[step1]" href="../../AE/project/33-Hypothesized_3D/images/33-07.png">（設定圖例）</a></p>
<p class="style110" align="left"><img src="../../AE/project/33-Hypothesized_3D/images/33-09.png" alt="" width="320" height="214" /></p>
<p class="style110" align="left">
<p class="style110" align="left">4．最後再新增 Effect &gt; Trapcode &gt; Starglow<br />
Streak Lengths &gt; 調整光芒的強度範圍大小.<br />
Boost Light &gt; 調整光的亮度.<br />
Colormap C &gt; Prest &gt; Electric<br />
當然也能選擇其他選項，光芒就有不同變化，也會有不一樣的感覺。</p>
<p class="style110" align="left"><img src="../../AE/project/33-Hypothesized_3D/images/33-10.png" alt="" width="320" height="213" /></p>
<p class="style110" align="left">
<p class="style110" align="left">只要加上這4個效果，就可以做出，虛擬3d感覺的字幕特效，喜歡閃亮亮效果的，可以試試看。</p>
<p class="style110" align="left">
<p class="style110" align="left">
<h3><span class="style8">Step3</span><span class="style8">：試著調整一下吧～</span></h3>
<p>也可以看<a href="../../AE/project/33-Hypothesized_3D/images/Text-Final.mov">MOV大檔</a></p>
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style110" align="left">
<p class="style11" align="center">
<p><strong><img class="alignleft" style="float: left;" src="../../AE/images/space.gif" alt="" width="680" height="80" align="left" /></strong></p>
<p class="style110" align="center">
<p style="text-align: center;">
<p style="text-align: center;"><span style="color: #993300;">如果</span><span style="color: #993300;">對這篇教學有興趣，可以下載範例檔案來練習，有任何使用上的問題，歡迎留言討論</span></p>
<p style="text-align: center;">
<p style="text-align: center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="../../AE/images/DownloadBall.swf" /><embed type="application/x-shockwave-flash" width="100" height="100" src="../../AE/images/DownloadBall.swf"></embed></object><a href="../../AE/project/33-Hypothesized_3D/33-Hypothesized_3D.aep"><img style="border: 0pt none;" src="../../AE/images/DownloadNow.png" alt="" width="285" height="100" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.colorvfx.com/Blog/?feed=rss2&amp;p=46</wfw:commentRss>
	<enclosure url="http://www.colorvfx.com/AE/project/33-Hypothesized_3D/images/TEXT.flv" length="1" type="video/x-flv"/>
<enclosure url="http://www.colorvfx.com/AE/project/33-Hypothesized_3D/images/Text-Final.flv" length="1" type="video/x-flv"/>
	</item>
	</channel>
</rss>
