현상

function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName];
    } else {
        return document[movieName];
    }
}

자바스크립트 (Javascript) 에서 플래시 객체를 가져올려고 호출할 때마다 에러가 발생 
파이어폭스 (FireFox) 에서는 잘 돌아가지만 구글크롬 과 사파리에서 에러가 남 


해결

function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName];
    } else {
        return document.getElementById(movieName);
    }
}

파이어폭스(FireFox)와 구글크롬(Chrome)에서 잘 돌아감 , 사파리는? 사파리는. 사파리는.. 







"웹상에서 보이는 모습"




플래시 사진 갤러리를 만들었으면 실제로 웹 사이트에 적용해 보기로 합니다. 제일 먼저 생각해야 할 것은 네트워 크상에 올리는 방안에 관해서 입니다. 시나리오는 다음과 같습니다. 

1. 기존 이미지 파일들이 나열된 XML 파일을 네트워크상에서 읽어온다. 
2. XML 파일을 읽어서 사진이 저장된 사진의 URL을 가져온다. 
3. 기존과 동일하게 플래시에 적용 시킨다. 

더 간단하게 이야기 하자면 'XML 파일을 네트워크상에서 읽어오게 하는 일'입니다. 

기존 FLA 파일에서 ActionScript 부분만 수정해 주면 됩니다. 

var urlXML:String = "http://192.168.10.16:8080/pub/imagelist.xml";
//var hardcodedXML:String="<photos><image title='2or0'>2or0.jpg</image><image title='conan'>conan.jpg</image><image title='Girls_gene'>Girls_gene.jpg</image><image title='Mystery'>mystery.jpg</image></photos>";
var loader:URLLoader = new URLLoader();

urlXML 변수는 XML 파일이 저장된 위치를 지정해주는 변수입니다. 
hardcodedXML 은 외부 파일로 저장하기로 했기 때문에 comment 처리 해줬습니다. 기존의 쓰여진 내용은 urlXML 에 지정된 XML 파일에 저장되어 있습니다. 
외우에 있는 XML 파일을 로딩하기 위해서 loader 를 선언해 줍니다. 


loader.addEventListener(Event.COMPLETE, loadCompleteHandler);
loader.load(new URLRequest(urlXML));

loader 에서 load 가 끝났을 때 실행되는 이벤트 핸들러를 지정해 줍니다. (필수)
urlXML 이 지정하고 있는 XML 파일을 읽어오게 loader.load 로 수행해줍니다. 

// CODE FOR HARDCODED XML =====
// imageList = XML(hardcodedXML);
// fl_parseImageXML(imageList);
// END CODE FOR HARDCODED XML

기존 XML 에서 이미지리스트를 얻어오는 부분은 Comment 처리 해줍니다. 

function loadCompleteHandler (evt:Event) :void {
var hardcodedXML:String = loader.data;

imageList = XML(hardcodedXML);
fl_parseImageXML(imageList);

}

XML 로딩이 끝났을 때 불려지는 이벤트 핸들러 함수 입니다. 로딩이 끝나면 loader.data 에 읽어온 XML 내용이 들어 있습니다. 이것을 기존에 쓰던 hardcodedXML 에 저장하고 기존 이미지리스트 분리하는 함수를 로딩해 줍니다. 

