작성일자
카테고리 Javascript/자바스크립트



상단 타이틀에 사용된 배너는 피스메이커(Piecemaker)라는 플러그인을 이용한 것으로 이곳 을 클릭하면 원작자의 사이트에서 내용을 볼 수 있고 다운받을 수 있습니다. 또는 아래에서 원본과 이 블로그에 사용된 수정본을 다운 받아 참고하면 됩니다.


압축을 풀면 3개의 폴더가 있습니다. Documentation은 프로그램의 소개와 저작권, 설치방법이 있습니다. 저작권은 사용은 무료(Open Source)이고 프로그램 단독으로 판매는 불가하나 다른 프로그램에 포함하여 판매는 가능하다는 내용입니다. 플래시 폴더에는 3D에 사용된 플래시 원본파일이 있고 web폴더에는 설치파일이 있습니다. contents에는 이미지, 비디오, 플래시 swf파일이 있고 scripts폴더에는 자바스크립트 파일이 있습니다. index는 실행파일이고 css파일은 배너 내부의 글내용을 스타일 할 수 있습니다. swf파일은 3d에 사용된 파일입니다. xml파일은 배너에 들어가는 글내용과 애니메이션 시간, 지연시간, 3d모양을 설정할 수 있는 파일입니다.

배너에 사용될 이미지를 포토샵으로 만들고 모든 설정한 다음 파일과 폴더를 업로드하면 실행이 가능하지만 블로그는 모든 파일을 images폴더에 업로드해야하기 때문에 경로설정이 다릅니다. 티스토리 블로그를 기준으로 설명드립니다. 아래의 코드는 블로그에 영향을 미치므로 일부 글자를 제거해서 비정상적인 코드입니다. 중요부분은 그대로입니다.예를 들어 flashvars는 s를 뺐습니다. 

<!--
    <script type="text/javascript" src "http://cfs.tistory.com/custom/blog/81/819065/skin/images/swfobject.js"></script>
        
    <script type="text/javascript">
      var flashvars = {};
      flashvar.cssSource  "http://cfs.tistory.com/custom/blog/81/819065/skin/images/piecemaker.css";
      flashvar.xmlSource  "http://cfs.tistory.com/custom/blog/81/819065/skin/images/piecemaker.xml";
      var params = {};
      params.play = "true";
      params.menu = "false";
      params.scale = "showall";
      params.wmode = "transparent";
      params.allowfullscreen = "true";
      params.allowscriptaccess = "always";
      params.allownetworking = "all";
 
      swfobjec.embedSWF('http://cfs.tistory.com/custom/blog/81/819065/skin/images/piecemaker.swf', 'piecemaker', '1500', '260', '10', null, flashvars, params, null);
    
    </script>
-->

index파일을 메모장에 열고 자바스크립트 부분을 수정합니다. 이미지나 비디오 swf파일, css, 을 블로그에 업로드합니다. scripts폴더에 있는 자바스크립트 파일도 업로드합니다. 업로드한 다음 자신의 파일경로를 알아내서 위와 같이 경로를 수정해줍니다. images 경로를 찾는 방법은 이곳 을 참고하세요. 1500은 배너의 폭이고 260은 높이입니다. 위와같이 수정한 다음 블로그의 skin.html 수정화면에서 <head>태그 부분에 삽입합니다. 

<!--
  <center>
    <div id="piecemaker">
      <p>Put your alternative Non Flash content here.</p>
    </div>
    </center>
-->
이부분은 header부분에 삽입합니다.

다음은 xml파일을 메모장에 열고 수정합니다. 

