In the last tutorial, we created our first Hype Pro document and examined the Element Inspector. In this tutorial, we will explore the Metrics Inspector and how to manipulate an element on the screen.

There are several ways to manipulate an object in the Scene Editor. Let’s take a look at some of the very basic tools. Most of the tools we will be using are in the Metrics Inspector.

You should still have the document open that we created in the previous tutorial. At this point we have the grey circle at the center of the screen.

1. Click on the Metrics icon in the Inspector and let’s take a look at what controls we have there.
   
   As you can see, we have controls for the content overflow, the placement of the object on the screen, the scale of the object, rotation and the transform origin (anchor point).
   
   Notice the Left and Top Placement locations of our circle are 461 px and 333 px.
   
   
2. Let’s change the circle’s position on the screen. Click and drag the circle to the upper left corner of the screen, such as 50 pixels from the left and top of the screen. If you need to position an element precisely, use the controls in the Metrics Inspector.
   
   
3. We can also change the pixel Width and Height of the circle. For example, let’s increase the Width and Height to 200 pixels. If we check the box for Constrain Proportions, both measurements will increase together.
   
   Similarly, we can increase or decrease the Scale of the circle by changing the percent value in the Scale section.
   
   For the next example, let’s add a rectangle to the screen.
   
   
4. Click the Elements icon in the Toolbar and choose Rectangle. Again, the shape will be placed in the center of the screen.
   
   In the Metrics Inspector, we have Rotation controls for the X, Y and Z axis, which all have a value of 0. We also can move the anchor point for the rectangle by using the Transform Origin X Offset controls. By default the X Offset is set to 50%, because the anchor point is at the center of the shape.
   
   Let's verify that the anchor point is at the center of the rectangle.
   
   
5. While holding down the Command key, place your mouse cursor over the rectangle. You should see the anchor point appear at the center of the shape.
   
   Let’s try to manipulate the shape with our mouse, by rotating it on the screen.
   
   
6. To rotate the rectangle, select the rectangle again and hold down the Command key. This time, place the mouse cursor next to the shape until you see the double arrows. Drag you mouse to rotate the shape.
   
   As you can see, the shape rotated on the anchor point at the center of the shape and the Rotation value for the Z axis has changed. Let’s see what happens if we manipulate the shape with our mouse, by moving the anchor point.
   
   
7. Hold down the Command key and place your cursor over the shape. When you see the anchor point at the center, click on the anchor point and drag it upwards. Notice that the Transform Origin X Offset values have changed in the Metrics Inspector.
   
   Now when we rotate the rectangle, it will now rotate on the new anchor point position.
   
   

Back