To make a shape dynamic:
Of course, a single frame may contain many shapes.
To create a Frame, simply select the “Frame” tool from the toolbar, then click and drag in the canvas.
Frames are not shapes. By themselves, they do not draw anything. However, they affect the generated code. Frames also affect the dynamic behavior of shapes inside them.
Dynamic shapes derive their sizes and coordinates from their enclosing frames.
When you resize a frame in the canvas, all derived shapes are resized/moved around, too. To suppress this behavior, hold down the COMMAND key while resizing the frame.
You can define the resizing behavior of a shape using the resizing constraints in the Inspector:
These constraints define the relationship between a shape and its frame. There are six constraints: left, right, top, bottom, width and height.
When defining the relationship between shape and its frame, horizontal constraints (left, width, right) are entirely independent from vertical constraints (top, height, bottom). For clarity, we will only describe the behavior of horizontal constraints.
Each constraint can be either rigid or flexible.
The left constraint represents the distance between the left side of the shape and the left side of the enclosing frame. When the left constraint is rigid, WebCode will make sure that no matter how you resize the frame, the left side of the shape will maintain a constant distance from the left side of the frame. When the left constraint is flexible, WebCode will try to make the corresponding distance as large as possible, respecting the other two (width, right) constraints.
Width and right constraints work similarly. With specific combinations of rigid/flexible constraints, you can achieve a wide variety of useful behaviors.
WebCode creates the frame hierarchy automatically for you, taking the positions and sizes of the frames into account. By default, all shapes that are fully or partially inside a frame belong to that frame.
In some situations, it is desirable that frame only affects shapes that are entirely enclosed by it. You can turn on this behavior by checking the "Apply only to entirely enclosed shapes" checkbox in the frame Inspector:
If a shape belongs to multiple frames, the smallest of these frames is used as the reference frame for the shape.
For simple shapes such as rectangles and ovals, it is sufficient to specify their resizing behavior with the resizing constraints. However, you need a finer control for beziers.
The differences are:
Since control points do not have width and height, the constraints control is simpler:
You have 4 constraints: left, right, top, bottom. Each of them can be either rigid or flexible.
When the left constraint is rigid, the control point will maintain a constant distance from the left side of its reference frame. Analogously, when the right constraint is rigid, the control point will maintain a constant distance from the right side of its reference frame.
When both left and right constraints are flexible, the control point maintains the same relative position inside the reference frame. For example, imagine the frame is 300 pixels wide and the control point is 100 pixels from the left side of the frame. When you resize the frame to be 600 pixels wide, the control point will be 200 pixels from the left side of the frame.
It is not possible to have both left and right constraints rigid.
It is possible to achieve complex resizing behavior by setting resizing constraints for individual control points. Moreover, since you can use multiple (or even nested) frames, creating many interesting behaviors is simple.
Frames and constraints have much wider range of uses than just a resizing: