EDOBE XDOM EM Bedienungsanleitung PDF herunterladen (Seite 45)

Create animations using the Timeline

Last updated 6/15/2014

Rectangles: Building a Basic Box

Using the Rectangle tool (M), you can add blocks of color to the stage. These blocks are great if you want to differentiate

portions of the web page. For example, perhaps you want to make a sidebar. Add a rectangle, and then you can place

text or graphics over the rectangle, setting it off from the rest of the page. Chances are you know the basic drill for

creating a rectangle. Click the Rectangle tool on the Tools palette, and then click and drag on the stage to mark its shape.

To create a square, hold the Shift key while you drag. The new element appears on the stage, and it’s automatically

selected, so you see eight white squares around the border that represent handles (Figure 21). You can continue to

change the size and shape of the rectangle after it’s drawn by dragging the handles. Here are the basic properties that

describe your rectangles:

• ID. As soon as you draw a rectangle on the stage, it’s listed in the Elements panel. When the rectangle is selected, its

properties appear in the Properties panel. As with all your Animate elements, you probably want to give your

rectangle a meaningful ID, such as LeftSidebar or Header. Otherwise, you’ll be searching through Rectangle1,

Rectangle2, and Rectangle3 trying to find the one you want. To rename your rectangle, select it and change the ID

at the top of the Properties panel. As an alternative, you can double-click the name in the Elements panel.

• Tag. Check out Rectangle in the Elements panel and see <div> after the name. Your rectangle is automatically

assigned an HTML <div> tag. Animate uses these tags to identify, position, and transform elements. With other

Elements, Edge Animate lets you choose different tags. For example, when you add a photo to your animation, there

are good reasons to use a <img> tag instead of <div>.

• Position. Underneath the name in the Properties panel, you see the Position and Size properties. The upper-left

corner of the stage is referenced as X=0, Y=0. Moving from left to right increases the X value. Moving from top to

bottom increases the Y value. Initially, your rectangle’s position is referenced by the upper-left corner. You can

change that reference point, using the “Relative to” tool. It looks like a box with a square at each corner. Suppose you

need to position an element a certain distance from the lower-right corner of the stage: you may want to use the

lower-right corner of your element as a reference point. In that case, just click the lower-right square in the “Relative

to” box.

• Size. Next to the Location properties are the Size properties: W (width) and H (height). These change automatically

when you drag a rectangle’s handles. You can also type in or scrub in a specific number. Initially for rectangles, the

size properties use pixels as the unit of measure. However, you can change from pixels to percentage. So a rectangle

with a width of 20% would be 20 percent of the width of the stage. Use the link next to the W and H properties to

lock and unlock the aspect ratio for your rectangle. When the Link Scale is unbroken, changing one dimension

automatically changes the other so that the rectangle stays proportionate. When the link is broken, you can change

W and H independently.

• Display. Some elements are always on stage while others may come and go. The Display menu gives you a way to

easily hide an element until it is needed. Your three choices include: Always On, On, and Off.

• Overflow. The overflow control for your rectangle works like the one for your stage, except it explicitly applies to

the rectangle.

• Opacity. Use the slider near the top of the Properties panel when want to control the Opacity of the entire rectangle.

When you want to adjust the opacity of the border or background independently, click their color swatches

(explained under Color) and change the A (alpha property).

• Color.Rectangles have two basic parts: border color and background color. Border color marks the outer edge of the

rectangle, while background color is the color inside the box. (Other programs sometimes call these properties

stroke and fill.) You can assign separate colors to the border and background, or you can make them transparent by

setting the Alpha channel to zero. There are two additional properties for the stroke. You can set the size in pixels

(px) and you can choose among a solid stroke, a dashed stroke, a dotted stroke, or none—no stroke at all. The toolbar

at the top of the workspace gives you another way to quickly change the background and border color of a selected

element. It works just like the color picker in the properties panel.

1 2 ... 40 41 42 43 44 45 46 47 48 49 50 ... 137 138

Kommentare zu diesen Handbüchern

Keine Kommentare

EDOBE XDOM EM Bedienungsanleitung Seite 45

Kommentare zu diesen Handbüchern