Binding keyframe of custom componet to data

Question

I have created a custom mxml component that has 3 text fields
and an embedded swf. The embedded swf has 20 key frames, each of
which is a different icon.
I display multiple copies of this custom component in a
repeater using an ArrayCollection as the data provider.
What I want to do is be able to display the relevant keyframe
based on a field in my ArrayCollection that corresponds to the file
type
For example if the value of extensionType is "jpg" I want the
embedded swf to display a keyframe with the label "jpg"
Here is the code of my custom component
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
width="450" height="44" cornerRadius="15" borderStyle="none"
backgroundColor="#ffffff" themeColor="#ff0000">
<mx:Script>
<![CDATA[
[Bindable]
public var fileNumberTxt:String ="1";
[Bindable]
public var fileNameTxt:String ="File Name";
[Bindable]
public var fileSizeTxt:String ="120k";
]]>
</mx:Script>
<mx:Text x="10" y="16" text="{fileNumberTxt}" />
<mx:Text x="114" y="16" text="{fileNameTxt}" />
<mx:SWFLoader x="60" y="2" width="40" height="40"
source="@Embed('assets/icons.swf')" />
<mx:Text x="314" y="16" text="{fileSizeTxt}" />
</mx:Canvas>
And here is my Array Collection
<mx:ArrayCollection id="scfDummyData" >
<mx:Object fileNumber="1" fileNameValue="project plan"
fileSize="12k" extensionType="doc" />
<mx:Object fileNumber="2" fileNameValue="essay"
fileSize="122k" extensionType="doc" />
<mx:Object fileNumber="3" fileNameValue="project"
fileSize="18k" extensionType="jpg"/>
</mx:ArrayCollection>
I am using Zinc to allow the user to drop files from their
system onto my application. When they do this, I update my
ArrayCollection.
I just can't figure out how to bind the label of the embedded
swf to the extenstionType variable in the ArrayCollection.
Any help much appreciated
Thanks
Paul

Answer 1

Can anyone identify what I am doing wrong below. Basically my
ArrayCollection has a value for imagePath that relates to the
symbol that needs to be displayed in a custom component.
The code for the custom component is below the
ArrayCollection code. I think I am really close to getting this
sorted but just can’t quite figure it out.
Currently it is always displaying the DOC symbol
<mx:ArrayCollection id="scfDummyData" >
<mx:Object fileNumber="1" fileNameValue="project plan"
fileSize="12k" extensionType="doc" imagePath="JPG"/>
<mx:Object fileNumber="2" fileNameValue="essay"
fileSize="122k" extensionType="doc" imagePath="JPG" />
<mx:Object fileNumber="3" fileNameValue="project"
fileSize="18k" extensionType="jpg" imagePath="DOC" />
</mx:ArrayCollection>
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
width="450" height="44" cornerRadius="15" borderStyle="none"
backgroundColor="#ffffff" themeColor="#ff0000">
<mx:Script>
<![CDATA[
[Bindable]
[Embed('assets/icons.swf', symbol='icons2')]
public var JPG:Class;
[Bindable]
[Embed('assets/icons.swf', symbol='icons3')]
public var DOC:Class;
[Bindable]
public var fileNumberTxt:String ="1";
[Bindable]
public var fileNameTxt:String ="File Name";
[Bindable]
public var fileSizeTxt:String ="120k";
[Bindable]
public var imagePath:Class = DOC;
]]>
</mx:Script>
<mx:Text x="10" y="16" text="{fileNumberTxt}" />
<mx:Text x="114" y="16" text="{fileNameTxt}" />
<mx:SWFLoader x="60" y="2" width="40" height="40"
source="{imagePath}" />
<mx:Text x="314" y="16" text="{fileSizeTxt}" />
</mx:Canvas>