As the name implies, Animate is an animation management tool. Using Edge Animate, you determine what elements show on the stage, their position, and their appearance. You can create text and simple visual elements within Animate, but it’s likely that you’ll create more complicated artwork in some other program like Illustrator, Photoshop, or Fireworks.
This chapter examines what types of graphics you can and can’t create within Animate. It starts off by defining the stage and the ways you can modify it. You’ll learn about all the properties of the rectangle and rounded rectangle. With creativity, you can also create some distinctly non-rectangular shapes. Along the way, you’ll learn how to quickly align and arrange objects on the stage and test-drive the transform and clipping tools. But you’re not stuck in Animate: You’ll also learn how to import artwork from your other favorite applications, such as Illustrator or Fireworks (and you’ll get some tips about the best free graphics programs you can find on the Web).
As the Bard said a few hundred years ago, “All the world’s a stage.” That’s certainly true in Edge Animate. As explained in Chapter 1, when you place an element on the stage, it’s visible to your audience. There are a couple of ways to hide or remove elements from the stage. If you have the stage Overflow properties set to hidden, then you can exit stage right, left, top, or bottom by moving the element off stage. At least, it’s not visible when viewed in a browser. The Hello World exercise also demonstrated how to perform disappearing acts by using the Opacity property.
The stage that you work with in Edge Animate represents a portion of a web page when it’s viewed in a browser. The stage has a limited number of properties. The most obvious are its dimensions and background color, but you’ll want to understand them all. Here’s the rundown starting from the top of the Properties panel:
The ID, as you might guess, is the name of your animation. When you save a project, Animate creates a web page, also known as an HTML document. Most browsers show the ID of the web page in a tab or the window’s title bar.
Initially, stage dimensions are shown as W (width) and H (height) properties in pixels. No big surprises here. You can type in or scrub in the width and height of the stage. The stage doesn’t have to appear in the upper-left corner of a web page; on Placing Your Composition in an HTML Document, you’ll learn how to reposition it. For example, if your Animate composition is a banner ad, you might create a tall, narrow stage and then position it on the left side of the page.
Use the link next to the W and H properties to lock and unlock your stage’s aspect ratio. When Link Width and Height is unbroken, changing one dimension automatically changes the other so that the stage stays proportionate; when the link is broken, you can change W and H independently.
You can change the measurement from pixels (px) to a percentage (%). For example, if you set the stage width to 80%, the stage will be 80 percent the size of the web browser window that it’s viewed in. This feature is great if you’re developing a page for computers, tablets, and phones. What’s more, if the browser window is resized, the stage automatically adjusts to the new size. For more details on designing pages for multiple screen sizes, see the box on Gracefully Resizing Elements for Browsers. Chapter 10 covers publishing issues and includes more details about designing pages that respond to the size of devices and web browsers.
The background color is set using a color picker. In the Properties panel, click the color swatch and a color picker appears, as shown in Figure 2-1. Click the bar (also called the spectrum) on the left to choose a hue, and then click in the larger square to fine-tune the shade. The circle is positioned over the selected color, and the swatch in the lower-right corner displays it. The three swatches at top right make it easy to quickly choose a white, black, or transparent background. If you work with a team, you may be given a color spec in RGB or hexadecimal formats. On the other hand, if you’re calling the shots, you may want to specify a color for other designers. For the details on specifying a color by numbers, see the box on Understanding Color Specs and the Color Picker.
Use Min W and Max W to set the minimum and maximum width for the stage. Web pages aren’t a fixed size. Your page may be viewed on a smartphone or a big screen TV. On top of that, your audience may resize the browser window. You can gain some control over how your project looks by setting a minimum and maximum width. You can use pixels to set an absolute value or you can use a percentage for responsive designs. Initially, Max W is set to none. To turn it on, click the label and deselect none. At that point, the value appears in the panel and you can make adjustments.
The Overflow menu controls the way elements appear when they’re offstage. Often, you’ll want to set this menu to hidden, which makes elements outside the stage’s rectangle invisible. The hidden option works well when you want to have elements enter and exit the stage. If you set the menu to visible, elements that move beyond the boundary of the stage remain visible as long as there’s room on the web page. The scroll option places scroll bars at the right and bottom of the stage, making it possible to view elements that move outside the specified dimensions of the stage. The auto option automatically adds scroll bars if content exists beyond the confines of the stage.
Use the Autoplay checkbox to tell your animation to automatically run when its web page is loaded in a browser. If the box is turned off, you must use a JavaScript trigger to run the animation.
The Composition ID is used to identify this particular stage and its accompanying timeline. This becomes important when you have more than one Animate composition on a single web page. You’ll learn more about this in the JavaScript chapters.
The Down-level Stage and Poster properties create alternative elements for web browsers that aren’t HTML5 savvy.
The Preloader is responsible for loading all the resources needed to display your composition on a web page. Those resources include JavaScript libraries and graphics. You’ll learn more about these controls in Chapter 10.
You can change your view of the Stage in Animate. Initially, you see it Actual Size—that is 100%. This gives you a good idea how it will look in a web browser. When you’re doing intricate work you may want to zoom in for more precision. Press Ctrl+= (⌘-=) and everything gets bigger. If you’re working with a large stage there may be times when you want to zoom out to get the entire picture. The command for that is Ctrl+_ (⌘-_). In the lower-left corner of the stage, there’s a magnifying glass icon and a number that indicates the current zoom level as a percentage. You can use it to adjust the view, too. Just click type in a number or click and drag to scrub in a new value. When you want to quickly jump back to actual size, press Ctrl+1 (⌘-1).
Tip
If you use other Adobe tools, the shortcut keys for zooming in and out are probably familiar. If you’re knew to the Adobe realm, you may wonder, why the odd commands? Take a look at your keyboard and you notice that the equal (=) character shares space with the plus (+) character. The underscore (__) shares space with minus (-). It’s easier to remember these commands if you think plus and minus. Just don’t hold down the Shift key when you use them.
You can scroll your view of the stage, just like you scroll around a browser window to change the view, using your mouse or touch pad. After you move up or down, left or right, there’s a quick way to center the stage in the window. Click the button the button in the lower-left corner of the window that looks like a gun sight.
In its current incarnation, Edge Animate’s drawing tools are limited—no pen tool, no gradients. Why is its art so primitive compared with other Adobe products such as Flash or Illustrator? Part of the reason is that Edge Animate is new. It’s likely that Adobe implemented the graphics features that were easiest first and that Animate will become more full featured over time. Keep in mind that every time you create a graphic object in Animate, it’s busy behind the scenes writing code in JavaScript to describe that object. If you’re a conspiracy theorist, you might think Adobe wants you to spring for Illustrator or one of the other artist’s tools it sells in its Creative Suite. In fact, if you want to create vector graphics with complex paths, you need to use a tool like the pay-to-play Illustrator (www.adobe.com) or the open source Inkscape (www.inkscape.org).
The next section describes in detail the properties of the rectangle. However, many of these properties are used by other objects, such as blocks of text and artwork that you import into Animate. So when you’re learning all about rotating, skewing, and scaling rectangles, keep in mind that you can rotate, skew, and scale text and photos, too.
Tip
If you’re on a budget, you may want to use one of the free, open-source applications that create art. Inkscape (www.inkscape.org) is a vector-based drawing program (similar to Illustrator), and GIMP (www.gimp.org) is a raster-based photo editing application (similar to Photoshop). For an online photo editor, consider Pixlr (www.pixlr.com).
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 2-2). 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.
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).
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>. Chapter 7 covers HTML code in detail.
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 place a copyright notice in the lower-right corner of the the stage. Naturally, you want to use the lower-right corner as the reference point. Position the copyright notice where you want it. Set the stage W and H to percentages for a responsive design. Then, in the “Relative to” box (Figure 2-3), click the square in the lower-right corner.
Global/Applied. These two large buttons play an important role in positioning elements. They work like a toggle, you can only select one at a time. Initially the Global button is selected. That means that the position and other settings are relative to the Stage. When you’re starting out with simple composition, this is the best setting. Later in this book, you’ll learn how to group elements in symbols and DIV tags. These elements act as containers for other elements. Choose Applied and the Position and Size settings are relative to the underlying values of these containers.
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 Width and Height 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. The box on Gracefully Resizing Elements for Browsers offers some strategies for creating animations that resize gracefully with changes in the browser window. This bit of magic, sometimes called “responsive” or “fluid” design is accomplished by using percentage sizes, minimum and maximum widths, the corner reference box, and other tools that help your animation adapt to the size of the browser window.
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.
Tip
At the time of this writing, Animate didn’t offer any way to create color gradients. That’s where one color blends into another color. These effects are standard tools for graphic artists. If you want to use gradients, you’ll need to create your art in Photoshop, Illustrator, or Fireworks and then import it into Animate. If you want to create a gradient that blends to transparency, letting the background show through, use the PNG32 graphic format.
When it comes to selecting, cutting, and pasting objects, Animate works like most other computer programs. You use the same techniques for objects you create in Animate, like rectangles and text, or artwork that you import (as explained on Clipping the Bits That Need Trimming). You use the Arrow in the Tools palette to do the heavy lifting. Click once on an element to select it. Shift-click on another element to add it to the selection. Animate has a handy command (Ctrl+A or ⌘-A) to select everything on the stage. You can easily deselect objects by clicking on an empty spot around the edge of the stage.
Animate also provides the usual suspects when it comes to Cut (Ctrl+X or ⌘-X), Copy (Ctrl+C or ⌘-C), and Paste (Ctrl+V or ⌘-V). The Duplicate command (Ctrl-D or ⌘-D) combines copy and paste into one function. When you’re in need of several carefully rounded and shaded rectangles, it’s much easier to create one and then clone it with Duplicate. (If you prefer menus to shortcut keys, you’ll find all these commands on the Edit menu.)
When you duplicate an element that’s on the stage, you also duplicate any transitions that may have been created for that element. If you don’t want the transitions, use Copy (Ctrl+C or ⌘-C) and Paste (Ctrl+V or ⌘-V). You’ll find details for editing transitions on Editing Transitions.
Tip
Even though you can quickly create new elements using the copy-and-paste technique, you may still want to give each new element a unique, useful name. All you’ll get from Animate are less-than-helpful names like RectangleCopy and RectangleCopy2.
Figure 2-3. When you’re ready to create fluid designs that respond to different browser shapes and sizes, head over to the Properties panel for the stage and various elements. The tools you need are in the Position and Size panel. Don’t forget to click the little button in the lower-left corner to show all the available options. For more details on developing and publishing responsive designs, see Chapter 10.
The Transform properties, along with the Transform Tool (Q), are there to help you fold, spindle, and mutilate your rectangles. Well, actually the transforms are called Rotate, Skew, and Scale. The other property in the Transform group is called Transform Origin. You can think of the origin as an anchor point for your rectangle. It appears as a target symbol when the rectangle is selected. Initially, the origin is at the midpoint. So if you rotate the rectangle, it spins around the midpoint. If you move the transform origin to the bottom-right corner by setting X=100% and Y=100%, your rectangle will rotate around that bottom-right corner point. Using the X and Y Transform Origin properties, you can move the origin to any point in your rectangle. As you make adjustments, the target symbol moves over the surface of the rectangle. If you don’t mind eyeballing it, choose the Transform Tool (Q) and then you can drag the transform origin to a new point as shown in Figure 2-4.
Figure 2-4. The transform origin point is the center of the universe when it comes to rotating, skewing, or scaling elements on the stage. You can reposition the transform origin using the Origin X and Y properties shown here in the Transform panel.
Rotate. The Rotate properties are straightforward. When you create an element, like a rectangle, the Rotate property starts out at 0 degrees. You can manually rotate an object with the Transform tool (as shown in Figure 2-5, top) or you can use the Properties panel. If you want to spin your rectangle, change the Rotate property. If you want the spinning motion to take place over time, you need to create two keyframes in the timeline at different points in time with different Rotate properties. (For more details on the timeline and keyframes, see Introducing the Timeline.) If your first rotation keyframe is set to 0 and your second is set to 360, the rectangle spins in a complete circle. Set that second keyframe to 720, and it spins twice.
Skew. The Skew properties turn your rectangle into a parallelogram by sliding two opposing sides in different directions (Figure 2-5, bottom). The top Skew property slides the top and bottom sides, and the bottom Skew property slides the left and right sides. You can apply both types of skew to a single object. The best way to get the hang of the Skew properties is to jump in and start playing with it.
Scale. When you scale a rectangle, you change its size—making it smaller or larger. The Scale properties represent a percentage of the original object in the horizontal and vertical direction. As with the Size properties (Selecting and Copying Elements), the link to the left of the numbers lets you choose whether or not the scaling is proportionate.
Figure 2-5. You can make your transformations using the Properties panel or you can use the Transform tool for a hands-on approach. After selecting the Transform tool, move the cursor over the element you want to change; the cursor changes to indicate the transformation that’s about to be performed. Top: With the cursor near the corner, you see Rotate cursor. Bottom: With the cursor mid-slide, you see the Skew cursor.
The maxim that “everything has its place” is certainly true when it comes to animation. With more than one element on the stage, their relationship to each other is critical. Designers often have a specific grid in mind when they’re creating printed pages or web pages. It’s best when boxes of text or graphics are aligned with this invisible grid. When several elements are aligned, it usually looks best when there’s an equal distance between them. You can spend a lot of time eyeballing the stage to try to get everything just right, but fortunately, you don’t have to.
To experiment with Animate’s Arrange, Align, and Distribute tools, you may want to create three or four simple objects from the Rectangle and Rounded Rectangle tools like the ones shown in Figure 2-6. As you drag elements around the stage, you’ll notice magenta-colored lines sprouting from the edges and midpoints. These are Smart Guides, and they can help you to quickly align one or more objects while you’re mid-move. In many cases, that may be all the help you need.
Tip
If you find the Smart Guides distracting, you can toggle them on and off as needed with Ctrl+U or ⌘-U.
Figure 2-6. Smart Guides are smart enough to hide when you don’t need them. However, they show up when there’s a job to do. Here the Smart Guide appears to help align the top edge of these four shapes. You can use guides to align any edge or the midpoint of an element.
For more formal alignment needs, turn to the Modify→Align menu. For align to work, you need to select at least two elements. You can select the elements on the stage or you can use the Elements panel. To use these commands, select all the elements that you want to align and then choose one of the options:
You use the Modify→Distribute commands to put equal distance between three or more elements on the stage. You can choose which part of your elements the distribute command uses for the process and whether the action takes place along the horizontal or vertical axis. The specific commands are:
Modify→Distribute→Left
Modify→Distribute→Horizontal Center
Modify→Distribute→Right
Modify→Distribute→Top
Modify→Distribute→Vertical Center
Modify→Distribute→Bottom
The stage includes that help you place elements with precision. You can show and hide the rulers using the View menu (View→Rulers) or with the shortcut key: Ctrl+R (⌘-R). The rulers extend beyond the edges of the stage, but there are markers that indicate the stage’s current size. For help with alignment chores, create guides by clicking on either the horizontal or vertical ruler and dragging toward the stage. Your guide follows and stays in place when you release the mouse button. If that’s not the perfect spot, you can drag your guide to a new location. When you no longer want a guide, you can remove it by dragging it back to the ruler. To avoid inadvertently selecting and moving a guide, use the View→Lock Guides command. This locks them in place until you use View→Unlock Guides to free them again.
For quick help with alignment work, turn on Snap to Guides (View→Snap to Guides). You can drag multiple guides onto the stage for various alignment duties and you can show and hide all the guides at once using the View→Guides command (Ctrl+; or ⌘-;).
In addition to horizontal and vertical position, there’s another way you can arrange objects on your stage. As you create elements, you may notice that new elements appear to be in front of the older elements, and if you drag a new element to the same X/Y position on the stage, it hides an older one. If you’re familiar with Photoshop, you might think of this positioning as “layers.” In geek-speak, it’s often referred to as the Z-layer or the Z-order, because this third dimension is known as the Z axis. You can examine the Z-order of the elements on the stage by simply looking at the Elements panel. Elements at the top of the list are closer to the front. If you want to change the order, just drag an element to a new position in the panel. Animate also gives you menu commands and shortcut keys to rearrange elements:
Roll up your sleeves. Enough theory, it’s time for some animation. In this exercise, you create four rectangles. You give them names, apply color, and skew them. Then you position them on the stage and make them move, change shape, and then appear to dissolve. It’s the sort of effect that might be part of a banner ad or the introduction to a more complex animation. You don’t need any Missing CD files to tackle this exercise. However, if you want to see the finished project, check out 02-1_Color_Bars_done.zip.
This exercise is divided into two parts. In the first set of steps, you create and position the color bars:
Open and save a new Animate project with the name Color_Bars.
Don’t forget to create a new folder for your project.
Set the stage color to white and the dimensions to W=550px and H=400px.
Animate remembers the last stage settings you used. So if you followed previous exercises or experimented on your own, you may need to make these changes.
In the timeline (Figure 2-7), make sure that the Auto Keyframe Mode and Auto Transition Mode buttons are pressed.
If you move your cursor over the buttons, tooltips show their names. For example, at the top of the timeline you see: Auto-Keyframe Mode, Auto-Transition Mode, Toggle Pin, and Easing.
Draw a rectangle and in the Properties→ID, type Red.
The ID box appears at the top of the Properties panel when the rectangle is selected.
In Properties, click the background color and set it to pure red, and set the border to none.
When you’re done, the hex color number should be #ff0000.
Set the rectangle’s size to W=550px and H=100px.
The quickest way to accomplish this is to type the dimensions in the Properties panel, but if you’re a mouse master, you can drag the rectangle’s handles. You may need to click the “link” button next to W and H to change the width and height independently.
Set the Skew (x) to 50 deg (degrees).
The horizontal skew is the top setting. A positive number slides the top edge to the left and the bottom edge to the right.
Position your red, skewed rectangle in the top-left corner of the stage so that only its point tip is visible. The Location properties should be X=-550px, Y=0px.
Ideally, just a red triangle shows in the top-left corner of the stage.
With the Red rectangle selected, press Ctrl+D (⌘-D). Change the ID of RedCopy to Green. Then, change the color to match.
The hex value for solid green is #00ff00. You can change the background color of a selected element in the Properties→Color subpanel or you can use the color swatches in the toolbar above the stage.
Line up the top of the green rectangle with the bottom of the red rectangle (Y=100px). Then, hold the Shift key down and slide Green to the right until only the tip shows (X=430px).
Holding the Shift key down while you move an element helps to lock it to the horizontal or vertical axis as you drag it. You can still drag it off axis, but it’s a little “sticky.”
Create two more skewed rectangles, naming and coloring them Blue and Yellow. Position the rectangles on alternating sides of the stage.
The blue color is #0000ff, and yellow color is #ffff00. When you’re done positioning the rectangles, the stage should look like Figure 2-7.
Figure 2-7. At the outset of the Color Bars animation, the four skewed rectangles start off on opposing sides of the stage. The animation makes them move across the stage and change size and shape.
Now that you’ve successfully created and positioned the color bars, it’s time to make them move. Chapter 1 showed how the position of elements on the stage is controlled by property keyframes in the timeline. When the Auto-Keyframe Mode button is pressed, as shown in Figure 2-7, new property keyframes are created whenever you set or change a property. You can also create property keyframes manually by clicking the diamond-shaped buttons in the Properties panel. You want to lock in the Position, Size, and Opacity properties at the beginning of your animation by creating property keyframes. Then you’ll move down the timeline and create different property keyframes. The result will be animation magic.
Make sure the timeline’s playhead is at 0:00. Select the parallelogram named Red; then in the Properties panel, click the diamond-shaped buttons next to X, Y, W, H, and Opacity.
The X and Y properties are in the Position and Size subpanel. They control the position. The W and H buttons create keyframes for width and height. The Opacity slider is near the top of the Properties panel. The diamond buttons add property keyframes and individual property layers in the timeline as you can see in Figure 2-8. Property keyframes anchor a specific property value at a specific point in time. In the timeline, you should see property keyframes and property layers for:
Left
Top
Width
Height
Opacity
If you don’t see all those keyframes and property timelines under Red, you should create them manually by clicking the diamond button next to the missing property.
Repeat step 1 for the Green, Blue, and Yellow color bars to create the property keyframes and property layers for each.
To speed things up, you can select all three bars first and then click the keyframe buttons.
Make sure the Auto-Keyframe Mode and Auto-Transition Mode are on (pressed in) and the other buttons are not.
When Auto-Keyframe is on, Animate automatically creates property keyframes as you change elements on the stage (Figure 2-8). It’s a two-step process. Move the playhead to a point in time and then change your element’s properties. You can make changes in the Properties panel or you can make changes on the stage with the Selection and Transform tools.
In the timeline, drag the playhead to the 0:02 position.
For this step, the pin should be toggled off (not pressed in).
Drag each of the rectangles across the stage until the tail end of the skewed rectangle is visible.
At this point, most of the stage is covered by the color bars, with white triangles of the stage showing through at the edges. Remember to press the Shift key as you drag if you want to steady the bars’ vertical position.
With all the rectangles selected, in Properties click the Add Key Keyframe for Opacity button. Drag the playhead back and forth to preview the animation.
The opacity for each color bar is set to 100 percent at the 2 second point. Scrubbing the playhead gives you a quick look at the action.
Drag the playhead to the 0:03 marker.
This position represents the point 3 seconds into your animation.
Select each rectangle and then change the height (H property) to 300 px and the opacity to 50 percent.
This has the effect of making the rectangles grow, slicing vertically into one another, and at the same time start to blur. See Figure 2-9. Keep in mind, you may need to delink the W and H properties to change them independently.
Drag the playhead to the 0:04 marker. Then change each rectangle’s height to 500 px and the opacity to 0 percent.
The effect is that the rectangles keep growing and blur out of view.
When you’re finished with the exercise, it should look like 02-1_Color_Bars_done. To watch your animation, press Home and then the space bar or use the controls on the timeline.
If the animation doesn’t play as expected, the most likely culprit is a missing or misplaced property keyframe. Move the playhead to 0:00 on the timeline and check to make sure each color bar has the correct property values for:
Left
Top
Width
Height
Opacity
It’s a common mistake to assume that a property value is set at the start of an animation when it isn’t. If there are still gremlins in the machine, compare the values at the 0:02, 0:03, and 0:04 positions with those in the Missing CD example file.
If you’re in the mood to experiment, try staggering the bars’ movement over time or changing the size, color, or skew properties in different ways. Add a background image or text to make the animation more interesting and the transparency revealing.
Figure 2-9. The timeline keeps track of property changes over time. When the Auto-Keyframe button is depressed, the timeline automatically creates property keyframes when you set or change a property. If it is not set, you need to manually create property keyframes by clicking the diamond-shaped buttons next to properties in the Properties panel.
OK, Animate pulls a fast one when it comes to the Rectangle, Rounded Rectangle, and Ellipse tools. The dirty little secret is that you can create all these shapes using the Rectangle tool and tweaking the properties. The reasons for this quirk have to do with the fact that JavaScript code is defining these shapes. You can check this by creating a shape with each tool and examining their properties. You can turn a rectangle into a rounded rectangle simply by adjusting the Corners→Radius properties, as shown in Figure 2-10. Likewise, you can square off a rounded rectangle using the same tools. So here’s a look at how they work.
In a new Animate project, create a rectangle and leave it selected. Choose the Transform Tool (Q), then with the mouse, hover over the Corners keyframe diamond in the rounded rectangle properties, and the tooltip explains that it will “Add Keyframe for Top-left Radius, Top-right Radius…” and so on. (The actual tooltip message changes depending on the settings.) The three buttons at the top of the panel are labeled 1, 4, and 8. Below, you see a square made up of buttons where you can individually select the four corners of a rectangle. There’s a number next to the corner buttons that’s initially set to 0. A corner radius of zero means your rectangle has nice, sharp-edged corners. Click on the number and drag to the right to round off the corners. The number box accepts only positive numbers, so you can’t drag left. Notice that as you drag, the black diamonds at the corners of your rectangle move to the center. These diamonds are control points for the corner radii. You can manually drag the diamonds on any rectangle to create and adjust rounded corners.
Reset your rectangle so that it’s square, and then click the upper-right corner in the Properties panel. Change the radius setting and this time, you notice that the upper-right corner remains square while the others take on the rounded style. When a corner button is pressed in, that deselects the corner from the rounded settings.
Reset the rectangle once more and click the upper-right corner so it pops back out. Then click the 4 button at the top of the corner properties. Four new number boxes appear next to each corner. Now you can set each corner independently with different radius values. This gives you the ability to create irregular shapes even though, technically, they still have four corners. Combine this with the skewing and scaling properties, and you can create some really interesting amoeba effects. Click the 8 button, and each corner has two control numbers. This gives you the ability to move the control point off center, making a corner that is flatter on one side compared to the other. Notice that when you adjust the settings, the black diamond control point moves, too. You can always adjust your corners using either the number boxes or the control points in the rectangle.
Figure 2-10. You turn a plain old rectangle into a rounded rectangle or an ellipse by adjusting the Corners properties. These shapes are identical except for their color and the Corners→Radius properties.
You can experiment with the Corners→Radius properties by turning Rectangles into ovals and circles. For example, here are the steps to turn a square into a circle:
Click the Rectangle tool and, while holding the Shift key, drag out a box.
Holding the Shift key down constrains the rectangle so that all sides are equal.
In the Corners properties, click the 1 button.
With this setting, all the corners share the same corner radius value.
Click and drag the border radius number box until the square turns into a circle, as shown in Figure 2-11.
It’s possible to drag the number so that the corner radii pass one another at the center, but that’s not necessary to create a circle.
Tip
You can turn your square into a circle using the Properties->Corners subpanel. Click the 1 button. Then, on the right side, click to change px to %. Then set the value to 50%.
Figure 2-11. The Corners→Radius tools give you a way to change any of the shapes you create using the Rectangle, Rounded Rectangle, or Ellipse tools. Here a square was rounded into a circle.
You can change and adjust your circle properties just as you would any other object that you create in Animate. By skewing your object, you can create ellipses. By scaling it, you can create ovals. And, of course, you can create anything in between a square and an ellipse with the right settings.
Drop shadows not only look cool, they give you a way to visually separate different elements. Apply a drop shadow to a graphic, and you make it look like it’s floating above the stage. Add a shadow to the interior of an element, and you give it a more three-dimensional appearance. Shadows are often used with buttons to create a different appearance for over, clicked, and selected states. Animate gives you an easy way to create drop shadows and modify them to your needs and taste.
For a subtle shadow that sets an element off from the background, try the following steps:
Draw three elements on the stage.
Select one and then in the Properties panel, scroll down to the Drop Shadow controls shown in Figure 2-12. Click the button in the top-right corner to turn Drop Shadow on.
Click the color swatch and choose Black.
Click the horizontal offset and type 4.
Click the vertical offset and type 4.
Click the Blur radius and type 14.
Click Spread and type 2.
Figure 2-12. All the controls for creating and modifying a drop shadow are grouped on the Properties panel. You can choose the color, offset position, amount of blurring, and other effects from these widgets.
If you want one of the elements to look three dimensional, you can use the same settings but click the Inset button. Instead of appearing outside of the element, the shadow is created inside the element. As the name implies, the Spread property controls the size of the shadow making it spread in all directions. As with any other property, you can make the drop shadow change over time. With a little creativity, you can create the impression of the sun changing position in the sky, with shadows moving and changing shape. Shadows are an important tool for text, too: Text is more readable over a busy background when separated by a shadow. For tips on using shadows with text, see Dealing with the Template.
Adding art to your stage isn’t an all or nothing affair. Animate gives you a tool to trim the edges of just about anything. The good news is, using the Clip tool couldn’t be simpler. As with the Shadow properties, there’s a single button in the upper-right corner of the subpanel that toggles the effect on or off. As you can see in Figure 2-13, there are four number settings representing the four edges of the selected element: top, bottom, left, and right. In most cases, it’s easiest to click and drag over the number so you can watch how much Animate trims off the element. If you’re more of a numbers person, you can click and type in a number. Once you’ve clipped an element you can move it around the stage—the trimmed bits remain hidden. What’s more, you can animate the clipping properties like any Animate properties, so you can use this technique in animated transitions (as you’ll see in Chapter 4). Clipping works with just about any element that appears on the stage, so you can also clip imported elements like photos or text boxes (Chapter 3) or symbols (Chapter 6). Clipping gives you yet another way to hide and reveal all or part of elements on the stage.
It’s easy enough to create basic shapes and text in Animate, but when it comes to complex artwork, you’ll probably turn to your favorite art creation tools. For elaborate drawings and line art, that may be Adobe Illustrator. For photographs, you may use Photoshop, Lightroom, or iPhoto. Adobe Fireworks may be the ideal companion tool for Animate because both tools were designed to create Web content. No matter how you create JPEGs, GIFs, PNGs, or SVGs, you can import them into Animate and then animate them by changing their position on the stage and their appearance. There are two methods for storing and displaying images: bitmaps (technically called raster graphics) and vector graphics. For the details see the box on Vector, Raster, and Your Favorite File Formats. For tips on how to use specific file formats in Animate, read on.
Use JPGs for photos. The JPG format is great for images that include lots of color and detail. JPG files, also known as JPEGs, are the familiar raster file format used on the web and in many cameras. (For details on the difference between raster and vector file formats, see the box on Vector, Raster, and Your Favorite File Formats.) The format was developed by the Joint Photographic Experts Group, hence the acronym. JPEGs use what is known as a lossy compression technique to create smaller file sizes. Image editors that work with JPEGs usually let you choose the degree of compression. If your image will only be viewed on a screen, you can crank up the compression. If it’s headed to a photo printer and you want it poster size, you’re going to need all those pixels. Adobe recommends using JPGs over PNGs because “90% of the time you’ll get a smaller file with JPEG, which will reduce loading time of your compositions.”
Use GIF files for preloader animated graphics. Originally developed by CompuServe, one of the early online services. The acronym comes from Graphic Interchange Format. GIFs’ popularity seems to be fading compared to JPEGs and PNGs, but you’ll still find them on many websites. GIFs are raster graphics stored with a lossless compression technique, but use a limited color palette. The result is that an image with big swaths of solid colors, like a company logo or a bar graph, might result in a very small file. On the other hand, a photographic image won’t compress as well and may not look as good in GIF as, say, in JEPG because of the limited number of colors. GIFs provide a couple of neat tricks. You can create animated GIFs using simple frame-by-frame animation. Programs like Adobe Fireworks and Flash make the process fairly easy. GIFs also let you designate parts of the image as transparent. That’s great if you’re placing an irregular shape, like an animated character, over an already developed background, like a room’s interior.
Use PNG files when you need transparency. PNG files were developed at a time when there were patent issues regarding GIF. Pronounced “ping,” this abbreviation stands for Portable Network Graphics. The PNG format was designed to be used on the Web (as opposed to print graphics) and to improve upon features already popular in GIFs. PNGs use a lossless compression technique, provide a bigger color palette, can display animated sequences and can include transparency within the image. PNGs are well supported among modern web browsers, but there are probably still some older browsers out there that don’t handle the format. The PNG format works well with Animate, in part because both were developed with the Web in mind.
Use SVG files cautiously for graphics that need to be scaled. SVG files are vector-based. The name stands for Scalable Vector Graphics. That means rather than recording a pixel-by-pixel map of an image, SVG files contain formulas that describe the lines, curves, shapes, and other details of an image. Animate “flattens” imported SVG graphics. That means if you resize an SVG image when you’re working in Animate, it’s likely to start looking pixelated—that jagged stair-step appearance that graphics get when they’re enlarged. When this modified image is viewed in a browser, the pixelation shows. It’s interesting to note that if you don’t change the image within Animate, it resizes gracefully in a browser window, when it gets larger and smaller. When you create SVG files in a application like Adobe Illustrator, it’s best to export to the SVG 1.1 format. Modern web browsers support SVG, but there are some inconsistencies. For this reason, Adobe suggests that, for now, it is safer to use PNG in most cases.
There’s one difference in the way Edge handles artwork that you create using the built-in tools like the Rectangle tool, and art that’s imported. Art created with the built-in tools is created on the fly with JavaScript code, while imported art is stored in its native format (JPG, SVG, PNG, or GIF) in the images folder. Those images are referenced by the HTML and JavaScript code. If the files themselves are renamed, moved, or missing, your audience is going to miss part of the show. If you want to update images that were created outside of Animate, just make the changes and save the file with the same name.
Tip
It’s a good idea to export images from your graphics program at the largest size they’ll be used in your animation. That way you’ll avoid the pixelation that occurs when bitmaps are scaled up. On the other hand, there’s no need to make images bigger than they’ll be displayed—all that does is slow down your composition’s loading time. In the Sliding Show example, the stage is set to 600 x 400 pixels and each photo fills the stage. So, all the photos were saved at that same resolution. Reducing image size doesn’t create the same ugly side effects. So you can take those 600 x 400 pixel images and use Animate to scale them down to 150 x 100 thumbnails of the photos and they’ll look just fine.
Regardless of the file format, the process for importing artwork is the same. Go to File→Import and then find the file you want to bring into your project. The Missing CD folder 02-2_Sliding_Show has three photos in JPEG format. You can practice by creating a new project complete with a new folder named 02-2_Sliding_Show and import each of the photos. After you choose File→Import, a standard file/folder window opens for your PC or Mac. If you want to import all three files at once, just Shift-click to select them. As usual, Animate imports the files and, as a handy time-saver, names them based on the filenames. In this case, you’ll find squirrel, farmhouse, and bike in your Elements panel. Each image is also automatically placed at the 0,0 position on the stage. You’ll only see one of the images though, because they’re covering one another. Remember that Z-order stuff on Rulers and Manual Guides?
Tip
If you’re a fan of drag-and-drop computing, it’s worth noting you can drag the photos from a Windows Explorer or Finder folder and drop them right on the stage in your animation. Animate even has the courtesy to display the X/Y coordinates to help you position the imported graphics.
Sometimes you may have so many elements on the stage that you can’t find or identify the one you want. The Elements panel can help you isolate and identify elements on the stage by showing and hiding them. To the left of each filename is an eyeball toggle button (Figure 2-14). When the eye is displayed, the object is visible on the stage. Click the eye and it turns into a circle; the element is hidden from view in Animate.
You can identify each of the imported photos by temporarily hiding the others. The show/hide button affects the visibility of elements only within the Animate workspace; it has no effect on the final project viewed with a browser.
Figure 2-14. The Elements panel has two tools to help you when you’re working with elements on the stage. The eye toggle button shows and hides elements on the stage. The padlock button locks elements into position to keep you from accidentally selecting and moving them.
When Animate imports artwork, it automatically puts the upper-left corner of the image in the upper-left corner of the stage. So the Location properties for imported images are X=0, Y=0. In the case of the squirrel, farmhouse, and bike, this is exactly where you want your images for the Sliding Show project described next. However, the images are 600 x 400 pixels, which makes them a little wider than the standard 550 px stage. That’s easy enough to fix. Select the stage in the Elements panel and set W to 600px.
Back in the olden days when photographs were recorded on film, there was an event called the slideshow. It was called a slideshow because the projector slid the images on and off the screen. These days, slideshows take the form of PowerPoint presentations, or they’re used to display photos on a website. You can use a slideshow to show products. If you’re selling cars, maybe you want to display all the color options. If you’re selling home theater amplifiers, maybe you want customers to zero in on the different panels with controls and connectors.
In this next exercise, you create your own automated, sliding show. Each image is displayed for a period of time, and then it fades away as it slides offstage. You can use the three imported images from the previous exercise, or you can use as many of your own images as you want. Your show will look best if the slides are the same size and have the same portrait or landscape orientation.
Import your photos using File→Import.
Animate places the images on the stage and automatically creates an images folder for your project. Copies of the photos are placed in the images folder. In the Library panel, you’ll see the three images listed under Assets. As the Tip on Tip explains, you can also import graphics by dragging them from Windows or Mac OS X folders and dropping them directly onto the stage.
Select the stage in the Elements panel, and then set the stage dimensions and background color. Set the Overflow to hidden.
Give the stage the same dimensions as your images. With overflow set to hidden, the images will disappear when they move off the stage.
Arrange your images so the first image is at the top of the Elements panel.
In this project, the Z-order of the images determines when an image is displayed. It’s as if you have a stack of snapshots on a table and you remove the top photo to see the next.
Shift-click to select all the images in the Elements panel, and then in Properties, click the Add Keyframe button next to X and Y, as shown in Figure 2-15.
Left and Top keyframes are created for each of the images at 0:00 on the time-line. This locks in the starting position for each of the images.
With all the images still selected, in Properties make sure the opacity is set to 100 percent and then click to add keyframes for Opacity.
All the images will have an opacity of 100 percent until they begin to move off the stage.
Drag the playhead to 0:02, and then with the top image selected, add keyframes for X, Y, and Opacity again.
This locks in the position and opacity of the top image for the first 2 seconds of the slideshow. In the next steps, the photo will start to move and change. Make sure that the pin moves with the playhead to the new location. If necessary, press P to toggle the pin.
Make sure Auto-Keyframe Mode and Auto-Transition Mode are turned on.
With these two timeline buttons turned on, keyframes and transitions are created automatically when you make changes to the composition.
Drag the playhead to 0:03, and then drag the top slide completely off the stage.
You can have your slides move off the stage in any direction. Right movement imitates the old-fashioned slide projectors. Hold the Shift key as you drag if you want the image to slide along a vertical or horizontal axis.
Figure 2-15. Click the diamond-shaped Add Keyframe buttons to create X, Y, and Opacity keyframes in the timeline. You can set the value for each property independently. If you select more than one element, you can add keyframe properties for them all. When more than one element is selected, no ID is displayed at the top of the Properties panel.
With the image completely offstage, change the opacity to 20 percent.
This creates a nice fading effect for each image as it moves offstage.
Drag the playhead down the timeline another 2 seconds.
This gives your audience time to admire your next photographic masterpiece.
Select the next slide that’s visible on stage and then in Properties click the Add Keyframe buttons for X, Y, and Opacity.
This locks in the position and opacity for the slide that’s showing. Like the previous slide, it will move and fade after this point.
Move the playhead another second down the timeline and drag the photo offstage, and set the opacity to 20 percent.
This completes the process for the second image in the slideshow.
Repeat steps 10–12 for each of the images in your slideshow.
When the last slide is removed from the stage, display a message to viewers.
If you want, you can fade a message like “Thanks for watching!” on and off the stage to signal the end of the show.
You can preview your slideshow in Animate (Figure 2-16), or you can view it in your favorite web browser. You’re probably already thinking of ways you can tweak and customize a slideshow like the one described in this exercise. Naturally you can change the timing for the appearance and disappearance of each slide. If you want a fancy pseudo-3D effect, you could use Skew and Size properties to make the slides look as if they are blowing away one by one. In future exercises (Sliding Show Revisited), you’ll see how to give your audience click controls for the slideshow.
So far this book has shown you a few ways to show and hide elements. For example, if you want to show and hide elements while you’re working in Animate, you can use the visibility eyeball-icon in the Elements panel. That tool doesn’t change the way your final animation looks; it merely hides elements while you’re working in Animate. You’ve also seen how you can hide elements using their Opacity property. Set Opacity to 0 and presto-change-o—it disappears. Opacity is particularly good for animated effects like the one in the Sliding Show. Using Opacity, it’s easy to make elements fade in and fade out. Still there’s some work involved in controlling the opacity over the course of an entire Animate composition.
There’s another, more fundamental way to show and hide elements on the stage: You can turn elements on and off. In the Properties panel, directly under the ID box (Figure 2-15), there’s a drop-down menu that is initially set to Always On. So far, that’s the option used in the exercises in this book. There are two other items on the menu: On and Off. Suppose you want to redo the Sliding Show so that images changed instantly without any motion or fading effects. That’s a perfect job for the On/Off switch. Import your images as described on Clipping the Bits That Need Trimming. With all your images in place on the stage, set one image to On and set all the other images to Off. In the timeline move the playhead to the two second mark (or any other interval that suits you). Turn the displayed image off and turn another image on. In this case, the stacking order of the images (the Z-order) doesn’t matter because only one image is visible at a time. If you want to review a working example of this method, check out 02-4_On_Off_Elements_done from the Missing CD at www.missingmanuals.com/cds/animatemm.
Figure 2-16. Here in mid-slide, the squirrel is leaving the stage and the farmhouse is revealed underneath. The movement and opacity of the slides is controlled by property keyframes in the timeline.
There’s one other thing to note: Once you use the On/Off menu in Properties, Animate adds an On/Off toggle button in the timeline for that element. See Figure 2-17. This makes it quick and easy to set the playhead to a particular point in time and turn your elements on or off.
