[AS3] 웹페이지에 코드를 이쁘게 보여주는 AScodeViewer

Project/Programming 2007. 9. 13. 06:43

AScodeViewer 1.0 Beta

개인적으로 플래시 코드를 웹상에 올릴 때 하이라이트를 적용하여 편하게 보기 위해서 만들었다. 만들다 보니 플래시 코드뿐만 아니라 다른 코드의 경우도 xml 파일을 수정하는 것으로 적용할 수 있다.

기능적인 요소
기능적인 요소로는 swf에 외부 변수값(코드파일url, 라이라이트 xml, 스타일 xml, selectable) 값을 전달하여 불러들인 xml과 코드, 그리고 코드를 선택 및 복사가 가능하도록 할 것인지를 지정하는 sable 값을 전달하게 된다. 이로서 AScodeViewer.swf 파일에서 코드 하이라이트 및 스타일이 적용된 AScodeViewer를 볼 수 있다.

외부 변수 값을 전달할 때 주의할 점은 크로스도메인 정책에 따라 도메인이 다른 url 경로에 있는 코드나 xml를 불러올 수 없다는 것이다. AScodeViewer.swf 파일이 있는 위치와 같은 도메인 상에 있는 파일을 불러들여야 한다.


사용성에 따른 기능적인 요소로는 오른쪽 하단에 보면 FullScreen mode로 전환할 수 있는 버튼이 있다. 클릭을 할 경우 전체 풀사이즈 화면으로 코드를 볼 수 있는 기능이다.

사용 방법
AScodeViewer을 사용하는 방법은 아래 제공하는 파일을 다운 받아서 사용하고자 하는 계정에 업로드를 하고 아래와 같이 코드를 웹페이지 html상에 넣어주면 된다.

<object width="700" height="400" >
<param name="bgcolor" value="#242424" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="code=TintColor.as&format=as3.xml&style=style_dark.xml&sable=true" />
<param name="movie" value="AScodeViewer.swf" />
<embed src=" AScodeViewer.swf"  flashvars="code=TintColor.as&format=as3.xml&style=style_dark.xml&sable=true" type="application/x-shockwave-flash" allowFullScreen="true" width="700" height="400" bgcolor="#242424" /></embed>
</object>

위에서 보이는 바와 같이 FlashVar에 해당하는 부분의 변수들에 각각의 파일 및 설정 값을 넣어주면 된다. 위 코드의 경우는 swf파일이 있는 같은 폴더 안에 code, format, style 에 해당하는 파일들이 있는 것으로 가정한 것이다.

하이라이트 및 스킨 적용 방법
코드 하이라이트는 플래시 스크립트 에디터로 많이 사용하고 있는 FlashDevelop 프로그램의 language폴더에 있는 xml 데이터를 그대로 사용하였다. FlashDevelop 프로그램을 사용하는 분은 아래 경로에서 사용하고 있는 하이라이트 xml 파일을 취득할 수 있다.

C:\Program Files\FlashDevelop\FirstRun\Settings\Languages

위 경로에서 보면 AS3.xml, AS2.xml, Jscript.xml 등을 볼 수 있는데 AScodeViewer 1.0 Beta에서 지원하는 xml 형태는 AS3.xml, AS2.xml, Jscript.xml, HaXe.xml 이다. 다른 C++ 이나 Java 등의 코드 하이라이트를 사용할 경우에는 위 4개의 파일 중에 아무 파일이나 열어서 해당 언어에서 사용하는 하이라이트 단어들을 등록하고 다른 이름으로 저장하여 사용하면 된다.

AScodeViewer의 스킨 적용은 제공하는 Style_dark.xml 파일이나 style_light.xml 파일을 열어서 해당 부분의 RGB 색상을 변경하여 스킨을 바꿀 수 있다. 아래 이미지를 보면 style.xml 파일에서 지정할 수 있는 부분들을 표시해 놓았다.

사용자 삽입 이미지


아래는 파일로 제공하는 두 가지 스킨을 적용한 예이다. Style_dark.xml 이나 style_light.xml 파일을 수정하여 원하는 색상을 만들어 낼 수 있기 때문에 적용하는 페이지상의 디자인에 맞게 수정하여 사용하면 된다.
왼쪽은 style_dark.xml을 적용한 예이고 오른쪽은 style_light.xml을 적용한 예이다. 왼쪽의 경우 코드 선택이 안되도록 sable = false 값을 적용하였다.


