인트로 수정 - 애니메이션 ( gif 주의 ) (20170508 23:22 영상추가)

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  추가

간략하게 인트로 수정하는 방법을 살펴 보았습니다.

보기에 복잡해 보이는데 별거 없어요 쉬워요