"웹상에서 보이는 모습"




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

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 예시 입니다. 

[관련포스트]

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

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