No worries Anuj, Basically what the CSS is doing is replacing the programatically drawn skins that Flex uses by default for drawing the contols; with either your own programmatic (vector graphics) or graphical (images) skins. For the scrollbar skins, I find it easier to just embed images; but this requires that you know how to use a graphics program like Fireworks or Photoshop. Yes, if you want to use that CSS, you will need to create your own images. To get started though, you can use the same image for the up/over/down states of the buttons. Sorry that I can't provide you with any assets, but I'm sure that you'll figure it out with some trial and error. Just create an image for the track (should be the same number of pixels wide as the up/down button images that you downloaded and at least as tall as it is wide), and create an image for the thumb (should be less wide than the track skin image). Then depending on the dimensions of yor track and thumb images, adjust the scaleGrid values in the CSS; to stretch the appropriate sections of your images.
-TH --- In [email protected], "anuj sharma" <[EMAIL PROTECTED]> wrote: > > Hi Tim > In the trackSkin as shown by your code, you are embedding some png files.Do > i have to embed files too and also what's the content of that file. Deos > that file have just the rectangle showing my desired width and height > because when i am trying to put the simple 'width' tag within the trackSkin, > Flex builder is not letting me do that. So i am not sure how should i use > trackSkin for my purpose. > You have send me the code which helps me but I am not sure what's the output > of the code looks like (and which type of PNG files are you using). Can you > please send me the snapshot/sketch of the UI being generated with the code. > Sorry for being pain but its taking little time for me to understand the > styling and skinning concept of the HBox. > I appreciate your patience > Thanks a lot > Anuj > > > On Tue, Sep 9, 2008 at 11:52 AM, Tim Hoff [EMAIL PROTECTED] wrote: > > > > > Yeah IIRC, I think that you're going to have to add the track skin, with > > the desired width, otherwise the button images will get scaled. > > > > > > -TH > > > > --- In [email protected] <flexcoders%40yahoogroups.com>, "anuj > > sharma" anuj181@ wrote: > > > > > > Alright guys. > > > I have downloaded 2 dummy png files from internet (Left_arrow.PNG & > > > Right_arrow.PNG) just to test if technique works . Belw is the css > > code > > > which i am calling in HScroll Bar for HBOX and attached is the image > > of how > > > it is looking . The images used are very big but it is not showing its > > > actual size for the arrows and it is shrinking the images to take the > > size > > > of the arrows in the scroll bar whereas my requirement is the other > > way. > > > Basically i need to create image of my own size and i need the arrows > > of the > > > scroll bar to take the size of that image. This is the first time i am > > > doing something like this. Please let me know which link i am missing > > to > > > make arrows of the scroller of my custom size, look and feel. > > > /* CSS file */ > > > HScrollBar > > > { > > > downArrowUpSkin: Embed(source="assets/images/Left_arrow.PNG"); > > > > > > upArrowUpSkin: Embed(source="assets/images/Right_arrow.PNG"); > > > > > > } > > > Thanks a lot guys > > > Anuj > > > > > > > > > On Tue, Sep 9, 2008 at 10:55 AM, Tim Hoff TimHoff@ wrote: > > > > > > > Hey Anuj, > > > > > > > > Here's some sample CSS to get you started. You might have to play > > with the > > > > scale9 values; depending on the images that you create for the > > skins. > > > > > > > > VScrollBar > > > > > > > > { > > > > downArrowUpSkin: > > Embed(source="assets/images/VscrollDownArrow_up.png" > > > > ); > > > > downArrowOverSkin: Embed(source= > > > > "assets/images/VscrollDownArrow_over.png"); > > > > downArrowDownSkin: Embed(source= > > > > "assets/images/VscrollDownArrow_down.png"); > > > > upArrowUpSkin: Embed(source="assets/images/VscrollUpArrow_up.png"); > > > > upArrowOverSkin: > > Embed(source="assets/images/VscrollUpArrow_over.png" > > > > ); > > > > upArrowDownSkin: > > Embed(source="assets/images/VscrollUpArrow_down.png"); > > > > > > > > thumbDownSkin: Embed(source="assets/images/VscrollThumb_down.png", > > > > scaleGridTop="40", scaleGridBottom="200", > > scaleGridLeft="6",scaleGridRight= > > > > "8"); > > > > thumbUpSkin: Embed(source="assets/images/VscrollThumb_up.png", > > > > scaleGridTop="40", scaleGridBottom="200", > > scaleGridLeft="6",scaleGridRight= > > > > "8"); > > > > thumbOverSkin: Embed(source="assets/images/VscrollThumb_over.png", > > > > scaleGridTop="40", scaleGridBottom="200", > > scaleGridLeft="6",scaleGridRight= > > > > "8"); > > > > trackSkin: Embed(source="/assets/images/track.png", > > > > scaleGridTop="40", scaleGridBottom="336", > > scaleGridLeft="6",scaleGridRight= > > > > "8"); > > > > } > > > > > > > > -TH > > > > > > > > > > > > --- In [email protected] <flexcoders%40yahoogroups.com>, > > "anuj sharma" anuj181@ wrote: > > > > > > > > > > :-) > > > > > Yeah i will try to look for how to add skins to the flex > > components and > > > > if > > > > > you guys have seen any better tutorial/sample code/ swf which are > > doing > > > > then > > > > > the pls keep me posted. > > > > > Hopefully i will achieve that. > > > > > Thanks for your help Alex and Tracy. > > > > > Anuj > > > > > > > > > > On Tue, Sep 9, 2008 at 10:00 AM, Alex Harui aharui@ wrote: > > > > > > > > > > > Yes, if you want a bigger scrollbar, just try adding larger > > skins > > > > > > > > > > > > > > > > > > > > > > > > *From:* [email protected] <flexcoders%40yahoogroups.com> > > [mailto:[email protected] <flexcoders%40yahoogroups.com>] > > > > *On > > > > > > Behalf Of *anuj sharma > > > > > > *Sent:* Tuesday, September 09, 2008 9:33 AM > > > > > > *To:* [email protected] <flexcoders%40yahoogroups.com> > > > > > > *Subject:* Re: [flexcoders] Is it possible to increase the > > heigth and > > > > > > width of scroll bars in any container? > > > > > > > > > > > > > > > > > > > > > > > > Hi Alex > > > > > > By RIIC do u mean "If I Remember Correctly", if that's the case > > sorry > > > > for > > > > > > not being familiar with internet slang. So do you think if i > > create > > > > bigger > > > > > > skins and attach with the scoll bar that should be able to take > > care of > > > > the > > > > > > sizing issue of the scroll bar. > > > > > > Thanks for your help > > > > > > Anuj > > > > > > > > > > > > On Mon, Sep 8, 2008 at 11:00 PM, anuj sharma anuj181@ wrote: > > > > > > > > > > > > Hi Alex > > > > > > Thanks a lot for the reply. What exactly is IIRC? I googled it > > but > > > > could > > > > > > not find enough good resources. Do you have any article which > > clears > > > > the > > > > > > concept of IIRC. I would appreciate if you can give some more > > > > info/links. > > > > > > Again many many Thanks > > > > > > Anuj > > > > > > > > > > > > > > > > > > > > > > > > On Mon, Sep 8, 2008 at 5:17 PM, Alex Harui aharui@ wrote: > > > > > > > > > > > > IIRC, scrollbars size to their skins so make the skins bigger > > and the > > > > SB > > > > > > should be bigger, but if you want to go smaller than 16, it is a > > lot of > > > > > > work. > > > > > > > > > > > > > > > > > > > > > > > > *From:* [email protected] <flexcoders%40yahoogroups.com> > > [mailto:[email protected] <flexcoders%40yahoogroups.com>] > > > > *On > > > > > > Behalf Of *anuj181 > > > > > > *Sent:* Monday, September 08, 2008 3:54 PM > > > > > > *To:* [email protected] <flexcoders%40yahoogroups.com> > > > > > > *Subject:* [flexcoders] Is it possible to increase the heigth > > and width > > > > of > > > > > > scroll bars in any container? > > > > > > > > > > > > > > > > > > > > > > > > Hi Guys > > > > > > I have a general question. In general any scroll bar in > > > > > > container(either VBOX or HBOX etc)is (by default)16 pixels wide. > > Is it > > > > > > possible to change the width and height of any scroll bar for in > > built > > > > > > containers. Also for styling those scroll bars and scroll er > > within > > > > > > the container do i have to use CSS or there is any other way > > too.(By > > > > > > styling i mean if I can give my own look and feel and color to > > the > > > > > > scroll bars in containers). > > > > > > Reply will be appreciated. > > > > > > Thanks guys > > > > > > Anuj > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > >
