매뉴얼 각 아이템들의 상세한 매뉴얼입니다

26 Jul, 2009
Layouts

PremiumXE 조회 수 13325 추천 수 0
추천 비추천 스크랩
pxe_superscreen_full.jpg

headline_feature.gif

PXE Super Screen v2.1은 풀 스크린 백그라운드 기능을 가진 엔터테인먼트성 레이아웃 입니다. 이 레이아웃은 2009년 4월에 프로젝트를 처음 시작했지만 여러 기능들의 난해함 때문에 진행이 보류되었다가 2009년 7월, 이 레이아웃에 사용 된 각종 jQuery 플러그인들이 업데이트 됨에 따라 재진행 된 꽤나 힘들었던 프로젝트 입니다.

위 샘플 페이지는 여러 설정중에 가장 CPU 점유를 많이 차지하는 고성능 설정으로 되어 있으므로 저사양 PC에서는 퍼포먼스가 떨어질 수 있습니다. 퍼포먼스 향상은 이 레이아웃의 여러 기능들을 잘 조합하여 맞출 수 있습니다.

  • 이용자는 플래쉬를 사용하지 않고도 XE 레이아웃을 이용하여 풀 스크린의 인터렉티브한 웹사이트를 구성 할 수 있습니다
  • 백그라운드에서 풀 스크린으로 이용할 이미지들의 삽입이 쉽고 SWF 및 FLV 플레이어의 삽입도 가능합니다
  • 뮤직 플레이어를 사용하여 웹사이트에 손쉽게 음악을 넣을 수 있습니다


headline_install.gif

PXE_superscreen_ent_v2.1.zip의 압축을 풀어 XE의 레이아웃 폴더에 복사합니다. 이제 XE 관리자 페이지로 접속하여 사이트 설정 > 레이아웃에서 생성 버튼을 눌러 PXE 슈퍼사이즈 스크린 레이아웃 v2.1을 선택하여 생성합니다


headline_setting.gif

1. 헤더에 정보 입력하기
example_01.jpg
이 레이아웃에서는 직관적인 RSS Feeds를 위해 jQuery 플러그인을 사용하고 있습니다. 해당 플러그인이 IE7과 IE8에서 제대로 보여지려면 위 그림과 같이 헤더부에 코드를 넣어주어야 합니다.

또한 이 레이아웃에서는 백그라운드에 플래쉬 동영상을 넣거나 혹은 플래쉬 뮤직 플레이어를 사용할 수 있습니다. 이런 플래쉬 오브젝트들을 웹브라우저에서 오류 메세지 없이 사용하기 위해 swobject.js라는 jQuery 플러그인을 사용하고 있습니다. 이 플러그인이 활성화 될 수 있도록 약간의 경로 수정을 해주어야 합니다.

복잡하게 생각하지 말고 아래 코드를 복사해서 헤더 스크립트 부분에 붙입니다. 파란색으로 적힌 레이아웃 경로에는 위 예제 이미지에서 제가 파란색으로 체크해 둔 "경로"라고 적힌 부분을 복사해서 넣어주면 됩니다. 이 레이아웃 경로는 각 이용자마다 XE 설치 폴더에 따라 다르게 출력 될 수도 있으니 반드시 자신의 화면에서 적혀있는 경로를 복사해서 사용하세요(맨 뒤에 슬래쉬가 두개 붙지 않도록 유의할 것).


이로써 PXE Super Screen V2.1 레이아웃을 사용하기 위한 기초 설정이 끝났습니다. 아래에 기술되는 것들은 이용자의 취향에 맞춰 설정하시면 됩니다.



2. 메뉴와 컨텐츠의 디스플레이 구성
example_02.jpg
관리자 페이지에서는 메인메뉴와 컨텐츠의 디스플레이 구성을 선택할 수 있습니다. 이 선택은 사이트가 텍스트 정보 위주이냐 혹은 비쥬얼 정보 위주이냐에 따라 선택적으로 사용합니다.

컨텐츠 숨기지 않음
이 경우는 유저가 메인 메뉴에 위치한 [SHOW MENU]와 [HIDE MENU]를 클릭하면 메인 메뉴바만 토글 됩니다.

컨텐츠 숨김
이 경우는 유저가 [HIDE MENU] 버튼을 클릭하면 웹사이트의 전체 컨텐츠가 사라지고 백그라운드 이미지 혹은 백그라운드 동영상만 보이게 됩니다. 사이트의 컨텐츠를 읽고 있다가 백그라운드에서 흥미있는 이미지나 동영상 장면이 나오면 이 버튼을 클릭하여 잠시 컨텐츠를 사라지게 할 수 있습니다.

[SHOW MENU] 버튼을 누르면 사라졌던 컨텐츠가 다시 나타나며, 위치도 그대로이기 때문에 스크롤바를 내리면서 컨텐츠를 읽었더라도 그 자리에서 다시 나타납니다.



