Archive for the 'Flash-Tip' Category

How to reduce the complie time with Flash IDE

Published on 2010/02/15 in Flash-Tip. 0 Comments Tags: , .

Actionscript 의 덩치가 커지면서 Flash IDE 를 기본 액션에디터로 사용하는 것보다 인텔리젼트 기능이 탑재된 외부 에디터를 이용해 프로그래밍하는 것이 작업의 효율성 측면에서 상당한 개선 얻어올 수 있다.  이 포스팅 내용은 compile 도구로 반드시 Flash IDE 를 사용한다는 것을 전제로 한 내용이다.

작업 환경 조합으로는  Flash IDE + Eclipse(FDT) , Flash IDE  + Flashdevelop 과 같은 경우의 조합으로 많이 사용하는데 이런 외부 에디터를 사용할 경우 자동으로 syntax 를 사전에 체크해줘 compile 타임에 발생할 수 있는 코드의 문제점을 알아차릴 수 있다. 하지만 compile 을 위해 Flash IDE 와 외부에디터의 창을 이러저리 왔다갔다 하거나 compile 을 기다리는 시간 등,  compile 전체에 소모되는 시간이 생각보다 길다라고 느껴질 때가 있을것이다. 특히 수많은 클래스의 사용으로 더욱 그 시간이 길어질 때 더할 것이다. 그래서 이럴경우 compile 시간을 대폭(?) 줄일 수 있는 간단한 tip 하나를 소개할까 한다.

Flash IDE 에서 File -publish Settings… – Flash Tab – Settings…  를 실행하면 위와 같은 화면을 볼 수 있을것이다. 위 radio button 중 Warnings Mode 가 기본적으로는 체크되어있는데 이를 해제하자. Warnings Mode 는 As2.0 코드에서 As3.0 코드로 업데이트할때 발생할 수도 있는 Migration issue 를 리포팅해주는 기능이다.

따라서 체크를 해제하더라도 특별히 문제될건 없다. 이 기능을 해제하게 되면 컴파일 시간이 몰라볼 정도로 빨라지게 된다. 물론 영상이나 폰트를 임베드해서 컴파일이 오래걸리는 경우는 해당사항이 없다.  많은  클래스 파일을 사용하는 컨텐츠일 수록 효과가 크다.

quad core  , ram 4 GB , AS file 60개 정도의 환경으로 테스트 해본 결과 Warnings  Mode 를 체크를 했을 경우 16 sec 정도 걸리던 시간이 해제했을 경우에는 4 sec 정도로 4배이상 시간이 빨라졌다. 특별히 compile 안정성에 문제가 되는것이 아닌것 같으니 Flash IDE 를 사용하면서 class 를 많이 구성하여 사용하는 사람이라면 compile 에 걸리는 시간을 많이 줄일 수 있을 것이다.

SEO flash programming

Published on 2008/02/11 in Flash-Tip and Programming. 4 Comments Tags: , , .

Flash 는 별개의 runtime 프로그램으로 Google 과 같은 검색엔진을 통한 인덱싱 문제에 상당한 어려움을 가지고 있다. 이것은 일반적인 flash 사이트일 경우 검색엔진을 통한 노출이 사실상 불가능하다는 의미이다. 이는 flash 파일의 내부를 분석하여 정보를 추출하는 알고리즘이 개발되지 않는 한 이러한 이슈는 계속 될 것으로 보인다.

위 문제의 대한 완벽한 해결방안은 현재로서는 없다. 하지만 html 페이지와 같은 텍스트 기반의 인덱싱 수준을 기대하기는 어렵지만 어느 정도 대체할 만한 방법론적 접근이 이루어지고 있다.
그 중에 가장 주목할 만한 방법은 바로 flash 페이지와 함께 메인 html 컨텐츠(primary HTML)를 사용하는 방법이다. 이것은 flash를 알지 못하는 검색엔진이나 올바른 환경을 가지지 못한 사용자의 접근성에 있어서도 효율적인 방법이다.

