아시다시피 며칠 전 칼리토님께서 [페글 나이츠]를 스토리베리로 리뷰하셨는데, 그 후 스토리베리 라운지가...

일단 스토리베리로 만든 컨텐츠 보시고.


나름대로 잘 만들었다고 칭찬받았다. 헤헷. >.<

여기서 끝내면 아쉬우니, 간단하게 위 컨텐츠 제작에 사용된 명령 / 기법 설명.
아래 명령어는 고급 에디터 '태그' 메뉴에서 더블 클릭으로 불러올 수 있습니다.


---------------------------------


1. 씬 나누기.

어지간하면 0번 씬에서 모두 만들어도 됩니다. 하지만 씬 우측 상단에 붙은 '미리보기'는 '씬별로 미리보기'를 시켜주는 것. (스토리베리 개발진은 구분하는 단어를 써두실 것을 권장.) 그래서 좀 길거 같으면, 씬을 나누면서 가는 것도 좋습니다. 0번부터 3번까지 4개의 씬을 사용했고, 좌측 메뉴 중 맨 위에 있는 '씬'에서 -> 맨 아래 있는 '추가'를 눌러 씬을 추가했습니다.

주의사항. 0번 씬이 끝날 때 1번 씬으로 자동으로 넘어가지 않는데요. 다음 명령어를 넣으면 1번 씬으로 날아갑니다. (숫자만 바꾸면 다른 씬 이동 가능. 선택지 등에서 씬 포탈 태우는 것도 물론 가능.)

<jump scene="1"/>


2. 이미지 보이기 / 가리기.

이미지를 보이고 가리는 기능은, 들어가서 메뉴의 기본 설명만 보셔도 아실 수 있는데, 그래도 적어봅니다.

이게 이미지 보이기.

<image id="img_0_1" source="라운지.jpg" x="0" y="-3" width="479" height="304"/>

x점 y점 시작, 크기는 width height. 사실 이건 좌측 메뉴 중, '미디어'의 '이미지'에서 올려넣고 빼면 조절해주는 창이 뜨기 때문에, 굳이 아실 필요는 없지만... 아직까지 일단 올린걸 조절하는 기능은 없기 때문에, x점 y점 조절 숫자는 써주실 필요가 있습니다. (원 크기 500 * 400 그림을 400 * 300으로 보여주는 것도 width height 숫자 조절하면 가능!) image id라는 것은, 노출된 그림에 지정된 id로써, 아래에서 설명할 다른 부분들에서 주로 쓰입니다.

노출한 그림 가리기는 다음 명령어.

<hide id="img_0_1"/>

위에서 지정한 id를 넣으면 됩니다. 쉽죠?

한가지 특이점이 있다면, 플래시의 특성상 그림 지우고 넣는 과정에 깜빡이가 일어납니다. 같은 크기의 그림을 넣는다면 나름대로 꽁수를 쓸 수가 있는데요. 나중의 그림을 먼저 노출한 후, 먼저의 그림을 지우는 식으로 하면 됩니다. 이번에는 크기가 다른 것들을 쓰느라 그 기법을 쓰지 못했는데... 테크데모격인 컨텐츠는 여기서 보시면 됩니다.


3. 그림 움직이기.

위 내용들은 들어가보시면 대충 아실 수 있는 것들이고, 여기부터를 고급기능이라 오해(?)하실 수 있는데요. 알고보면 생각보다 쉽습니다. 원하는 위치를 정확히 잡기가 힘들어 시행착오를 겪어야 할 뿐이죠. (이 부분 쉽게 하는 것도 스토리베리 개발자분들은 염두를!)

<move target="img_0_5" duration="1000" xTo="50" yTo="69"/>

그림의 ID는 올릴때부터 생기는 것이고, img_0_5도 그렇게 생긴거니 통과. 2번에서 얘기한 이미지 보이기에서 지정됩니다.

duration은 지속시간. 즉 움직이는데 걸리는 총 시간을 뜻합니다. 단위는 ms로써 1000 = 1초. 즉 1초에 걸쳐 움직인다는 뜻입니다. 다른 명령어에서도 항상 쓰고 있으니, 알아두시면 좋습니다.

x점과 y점은, 시작점은 애초부터 적지 않습니다. 그림을 원래 올리면서 지정된 자리, 혹시 이미 움직였다면 움직여서 가 있던 자리에서 시작됩니다. 즉 그림 이동의 시작점은 여기서 전혀 지정하지 않습니다.

이동의 도착점이 xTo와 yTo로 지정됩니다. 단지 에디터에서 직관적으로 볼 수 있는 부분 미리보기가 아직은 없기 때문에, 노가다를 좀 해야 한다는게 아쉬운데요. 칼처럼 잡고 하실게 아니면, 대충 눈대중으로 어림잡을 수 있습니다.

