When you build a project, Animate automatically creates several different files. The Hypertext Markup Language file (.html) is the stuff web pages are made of. Web browsers read HTML files and display the results as web pages. The Cascading Style Sheet file (.css) supports HTML documents, providing formatting and positioning instructions. You don’t have to be an HTML/CSS wizard to work with Animate. On the other hand, when you understand how HTML and CSS documents work, you’re in a better position to customize your projects to meet your needs. Animate compositions live within the HTML/CSS environment, and your audience views your work in their web browsers. In some cases, the files that Animate produces will be all you’ll need. In other instances, your Animate composition may be just a part of a larger page. For example, your project may be a banner ad. Knowledge of HTML and CSS helps you when it comes to sizing and positioning your project.
In this chapter, you’ll learn how to read and interpret HTML and CSS documents. Along the way, you’ll see how HTML’s IDs and classes are used to identify elements on the web page. Toward the end of the chapter, you’ll learn how to open and animate elements in existing web pages and how to position your Animate composition in another web page.
It’s not hard to learn how to read HTML. If you’ve spent any quality time developing web pages, you likely have some skills. You can open an HTML document in any simple text editor like Notepad (Windows) or TextEdit (Mac). Nearly any web browser lets you view the source of the current web page. Just right-click (Control-click) on the page and choose View Source from the shortcut menu. The code behind complex web pages can be stunningly long and cryptic. However, once you know the basics, you can tackle a page chunk by chunk. With some practice, you can get a good idea of what’s going on behind the scenes.
At its simplest, a complete “Hello World” web page might look like this:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body style="margin:10px;">
Hello World
</body>
</html>Web pages are made up of different elements, sometimes referred to as nodes. Like all web pages, this document has a head element and a body element. Often the head holds special details that don’t appear on the page. For example, the head is likely to hold style information that is applied to content in the body. Savvy web designers use special tags in the head portion of a page to provide a description of the page and a list of keywords. These details may be used by search engines to categorize the page. Sometimes, the head holds script tags that point to files of JavaScript code that performs some sort of automation or animation magic. Other times, the actual code may be present in the head portion of a page. CSS formatting instructions work in a similar way: There may be a reference to an external CSS file, or the formatting instruction may be placed in the page itself. The body holds the actual content that’s displayed on the web page. This is where text, pictures, and your Animate compositions appear.
If you want words to appear on a web page, all you need to do is place your text in the body portion of the document. For example, see the “Hello World” message on line 7? For this simplest of HTML documents, those words are the only thing that would appear in the document window. So what’s with those brackets and all that other stuff? Those are tags. They don’t show up on the web page, but they provide necessary information to web browsers. Tags are differentiated from content by their angle brackets (< >). Tags usually come in pairs, like the ones on line 4:
<title>Hello World</title>
These tags give the web page a title, and most browsers stick that title on the tab or title bar for the web page. The first tag lets the browser know that what follows is the title for this web page. The second tag is identical, except for its slash mark (/). That tag says to the browser, “OK, that’s the end of the title.” As you can see from a quick look at lines 3 and 5, it’s common for one element to be completely inside another. In this case, the <title> element is a “child” of the <head> element, which in turn is a child of the <html> element.
Occasionally, you’ll come across a single tag. For example, the tag for a line break in text is <br/>. Notice that in this case, the slash comes right before the last bracket.
Tip
A big part of being able to make sense of HTML code is knowing all the official tags and what they do. If you’re looking for a cheat sheet, pick up HTML & XHTML Pocket Reference by Jennifer Niederst Robbins (O’Reilly). If you want a complete manual for learning the latest, greatest version of HTML, turn to HTML5: The Missing Manual by Matthew MacDonald (O’Reilly).
The first line of the code on the previous page is a single tag but an important one. It tells browsers what type of a document follows. That way the browser knows how to interpret all those tags. HTML is certainly the most popular DOCTYPE these days, but you might also come across xml or xhtml. Sometimes you’ll see a version number displayed as in HTML 4.0 and other details. These generally aren’t necessary for your Animate projects. Previous versions of HTML and XHTML used more complicated DOCTYPE details, but with HTML5, a simple “HTML” is all that you need.
The last thing to examine in the “Hello World” code is line 6. Here the <body> tag includes the attribute: style=“margin:10px;”. In this case, the attribute is named style and it sets the margin for the body of the web page. Attributes appear within the brackets of opening tags. The attribute name is followed by the assignment operator (=), which then assigns values to the attribute. Values appear inside quotes, which may be either double (″) or single ('). In Animate, when you set the property for an element, often behind the scenes, Animate is setting the value for an attribute. The width and height of an image, the color and style of text—these are all attributes of specific elements.
Tip
Animate uses HTML tags, too. Select an element, and next to the name, you see the related tag. Often, you’ll see the generic but versatile <div> tag. For a list of the common tags seen in Animate, turn to HTML Tags in Animate.
If there’s one thing that’s made HTML king of the World Wide Web, it’s the hyperlink. Hyperlinks are the threads that form that web. Click a linked word, and suddenly you’re in a different part of the universe (or at least, the Web). You create the links using the <a> anchor tags. Here’s an example of a hyperlink:
<a href="http://www.stutzbearcat.net">click me</a>
Like most HTML tags, the anchor tag comes in pairs: <a>in between stuff</a>. In this case, the href attribute provides a web address. The href stands for hypertext reference; the equals sign assigns a value to the reference inside double quotes. The specific value here is a web address. The words in between the two <a> tags, “click me,” are visible and clickable in the browser window. Depending on the tag’s formatting, they may appear underlined or highlighted in some way to show that they’re a link.
<font face="Cooper Black" size="3"> Home of the <em>legendary</em> <strong>Stutz Bearcat</strong></font>
When a web browser like Chrome, Safari, Firefox, or Internet Explorer reads this text, it knows how to display the text in the browser window. For most browsers, the <em> tags indicate italics. Think emphasize. The <strong> tags specify bold text. The browser applies the formatting instructions and shows the text. It displays the proper typeface if it’s available; otherwise it uses a substitute font. So HTML coding works fine from the audience’s point of view. For designers, it can be a bit of a pain. One of the problems of HTML coding is that the message gets a bit lost in the formatting tags. Complicated HTML coding is hard for human eyes to read, and that makes it easy to foul up. When you want to make changes, it’s a lot of work to go in there and tweak all those bits of embedded code. The solution? CSS to the rescue.
CSS is the acronym for Cascading Style Sheets—an ingenious system for formatting HTML text. As the Web has matured, CSS has taken on more and more responsibilities. In HTML5, the role of CSS is even greater. If you want to read up on how CSS works, you can get an excellent introduction in David Sawyer McFarland’s CSS: The Missing Manual (O’Reilly). A basic understanding of CSS will help you when you’re working with Animate. Animate uses CSS behind the scenes to format and position elements. This book provides a quick overview of CSS and an example or two to get you started.
Formatting and style information can be stored in three different locations, as explained in the box on Three Places for Style Specs. As the Web grew and pages became more sophisticated, new and better methods were developed to dress up those pages. These days, the fashionable technique is to use a separate Cascading Style Sheet (.css document) to format web pages. A line in the head of the HTML document links the style sheet definitions to the web page. It might look like this:
<link rel="stylesheet" href="barebones_edge.css" />
The link tag is a single tag; there’s no corresponding end tag. The link tag is used to link more than just CSS files, so the rel (relationship) attribute is used to define the linked file as a style sheet. The href attribute points to the CSS file which, in this case, is named barebones_edge.css. There’s no path in this case, because the CSS file is in the same folder as the HTML file. If the CSS document is in a different folder, a standard path description is needed with the filename. For example, if there’s a special folder that holds all the CSS files, the complete path and name might be css/barebones_edge.css.
The underlying philosophy is that it’s best to separate the formatting from the content. You create styles (type specs) for body text, major headlines, subheads, captions, and so forth. You store those definitions in a style sheet. Then, in the text, you tag different portions, indicating the styles they should use. In effect, you say: “This is a major headline, this is body text, and this is a caption.” When the browser goes to display your web page, it comes to the text tagged as a headline, and then it looks up the type specs in the style sheet. It does the same thing for the body text and the captions. From a designer’s point of view, this system is a tremendous timesaver. If you want to change the caption style for a website that has 400 captioned pictures, all you need to do is edit one definition in the style sheet. If all those type specs were embedded HTML code, you’d need to make 400 separate edits.
CSS style sheets are a little like those wooden Russian dolls where each one is nested inside another. Starting from the outside and working in, here’s what you find in a CSS style sheet. A style sheet is a list of formatting specifications. Each formatting spec has a selector that identifies the HTML tag that it formats. That tag could be the paragraph tag <p>, the heading tag <h1>, or an anchor tag <a>. In CSS lingo, the formatting spec is called a declaration block. The declaration block is contained inside curly braces {}. Within those curly braces are specific declarations that define fonts, styles, colors, sizes, and all the other properties that can be defined in CSS. The declarations have two parts: a property and a value. So in CSS, if that property is font-size, then the value is a number representing the size. A CSS definition to format an <h1> heading tag might look like this:
h1 {
font-family: Arial;
font-size:18px;
font-weight: bold;
color: red;
}The first line has the selector for h1 headings, usually the biggest, boldest heading on a web page. The next four lines show pairs of properties and values. On the left side of the colon is the property, which is hyphenated if it’s made up of more than one word. On the right side is the value assigned to that property.
You’ve seen how you can connect CSS styles to particular tags, like the heading1 tag <h1> or a paragraph tag <p>. Those formatting specs affect all of the headings and paragraphs that use the tag. But what if you only want to change the appearance of a specific heading or paragraph? That’s the job for an ID or a class. You can give any element on the page an ID. That’s exactly what Animate does behind the scenes when you name an element. Use IDs for elements that appear only once on the page. If you create a LeftSidebar ID, you can have only one LeftSidebar on the page. That’s just how IDs work. If you need to apply a style to more than one element on the page, you can create a class. You can apply a single class name to several elements. For example, perhaps you’re creating pull quote boxes (teasers that boldly display a line or two of text pulled from the main body of your document). So you specify a big, bold font and create text boxes that float on the right side of the page. Now you can create a PullQuote class and apply that to any chunk of text that you want to display those properties.
You assign a specific ID or class to an element through a tag attribute. For example, maybe you’d like to give a sales pitch its own ID. In the body of your HTML document, it might look like this:
<p id="pitch">What can I do to put you in a Stutz Bearcat today?</p>
Then in your CSS file, there’d be a definition for the pitch ID:
#pitch {
font-family: Arial;
font-size:18px;
font-weight: bold;
color: red;
}The pound sign (#) is what distinguishes an ID from any other tag. The process for defining a class is similar. If you want to apply a class named pause to a paragraph of text, it would look like this:
<p class="pause">Hang on a second. Let me check that price with my manager. </p>
Then, in your CSS file, there’d be a definition for the pause class. And of course, that class might be applied to more than one paragraph. In the definition, it’s the preceding period (.) that signals that a definition is for a class.
.pause {
font-family: Times;
font-size:12px;
font-weight: bold;
color: black;
}The cascading aspect of CSS gives designers a double dose of formatting power. Suppose your web page has two main sections: the body and a sidebar. The body has a white background color, and the sidebar’s background is a dark blue to set it off from the body. You’re going to need a different font color for those two places. CSS has a solution. In effect, you can say, “When a paragraph is in the body, make the font color black. When a paragraph is in the sidebar, make the font color white.” You create those instructions in your style sheet, like this:
body p {
font-family: Times;
font-size:12px;
font-weight: bold;
color: black;
}
#sidebar p {
font-family: Times;
font-size:12px;
font-weight: bold;
color: white;
}In this way, that simple paragraph <p> tag takes on different characteristics depending on where it’s located.
When you’re in Animate and you choose File→Save, Animate creates several files, including an HTML file that describes a web page with your composition. You can open that HTML file and read the contents. You may be surprised to see that there’s actually not a lot of code inside. For the most part, it’s made up of links to other files that make your composition work. Here’s the HTML from a bare-bones Animate project:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bare Bones</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="07%20bare%20bones_
edgePreload.js"></script>
<style>
.edgeLoad-EDGE-27259565 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-27259565 edgeLoad-EDGE-27259565">
</div>
</body>
</html>The first line declares that it is an HTML5 document. Everything else is inside the two <html> tags. At the next level, the page has the two standard elements, <head> and <body>. The <head> includes a <title>. In this case, the text reads Bare Bones. The rest of the head fits in between two HTML comment tags: The first comment reads <!--Adobe Edge Runtime-->. The last reads <!--Adobe Edge Runtime End-->. Between these comments are statements that link a JavaScript (.js) file using the <script> tag. As you might guess from the word “Preload” in the name, this JavaScript code loads resources that Animate needs. Specifically, the preloader identifies other JavaScript files and libraries, some of which are in the edge_includes folder. Animate created all these files when you performed that Save command, and in many cases you don’t have to mess with them. You won’t need to change the links in this HTML document, unless you do something like move the files. And in most cases, you won’t edit the external files. In fact, keep your hands off the four JavaScript files in the edge_includes folder. They contain the code that makes Animate compositions do their magic. They have names like:
On the other hand, once you become proficient in JavaScript/jQuery, you may find yourself making changes to the JavaScript files that are in the same folder as your HTML document. If you save a project named Bare_Bones, you’ll find these JavaScript files along with your .html web page and .edge project files:
Bare_Bones_edge.js
Bare_Bones_edgeActions.js
Bare_Bones_edgePreload.js
You’ll learn more about tweaking these guys in Chapters Chapter 8 and Chapter 9. In general, Animate is pretty good about placing warnings at the beginning of files you shouldn’t edit and providing tips for making changes to the others.
Note
The box on Many Ways to Comment describes two types of comments shared by JavaScript and other programming languages like C. The <!-- and --> tags are used by HTML. These particular tags are useful with JavaScript. They provide a way to deliver JavaScript commands to browsers ready to handle JavaScript. If a browser isn’t able to handle JavaScript, the commands are ignored—treated like comments.
Want to apply some Animate magic to a web page that already has elements in place? You can do that by opening an existing document in Animate. For example, consider this web page, which isn’t all that much more complex than the original “Hello World” example.
<!DOCTYPE html> <html> <head> <title>Stutz Bearcat Sales</title> </head> <body> <h1 id="headline">Stutz Bearcat Sales</h1> <p><img src="images/StutzBearcat.png" alt="The amazing Stutz Bearcat automobile" name="bearcat" id="bearcat" /></p> <p id="pitch">What can I do to put you in a Bearcat today?</p> <p id="pause">Hang on a second. Let me check that price with my manager.</p> </body> </html>
This web page has three bits of text. One has a heading <h1> tag. The other two have paragraph <p> tags. There’s also one image on the page with a source .png graphic identified. All the elements, both text and image, have IDs applied. You don’t have to do this, but it does make it easier to identify the elements inside Animate. Animate doesn’t provide a way to change IDs of elements once you’ve opened the HTML in Animate. In Animate, content that you create using Animate tools is called managed content. Content that is created outside of Animate is static content. In the Elements panel, move the cursor over an element’s name; after a moment a tooltip appears. If it’s static content, you see (“static”) at the end of the element’s name. In the Properties panel, you see a limited number of properties available for animation within Animate.
Open the page in a browser, and it looks like Figure 7-1.
Figure 7-1. Here’s the simple web page that matches the code above. It consists of three blocks of text and the image of a snazzy auto. You can load this page in Animate and manipulate each of the elements.
If you want to experiment with opening an HTML document in Animate, get the Missing CD file 07-1_Load_HTML.html.
In Animate, open 07-1_Load_HTML.html.
The Elements panel shows the elements existing in the HTML document (Figure 7-2), listing their IDs and tags.
Click the car on the stage.
The Properties panel shows the image’s properties such as Width, Height, and Opacity. The car’s HTML ID (bearcat) appears at the top of the Properties, but it is grayed out. You’re unable to rename a static element (that is, change its ID). You’re also unable to change the element’s tag. You can do those things only with elements that you’ve created inside Animate.
In the Elements panel, click “headline.”
The Properties panel shows the same properties that were available for the image, as shown in Figure 7-3. However, the properties that you’d expect to see in a text box are missing. No Font, Size, or Color properties are available. In fact, you can’t even change the text in the headline or the two paragraphs. If you need access to those properties in Animate, then you need to create text boxes inside Animate.
Animate the car.
You may want to start by making the car smaller; about 200 px wide works well. Then create a transition that moves the car across the stage. (See Creating Transitions if you need to review the techniques to create a motion transition.)
Animate the headline and paragraphs.
Perhaps you want the headline to drop in from the top of the page. The two paragraphs are hidden at the beginning of the animation. Then the pitch appears first: “What can I do to put you in a Bearcat today?” Shortly, the pause paragraph appears saying: “Hang on a second. Let me check that price with my manager.”
You can use many of the Animate animation tricks you’ve learned on elements in a pre-existing document. You just need to work with the properties that are exposed in Animate. If you want to provide interaction, you can use triggers and actions, as described in Chapter 5. For an example, check out 07-2_Load_HTML_done.
You save your Animate-altered HTML file as you would any Animate project. When you do, Animate creates the usual suspects: JavaScript files. If you take a peek inside the HTML file after you’ve saved it in Animate, you’ll see that it didn’t change very much. Animate adds the usual links to external files mentioned in the box on Animate Project Files. The body of the document remains as it was originally.
Tip
As of this writing, it wasn’t possible to add a link to a few words inside a text box created with the Text tool without digging into JavaScript/jQuery code. You can add a link to the entire text box, but not specific words within. One workaround for this is to create text in an HTML file like the example above. Make your links before you open the HTML in Animate. The only drawback is that you will not be able to edit the text inside Animate. For the JavaScript/jQuery way to create a link within text, see the box on Adding HTML Anchor Tags to Text Boxes.
You won’t always be content to create entire web pages inside Animate. For example, suppose you want to create a banner ad in Animate. You’ll want to place the ad on a web page that has other content. The banner ad is just one element on the web page. Horizontal banner ads usually appear at the top of the page. They may need to be centered or float to the left or the right. If you’re in the mood to experiment, you can use 07-3_Banner_Ad from the Missing CD.
Here’s the process. First you create your banner ad in Animate in the normal manner. If you’re making a horizontal banner like the one in Figure 7-4, the stage dimensions might be something like 468 x 60 pixels. When you save your project, Animate creates all the usual files. You’ll want to copy all the files and folders in your Animate project to the folder on your website that holds HTML files.
In your favorite HTML editor, open the page where you want to place your Animate composition. In another window of your HTML editor, open the page that you created in Animate. What you’re going to do next is really just a simple cut-and-paste operation. In the Animate file, find and copy the code that launches the preloader.
As explained on Reading the HTML Animate Creates, that code is in the head of the HTML file that Animate creates, and it is between two comment tags that look like this:
<!--Adobe Edge Runtime-->
and
<!--Adobe Edge Runtime End-->
For example, if your project was saved with the name Bare_Bones, the complete code that you need to copy looks like this:
<!--Adobe Edge Runtime--> <script type="text/javascript" charset="utf-8" src="Bare_Bones_edgePreload. js"></script> <!--Adobe Edge Runtime End-->
Copy the comments and everything that’s in between them, and paste the lot into the head of your target web page.
Figure 7-4. Animate projects like this banner ad don’t usually stand alone on a web page. You’re likely to create Animate projects that end up sharing space on a web page with other elements.
Note
Versions of Edge Animate before Preview 4 didn’t use a preloader. In place of the preloader reference, you’d see several lines of code. Still, the procedure is the same: Copy the two comment tags and everything in between.
Next, in the body of the HTML file that Animate created, find the <div> tag with the stage ID. It looks something like this:
<div id="Stage" class="EDGE-225049589 edgeLoad-EDGE-225049589">
</div>Again, copy the tags and everything in between. This time, paste the code into the body of your web page. Close the Animate HTML file, and you can save or continue editing the web page. If you open your HTML page now, you’ll find that the ad shows up where you placed it in the code. In most cases, you’ll want to place it with more precision using CSS positioning tools. What you need to do is create a definition for the element with the Stage id. As explained on Applying CSS Styles to Element IDs and Classes, that code needs to be in the header for the page or in an external .css file that’s linked to the page.
Here’s an example:
#stage {
margin: 4px;
float: right;
overflow: hidden;
position: absolute;
top: 200px;
}CSS provides a number of properties that can be used to position elements on a web page. This definition gives the stage element a margin of 4 pixels. The float command positions the banner on the right side of the page. Overflow is set to “hidden” so elements outside of the stage don’t appear. The position property is set to “absolute,” which works well if other elements on the page are positioned in a similar manner. You can also use relative positioning if other page elements are “liquid.” The last line in the definition moves the banner ad down 200 pixels from the top of the page.
Frequently, you’ll want to center your Animate composition on a page so it plays well with the existing elements, like the ones in Figure 7-5. You don’t know the exact size of the window, so you can’t simply use a margin-left value. Naturally, if the window width changes, you want your Animate composition to accommodate that change. This project is available on the Missing CD, 07-4_Centering_Composition_done. Again, it’s the code in the external CSS file (book.css) that does the magic. You can view and edit CSS files with any simple text editor. Here’s the code that positions the Animate composition, which has the ID Stage.
#Stage {
display: block;
width: 468px;
margin-left: auto;
margin-right: auto;
}The Stage ID is listed first. Then the properties all appear in between the curly braces. The property name is listed followed by a colon, followed by the property value. The display property is set to block, which means the element will be treated like a block (think of a block of text). Next, the width of the composition is provided. Don’t forget to provide a unit of measure when giving dimensions. Finally, the important properties: margin-left and margin-right. When these properties are set to auto, the element is automatically centered and will adjust its position when the browser window changes dimensions.
Once you get used to all the features that Animate provides, you’ll want to use it for all sorts of projects big and small. Sooner or later, you’ll want to place two or more Animate compositions on a single web page. For example, suppose you have a page with an existing Animate composition that displays several book covers. When a web visitor clicks a book, with a little animation magic, it presents a large image of the book cover along with a sales pitch, as shown in Figure 7-6. To increase revenue, you decide to add a banner ad for the ever-popular Stutz Bearcat; you previously used this banner ad in a web page with a single composition (Placing Your Composition in an HTML Document). Putting two Animate compositions in one HTML document is best done outside of Animate in your HTML editor. So, roll up your HTML coder sleeves and get ready for some hand editing. To get started on this project, go to the Missing CD page (www.missingmanuals.com/cds/animatemm) and find the 07-5_Two_Compositions file. It provides the original web page with the book’s animation. You’ll also want to get the 07-3_Banner_Ad project, which is the second Animate composition that you’ll add to the two compositions page.
Here are the chores you need to tackle when placing two Animate compositions on one page:
In the head of your HTML document, add the preloader code for both compositions.
In the body of your HTML document, add the <div> code that identifies the two compositions.
Edit the <div> code so that each composition has a unique ID.
Use your standard HTML or CSS tricks to position the compositions where you want them on the web page.
Figure 7-6. Here’s a page with an Animate composition. Left: Click on one of the books. Right: With a little animated flourish, the page shows the cover and displays some details about the book. If you want to add another Animate composition such as a banner ad to the top of the page, you have to do some HTML hand-coding.
It’s easiest if you start with a web page that already has one composition in place and working properly. That’s exactly what you have in 07-5_Two_Compositions. Open the HTML file in a browser, and you’ll see it in action. The results should look like Figure 7-6. Here’s the step-by-step process for adding the banner ad from Placing Your Composition in an HTML Document to the top of this existing web page:
Examine the HTML and JavaScript files used to display the books page (07-5_Two_Compositions).
The web page has the filename 07-5_Two_Compositions.html. You see evidence of the existing Animate composition in books.html, books_edge.js, and other JavaScript files that make the project work. In addition, there’s an edge_includes folder and an images folder. If you look in the images folder, you see a number of large and small JPGs for the book covers.
Add the files for the Stutz Bearcat banner ad (Placing Your Composition in an HTML Document) to the folder holding the books project.
Copy all the files in the 07-3_Banner_Ad folder to the folder with 07-5_Two_Compositions.html. Copy all the images in the banner ad images folder to the book project images folder. Be careful; you don’t want to delete or write over any of the existing images. You’re going to need the images for both projects in this one folder. In this case, all the images have unique names. You don’t need to copy the files in the edge_includes folder; they should be identical, as long as both projects were created with the same version of Animate.
Open 07-5_Two_Compositions.html in your HTML editor. Then find the place in the <head> where the preloader for books is identified.
It looks like this.
<!--Adobe Edge Runtime--> <script type="text/javascript" charset="utf-8" src="books_edgePreload. js"></script> <style> .edgeLoad-EDGE-3521704 { visibility:hidden; } </style> <!--Adobe Edge Runtime End-->Add a line in between the comments to identify the preloader for your second Animate composition.
It’s easiest to cut and paste lines of code; that way, you’re less likely to make a mistake. In this case, you can open the file for the banner (07-3_Banner_Ad.html) to copy the line. Then, paste the result into 07-5_Two_Compositions.html. When you’re done it should look like this:
<!--Adobe Edge Runtime--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ chrome-frame/1/CFInstall.min.js"></script> <script type="text/javascript" charset="utf-8" src="books_edgePreload. js"></script> <style> .edgeLoad-EDGE-3521704 { visibility:hidden; } </style> <script type="text/javascript" charset="utf-8" src="07-3_Banner_Ad_edge- Preload.js"></script> <style> .edgeLoad-EDGE-34947207 { visibility:hidden; } </style> <!--Adobe Edge Runtime End-->In the body portion of the banner ad HTML code, find and copy the line that provides an ID for the <div> tag and paste that into the books.html code.
You want your banner add to be at the top of the page, so you can paste it immediately underneath the <div class=“content”> tag, above the rest of the HTML code. For example:
<div class="container"> <div class="content"> <div id="Stage" class="EDGE-34947207 edgeLoad-EDGE-34947207"> </div>There’s still one issue that needs to be resolved. You may remember that an ID attribute like the one shown here must be unique. For example, there can be only one “Stage” ID on this page. The solution is to change the names of the two stage IDs to stageOne and stageTwo or something more meaningful to your project.
Give each composition a unique ID.
Change the ID to the banner ad:
<div id="
Stage" class="EDGE-225049589"></div>to
<div id="
bannerStutz" class="EDGE-225049589"></div>Then, change the ID for the book composition:
<div id="stage" class="EDGE-6141218"> </div>
to
<div id="galleryBooks" class="EDGE-6141218"> </div>
Open the two_comps.css file in a text or HTML editor. Add a definition for both #bannerStutz and #galleryBooks that centers the compositions in the browser. They should look like this:
#bannerStutz { margin: auto; } #galleryBooks { margin: auto; }The file two_comps.css is referenced as an external CSS style sheet in 07-5_Two_Comps.html. It provides rules for the H1 headers and body text. You can apply CSS rules to position and format the <div> elements that hold your Animate compositions.
The pound sign (#) signals that bannerStutz is an ID. The margin property sets all margin values: top, bottom, left, and right. Setting that property to auto centers the composition.
You can see the finished project with both compositions in place on a web page that includes other non-Animate content in 07-6_Two_Compositions_done (Figure 7-7).
