<?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"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>It's FROGiology &#187; usage</title>
	<atom:link href="http://blog.frogiology.com/tag/usage/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.frogiology.com</link>
	<description>the study about me</description>
	<lastBuildDate>Sat, 16 Jan 2010 19:26:40 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>Tweener 10大用途</title>
		<link>http://blog.frogiology.com/2008/09/07/flash-tweener-lesson3-10-usages/</link>
		<comments>http://blog.frogiology.com/2008/09/07/flash-tweener-lesson3-10-usages/#comments</comments>
		<pubDate>Sun, 07 Sep 2008 11:06:07 +0000</pubDate>
		<dc:creator>Stanley Fok</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[application]]></category>
		<category><![CDATA[papervision3d]]></category>
		<category><![CDATA[tweener]]></category>
		<category><![CDATA[usage]]></category>

		<guid isPermaLink="false">http://blog.frogiology.com/?p=162</guid>
		<description><![CDATA[很多人都以為Tweener只是可以用來Tween Movieclip的屬性，只局限了在二維空間內發揮。但其實如果懂得利用，它的用途可以是非常廣泛的，令人嘆為觀止的RIA也亦由此而來。現在讓Stanley介紹Tweener 10式吧! &#62;&#62; 下載所有例子: Tweener Tutorial Examples (1.8Mb) &#60;&#60; 1. Smooth Drag and Drop Flash 其實已提供了startDrag(); 功能讓你做到拖曳，可是用這方法來拖曳東西總是給人很不爽的感覺。但是如果在MouseMove 事件用了Tweener來Tween MovieClip的x及y座標後，感覺截然不同了! 請試試看~ &#62;&#62; 下載&#8221;Smooth Drag and Drop&#8221; source code 2. Number Counter Tweener本來就是用來interpolate數值的，因此很順理成章我們可以用它來做計數器。如果沒有Tweener，你可能要利用EnterFrame事件，並且加上很麻煩的邏輯來完成，很花時間。現在用了Tweener，幾行的程式碼就可做到了! 這個計數器可應用在計分板之類的地方，定可為你的RIA帶來多些生氣呢~ &#62;&#62; 下載&#8221;Number Counter&#8221; source code 3. Content Scroller 這次都是用了Tweener控制MovieClip的x,y座標，但是如果懂得利用，可以做出以下的捲動效果。幾行程式碼而已，誰也可以做到! &#62;&#62; 下載&#8221;Content Scroller&#8221; source code 4. Animation Sequence 以前要做一連串的animation，通常一想到就是用timer function做 (即AS2的setInterval)。可是用timer時，你就要控制何時要移除timer，頗麻煩的。但你又知不知設定Tweener時，你可以加入&#8221;delay&#8221;這個設定? 如&#8221;delay&#8221;是1，tweening將會於一秒後開始。利用delay，你只要在一個for loop中加入Tweener，並給予不同delay的數值，也可以做到同樣效果! &#62;&#62; [...]]]></description>
			<content:encoded><![CDATA[<p>很多人都以為Tweener只是可以用來Tween Movieclip的屬性，只局限了在二維空間內發揮。但其實如果懂得利用，它的用途可以是非常廣泛的，令人嘆為觀止的RIA也亦由此而來。現在讓Stanley介紹Tweener 10式吧!</p>
<p><span style="color: #ff6600;"><strong>&gt;&gt;</strong></span><span style="font-size: small; color: #ff6600;"><strong><span> 下載所有例子: <a title="Tweener Tutorial Examples" href="http://blog.frogiology.com/upload/tutorial/tweener/tweener_tutorial.zip">Tweener Tutorial Examples</a> (1.8Mb) &lt;&lt;<br />
</span></strong></span></p>
<p><span id="more-162"></span></p>
<p><strong>1. Smooth Drag and Drop</strong></p>
<p>Flash 其實已提供了startDrag(); 功能讓你做到拖曳，可是用這方法來拖曳東西總是給人很不爽的感覺。但是如果在MouseMove 事件用了Tweener來Tween MovieClip的x及y座標後，感覺截然不同了! 請試試看~</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://blog.frogiology.com/upload/tutorial/tweener/1_drag_n_drop.swf" /><embed type="application/x-shockwave-flash" width="480" height="250" src="http://blog.frogiology.com/upload/tutorial/tweener/1_drag_n_drop.swf"></embed></object><br />
&gt;&gt; <a href="http://blog.frogiology.com/upload/tutorial/tweener/1_drag_n_drop.zip">下載&#8221;Smooth Drag and Drop&#8221; source code</a></p>
<p><strong>2. Number Counter</strong></p>
<p>Tweener本來就是用來interpolate數值的，因此很順理成章我們可以用它來做計數器。如果沒有Tweener，你可能要利用EnterFrame事件，並且加上很麻煩的邏輯來完成，很花時間。現在用了Tweener，幾行的程式碼就可做到了! 這個計數器可應用在計分板之類的地方，定可為你的RIA帶來多些生氣呢~</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://blog.frogiology.com/upload/tutorial/tweener/2_number_counter.swf" /><embed type="application/x-shockwave-flash" width="480" height="250" src="http://blog.frogiology.com/upload/tutorial/tweener/2_number_counter.swf"></embed></object><br />
&gt;&gt; <a href="http://blog.frogiology.com/upload/tutorial/tweener/2_number_counter.zip">下載&#8221;Number Counter&#8221; source code</a></p>
<p><strong>3. Content Scroller</strong></p>
<p>這次都是用了Tweener控制MovieClip的x,y座標，但是如果懂得利用，可以做出以下的捲動效果。幾行程式碼而已，誰也可以做到!</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://blog.frogiology.com/upload/tutorial/tweener/3_content_scroller.swf" /><embed type="application/x-shockwave-flash" width="480" height="250" src="http://blog.frogiology.com/upload/tutorial/tweener/3_content_scroller.swf"></embed></object><br />
&gt;&gt; <a href="http://blog.frogiology.com/upload/tutorial/tweener/3_content_scroller.zip">下載&#8221;Content Scroller&#8221; source code</a></p>
<p><strong>4. Animation Sequence</strong></p>
<p>以前要做一連串的animation，通常一想到就是用timer function做 (即AS2的setInterval)。可是用timer時，你就要控制何時要移除timer，頗麻煩的。但你又知不知設定Tweener時，你可以加入&#8221;delay&#8221;這個設定? 如&#8221;delay&#8221;是1，tweening將會於一秒後開始。利用delay，你只要在一個for loop中加入Tweener，並給予不同delay的數值，也可以做到同樣效果!</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://blog.frogiology.com/upload/tutorial/tweener/4_animation_sequence.swf" /><embed type="application/x-shockwave-flash" width="480" height="250" src="http://blog.frogiology.com/upload/tutorial/tweener/4_animation_sequence.swf"></embed></object><br />
&gt;&gt; <a href="http://blog.frogiology.com/upload/tutorial/tweener/4_animation_sequence.zip">下載&#8221;Animation Sequence&#8221; source code</a></p>
<p><strong>5. Simulation of Locus</strong></p>
<p>Locus即軌跡，是指物件在二維或三維空間走過的路徑。好像下面兩個例子，是拋物線及四分一個圓的弧線，如果要做，可以寫數式去做，不過會很麻。不過如果你懂得把x及y分開來tween，並且善用Tweener提供的transition type，這個效果幾行程式碼就可完成了!</p>
<p>以拋物線為例，x 就用linear transition tween 2秒，y就先用easeOutQuad transition tween 1秒，之後再用easeInQuad transition tween 1秒回到原來的y就可。為何是 easeOutQuad 及 easeInQuad? 因為在物理世界中，物件受地心吸力下的拋物線是二元算式來的(quadratic equation)。圓形則用easeInSine 及 easeOutSine分別處理x及y座標就可以了。</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://blog.frogiology.com/upload/tutorial/tweener/5_simulation_of_locus.swf" /><embed type="application/x-shockwave-flash" width="480" height="250" src="http://blog.frogiology.com/upload/tutorial/tweener/5_simulation_of_locus.swf"></embed></object><br />
&gt;&gt; <a href="http://blog.frogiology.com/upload/tutorial/tweener/5_simulation_of_locus.zip">下載&#8221;Simulation of Locus&#8221; source code</a></p>
<p><strong>6. Fading Sound Volume</strong></p>
<p>不說不知，聲音大小也可以tween啊，這樣是不是比直接把聲量定為0或1更自然呢?</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://blog.frogiology.com/upload/tutorial/tweener/6_fading sound_volume.swf" /><embed type="application/x-shockwave-flash" width="480" height="250" src="http://blog.frogiology.com/upload/tutorial/tweener/6_fading sound_volume.swf"></embed></object><br />
&gt;&gt;&gt; <a href="http://blog.frogiology.com/upload/tutorial/tweener/6_fading sound_volume.zip">下載&#8221;Fading Sound Volume&#8221; source code</a></p>
<p><strong>7. Spony Objects</strong></p>
<p>Tweener有幾個transition type幾好玩的，就是easeOutBack及easeOutElastic。利用它們可以做出感覺很有彈性的東西呢~ 很多日本人做的RIA經常用這個效果的啊!</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://blog.frogiology.com/upload/tutorial/tweener/7_spony_object.swf" /><embed type="application/x-shockwave-flash" width="480" height="250" src="http://blog.frogiology.com/upload/tutorial/tweener/7_spony_object.swf"></embed></object><br />
&gt;&gt; <a href="http://blog.frogiology.com/upload/tutorial/tweener/7_spony_object.zip">下載&#8221;Spony Objects&#8221; source code</a></p>
<p><strong>8. Tween the Blur Filter</strong></p>
<p>玩到沒東西好玩了~ Blur Filter 也tween來試試看吧!</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://blog.frogiology.com/upload/tutorial/tweener/8_tween_blur_filter.swf" /><embed type="application/x-shockwave-flash" width="480" height="250" src="http://blog.frogiology.com/upload/tutorial/tweener/8_tween_blur_filter.swf"></embed></object><br />
&gt;&gt; <a href="http://blog.frogiology.com/upload/tutorial/tweener/8_tween_blur_filter.zip">下載&#8221;Tween the Blur Filter&#8221; source code</a></p>
<p><strong>9. Tween in Papervision3D</strong></p>
<p>相信這是最好玩的了! 留意RIA的朋友也應該聽過Papervision3D吧，它是一個open source的Flash 3D engine。在Papervision3D中，camera及 一般DisplayObject3D也有x,y及z的屬性。喜歡甚麼也tween一回的Stanley，今次又有東西玩了! 讓我只是tween camera的位置及望向的位置，只是簡單的程式碼又可以做到厲害的效果了!</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="400" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://blog.frogiology.com/upload/tutorial/tweener/9_tween_in_papervision3d.swf" /><embed type="application/x-shockwave-flash" width="480" height="400" src="http://blog.frogiology.com/upload/tutorial/tweener/9_tween_in_papervision3d.swf"></embed></object><br />
&gt;&gt; <a href="http://blog.frogiology.com/upload/tutorial/tweener/9_tween_in_papervision3d.zip">下載&#8221;Tween in Papervision3D&#8221; source code</a></p>
<p><strong>10. Tween the Function</strong></p>
<p>最後一招，Tweener提供了Tweener.addCaller(); 的功能，你可以用它來設定一個時間入call一個function多少次，而call function的頻率，是用transition type的控制。以下面的例子來說，我有一個function是用來創建圓形的，你可以見到圓形是創建得愈來愈快的，這是因為用了transition type有關。</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://blog.frogiology.com/upload/tutorial/tweener/10_timer_function.swf" /><embed type="application/x-shockwave-flash" width="480" height="250" src="http://blog.frogiology.com/upload/tutorial/tweener/10_timer_function.swf"></embed></object><br />
&gt;&gt; <a href="http://blog.frogiology.com/upload/tutorial/tweener/10_timer_function.zip">下載&#8221;Tween the Function&#8221; source code</a></p>
<p>&gt;&gt; <a title="Lesson 5: Tweener 有無用武之地的時候?" href="http://blog.frogiology.com/2008/09/13/flash-tweener-lesson5-not-suitable/">Lesson 5: Tweener 有無用武之地的時候?<strong><strong></strong></strong></a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.frogiology.com/2008/09/07/flash-tweener-lesson3-10-usages/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
	</channel>
</rss>

