'Width'에 해당되는 글 1건

  1. 2013.04.01 Flex Button에 대하여..
Flex2013. 4. 1. 20:55

Flex의 Button을 쓰다가 알게 된 사실.


<s:ToggleButton id="moreBtn" name="moreBtn" x="347" y="282" width="43" height="50" mouseOver="upsizeBg(event)" mouseOut="downsizeBg(event)" click="showMorePoster(event)"......


버튼은 위와 같이 선언을 한다.

여기서 width와 height를 설정해준다.


<s:states>

        <s:State name="up" />

        <s:State name="over" />

        <s:State name="down" />

        <s:State name="disabled" />

        <s:State name="upAndSelected" />

        <s:State name="overAndSelected" />

        <s:State name="downAndSelected" />

        <s:State name="disabledAndSelected" />

    </s:states>

    

<!-- 버튼 이미지 -->

    <s:Image source.up="@Embed('../assets/images/default/vod_btn_01_n.png')" 

source.over="@Embed('../assets/images/style/vod_btn_02_f.png')"

source.down="@Embed('../assets/images/style/vod_btn_02_f.png')"....




 위는 SkinClass의 버튼의 States에 따른 이미지 설정부분이다.

 여기서 중요한것은 Button의 선언 부분에서 width와 height를 설정해 두었다고 하더라도 SkinClass나 Button의 이미지 설정 부분에서 Button의 설정된 사이즈보다 큰 이미지를 설정해주면 기존의 width와 height의 사이즈가 아닌 이미지의 사이즈만큼 버튼의 영역이 설정 되어 버린다.

 그래서 버튼 하나에 여러가지의 이미지가 들어가게 하는 경우에는 디자인 가이드에 지정된 사이즈 대로 설정을 해두었는데도 그 영역 바깥에서도 버튼이 인식되어 오작동을 일으키는 경우가 생겨 버린다. 아니면 버튼이 서로 붙어 있는 상황에서 나중에 선언된 버튼이 다른 버튼을 덮어 버려 그 영역을 침범하는 경우도 생긴다. 이럴 경우에 나는 원래의 버튼 영역 만큼 투명한 이미지를 버튼위에 올리고 이미지에 이벤트를 줘서 해결했다.

Posted by Z700zZz