That does sound like essentially what I'm after yes but the problem is I'm not sure how to actually do it as I have zero experience at 1. bubbling and 2. creating custom components :'-( Plus I think the answer may be within an edited tilelist component now.
What I've managed to get so far (from another site) is a custom component based on a tilelist with my item renderer added into it. It has the blue themed rollover and selection squares completely removed for both rollover and selection but what I need to do is edit this code to instead do what I've described i.e. selection itself produces no visual effects but whilst an item is hovered over it's image converts to colour and it's image and label glows and when it is unhovered over the image returns to greyscale and all glow effects stop. Can you help me with this by any chance or point out what I would have to do to this code to achieve my own such component that allows the visual effects I need? I have some glow/unglow effects aswell as converttogreyscale and converttocolor effects from previous apps :-) Here's the code I've got for the component:- <?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 source="{data.icon}" height="64" width="64" top="10" horizontalCenter="0"/> <mx:Label text="{data.label}" bottom="1" horizontalCenter="0" color="#FFFFFF" fontWeight="bold" fontSize="12"/> </mx:Canvas> </mx:Component> </mx:itemRenderer> <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 { } // Remove the Selection indicator override protected function drawHighlightIndicator( indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void { } ]]> </mx:Script> </mx:TileList> Thanks for your help so far. --- In [email protected], "valdhor" <valdhorli...@...> wrote: > > Ahhhh...Why do you say repeater items can't be selected? > > I built a custom component that responds to a mouse click and then repeat > this component multiple times using a repeater from data that is returned > from my server (Essentially this is a list of regions containing customers. > Each user is only authorized to see specific regions/customers so the number > of custom components repeated is set from this data). > > The custom component is fully self contained and responds to mouse clicks. If > the underlying application needs to know about the clicks, I dispatch a > bubbling event which the app listens for. > > So, in your case create a custom component with your different skins > (greyscal/colored). The component should contain multiple sizes of images as > well as a public var to set the size. The app should know the stage size as > well as the number of items to display (From the server call). In your > repeater, set the public var to the size you need. Each custom component can > have its own overskin etc and respond appropriately as well as its own event > listener for mouse clicks. > > --- In [email protected], "James" <garymoorcroft_ict@> wrote: > > > > I originally considered using a repeater inside a h box to repeat all of > > the items but the problem is a repeater doesn't allow items to be selected > > otherwise it would be perfect. You see I have a filter function that has > > been applied to my links based on what category item is selected. > > > > Overall what it needs to do is this:- > > > > - Have no blue theme boxes > > - Autoresize based on how many items are in it > > - On application complete all of the images in it are converted to > > greyscale (as shown in my pic) > > - The text and image of each item in it must glow and convert to colour as > > they are hovered over and convert back to greyscale and unglow as they are > > unhoevered over (again this can be seen in my app) > > > > All of the above effects are simple with static components but they are > > pretty much impossible to apply to a component that has the > > selcteditem/index properties i.e. is populated via a dataprovider. > > > > I wish the repeater component had a selected item property as I think > > that'd work. > > > > --- In [email protected], "valdhor" <valdhorlists@> wrote: > > > > > > I have never tried to do anything like this but just thinking off the top > > > of my head... > > > > > > Try skinning components in Flex. > > > http://www.davidflatley.com/2007/12/17/programmatic-button-skins-in-flex-3/ > > > may be a good starting point. > > > > > > Look at using DeGrafa (http://www.degrafa.org) and/or ScaleNine > > > (http://www.scalenine.com) to skin components. > > > > > > Have multiple sizes of graphics available and check the width of the > > > screen and the number of icons and pick an appropriate size to show. > > > > > > --- In [email protected], "James" <garymoorcroft_ict@> wrote: > > > > > > > > Heres an image of my icons which is basically what I'm after. > > > > > > > > http://i223.photobucket.com/albums/dd147/jimmyoneshot/theicons.jpg > > > > > > > > The only difference is these are all just static ones I put in myself, > > > > now I need them to be dynamic i.e. the user can add and remove icons > > > > which is why I need it to resize. I've found a way of getting a > > > > tilelist to autoresize but there is a problem witrh this. > > > > > > > > I also want them to have a glow effect as you can see there. In that > > > > last version on application complete all of those images were converted > > > > to greyscale then got converted to color when each one was hovered > > > > over. I need to achieve this same effect again but I'm not sure if a > > > > tilelist can achieve this either as it simply has that dull blue theme > > > > box. I know this box can be removed using actionscript but how can one > > > > add in the glow effect to a tilelist hovered over item? > > > > > > > > --- In [email protected], "valdhor" <valdhorlists@> wrote: > > > > > > > > > > Take a look at SuperTabNavigator which is part of FlexLib > > > > > (http://code.google.com/p/flexlib/). From your description, it looks > > > > > like it would do the trick. > > > > > > > > > > --- 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? > > > > > > > > > > > > > > > > > > > > >
