Designing compositions so they look great in Adobe Edge Animate is just half the battle. Those compositions usually go out into the world as web pages and are viewed in web browsers of all shapes and sizes—giving you limited control over how your audience sees them. This chapter provides tips for publishing compositions that look good whether they’re viewed on smartphones, desktops, or high-def TVs. You’ll learn to add background images to the stage and other elements. Then, you’ll learn how to make the stage and its background image fill the browser window. You’ll also learn how to create graphics that cleverly resize and reposition themselves for browser windows of different sizes. Along the way, you’ll get tips about creating a preloader for your composition and designing a composition poster (placeholder) if someone views your page in a browser that’s not up to HTML5 standards.
When you build a composition, the stage can be transparent or any color that you choose from the color picker, as explained way back on Building Your First Animation. For an even livelier option, you can use an image or photograph for the background. For example, if you create an animation about the epic battles between a rapidly running bird and a not too bright coyote, you might want to use an image of Monument Valley as the background. In other cases, you may prefer to use a simple textured image.
Here are the steps for adding a background photo to the stage. You can use one of your own photos or you can use one of the images in 10-1_Background_Image from the Missing CD (www.missingmanuals.com/cds/animatemm).
Create a new Animate composition.
Leave the size settings for the stage at 550px x 400px or a similar relatively small size.
Use the File→Import command to import the photo you want to use for a background image.
The photo appears in the Assets panel in the Library. If you don’t have a photo handy, you can grab one from 10-1_Background_Image.
Drag the photo onto the stage.
The image may be larger than the stage at this point.
Position and resize the photo so it completely covers the stage.
The top, right corner of the image should be positioned at X=0, Y=0. When you’re done resizing, the size of the image (W and H properties) and the stage should be the same.
Press Ctrl+Enter (⌘-Return) to preview your project.
Your browser opens and displays your composition, scrunched up in the upper-left corner of the window (Figure 10-2, left). As expected, your photo is displayed in the area allocated to the composition’s stage.
Drag the edge of the browser to resize the window.
No surprises here. If you make the browser window bigger than the stage and the image, you see whitespace around the edges. Make it smaller than the image and hide parts of the image.
This kind of setup works well when the composition is only a small part of a web page. For example, if you’re creating a banner ad, you probably need to have fixed dimensions. In other cases, you may want to make a bigger statement.
If you’re creating an Animate composition that isn’t going to be part of an existing web page, you may want to use as much of the browser window as you can. The web designer’s standard dilemma is that you never know how much space your audience and their devices are likely to provide. Fortunately, Animate has a few solutions for this problem. First of all, you want to make the stage fill 100% of the available space in the browser window. Then, you want to make the image fill 100% of the stage.
Here are the steps to accomplish both of those tasks.
In the Elements panel, select Stage.
The Stage properties appear in the Properties panel.
In Properties, click the button labeled “px” next to W (width).
The “px” label changes to % (percentage). Now, instead of using an absolute value, the width of the stage is set to a percentage of the available browser window. There are only two units of measure available, so this button works as a toggle, switching between pixels and percentage. Initially, Animate sets the width to 100%. If you’d prefer a different percentage, you can make that change in the value.
In Properties, click the button labeled “px” next to H (height).
You can choose different units of measure for the width and height of an element. In this case, setting both to 100% makes the stage fill the available space.
Select the background image on the stage.
In the previous steps, this image was manually resized to fill the stage. That process gave the image an absolute size in pixels.
In the Position and Size properties, click the Layout Preset button.
As shown in Figure 10-1, the Layout Preset panel opens displaying presets that work for different design situations.
Choose the Scale Background Image preset and then click Apply.
When you click a preset, the panel explains the purpose of the preset and provides details about the property settings. When you click Apply, those settings are applied to your project.
Press Ctrl+Enter (⌘-Return) to preview your project.
Now when your browser displays your project, the stage is set to fill the available space in the browser window. In turn, the image is set to fill the available space provided by the stage. You can see the result on the right in Figure 10-2. Resize the browser and your image accommodates the new dimensions. What’s more, because the image was fairly high resolution to begin with, it looks pretty good even when it’s expanded to fill a display with a resolution of more than 2500 x 1400 pixels.
Figure 10-2. Left: You see the image as it appeared with an absolute size provided in pixels. Right: Here’s the image as it appears after setting the stage W and H properties to 100% and then applying the Scale Background preset.
Congratulations—you’ve created a responsive design that automatically adjusts for browser windows of different sizes. For example, if you used the rock wall photo, that image will fill a browser window whether it appears on a computer screen or a handheld device. If someone resizes the browser or turns the tablet from a landscape to a portrait position, the background adjusts in response.
Tip
There’s one gotcha to be aware of regarding image size. Apple’s operating system for phones, pods and tablets has limitations. It doesn’t gracefully handle images over 1024x1024px. One workaround is to slice large images into smaller parts and then piece them together in Edge. For ease of handling, you can put the parts into a symbol.
Being able to fill up the browser window with the stage and an image helps to make your compositions look better in a variety of circumstances. Still, there are limits to how small you can scrunch an image before it becomes distorted. Likewise, there are limits to how wide you can stretch a composition before the individual elements are spaced so far apart that they begin to look disconnected and odd. Animate provides two settings to help with these problems. Select the Stage in Elements and you see the Min W and Max W settings (for Minimum Width and Maximum Width). The width is usually the most significant dimension for a couple of reasons. Web pages are often designed to automatically accommodate content by extending the height (length) of the page. Width, on the other hand, is often adjusted by users for readability. On big screen monitors, users adjust the width of their web browsers to avoid overly long lines of text. Phone and tablet users switch between portrait and landscape orientation for similar reasons.
Using the Min W and Max W properties you can set limits to that stretching and scrunching. To experiment with these controls, try this:
Create a new Animate project and set the stage background to a color other than white.
Giving the stage a background color makes it easier to identify the stage area in a browser window.
In Properties, change W and H to 100%.
As explained in the previous example (Making the Stage Fill the Browser Window), setting the stage W and H properties to 100% makes the stage fill the browser window.
Change the value of Min W to 550px.
This setting overrides the setting in step 2, setting a minimum width for stage scrunching. If a visitor provides less than 550px in their browser window, the width of the stage will become clipped.
Click the Max H button and then change the Max H value to 700px.
This setting overrides how far the stage can be stretched. So, using a combination of a Min W and Max W values, you can create a range for the stage width.
Make sure that Rulers (Ctrl+R for Windows, ⌘-R on Macs) are visible.
Once you change the stage width to a percentage, a pin appears in the ruler. You can use this pin to simulate different stage widths.
On the horizontal ruler, drag the stage resize pin to the left and right.
When you drag the pin to the left, the workspace simulates the appearance of your composition in a narrower browser window. See the top of Figure 10-3. Dragging the pin to the right shows what your composition will look like in a wider browser window.
You set Min W and Max W values for the elements on your web pages, too. For example, you set minimum and maximum values for a photograph or other image. Even the rectangles, rounded rectangles, and ellipses created in Edge can be constrained. If you don’t see the Min W and Max W widgets in the Properties panel, click the button in the lower-left corner of the Position and Size subpanel to expand it.
Figure 10-3. Drag the resize pin in the ruler to get a simulated view of your composition in browser windows of different dimensions. Top: With the Min W value at 550px, the stage stops resizing even when the pin is dragged to a lower value. Bottom: The Max W is set to 700px, so the stage stops stretching at that point.
The art of creating responsive designs is to carefully apply properties to each element so it behaves the way you want under different circumstances. Primarily, those circumstances relate to the amount of real estate available to the composition. An earlier example showed how to scale an image to fill the stage. The next step is to add more elements and choose the right property settings for them. Here are questions you should ask about each element:
Where should this element be on the stage?
When the stage dimensions change, should the position of this element change? If so, how should it move?
Which corner of the stage should be used as a reference point? Upper-left? Lower-right?
Chances are, you’ll use different settings for different elements. You may want the main image for your composition to change in size and have a position relative to the upper-left corner of the available space. On the other hand, you may have a sidebar that consists of a text box and a rectangle for background color. For that element, you may want to position it relative to the upper-right corner. You want the text to be readable, so you may want to use an absolute size or perhaps set a minimum width for the text box. These decisions are often made through testing—also known as trial and error. As usual with web pages and browsers, you never have complete control as a designer. The best you can do is develop settings that are acceptable in most circumstances.
The best way to learn responsive design techniques is to play with different layouts and different settings. In fact, when you’re learning how the many size and position widgets work, it’s best to experiment with just a couple of basic elements on the stage. Later, you can apply the things you learn to your more complex compositions.
When the stage shrinks and grows, often you’ll want to change the size of elements too. If you’ve followed along in this chapter, the methods for making elements scale shouldn’t come as much of a surprise. You can change the W (width) and H (height) units from px (an absolute setting) to % (a variable setting). Note you don’t have to change both to the same unit. For example, you may want an element to scale with the width of the browser window, but you’d like the height to remain an absolute value in pixels. Perhaps you’d like to create a text box that is always 60% of the width of the browser window. Here’s what you need to do:
Make sure the stage is set to Scale its size by changing its W property to a percentage (%) as explained on Making the Stage Fill the Browser Window.
Select the text box you want to scale. Then, change the units for W to a percentage (%).
Change the value for W to 60%.
You can position your text box wherever you want on the page and its width will be 60% the width of the stage. You can set the height (H) to an absolute value in pixels or you can change it to a percentage, too. Keep in mind that when you scale the size of a text box, you’re changing the size of the container, but not the font-size of the text. That remains controlled by the Text settings (Changing Text-Specific Properties). Depending on the position and your display settings, some of the text box may be hidden. With text boxes, it’s likely that you’ll want to set up some parameters for the minimum and maximum acceptable width. Those details were covered back on Setting Minimum and Maximum Widths for Elements.
Tip
When you’re scaling the size of elements on the stage, you can get a quick preview of the changes by adjusting the “resize pin” on the ruler. For details, see steps 5 and 6 on Setting Minimum and Maximum Widths for Elements.
When the stage and background of the composition changes dimensions, you may want to change the relative position of elements on the stage. Often, you’ll want to use different settings for photos, graphics, and text boxes. As usual, the best way to learn how the various tools work is to add one or two elements to the stage and tweak the settings. With that in mind, try these experiments with the example begun earlier in this chapter (Making the Stage Fill the Browser Window):
Draw a 200px square and position it in the center of the stage. Then, press Ctrl+Enter (⌘-Return) to preview your composition.
The view. If you view this composition on a larger monitor or screen, the background image fills the browser window, but instead of being centered, the square is positioned near the upper-left corner. If you change the size of the browser window, the background changes size and shape, and the square remains the same distance from the upper-left corner.
The position settings. When the X and Y position setting units are px (pixels), they represent an absolute value. In this case, the square is an absolute distance from the upper-right corner of the browser window.
With the square selected, in Properties→Position and Size→“Relative to,” click the upper-right corner as shown in Figure 10-4. Change the X and Y properties to 200px. Then, press Ctrl+Enter (⌘-Return) to preview your composition.
The view. In your browser, the 200px square is position 200px from the top of the window and 200px from the right edge of the window. If you resize the browser window, the square repositions itself so that it remains 200px from the top and right edges.
The position settings. In this step, the reference point has changed from the upper-left corner to the upper-right corner using the “Relative to” tool. New absolute values of 200px determine the distance from the upper-right corner.
In Properties and Size, click the Applied button. Then, click the X and Y unit buttons (px) and change them to %. Then, change both the X and Y values to 50%. Then, press Ctrl+Enter (⌘-Return) to preview your composition.
The view. In Animate, the top-right corner of the square is placed in the middle of the stage both horizontally and vertically. In the browser window, it is also centered. If you change the size of the browser window, the square is repositioned in the window, so that its upper-right corner is at the center of the browser window.
The position settings. The Global and Applied buttons change the scope of the Position and Size settings. When Global is selected, the settings are relative to the stage. When Applied is selected, the settings are relative to the DIV or Symbol that contains the element. When you change from pixels to a percentage, or vice versa, you should change the unit before entering a value. Using a percentage instead of pixels gives the square a relative position. In this case, X=50% and Y=50%, the upper-right corner of the square is centered in the browser window.
You can scale the position of photos, imported graphics, and elements drawn in Animate using these techniques. As with the size properties, you can mix and match absolute units (pixels) with relative units (percentage). For example, you can create a right sidebar that’s 10% from the top of the stage and 50px from the right edge of the stage.
Tip
When you’re scaling the position of elements on the stage, you can get a quick preview of the changes by adjusting the “resize pin” on the ruler. For details, see steps 5 and 6 on Setting Minimum and Maximum Widths for Elements.
No one likes to wait, but it’s particularly annoying when you don’t know what’s going on. When you’re waiting for a web page to load, these kinds of questions run through your mind: Is this website broken? Is my connection down? Is this web site worth the wait? I wonder if anyone’s left me a Facebook message? It’s relatively easy to hang on to your audience by providing a preloader graphic that lets them know something is going on behind the scenes and pretty soon they’ll see the results. Preloader graphics are usually animated GIF images: circles or bars that display some kind of motion. They’re lightweight (small in file size) so they can load quickly, before the other bigger elements.
With the stage selected, in Properties→Preloader, click the Edit button.
The workspace changes to show the Preloader in place of the stage. Also, the Preloader is the only element shown in the Elements panel. The Properties panel shows a single button: Insert Preloader Clip-Art. Below that is a panel that tells you the size of the Preloader in kilobytes. This is helpful because you want your preloader to be lightweight (small file size).
Click Insert Preloader Clip-Art.
As shown in Figure 10-5, a dialog box opens displaying several pre-designed preloader graphics. These are animated GIF images.
Choose one of the preloader graphics and then click Insert.
The dialog box closes and your preloader graphic is on the stage. You can reposition and resize it if you wish. In Properties, under Preloader Size, you see the total size of your preloader, which includes the graphic and the JavaScript code required to display the preloader.
In the main workspace, click Stage.
The preloader closes and you’re back at the main stage for your composition. Later, if you need to go back and make changes to the preloader, select the Stage in the Elements panel and then go Properties→Preloader→Edit.
If you want to display a message while your composition is loading, you can add text to the preloader. You can also add a background image, but keep in mind you want your preloader to be as lean as possible (as in, as small a file size as possible, to allow for quick download).
There’s one more setting you can make in regard to the preloader in the Properties panel. In the Preloader subpanel, there’s a button where you can choose between Immediate and Polite. Even though your mother told you it always pays to be polite, the Immediate option is initially chosen here. That means the preloader will load the needed JavaScript libraries as soon as possible. If you choose the Polite option, Animate waits until the page’s load event fires before it starts loading those resources. In most cases, the Immediate option works well. If you’re working with a very large composition or have other special circumstances, it may be worth testing both options after your project has been uploaded to a web server.
Sadly, not everyone roaming the web has up to date equipment or browsers. That means some visitor’s to your Animate web page may not be equipped to see it in all its glory. Your first reaction may be: “Tough! Why don’t you get with it?” After that passes, you may want to set up a way to let those poor Neanderthals know what’s going on. You do that by creating a Down-level Stage. Translation: Build a relatively static web page that visitors see when their browsers can’t handle highly Animated pages. Here are the things you need to do to set up an effective Down-level Stage:
Create a “poster” image.
Add the poster to the Down-level Stage.
Add explanatory text to the Down-level Stage.
Redirect ill-equipped visitors to a new location.
All the action takes place in the Properties panel when you have the stage selected. You can follow these steps with any of your Animate compositions. In most cases, you want to set up your Down-level Stage when your composition is nearly complete. Why? Because, the first thing you want to do is snap a screenshot with interesting graphics that illustrate the purpose of your composition. Here are the steps:
With the Stage selected in the Elements panel, position the playhead to display the image you want to capture.
This image needs to convey as much information as possible about the composition.
In the Properties panel, click the camera icon in the Poster subpanel.
The Capture a Poster Image dialog box appears with buttons that provide two options: Capture and Refresh. There’s a brief explanation for each. In short, choose Capture the first time you create a Poster image and choose Refresh if you want to update a Poster that you’ve already captured.
The image is saved as Poster.png in the Library→Images folder. The dialog box title changes to Poster Image Captured and two new buttons appear: Publish Settings and Edit Down-level Stage. See Figure 10-6.
Click Edit Down-level Stage.
The workspace changes to show the Down-level Stage, which is empty the first time you see it. In the Elements panel, you see that the Down-level Stage is the only item available and it is selected. The Properties panel shows a single option, which lets you insert the captured Poster.png into the Down-level Stage.
In Properties, click Insert.
Poster.png becomes the background for Down-level Stage. With Poster.png selected, you see additional options in Properties: Position and Size, and Link. As expected, you can change the size of the image. You also have the option to change from pixels to percentages for a more responsive design.
In the Tools panel, click the text tool (T) and add a message to the Down-level Stage.
Provide whatever message is necessary for a visitor who is unable to view your composition. You can tell them what they’re missing. Suggest that they upgrade to a new browser. Suggest they visit another web page.
In Properties→Link URL, type in a complete web address for an alternative web page.
The link you provide should be related to the message in step 6. If you’re giving a browser recommendation, you may link to the page where they can download a new browser. If you’re providing a low-tech alternative to your composition, you want to link to that alternative page.
The last task that you perform inside of the Adobe Edge Animate workspace is to publish your composition. During the creation process, you end up with lots of different files in your project folder, some of which aren’t needed on the web server and page that hosts your composition. When you use Animate’s “publish” feature, only the necessary files are copied to the publish folders. Other files, such as JavaScript resources, are “minified” in the process. That means that they’re reduced in file size so that your web pages and compositions load as quickly as possible. Before you publish your composition, you’ll want to double-check your Publish Settings.
Go File→Publish Settings.
The Publish Settings dialog box opens as shown in Figure 10-7. It displays three publish target options: Web, Animate Deployment Package, and iBooks/OS X.
Note
This book covers publishing to the Web, the most common destination for Animate projects. For details on publishing deployment packages and iBook publishing, visit the Adobe Forums (http://forums.adobe.com).
The dialog box displays the publish settings for web pages, including a target directory.
Click the folder and choose a folder on your computer where you want to publish your Animate files.
For example, you may choose to publish your Animate composition in a folder that is already part of an existing website. If you don’t choose a folder, Animate creates a “publish” folder within your project folder. This works fine in many cases, because you later upload these files to a web server.
Choose Optional Publish Settings.
No other settings are needed to publish a working composition; however, there are three optional settings you can choose to turn on:
Use Google Chrome Frame for IE6, 7, and 8. Internet Explorer is notorious for not following the standards used by other browsers. This is especially true of the versions before Internet Explorer 9. This setting may help your composition work with these older browsers.
Frameworks via CDN. The term CDN stands for content delivery network. Use this option to get the necessary JavaScript libraries via the Internet, rather than publishing them with your composition.
Publish content as static HTML. Usually, Animate creates elements using code in the JavaScript files. When you choose this option, Animate creates some of those same elements in the HTML file. If you examine the web page, you will see DIV tags that describe elements from your composition. This feature improves accessibility and makes your project more compatible with screen readers.
Click Publish.
When you click Publish, Animate writes the necessary files for your composition to the designated folder.
Tip
If you don’t click the Publish button in the settings dialog box, you can always publish your composition later using File→Publish.
Your animate composition may be a standalone web page or you may want to place it inside of an existing web page. That process is explained on Placing Your Composition in an HTML Document. After you’ve published your composition to a folder on your computer, you probably still need to move it to your web server. You can do this using a web design program, such as Dreamweaver or using a FTP (file transfer protocol) tool.