<?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>Kimkijeung.com &#187; ColorMatrixFilter</title>
	<atom:link href="http://kimkijeung.com/tag/colormatrixfilter/feed/" rel="self" type="application/rss+xml" />
	<link>http://kimkijeung.com</link>
	<description>Interactive development,flash,Actionscript</description>
	<lastBuildDate>Wed, 25 Aug 2010 09:12:14 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
<image>
			<title>Kimkijeung.com</title>
			<url>http://kimkijeung.com/blog/wp-content/uploads/2009/12/index.gif</url>
			<link>http://kimkijeung.com</link>
			<width></width>
			<height></height>
			<description>Interactive development,flash,Actionscript</description>
		</image>		<item>
		<title>ColorMatrixFilter TweenEngine</title>
		<link>http://kimkijeung.com/2007/03/19/colormatrixfilter-tweenengine/</link>
		<comments>http://kimkijeung.com/2007/03/19/colormatrixfilter-tweenengine/#comments</comments>
		<pubDate>Mon, 19 Mar 2007 09:05:19 +0000</pubDate>
		<dc:creator>vkimone</dc:creator>
				<category><![CDATA[Flash-AS2.0]]></category>
		<category><![CDATA[AS2.0]]></category>
		<category><![CDATA[ColorMatrixFilter]]></category>
		<category><![CDATA[TweenEngine]]></category>

		<guid isPermaLink="false">http://vkimone.inblog.kr/?p=434</guid>
		<description><![CDATA[ColorMatrixFilter 클래스를 이용하면  이미지의 각 픽셀의 RGBA 색상 및 알파 값에 4 x 5 행렬 변환을 적용하여 saturation 또는 contrast 또는  brightness 를 적용할수 있다. 물론 각각의 ColorMatrixFilter 에 적용되는 matrix 속성값을 다르게 설정하여야 한다. 이 예제에서 활용한 ColorMatrix 는 Mario Klingemann(http://www.quasimondo.com) 가 제작한 소스를 이용하여 트윈클래스를 제작하였다. 기본적인 클래스 구조는 이전의 트윈클래스와 같다. 객체속성을 이용하여 for~in [...]]]></description>
			<content:encoded><![CDATA[<p><span style="color: #333333;">ColorMatrixFilter 클래스를 이용하면  이미지의 각 픽셀의 RGBA 색상 및 알파 값에 4 x 5 행렬 변환을 적용하여 saturation 또는 contrast 또는  brightness 를 적용할수 있다. 물론 각각의 ColorMatrixFilter 에 적용되는 matrix 속성값을 다르게 설정하여야 한다.</span></p>
<p><span style="color: #ff9900;"><span style="color: #333333;"> 이 예제에서 활용한 ColorMatrix 는 Mario Klingemann(<a href="http://www.quasimondo.com">http://www.quasimondo.com</a>) 가 제작한 소스를 이용하여 트윈클래스를 제작하였다.<br />
기본적인 클래스 구조는 이전의 트윈클래스와 같다. 객체속성을 이용하여 for~in 구문으로 트윈을 적용하였다. 다른 객체에 비해 적용되는 속성의 갯수(matrix 속성)가 20개로써 많기 때문에 이미지를 크게 하거나 트윈길이를 너무 길게할 경우 느려질 수가 있다. 또한 트윈이후 이전 트윈클래스와 같이 콜백함수를 호출할 수 있다.</span></span></p>
<p><span style="color: #333333;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="menu" value="false" /><param name="src" value="/blog/wp-content/uploads/2009/12/colorMatrixTween.swf" /><embed type="application/x-shockwave-flash" width="500" height="100" src="/blog/wp-content/uploads/2009/12/colorMatrixTween.swf" menu="false"></embed></object></span></p>
<p><strong><a href="blog/wp-content/uploads/2009/12/colorMatrixTween.zip" target="_self">download sample</a></strong></p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">//==================================================================</span>
<span style="color: #808080; font-style: italic;">//@class name  :  ColorMatrixTween.as</span>
<span style="color: #808080; font-style: italic;">//@author          : vkimone. KimKiJeung  (http://kimkijeung.com)</span>
<span style="color: #808080; font-style: italic;">//@last update   : 2007. 03. 19</span>
<span style="color: #808080; font-style: italic;">//@version         : V1.0</span>
<span style="color: #808080; font-style: italic;">//==================================================================</span>
<span style="color: #808080; font-style: italic;">/**
 @description
* 무비클립의  ColorMatrixFilter 트윈 클래스 : 이징함수 설정으로 조절 
&nbsp;
* @example
*     &lt;code&gt;
*     ColorMatrixTween.tween(targetMc,0,ColorMatrixTween.SATURATION,Regular.easeOut,30,
             {{func: callBackFunction,obj: functionScope, param: [파라미터 배열로 들어감]}}
*     &lt;/code&gt;
*/</span>
&nbsp;
<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">filters</span>.<span style="color: #006600;">ColorMatrixFilter</span>;
<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">dstrict</span>.<span style="color: #006600;">UB</span>.<span style="color: #006600;">util</span>.<span style="color: #006600;">filters</span>.<span style="color: #006600;">ColorMatrix</span>;
<span style="color: #000000; font-weight: bold;">class</span> com.<span style="color: #006600;">dstrict</span>.<span style="color: #006600;">UB</span>.<span style="color: #006600;">util</span>.<span style="color: #006600;">transitions</span>.<span style="color: #006600;">tween</span>.<span style="color: #006600;">ColorMatrixTween</span><span style="color: #66cc66;">&#123;</span>
  <span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">var</span> SATURATION:<span style="color: #0066CC;">String</span>=<span style="color: #ff0000;">&quot;saturation&quot;</span>;
  <span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">var</span> CONTRAST:<span style="color: #0066CC;">String</span>=<span style="color: #ff0000;">&quot;contrast&quot;</span>;
  <span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">var</span> BRIGHTNESS:<span style="color: #0066CC;">String</span>=<span style="color: #ff0000;">&quot;brightness&quot;</span>;
&nbsp;
 <span style="color: #808080; font-style: italic;">/**---------------------------------------------------------------------
  *@description  saturation, contrast, brightness 트랜지션
    @param mc : MovieClip, 적용무비클립
    @param value : Number , 적용 percentage
    @param mode :String , saturation or contrast or brightness mode
    @param func : Function, easing function
   @param durationFrame : Number, 지속프레임
*----------------------------------------------------------------------*/</span>
<span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">function</span> tween<span style="color: #66cc66;">&#40;</span>mc:<span style="color: #0066CC;">MovieClip</span>,value:<span style="color: #0066CC;">Number</span>,mode:<span style="color: #0066CC;">String</span>,func:<span style="color: #000000; font-weight: bold;">Function</span>,durationFrame:<span style="color: #0066CC;">Number</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Void</span><span style="color: #66cc66;">&#123;</span>
<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">time</span>:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">1</span>;
<span style="color: #000000; font-weight: bold;">var</span> beginning:<span style="color: #0066CC;">Array</span>=<span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Array</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000000; font-weight: bold;">var</span> change:<span style="color: #0066CC;">Array</span>=<span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Array</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
 <span style="color: #000000; font-weight: bold;">var</span> mat:ColorMatrix = <span style="color: #000000; font-weight: bold;">new</span> ColorMatrix<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
 <span style="color: #b1b100;">switch</span><span style="color: #66cc66;">&#40;</span>mode<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
   <span style="color: #b1b100;">case</span> SATURATION :
     mat.<span style="color: #006600;">adjustSaturation</span><span style="color: #66cc66;">&#40;</span>value<span style="color: #66cc66;">/</span><span style="color: #cc66cc;">100</span><span style="color: #66cc66;">&#41;</span>;
     <span style="color: #b1b100;">break</span>;
&nbsp;
   <span style="color: #b1b100;">case</span> CONTRAST :
     mat.<span style="color: #006600;">adjustContrast</span><span style="color: #66cc66;">&#40;</span>value<span style="color: #66cc66;">/</span><span style="color: #cc66cc;">100</span><span style="color: #66cc66;">&#41;</span>;
     <span style="color: #b1b100;">break</span>;
&nbsp;
   <span style="color: #b1b100;">case</span> BRIGHTNESS :
     mat.<span style="color: #006600;">adjustBrightness</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #66cc66;">*</span>value<span style="color: #66cc66;">/</span><span style="color: #cc66cc;">100</span><span style="color: #66cc66;">&#41;</span>;
     <span style="color: #b1b100;">break</span>;
  <span style="color: #66cc66;">&#125;</span>
  <span style="color: #000000; font-weight: bold;">var</span> cm:ColorMatrixFilter = <span style="color: #000000; font-weight: bold;">new</span> ColorMatrixFilter<span style="color: #66cc66;">&#40;</span>mat.<span style="color: #006600;">matrix</span><span style="color: #66cc66;">&#41;</span>;
  <span style="color: #000000; font-weight: bold;">var</span> startMatrix:<span style="color: #0066CC;">Array</span>=
                       <span style="color: #66cc66;">&#40;</span>mc.<span style="color: #006600;">filters</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">matrix</span>==<span style="color: #0066CC;">undefined</span><span style="color: #66cc66;">&#41;</span> ? ColorMatrix.<span style="color: #006600;">IDENTITY</span> : mc.<span style="color: #006600;">filters</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">matrix</span>;
  <span style="color: #000000; font-weight: bold;">var</span> targetMatrix:<span style="color: #0066CC;">Array</span>=mat.<span style="color: #006600;">matrix</span>;
&nbsp;
<span style="color: #b1b100;">for</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> i <span style="color: #b1b100;">in</span> targetMatrix<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
  beginning.<span style="color: #0066CC;">push</span><span style="color: #66cc66;">&#40;</span>startMatrix<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>;
  change.<span style="color: #0066CC;">push</span><span style="color: #66cc66;">&#40;</span>targetMatrix<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>-startMatrix<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
       <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">type</span>=<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">typeof</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">arguments</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">5</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>==<span style="color: #ff0000;">&quot;object&quot;</span><span style="color: #66cc66;">&#41;</span>? <span style="color: #000000; font-weight: bold;">true</span> : <span style="color: #000000; font-weight: bold;">false</span>;
       <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">type</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">var</span> referObj=<span style="color: #0066CC;">arguments</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">5</span><span style="color: #66cc66;">&#93;</span>;
       <span style="color: #66cc66;">&#125;</span><span style="color: #b1b100;">else</span><span style="color: #66cc66;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">var</span> p:<span style="color: #0066CC;">Number</span>=<span style="color: #0066CC;">arguments</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">5</span><span style="color: #66cc66;">&#93;</span>;
        <span style="color: #000000; font-weight: bold;">var</span> referObj=<span style="color: #0066CC;">arguments</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">6</span><span style="color: #66cc66;">&#93;</span>;
       <span style="color: #66cc66;">&#125;</span>
  mc.<span style="color: #0066CC;">onEnterFrame</span>=<span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">var</span> objIdx:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">0</span>;
  <span style="color: #b1b100;">for</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> i <span style="color: #b1b100;">in</span> targetMatrix<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
   targetMatrix<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>=func<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">time</span>,beginning<span style="color: #66cc66;">&#91;</span>objIdx<span style="color: #66cc66;">&#93;</span>,change<span style="color: #66cc66;">&#91;</span>objIdx<span style="color: #66cc66;">&#93;</span>,durationFrame,p<span style="color: #66cc66;">&#41;</span>;
   objIdx++;
   <span style="color: #66cc66;">&#125;</span>
   targetColMatrixFilter.<span style="color: #006600;">matrix</span>=targetMatrix;
   mc.<span style="color: #006600;">filters</span>=<span style="color: #66cc66;">&#91;</span>targetColMatrixFilter<span style="color: #66cc66;">&#93;</span>;
   <span style="color: #0066CC;">time</span>++;
  <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span>time<span style="color: #66cc66;">&amp;</span>gt;durationFrame<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
   <span style="color: #0066CC;">delete</span> <span style="color: #0066CC;">this</span>.<span style="color: #0066CC;">onEnterFrame</span>;
   <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span>referObj<span style="color: #66cc66;">!</span>=<span style="color: #0066CC;">undefined</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
    referObj.<span style="color: #006600;">func</span>.<span style="color: #0066CC;">apply</span><span style="color: #66cc66;">&#40;</span>referObj.<span style="color: #006600;">obj</span>,referObj.<span style="color: #006600;">param</span><span style="color: #66cc66;">&#41;</span>;
   <span style="color: #66cc66;">&#125;</span>
&nbsp;
  <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #0066CC;">import</span>  com.<span style="color: #006600;">dstrict</span>.<span style="color: #006600;">UB</span>.<span style="color: #006600;">util</span>.<span style="color: #006600;">transitions</span>.<span style="color: #006600;">tween</span>.<span style="color: #006600;">FilterTween</span>;
<span style="color: #0066CC;">import</span>  mx.<span style="color: #006600;">transitions</span>.<span style="color: #006600;">easing</span>.<span style="color: #66cc66;">*</span>;
<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">dstrict</span>.<span style="color: #006600;">UB</span>.<span style="color: #006600;">util</span>.<span style="color: #006600;">filters</span>.<span style="color: #006600;">ColorMatrix</span>;
<span style="color: #808080; font-style: italic;">//SATURATION (from 0  to 100)</span>
image.<span style="color: #0066CC;">onRollOver</span>=<span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
 ColorMatrixTween.<span style="color: #006600;">tween</span><span style="color: #66cc66;">&#40;</span>image,<span style="color: #cc66cc;">0</span>,ColorMatrixTween.<span style="color: #006600;">SATURATION</span>,Regular.<span style="color: #006600;">easeOut</span>,<span style="color: #cc66cc;">10</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
image.<span style="color: #0066CC;">onRollOut</span>=<span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
 ColorMatrixTween.<span style="color: #006600;">tween</span><span style="color: #66cc66;">&#40;</span>image,<span style="color: #cc66cc;">100</span>,ColorMatrixTween.<span style="color: #006600;">SATURATION</span>,Regular.<span style="color: #006600;">easeOut</span>,<span style="color: #cc66cc;">10</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #808080; font-style: italic;">//CONTRAST (from 0  to 100)</span>
image2.<span style="color: #0066CC;">onRollOver</span>=<span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
 ColorMatrixTween.<span style="color: #006600;">tween</span><span style="color: #66cc66;">&#40;</span>image2,<span style="color: #cc66cc;">100</span>,ColorMatrixTween.<span style="color: #006600;">CONTRAST</span>,Regular.<span style="color: #006600;">easeOut</span>,<span style="color: #cc66cc;">10</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
image2.<span style="color: #0066CC;">onRollOut</span>=<span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
 ColorMatrixTween.<span style="color: #006600;">tween</span><span style="color: #66cc66;">&#40;</span>image2,<span style="color: #cc66cc;">0</span>,ColorMatrixTween.<span style="color: #006600;">CONTRAST</span>,Regular.<span style="color: #006600;">easeOut</span>,<span style="color: #cc66cc;">10</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #808080; font-style: italic;">//BRIGHTNESS (from -100  to 100)</span>
image3.<span style="color: #0066CC;">onRollOver</span>=<span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
ColorMatrixTween.<span style="color: #006600;">tween</span><span style="color: #66cc66;">&#40;</span>image3,<span style="color: #cc66cc;">100</span>,ColorMatrixTween.<span style="color: #006600;">BRIGHTNESS</span>,Regular.<span style="color: #006600;">easeOut</span>,<span style="color: #cc66cc;">10</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
image3.<span style="color: #0066CC;">onRollOut</span>=<span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
ColorMatrixTween.<span style="color: #006600;">tween</span><span style="color: #66cc66;">&#40;</span>image3,<span style="color: #cc66cc;">0</span>,ColorMatrixTween.<span style="color: #006600;">BRIGHTNESS</span>,Regular.<span style="color: #006600;">easeOut</span>,<span style="color: #cc66cc;">10</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://kimkijeung.com/2007/03/19/colormatrixfilter-tweenengine/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