이렇게만 바꿔주고 imagelist.xml 파일과 플래시에서 불러오는 image 들을 적절한 위치에 복사해주면 됩니다. (저는 http://192.168.10.16:8080/pub 밑에 몰아 넣습니다)

Flash CS4 용 소스로 변환해 뒀습니다.  
imagelist.xml 예시 입니다. 

[관련포스트]

공부할겸 이런 기능 저런 기능을 만들어 보고 있습니다. (플래시라는 툴 접한지 4일째임) 

ActionScript3.0 을 이용해서 동적으로 버튼을 생성해서 구동시켜보는 예제입니다. 

저번 포스팅에서 쓰였던 "초 간단 사진 갤러리" 소스를 이용해서 변경해 보기로 하겠습니다. 추가 할 내용은 사진이 바뀔 때 보여주는 이미지 전환 효과를 ActionScript 에서 하드코딩 되어 있는 부분을 동적으로 버튼을 만들어서 클릭할 때마다 전환 효과를 변하게 해주는 기능을 추가해 줍니다. 




1. Stage 에서 보이는 모습을 그림과 같이 바꾸어 줍니다. 맨 윗부분에 버튼을 추가 하기 위해서 그림을 전체적으로 내려줬습니다. 




2. "Window" -> "Component" 를 선택하고 "User Interface" 에서 Button 을 끌어다가 Library 로 가져다 둡니다. 

이제 ActionScript 만 바꾸어 주면 됩니다. 

3. 첫번째 프레임의 "Actions" 레이어에서 오른쪽 마우스 클릭후 "Actions" 선택해 줍니다. (Windows 라면 "F9" 키 클릭 , OSX 라면 "option"-"F9" 입니다. OSX 와 해피해킹 키보드를 쓰고 있는데 두키를 동시에 눌러주는게 은근히 짜증납니다.)

4. 시작할때 전환 효과를 "Blinds" 방식으로 시작하게 바꿔줍니다. 

var transitionType:String = "Blinds"; 

5. 전환 효과에 쓰이는 단어들을 버튼 레이블로 활용 가능하게 배열에다가 저장해 둡니다. 

var labels:Array = new Array( "Blinds", "Fade", "Fly", "Iris", "Photo", "PixelDissolve", "Rotate", "Squeeze", "Wipe", "Zoom", "Random");

추가합니다. 

6. 전에 눌러뒀던 버튼을 알아야지 새로 버튼을 누를때 강조효과를 없애줄 수가 있습니다. 

var oldSelectButton:Button ;

추가합니다.

7. 동적으로 버튼을 생성해 줍니다. (문법은 정확히 알고 한다기 보다는 대충 이럴것이다 라고 생각해서 써봤습니다. 안돌아가면 돌아가는 예제들을 조금 찾아봐서 고쳤습니다)

for(var i=0; i < labels.length ; i++){
    var myButton:Button = new Button();

    myButton.label = labels[i] ; // 
    myButton.width = 80;
    var posY = 10;
    var posX = i;
    
    if (i > 5)
{
        posX = i - 6;
        posY = 40;
}
    myButton.move(20 + posX * (myButton.width + 10), posY);
    myButton.addEventListener(MouseEvent.CLICK , onMyButtonClick);

    addChild(myButton);
if (i == 0) {
myButton.emphasized = true;
oldSelectButton = myButton;
}
 }

세부적으로 살펴보자면 

myButton.width = 80; 

버튼 폭을 80으로 정해줍니다. 

   if (i > 5)
   {
      posX = i - 6;
      posY = 40;
   }
버튼이 6개를 넘어가면 한 줄 내려서 그려줍니다. 

 myButton.move(20 + posX * (myButton.width + 10), posY);
버튼을 정해진 위치로 이동시켜주는 부분입니다. 

 myButton.addEventListener(MouseEvent.CLICK , onMyButtonClick);
버튼을 클릭할때 발생시키는 이벤트 핸들러를 등록시켜줍니다. 

addChild(myButton);
실제로 화면에 그려주는 부분입니다.

if (i == 0) {
   myButton.emphasized = true;
   oldSelectButton = myButton;
}

첫번째 버튼 (Blinds 라는 라벨이 붙은 버튼)을 강조시키고 그 버튼을 선택했다고 저장합니다. 

8. 동적으로 생성한 버튼을 클릭했을 때의 구동 되는 핸들러 함수를 정의해 줍니다. 

function onMyButtonClick(evt:MouseEvent):void
{
    oldSelectButton.emphasized = false;
    var selButton:Button = Button(evt.target) ;
    transitionType = selButton.label ;
    selButton.emphasized = true;
    oldSelectButton = selButton;
}

전체를 아우르면서 설명을 하자면 

전에 선택된 버튼의 강조 효과를 없애고 , 이벤트가 발생한 버튼이 무엇인지 알아내서, 그 버튼의 레이블에 쓰여져 있는 전환효과로 바꾸고 (transitionType 이 전환 효과 지정해주는 것입니다) 지금 선택된 버튼을 강조시킵니다. 그리고 나중에 다른 버튼이 클릭될 때를 가정하여 지금 선택된 버튼을 oldSelectButton 에 저장해 둡니다. 

9. 완성된 모습입니다. 


상단의 버튼을 이거 저거 눌러보시면서 전환 효과가 변경되는 것을 확인하세요. 

역시나 소스는 Flash CS4 형식으로 올려둡니다. 



너무 간단해서 글 쓰기가 무색하지만 남겨보도록 하겠습니다. 클릭 몇번과 글만 수정해주면 되는 것입니다.

1. "File" -> "New" 를 눌러줍니다.





2. 그림과 같이 "Templates" 를 클릭하고 "Media Playback" 에서 "Advanced Photo Album" 을 선택해서 "OK" 를 클릭하면 Template 이 만들어 집니다. 만들어 졌으면 fla 파일로 한번 저장해줍니다. "File" -> "Save" 로 적당한 위치에 ("~/workspace/flash/PhotoAlbum/PhotoAlbum.fla" 저는 이 위치에 저장해줬음) 저장합니다.

3. 갤러리에 쓸 그림을 4장을 적당하게 구해줍니다. ( 2or0.jpg , conan.jpg , Girls_gene.jpg , mystery.jpg 가 제가 구한 이미지 파일입니다. 인터넷에서 대충 1024*768 로 검색해서 다운 받았음)
그림을 fla 가 위치한 곳에 가져다 둡니다. ("~/workspace/flash/PhotoAlbum/" 저는 당연히 여기 입니다.)






4. 이제 "Actions" 레이어의 1번 프레임에서 마우스 오른쪽 클릭후 "Actions" 를 선택합니다. 그러면 ActionScript 를 편집할 수 있는 창이 나옵니다. 그중에서
var hardcodedXML:String 부분을 다음과 같이 바꿔 줍니다.

var hardcodedXML:String="<photos><image title='2or0'>2or0.jpg</image><image title='conan'>conan.jpg</image><image title='Girls_gene'>Girls_gene.jpg</image><image title='Mystery'>mystery.jpg</image></photos>";

자 이제 모든 준비가 끝났습니다. ActionScript 를 저정하고 "File" -> "Publish Preview" -> "Flash" 를 선택합니다.



외형은 제가 조금 손대긴 했지만 거의 그대로 입니다.

사진이 바뀔 때 효과를 주고 싶다면 ActionScript (4번 앞부분과 동일하게 들어갈 수 있음) 에서
var transitionType:String
부분을 다음과 같이 바꿔 줍니다. (다른 효과들이 주석으로 쓰여져 있으니 적당한 것을 카피해서 넣으면 됩니다)

var transitionType:String = "PixelDissolve";


상용소스 찾으러 돌아다니지 마시고 그냥 플래시 안에 들어 있는 것을 활용하세요.

Flash CS4 버젼으로 저장한 소스 예제 입니다. 그림만 뺀 상태이니 제 포스트를 참조해서 XML 부분만 고쳐주시면 될 것입니다. CS4 에서는 이렇게 예제 만드는 것이 안보이더군요.





+ Recent posts