Adobe Edge Animate: The Missing Manual

Chapter 10. Publishing Responsive Web Pages

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.

Adding Background Images to Compositions and Elements

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 ...