I also looked at TourDeFlex to get some ideas. Here is a small example that I created that shows how to create a custom component as well as do the Glow effect on an image. (I got the image from downloading the file inside TourDeFlex under Glow):
Application: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" verticalAlign="top" horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" xmlns:components = "*"> <mx:Script> <![CDATA[ [Bindable] private var dp:Array = [ {text: "First", image: "helmet"}, {text: "Second", image: "helmet"}, {text: "Third", image: "helmet"}, {text: "Fourth", image: "helmet"}, {text: "Fifth", image: "helmet"} ]; ]]> </mx:Script> <mx:HBox> <mx:Repeater id="myImages" dataProvider="{dp}"> <components:MyImageComponent theItem="{myImages.currentItem}"/> </mx:Repeater> </mx:HBox> </mx:Application> MyImageComponent.mxml <?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"; horizontalAlign="center" width="200" height="200" creationComplete="onCreationComplete()"> <mx:Script> <![CDATA[ public var theItem:Object; [Bindable] private var imageLocation:String; private function onCreationComplete():void { thisText.text = theItem.text; thisImage.source = "images/" + theItem.image + ".png"; } ]]> </mx:Script> <mx:Image id="thisImage" rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}" autoLoad="true"/> <mx:Text id="thisText" fontSize="24"/> <mx:Glow id="glowImage" duration="1000" alphaFrom="1.0" alphaTo="0.3" blurXFrom="0.0" blurXTo="50.0" blurYFrom="0.0" blurYTo="50.0" color="0x22A050"/> <mx:Glow id="unglowImage" duration="1000" alphaFrom="0.3" alphaTo="1.0" blurXFrom="50.0" blurXTo="0.0" blurYFrom="50.0" blurYTo="0.0" color="0x3380DD"/> </mx:VBox> BTW. I only found one png image so I used it repeatedly. Also, I have only one size. You should make multiple sizes and place them in the images folder. You should also set the width and height inside the custom component depending on the size you want (I have them hard coded in my example). Then you would pass a size to the custom component by exposing a public variable and use a switch statement to select the correct size. HTH Steve --- In [email protected], "valdhor" <valdhorli...@...> wrote: > > OK, I did some googling and this looks like exactly what you are after... > > http://flexaired.blogspot.com/2008/07/sample-image-tile-list.html > > --- In [email protected], "James" garymoorcroft_ict@ wrote: > > > > Yes but it's the glow effect that I require. when each item is hovered over it needs to glow rather than just having the blue themed square. Have you got any idea how to do this? > > > > --- In [email protected], "dannyvenier" <dannyvenier@> wrote: > > > > > > Why not use a tileList or if spark, a List with tile layout. You can use a custom itemrenderer which can re-render when additional buttons are added and in rendering, can determine the optimum size based on running an algorithm on your dataprovider. There are all sorts of edge conditions to worry about (what if the total text width exceeds that of your container etc., etc.., but those have to be dealt with in any case, and I imagine you need a custom renderer anyway, to build your list items. > > > > > > > > > > > > --- In [email protected], "James" <garymoorcroft_ict@> wrote: > > > > > > > > I'm lost as to what component to use for navigation within my application. Across the top of my app I want something which horizontally displays a list of categories which the user can click to select. This is fine if I use a tilelist but I also want to allow my client to add and remove categories and for the width of the component to adjust so that new categories fit in but it seems impossible to apply <fit to content> to a tilelist the way you can to a hbox which obviously means scrollbars will appear and if you switch the scroll policy off this simply means any added categories won't be visible if they are past the set width. > > > > > > > > If a hbox had a selecteditem property that would be perfect. Is there any such way of getting a component to work like this? > > > > > > > > > >
