10 Replies Latest reply on May 25, 2010 11:01 PM by vasanthmss

    Button With Icon

    vasanthmss

                              How to create a button with icon, the icon class should be a url like ("assets/Button.png") according to the url want change the image,

       

      [Bindable]

      private var _url:String="";

      public function set url(value:String):void{

      _url=value;

      }

      public function get url():String{

      return _url;

      }

       

      var butt:Button=new Button();

      but.label="my Button";

      but.setStyle("icon",url) ----------------------- is it possible... Thanks in advance...,

        • 1. Re: Button With Icon
          BhaskerChari Level 4

          Yes it's quite possible....Have you checked it..?

           

           

          Thanks,

          Bhasker Chari

          • 2. Re: Button With Icon
            vasanthmss Level 1

            may i know how its possible....

            • 3. Re: Button With Icon
              BhaskerChari Level 4

              Yes sure...Use the below code...

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="setButtonIcon();">
                  <mx:Script>
                      <![CDATA[
                          import mx.controls.Button;
                 
                          [Embed(source='assets/Button.png')]
                          private var _icon:Class;
                                 
                          private function setButtonIcon():void
                          {
                              var butt:Button = new Button();
                              butt.label="my Button";
                              butt.setStyle("icon",_icon)
                              addChild(butt);
                          }
                      ]]>
                  </mx:Script>
                 
              </mx:Application>

               


              If this post answers your question or helps, please kindly mark it as such.

               


              Thanks,

               

              Bhasker Chari

              • 4. Re: Button With Icon
                vasanthmss Level 1

                ya, thanks for your valuable comments, but i'm asking that dynamically loading button icon with url("assets/Button.png") , but for embedding happen at compile time, i get the url at runtime only,,, ("assets/Button.png")...,

                 

                 

                Thank you

                • 5. Re: Button With Icon
                  BhaskerChari Level 4

                  Hi ,

                   

                  You cannot dynamically assign the button icon using the url ...but you can change the icon dyncamically provided your all the urls images should be statically embedded in the application and you can change the icons by using the setStyle method dynamically....But to change the icons without embedding the images statically its not possible to change them. So inorder to change the button icons you need to first dynamically embed the images using a class variable and assign them at run time as shown below.

                   

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

                  <mx:Application

                   

                   

                  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

                   

                   

                  <mx:Script>

                  <![CDATA[

                   

                   

                  import mx.controls.Button;

                   

                  [

                  Embed(source='assets/icon0.jpg')]

                   

                  private var icon0:Class;

                   

                  [

                  Embed(source='assets/icon1.png')]

                   

                  private var icon1:Class;

                   

                  [

                  Embed(source='assets/icon2.jpg')]

                   

                  private var icon2:Class;

                   

                  [

                  Embed(source='assets/icon3.jpg')]

                   

                  private var icon3:Class;

                   

                   

                  private function updateIcon():void

                  {

                   

                   

                  var iconNum:int = Math.round(Math.random() * 3);

                  butt.setStyle(

                  "icon", this["icon" + iconNum]);

                  }

                  ]]>

                   

                  </mx:Script>

                   

                   

                   

                  <mx:Button id="butt" top="100" left="100" icon="@Embed(source='assets/icon0.jpg')" label="My Button" click="updateIcon();"/>

                  </mx:Application>

                   

                  If this post answers your question or helps, please kindly mark it as such.

                   

                  Thanks,

                  Bhasker Chari

                  1 person found this helpful
                  • 6. Re: Button With Icon
                    vasanthmss Level 1

                                          i can understand the concept but i'm getting values ar run time only is it possible..,

                    • 7. Re: Button With Icon
                      BhaskerChari Level 4

                      As I said its not possible to dynamically assign the url to change the button icon unless and until the images are embedded into the application.

                       

                       

                      Thanks,

                      • 8. Re: Button With Icon
                        vasanthmss Level 1

                        But we can do that in Images. if image can load with url means button Icon also possible.is it so.,

                        • 9. Re: Button With Icon
                          BhaskerChari Level 4

                          Yes its possible with images but I am not sure that we can do it with icons as we

                          ll...may be if possible give it  a try and let me know if it works.....:)

                           

                           

                          Thanks,

                          Bhasker Chari

                          • 10. Re: Button With Icon
                            vasanthmss Level 1

                            ok fine....