3. 백그라운드 디스플레이 구성
PXE Super Screen 레이아웃의 기본 백그라운드 기능은 풀 스크린 슬라이드 이미지 입니다. 하지만 이미지 슬라이딩 기능 외에도 동영상을 플레이 시킬 수도 있습니다.

슬라이드 이미지 사용
슬라이드 이미지 사용을 선택하면 사용자가 원하는 이미지를 백그라운드에 풀 스크린으로 출력시키면서 슬라이드 쇼로 보여줍니다.

1) 슬라이드 시킬 이미지는 JPG 파일 포맷이어야 컴퓨터 자원을 최소화 할 수 있으며, 사이즈는 모든 이미지가 동일한 것이 좋습니다. 4:3의 비율을 가지도록 640*480, 1024*768, 1280*1024중 하나의 사이즈로 맞추어 images 폴더에 저장합니다.

2) layout.html 파일을 열어 아래의 코드에서 슬라이드 시킬 이미지의 파일명을 맞추어주면 됩니다.


이미지를 추가하려면 아래와 같이 코드를 계속 밑에 줄에 추가해주면 됩니다



동영상 사용
동영상 사용을 선택하면 사용자가 원하는 플래쉬 동영상을 백그라운드에 풀 스크린으로 출력시키면서 슬라이드 쇼로 보여줍니다. 꼭 동영상이 아니어도 됩니다. SWF 포맷의 플래쉬 파일이면 어떤것이든 백그라운드에서 플레이 할 수 있습니다.

1) 플레이 시킬 SWF 파일을 swf 폴더에 저장합니다

2) 관리자 접속 > 사이트 설정 > 레이아웃으로 들어가서 헤더 스크립트에서 아래의 코드를 찾아 저장된 플래쉬 파일명을 맞추어 줍니다




4. 푸터 디스플레이 구성
PXE Super Screen 레이아웃에서는 세분화 된 푸터를 제공하고 있습니다. 우선은 크게 [BGM 컨트롤러 출력]과 [하단메뉴 출력]으로 나뉩니다.

BGM 컨트롤러 출력
example_04.jpg
BGM 컨트롤러 출력을 선택하면 화면 하단에 플래쉬로 구성 된 배경음악 플레이어가 나타납니다. 이 플레이어는 토글 방식으로 처음에는 가려져 있다가, 탭을 클릭하면 플레이어 컨트롤러가 보이는 형식입니다.

이 플레이어는 FLV 파일로 변환 된 MP3 파일을 사용하며, 한 곡만 플레이 할 수 있습니다. 성능 좋은 뮤직플레이어가 주 목적이 아니라 뮤직 플레이어를 사이트에 달 수 있는 공간을 마련하는 것이 레이아웃의 주 목적이기 때문입니다. 이 설명서에서는 MP3 파일을 FLV로 변환하는 방법등에 대해서는 기술하지 않습니다. Adobe Media Encoder를 사용하면 손쉽게 변환 할 수 있습니다. Adobe Media Encoder는 Adobe Flash나 Adobe Premiere를 설치하면 번들로 함께 설치되는 소프트웨어입니다.

1) MP3 파일을 FLV 파일로 변환합니다
2) 변환 된 FLV 파일의 이름을 bgm.flv로 지정하여 swf 폴더에 저장합니다


하단메뉴 출력
example_06.jpg
하단메뉴 출력을 선택하면 화면 하단에 Copyright 정보와 같은 텍스트 메세지와 부수 메뉴들이 출력 됩니다.

1) 하단 메뉴 : 아래 이미지에서 하단 메뉴(bottom_menu)에 지정한 메뉴가 출력됩니다. 이곳에는 텍스트로만 이루어진 메뉴를 위치시킬 것을 권장합니다

2) 하단 광고 메뉴 : 아래 이미지에서 하단 광고 메뉴(bottom_banner)에 지정한 메뉴가 출력됩니다. 이곳에는 이미지로 이루어진 메뉴를 위치시켜 주세요

example_07.gif



headline_tips.gif

고급설정은 레이아웃의 거의 모든 부분을 제어 할 수 있는 방법에 대해 기술합니다. 하지만 이 제어방법은 하드코딩을 필요로 하므로 XE, XHTML, CSS에 대한 지식이 충분한 분들만 사용하시기 바랍니다. 고급설정 없이도 사이트를 충분히 인터렉티브하게 이용 할 수 있으므로 이 부분은 레이아웃 개발에 관심이 있으신 분들이 주로 살펴보시면 됩니다.


1. 레이아웃에 사용된 플러그인들 이해하기
레이아웃을 잘 활용하고 자기의 사이트에 맞게 수정하기 위해서 가장 중요한 부분이 바로 레이아웃에 사용 된 플러그인들이 무엇이며 이것이 어떤 작용을 하는지에 대해 이해하는 것 입니다. 아래는 layout.html의 상단 부분입니다. 이 부분의 코드를 보면서 우리는 레이아웃이 어떤 플러그인을 쓰며 어떤 작용을 하는지 알 수 있습니다.


<!-- 기본 JS 파일 import -->에 명기한 JS 파일들은 레이아웃의 뼈대를 이루게 해주는 중추 플러그인들입니다. 이 파일들중 하나라도 없으면 레이아웃의 형태 자체가 무너지게 됩니다.

<!--%import("../../common/js/jquery.js")-->
XE에서 기본으로 포함시키고 있는 jQuery 라이브러리에 연결시키는 역할

<!--%import("../../common/js/iepngfix_tilebg.js")-->
XE에서 기본으로 포함시키고 있는 IE6용 PNG Hack 파일에 연결시키는 역할. 이것이 연결되어 있으면 IE6에서 먹히지 않는 PNG 이미지가 포함된 DIV등에 class="iePngFix" 클래스를 주면 PNG 이미지가 잘 나타나게 됩니다.

 * 단일 PNG 이미지의 경우의 예시
<img src="./test.png" alt="" class="iePngFix">

* test라는 이름의 DIV가 test2라는 별도의 클래스를 가지고 있으면서 백그라운드 이미지로 PNG 이미지가 사용된 경우의 예시. PNG 이미지의 경로는 CSS 파일에 있다고 가정
<div id="test" class="test2 iePngFix">


<!--%import("js/swfobject.js")-->
이 플러그인은 웹브라우저가 플래쉬 파일을 로딩할 때 생기는 ActiveX 경고문이 나타나지 않도록 해주는 일종의 해킹 파일입니다. 여러분은 종종 어떤 사이트에 들어갔을 때 알수없는 경고문이 계속 뜨는 일을 만나봤을겁니다. 대부분이 이 해킹 파일이 동작하지 않는 상태에서 플래쉬 파일이 로딩될 때 웹브라우저가 경고문을 띄우는 것 입니다. 이 파일은 간단하게 사용하면 간단하고 복잡하게 사용하면 정말 복잡합니다.

이 레이아웃에서는 이미 필요한 만큼의 셋팅이 되어 있으므로 개념만 파악하시기 바랍니다. 그리고 이 파일의 100% 활용 방법은 여기를 클릭해서 알아보세요.

관리자로 접속하여 이 레이아웃의 헤더스크립트에 넣었던 코드를 살펴보세요. 아래에 적힌 코드가 swobject 플러그인을 사용하고 있는 부분입니다. 이 코드들은 대부분 HTML 파일의 header 태그 안에 속하므로 레이아웃의 헤더스크립트 공간에 넣은 것 입니다.

<!-- SWFobject -->
<script type="text/javascript">
    swfobject.embedSWF("레이아웃 경로/swf/music_player.swf", "player", "300", "29", "9.0.0", "레이아웃 경로/swf/expressInstall.swf");
</script>

위의 코드는 아래와 같은 방식으로 배열되어 있습니다.
 <script type="text/javascript">
    swfobject.embedSWF("SWF 파일경로", "SWF 파일이 위치할 DIV의 이름", "SWF 파일의 너비", "SWF 파일의 높이", "Flash Player의 버전", "이건 그냥 무시하세요");
</script>

위와 같이 SWF 파일을 <object> 혹은 <embed> 태그 없이 자바스크립트로 처리하게 됩니다. SWF 파일을 위치시킬 DIV에 이름을 만들어 놓고, 자바스크립트에서는 이 DIV의 이름을 적어서 SWF를 그곳에 위치시키는 방식임을 알면 됩니다. 이 코드를 사용하게 되면 ActiveX 경고문을 만날 일이 없게 됩니다.


이제 동영상 파일을 백그라운드에서 풀스크린으로 재생시키는 조금 고급 설정을 코드를 봅니다. 아래의 코드는 백그라운드에서 플레이되는 동영상을 swfobject를 사용하여 제어하는 코드입니다. 마찬가지로 레이아웃의 헤더스크립트 공간에 넣은 코드입니다.

<script type="text/javascript">
    var flashvars = false;
    var params = {};
    params.wmode = "transparent";
    params.scale = "exactfit";
    var attributes = {};
    swfobject.embedSWF("레이아웃 경로/swf/video.swf", "movie", "100%", "100%", "9.0.0", "레이아웃 경로/swf/expressInstall.swf", flashvars, params, attributes);
</script>

단순한 뮤직 플레이어 컨트롤러보다는 조금 복잡하게 보이지요. 이것은 우리가 그동안 <object>나 <embed> 태그에 사용했던 여러 프로퍼티들을 swobject에 사용하기 위해 코드가 길어진 것입니다. 살펴보면 간단합니다. 잠시 아래의 코드를 보겠습니다.


