인트로 수정 - 애니메이션 ( gif 주의 ) (20170508 23:22 영상추가)
- Jovovich
- 1458
- 21
- 13
1. 인트로 수정 - 그래픽 ( https://www.flayus.com/9718974 )
2. 인트로 수정 - 글자색 ( https://www.flayus.com/9719379 )
3. 인트로 수정 - 애니메이션 ( https://www.flayus.com/9719603 )
인트로 수정 마지막 애니메이션 부분 입니다.
lion.png, premier.png, league.png
3개의 파일은 크기가 달라지면 위치가 어긋나게 됩니다.
사이즈가 550 x 120 인 league.png 파일을 넣으면
이렇게 겹치게 됩니다.
이제 제대로 보이도록 수정해 봅시다.
스킨/panels/match/lineup intro.xml 을 프로그램이나 메모장으로 열어봅니다.
<!-- League -->
<container>
<layout class="stick_to_sides_attachment" alignment="all" layout_children="true" inset="0" />
<animation class="translate_animation" trigger_id="hidden" trigger_value="false" end_mode="hold_auto_reverse_hold" tween="ease_out" coord_mode="relative_to_screen">
<list id="storyboard">
<record id="stop" interval="0" value="-0.9,0"/>
<record id="stop" interval="1.0" value="0.1,0"/>
<record id="stop" interval="2.0" value="0.1,0"/>
<record id="stop" interval="3.0" value="0.425,0"/>
</list>
</animation>
<animation class="fade_animation" trigger_id="hidden" trigger_value="false" start_value="1.0" end_value="0.0" end_mode="hold_end" >
<list id="storyboard">
<record id="stop" interval="0" value="1.0"/>
<record id="stop" interval="2.5" value="1.0"/>
<record id="stop" interval="3.0" value="0.0"/>
</list>
</animation>
<widget class="picture" file="boxes/custom/match/intro/league" image_alignment="centre"/>
</container>
이 부분이 league.png 를 움직이게 합니다.
league.png 는 두 가지의 에니메이션이 적용되었는데요
위치 (translate_animation), 사라짐 (fade_animation) 입니다.
위치 부분
<animation class="translate_animation" trigger_id="hidden" trigger_value="false" end_mode="hold_auto_reverse_hold" tween="ease_out" coord_mode="relative_to_screen">
<list id="storyboard">
<record id="stop" interval="0" value="-0.9,0"/>
<record id="stop" interval="1.0" value="0.1,0"/>
<record id="stop" interval="2.0" value="0.1,0"/>
<record id="stop" interval="3.0" value="0.425,0"/>
</list>
</animation>
사라짐 부분
<animation class="fade_animation" trigger_id="hidden" trigger_value="false" start_value="1.0" end_value="0.0" end_mode="hold_end" >
<list id="storyboard">
<record id="stop" interval="0" value="1.0"/>
<record id="stop" interval="2.5" value="1.0"/>
<record id="stop" interval="3.0" value="0.0"/>
</list>
</animation>
입니다.
translate_animation 부터 살펴봅시다
딴건 잘 모르겠고 이부분만 잘 보면 됩니다.
<record id="stop" interval="0" value="-0.9,0"/>
<record id="stop" interval="1.0" value="0.1,0"/>
<record id="stop" interval="2.0" value="0.1,0"/>
<record id="stop" interval="3.0" value="0.425,0"/>
시간(초)별로 위치(x,y)를 지정해 준 것입니다.
0초 -0.9,0
1.0초일때 0.1,0
2.0초 일때 0.1,0
3.0초 일때 0.425,0
처음 -0.9,0 에서 시작해서 1.0초에 0.1,0 위치까지 이동합니다.
그리고 2.0 초까지 0.1,0 으로 이동해야하는데 같은 위치이므로 정지상태 입니다.
2.0초가 지나면 움직여서 3.0초가 되면 0.425,0 위치에 도착합니다.
움직임을 확인하면서 value 부분을 알맞게 수정해 봅니다.
<record id="stop" interval="0" value="-0.835,0"/>
<record id="stop" interval="1.0" value="0.165,0"/>
<record id="stop" interval="2.0" value="0.165,0"/>
<record id="stop" interval="3.0" value="0.425,0"/>
이정도가 적당한거 같네요
fade_animation 은
<record id="stop" interval="0" value="1.0"/>
<record id="stop" interval="2.5" value="1.0"/>
<record id="stop" interval="3.0" value="0.0"/>
interval 시간, value= 0~1 입니다.
value="0" 투명 이고 1이 최대값입니다.
다른 애니메이션도 다 비슷한 모양이므로 수정해 보면서 어떻게 변하는지 한 번 살펴보면 재미가 있지요
다른 부분도 대충 조금 수정하면
2017-05-08 23:22 추가
간략하게 인트로 수정하는 방법을 살펴 보았습니다.
보기에 복잡해 보이는데 별거 없어요 쉬워요
추천인 13
Jovovich
댓글 21
계속 물어봐 죄송합니다만, 로고 팽그르르 돌리기를 그냥 끝내지 않고 바람개비처럼 계속 돌아가게 하고 싶은데 어떻게 해야할지 모르겠습니다. 혹시나 해서 end_mode="hold_end" 에서 infinite 로 수정해봤는데, 숫자도 안되고 뭘 바꿔야할지 어렵습니다.
720도를 수정해보면 돌아가다 다른 곳으로 날아갑니다.
그러니까 대충 로고를 각각 7개 정도로 회전 정지시킨 것을 옆으로 길게 이어놓고 세로높이 만큼 잘라서 출력시키면 될거라고 이해했습니다. match in between highlights panel.xml 이파일이 어디에 쓰이는지도 모르니 많이 어렵습니다.
우선 이것 저것 숫자나 문자로 입력할 수 있는 것만 수정해보았는데 변화가 없어서 정말 말씀처럼 시간이 걸릴거 같아요. 저는 뭔가 계속 돌아가도록 하는 명령어도 따로 있어서 금방 끝날 수 있을 줄 알았습니다.
그래도 이거저거 새로운 것 알려주셔서 재밌게 하고 있습니다. 감사합니다.
match in between highlights panel.xml 은
스킨/panels/match 폴더에 있어요
에펨계의 밥선생님
참쉽죠