<!--
<?xml version="1.0" encoding="utf-8"?>
<Piecemaker>
  <Contents>
    <Imag Source="http://cfs.tistory.com/custom/blog/81/819065/skin/images/piecemaker1.png" Title="The Piecemaker 2"></Image>
    <Imag Source="http://cfs.tistory.com/custom/blog/81/819065/skin/images/piecemaker2.png" Title="Lots of new Features">
      <Text>&lt;h1&gt;New hot Features&lt;/h1&gt;&lt;p&gt;The all new Piecemaker comes with lots of new features, making it even more slick.&lt;/p&gt;&lt;p&gt;Just to mention a few - you can now specify unlimited transition styles, include your own SWF and Video files, add hyperlinks to images and info texts with all special characters.&lt;/p&gt;&lt;p&gt;We also impoved the navigation and the animation with animated shadows and pixel-perfect transitions.&lt;/p&gt;</Text>
      <Hyperlink URL="http://www.modularweb.net" Target="_blank" />
    </Image>
    <Imag Source="http://cfs.tistory.com/custom/blog/81/819065/skin/images/flash-preview.png"></Image>
    <Imag Source="http://cfs.tistory.com/custom/blog/81/819065/skin/images/piecemaker3.png" Title="Editing made Easy"></Image>
    <Image Source="http://cfs.tistory.com/custom/blog/81/819065/skin/images/video-preview.png"></Image>
  </Contents>
  <Settings ImageWidth="1000" ImageHeight="180" LoaderColor="0x333333" InnerSideColor="0x222222" SideShadowAlpha="0.8" DropShadowAlpha="0.7" DropShadowDistance="25" DropShadowScale="0.95" DropShadowBlurX="40" DropShadowBlurY="4" MenuDistanceX="20" MenuDistanceY="50" MenuColor1="0x999999" MenuColor2="0x333333" MenuColor3="0xFFFFFF" ControlSize="100" ControlDistance="20" ControlColor1="0x222222" ControlColor2="0xFFFFFF" ControlAlpha="0.8" ControlAlphaOver="0.95" ControlsX="450" ControlsY="280&#xD;&#xA;" ControlsAlign="center" TooltipHeight="30" TooltipColor="0x222222" TooltipTextY="5" TooltipTextStyle="P-Italic" TooltipTextColor="0xFFFFFF" TooltipMarginLeft="5" TooltipMarginRight="7" TooltipTextSharpness="50" TooltipTextThickness="-100" InfoWidth="400" InfoBackground="0xFFFFFF" InfoBackgroundAlpha="0.95" InfoMargin="15" InfoSharpness="0" InfoThickness="0" Autoplay="2" FieldOfView="45"></Settings>
  <Transitions>
    <Transition Pieces "9" Time="1.2" Transition="easeInOutBack" Delay="0.1" DepthOffset="300" CubeDistance="30"></Transition>
    <Transition Pieces "15" Time="3" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200" CubeDistance="10"></Transition>
    <Transition Pieces "5" Time="1.3" Transition="easeInOutCubic" Delay="0.1" DepthOffset="500" CubeDistance="50"></Transition>
    <Transition Pieces "9" Time="1.25" Transition="easeInOutBack" Delay="0.1" DepthOffset="900" CubeDistance="5"></Transition>
  </Transitions>
</Piecemaker>
-->

원본파일은 비디오와 플래시도 포함되어있는데 여기서는 제거를 하고 이미지만 삽입했습니다. 그 경로를 수정해줘야하고 포토샵으로 만든 이미지의 폭과 높이도 수정합니다. Autoplay는 하나의 애니메이션이 끝나고 다음으로 넘어가기 전의 지연시간입니다. 여기서는 2초로 설정했습니다. 트랜지션은 애니메이션의 종류와 조각을 설정합니다. Pieces는 조각의 갯수이고 Time은 애니메이션 실행 시간입니다. Transition은 애니메이션의 종류입니다. 메뉴얼에 의하면 아주 다양한 설정을 할 수 있다고 합니다. 

위 xml파일을 수정한 다음 업로드하고 블로그의 스타일도 폭과 높이 등 style.css화면에서 변경해주면 완성입니다. 기타 다른 내용은 수정파일을 참고하세요.

참고: 배너에 동영상을 첨부해서 며칠간 운용했더니 플래시 플러그인이 충돌이 일어나 에러가 납니다. 처음에는 다른 원인인줄 알고 구글검색했는데 정확한 원일규명이 안되다가 생각해보니 동영상을 첨부한 이후로 그런 것 같아서 동영상을 빼고 이미지만으로 올리니 에러가 안납니다. 엉뚱한 플래시 플러그인만 삭제할뻔 했습니다.
저작자 표시 비영리 변경 금지
신고
jinzzassanai

아직 포토샵만 쪼금 이제 배우기시작했지만 다 배워보고싶어하는 ㅠㅠ 머리만 복잡해져요 ㅎㅎ

BlogIcon 베누시안

제가 글을 쉽게 하려고 설명이 길어지는데 어떤지 모르겠네요. 하지만 이 글은 CSS나 html을 좀 아시는분을 대상으로 한 것이라서 어렵죠. 자바스크립트와 플래시는 전혀 몰라도 사용할 수 있습니다.

jinzzassanai

혹시 질문있습니다 댓글승인이라 ㅎㅎ 이건 처음보는것인데궁금하구요 혹

네이버 블러그나 네이버 까페 에 배너형식 간판에도 이런거 스크립트나애니매이션이 적용되나요 궁금해

서여쭤봅니다.

