Inserting elements

It might be a silly questions to many of you - I’m completely new to this scene. I wish to use a line in my animation, but have no idea how to “draw” it. I can insert text, buttons, rectangles, ovals, …what about a simple line? How do I do it?

You can insert a rectangle, set the fill to none, then use the representation in the Element inspector, click on the edge you want to use as a line, click on the width arrow and use the color well to set the color.

Note that you can use this for double lines, etc. Play with it and, by adjusting the corner radius, you can even get half moon shapes, etc.

1 Like

Hi Trey, thank you for reply.
ok, got that far. …ooh, I’m so new to this.
Does it mean I can only have vertical and horizontal lines?

You can rotate elements using the metrics inspector or by holding ⌘ and dragging an element corner:

Note that when you rotate it, the width and height remain relative.

Let’s say you want to create a callout that starts next to a bullet point and stretches to touch another object on the page.

Create a box a couple of pixels wide with a stroke at the top edge, set the transform origin to 0/0 (the top left corner), position it next to the bullet, set starting and ending keyframes for the width , go to the second keyframe, then drag the right edge to the desired width. At this point you can rotate it to align with the desired endpoint. At this point you can change the width and the line will follow the angle you have set.

You can combine this with imported art, such as an arrowhead. Before performing the rotation, align the arrowhead with the right end of the stroke and animate the position of the arrowhead to move in sync with the width. Now select the rectangle and the arrowhead and group them. Select the group object, set the horizontal transformation point to 0, and nudge the vertical point so that it aligns with the stroke. At this point you can adjust the rotation. (11.8 KB)

Thank you Daniel and Trey,
I am actually trying to create a callout, except I want my callout to be built out of two lines: first line at the angle (with, or without an arrow) and the second one horizontal. The text would be sitting above the horizontal line. I’m a structural designer originally and this sort of detailing was my second nature using Revit. With Hype is obviously slightly different.
…not sure if this attachment worked? (311.7 KB)

If you insert a text object and go to the element inspector, you’ll see that it has the same stroke controls as other objects. In this situation, you can simply add a stroke to the bottom edge of the text box, without requiring an extra rectangle. One other thing: the height of the text box (affecting the bottom of the text box) can also be controlled by the line height setting in the typography inspector.

This is similar to what I do for inserting a pipe character in horizontal menus. I stroke only the right edge of all but the rightmost button. If I need to adjust the width of the button, the pipe takes care of itself.