Flex image rollover component - part 1

Ah Bonjour... I've just come back from a project in Paris... Well, shame shame but it's come to an end. It was Flex and SAP integration so all quite exciting but now I'm back in the big schmoke working on some internal projects for a nice little firm in Covent Garden. I was hoping the tasks would be a little less intense so I could hear myself think and start pumping out some blog notes but it seems we have crazy deadlines and loads to do so I'll keep this one short and follow up in a few days...

a little problem: Now this has been solved many times before but rather than pull something off-the-shelf or just bang out a static composite component I wanted to research and document my findings so we can all learn from doing this in a few different ways and get hold of some generic component source code; so in a nut shell... I need an image with two states, normal and not-normal... active, inactive, on and off... Ok, for now and as it's a roll over component, let's just stick with mouseOver and mouseOut.

pulling over basic skills from HTML/JavaScript we'd just have a generic rollOver_handler(imageObjectRef, ImageURLString) function that sets the img.src of the image passed in, but Flex doesn't handle this too well, it certainly works but there's a white Flash when I update the Image.source to the new URL. this is pretty ugly for my super flexy, err sexy image rollover component...

"... I'm guessing the white flash is due to the flash player not caching the image in the same way a browser would do. Oh the days of pre-loading... is the flash player really loading the image back into the .SWF each time and trashing it? Seems pretty odd to me but I'm sure there's a reason. Perhaps the mouseOver Image instance is being de-referenced on mouseOut, garbage collected and so the Image is kerplunked into the wheelie bin. Or... another thought - perhaps the white flash could be prevented if we used the flex component framework and triggered a dirty flag to update the Image.source in the correct life cycle methods. I've heard a little story that by not using the Flex component life cycle, things can react a bit 'jumpy' ".

Ok, so this is where I've got to and I need to dash home...

<mx:Image id = "procurementOver"
includeInLayout = "false"
source = "@Embed(source='media/purchaser_nav_buttons/procurement_on.png')"
visible = "false" />

<mx:Image id = "procurementOut"
includeInLayout = "false"
source = "@Embed(source='media/purchaser_nav_buttons/procurement_off.png')"
visible = "false" />

<mx:Image id = "procurement"
buttonMode = "true"
creationComplete = "{procurement.source = procurementOut.source}"
mouseOut = "{procurement.source = procurementOut.source}"
mouseOver = "{procurement.source = procurementOver.source}" />

... What we're doing here is creating 3 Image Objects in MXML, forcing the Flash Player to hard-load (Embed) the image asset into the .SWF file so it's bang in memory and ultra-fast to use. The 1st two Images are set to invisible and the 3rd is the worker image which changes it's .source property on mouseOver and mouseOut.

Far from perfect and a long way from a generic roll over image component so I'll be back for part 2 in a day or so... Watch this space...

Au Revoir!