기존 코드에서 추가 된 첫번째로 뒤에 빨간색으로 쓰여진 부분이 있습니다. 이것은 swfobject.js에서 플래쉬의 <embed>나 <object> 태그에 사용했던 제어속성을 사용하겠다는 정의입니다. 이 부분은 그렇다는 것만 알고 있으면 됩니다. 실질적으로 중요한 코드는 아래와 같습니다.


위의 빨간색 코드들이 바로 플래쉬의 <embed>나 <object>에 사용되었던 속성들을 정의한 부분입니다. 위 설정에서는 플래쉬의 배경을 투명하게 하라는 params.wmode = "transparent"; 와, 플래쉬를 비율에 맞추지 말고 무조건 화면크기에 강제로 맞추라는 params.scale = "exactfit";  파라미터로 구성해 놓았습니다. 일반적으로 이 레이아웃에서는 이 상태로 두고 쓰면 됩니다. 추가적인 플래쉬 파라미터들을 사용하려면 바로 위 코드 부분에 적어준다는 것을 아시면 됩니다.


2. supersized.js 통제하기
이  레이아웃의 중추적인 역할을 하는 백그라운드 풀스크린 효과는 jQuery 플러그인인 supersized를 사용하고 있습니다. 이 플러그인은 현재 버전 2까지 나와있어서 이 레이아웃에서 사용하고 있는 기능 외에도 몇가지 추가기능(앞뒤 사진 다시보기 등)이 있지만, 여러 테스트 결과 버전 2는 심각한 CPU 점유율로 중,저사양 유저들은 메뉴가 거의 열리지 않을 정도의 퍼포먼스를 보여주고 있습니다.

반대로 버전 1의 경우는 너무 개발 프로토타입이라 FadeIn, Out 기능 조차도 없는 원형의 모습을 띄고 있습니다. 그래서 이 레이아웃에서는 버전 1에 버전 2의 코드를 섞어 각종 효과를 살리고 CPU 점유율을 낮추는 커스터마이징을 한 PXE만의 supersized 플러그인을 사용하고 있습니다. 따라서 supersized 웹사이트에서 배포하고 있는 버전 1과 버전 2를 따로 다운로드 받아 사용하시는 일이 없길 바랍니다.


위의 소스는 js/global.js 파일에 위치하고 있습니다. startwidth:4와 startheight:3은 백그라운드 이미지의 비율입니다. 이것은 수정 할 필요가 없습니다.

만일 백그라운 이미지를 슬라이드쇼로 설정하지 않고 단일 이미지를 백그라운드로 사용하고 싶다면 slideshow: 1을 slideshow: 0으로 변경하세요. 그러면 layout.html에 위치한 슬라이드쇼 이미지들 중 가장 상단에 위치시켜 놓은 이미지만 보여집니다.

slideinterval: 15000은 현재 이미지가 화면에 얼마동안 보여질지를 설정합니다. 15000은 15초입니다. 5초로 바꾸고 싶다면 5000이 됩니다.

만일 Fade In, Out의 시간까지 변경하고 싶다면? 이것은 플러그인 파일 자체의 소스를 만집니다. js/supersized.js를 열고 아래의 코드를 살펴봅니다.


2000이라는 수치가 바로 페이드 인,아웃의 속도입니다. 현재의 2000이라는 속도는 이미지가 사라지거나 나타나는 속도가 총 2초라는 뜻 입니다. 100은 1초, 10000은 10초가 됩니다.

headline_alert.gif
  • 이 레이아웃은 XE의 모든 버전에서 작동합니다
  • 이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera 그리고 Safari에서 테스트 되었습니다
  • IE6에서는 창의 크기가 변경 될 때 일부 레이어가 브라우저의 스크롤바 위로 올라오는 현상이 있습니다.


headline_buy.gif
  • 비영리 라이센스 : 40,000원
  • 영리 라이센스 : 450,000원
라이센스 구입을 원하시는 분께서는 아래의 계좌로 비용을 입금 하신 후, clubnb2@naver.com으로 입금확인 메일을 보내주세요. 메일에는 본인 아이디, 입금자명, 스킨명, 라이센스 형태 4가지를 꼭 기재해 주셔야 합니다. 비용 지불이 확인되면 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

PayPal을 이용해 결제를 원하시는 해외 이용자분께서는 위의 4가지 항목에 추가로 자신의 PayPal 이메일 주소를 함께 기입하시면 Request Money로 청구메일이 가게 됩니다. 입금이 확인되면 마찬가지로 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

위 이메일 주소로는 일체 문의내용을 받지 않습니다. 별도의 문의사항이 있으신 경우에는 문의사항 코너를 이용해 주시기 바랍니다.

 국민은행 036102-04-168370 정현화

첨부
엮인글 :
http://www.premiumxe.com/15350/333/trackback
목록 신고
profile

가네샤

July 27, 2009

와우~~
멋지네요..^^*

