Archive for the 'Flash-Tip' Category

Page 2 of 7

ConvolutionFilter effect

Published on 2007/08/28 in Flash-Tip. 0 Comments Tags: .

Convolution  는 회선기법으로써 입력픽셀과 그 주위의 이웃한 픽셀들을 가중평균(weighted average) 하여 처리하는 기법으로 플래시에서도 ConvolutionFilter 를 지원한다.
다른 필터에 비해 사용빈도에 있어서 떨어지지만 잘만 사용한다면 플래시에서도 포토샵에서 지원하는 여러 효과들의 필터 효과를 낼 수 있을것이다..

인접픽셀들을 이용하기 때문에 나타낼 수 있는 효과는 대부분 이미지의 경계부분(edge)  변형으로 생기는 embossing,blur,sharpen,accented-edge 같은 효과들이다.

convolution 필터는 9개의 파라미터가 존재하는데 일반적으로 아래와 같이 4개를 사용하여 제어를 한다.

ConvolutionFilter(matrixX:Number=0, matrixY:Number=0,matrix:Array=null,divisor:Number=1.0)

여기서 가장 중요한 부분이 matrix 라는 배열 파라미터인데 일반적으로 3×3 행렬을 사용한다.

0 0 0
 0 1 0 =>  [0,0,0,0,1,0,0,0,0]    형렬표기방법은 좌측과 같이 열단위로 끊어서 작성한다.
0 0 0
<default>

matrix 는 중앙에 있는 값(1)을 기준으로  대칭형태로 사용한다. 이는 인접픽셀과의 가중치 계산을 위한 비율과도 무관하지 않다. 또한 모든 matirx 의 요소 값의 합이 1을 기준으로 크게되면 전체적인
이미지의 밝기(brightness)가 증가하게 되고, 반대로 1보다 작게 되면 밝기가 감소하게 된다.

위에서 볼수 있듯이 matrix 값의 총합이 1이 아닐경우 원본값에서 이미지 밝기에서 차이가 난다.
이런 뜻하지 않은 이미지 밝기의 변화로 인해 의도했던 이미지 효과가 묻혀버리게 되는 일이 발생하는데 이런걸 방지하기 위해 divisor 를 사용하여 값을 조정해준다.
divisor 은 convolution  필터의 4번째 파라미터로서 결과값에 대한 강도를 낮춰주게 된다.
matrix 전체의 총합을 divisor 로 나눈값이 1을 기준으로 설정될수 있는 밝기로 생각하면 된다.

ConvolutionFilter(3,3,[0, 0, 0, 0, 1, 0, 0, 0, 0])
ConvolutionFilter(3,3,[0, 0, 0, 0, 3, 0, 0, 0, 0],3)

따라서 위 두개의 필터값은 같은 효과를 나타낸다.

<embossing>
embossing 의 matrix 는 양수의 중앙값을 기준으로 좌우의 값의 부호가 반대인 좌우대칭형태
a   d  -c          -2  -1  0
b   e -b   ==>  -1   1   1   ==>    new ConvolutionFilter(3,3,[-2, -1, 0, -1, 1, 1, 0, 1, 2])
c -d  -a            0   1   2

<sharpening>
sharpening 의 matrix 는 양수의 중앙값을 기준으로 상하대칭형태
a   b   c          0    -1    0
d   e d   ==>  -1   5   -1   ==>    new ConvolutionFilter(3,3,[0, -1, 0, -1, 5, -1, 0, -1, 0])
c   b   a          0    -1    0

<accented-edge>
accented-edge 의 matrix 는 sharpening 과 비슷한 형태로 음수의 중앙값을 기준으로 상하대칭형태
a   b   c          0    1    0
d   e d   ==>  1   -3   1   ==>    new ConvolutionFilter(3,3,[0, 1, 0, 1, -3, 1, 0, 1, 0])
c   b   a          0    1    0

위 모든 효과는 중앙값(e) 을 조정하여 효과의 강도를 조정할 수 있다.

download sample

