플래시 앨범 구성하기(메모)

Flash Page Flip이라는 웹 도구가 있다. 그림 파일을 디렉토리에 몰아 넣고 순차적으로 번호를 주고 나서, xml파일을 손 보면 멋진 넘기는 앨범이 되는 프로그램이다. 

xml파일의 내용은 아래와 같다.

<content width="600" height="800" bgcolor="cccccc" loadercolor="ffffff" panelcolor="3a6dac" buttoncolor="3a6dac" textcolor="d0e5f7">
     <page_src="pages/page1.jpg"/>
     <page_src="pages/page2.swf"/>
     <page_src="pages/page3.jpg"/>
     <page_src="pages/page4.swf"/>
     <page_src="pages/page5.jpg"/>
.....
</content>

그림파일 뿐 아니라 swf파일을 크기에 맞추어 넣으면 그 안에서 실행이 된다. 곧 링크나 애니메이션을 swf파일로 작성하면 인터랙티브 기능도 된다는 이야기.
이점에 착안하여 꾸민 앨범의 구성은, 

• 첫 페이지는 표지 (그림)
  
• 두번째 페이지는 목차 (swf)
• 세번째 부터는 연도별로 사진을 선택할 수 있게 소목차를 만들고 해당 목차마다 앨범이 링크되도록 한다.
• 각 앨범은 Xnview를 이용하여 플래시 갤러리로 꾸민다. (이건 실패했다. 한글 코드와 xml,php등등의 여러 콤비네이션이 맞지 않는다. 이틀 동안 구글링하다 결국 실패. 그래서...)
  구글 피카사 도 비슷한 기능이 있다는 사실을 오늘에서야 알았다. 아니, 디자이너들이 손 본 멋지고 기능 많은 템플릿들이 우수수 있는 게 아닌가? 당장 피카사 3을 설치하고 템플릿들을 시험해 보니 대만족이다.
• swf는 스위시 MAX로 만든다. 플래시는 아무래도 자신 없고 해서. 하지만 ABC도 모르기 때문에 배우는 것부터 먼저.(스위시를 배우는 데 매우 멋진 사이트 발견)
• Flash Page Flip 은 swf 페이지간 이동도 지원한다. 이동을 원하는 페이지에서 버튼을 만들고 스크립트를 아래와 같이 넣어 주면 된다.
  

  on(rollOver, dragOver){
      _root.canflip=false; // flipping passive
  }
  on(rollOut, dragOut, releaseOutside){
      _root.canflip=true; // flipping active
  }
  on(release){
      _root.canflip=true; // flipping active
      _root.gotoPage(8,true); // go to page (8 is page number, true is directly go to page number, use false for flipping animation)
  }
  

• 그리고 만드는 페이지마다 scene에 아래와 같은 스크립트를 넣어 준다.
  

  function onVisible() {
      trace("Just turned to this page!");
  }
  
  function onInvisible() {
      trace("Just left this page!");
  }
  

• 만일 다른 곳으로 링크를 걸고자 하면 아래와 같은 스크립트를 버튼에 지정해 주면 된다. URL주소는 상대주소도 가능하다.
  

  on(rollOver, dragOver){
      _root.canflip=false; // flipping passive
  }
  on(rollOut, dragOut, releaseOutside){
      _root.canflip=true; // flipping active
  }
  on(release){
      _root.canflip=true; // flipping active
      getURL("http://www.google.com", target="_blank"); // open link in new window
  }
  

• 일단 준비는 끝.
  

---

※ FlashPageFlip은 책과 같이 펼쳐 지기 때문에 가로 이미지 두 개를 붙이면 보기 싫게 길어진다. 그래서 960*640 (4:3) 크기로 배경을 정하고 이것을 정확히 반으로 갈라 480*640 크기로 만들어 각각의 페이지에 배당하면 보통 우리가 보는 사이즈의 책 모양이 되겠다.

※ 목차에 넣을 이미지는 포스트잇을 붙인 것처럼 효과를 주면 좋겠다.

태그.psd

---

스위시의 작업 순서

1. 페이지를 480*640에 맞춘다.
2. 페이지 스크립트를 삽입한다.
3. 배경으로 쓸 이미지를 삽입하고 타이틀이나 설명을 텍스트로 입력한다.
   
4. 목차로 쓸 이미지(포스트잇 사이즈 이미지, 200*50) 를 모두 불러 와서 버튼화 시키고 페이지 플립에서 정해진 링크 스크립트를 삽입한다.
   
5. 버튼은 오버,다운(마우스를 올럈을 때, 선택한 뒤)이 따로 정해지도록 한다.
6. 오버와 다운의 속성을 정한다. 이 때 한 번 정한 속성은 다른 버튼에 적용할 때 그대로 이어지므로 같은 속성을 연속하여 설정하는 것이 좋다.
7. 목차 이미지를 설명할 글 내용을 적고 배치한다.
8. 피카사로 만들어지는 폴더는 index.html이 주어지므로 링크를 걸 때는 디렉토리까지만 걸면 된다.
   (예:/albums/200801/)
   

---

피카사의 작업 순서

1. 웹 페이지 템플릿 중 한 눈에 보기 좋은 것은 아무래도 Hislide 나 Tiltviewer였다.
2. 템플릿을 피카사 설치 디렉토리 아래 web/templates안에 복사한 뒤 피카사를 재시작한다.
3. 앨범을 만들 그림 파일은 연도별이나 만들어질 페이지 별로 디렉토리를 만들어 모아 두는 것이 편리하다.
4. 템플릿을 이용해 만들어질 때 안타까운 점. 그림이 복사되면서 모조리 1,2,3,4...같은 넘버링 이름만 붙는다는 점. 기껏 연도를 맞추어 붙인 이름이 말짱 도루묵이 되었다... 그래도 그 방식이 한글코드와 xml,php 가 엉켜서 실패했었던 Xnview 방식보다는 낫나?
   

---

2박3일동안 스위시 첫만남+피카사+xml첫 활용으로 만든 앨범은 이거다. 만들고 나니 뿌듯한 걸. 앞으로 이것에다 배경음악 넣고, 앨범 설명 좀 더  넣으면 되겠다..