Tag Archives: 위젯

물결 플래시 소스에 관한 공지

물결 플래시에 관련하여 처리해 드려야 할 메일량이 엄청나게 늘어나 있네요.
바쁘다는 핑계로 보통 한 달 주기로 몰아서 처리해드리고 있었는데, 이토록이나 밀려버리다니
기다려주시는 모든 분들께 죄송하단 말씀 먼저 드립니다.

사실 이렇게 밀리게 된 이유는 기존 소스를 조금 수정 중이었는데, 이게이게 아직 완성이 안 되었습니다.
폰트 임베딩 측면에서 기존의 방법이 상당히 무식한 방법을 쓰고 있고, DP 적인 측면에서의 구성도 구리고, 뭐 이래저래 받은 피드백들도 많고, 기타 등등의 이유로 물결플래시 버젼2.0 을 제작 중에 있었습니다.
폰트 임베딩 방식을 swc 컴포넌트를 사용하는 방식으로 바꾸고, 재사용/확장이 용이하도록 클래스를 분리 구성하고, 입력 글자수에 따라 크기를 자동 조정하도록 하는 기능을 추가하고, 적용을 자동화하는 페이지를 제작하고 등등의 일입니다. 뭐, 맘 먹고 하면 하루 안에 끝날 일들이긴 하지만 미루다미루다 이리찔끔 저리찔끔 하다보니 진행 상황이 이리도 지연 됐습니다.

이렇게 글을 쓰는 이유는, 염치 불구하고,
조금만 더 기다려 달라 부탁하기 위해서입니다.
부탁드려요 -.-.-

002_티스토리메뉴이동.png

< 물결 플래시 > 티스토리 적용법

미루고 미루다 이제야 올립니다.
이 녀석 덕에 자주자주 뿌듯해 하면서도 머리 속에서만 구르고 있는 다른 녀석들에게 우선 순위가 자꾸 밀렸네요.
기존 텍큐 적용법과 크게 다른 점은 없습니다만,
많은 수의 티스토리 유저 분들이 HTML 태그에 경기를 일으키신다는 이야기를 듣고 스샷 좀 찍어봤습니다.
잡설이 길죠?
들어갑니다.


1. 위젯 다운로드 / 압축 해제 / 스크립트 복사

1147572119.zip
스크립트를 제외하곤 기존 파일과 모두 동일합니다.
티스토리는 주소 바뀔 일이 없어 아예 따로 파일을 떼 놔 넣어버렸습니다.
사용자 삽입 이미지압축을 해제하면 요렇게 세 파일이 뜹니다.
script.txt 를 열어 코드를 복사해두세요.


<script language=”javascript”  src=”./images/viewTitle.js” type=”text/javascript”>
</script>
<script language=”javascript”>
showTitle(“./images/”, “viewTitle.swf”, 600, 30, ““, ““, “center”, “0×00000″);
</script>

기다란 설명들 다 필요없고 요것만 복사하셔도 됩니다.
제목의 정렬을 바꾸시려면 center 를 left/right 로 수정하세요.
색상을 바꾸시려면 0×000000 을 수정하세요. (16진수 RGB 입니다)


2. 티스토리 파일 업로드

티스토리 해당 블로그에 로그인 하시면 뜨는 관리자 페이지입니다.

사용자 삽입 이미지스킨-HTML/CSS편집 메뉴를 클릭하세요.

사용자 삽입 이미지요런 창이 뜹니다.
안에 파일 내용은 스킨마다 다를 수 있습니다.
‘파일업로드’ 버튼을 클릭하세요.

사용자 삽입 이미지
눈에 익은 파일업로드 대화상자가 뜨지요?
아까 압축 풀어놓았던 파일들을 찾아 드래그한 후 열기를 클릭합니다.
잘 뒤져보면 images 폴더에 세개의 파일이 업로드 되었을 거에요. 요렇게

사용자 삽입 이미지

3. 스크립트 수정

다시 HTML/CSS 편집 탭을 클릭하고, Ctrl+F 를 누르면 검색 창이 뜹니다.
검색 창에 article_rep_title 을 입력하고 엔터를 누르면 원래의 타이틀 코드가 뜹니다.

사용자 삽입 이미지여기서는

<h2><a href=”“></a></h2>
요 녀석이로군요.
대부분 저런 비슷한 형태니까 찾기 쉬우실 거에요.

찾으신 부분을 아까 복사해 둔 스크립트로 붙여넣기 합니다.
공개/보호/비밀글 마다 따로 서식을 가지고 있는 스킨인 경우 저 작업을 여러번 반복 하셔야 합니다.
다시 Ctrl+F 하셔서 엔터를 누르다보면 나올테니 모두 수정이 됐는지 확인해보세요.