Checking user bandwidth

Published on 2007/08/01 in Flash-AS2.0 and Flash-Tip. 0 Comments Tags: , .

우리나라의 웹환경에서는 초고속 인터넷과 같은 인프라의 발전으로 대역폭(bandwidth)을 고려해야할 만큼 네트워크 속도가 절대적으로 중요하지는 않다.
워낙 전송 속도가 빨라서 왠만한 웹사이트는 로딩시간없이 실시간으로  보여진다. 하지만 이는 특수한 우리나라의 경우에서만 해당하는 사항일뿐 아직까지 대부분의 다른나라에서의 전송속도는 생각하는 것 만큼 빠르지 않다. 좀더 범용적인 사이트의 개발을 위해서는 반드시 고려해야 할 사항이다.

특히 영상위주의 컨텐츠가 포함된 사이트의 경우 사용자의 대역폭을 고려하는 것이 좀더 사용자에게 좋은 컨텐츠를 제공하는 방법이 될 수 있다. 대부분 영상을 보여주는 방법으로 점진적 다운로드 방식(progressive download)을 사용한다. 실시간으로 다운로드 한만큼 플레이하는방식으로 이는 사용자 환경의 대역폭이 서비스의 질을 크게 좌우하게 된다.

영상을 보여주는 데 있어 점진적 다운로드 방식은 영상의 전체적인 용량보다는 영상의 압축률에 더 큰 영향을 받는다. 다시말해 데이타를 로드하면서 플레이하는 방식이기 때문에 비디오의 압축률을 높여 단위시간당 받을 수 있는 용량을 보다 크게 하여 좀더 원할하게 플레이 할 수 있다.

따라서 미리 사용자의 대역폭을 알아내어 거기에 알맞는 압축률의 비디오를 제공할 수 있는 것이다.
플래시에서 일반적으로 대역폭을 측정하는 방법으로는 일정크기의 샘플파일을 다운로드하여 걸린시간을 측정하여 구할 수 있다. 하지만 이 대역폭은 절대적인 속도를 의미하는 것은 아니다.
네트워크 사용량, 네트웍크 지연과 같은 여러가지 요인에 의해 언제든지 속도가 변경될 수 있다. 항상 측정된 속도로 데이타를 받을 수 있다는 의미가 아니다. 현재 시간에서 대략적인 사용자의 네트워크 속도를 가늠해 볼 수 있는데 의미가 있다. 불안정한 네트워크 일수록 측정 대역폭의 편차가 크게 발생한다.

대역폭 측정의 정확성을 높이기 위해서는 테스트하기 위해 사용하는 샘플의 용량을 크게 하거나,측정하는 테스트의 횟수를 늘려야한다. 하지만 이는 전송속도 측정을 위해 불필요하게 자원을 소모하게 되기 때문에 어느정도 적정선을 유지해야한다.
여기서 제공하는 방법은 샘플파일의 크기를 50~100 KB 로 제한하고 측정횟수를 2회로 한정하였다.
위 조건으로 측정한다고 해도 사용자의 네트워크 속도가 50KB 미만일 경우 100~200KB 를 테스트를위해 최소 2~4초정도의 시간이 걸리게 된다.

<bandwidthCheck class>

import com.dstrict.UB.events.Dispatcher;
import com.dstrict.UB.events.Event;
 
