TCPmaker : Visual Tour    Advanced Properties of Controls  

Page 1


For your convenience, most of TCPmaker's controls have a fixed size and orientation. That makes it easy for you to work with them, without having to adjust a lot of parameters in order to do something that should be quick and easy.

Sometimes, though, you may want to do something unusual, either for some special visual effect, or to visually emphasize some element of your design, or to change the orientation of, say, a Text control.

You'll find some powerful tools available in the Advanced Properties group at the bottom of the group bar on the left of the Lay Out Your Page(s) tab of the Visual  Page Designer. 

  Click on the image for page view.




Page 2


In the screen shot below, we have selected the green Pushbutton control, and have made the background a kind of rust color.  These might not be the colors you would choose for your project, but they provide sufficient contrast to show some things here.

The top two controls in the Advanced Property group are labeled _x position and _y position, and they show the current position, in pixels relative to the upper left corner of the stage, of the refererence origin of the TCPmaker control you have currently selected.  (We have selected the green Pushbutton at the moment.) 

You will find that if you drag the selected TCPmaker Control to another location, the values displayed for _x and _y will change. So why do you need these two controls on the Advanced Page, when you can simply drag a Control with the mouse?

The answer is: precision. You can type the coordinates you want into these _x and _y controls to position your selected TCPmaker Control precisely where you want it, e.g. to make it exactly line up with some other TCPmaker control.  Or, you can use the up and down "buddy" arrows on these SpinEdit controls to "nudge" your selected Control into just the right position.

 

  Click on the image for page view.




Page 3


The _alpha control adjusts the transparency of your selected control. This property is a an expression of a percent of opacity.

An _alpha value of 100 is fully opaque (i.e. not transparent at all).  At the other extreme, an _alpha value of 0 makes the control completely invisible.  (That might not seem too useful at first, but sometimes it is useful to make a control disappear when it would not be appropriate for the user to be able to click on it.) 

There are a lot of cool visual effects that you can get by using _alpha values that are in the mid range.  Compare the screen shot below with that of the previous page of this tutorial. Notice that, at _alpha = 50, the color of the Pushbutton has changed, and the lettering looks somewhat washed out, making it appear that this Control is disabled.

Note that we had to check the _alpha checkbox above the SpinEdit control before we were able to even adjust the value of _alpha away from its default value of 100 (percent).

We will have much more to say about how and when to use _alpha transparency as we go along.

  Click on the image for page view.




Page 4


Check the _rotation checkbox, and then adjust the value of the SpinEdit just below it, to rotate the selected control.

This is especially useful for rotating Text items, as the two text item examples on the Stage show.

Notice that the direction of _rotation may be the opposite of what you might expect: a positive angle is clockwise from horizontal. To make a 90-degree rotated text item read in the usual way, i.e. from bottom to top, you need to set the _rotation to -90 degrees.

It may surprise you to know that all controls, even the Horizontal Slider, will work perfectly even when rotated.  We don't know why you might want to orient your slider at -43 degrees as we've done here, but we hope it's comforting to know that you can!

 

  Click on the image for page view.




Page 5


The scale factors _xScale and _yScale allow you to stretch or compress the size of a control in the horizontal or vertical direction, or both, relative to the default size of +100 (percent).

One obvious use is to adjust the size of any control.  Although our controls are mostly fixed size by default, you can use _xScale and _yScale to make them any size you want.  Note that any lettering that is inside a control is scaled proportionally with the rest of the control.

These scale factors can be negative as well, to mirror the control about one or both axes. We've used this capability to add a "reflection" of the text item that reads "_yScale = +100". By adjusting the _yScale value to -80, the reflection is mirrored about the horizontal axis and foreshortened in a realistic way.  Setting _alpha = 50 makes the reflection look dim, and nudging the _x position and _y position controls lines up the reflection just the way we want.

  Click on the image for page view.




Page 6


You can also change a control's width and height in units of pixels directly, using the _width and _height properties. Doing this will scale all text in the control proportionally.

Neither _width or _height can have a negative value the way _xscale and _yscale can, so you cannot flip controls with the _width or _height properties.

The _width and _height properties are most useful for scaling a control to some exact size in pixels, in order to make it exactly line up with other elements of your design.

  Click on the image for page view.



Text Author: Dr. Bob Miller   Copyright Notice and Author Information