SWFObject 에 해당하는 글3 개
2008/02/11   SEO flash programming
2007/07/10   Flash Player Detection (5)
2007/02/12   SWFObject: SWF embed script

web | 2008/02/11 18:22

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 파일 각각의 메뉴에 일대일대응으로 링크가 가능하다는 의미이다.



<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/)





 
 
태그 : flash, SEO, SWFAddress, SWFObject
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/108

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기

flash/Tip | 2007/07/10 01:28

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 type="text/javascript" src="swfobject.js"></script>
<body>
 <div id="flashcontent">
  <script>
   document.write("This content requires the Adobe Flash Player 9<a href=http://www.adobe.com/go/getflash/>Get Flash</a>");
  </script>
 </div>
 <script type="text/javascript">
  var so = new SWFObject("example.swf", "example", "600", "200", "9", "#ffffff");
  so.useExpressInstall('expressinstall.swf');
  so.write("flashcontent");
 </script>
 <noscript>
   This content requires  a browser with JavaScript enabled.
 </noscript>
</body>

위 코드는 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 로 제작해야한다.

express install test (반드시 flash player 를 제거하고 8.0 버전을 설치한후 테스트)

download sample.....


<Installer and UnInstaller>
Window version.
Mac version.
 



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


 
 
태그 : express install, flash detection, flash player, SWFObject
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/99
BlogIcon 지돌스타 2008/02/04 01:11 ReplyDelete
좋은 글 감사합니다.
BlogIcon 기정e 2008/02/04 10:36 Delete
도움이 되셨다니 다행입니다.^^
오리냥 2008/02/11 10:40 ReplyDelete
좋은자료 감사합니다.^ㅇ^)/
BlogIcon 기정e 2008/02/11 19:49 Delete
네.감사합니다~~
후후 2008/11/18 20:07 ReplyDelete
좋은 정보 감사합니다.

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기

flash/Tip | 2007/02/12 15:46
SWFObject is a small Javascript file used for embedding Macromedia Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.

SWFObject는 swf 임베드 자바스크립트 소스이다.

2006년도 초에 이올라스와의 소송이후 MS에서 IE설계를 바꿔 embed,object 태그의 직접사용을 막아 놓았기 때문에 swf 파일을 html 에 임베드할때 반드시 외부 자바스크립트 파일로 해야지만 플래시 활성화 클릭이 뜨지 않고 보여지게 되었다. 그 이후로 여러 다른 사람들이 만들어 놓은 swf 임베드 javascript 파일 소스를 사용하여 쓰곤했는데 플래시로 변수를 넘겨줄때는 여러모로 불편한 문제가 있었다. 종종 해외사이트에서 사용된 SWFObject 가 오픈 소스였다니....그때는 무심코 넘겼는데 자세히 보니 여러가지로 유용한 점이 많이 있는 것 같다.
또한 브라우저 종류에 상관없이 모든 플랫폼에 적용되어 범용성 측면에서도 도움이 될 듯 싶다.


<SCRIPT type=text/javascript>
   var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
   so.addParam("quality", "low");
   so.addParam("wmode", "transparent");
   so.write("flashcontent");
</SCRIPT>

사용법은 어렵지 않다. SWFObject 객체를 생성해서 파라미터만 넘겨주면 된다. 플래시파일 버전 체크도가능하다. 위에서 보이는 7 이라는 숫자 파라미터가 체크할 Flash Player 버전이다. 여기까지 기존의 임베드 스크립트와 별반 다르지 않다.

<SCRIPT type=text/javascript>
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.addVariable("variable1", "value1");
   so.addVariable("variable2", "value2");
   so.addVariable("variable3", "value3");
   so.write("flashcontent");
</SCRIPT>


위에서와 같이 플래시 파일안으로 쉽게 변수를 넘겨 줄 수 있다. 자바스크립트에 익숙하지 않는 사람에게는 변수 처리하는 과정이 여간 까다로운게 아니다. 브라우저 플랫폼에 따라서 결과 값이 다를수도 있고.... 또한 url 로 붙여서 들어온 변수도 처리해 줄수도 있다. 예를 들어

http://www.example.com/page.html?variable1=value1&variable2=value2 다음과 같은 주소로 변수가 붙어서 들어왔을 경우

<SCRIPT type=text/javascript>
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.addVariable("variable1", getQueryParamValue("variable1"));
   so.addVariable("variable2", getQueryParamValue("variable2"));
   so.write("flashcontent");
</SCRIPT>


위와 같이 getQueryParamValue 함수를 이용하면 쉽게 플래시 안으로 넘겨줄 수 있다.

다운로드

관련 사이트
http://blog.deconcept.com/swfobject/
 
 
태그 : flash, SWFObject, Tip, 이올라스
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/84

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기


[PREV] [1] [NEXT]

 
전체 (104)
flash (73)
math&physics (4)
programming (11)
Flex2 (1)
Mac (2)
photo (0)
project (6)
주저리주저리 (3)
유용한 자료들 (1)
diary (0)
Book (1)
web (2)
«   2008/11   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30