class com.dstrict.UB.util.system.BandwidthCheck extends Dispatcher {
 
private var _bandwidthSet:Array;
private var _bandwidth:Number;
 
private var _startTime:Number;
private var _checkCount:Number;
 
private var _loader:MovieClipLoader;
private var _container:MovieClip;
 
public function get bandwidth():Number{
return _bandwidth;
}
 
public function BandwidthCheck() {
_checkCount=0;
_bandwidth=0;
_bandwidthSet=new Array();
}
 
public function check():Void{
_container= _root.createEmptyMovieClip("container", _root.getNextHighestDepth());
var nocache:Number=Math.random()*1000000;
_loader=new MovieClipLoader();
_loader.addListener(this);
_loader.loadClip("bandwidthDummy.png?nocache="+nocache,_container);
}
 
private function calculateBandwidth():Void{
for(var i in _bandwidthSet){
_bandwidth+=_bandwidthSet[i];
}
_bandwidth=_bandwidth/_checkCount;
 
//dispatch a complete event
startEvent(new Event(Event.COMPLETE,this));
}
 
private function onLoadStart(targetMc:MovieClip):Void{
_startTime=getTimer();
}
 
private function onLoadComplete(targetMc:MovieClip):Void{
_loader.unloadClip(_container);
var elapsedTime:Number=(getTimer()-_startTime)/1000;
_checkCount++;
 
var progress:Object = _loader.getProgress(targetMc);
var kilobytes:Number=progress.bytesTotal/1024;
var kBps:Number=kilobytes/elapsedTime;
_bandwidthSet.push(kBps);
 
if(_checkCount==1){
check();
}else{
calculateBandwidth();
}
}
}

<sample code>

var bandwidthCheck:BandwidthCheck=new BandwidthCheck();
bandwidthCheck.addEventListener(Event.COMPLETE,onBandwidthCheck);
bandwidthCheck.check();
 
function onBandwidthCheck(evt:Event){
trace("bandwidth-----------------&gt;"+evt.target.bandwidth);
}

대역폭(bandwidth) 의 단위로는 KBps(kilobytes per second) 이다. 브라우저 캐쉬로 부터 다운받는것을 방지하기 위해 첨부한 문자열로 인해 반드시 웹상에서 다운받아야 로드할수 있다.

download sample

Flash Player Detection

Published on 2007/07/10 in Flash-Tip. 4 Comments Tags: , , .

flash player 9 가 발표된지도 1년이 훌쩍 지난 시점이지만 정식으로 flash CS 가 발표된지 얼마 지나지 않았기 때문에 아직까지는 개발자들의 as3.0 사용빈도도 적을뿐더러 사용자들의 pc 에 설치되어있는 flash player 버전이 8.0 이하 버전들도 상당수 존재한다.
flash player 보급률 통계(adobe flash player penetration)에 따르면 현재(2007.3) 80% 정도로 배포되어있다. 물론 상당한 배포율이지만 소수의 사용자들을 고려한다면 원하는 컨텐츠를 사용자에게 보여주지 못하는 정도가 무시못할 수치이다.

이렇듯 새로운 버전의 flash player가 발표될때 마다 개발자들은 사용자들이 가지고 있는 flash player 버전을 고려하여 개발을 하고 그것에 맞는 flash player 가 설치 되어있는지의 여부를 체크해야만 한다. 그렇지 않다면 하위버전의 flash player 를 가졌거나 아예 없는 사용자가 사이트를 방문했을 시 영문도 모른 채 빈 화면만 보게 될 것이다.

이전에도 이런 문제를 해결하기 위해 많은 노력이 있었지만 아직 100% 완벽하게 처리할 수 없는 점이 존재한다. 개개인 사용자들의 브라우저 보안설정이나 운영체제의 상이함으로 인해 똑같은 결과를 얻지 못하는 경우가 종종 발생한다.

이글에서는 기존의 방법들중에서 가장 사용하기 편하면서 널리 이용되고 있는 SWFObject 라는 flash embed script 를 이용하여 player 버전체크 뿐만아니라 직접 install 하는 과정을 소개한다.

우선 flash player detection 과정은 크게 3단계로 구분된다.

첫째, 브라우저에서 javascript 사용가능 체크.
둘째, flash player 설치여부.
셋째, flash player 버전 체크.
몇몇 일부 사용자들은 브라우저의 javascript 기능을 꺼놓은 경우가 있다.  이럴경우 javascript 를 사용하여 flash detection 을 하는 과정이나 html에 swf 파일을 임베드 하는 과정이 전혀 작동하지 않게 된다. 따라서 가장 먼저 사용자 브라우저의 javascript 기능의 활성화 여부를 체크해야만 한다.
이 단계에서는 간단히 <noscript></noscript> 이용하여  대체 메시지를 출력하여 처리하면 된다.