BlogIcon 베누시안

안녕하세요. 댓글 승인은 악의적인 댓글을 방지하고자 하는 차원에서 예전부터 설정해 놓은 것이고요. 이전에 댓글 다실때는 안 나타났었나요? 그리고 네이버나 다른 블로그는 스크립트나 플래시 같은 플러그인 설치가 안됩니다. 자신이 만든 사이트에서는 가능하고 블로그중에서는 티스토리만 가능합니다.

yanagikatsu

안녕하세요... 저도 이 소스 받아서 작업해보다가... 다른건 다 둘째치고
한글입력이 안되서 애먹고 있는데요.. ㅠㅠ
한글입력하는 방법좀 알려주실수 있을까요?
플래시 액션3.0에서 flash.system.System.useCodePage = true; 추가하면 된다고 그래서
해봤는데 안먹히고.. 어떻게 하면 될지 정말 막막하네요;;;;;

소스제작 사이트나 다큐멘트봐도 외국어(한글 및 다른언어) 입력?에 대한 것은 나온게 없으니;;;;;

아시면 알려주셨으면 해요... ㅠㅠ

BlogIcon 베누시안

안녕하세요. 반갑습니다. 어떤부분에서 한글을 적용한다는 것인지 구체적으로 알려주시면 연구해보겠습니다.

yanagikatsu

답변 주셔서.. 감사드려요..
어떤부분이냐면요.. web폴더안에 piecemaker.xml의 image source의 title부분이나
text 부분에 한글을 넣으려구요.
맨 처음 보여지는 이미지는 어차피 이미지니깐 언어는 상관없는데
info 버튼을 눌렀을때 보여지는 내용들은 전부 지금 영어인데 이걸 한글로 바꾸려고 하거든요...
그런데 xml상에서 한글입력 오류에 관한 사항은 전부 거의 다 찾아보고 해봤는데도 안되더라구요..
ㅠㅠ 정 안되면 text부분에 폰트말고 제작한 이미지를 삽입하게 하는것도 가능할까요?
그건 어떻게 해야하는건가요??? xml은 다뤄본적이 손에 꼽을 정도라서.. ㅎㄷㄷㄷ해요...

질문이 알아듣기 힘드셨을수도 있지만... 부탁드립니다... ㅠㅠ

yanagikatsu

앗.. 아직 글 승인받기 전인데.. 해결되었습니다.. ^^* 한글

Piecemaker.as에서 embedfonts를 수정하니깐 읽네요;;;;;;;;;;;;;;;;;;;;;;;;;;
아무튼.... 여기 블로그에서 본것도 도움이 되었어요~~ 감사합니다~

BlogIcon 베누시안

해결되셨다니 다행입니다. 저도 나중에 시간내서 한글화 시키려고 했거든요. 메뉴얼을 보니 폰트를 임베드하라는 내용은 있더군요.

용둥이

안녕하세요. 한글 입력 부분이 해결되었다고는 보이는데 방법을 좀 부탁드립니다.

저도 답글 기달리고 있었는데..ㅠㅠ 해결한 방법좀..

부탁드려요~

BlogIcon 베누시안

안녕하세요. 반갑습니다. 이럴줄 알았으면 그분에게 자세한 설명 부탁드릴걸 그랬습니다. 제가 당장 필요하지 않아서 그냥 넘어갔는데.. 저도 한번 연구해 봐야겠네요.

스스기

안녕하세요, 이번에 웹표준 배우고 있는 학생입니다. 웹표준으로 모바일브로슈어 만드는 것을 배우고 있는데 교수님이 제이쿼리를 알려주셔서 찾아보다가 들렸습니다. 혹시 이거 모바일(아이폰기준)용으로도 사용할 수 있나요??ㅜㅜ 아니면 그냥 웹용인가요?ㅜㅜㅜ

BlogIcon 베누시안

안녕하세요. 이 플러그인은 자바스크립트와 플래시로 작동하므로 모바일용으로 사용이 안됩니다. 순수한 자바스크립트(제이쿼리)로 되어 있는 것만 모바일로 가능합니다.

쿠루

관리자의 승인을 기다리고 있는 댓글입니다

BlogIcon 광이

안녕하세요. 꾸준히 들르며 공부하고 많이 배워가고있는 학생입니다.

혹시 이미지마다 링크를 걸수 있는 방법은 없을까해서요.

그냥 보여주는것보다 사용할수있는 이미지가되면 좋을것같은데...방법이없을까요?이미지에 링크를 걸어 그 페이지로 이동할수있게끔할수없나요??

티스토리 툴바