The Xara Trompe L'Oeil Room Page 12
HOME
1
2
3
4
5
6
7
8
9
10
11
12
13

I created a new rectangle and positioned it directly over the BackBar where the first button was just created.

The rectangle and BackBar were copied to the clipboard.

The Duplicate Distance in the Page Options > General tabbed section was changed to -20 pixels. (Down 20 pixels). The Vertical Duplicate Distance was set to 0.

The rectangle and BackBar group were selected and Combine Shapes > Intersect Shapes (Arrange menu) applied creating the first new button shape.

The clipboard elements were pasted back onto the page (Shift Ctrl V). The rectangle was duplicated (Ctrl D) which offset it down exactly 20 pixels. The two elements were selected and Combine Shapes > Intersect Shapes repeated. This process was repeated until all six new button sections were created.

The new buttons precisely match the background of the Button Bar.

All the Intersected Shapes elements were ungrouped and text was added to the button and optically centered over each yellow leaf shape.

Three duplicate sets of buttons were created and different effects applied to each.

The Mouse Off buttons are invisible and will appear to be just text.

The yellow portion only of the Mouse Over buttons has been Flat beveled, To Inside.

The yellow portion of the Mouse Down buttons has been beveled and the Light Angle reversed.

The Selected Page buttons are the same as the Mouse Over except the bevels have been colored green by dragging and dropping green from the screen palette onto the bevels.

Each button (all that is within the rectangular shape) was exported replacing the existing buttons and using the current button names. This is easy to do, select the elements for the first button, export to the same folder the Button Bar images now reside in, find the appropriate button state name and select it. Xara will ask if you wish to replace the current image. Assure Xara that this is what you have in mind and save the button.

Because the current HTML and Java scripts contain the names for all the elements, next time you open the page in your browser, it will replace the old buttons with the new ones you just created and no one will be the wiser.

And that's it in a nut shell. Seems so easy once you figure out how to do it.

Click Here to see the Organic Interface in action. (The unfortunate white rectangle that you see when you press the buttons, goes away after the pages are cached in the Browser. Something for the Xara development team to work on.

So what do you think? Did you learn anything new in this tutorial? Was it too hard, too easy, just right? Please use the form on the next page to drop me a note and let me know what you think.