player 설치 체크와 버전 체크는  SWFObject 에서 처리해 준다.
또한 window 뿐만 아니라 mac 의 주요 웹 브라우저의 flash plugin 감지도 지원해준다.
실제 mac 용 브라우저인 safari, opera 등에서도 문제없이 작동되었다.
자세한 SWFObject  사용법은 이전 포스트 나 아래 관련 링크를 참고하면 된다.

<html code>

<script src="swfobject.js" type="text/javascript"><!--mce:0--></script>
<div id="flashcontent">
  <script type="text/javascript"><!--mce:1--></script></div>
<script type="text/javascript"><!--mce:2--></script>
 <noscript>
   This content requires  a browser with JavaScript enabled.
 </noscript>

위 코드는 flash embed 코드이다. SWFObject 에서는 요구하는 버전이 아니거나 존재하는 않을경우  flash 페이지를 대신할 수 있는 div tag 를 제공하는데 이곳에 대체 텍스트나 이미지를 넣어 사용자에게 상황에 맞는 적절한 정보를 제공할 수 있다.
그리고 하단부분에 noscript 태그가 존재하는데 이는 javascript 를 쓸수 없을 경우 실행되는 부분이다.
지금까지는 단순히 적절한 flash player 가 설치되어있는지의 여부를 판단하고 그에 대한 정보를 제공하는 것이 전부였다. 위 코드에 걸리는 사용자는 아마 제공하는 컨텐츠보다 player 버전이 낮을 경우가  대부분일 것이다. 즉, 사이트를 볼수 없는 사용자들 중에는 자바스크립트를 비활성으로 하거나 player 가 아예 설치되어있지 않을 경우보다 설치되어있는 player 의 하위버전으로 인한 문제가 대부분이다. 따라서 좀더 친숙하게 사용자에게 접근하려면 버전체크로 끝나는 것이 아니라 설치까지도 제공해 줄 필요가 있다.

이를 위해 Adobe 에서는  Express Install 을 제공해준다. 이는 플래시 파일내에서 직접 flash player
업그레이드를 진행해 주는 것이다.

SWFObject 에서도 Express Install 을 사용할 수 있게 메소드를 제공해 준다.
so.useExpressInstall(‘expressinstall.swf’);

위와 같이 사용하면 expressinstall.swf 가 업그레이드를 진행하는 부분으로 반드시 player 버전이
6.0.65 이상으로 작업되어야 한다. 만약 flash player 버전이 9.0 보다 낮을경우 아래와 같은 화면이 보일것이다.

첨부 파일을 확인하면 원하는 형태로 디자인을 변경하여 업그레이드를 진행할 수 있다.
단, express install 을 사용하려면  Adobe 에서 제공하는 업그레이드 과정에서 생성되는 메시지
창의 크기때문에 최소 214*137 px 로 제작해야한다.


download sample

<Installer and UnInstaller>
Window version
Mac version

<Related articles>
Best Practices for Flash Player Detection
Using Express Install with SWFObject

Converting to a Cartesian coordinates

Published on 2007/03/06 in Flash-AS2.0, Flash-Tip and Math & Physics. 0 Comments

동적으로 여러개의 MovieClip 을 원형으로 배열할때 직교좌표계 사용하는 것보다 극좌표계를 사용하면 훨씬 다루기가 쉽다. 또한 x,y 와 같은 점을 다룰경우 Point 클래스를 이용하면 각 점간의 수학적인 연산에 있어 기본적으로 Point  클래스의 메서드를 이용하여 쉽게 처리할 수 있다.

극좌표를 직교좌표로 바꿀때도 기본으로 제공해주는 메서드를 사용하면 된다.

polar (Point.polar method)
public static polar(len: Number, angle: Number) : Point

Converts a pair of polar coordinates to a Cartesian point coordinate.

