[앨범/성장앨범] 아기의 성장앨범을 플래시로 앨범만들기...

시작하기 전에 - autoviewer 앨범 미리보기
전에는 Html을 몰라도 만든 앨범을 올린 후에 퍼와서 자신의 블로그에 올리는 것을 다루었는데 이번에는 au·tovie·wer 라는 플래시 앨범으로 미리보기는 제가 아이프레임을 사용해서 아래와 같이 포스트에 삽입했는데 어떤 것인가 보시고 아래 미리보기가 작다면 브라우저에 꽉차게 전체창으로 보시고 싶다면 여기를 클릭하세요.   

※ 이 글은 네이버 블로그시 10줄인가 적은 것을 수정해서 올리는 것이고 아래에서 간단히 사진을 보는 법을 설명합니다.

 

• 다음 사진을 보시고 싶다면 앨범 중앙 오른쪽의 화살표를 누르면 됩니다.
• 앨범의 전체를  사진을 슬라이드로 보고 싶을 때 앨범 중앙 아래에 있는 버튼을 클릭하면 됩니다.
• 이전 사진을 보시고 싶다면 앨범에 마우스 포인터를 왼쪽으로 가져가면 화살표가 나오니 그것을 클릭하면 됩니다.
• 앨범에서 화살표가 사라지면 앨범에 마우스 포인터를 올리면 다시 나타나고 벗어나면 사라집니다.

 앨범 다운로드와 압축풀기

여기를 클릭하여 홈페이지로 이동 후  아래 그림과 같이 Dow·nLoad 버튼을 눌러 다운받으면 되고 압축을 푼 파일중에 앨범안에 들어갈 사진의 경로,설명,크기를 정의를 하는 ga˙llery.x·ml을 메모장 등의 텍스트 에디터로 열어서 아래 부분을 수정합니다. - 간단히만 설명합니다.

※ 저는 Edi·tPlus를 사용했고 압축을 푼 파일에 inde·x.h·tml 파일이 미리보기 파일입니다.

앨범에 들어갈 사진정하기
gallery.xml을 메모장 등으로 열어 아래 코드에서 <image></image>안에 앨범에 들어갈 이미지를 정의합니다.

<image>
   <url>images/wide.jpg</url>
   <caption><![CDATA[<font size="50">Example Gallery</font><br>An example large format <u><a href="http://www.airtightinteractive.com/projects/autoviewer">AutoViewer</a></u> gallery.]]></caption>
   <width>700</width>
   <height>465</height>
</image>

<image></image>안에 <url>.<caption>,<width>,<height>를 정의하는데 아래와 같이 합니다. 

• url은 사진의 경로를 적습니다.
• caption에는 사진의 제목이나 설명등을 넣는데 위 미리보기에서 이미지가 나온 후 조금있다가 이미지에 설명이 나오는데 이것을 넣는 것입니다.
• width -  사진의 가로크기인 폭의 수치를 입력합니다. 
• height - 사진의 세로크기인 높이의 수치를 입력합니다. 

위와 같으니 티스토리 블로그니 저는 아래처럼 했으나 웹호스팅 등을 한다면 사진 파일을 모두 images 디렉토리에 넣고 위의 코드에서 url에 있는 images/wide.jpg를 images/사진이름으로 변경하고 width와 height에 사진의 크기를 나타내는 수치를 적은 후 사진설명을  고쳐주어 설정해 주면 아래 링크와 같이 하실 수 있습니다.

• 자동차를 앨범으로 파란웹호스팅의 무료호스팅을 이용해서 만든 것이 있는데 보시려면 여기를 클릭하시고 안 나타나면 파란웹호스팅이 트래픽문제이거나 제  계정이 없는 것으로 생각하세요.

<image>
   <url>http://cfs.tistory.com/custom/blog/27/279386/skin/images/photo03.jpg</url>
   <caption>게임 이미지인가 만화이미지인가...</caption>
   <width>1600</width>
   <height>1255</height>
</image>

티스토리 블로그에서 올린 파일의 경로알기
아래 예는 다운로드 받은 파일을 아이프레임으로 삽입했는데 index.html 파일을 수정 필요없네요. 그리고 제가 해보니 올리는 사진 파일의 이름이 아기.jpg 등의 한글이면 사진이 안 나왔으니 영어인 baby.jpg 등을 쓰세요. 참고로 사진등의 엑박을 피하는 것은 한글 이름대신 영문 이름을 파일 이름을 해야 하는데 티스토리 블로그는 한글 이름도 됩니다. 

• http://juneymedia.tistory.com/63 - 티스토리 블로그에 올린 파일의 경로따기: 자신과 관련없는 글이라 멀리하지 마시고 티스토리 블로그에 올린  파일경로를 못 만드시는 분인 경우는 반드시 보아야 합니다.

- 장점 : 사진을 설명하는데 H·TML을 사용하여 설명을 넣을 수 있습니다.
- 단점 : html 태그를 알면쉽겠고 모르면 엄청 어려울 것 같고 모든 파일을 자신의 계정에 놓아야 하므로 트래픽이 걱정됩니다.

맺으면서

• 사진인화 등은 [앨범 1] 플래시(플래쉬/S·WF)로 포토앨범을 만들려면 글에 설명했으니 참조바랍니다.
• 자동차를 앨범으로 파란웹호스팅의 무료호스팅을 이용해서 만든 것이 있는데 보시려면 여기를 클릭하시고 안 나타나면 파란웹호스팅이 트래픽문제이거나 제  계정이 없는 것으로 생각하세요.
• 사진 3D 플래시 앨범으로 만들기:  http://min-blog.tistory.com/152
• 카드를 나누는 것처럼 앨범이 처음에 나열되게 앨범만들기 : http://min-blog.tistory.com/157

 문서안에 또다른 문서를 집어 넣는데 쉬운 아이프레임(iframe)을 정말 많이 사용하며 php로도 삽입합니다. 다른 애기지만 아이프레임이 단가가 영향이 있는지는 아래 글을 보시기 바라면 저는 클릭수도 많지 않고 수입도 많지 않아서 인지 저는 모르겠습니다.

• 드라이너 김군님의 아이프레임이 단가에 영향이 있었다는  글 : http://blue2310.tistory.com/633 
• 티비님의 아이프레임은 단가에 영향이 없었다는 글 : http://nextgoal.tistory.com/441