12 Replies Latest reply on Jul 21, 2011 4:10 AM by Jofnin

    Fill Function that uses a bitmapfill not solid color

    Jofnin Level 1

      Hi,

       

      I am very very new to Flex and Flashbuilder, and I hope that I am not asking something that has already been covered some where else, but I have searched with no joy.

       

      I am trying to use a fill function on a coloumn chart to fill a bitmap image. Currently I am able to fill with a solid colour:

      public function myFillFunction(item:ChartItem, index:Number):IFill

      {

      var curItem:ColumnSeriesItem = item as ColumnSeriesItem;

      if (curItem.yNumber > 90)

      {

      return(new SolidColor(0x563412, .75));

      }

      else

      {

      return(new SolidColor(0x563412, .25));

      }

       

      }

       

      I am able to do a bitmap fill to the graph with the following code, but I would like to dynamically fill using the fillfunction:

      <s:BitmapFill id="imageFill" source="image1" />.....

      .....

      ......

      <mx:series>

      <mx:ColumnSeries id="cs1"

      displayName="BSI Chart"

      yField="total"

      fill="{imageFill}"

      hideDataEffect="slideOut"

      showDataEffect="slideIn"

      maxColumnWidth="5"/>

       

      If you need more information please let me know...

       

      THANKYOU Kindly!!! in advance for any assistance.

        • 1. Re: Fill Function that uses a bitmapfill not solid color
          Karl_Sigiscar_1971 Level 3

          public class BitmapFill extends EventDispatcher implements IFill

          >>> BitmapFill also implements the IFill interface, just like SolidColor.

           

           

          What prevents you from doing this ?

           

          public function myFillFunction(item:ChartItem, index:Number):IFill

          {

          var curItem:ColumnSeriesItem = item as ColumnSeriesItem;

          if (curItem.yNumber > 90)

          {

          return(new BitmapFill (...));

          }

          else {

           

          return(new BitmapFill (...));

          }

           

          }

          1 person found this helpful
          • 2. Re: Fill Function that uses a bitmapfill not solid color
            Jofnin Level 1

            I can do as you said... but I cant put any parameters into bitmapfill...

             

            IE you cant pass any bitmapfill attributes, such as the image source. So although the code doesnt pass any errors. The graph doesnt have anything displayed.

             

            I hope that makes sense.

             

            Thank you for your reply.

            • 3. Re: Fill Function that uses a bitmapfill not solid color
              Karl_Sigiscar_1971 Level 3

              Then just make it so that the bitmap source and any other necessary parameter is in your item:ChartItem data, i.e in the data items of your dataProvider. Either you have a static type for your data items and you can add properties to their class or you have a dynamic type and you can dynamically add some properties to the data items at runtime.

              • 4. Re: Fill Function that uses a bitmapfill not solid color
                Jofnin Level 1

                Thank Karl,

                 

                I am not sure if I know what you mean. Sorry I am really new to this. but even if I did have the parameters in the chartItem data (ie the path to the source image) how and where would I specify it?

                 

                So for instance my data provider included a colomn with the image path. and when the relevant coloumn is drawn and the fillfunction is called and I say use bitmapfill() ... although my dataprovider includes a path.. when am i telling the system to draw the graph with image that I have in an array?

                 

                Sorry to be such a pain.

                • 5. Re: Fill Function that uses a bitmapfill not solid color
                  Karl_Sigiscar_1971 Level 3

                  public function myFillFunction(item:ChartItem, index:Number):IFill

                  {

                  var curItem:ColumnSeriesItem = item as ColumnSeriesItem;

                  if (curItem.yNumber > 90)

                  {

                  var myBitmapFill= new BitmapFil();

                  myBitmapFill.source = item.item.source; // the data item in the data provider will contain the source property (your image class if embedded or URL if not)

                  return myBitmapFill;

                  }

                  else {

                   

                  return(new BitmapFill (...));

                  }

                   

                  }

                   


                  • 6. Re: Fill Function that uses a bitmapfill not solid color
                    Jofnin Level 1

                    No sorry Karl,

                     

                    You cant set a bitmapfill.source. Try it in flashbuilder see if you get the prompt for source.

                     

                    I think that maybe you need to build up the information with bitmapdata then assign the fill the bitmapdata. But I am not too sure how to do it.

                     

                    Does anyone have any ideas?

                     

                    Thanks

                    Jon

                    • 7. Re: Fill Function that uses a bitmapfill not solid color
                      Karl_Sigiscar_1971 Level 3

                      Hi Jon,

                       

                      I don't know what version of the Flex SDK you use, but in my version (4.1.0), I see this API for the BitmapFill class:

                       

                          //----------------------------------
                          //  source
                          //----------------------------------

                       

                          private var _source:Object;

                       

                          [Inspectable(category="General")]

                       

                          /**
                           *  The source used for the bitmap fill.
                           *  The fill can render from various graphical sources,
                           *  including the following:
                           *  <ul>
                           *   <li>A Bitmap or BitmapData instance.</li>
                           *   <li>A class representing a subclass of DisplayObject.
                           *   The BitmapFill instantiates the class
                           *   and creates a bitmap rendering of it.</li>
                           *   <li>An instance of a DisplayObject.
                           *   The BitmapFill copies it into a Bitmap for filling.</li>
                           *  </ul>
                           *
                           *  @default null
                           * 
                           *  @langversion 3.0
                           *  @playerversion Flash 9
                           *  @playerversion AIR 1.1
                           *  @productversion Flex 3
                           */
                          public function get source():Object
                          {
                              return _source;
                          }
                         
                          /**
                           *  @private
                           */
                          public function set source(value:Object):void
                          {
                              if (value != _source)
                              {
                                  var tmpSprite:DisplayObject;
                                  var oldValue:Object = _source;
                                 
                                  var bitmapData:BitmapData;   
                                  var bitmapCreated:Boolean = false;
                                 
                                  if (value is Class)
                                  {
                                      var cls:Class = Class(value);
                                      value = new cls();
                                      bitmapCreated = true;
                                  }
                                 
                                  if (value is BitmapData)
                                  {
                                      bitmapData = BitmapData(value);
                                  }
                                  else if (value is Bitmap)
                                  {
                                      bitmapData = value.bitmapData;
                                  }
                                  else if (value is DisplayObject)
                                  {
                                      tmpSprite = value as DisplayObject;
                                  }
                                  else if (value == null)
                                  {
                                      // This will set source to null
                                  }
                                  else
                                  {
                                      return;
                                  }
                                     
                                  if (!bitmapData && tmpSprite)
                                  {
                                      bitmapData = new BitmapData(tmpSprite.width, tmpSprite.height, true, 0);
                                      bitmapData.draw(tmpSprite, new Matrix());
                                      bitmapCreated = true;
                                  }
                                 
                                  // If the bitmapData isn't transparent (ex. JPEG) and alpha != 1,
                                  // then copy it into a transparent bitmapData
                                  if (bitmapData && !bitmapData.transparent && alpha != 1)
                                  {
                                      var transparentBitmap:BitmapData = new BitmapData(bitmapData.width, bitmapData.height, true);
                                      transparentBitmap.draw(bitmapData);
                                      bitmapCreated = true;
                                      bitmapData = transparentBitmap;
                                  }
                                 
                                  _source = value;
                                  setBitmapData(bitmapData, bitmapCreated);
                                             
                                  dispatchFillChangedEvent("source", oldValue, value);
                              }
                          }

                      1 person found this helpful
                      • 8. Re: Fill Function that uses a bitmapfill not solid color
                        Jofnin Level 1

                        Thank you Karl,

                         

                        You are correct, there is a source option, but as it specifies, you need to supply it a Bitmap or BitmapData instance. justing passing it a path returns empty.

                         

                        This is my current code:

                        ....

                        ....

                        <s:BitmapFill id="imageFill" source="@Embed(source='assets/man2.gif')" />

                        ......

                        .....

                        public function myFillFunction(item:ChartItem, index:Number):IFill

                        {

                        var curItem:ColumnSeriesItem = item as ColumnSeriesItem;

                        if (curItem.yNumber > 90)

                        {

                        var myBitmapFill:BitmapFill;

                        myBitmapFill= new BitmapFill();

                        myBitmapFill.source = "assests/man3.gif";

                        return myBitmapFill;

                        }

                        else

                        {

                         

                        return imageFill;

                        }

                        }

                         

                        even if a define an image it doesnt work ie:

                        .....

                        ....

                        <s:BitmapImage id="myImage" source="@Embed(source='assets/man3.gif')"/>

                        <s:BitmapFill id="imageFill" source="@Embed(source='assets/man2.gif')" />

                        ....
                        ....
                        public function myFillFunction(item:ChartItem, index:Number):IFill
                        {
                        var curItem:ColumnSeriesItem = item as ColumnSeriesItem;
                        if (curItem.yNumber > 90)
                        {
                        var myBitmapFill:BitmapFill;
                        myBitmapFill= new BitmapFill();
                        myBitmapFill.source = myImage;
                        return myBitmapFill;
                        }
                        else
                        {
                        return imageFill;
                        }
                        }
                        The appropiate coloum returns empty. well not empty but with no fill so you it looks empty.
                        Can you see any mistakes I am making?
                        Thank you!!

                        • 9. Re: Fill Function that uses a bitmapfill not solid color
                          Karl_Sigiscar_1971 Level 3

                          OK, but in the source setter, you can see this section:

                           

                                      if (value is Class)
                                      {
                                          var cls:Class = Class(value);
                                          value = new cls();
                                          bitmapCreated = true;
                                      }

                           

                          If you embed images like so and refer to them statically, it will work (e.g EmbeddedAssets.red):


                          package com.mcompany.applications
                          {
                              import flash.events.EventDispatcher;

                           

                              [Bindable]
                              public class EmbeddedAssets extends EventDispatcher
                              {
                                  [Embed(source="assets/images/rag/red.png", mimeType="image/png")]
                                  public static const red:Class;

                           

                                  [Embed(source="assets/images/rag/amber.png", mimeType="image/png")]
                                  public static const amber:Class;

                           

                                  [Embed(source="assets/images/rag/green.png", mimeType="image/png")]
                                  public static const green:Class;
                                 
                                  [Embed(source="assets/images/rag/gray.png", mimeType="image/png")]
                                  public static const gray:Class;
                                 
                                  [Embed(source="assets/images/plus_button.png", mimeType="image/png")]
                                  public static const plusButton:Class;
                                 
                                  [Embed(source="assets/images/delete_up.png", mimeType="image/png")]
                                  public static const minusButtonUp:Class;
                                 
                                  [Embed(source="assets/images/delete_over.png", mimeType="image/png")]
                                  public static const minusButtonOver:Class;
                              }
                          }

                          • 10. Re: Fill Function that uses a bitmapfill not solid color
                            Jofnin Level 1

                            Thanks Karl,

                             

                            I am lost though! Can you show me an example?

                            • 11. Re: Fill Function that uses a bitmapfill not solid color
                              Karl_Sigiscar_1971 Level 3


                              public function myFillFunction(item:ChartItem, index:Number):IFill

                               

                              {

                               

                              var curItem:ColumnSeriesItem = item as ColumnSeriesItem;

                               

                              if (curItem.yNumber > 90)

                               

                              {

                               

                              var myBitmapFill:BitmapFill;

                               

                              myBitmapFill= new BitmapFill();

                               

                              myBitmapFill.source = EmbeddedAssets.amber;

                               

                              return myBitmapFill;

                               

                              }

                               

                              else

                               

                              {

                               

                               

                               

                              return imageFill;

                               

                              }

                               

                              }

                               

                               

                              You could also pass the embedded image class reference into your data item as opposed to accessing a static constant.

                              • 12. Re: Fill Function that uses a bitmapfill not solid color
                                Jofnin Level 1

                                Ok this is what I have done, maybe not the prettiest solution:

                                 

                                .....

                                 

                                [Embed(source="../assets/man1.gif")]

                                [Bindable]

                                public var imageMan1:Class;

                                [Embed(source="../assets/man2.gif")]

                                [Bindable]

                                public var imageMan2:Class;

                                [Embed(source="../assets/man3.gif")]

                                [Bindable]

                                public var imageMan3:Class;

                                [Embed(source="../assets/man4.gif")]

                                [Bindable]

                                public var imageMan4:Class;

                                [Embed(source="../assets/man5.gif")]

                                [Bindable]

                                public var imageMan5:Class;

                                ....

                                 

                                ...

                                ....

                                ....

                                 

                                public function myFillFunction(item:ChartItem, index:Number):IFill

                                {

                                var curItem:ColumnSeriesItem = item as ColumnSeriesItem;

                                if (curItem.item.name == "3")

                                {

                                return imageFill1;

                                 

                                }

                                else if (curItem.item.name == "O2")

                                {

                                return imageFill2;

                                }

                                else if (curItem.item.name == "Orange")

                                {

                                return imageFill3;

                                }

                                else if (curItem.item.name == "T-Mobile")

                                {

                                return imageFill4;

                                }

                                else if (curItem.item.name == "Vodafone")

                                {

                                return imageFill5;

                                }

                                else

                                {

                                return sc1;

                                }

                                }

                                ...

                                ....

                                ....

                                ....

                                ....

                                ....

                                 

                                <mx:SolidColor id="sc1" color="#1E90FF" alpha=".8"/>

                                <s:BitmapFill id="imageFill1" source="{imageMan1}" />

                                <s:BitmapFill id="imageFill2" source="{imageMan2}" />

                                <s:BitmapFill id="imageFill3" source="{imageMan3}" />

                                <s:BitmapFill id="imageFill4" source="{imageMan4}" />

                                <s:BitmapFill id="imageFill5" source="{imageMan5}" />

                                ...

                                ....

                                ...

                                ...

                                ....

                                ...

                                 

                                <mx:ColumnSeries id="cs1"

                                displayName="BSI Chart"

                                xField="name"

                                yField="total"

                                fillFunction="myFillFunction"/>

                                 

                                 

                                 

                                ...

                                ...

                                ...

                                ...

                                 

                                The result is a different bitmapfill for each bar of the graph. If the bar falls into the correct criteria, else it just implements a standard bar solid colour fill.

                                Thank you for your help Karl. I really appreciate it!

                                 

                                If anyone needs more infor please let me know. Or if anyone has a better way of achieving the same desired result please let me know.

                                 

                                I am going to try an neaten it up now and then I will update this post with the complete code.

                                 

                                Thankyou,

                                jon