Parameters
len: Number – The length coordinate of the polar pair.
angle: Number – The angle, in radians, of the polar pair.

Returns
Point – The Cartesian point.

1167762589

import flash.geom.Point;
var len:Number = 125;
var angleInRadians:Number ;
var cartesianPoint:Point
var unitAngle:Number=15;
for(var i=1 ; i&lt;=24 ; i++){
var mc:MovieClip=this.attachMovie("M_thumb"+i,"M_thumb"+i,i);
angleInRadians = Math.PI*unitAngle/180*(i-1);
cartesianPoint = Point.polar(len, angleInRadians); // 극 좌표를 직교좌표로 전환
 
var offsetX:Number=Math.round(cartesianPoint.x);
var offsetY:Number=Math.round(cartesianPoint.y);
mc._x=Stage.width/2+offsetX;
mc._y=Stage.height/2+offsetY;
}

굳이 point 클래스를 사용하지 않고서도 극좌표계를 직교좌표계로 간단한 삼각함수를 사용하여 다음과 같이도 쉽게 바꿀수 있다.

x1=x0+(Math.cos(angle)*radius);
y1=y0+(Math.sin(angle)*radius);

하지만 Point 클래스를 사용하여 좌표를 구성한다면 코드의 일관성에 있어서나 간결성에 있어 상당한 도움이 될것이다.

Debugging Tool – X-ray

Published on 2007/02/25 in Flash-Tip. 0 Comments Tags: , .

2006 FlashFoward 에서 finalist 에 오른 플래시 실시간 디버깅 툴이다.
플래시의 가장 큰 단점중에 하나가 기타 프로그램언어에 비해 디버깅 기능이 빈약하다는 것이다.
물론 플래시내에서 디버깅 기능을 지원하지만 직관적이지 못한 구조로 대부분 오류코드를 직접 작성해 trace 로 찍어보는 방법이 가장 빠를것이다.
기존에 써오던 Alcon 이라는 디버깅 툴보다도 훨씬 강력한 기능을 가지고 있는 것 같다.

이 툴은 틀별한 과정없이 컴포넌트를 설치하고 타임라인 상에 드래그하여 export 하면 Interface window 를 통해 모든 오브젝트를 runtime 으로 확인하고 수정해볼 수도 있다.

이런 디버깅 툴이 가장 필요할때는 아마 웹상에 올려져있는 플래시 파일을 디버깅할때 일것이다.
이런툴을 사용하지 않고 원하는 데이타가 제대로 들어오는지, 웹상에 올려져 있는 플래시 파일을 디버깅 하려면 자바스크립트로 alert 창을 띄우는 방법밖에 없을것이다.

특히 필터효과 같은 경우 사용자들이 원하는 효과를 얻으려면 많은 테스트를 해보고 그 값 적용하는데 이 툴에서는 필터효과를 실시간으로 적용할수 있고 그 코드값을 복사해서 그대로 사용할수도 있다.

-Features

  • View physical parent/child relationships of all your objects/movieclips in the treeview
  • View all properties/methods associated with an object/movieclip
  • Drill down through any objects/movieclips/arrays in the Datagrid
  • Execute actionscript at runtime. Call any of your methods from the interface at runtime!
  • Control at runtime:
    • MovieClips – Edit all properties, including: Rotate, scale, move, opacity, properties, play, gotoAndPlay/Stop/labelName
    • TextFields – same as movieclips, as well as edit text, HTML text
    • Buttons – same as movieclips
    • video objects (NetStream) – play, pause, stop, view properties in realtime as video plays
    • Sound objects – play, stop, set loops, view ID3 information, all sound properties.
  • Use the _global.tt() to send any object/property to the output panel. Xray.trace() will recurse any object/array and display in the output panel a tabbed relational view of the object/array.
  • Use the search tool to search the output returned.
  • History info – use property settings saved in the history in your FLA or to reset your application to a specific state
  • Filters Panel – use Flash8 filters at run time and copy/paste the code for use in your FLA

    관련사이트
    http://osflash.org/xray