그리고 이번에는 쓰지 않았지만, 중요한 팁 하나. 화면보다 훨씬 큰 그림을 넣고, 화면 안 쪽 & 바깥 쪽으로 이동이 가능합니다. 화면을 480 * 360으로 잡았어도, 그보다 훨씬 큰 그림인 800 * 600 같은걸 넣을 수 있어요. 또한 화면 안쪽인 x = 200 / y = 200 정도가 아니라, 화면 바깥쪽인 x = - 50 / y = - 39 같은 음수도 지정 가능. 화면 밖에 있던 것을 안으로 끌어다 보여줄 수도 있고, 안의 것을 밖으로 스크롤해 사라지게 하는 것도 가능합니다. 이걸 잘 쓴게 Miniberry님이 2자면담 이벤트 참여를 위해 만든 [아자다(Azada)] 리뷰인데요. 맨 마지막 연출을 영화 크레딧 올라가는 것 처럼 했는데, 이게 큰 그림을 만들어 밖에서 안으로 스크롤하는 방식을 사용한 것입니다. 이렇게 여러가지 응용이 가능하죠.


4. 그림 fade in / fade out.

'스토리 포토'에서는 기본 장착이지만, '고급 에디터'에서는 별도 명령어로 지정해줘야 합니다. 단 fade in / fade out의 속도를 조절 가능하죠.

<image id="img_0_6" source="스토리베리마크.jpg" x="232" y="63" width="221" height="162"/>
<fade target="img_0_6" alphaFrom="0" alphaTo="1" duration="1000"/>

그림 ID나 duration은 아시겠죠? 다른 부분은 alphaFrom / alphaTo인데요. 0이 공백 / 1이 꽉찬 그림입니다. 즉 공백으로부터 꽉찬 그림까지, 1000ms(=1초) 동안 fade in 하는 겁니다. 0과 1의 숫자를 반대로 하면, fade out이 되는 거죠.

오히려 이 명령어는, 그림을 노출하거나 / 움직이는 것과 달리, 별도의 미리보기의 필요성이 비교적 적습니다. 물론 좀 더 정밀하게 조절하려면 노가다를 해야겠지만, 대충 duration = 1000 지정하면 되거든요. (그래도 좀 더 편하고 싶으니, 스토리베리 개발자 분들은 분발을!)


5. 그림 확대 / 축소.

이 기능은 이번에는 쓰지 않았고, 슈퍼피그민RPG때 썼던 겁니다. (Venture Arctic attack!)

<resize target="img_3_0" duration="1000" widthTo="1280" heightTo="960"/>
<move target="img_3_0" duration="1000" xTo="-4" yTo="-400"/>

아래 move 명령어는, 당시 흰물개(...가 아니었지 -_-) 그림 키운 후 움직였던 효과라 같이 쓴 거고, 확대는 resize만으로 됩니다. duration 지속기간 아실테고, widthTo / HeightTo가 얼마나 키울거냐는 거. 물론 숫자를 작게하면 줄이는 것도 가능합니다. (역시나 쉽게 만들고 싶으니 스토리... 아 이제 그만.)


-----------------------------


제가 위의 컨텐츠 만들면서 쓴, 스토리베리 고급 에디터의 기능 몇 개를 설명해봤습니다. 솔직히 생각보다 쉬워요. 문제는 그게 쉽다는 사실을 전혀 알려주지 못하고 있다는 것입니다. (노가다를 줄여주지 못한다는 것도 아쉽지만.)

저 명령어들을 쓰면, 그림 보여주고 / 지우고 / 움직이고 / fade in & out 하고 / 확대 & 축소 하는거, 누구나 쉽게 할 수 있습니다. 스토리베리 고급 에디터, 생각보다 쉬워요.

그러니까...


P.S. : 우리 구지성님 컨텐츠도 만들어야 할텐데, 사진에는 찍은 분의 저작권과 찍힌 분의 초상권이 있으니, 조금 난감한데... (라고 말하지만 이미 부끄러운 과거가 스토리베리 홈페이지에 하나 -_-)
이 글의 관련글



Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

: 1 : ... 3445 : 3446 : 3447 : 3448 : 3449 : 3450 : 3451 : 3452 : 3453 : ... 5430 :


게임 드립니다.
Pig-Min Agency
추가 모집

Pig-Min English

한국 만화영화
비디오 판매



해외 캐주얼 / 인디 시장
게임(제품)컨설팅


Welcome to Indie Gaming.

운영 : mrkwang
기술 : 나유령

About PIG-MIN
Contact us

Pig-Min Agency
Pig-Min의 저작권 관련
인디게임 FAQ

따라갈만한 트위터


아케이드 : 액션 : 플래포머
슈팅 : FPS
어드벤쳐 : 퍼즐 : RPG
전략 : 시물레이션
시리어스 게임

Pig-Min 추천
한글화

전체 태그 : 태그 분류


Archives

Categories

전체 (5430)
뉴스 (2379)
리뷰 (1041)
프리뷰 (248)
다녀왔습니다 (67)
칼럼 (876)
웹툰 (32)
Interview-한국어 (65)
Interview-English (33)
링크 (10)
여러분들의 말씀 (4)
제작자분들 공간 (1)
Tip & Hint (8)
공지사항 (663)

Email Newsletters & Email Marketing by YMLP.com

    트위터에서 따라오기
    http://file.tattermedia.com/media/image/plugin/tnm_badge_white.gif
    관리자 입장
    메일 로그인