Add a Background to the Logo

Now that the logo has been added to the window it would be nice to put a border around it and further tidy the UI up.

The Current State of Affairs

The Current State of Affairs

We will now add a border around the logo. The video player window should look similar to this.

Draw a Rectangle Graphic

Draw a Rectangle Graphic

Select the Rectangle graphic tool in the Tools palette.

Draw Rectangle

Draw Rectangle

Draw a rectangle around the logo.

Edit Rectangle Properties

Edit Rectangle Properties

Make the graphic opaque by checking the Opaque checkbox in the Basic Properties pane of the rectangle graphic's inspector.

Set Rectangle Width

Set Rectangle Width

The rectangle that was just created is going to be the same width as the field displaying the list of videos. You can see the width of the field by selecting it (1) and looking at the Size & Position pane in the property inspector (2). The width field displays the width of the field (3).

Make note of the width as you are going to assign the same value to the graphic.

Now select the graphic (1) and set the width in the property inspector. Since the field is 250 pixels wide the graphic is going to be 250 pixels wide (2).

Align the Logo and the Graphic

Align the Logo and the Graphic

Now that the graphic is the right width you will center the logo within the graphic.

Select the Graphic & the Logo

Select the rectangle graphic and the logo (hold down the SHIFT key to select multiple objects).

Align Objects Using Property Inspector

Align Objects Using Property Inspector

When multiple objects are selected the property inspector includes an Align Objects pane. Click the Align Objects Center and Align Objects Middle buttons to align the graphic and the logo.

The result should look like this.

Group the Graphic and the Logo

Now you are going to group the logo and the rectangle graphic. Grouping multiple objects enables you to treat all of the objects as one single object. This can make it easier to reposition the objects on the screen.

With both the logo and the rectangle graphic still selected select the Object > Group Selected menu item.

After grouping the objects the group will be selected.

Look at Group in the Application Browser

Look at Group in the Application Browser

While there are no visual cues in the window that the graphic and logo are grouped you can see that they are in the Application Browser. To open the Application Browser choose the Tools > Application Browser menu item.

The Application Browser

The Application Browser

The Application Browser shows all of the controls in your stack window. To see them the group you just created do the following:

1) Expand the arrow next to the Video Library stack.

2) Click on the card that appears under the stack.

3) Make sure that the list of controls is sorted by Layer.

As you can see, the rectangle and logo are grouped together.

A Note About "Select Grouped"

A Note About "Select Grouped"

Now that you have grouped two controls together it is worth mentioning the Select Grouped feature of the Revolution IDE.

When Select Grouped is turned on (the text appears bold in the toolbar or the menu item is checked in the Edit menu) any control you click on will be selected, even if the control is in a group.

When Select Grouped is turned off clicking on a control selects the group that the control is in.

Make sure that Select Grouped is turned off for the time being.

Set Margins of Group to 0

Set Margins of Group to 0

Now you will want to left align the group you just created with the video list. Before you do that you should change the Margins property of the group to 0.

When you select the group you will notice that the selection handles are offset slightly from the sides of the graphic (1). This is because the margins property of a new group defaults to 4 pixels. If you were to use the IDE alignment tools to align the group with the video list the group would end up 4 pixels off of where you actually wanted it to appear.

In the Text Formatting pane (2) of the group property inspector change the Margins property to 0 (3).

Left-Align Logo Group and Video List

Left-Align Logo Group and Video List

When aligning objects in Revolution all objects are positioned relative to the FIRST object that you select. Since the video list is already in the proper position select it first. Then hold down the SHIFT key and click on the logo group to add it to the selection.

In the Object Inspector make sure the Align Objects panel is displayed (1). Click on the Align Objects Left button (2).

Now the left edges of the logo group and the video list line up.

Tidy Up Position of Controls

Tidy Up Position of Controls

Now select the list of videos and resize it using the selection handles. Make the bottom of the field match up with the bottom of the video. You can select objects and use the arrow keys on your keyboard to fine-tune their position.

The Final Result

The Final Result

Now the logo has a nice border around it and all of the controls appear more balanced.

0 Comments

Add your comment

E-Mail me when someone replies to this comment