아래 파일을 다운로드 하여 위에서 설명한 대로 원하는 페이지에 적용하면 된다. 블로그 서비스에서는 “외부 멀티미디”어 등에서 youtube 동영상을 임베드 하는 형태로 적용하면 된다. 주의할 점은 위에서 언급한 바와 같이 AScodeViewer.swf 파일이 있는 곳과 불러오는 파일들의 도메인이 같아야 한다는 것이다(같은 도메인 내의 폴더 구분은 상관없다.)

앞으로 버전업의 경우도 FlashDevelop의 기능을 적용할 생각이다. 시간이 허락하는 대로 업데이트 버전을 올려 놓도록 하겠다. 사용하다가 문제점이 있거나 버그 발견 시에는 아래에 댓글로 남겨주시면 많은 도움이 될 것 같다.


AScodeViewer1_0Beta.zip

    

설정

트랙백

댓글

  • 지돌스타 2007.09.13 09:53 ADDR 수정/삭제 답글

    이야~ 아이디어 정말 훌륭하군요~

    • jasu 2007.09.13 15:28 신고 수정/삭제

      감사합니다. ^^ 외국분이 2005년도 경에 작업했던 것이 모티브가 되었습니다.

  • 공씨 2007.09.13 10:12 ADDR 수정/삭제 답글

    >ㅁ< 형님 브라보~ 멋져요~

    • jasu 2007.09.13 15:29 신고 수정/삭제

      고마우이...쿠쿠 사용해보고 문제 있으면 알려주라

  • 뚜기~ 2007.09.13 14:04 ADDR 수정/삭제 답글

    ^-^ 멋지네요~ ㅋ

    • jasu 2007.09.13 15:30 신고 수정/삭제

      감사합니다. ^^ 유용한 자료가 되었으면 좋겠네요

  • 금봉이 2007.09.13 14:53 신고 ADDR 수정/삭제 답글

    너무 멋집니다.. ^^
    제가 SQL파일에 적용하던 중에 커맨트안에 '가 들어가니까 이후 문장이 다 스트링값의 색으로 변경되어 버리더라고요. /* This lock is global, so we can't tell */ 라는 커맨트에서 can't의 '이후가 다 스트링으로 인식해버리더라고요.. can not으로 바꿔버려 해결했지만... 다음 버젼에는 가능하면 수정해 주시면 감사하겠습니다. 혹시 제가 잘못했을지도 모르니 테스트한번 해보시와요.
    멋진 tip을 올려 주셔서 감사드립니당~!

    • jasu 2007.09.13 15:32 신고 수정/삭제

      감사합니다. 확인해 본 결과 ActionScript 코드나 여타 언어에서는 문제가 발생하지 않았는데 sql 코드에서는 언어 구조에서 약간 오류가 있었던 것 같네요 확인하고 수정하였으며 다시 파일을 업로드 하였습니다. 불편하시더라도 다시 다운로드 하셔서 swf 파일만 대체해서 사용하세요...

  • 사노이 2007.09.13 16:01 ADDR 수정/삭제 답글

    멋집니다^^ 언제나 말보다는 행동으로,결과물로 보여주시는게 정말 존경스럽습니다.
    저도 많이 노력해야겠네요^^

    • jasu 2007.09.13 17:30 신고 수정/삭제

      제가 말수가 좀 없어서 오해를 하신거 아닌가 하는 생각이 드네요^^ 아무튼 말씀 고맙습니다.

  • 금봉이 2007.09.13 16:41 신고 ADDR 수정/삭제 답글

    와우~! 빠른 응답속도를 보이시는 JASU님께 다시 한번 존경을 표합니다... ^^;
    고맙습니다.

    • jasu 2007.09.13 17:32 신고 수정/삭제

      ^^ 네... 유용하게 사용하세요...감사합니다.

  • 열이아빠 2007.09.14 08:31 신고 ADDR 수정/삭제 답글

    하루사이에 벌써 버전업까지 되었네요.
    멋진 기능 감사합니다.

    • jasu 2007.09.14 13:15 신고 수정/삭제

      버전업은 아니고 금봉이님께서 sql 코드를 넣었을 때 위와 같은 문제가 있어서 살짝 수정해서 몰래 엎어치기 해놨어요..쿠쿠 감사합니다.

  • fan 2007.10.07 07:08 ADDR 수정/삭제 답글

    너무 좋은데.. as 2.0 버전으로도 만들어주시면 더 좋겠습니다^^

    • jasu 2007.10.07 12:29 신고 수정/삭제

      안녕하세요.. flashDevelop 프로그램폴더에 있는 as2.xml 파일을 사용하시면 as2 버전 highligiht 기능을 사용할 수 있습니다. ^^

  • fan 2007.10.07 18:57 ADDR 수정/삭제 답글

    as2 버전 하이라이트가 아니구요.. AScodeViewe를 as2버전으로 제작하는것을 말씀드린겁니다^^
    다른무비에서의 로딩이 가능하도록 말이죠..^^

    • jasu 2007.10.08 10:01 신고 수정/삭제

      ^^; 요즘은 2.0보다 3.0이 친근한 것 같네요... fan님께서3.0을 접해보시는 것도 나쁘지는 않을 것 같습니다. 2.0으로 다시 제작하기에는 의미가 없는 것 같아서 어려울 것 같네요..^^ 아무튼 감사드립니다.

  • 동강 2007.11.10 04:58 ADDR 수정/삭제 답글

    와우 자기 소스 자료 관리 할때 유용하게 쓰일꺼 같아요, 잘 쓸께요.

    • jasu 2007.11.12 02:47 신고 수정/삭제

      좀더 편하게 만들고 싶었는데 그놈에 크로스도메인 때문에 소스 코드 업로드로 인해서 불편함이 있네요 서버에서 서비스를 한다면 좀더 편해지지 않을까 싶긴 하지만...;;

  • 원강민 2008.03.25 10:03 신고 ADDR 수정/삭제 답글

    http://airdev.tistory.com/226
    AIR로 SWF를 생성해주는 어플을 만들었습니다..트랙백 안걸려서 덧글로^^

    • jasu 2008.03.25 16:21 신고 수정/삭제

      오.. 편하겠네요 ^^ 스킨을 수정 가능한 기능을 추가하면 좋겠네요 ^^

  • 리베하얀 2008.05.09 13:33 ADDR 수정/삭제 답글

    정말 좋네요~
    한번 사용해야 겠습니다
    늘 좋은 정보만 얻고 가네요~

  • seo4234@hanmail.net 2009.02.05 17:18 ADDR 수정/삭제 답글

    한글이 깨져서 나오는건 왜 그런걸 까요?

    • jasu 2009.02.07 12:31 신고 수정/삭제

      제가 한글입력을 안해봤네요 잠시만요

    • jasu 2009.02.07 12:31 신고 수정/삭제

      위 게시물에 한글을 입력 해 봤는데 제대로 나오는것 같네요 아무래도 플래시 소스에서의 문제 보다는 적용한 코드 소스 파일의 인코딩에서 문제가 발생 하는 것 같습니다. 적용한 코드를 메모장으로 열어서 다른 이름으로 저장시 UTF-8로 저장해 보세요

    • seo4234@hanmail.net 2009.02.15 16:05 수정/삭제

      좋은 답변 감사합니다. 다시 한번 해보도록 할게요.

  • Flask 2009.07.03 12:46 신고 ADDR 수정/삭제 답글

    폰트는 바꿀수 없나요? // 그런데 저는 적용이 쉽지 않네요,,,, 티스토리 쓰는데 그냥 컬러값이 #242424인 박스(700x400)만 나오고 '동영상이 로드되지 않음'이라고만 떠요,,ㅠㅠ

    정말 사용하고 싶은데 어떻게 하면 될까요,,,(다운로드 받은 파일과 as파일을 스킨에 업로드 한뒤 html 코드를 html 에디터에 넣은뒤 as파일 이름만 바꿔서 저장했습니다..)

    • jasu 2009.07.05 22:55 신고 수정/삭제

      안녕하세요
      댓글이 좀 늦었네요 폰트는 사용하시는 style xml 데이터 아래에 보시면 폰트 관련 default 설정 노드가 있습니다. Courier New 부분은 원하시는 폰트명으로 바꾸시면 됩니다. 윈도우 설치시 기본으로 들어있는 시스템폰트를 이용하셔야 정상적으로 적용됩니다.

      동영상이 로드되지 않음 이라고 표시되는 것은 swf의 경로가 잘못되어 해당 경로에서 swf파일을 찾을 수 없을 때 방생합니다. swf파일 경로가 제대로 되어 있는지 확인이 필요합니다. 감사합니다.

    • Flask 2009.07.06 12:52 신고 수정/삭제

      답변 감사합니다,,ㅎ
      그런데요, 억지로 swf파일의 경로를 적어줘서 해두었는데 계속 동그라미만 돌아가네요,,,아마 다른 파일들(xml)을 읽어들이지 못하는것 같은데요,,,

      제가 한 방법이 맞는지 말씀해주세요,,ㅠ

      1. 다운로드 받은 파일을 압축을 풀고 티스토리 어드민에 들어간다음, 스킨 바꾸기에서 파일업로드를 눌러 파일들을 업로드 한다. 추가로 내가 작성한 TA.as파일도 업로드 한다. ( 자동으로 경로가 images/파일명 으로 되더군요,, )

      2. 자수님 블로그에 적혀있는 태그를 복사한뒤 글쓰기에서 html에디터로 들어간다음 붙여넣고 TintColor.as -> TA.as(제가 업로드 한것)로 바꿔준다.

      3. 글작성을 완료하고 확인한다 (-> 동영상이 로드되지 않음. 그래서 swf파일을 글에 업로드 한뒤 그 경로를 적어주니 swf파일은 로드되지만, 동그라미만 돌아감,,,)

      아 이거 제가 바보같아서 정말 죄송하네요,,,

    • jasu 2009.07.06 17:05 신고 수정/삭제

      안녕하세요
      제가 설명을 명확하게 해놓지 않은 것 같습니다.
      다른 문제는 없어 보입니다. 다만 FlashVars로 swf 파일에 전달하는 변수들의 값들을 모두 http://를 포함한 절대경로로 지정해 주시면 될것 같습니다. 플래시에서 파일 경로를 탐색할 때 swf가 임베드되어 있는 html파일의 위치에 따라 상대경로를 지정합니다. 샘플에서 작성해 놓은 것은 로컬에서 모든 파일이 한 폴더에 있을 때 가정으로 설명해 놓은 것이니 모든 파일 경로는 http://를 포함하는 절대경로를 지정해 보세요
      감사합니다.

    • Flask 2009.07.07 15:22 신고 수정/삭제

      우...와..... 드디어 성공했어요,,,,ㅠㅠ

      스킨에 업로드된 파일의 겅로를 찾아줘서 적어주면 되는군요! (제 경우는 http://cfs.tistory.com/custom/blog/24/246210/skin/images/ 이거 네요,,,ㅎㅎ)

      아, 정말 잘되요!! 정말 좋은 기능이에욧!! ^^

      답변 정말 감사드립니다!

      // 배경에 줄이 있으면 어떨까요? 그냥 선 말고 한줄씩 격줄로, 드래그 된 모양으로 줄구분이요;;ㅎ,,,,

    • jasu 2009.07.16 20:29 신고 수정/삭제

      라인으로 구분지어 놓으면 보기 편할거 같기는 하네요 ^^ 감사합니다.

  • -_-;; 2009.10.07 19:26 ADDR 수정/삭제 답글

    이런 아예 안되네요... 그냥 검은 화면만나오고..

    • jasu 2009.10.07 21:03 신고 수정/삭제

      안녕하세요~
      플래시가 나오지 않을 경우는 아마도 경로문제일 것 같습니다. swf 파일 경로와 xml, as파일 경로가 제대로 적용되어 있는지 확인해 보시는 것이 좋을 것 같습니다. 안되는 페이지 경로를 보내주시면 확인해 보도록 할께요 감사합니다.

  • -_-;; 2009.10.16 20:26 ADDR 수정/삭제 답글

    그래도 검은 박스만 뜨는데요;;
    스킨에 업로드된 파일 경로를 어떻게 알아내는지...
    주소표시줄 있는거 복사해도 안되는데요;;....-_ㅡ;;

    • jasu 2009.10.18 01:38 신고 수정/삭제

      일단 올리신 임베드 소스와 as파일 경로, xml파일 경로 등을 올려주세요 제가 확인해 보고 문제가 있는 부분을 알려드릴께요

  • 천우철 2010.10.15 10:26 ADDR 수정/삭제 답글

    자수님 안녕하세요 처음뵙겠습니다 ^^
    자료 잘 받아서 블로그에 처음 적용해보았습니다. 너무 이쁘고 쓰기 간편하네요.
    잘쓰겠습니다 공부도 열심히 하겠습니다.
    수고하십시요 ^^

    • jasu 2010.10.18 18:00 신고 수정/삭제

      안녕하세요 ^^ 네 하도 오래전에 올려놓은 스킨이라 현재 티스토리 환경과 잘 맞을지는 모르겠네요. 감사합니다.