Modify Stretchy Button - Howto?

[Lexje]

Hi folks,

Being fairly new to this forum and to XTP and XWD in general please point me in the right direction if this question has already been treated elsewhere :-)

My Goal:
To create a Button and a Bar similar to the 'glowing' gel-like bar present on PortableApps.com
I'd like it to be darkish blue instead of the darkish red on the site.

I've tried to modify 'Stretchy Button' present in the Designs Gallery in the Buttons folder.

Question 1:
As I intend to have the darker part up - I'd like to rotate the button 180°. Next I'd have to rotate back the text a 180° again.
To achieve this, I have to ungroup or remove the softgroup.
This is all okay.

But how do I regroup again to get the identical functionality of the button back? Each time I tried, it seems I lose the white color change during MouseOver....

Question 2:
What is the recommended way to change the color of this button?
I've followed through the guide to creating gel-buttons previously and remember to be able to choose the color by selecting / changing the hue, but how can I do this with this type of button?

Also - How can I manipulate the "Match color" ability? Is there anything similar to "M$ Format Painter"?

Thanks a lot for your suggestions!

Erwin

[Boy]

I suggest you post the .web file with the modified button.

[Lexje]

Here you are...

[bcire68]

Hi Erwin,

Stretchy Buttons can be tricky. Normally it is best to modify the buttons that are in the designs gallery by editing the named colors. In your case you wanted to swap the colors around that were in the button. You can do this by selecting the fill tool and clicking on the object within the group (if it is not completely covered by another object). This will show the fill of the object. In this case it is a linear fill and will show an arrow with a box at each end (and maybe more along the way). Each box represents a color. Simply click on a box (with the fill tool still selected) and right click on a color in the color bar. Choose the option 'Set Fill Handle Color' and the color for that point on the fill arrow will change. Repeat the process for each fill handle that you want to change and you should be done.

Another way to do it is just to rearrange the linear fill arrow so that the arrow is pointing the other way. (i.e. down instead of up) If you do that you will have to move the start and the end of the arrow. Again you will do this with the fill tool selected as above.

I find it easier to just create my own if I am going for a particular look. This can be done in Xara Xtreme or Xara Xtreme Pro, but not in Xara Web Designer. In the spirit of helping out and without knowing exactly what you were going for, I created a stretchy button for you. Hope it helps.

Eric

[Lexje]

Eric, thanks for your effort and the information given.
I'll have a shot at it following your instructions and report back.

Erwin

[Boy]

Erwin, I first looked at the button you modified. What I noticed was that the grouping was not correct. What you could do is drag a new copy of the button next to the one you modified and compare them. When you click on the modified button, you can see in the status bar (on the bottom of the screen below the color bar) that it says "5 objects (Soft Group) on layer MouseOff. Now click on the freshly imported button. It says "2 groups (Soft Group) on 2 layers.

A button should always contain elements that are (at least) on two layers: the MouseOff layer and the MouseOver layer and per layer these elements should be grouped and, only then, soft-grouped.

So, if you want to edit a button, make sure that both layers are visible and editable (at least in the beginning) so you see what you're doing. Next, un-softgroup them. If you want to edit the button's MouseOff state, make the sure that the MouseOver layer is invisible and uneditable (or v.v. if you want to edit the button's MouseOver layer). Now your button is just one group that includes a variety of graphic and text elements.

To edit individual elements, you can do two things: either you ungroup them first or click on an element that you want to edit while pressing the Ctrl-key. If you ungroup them, make sure that after you're done editing the various elements you select all of them and then group them.

bcire68 has already explained some of the ways to change the colors, so I won't say much about that, except that you can change a button's so-called 'Themed Colors' all at once by using 'Named Colors'. Check the 'Color Handling' chapter in your XWD help file for more information.

Hope this helps. Good luck!