XE, XHTML, CSS에 대한 지식이 충분한 분들만 사용하시기 바랍니다.

이 부분이 걸리네요...ㅠㅠ

쩝..

그렇게 저 사양 컴터가 아닌데..

백그라운드 영상이랑 음악은 금방 재생 되는데..

메뉴 활성화가 좀 늦네요..^^*
profile

WTA

July 27, 2009

원래 동영상 재생은 본래 기능 외 추가적으로 넣은 것이라 리소스를 많이 먹습니다. 게다가 제가 동영상에 임의로 주사선을 넣었는데 이 주사선 효과가 디스플레이 자원을 엄청 먹어서 일반 동영상에 몇배는 버벅거리게 만드네요^^ 일반 동영상은 자연스럽게 도니까 신경 안써도 될듯 합니다
profile

kgb

July 28, 2009

현화님 메일 확인해주세요.
profile

WTA

July 28, 2009

kgb님 이메일 도착한 것 없는데요^^;
profile

가네샤

July 29, 2009

현화님 이 레이아웃 동영상 부분 flv 도 지원 할수잇는 방법은 없나요.??
profile

WTA

July 29, 2009

FLV 자체가 플레이어 콤포넌트를 필요로하기 때문에 SWF에서 FLV를 불러들여서 사용하는 것 입니다. 샘플로 들어가 있는 SWF도 FLV의 주소를 불러들여서 플레이 하는 방식입니다.

직접 FLV 파일을 돌릴 순 없지요. FLV 자체가 플레이어의 역할을 하지 않으니까요^^
profile

가네샤

July 29, 2009

fla파일을 소스를 공개 하여 주실수 있는지요.. ^_^*

꾸벅..^^*
profile

WTA

July 29, 2009

제가 사용한 플래쉬 파일에는 동영상 주소가 있기 때문에 안되고, 네이버에서 "플래쉬에 동영상 불러오기" 치시면 수두룩 나온답니다 ㅋ
profile

가네샤

July 29, 2009

네.. 해봐야죠..ㅎ.ㅎ;; ^^*
profile

깜지

July 30, 2009

고급설정 방법 부탁드립니다~~~
profile

WTA

July 30, 2009

벌써 고급설정을T_T 네 오늘부터 올라갑니다 그럼
profile

가네샤

July 30, 2009

아..
동영상 용량 때문에 링크 방식으로 해야겟는데..
어렵네요..ㅠㅠ 쩝..

현화님 test.flv 링크 주소는 알기 쉬운데요..ㅋㅋ

링크 주소만 바꿔 쓸게요..ㅋㅋ 아님 링크 주소 지워서..ㅠㅠ

원본 좀 공개 해 주세용...^^*
profile

WTA

July 30, 2009

네 알겠습니다 ㅋ 그럼 IE8에서 약간 삐끗한 코드 있는 것만 고치고 다시 재업로드 해놓겠습니다. 다시 올라간 파일의 버전은 2.11이 될겁니다.
profile

가네샤

July 30, 2009

오~~ 감쏴~~ ^*^;; 괜히 귀찬으신건 아니신지 모르겟네요.ㅋㅋ
profile

neokey

August 03, 2009

죄송한데 배경음악 누구꺼죠?????

너무 좋네요
profile

WTA

August 03, 2009

이 노래보다 더 예술인 노래가 있었는데 찾으려니 갑자기 그 음악을 내리고 이게 올라가는 바람에 대타가 됐네요. 워낙 하우스는 잘 안듣는 편인데 디자인이 하우스로 가는 바람에 넣은 곡이죠.

http://www.4shared.com/file/112461473/e5871a96/01-badura-the_game__eric_destler_radio_edit_.html?s=1
profile

neo

August 04, 2009

정말 감사드립니다. 너무 좋아서 제 갤러리홈에 배경음악으로 넣었어요...^^; 혹시 이런류의 음악중...추천해 주실 곡이 있으신지요? 더 예술인 노래를 알고 싶네요...^^;
홈페이지 너무 멋져요..즐겨찾기 하고 자주오겠습니다.
profile

문의자

August 03, 2009

게시판은 어떻게 표현되는지 엄청 궁금하군요
profile

WTA

August 03, 2009

게시판은 우측 영역에 나타나게 되는데, 보드 모듈 스킨의 모양에 따라 달라지겠지요?
profile

문의자

August 07, 2009

일단 답변 감사 드립니다.
진정, 꼭 구입하고자 하는 .. 맘에서 말씀 여쭙습니다
게시판 폭이 어떻게 되는지..?
우측에 있는 여러사진 있는 공간에 게시판이 들어서는지요?
너무 궁금합니다.
바쁘신대 죄송합니다만, 말씀 좀 해주시면 감사 드리겠습니다.
profile

WTA

August 07, 2009

게시판은 말씀대로 우측에 사진이 있는 공간에 표시됩니다. 본래 블로그 용도로 사용되기 위해 만들어진 레이아웃이기 때문에 게시판 폭이 좁습니다. 우측 공간의 폭을 넓히는 등의 작업은 직접 코드를 수정해야 합니다
profile

깜지

August 04, 2009

메뉴가 펼쳐진 상태로 고정시키는 방법 부탁드리겠습니다.

메인페이지에서 백그라운드 동영상이 플레이되는 도중에 메뉴가 펼쳐지게 하는 방법도 궁금하네요

부탁드리겠습니다~~
profile

WTA

August 04, 2009

그것은 너무나 많은 경우의 수를 다 다뤄야 하는 것이라 모든 사람의 입맛에 맞출수가 없어서 공식 메뉴얼에서는 뺀 내용입니다 깜지님. global_show.js, global_hide.js와 CSS 파일 3개나 건드려야 자기 입맛에 맞는 환경을 만들 수 있습니다.

제가 다 알려드리기는 힘들고 제일 필요하신 부분 1개만 말씀해주시면 방법을 알려드릴테니 나머지는 응용해서 한번 해보세요
profile

깜지

August 04, 2009

영상플레이 도중에 펼치지게하는 방법이 궁금합니다.
그방법만 알면 나머지도 알것같습니다^^
profile

WTA

August 04, 2009

영상플레이 도중이라는 의미를 좀 더 자세히 적어주실래요? 현재는 컨텐츠 감추지 않음으로 해도 메뉴는 사라지게 되어 있는데, 이 메뉴까지 페이지 열리자마자 같이 나타났으면 하시는건가요?
profile

깜지

August 04, 2009

바쁘실텐데 죄송하네요
페이지 이동을 할때마다 메뉴가 닫혀버리니 여간 불편한게 아닙니다

영상플레이 도중이라는 의미는 처음 사이트에 접속했을때 영상플레이가 끝나도 메뉴는 닫혀진 상태로 있는데 플레이가 끝나거나 아니면 중도에 펼쳐지게 되면 좋겠고
다른 서브페이지로 들어갈때는 메뉴가 펼쳐진 상태로 있었으면 좋겠습니다.
페이지 이동할때마다 메뉴를 펼쳐야된다는게 너무 불편합니다.
profile

WTA

August 05, 2009

음 일단 영상 플레이가 되다가 어느정도 시간이 지나면 펼쳐지는 그런 것은 인터벌 구조가 있어야해서 힘듭니다. 그냥 페이지가 열리면 메뉴가 그냥 나와있는 상태로 있던가 혹은 곧바로 왼편에서 나타나는 식이 되겠군요.

페이지가 이동되도 어차피 이동하자마자 메뉴 누를 사람은 없으니 페이지가 새로 열리면 곧바로 왼편에서 나타나는 방법을 알려드리겠습니다. 조금후에 포럼 게시판에서 뵈요
profile

WTA

August 05, 2009

생각해보니 깜지님 말씀대로 이것이 꽤 불편할거라는 생각이 들어서 업데이트 시켰습니다. 다운로드 코너에서 확인해주세요
profile

깜지

August 05, 2009

한가지더 여쭤보겠습니다.
백그라운드 음악과 영상을 바꾸려고 작업 중인데 서버에 flv파일을 올려놓고
(동영상 불러오기 형식으로 말입니다) 처음에 잠이 나오는 듯 하다가 멈춰버립니다.
bgm도 mp3를 flv로 만들어서 경로에 맞게 올리면 영상과 마찬가지로 처음에 잠시나오다 끊어져버리네요
샘플로 들어있던 bgm파일로 교체하면 다시 잘나오는데 원인을 모르겠습니다.
서버쪽 문제인거 같은데 혹시 해결방법을 아시는지 여쭤봅니다.

그럼 수고하십시오

ps.업데이트하신 레이아웃 css파일이 잘못된거 같습니다.
확인부탁드립니다.
profile

WTA

August 05, 2009

다시한번 받아보시겠어요? 혹시 이번에 또 잘못된 부분이 있는 것 같으면 스크린샷 한번 올려주세요
profile

깜지

August 05, 2009