이를 위해서는  Flash embed source 로 많이 사용하고 있는 SWFObject 와 SWFAddress가 사용될 수 있다. SWFObject 는 Javascript 를 사용하여 적절한 flash player를 확인하고  DIV tag 의 내용을 flash content로 교체하여 임베드 할 수 있게 도와주는 오픈소스 코드로써 간단한 방법으로 flash 를 임베드할 수 있도록 많은 기능들을 제공하고 있어 플래시 개발자들에게 널리 알려져있다.
그리고 SWFAddress는 flash 사이트 상에서 deep linking 을 제공하는 스크립트로 각 링크마다 고유의 페이지 url을 가질수 있으며 따라서, 웹브라우저에서 Back,Forward 기능을 사용하여 플래시사이트를 제작할 수 있다.

아래코드는 프레임기반의 간단한 네비게이션 메뉴를 SEO를 고려하여 제작한 샘플이다.

<HTML sample code>

<script type=”text/javascript” src=”./js/swfobject.js”></script>
<script type=”text/javascript” src=”./js/swfaddress.js”></script>
</head>
<body>

<!–primary content, for non Flash visitors–>
<div id=”flashcontent”>
<p><a href=”index.html#/menuBtn1″>menu1 content</a></p>
<p><a href=”index.html#/menuBtn2″>menu2 content</a></p>
<p><a href=”index.html#/menuBtn3″>menu3 content</a></p>
<p><a href=”index.html#/menuBtn4″>menu4 content</a></p>
<p><a href=”index.html#/menuBtn5″>menu5 content</a></p>
</div>

