2 Replies Latest reply on Mar 29, 2008 8:35 PM by Bryan Dresselhaus

    Embedding same images across multiple components, best practices?

    flashharry!
      Hi Guys,

      Once again a great forum.

      I have a fairly large dashboard application, built from many components, from an obvious maintenance point of view this is preferred.

      To keep the look and feel the same across each component I reuse a lot of the icons, this icons have 3 states, disabled, normal and hot(rollover)

      The mouse roll over and roll out are the same for each set of icons. At the moment I have each component embed each icon and repeat the functions.

      This is not the optimum way to do this so I'm looking on best practices. Should I build a separate action script package with all the embedded images and roll over/out functions. Then import that in to each component. But then I will embedded ALL the images in each component. Should I embed all the images in the main container app, then when flex sees the same image in a compoent will it not embedded again or will it embed the images again..

      In the example below 4 of the components have the same refresh icon and roll/over states. So this code is repeated (bad practice) in all 4. Moving to separate action-script package will make maintenance easier, but as stated above will just one copy get embedded for the entire app, or will 4 copies get embedded ?

      [Embed(source="images/refresh_24.png")]
      [Bindable]
      private var refreshIcon:Class;

      [Embed(source="images/refresh_24_hot.png")]
      [Bindable]
      private var refreshIconHot:Class;

      [Embed(source="images/refresh_24_dis.png")]
      [Bindable]
      private var refreshIconDis:Class;

      private function rollOverRefresh(event:Event):void {
      if (event.target.source != refreshIconDis ) {event.target.source = refreshIconHot;}

      }
      private function rollOutRefresh(event:Event):void {
      If (event.target.source != refreshIconDis ) {event.target.source = refreshIcon;}
      }
        • 1. Embedding same images across multiple components, best practices?
          slaingod Level 1
          Flex is able to collate those Embeds so they are only included once IIRC.

          While it may seem like bad practice to include it in each component, it really isn't, from a code reusability standpoint. But you could probably continue on that path and create a custom component <mycontrols:RefreshButton> that has the the embeds in one place for you.

          You could probably also do something similar with style very easily:

          .MyButton { overSkin="@Embed(source='../assets/orb_over_skin.gif')"
          upSkin="@Embed(source='../assets/orb_up_skin.gif')"
          downSkin="@Embed(source='../assets/orb_down_skin.gif')"/>
          }
          Then apply that style to your button.

          You could also put the button into a single SWF file in Flash and include it that way to reduce the number of embeds. I never include PNG, JPG, GIF, etc files directly, always SWF as you get better compression that way IMO. Plus I just find it gives me greater flexibility...if I want to animate my skins in the future (button that gleams for instance), I already have SWF's in my code so no need to change anything out but the SWF.
          • 2. Re: Embedding same images across multiple components, best practices?
            Bryan Dresselhaus Level 1
            Create an Actionscript class named Resources with the following variables:

            [Embed(source="images/refresh_24.png")]
            [Bindable]
            public static var refreshIcon:Class;

            [Embed(source="images/refresh_24_hot.png")]
            [Bindable]
            public static var refreshIconHot:Class;

            [Embed(source="images/refresh_24_dis.png")]
            [Bindable]
            public static var refreshIconDis:Class;


            Then in your functions you can reference it like:

            Resources.refreshIcon. Since they are static only one copy is created. Import the Resources class where ever you like.


            private function rollOverRefresh(event:Event):void {
            if (event.target.source != Resources.refreshIconDis ) {event.target.source = Resources.refreshIconHot;}

            }
            private function rollOutRefresh(event:Event):void {
            If (event.target.source != Resources.refreshIconDis ) {event.target.source = Resources.refreshIcon;}
            }