2007년 4월 16일 월요일

블로그에 이미지를 담는 멋진 방법!!

  
태터툴즈와 티스토리에서는 이미지 파일을 표시하기 위한 멋진 방법으로 '슬라이드쇼'를 제공합니다. 여러장의 이미지를 한꺼번에 표시하기 위한 방법인데요. 슬라이드쇼는 크게 두가지로 분류됩니다. 먼저 자바스크립트를 기반으로 하는 슬라이드쇼, 그리고 플래쉬에 기반을 두고 있는 슬라이드쇼가 있습니다. 각각의 차이점과 사용법을 비교해보겠습니다.

1. 플래쉬 슬라이드쇼 :: 플래쉬로 슬라이드를 만들 경우 다양한 옵션을 응용해서, 멋진 슬라이드쇼를 만들 수 있습니다. 아래는 모두 같은 이미지를 사용해서 플래쉬로 제작한 슬라이드쇼입니다. 첫번째는 자동으로 슬라이드쇼가 전환되는 기능을, 두번째는 옆에 사이드바를 클릭할 때, 마지막은 플래쉬 위에 다른 장면으로 전환하기 위한 버튼이 나타납니다. 그리고, 모두 해당 플래쉬를 선택하고 '휠'을 스크롤하면 다른 이미지로 장면이 전환되는 기능이 있습니다.

자동으로 전환되는 슬라이드쇼 : 장면전환효과(슬라이딩), 내비게이션(기본)
          
양쪽에 사이드바를 부착한 형태 : 장면전환효과(투명전환), 내비게이션(사이드바)
      
여러장을 한번에 : 장면전환효과(플래쉬), 내비게이션(심플)
     

2. 자바스크립트 슬라이드쇼
:: 자바스크립트로 슬라이드쇼를 만들 경우 플래시처럼 다양한 기능을 적용할 수 없습니다. 하지만, 조금 더 가볍고 직관적으로 작동하게 됩니다.



3. 슬라이드쇼 만들기
(* 티스토리는 태터툴즈와 달리 상단에 슬라이드쇼를 삽입하기 위한 별도의 메뉴를 포함하고 있습니다, 여기서는 티스토리/태터툴즈 양쪽에서 모두 사용가능한 방법으로 설명하겠습니다.)

우선, 슬라이드쇼를 만드시려면 만들고 싶은 여러장의 이미지를 선택해야 합니다.
목록에서 이미지를 클릭하고, 두번째 이미지부터는 [컨트롤]키를 누른 상태에서 이미지를 선택하면 여러장의 이미지를 선택할 수 있습니다.
사용자 삽입 이미지

첫번째 이미지를 선택합니다.


사용자 삽입 이미지

추가하고 싶은 다른 이미지를 [컨트롤]키를 누른 상태에서 클릭해서, 추가합니다.


사용자 삽입 이미지

플래쉬 슬라이드쇼를 만들고 싶으면, 우측의 메뉴중에 3번째줄 첫번째 이미지를 선택합니다.


사용자 삽입 이미지

자바스크립트 슬라이드쇼를 만들고 싶으면, 3번째줄 두번째 이미지를 선택합니다.


사용자 삽입 이미지

버튼을 선택하면, 에디터창에 해당 슬라이드쇼의 영역이 표시됩니다.


사용자 삽입 이미지

영역을 선택하면, 우측에 설정을 위한 메뉴가 나타납니다.


사용자 삽입 이미지
  
자바스크립트 상세 기능 설명

자바스크립트 상세 기능 설명


이상입니다. ^^ 도움되셨길 바랍니다. 단, 슬라이드쇼로 작성된 이미지의 경우 RSS에 전달될 때는 해당 기능을 사용하지 않고, 이미지를 일렬로 나열해서 표시합니다.

(* 내용 정정 : 플래쉬로 작성되는 슬라이드쇼의 경우는 자바스크립트로 작성되는 슬라이드쇼와 달리, 해당 플래쉬 전체의 자막을 삽입합니다. 반면, 자바스크립트로 할 경우 개별 이미지에 대한 자막기능을 가지고 있습니다. 참고하세요. 알려주신 dJiNNi님 감사합니다.)

BKLove




댓글 6개:

  1. 감사합니다. 잘 사용하고 있습니다. ^.^

    답글삭제
  2. 오쓰!!!

    좋습니다!!!

    작은 썸네일 같은 이미지는 이렇게 활용하는게 좋겠군요.

    큰 이미지는 감상할 시간이 필요하니.ㅋ

    답글삭제
  3. 플래쉬의 경우 이미지별 개별적으로는 자막 입력이 안되던데 어떤 이유일까요?

    답글삭제
  4. 덕분에 사용해보았습니다.^^

    답글삭제
  5. @dJiNNi - 2007/04/17 04:31
    내용에 좀 오류가 있어서.. 정정했습니다. ^^

    알려주셔서 정말 감사드립니다~ ㅋ

    답글삭제
  6. 아! 그렇게 되는것이군요! 잘 활용하여 쓰겠읍니다.

    답글삭제