Another superb example mate. Thanks a lot. That's a great use of a repeater/custom component. I don't need to worry about width as if I used that I could probably leave the width out and allow it t auto adjust based on the size of my text. Plus the images I'm using are already up on the net and are all 64X64 icon pngs so I don't have to worry about accomodating for image size either. Plus if I allow my client to add new categories I'll limit the amount of characters they can enter into the category names and add a function in so that if they upload a new category image it will be scaled to 64x64 anyway. I've been working on the tilelist custom component based on the last example you gave me and came up with this so far:-
<?xml version="1.0" encoding="utf-8"?> <mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml";> <mx:itemRenderer> <mx:Component> <mx:Canvas width="125" height="145"> <mx:Image id="im" rollOverEffect="{outerDocument.glow}" rollOutEffect="{outerDocument.unglow}" source="{'http://www.coolvisiontest.com/interfaceimages/images/'+data.icon+'.png'}" height="64" width="64" top="10" horizontalCenter="0"/> <mx:Label id="lab" text="{data.label}" rollOverEffect="{outerDocument.glow}" rollOutEffect="{outerDocument.unglow}" horizontalCenter="0" color="#FFFFFF" fontWeight="bold" fontSize="12" bottom="1"/> </mx:Canvas> </mx:Component> </mx:itemRenderer> <mx:Glow id="glow" duration="100" alphaFrom="0" alphaTo="1" blurXFrom="0.0" blurXTo="30.0" blurYFrom="0.0" blurYTo="30.0" strength="2" color="0x14b8fc"/> <mx:Glow id="unglow" duration="150" alphaFrom="1" alphaTo="0" blurXFrom="30.0" blurXTo="0.0" blurYFrom="30.0" blurYTo="0.0" strength="2" color="0x14b8fc"/> <mx:Script> <![CDATA[ import mx.core.EdgeMetrics; import mx.core.IFlexDisplayObject; import mx.skins.halo.ListDropIndicator; import mx.events.DragEvent; import mx.controls.listClasses.IListItemRenderer; use namespace mx_internal; override protected function drawSelectionIndicator( indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void { } override protected function drawHighlightIndicator( indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void { } ]]> </mx:Script> </mx:TileList> The problem is though the way I want it to work is when a user hovers over the image both the text AND the image glow the same for when they hover over the text. It doesn't seem like I can do this with that previous example because it seem impossible to target components inside an item renderer otherwise I would have simply been able to apply multiple targets (the image and the label) to the glow effect and unglow effect. Also in that previous example it seemed impossible to implement my convert to greyscale and convert to color effects as they are basically code rather than inbuilt effects like the glow effect is. It seems these would all be applicable to your recent example though so I'll try it out now and see if I can fit it all in there. Can't believe how helpful you've been. Thanks again. I'll let you know how it goes. --- In [email protected], "valdhor" <valdhorli...@...> wrote: > > 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" <valdhorlists@> 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? > > > > > > > > > > > > > > >
