Embedding same images across multiple components, best practices?

Question

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;}
}

Answer 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.