css파일에 /* Main Menu (Navigation) <- 이전파일과 비교해서 이부분이 빠진거 같은데 빠져도 상관없는 부분인가요?

업데이트 후에 메뉴가 왼쪽으로 쏠려서 세로로 나열되어 나오길래 이전파일에서 저부분을 복사해서 붙여넣으니 제대로 나오네요
그리고 메뉴 펼치기 감추기 버튼도 반대로(메뉴숨기지않음 옵션에서) 나오길래 이미지 수정해서 바꿔놓았습니다.
그러니 잘 동작하네요
profile

WTA

August 05, 2009

으음 뭔가 꼬인거 같은 생각이 드네요. 제가 테스트판과 배포판을 서로 따로 떨어져서 관리하는데, 테스트판에서 미리 업데이트 시켜놓은 것들이 이번에 함께 딸려들어가거나 첨삭 된것 같습니다. 혼란드려서 정말 죄송합니다.
profile

id: 매직

August 20, 2009

추천
1
비추천
0
안녕하세요~ ^^ 나로호 발사실패로 우울하시죠? ^^ㅋㅋ

이 스킨의 동영상 플레이어 video.swf 파일의 contentPath = "주소"가 현재 외부사이트로
되어있는데요 이 주소를 자신의 사이트 swf폴더의 XXX.flv 파일로 고정, 지정해주실 수 있나요?

사용자는 원하는 영상을 flv 파일로 만들어 넣기만 하면 해당 영상이 플레이 되게 말이죠.. ^^

파일을 받아 처리하면 좋겠는데 방법이 적절치 않다면 위 방법은 어떨까요? ^^
profile

PremiumXE

August 26, 2009

음 무슨 말씀인지 십분 이해가 갑니다. 독립군님을 비롯해서 많은 분들이 레이아웃에 사용 된 샘플의 원본을 원하시는 것을 또한 잘 압니다. 하지만 한가지 알아주셔야 할 점은, 샘플은 샘플일 뿐이라는 부분입니다.

레이아웃에 사용된 여러 샘플들은 단순히 이용자에게 어떤 형식으로 이용 될 수 있다라는 영감을 주기 위한 것 뿐이지 그것이 레이아웃 자체의 기능 혹은 레이아웃에서 공식적으로 사용하는 소스가 아니라는 점 입니다. 만일 이러한 부분을 감안해 주지 않으시면 저는 레이아웃이 아닌 레이아웃 외적인 부분을 만드는데 더 시간을 많이 소요해야하고 이런 것들에 대한 질문 답변까지 모두 처리해야 하는 배보다 배꼽이 더 큰 상황이 옵니다.(지금도 그렇고요^^)

그냥 단순히 소스를 배포하기만 하면 되는데 뭐가 어렵냐고 생각 할 수 있지만, 배포를 하기 시작하면 그 소스를 또 어떻게 응용하고 어떻게 커스터마이징 해야하는지등의 대한 질문들이 쏟아지게 되며, 질문에 답을 하지 않아도 되지만 안하게 되면 무책임하게 인식되어 버린답니다.

슈퍼스크린의 경우는 본래 제작의도가 슬라이드 이미지였고 플래쉬 동영상은 기획 의도에도 없던 기능이었습니다. 하지만 무리하게라도 플래쉬 동영상을 사용하면 가능은 하다라는 의미로 넣었던 것이 지금은 슈퍼스크린 레이아웃의 가장 주된 기능이라고 여겨지고 있습니다. 사실 백그라운드로 플래쉬 동영상을 jQuery와 같은 프레임워크등과 함께 돌리는 것 자체가 지금 오버 스펙이거든요.

결국 이용자분들께 영감을 드리려고 만든 샘플이 오히려 더 많은 질문을 받게 되고, 질문 자체가 간단하면 다행스럽겠지만 질문 하나 처리하려면 3-4시간을 꼬박 분석해서 대답을 해야하는 경우가 태반입니다.(요새 FLV 무한 반복 알려달라시는 분들이 계신데 저도 이거 스크립트 알아내려고 이틀 밤새고 못찾았습니다-_-.;; 결국은 이런거 찾다가 볼일 다 보게 되는거죠 ㅋ)

예를들면 독립군님도 "아몰레드 무비 만드는 방법이라도 자세히 알려주시면 고맙겠습니다"라고 여쭤주셨는데요^^ 사실 아몰레드 무비 만드는 방법 쓰는 것 자체가 레이아웃 하나 만들 시간이 들 정도로 분량이 많답니다.

FLV 연결, 주사선 확대 축소 되지 않고 유지시키기, 백그라운드 플래쉬 자동 확대 축소, 동영상 절대비율로 설정하기 등 죄다 액션 스크립트로서 하나하나 뜯어보면 물음 투성이 샘플이랍니다. 이 직업을 10년 넘게 하는 저도 이 샘플을 만드는데 3일이 넘게 걸리고 자문을 구하는데만 몇사람을 거쳤습니다.

결국 이런 샘플이 배포되면 레이아웃 본체에 대한 지원보다는 샘플들에 질의응답에 모든 시간을 다 할애해야 하기 때문에 굳이 소스는 잘 배포를 하지 않고 있는 것이랍니다.

지금 생각으로서는 샘플 소스에 대한 지원은 확실히 짚어두고 일체의 지원을 안하는 것으로 생각을 하고 있습니다. 다른 스킨 대행업체에 제가 스킨을 조금씩 올리면서 파는 경우라면 좀 더 여러분들과 많은 정보의 공유를 할 수 있겠지만 지금은 혼자의 몸으로 빠른 시간에 좋은 스킨들을 많이 만들어야 하는 압박하에서는 제가 아무래도 여러분께 양해를 구하는 상황이 될 것 같습니다T_T
profile

데미안

September 05, 2009

배경 이미지 추가를 꼭 layout.html을 편집해서 해야 하나요? XE의 레이아웃 편집 기능에서 직접 처리하고 싶은데, 아무리 수정해도 원래 layout으로 돌아와 있습니다만..
profile

PremiumXE

September 05, 2009

레이아웃이 저장 안되는 경우에는 아래의 주소에서 문제를 해결하시면 됩니다
http://www.premiumxe.com/download_superscreen
profile

윌로우피페

September 15, 2009

수퍼 스크린 레이아웃 + 보드프로2 함께 사용시 사이트가 더 느려지네요...
휴... 수퍼스크린으로 커뮤니티 운영하기엔 정말 무리인가요 ㅜㅜ
profile

윌로우피페

January 07, 2010

2.4B 패치는 언제 나오나요 아직전인가요 ..아니면 벌써 나왔나요?
List of Articles

Layouts PXE Platinum Public [17]

PXE Platinum Public은 백금 질감을 테마로 한 레이아웃 입니다. 디자인이 외국 트랜드를 많이 따랐기 때문에 한글이 많이 사용되는 일반 국내 사이트보다는 개인 포트폴리오나 엔터테인먼트 성향이 강한 분야에 사용하기 ...

Modules PXE Member Pro 2

PXE Member Pro 2는 기존 버전 1의 내부 구조 특히 CSS 부분이 PXE Board Pro 2와 호환을 하도록 변경되었습니다. 외형적인 변경은 거의 없으나 내부 CSS Framework가 변경되었기 때문에 새로운 컬러셋의 추가가 편리...

Modules PXE Board Pro 2 [27]

PXE Board Pro 2는 XE 1.2.4에서 추가로 제공된 XE Official Skin의 기능과 디자인을 강화한 PXE Board Pro 1의 업그레이드 버전입니다. PXE Board Pro 2는 현재 보고 계시는 페이지에도 적용되어 있으며 Premium...

Widgets Message XE Naver White Skin

이 위젯은 SMS, LMS등의 문자를 전송해주는 모듈인 Message XE의 네이버 스타일 컬러셋 Naver White 입니다. 이 위젯을 사용하면 Message XE의 기본 스킨을 Naver White로 변경 할 수 있습니다. 자세한 내용 및 다운로...

Plugin Packages PXE Basic Plugin [3]

PXE Basic Plugin은 XE에서 새로 배포한 레이아웃 스킨 XE Official Ver.2에 사용된 로그인 Form과 통합 검색창을 기존의 모든 레이아웃에 쉽게 적용시키기 위해 분리한 플러그인입니다. 획기적인 것은 아니지만 Premiumxe...

Plugin Packages PXE BGM Plugin [1]

PXE BGM Plug-In은 PXE Super Screen에 사용된 플래쉬 플레이어를 다른 스킨들에서 사용할 수 있는 플러그인입니다. 처음에는 하단에 숨겨져 있다가 콘트롤 판넬을 클릭하면 위로 조금 떠올라서 재생, 일시정지, 되감기, ...

Widgets PXE iPhone Widget [1]

PXE iPhone Widget은 카테고리(분류 출력기) 위젯입니다. 이 위젯은 비단 PXE Xesta 2 스킨 뿐만이 아니라 다른 위젯과 마찬가지로 어떤 레이아웃 및 스킨에서도 독립적으로 사용할 수 있습니다. iPod Drilldown & ...

  • WTA
  • 2009-08-02
  • 조회 수 9681

Modules PXE Xesta 2 [1]

PXE Xesta 2는 XE의 블로그 모듈인 TexTyle용 스킨입니다(레이아웃 스킨과는 다른 TexTyle 전용 스킨임). 사용자의 XE에 TexTyle 모듈이 설치되어 있다면 여러분은 조금 더 깔끔하게 정리 된 이 스킨을 이용하여 멋진 ...

Layouts PXE Super Screen v2.1 [38]

PXE Super Screen v2.1은 풀 스크린 백그라운드 기능을 가진 엔터테인먼트성 레이아웃 입니다. 이 레이아웃은 2009년 4월에 프로젝트를 처음 시작했지만 여러 기능들의 난해함 때문에 진행이 보류되었다가 2009년 7월, 이 레...

Layouts PXE Black Plain [14]

PXE Black Plain은, PXE Candy Shop에서 사용 된 이용자 설정 다단 구성 방식을 조금 더 확장시켜 유연성 부분을 강조한 레이아웃 입니다. 이 레이아웃을 사용하면 XE의 FaceOff 레이아웃과 거의 동일한 수준의 사이트...

  • WTA
  • 2009-07-11
  • 조회 수 8415
목록
쓰기
 
오픈아이디