그리고 쭈욱- 내려가면 밑에 ‘저장’ 버튼이 있습니다.
여기서 이거 안 누르시면 적용 된 게 날아가니 주의하세요.


4. 확인

사용자 삽입 이미지예쁘게 적용이 되었네요.
적용하시는 스킨에 따라 정렬과 색상을 바꾸시면 더 이쁘겠지요.
원 글(http://minsangk.com/85) 에 댓글 달아주신 분들 블로그를 둘러보시면 멋지게 적용 된 블로그들이 많으니 참고가 되실 듯 합니다.


나름 쉽게 풀어 쓴다고 썼는데, 쉽게 글 쓰는 데는 영 자신 없어 제대로 설명이 됐는지 궁금합니다.
도움이 되시길 바래요 -.-.-


postscirpt : 스샷을 위해 아이디를 빌려 준 병렬군 감사. (사실 허락 없이 썼음 ㅋ)


09년 2월 23일 수정
 - js 파일에 오류가 있어 앰퍼샌드 이스케이프 문자 처리에 문제가 있었습니다. angle bracket 처리가 안 되는 문제 해결했습니다. 피드백 주신 푸름님 감사합니다. 기존 사용자 분들은 edited1 에 들어있는 js 파일만 기존 파일에 덮어 씌우시면 됩니다.

물결 플래시 타이틀 위젯 [ StreamWave Flash Title Widget ]

위에 보고 계신 녀석이 바로 이 녀석입니다.

제 스스로의 만족치를 거뜬히 넘길 만큼 이쁘게 나와 조심스레 텍스트큐브 스킨 게시판에 올렸었는데, 제 스스로의 예상치를 거뜬히 넘길 만큼 많은 분들께서 관심을 가져주셨습니다. 텍스트큐브 스킨게시판의 글에도 많은 댓글이 달렸고, 제 블로그 링크 글에는 무려 100여개가 넘는 많은 댓글이 달렸네요.

단순히 타이틀만 띄우는 형태에서 텍스트 정렬도 바꿀 수 있고, 색도 변경할 수 있게 되었고, (면봉님 감사합니다) 링크도 걸 수 있게 된 것 (푸룬님, bizbook 님 감사합니다) 다른 분이 만드신 소중한 스킨에 포함 되어 더 많은 분들이 사용 하실 수 있게 된 것 (엔하늘 님 감사합니다) 모두 관심 가져주시고 피드백 주신 많은 분들 덕분입니다.

그리고 사용법에 대한 보다 자세한 매뉴얼 포스트 제작해 주신 더티문라 님도 감사드려요


많은 피드백을 받으며 해결하지 못한 부분이 있었는데, 바로 특수문자 (&, +) 의 처리 문제였습니다. 다른 기호는 괜찮은데 & 와 + 문자는 FlashVars 전달 과정에서 구분자로 쓰이는 바람에 그 뒤에 적힌 모든 제목들이 잘렸던 것이지요. 고민고민 끝에 결국 자바스크립트를 이용해 Percent-Encoding 하는 방식으로 해결 했습니다. 그리고 이왕 자바스크립트에 손 댄 김에, 좀 더 많은 분들이 쉽게 적용 하실 수 있도록 넣는 방식을 조금 더 손 보았습니다.



아래는 새롭게 바꾸어 본 적용 방법입니다.
기존 사용자 분들도 & + 처리를 위해 본 방법으로 수정해주시면 감사하겠습니다.


[#M_새로운 적용법 (보기)|새로운 적용법 (보기)|1. 다운로드 / 압축풀기

1157183336.zip

일단 이 파일을 다운로드 받아 압축을 풀어줍니다.
텍스트큐브 스킨게시판에서 이미 다운 받고 오신 분들은 한번 더 다운 받으실 필요 없습니다.
두 곳에 항상 같은 파일을 올려놓고 있어요.


2. 업로드 하기

계정 사용중이신 분들은 텍스트큐브 설치 폴더에서 적용하고자 하는 스킨이 있는 폴더로 찾아가신 후에 업로드 해주세요. 이건 필수사항은 아니니까 이도저도 귀찮으신 분들은 그냥 계정 루트(보통은 www 나 public_html 이지요?) 에 방금 압축 푼 폴더를 통째로 올려주세요. 단, 올린 경로는 중요하니 어디에 올렸는지 꼭 확인해보셔야 합니다.


3. 스크립트 수정하기

script.txt 파일을 열어보시면 제가 간단히 설명을 달아 놓았는데요.
그 내용을 여기에 옮기면 아래와 같습니다.
<script language="javascript"  src="./viewTitle.js" type="text/javascript">
</script>
<script language="javascript">
showTitle("./", "viewTitle.swf", 600, 30, "", "", "center", "0x00000");
</script>

<!-- 여기서부턴 복사하지 않으셔도 됩니다
// 소스 URL    : 플래시 파일을 업로드 한 주소 (스킨 폴더를 기준으로 한 상대주소)
// 소스 파일명    :  파일명 수정하지 않았다면 필요 없음
// 플래시 타이틀 크기(가로)   :  수정을 권하지 않음
// 플래시 타이틀 크기(세로)   :  수정을 권하지 않음
// 제목 치환자   : 제목 타이틀로 사용하는 경우 수정 필요 없음
// 링크 치환자   : 제목 타이틀로 사용하는 경우 수정 필요 없음
// 텍스트 가로 정렬   : left, center, right 중 택일
// 텍스트 컬러 변경   : 16진수 색상표기법으로 표현함 ( Red = 0xFF0000 ) 기본값: black (0x000000)

위의 스크립트에서 '스킨 주소'라고 된 부분은 꼭 바꿔 주셔야 합니다.
-->
이런 것들에 익숙치 않은 분들이라도, 영어들이 줄줄이 떠 있다 너무 겁먹지 마시고 '스킨주소' 라고 써 있는 부분을 2 에서 적어두신 경로로 수정해주세요. 경로 적으실 때에는 꼭 마지막에 '/' (슬래시) 를 붙여주셔야 합니다.

예를 들면,
minsangk.com 계정에 /skin/lazylog_smoke_msk/flash 경로로 업로드 하신 경우 올바르게 수정된 스크립트는 아래와 같습니다.


<script language="javascript"  src="./flash/viewTitle.js " type="text/javascript">
</script>
<script language="javascript">
showTitle("./flash/, "viewTitle.swf", 600, 30, "", "", "center", "0x00000");
</script>

텍스트의 정렬이나 글씨 색을 수정하고 싶으신 분들은 해당하는 부분을 원하시는 형태로 수정하시면 됩니다.

여기까지 되었다면 수정한 스크립트를 클립보드로 복사해 놓습니다. (Ctrl+C)


4. 스킨 수정하기 (skin.html)

이제 직접 스킨 파일을 열어 수정할 차례입니다.
적용하고자 하는 스킨 파일을 열어 로 검색을 해보세요. (메모장 단축키 Ctrl+F)
앞뒤 태그 잘 확인하시고 넣고자 하는 부분에 붙여넣기 하세요. (Ctrl+V)

그 다음 저장하시고 다시 업로드 하시면 되겠습니다.

텍큐나 티스토리 모두 스킨마다 조금의 차이는 있지만, 공개글/비밀글/보호글을 다르게 출력하는 설정 때문에 [##_article_rep_title##] 을 검색하셨을 때 여러개가 뜰 수 있습니다. 그런 경우 모두를 위에서 복사하신 스크립트로 바꿔주시면 됩니다._M#]

* 티스토리 적용법 바로가기

* 기타 사항

 - 폰트에 포함되지 않은 『』 이런 녀석들은 전부 [] 로 치환되어 표현 됩니다.
 - 일어나 한자 혹은 그 외의 외국어는 전부 빈 네모로 표현이 됩니다. 그와 같은 문자의 사용이 많으신 분들은 사용이 불가능 할 듯 합니다.
 - scriptAccess 를 링크를 위해 always 로 지정해 두었습니다. 개인적인 보안 이슈로 인해 꺼려지시는 분들은 js 파일을 열어 수정하여 사용하세요. (그냥 사용하셔도 물론 별 문제는 없습니다)


적용 중에 문제가 발생했다거나,
기능 추가가 필요하다고 생각하시는 부분이 있다거나,
꼭 이 녀석이 아니더라도 누군가 만들어 주었으면 하는 아이디어가 있다거나,
플래시 소스가 어떻게 생겼나 궁금하시다거나,
현재 제작 중이신 스킨에 적용하려 하신다거나,
그냥 아무 이유 없이 한마디 해야겠다 싶다거나, (ㅋ)

하신 모든 분들은 댓글 남겨주세요.



09년 2월 23일 수정
 - js 파일에 오류가 있어 앰퍼샌드 이스케이프 문자 처리에 문제가 있었습니다. angle bracket 처리가 안 되는 문제 해결했습니다. 피드백 주신 푸름님 감사합니다. 기존 사용자 분들은 edited1 에 들어있는 js 파일만 기존 파일에 덮어 씌우시면 됩니다.