8 Replies Latest reply on Feb 12, 2010 5:22 AM by yze_

    how to take button's label over its bitmap?

    yze_

      i've converted template from psd to catalyst and then open it in flex 4. i've written button labels but they dont appear and i couldnt find how to get it over bitmap skin :s how?

        • 1. Re: how to take button's label over its bitmap?
          archemedia Level 4

          You should make a css file and implement it in your app:

           

          <mx:Style source="myStyles.css"/>

           

          Then, make a custom button myIconButton

          In your css file, add something like this:

           

          Button.myIconButton
          {
              horizontalGap: 0;
              paddingLeft: 0;
              paddingRight: 0;
              paddingTop: 0;
              paddingBottom: 0;
              upSkin: Embed(source="images/normalButtonImage.png");
              overSkin: Embed(source="images/rolloverButtonImage.png");
              downSkin: Embed(source="images/rolloverButtonImage.png");
              disabledSkin: Embed(source="images/normalButtonImage.png");
              cornerRadius: 0;
          }

           

          If you don't add a label to your button, you get a image only button.

           

          Does this help?

           

          Dany

          • 2. Re: how to take button's label over its bitmap?
            yze_ Level 1

            hi Dany,

            thank u for ur answer..

            i already have a css file. but i've converted project from ps to catalyst, then flex 4. if i create button in catalyst with e label, there isnt any problem. but every button has a different bitmap image and skin class in this way. i want to use only one skin class, to reduce codes. to do this, i create button in catalyst without a label, and i want to add a button label property in flex 4. but it doesn't show label. i think label under button bitmap image, how can i get label over?

             

            hope i can tell the problem

            • 3. Re: how to take button's label over its bitmap?
              archemedia Level 4

              <?xml version="1.0"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
                 <mx:Script>
                 <![CDATA[
                
                    [Embed(source="myImage.png")]
                    [Bindable]
                    public var myIcon:Class;
                 ]]>
                 </mx:Script>

               

                 
                  <mx:Button icon="{myIcon}"/>
              </mx:Application>

               

              You can do this for every state.

               

              Dany

              • 4. Re: how to take button's label over its bitmap?
                yze_ Level 1

                i tried, but error:


                Cannot resolve attribute 'icon' for component type spark.components.Button.

                • 5. Re: how to take button's label over its bitmap?
                  archemedia Level 4

                  Can you send me the code of your custom button?

                  Do you set the icon property in mxml?

                   

                  Dany

                  • 6. Re: how to take button's label over its bitmap?
                    Francisc Level 3

                    Dany's answer is correct.

                     

                    If you get that error it means in Flex 4 things changed regarding setting icons for Buttons. Odd.

                    • 7. Re: how to take button's label over its bitmap?
                      yze_ Level 1

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>

                      <s:Skin

                       

                      xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt">

                       

                       

                      <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>

                       

                       

                      <s:states>

                       

                       

                      <s:State name="up"/>

                       

                       

                      <s:State name="over"/>

                       

                       

                      <s:State name="down"/>

                       

                       

                      <s:State name="disabled"/>

                       

                       

                      </s:states>

                       

                       

                      <s:BitmapImage source="@Embed('/assets/images/templatetıp/ubuton_4.png')" d:userLabel="ubuton_2" x="0" y="0"/>

                      </s:Skin>

                       

                      this is code of my button in components package.

                      and

                       

                      <s:Button

                      skinClass="components.ubuton_2Button" x="627" y="12" click="button_clickHandler_1()" buttonMode.Page1="true"/>

                       

                      this is its code in main.mxml.

                      • 8. Re: how to take button's label over its bitmap?
                        yze_ Level 1

                        hi, i solved it.

                         

                        this is skin code:

                         

                        <?xml version="1.0" encoding="utf-8"?>

                        <s:Skin

                         

                        xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt">

                         

                         

                        <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>

                         

                         

                         

                        <s:states>

                         

                         

                        <s:State name="up" />

                         

                         

                        <s:State name="over" stateGroups="overStates" />

                         

                         

                        <s:State name="down" stateGroups="downStates" />

                         

                         

                        <s:State name="disabled" stateGroups="disabledStates" />

                         

                         

                        <s:State name="selectedUp" stateGroups="selectedStates, selectedUpStates" />

                         

                         

                        <s:State name="selectedOver" stateGroups="overStates, selectedStates" />

                         

                         

                        <s:State name="selectedDown" stateGroups="downStates, selectedStates" />

                         

                         

                        <s:State name="selectedDisabled" stateGroups="selectedUpStates, disabledStates, selectedStates" />

                         

                         

                        </s:states>

                         

                         

                         

                        <s:Rect left="1" right="1" top="1" bottom="1"

                        radiusX="

                        2" radiusY="2"

                         

                        >

                         

                         

                        <s:fill>

                         

                         

                        <s:BitmapFill source="@Embed('/assets/images/templatetıp/ubuton_5.png')" />

                         

                         

                        </s:fill>

                         

                         

                        </s:Rect>

                        </s:Skin>

                         

                        and this is main.mxml code:

                         

                        <mx:Button

                        includeIn="Page1" x="270" y="284" label="Button" skin="components.ubutonButton"/>

                         

                         

                        and this is solution adress:

                         

                        http://blog.flexexamples.com/2009/07/10/setting-a-background-image-on-a-halo-button-contro l-in-flex-4/