<script type=”text/javascript”>
var so= new SWFObject(“seo_flash.swf”,”flash”, “300″, “50″, “9″, “#ffffff”);
so.write(“flashcontent”);
</script>
<noscript>
This content requires  a browser with JavaScript enabled.
</noscript>

위코드에서 div 태그부분을 보자.
swfobject 에서 div 태그는 해당 flash player 가 존재하지 않거나  ActiveX 가 활성화되지 않을경우 화면에 보여지는 내용이다. 알맞는 환경이 갖춰졌을 경우 div 태그안의 내용은 flash 파일로 대체되는 것이다. 플래시 컨텐츠가 보인다면 이 정보는 사용자에게 보여지지 않는다. 하지만 검색엔진에는 이 정보가 노출되는 것이다.
div 태그 안에는 flash 네비게이션 각 메뉴의 링크와 텍스트 정보가 포함되어있다. 그리고 앵커를 이용한 swfaddress 코드의 사용으로 flash 내부의 각각의 메뉴에 독립적인 url 을 생성해 주었다.
따라서, div 태그를 통한 외부링크도 실제적으로 사용가능하다. 다시말해, 검색엔진의 인뎅싱 결과로 생성된 링크가 실제 swf 파일 각각의 메뉴에 일대일대응으로 링크가 가능하다는 의미이다.

[LEMBEDC|http://kimkijeung.com/upload/seo/sample.swf|300|50|N]

<flash sample code>

function handleChange(event:SWFAddressEvent) :void{
var path:String = event.path;
gotoAndStop(‘$’ + path);
SWFAddress.setTitle(path);
}

function onClick(event:MouseEvent):void{
var target:MovieClip=event.currentTarget as MovieClip;
SWFAddress.setValue(“/”+target.name+”/”);
}

for(var i:int=1 ; i<=5 ; i++){
var buttonClip:MovieClip=this.getChildByName(“menuBtn”+i) as MovieClip;
buttonClip.buttonMode=true;
buttonClip.addEventListener(MouseEvent.CLICK,onClick);
}

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange);

위와 같은 방법으로 컨텐츠를 구성한다면 플래시 안의 컨텐츠 내용을 검색엔진에 노출할 수 있을 것이다. 하지만 위 예제는 플래시로 구현할 수 있는 가장 간단한 형태로 실제 사이트 제작시 위와같이 단일한 링크 구성으로 이루어지는 경우는 거의 없을 것이다. 대부분 사용자의 메뉴클릭사이 마다 무수히 많은 인터랙션이 존재하고 시간의 흐름에 의한 에니메이션이 존재한다.
따라서,독립적인 메뉴의 링크를 통해 접속하는 경우 기존의 해당사이트와 단절된 느낌을 지울수는 없을 것이다. 이는 플래시 개발자가 좀더 고민해 보아야 할 문제이다.

download sample files…

reference from article below
-How to SEO Flash
(http://www.jehochman.com/articles/seo-friendly-flash.shtml)
-How Google crawls my site
(http://www.google.com/support/webmasters/bin/topic.py?topic=8843&hl=en)
-A modern approach to Flash SEO
(http://blog.deconcept.com/2006/03/13/modern-approach-flash-seo/)
-SWFObject
(http://blog.deconcept.com/category/swfobject/)
-SWFAddress
(http://www.asual.com/swfaddress/)

Search Engine Optimization

Published on 2008/02/08 in Flash-Tip and Programming. 2 Comments Tags: , , .

SEO . 일명 검색엔진최적화 로서 구축하고 있는 웹사이트를 각종검색엔진에 잘 검색되도록 환경을 마련해 주는 것이다. 어찌보면 사용자를 위한 것이 아니라 로봇(spider. 검색엔진)들의 입맛에 맞게 데이타를 정리해주는 것으로 볼 수 있다. 하지만 검색엔진에 노출이 잘 되도록 한다는 의미는 사용자에게 보다 많고 정확한 정보를 전달하기 위한 과정으로 생각할 수 있다. 따라서 궁극적으로 SEO 는 사용자에게 보다 나은 검색 환경을 제공한다고 그 의미를 확장할 수도 있을 것이다.

물론 SEO 의 본래 목적은 마케팅 목적이다. 우리나라 포털들의 검색엔진은 대부분이 영리를 목적으로 서비스를 하기 때문에 아무리 사이트 개발자들이 SEO 를 충실히 따른다 해도 검색엔진 상위에 랭크될 수 없다. 여기서 다루는 것은 비영리를 목적으로 하는 검색엔진 , 다시말해 특별한 광고료를 지불하지 않아도 검색엔진에 노출되는 google 을 대표적인 모델로 삼고 글을 쓸 것이다.
물론 구글도 sponsored link 라고 하여 유료광고가 최상단에 등장하긴하지만 그것은 논외로 하겠다.
전세계 검색엔진의 거의 60%를 점유하고 있는 구글에서만 제대로 검색된다면 다른 검색엔진에서도 같은 결과를 얻을 수 있을 것이다.

How Search Engines work
검색엔진은 스파이더(spider)라고 하는 로봇들로 하여금 전세계 웹페이지를 돌아다니게 하면서 페이지의 컨텐츠를 읽고 분석하여 데이터베이스에 저장한다. 이를 인덱싱(indexing) 라고 하는데, 스파이더가 페이지의 데이타를 제대로 읽지 못하면 그 페이지는 검색엔진 색인에서 제외되는 것이다.

스파이더가 페이지의 데이타를 분석하는 기준은 크게 다음과 같이 정리할 수 있다.
– 해당페이지가 무엇에 관한 내용인가? (키워드의 반복횟수)
- 페이지에서 키워드 위치 (페이지 상단에 있는것이 더 좋은 랭킹포인트를 얻을 수 있음)
- 키워드가 어떻게 표현되어있는가? (대소문자,볼드체와 같은 스타일)
- 해당페이지와 연결된 링크는 어떤것이며 그 링크들의 중요도는 어떠한가?

위의 사항들이 가장 기본적인 것이지만 검색엔진이 제대로 크롤링을 할 수 없는 수많은 문제점들이 웹상에는 존재한다.
그 문제점들의 대표적인 것이 안타깝게도 flash 컨텐츠 이다. flash 컨텐츠에 대한 구글의 인덱싱 수준은 상당히 실망스런 수준이다. 전세계 수많은 웹사이트를이 flash로 제작되고 있고 그에 대한 데이타의 양도 상대적으로 어머어마하게 많아지고 있다. 하지만 검색엔진은 flash 컨텐츠 내부에 있는 텍스트나 링크정보를 가져오지 못한다. 할 수 있더라도 아주 미미한 수준이다. 아마도 가까운 미래에 해결 될 사항은 아닌것 같다. flash 컨텐츠의 SEO 대해서는 다음 포스트에서 더 자세히 살펴볼 것이다.

- 구글에서는 사이트 URL 파라미터로 session ID 를 사용하는것이 스파이더가 인덱싱을 할 수 없게 만드는 것이라고  경고하고 있다.

- 그리고 너무 복잡한 사이트 구조도 문제가 있다. 단방향 사이트 폴더 구조일 수록 스파이더에게  좀더 많은 페이지를 인덱싱할 수 있는 기회를 제공하게 되는데 되도록이면 폴더깊이는 3~5정도를 유지하는것이 가장 좋다. 구글스파이더는 6개의 폴더를 넘에가게 되면 잘못된 링크를 가져오게 되거나 아예 인덱싱을 안하는 경우가 있다.

- Redirect 는 되로록이면 피하는 것이 좋은데 불가피하게 사용할 경우 반드시 301 redirect 만을 사용해야한다. 302 redirect 를 사용할 경우 페널티를 받게 되어 랭킹포인트가 떨어지게 된다.

이외에도 robot.txt 파일의 설정으로 스파이더를 아예차단하는 경우, 자바스크립트나 복잡한 테이블그리고 그래픽이미지나 이미지 맵의 경우 페이지 자체를 인덱싱하지 못하는 경우가 있다.
상당수의 html 페이지는 주요컨텐츠 정보가 나오기 전에 자바스크립트코드나 css코드들로 꽉채워져 있는 경우가 있다. 150~200 라인 안쪽으로 해당페이지의 메인 키워드정보가 나와야지만 검색엔진의 랭킹포인트를 얻을 수가 있다. 따라서 자바스크립트코드나 css코드는 되도록이면 외부파일로 만들어 연결하고 그래픽이미지는 반드시 alt 속성을 제공하여 검색엔진에게 정보를 제공해야 할 것이다.

정리하면, SEO 를 위한 컨텐츠 작성방법은
1. 반드시 title 태그와 meta태그를 작성한다. 이것이 검색엔진의 랭킹포인트를 얻는 가장 중요한 방법중의 하나이다.
2. 적절한 키워드를 작성한다. H1 태그, 링크텍스트틀 포함하여 작성한다. 해당페이지의 링크가 많으면  많을수록 좋다. 단 링크는 정확한 정보를 제공해야할 것이다. 허위링크나 불필요한 키워드의 반복으로 인해 페널티를 부여받을경우 인덱싱에서 제외될 것이다.
3. 대체페이지의 작성. 플래시사이트의 경우 대체페이지로서 primary HTML 을 제작한다.

개인적으로 SEO 측면을 간과해서는 안된다는 점을 인지하고 있다. 하지만 이것이 주가 되어 혹시나 SEO 면에서 문제라고 할 수 있는 flash 컨텐츠를 사용하지 말자고 하는것은  주객전도라고 말하고 싶다. 사용자에게 보다 풍부한 UX 를 느끼게하는  이점이 SEO에 묻혀버리기에는 그 경험이 너무 큰 가치가 있다고 생각한다. 물론 너무 과도한 flash 컨텐츠의 사용은 지양해야겠지만 말이다.

다음 포스트에서는 flash 컨텐츠에서의  SEO 측면에 대해  자세히 살펴볼 것이다. 텍스트기반의 페이지의 인덱싱 수준은 아니지만 flash 를 사용하면서도 충분히 SEO 를 고려할 수 있는 방법론적 접근을 제시할 수 있을 것이다.

reference from article below
-How Google crawls my site
(http://www.google.com/support/webmasters/bin/topic.py?topic=8843&hl=en)
-A modern approach to Flash SEO
(http://blog.deconcept.com/2006/03/13/modern-approach-flash-seo/)

FDT : Not enough memory

Published on 2007/12/03 in Flash-Tip and Programming. 5 Comments Tags: , , .

FDT를  3.0.2 build 1001  버전으로 업데이트를 하고 나서 이클립스에 메모리가 부족하다는 메시지가 생겨났다. 이전까지 별 무리없이 쓰고 있었는데 작업을 앞두고 갑자기 먹통이 되어버리니 참 답답할 노릇이였다. 아마도 여러가지 기능이 추가되면서 필요로 하는 메모리가 늘어난듯 싶다.
찾아보니 fdt 포럼에도 이같은 문제가 제기되었는데 단순히 아래 메시지가 나오는 것과 같이 설치폴더에 있는 eclipse.ini 환경설정 파일의 메모리 최대 사용량을 늘려주라는 이야기 뿐이였다.

1272737987

물론 메로리 설정을 변경하고 이상이 없다면 다행이지만 나의 경우에는 -Xmx512 로 설정할 경우 eclipse 런처가 실행조차 안되는 문제가 발생한다. 한참만에 이것이 Eclipse 3.3.1 버전의 런처가  Sun VM 을 인식못하는 버그가 있다는 사실을 알아냈다.

http://wiki.eclipse.org/FAQ_How_do_I_increase_the_permgen_size_available_to_Eclipse%3F

따라서 이러한 문제를 해결하려면  eclipse.ini 파일을 약간 수정해야한다.

<original eclipse.ini>
-showsplash
org.eclipse.platform
–launcher.XXMaxPermSize   ——-> remove
256m                        ——–>remove
-vmargs
-Xms40m
-Xmx256m                  ——> replace -Xmx256m to -Xmx512m

eclipse.ini 을 열면 위와 같은 코드를 볼 수 있을 것이다.
FDT3.0 을 위해 최대 사용할 메모리를 늘리려면  맨 아래줄의 -Xmx256m 부분의 숫자 부분을 512 이상으로 변경해주면 된다. (자신의 메모리 용량에 따라 512이상으로 적절하게 설정해주면된다.)

그리고 붉은색 코드부분을 모두 삭제해준다.

<revised eclipse.ini>
-showsplash
org.eclipse.platform
-vmargs
-Xms40m
-Xmx512m

위과 같이 수정해 주면 이클립스 메모리 문제를 해결할 수 있을 것이다.

why cannot we embed Cyrillic

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

다국어(multi-language) 작업시 폰트임베딩 문제는 적어도 누구나  한번 쯤은 겪여 보았을 것이다.
임베드하게되면 너무나도 용량이 커져버리게 되는 아시아국가 문자, 너무나 생소하여 원하는 문자들이 제대로 임베드되었는지 알 수 없는 유럽이나 남미쪽의 라틴계열의 문자들…이 모든것이 웹개발을 하는 개발자들이 유의해야만 하는 사항일 것이다.

용량문제에 있어서는 특별히 디바이스 폰트를 사용하지 않고 임베드를 사용할 경우 어느정도의 용량증가는 필히 감수해야 할 부분이라서 이부분은 제외하고 대신 정확한 폰트 임베드에 대해서만 글을 적어보려고 한다.

제목에서 언급한 키릴문자(cyrillic)는 동유럽쪽에서 많이 사용하는 문자로 러시아나 불가리아,우크라이나와 같은 나라에서 사용하는 문자이다. (e.g.  фваыафиывапывап)
일반적인 라틴문자 이외에 특수한(?)  문자의 대표라 할 수 있는  키릴문자의 임베드에 대해 살펴보겠다.

플래시에서 폰트를 임베드하는 방법은 대표적으로 2가지로 나눌 수 있다.
첫번째는 직접 스테이지에 Text tool 을 사용하여 Dynamic textfield 를 생성하여 임베드하는 방법과,
두번째는 라이브러리에 있는 font symbol(Library-New Font) 을 사용하는 경우이다.

‘나는 키릴문자가 제대로 임베드 되는데 왜 안된다고 그러지?’ 라고 반문하는 사람이 있을 것이다.
맞는 말이다. 하지만 임베드가 가능하다는 사람은 첫번째 방법으로 직접 임베드를 한 경우 일것이다.

만약 두번째 방법으로 폰트를 임베드하려고 하면 키릴문자는 임베드가 안되었다는 것을 알 수 있을 것이다.(각각의 방법으로 생성된 임베드파일 크기에서 차이가 있음)
이것은 font symbol 을 사용할 경우 폰트 임베딩 방식이 시스템의 코드페이지(codepage)에 따라 달라지게 때문에 발생하는 문제이다. 즉, 국가마다 사용하고 있는 OS의 언어설정에 따라 임베드되는 폰트범위에 차이가 있다는 말이다.
만약 키릴문자를 사용하고 있는 러시아어나 우크라이나어로 OS의 언어 코드페이지가 설정되어있다면 두번째 방법으로도 임베드가 가능할 것이다. 대신, 그쪽 환경에서는 반대로 한글이 임베드가 안될 것이다.

font symbol 을 사용하여 폰트를 임베드하면 OS의 국가코드페이지범위와 Basic Latin, Latin 1 의 범위(unicode standard)까지 임베드가 가능하다. 물론 로컬환경에 따라 다를것이다.(대부분의 코드페이지에서는 라틴문자를 포함한다)
위 범위는 기본 라틴계열의 영어권국가와 프랑스어,독일어,스페인어와 같은 문자를 모두 표현할 수 있다. 하지만 헝가리어 같은 경우 Latin Extended A 까지 포함해야 모두 표현이 가능하다.
따라서 두번째 방법으로 폰트를 적절하게 임베드하는 방식은 코드페이지를 강제로 바꾸는 방법밖에 없다.(제어판–>국가및 언어옵션–>고급–>유니코드를 지원하지 않는 프로그램용 언어–>재부팅)
하지만 이방법은 너무 번거롭다.

Adobe에서도 font symbol 을 이용한 다국어 작업시 폰트 임베드 문제는 로컬시스템 환경에 영향이있으므로 첫번째 방법으로 직접 텍스트 필드를 생성하여 임베드하는 것을 권장하고 있다.

위 모든사항을 고려할 때 가장 안정적으로 다국어용 폰트를 임베드 하려면, 첫번째 방법을 사용해야할 것이다. 또한 임베드하려는 폰트가 해당문자(glyph)가 포함되어있는지 확인해 봐야한다.
대표적인 유니코드 폰트인 Arial 이나 Times New Roman 그리고 폰트뒤에 키릴문자(cyrillic)의 약자인 CYR 또는 CR  과 같은 첨자가 붙는 폰트를 사용할 경우 해당폰트를 표현하는데 무리가 없을것이다.

as3.0 의 경우는 hasGlyphs 과 같은 해당문자의 유무여부를 판단해주는 메서드가 존재하므로 이를 활용하면 좀더 안정적인 폰트 임베드가 가능할 것이다.

근데 왜 actionscript 로 character 임베드범위를 제어 못하게 했을까?….아님 할수 없는것일까?

download sample files


reference from articles below
http://www.quasimondo.com/archives/000211.php
http://www.actionscript.org/forums/showthread.php3?t=108546&highlight=Cyrillic
http://www.unicode.org/

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