10. Working with HTML, CSS, and JavaScript

Introduction

Edge Animate relies on three related technologies: HTML5, CSS3, and JavaScript. HTML (Hyper Text Markup Language) is the code behind the scenes for web pages. CSS (Cascading Style Sheets) is the code that provides the structure, design, and formatting for web pages. HTML and CSS work hand and hand to display content in a web browser. JavaScript is a scripting language that uses libraries to provide extended functionality for web pages. jQuery is a JavaScript library that provides standard extended functionality so you don’t have to develop it. JavaScript and jQuery have become a defacto standard as they continue to be widely used on the web.

The JavaScript libraries used in Edge Animate is collectively referred to as the Adobe Edge Animate Runtime. The Adobe Edge Animate Runtime supports the content defined through the Edge Animate program and provides the code and resources needed for them to run properly in a web browser.

In Edge Animate, you work with JavaScript instead of HTML or CSS code. However, JavaScript gives you the ability to add HTML and CSS code with the html and css functions. If you want to add straight HTML or CSS code (no JavaScript) to your composition, you can open the HTML or CSS document in an HTML editor, such as Adobe Edge Code, add and edit the code, and then save it.

Typically, an animation from Edge Animate, such as a banner, is only part of an existing web page. So, after you create and publish a composition in Edge Animate, you can use an HTML editor to copy/paste HTML code to add the animation to the exiting web page. If you already have an HTML document that was created in another HTML editor, you can open it in Edge Animate and then add an animation or interaction to create a composition.

Examining Edge Animate Files

When you save a composition in Edge Animate, the program saves an HTML file and an AN file along with other related files—JS (JavaScript) and Edge Animate includes—needed to display Edge Animate content. The includes folder provides libraries, such as jQuery and JSON (JavaScript Object Notation), with extended functionality that gets used by Edge Animate. For example, Edge Animate uses JSON to store element definitions and attributes. It’s critical that you keep all the files together for an Edge Animate composition using the same file and folder structure, otherwise the animation will not run properly, if at all. Let’s take a look at the individual files that Edge Animate creates for a new composition, typically named Untitled-1.

Examine the Edge Animate Files

In Windows Explorer (Win) or the Finder (Mac), navigate to the main project folder for an Edge Animate composition.

The folder contains five files (1 HTML, 1 AN, and 3 JS), and a folder.

Double-click the edge_includes folder.

The folder contain four JavaScript files, which include jQuery and other libraries.

When you’re done, close the windows.

Edge Animate Files

Viewing the Code Behind the Scenes

If you want to view the code behind the scenes for an Edge Animate composition, you can view the HTML code from a web browser or a text or HTML editor, such as Adobe Edge Code or Adobe Dreamweaver. From an HTML editor, you can do more than just view code; you can modify and save it too. HTML editors make it easy to open and edit HTML, CSS, and JavaScript code in order to help speed up the development process. If you want to edit JavaScript, you can also use the Code panel, which provides a central place to view and edit all the JavaScript code in a composition. You can access the Code panel from the Window menu in Edge Animate.

View Source Code from a Web Browser

Open the HTML file for the composition you want to view.

Click the File menu, and then click Preview In Browser.

Your default web browser opens, displaying your content on a web page.

Right-click a blank area within the page, and then click View source (IE) or View Page Source (Firefox or Chrome), or similar command.

The HTML code for the web page appears in a new window or tab.

When you’re done, close the web browser.

View or Edit Source Code from Adobe Edge Code

Start Adobe Edge Code or another HTML editor.

Click the File menu, and then click Open.

Navigate to and select the file (HTML, CSS, or JavaScript) that you want to open.

Click Open.

View or edit the code just like in a word processing program.

Click the File menu, and then click Save.

Click the Close button to exit the HTML editor.

Start or switch back to Edge Animate.

If the composition that uses the file is already open in Edge Animate, click Yes to update and reload it.

If your composition is not already open, click the File menu, click Open, select the HTML file, and then click Open.

Work with the composition to add or change content.

Examining the Adobe Edge Animate Runtime

When you create a composition in Edge Animate, it uses JavaScript to animate and work with elements. In addition, it uses JavaScript libraries behind the scenes to manage internal processes and content. The JavaScript libraries used in Edge Animate is collectively referred to as the Adobe Edge Animate Runtime. The Adobe Edge Animate Runtime supports the content defined through the Edge Animate program and provides the code and resources needed for them to run properly in a web browser. If you open an HTML document created by Edge Animate, you can see a JavaScript reference to the preloader (JS file), which links all the resources, including jQuery and other runtime libraries, in your composition within the <head> of the HTML document. Edge Animate comes with its own JavaScript API (Application Programming Interface) that you can use to create animation and interaction in your compositions. Code snippets use the APIs to provide added functionality.

Examine the Adobe Edge Animate Runtime

Start Adobe Edge Code or another HTML editor.

• You can can also view the code from a web browser; see the previous topic for details.

Click the File menu, and then click Open.

Navigate to and select the HTML file for the composition.

Click Open.

In the program window, you can view and edit the code just like in a word processing program.

The code to reference JavaScript for the Adobe Edge Animate Runtime appears after the title between the comments.

Click the Close button to exit the HTML editor.

Get Help for Edge Animate JavaScript API

Click the Help menu, and then click Edge Animate JavaScript API.

Your web browser opens, displaying the Adobe Edge Animate JavaScript API website.

Click a link to the topic you want to find out more about.

• Adobe Edge Animate overview.

• Triggers, events and actions.

• Work with symbols.

• JavaScript API.

• Advanced topics.

When you’re done, close your web browser.

Getting to Know HTML

HTML (Hyper Text Markup Language) is a language for describing HTML documents, known as web pages. It’s not a programming language, it’s a markup language. A markup language is a set of markup tags, known as HTML tags. Tags make up the entire structure of an HTML document. An HTML tag specifies how the document, or a portion of the document, should be formatted. HTML tags are keywords surrounded by angle brackets like <html>. HTML tags normally come in pairs like <div> and </div>. The first tag in a pair is the opening tag and the second tag is the closing tag, which includes the slash (/). The HTML element content is everything between the opening and closing tag. For example, the <b> tag is saying to start bold text, and the </b> tag is saying to stop bold text. Some HTML elements have no content. They are called empty elements.

Common Tags

HTML documents have two parts, the head and the body. The body is the larger part of the document, as the body of a letter you would write to a friend. The head of the document contains the document’s title and similar information, and the body contains most everything else.

HTML documents contain HTML tags and plain text. Here’s an example of a basic HTML document:

<html>
<head><title>Title goes here</title>   </head><body>Body goes here</body>
<h1>My First Heading</h1> <p>My first paragraph.</p>
</html>

You may find it easier to read if you add extra blank lines. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The web browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space. Here’s the example with extra spaces and lines:

<html>
<head>
<title>Title goes here</title>
</head>
<body>
<!-- Body goes here -->
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

The text between <html> and </html> describes the web page. The text between <head> and </head> contains the web page title. The text between <body> and </body> is the visible page content. The text inside <!-- This is a comment --> the brackets is a comment that is ignored by the web browser and not displayed. The text between <h1> and </h1> is displayed as a heading. The text between <p> and </p> is displayed as a paragraph. HTML tags are not case sensitive, so they can be upper- or lower-case.

HTML elements can have attributes, which provide additional information about them. Attributes are always specified in the opening tag. Attributes come in name/value pairs, such as name = “value”. Attribute values should always be enclosed in quotes.

Web browsers, such as Firefox, Chrome, Internet Explorer, and Safari, read HTML documents and display them as web pages. A web browser uses the tags to interpret the content of the page. In your web browser, you can view the HTML markup language to see how the web browser interprets the content. To view the HTML source code, right-click in the page, and then click View Source (IE) or View Page Source (Firefox or Chrome), or other similar command.

HTML files are just plain text files, so they can be composed and edited in any word processing or HTML code editor program; they usually have the extension of .html or .htm.

Working with HTML

HTML is the code behind a web page. When you view HTML code, tags appear with angle brackets (< >), such as <div>, to define the content on the page. When you create a shape, add text, or import a graphic, Edge Animate automatically assigns the element the division (DIV) tag and an HTML ID name. In Edge Animate, you work with JavaScript instead of HTML code. However, JavaScript/jQuery gives you the ability to add HTML code with the html function method. If you want to add straight HTML code (no JavaScript) to your composition, you can open the HTML document in an HTML editor, such as Adobe Edge Code, add and edit the HTML code, and then save it.

Add HTML to JavaScript

Open a script panel, either Trigger, Open Actions, or Code.

• Trigger Panel. Position the Playhead in the Timeline, and then click the Insert Trigger button, or double-click an existing trigger in the Timeline.

• Open Actions Panel. Click an Open Actions button in the Timeline, Elements or Properties panel. For a new action, click an event.

Click to place the insertion point where you want to insert the code.

Enter JavaScript code that uses the html function method. Here are some examples:

sym.$("Text1").html("<a href= 'http://www.adobe.com'>Adobe</a>");
sym.$("Text1").html("NewText");

Click the Close button to exit the script panel.

Work with Straight HTML Code

Start Adobe Edge Code or another HTML editor.

Click the File menu, click Open, navigate to and select the HTML file, and then click Open.

Enter the straight HTML code; see the illustration for an example.

Click the File menu, and then click Save.

Click the Close button to exit the HTML editor.

Start or switch back to Edge Animate.

If the composition that uses the HTML file is already open in Edge Animate, click Yes to update and reload it.

If your composition is not already open, click the File menu, click Open, select the HTML file, and then click Open.

Work with the composition to add or change content.

Getting to Know CSS

Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of HTML elements in a web page. The term cascading relates to the way a web browser displays CSS styles for specific elements on a web page. Using CSS styles to format a page separates content from presentation. This gives you greater flexibility and control over the exact appearance of your web pages.

CSS allow you to define text attributes and give them a style name. This style name, called a selector, can be applied to any implemented text. Each time you need to implement the defined style, you can refer back to the CSS. The styles on a web page come from three different sources: the default styles from the web browser itself, the designer’s internal or external style sheet, and any user customized style selections. For example, a web browser may use Times New Roman as the default paragraph font. As the designer, you can create a style to override the paragraph font to be Arial.

CSS Versus HTML

If you wanted to change the color of the background of a web page, the HTML code would look like this:

<body bgcolor="#0000FF">

To write the same thing using CSS, would look like this:

body {background-color: #0000FF;}

The code, in both cases, is instructing the browser to paint the background in pure blue.

CSS Breakdown

CSS defines formatting with properties, such as font-family, font-size and color, in a declaration block, which is contained inside curly brackets ({ }). The declaration block is broken down into three sections: a selector, a property, and a value. In our example, body is the selector, background-color is the property, and #0000FF is the value.

Create CSS Styles

There are three ways you can apply CSS to an HTML document: Attributes, Tags, and External Style Sheets.

Attribute Styles

One way to apply CSS to HTML is by using the HTML attribute style. CSS used in this way is coded directly into the HTML document. For example, you can create your own named tags, and use them throughout the active document. Building on the above example, it can be applied like this:

<html>
 <head>
  <title>Attribute Style Example<title>
 </head>
 <body style="background-color: #0000FF;">
  <p>This page has a blue background</p>
 </body>
</html>

Tag Styles

A second way to include CSS into an HTML document is to use the Tag Style method. In this method you control the formatting of standard HTML tags. For example, you could redefine the <H1> heading tag to always use a specific font, size and justification or, in this example, use the <body> tag to paint the background blue.

<html>
 <head>
  <title>Tag Style Example<title>
  <style type="text/css">
        body {background-color: #0000FF;}
  </style>
 </head>
 <body>
  <p>This page has a blue background</p>
 </body>
</html></p>

External Styles

This is the recommended way to create styles. Using this method you create a text document (called a style sheet). This document contains all of the formatting information necessary to drive your web page. This document is then attached to one or more web pages, and when the page loads, it gets its formatting information from the external style sheet. The line of code must be inserted in the header section of the HTML code between the <head> and </head> tags. Like this:

<html>
 <head>
  <title>My document</title>
  <link rel="stylesheet" type="text/css" href="style/style.css" />
 </head>
 <body>
 <p>This page has a blue background</p>
 </body>
</html>

In the example, an external style sheet (basically, a text document) called style.css is used to format the active web document. The external style.css file contains the following CSS code:

// External CSS File: styles.css
headline {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 12 px;
}
body {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 10 px;
}

This external CSS file defines two styles, one for a sans-serif headline at 12 pixels, the other a sans-serif body text at 10 pixels. Make sure the CSS file is in the same folder as the HTML document.

Style Types

There are four types of styles, and as you might guess, each one performs a specific function when using Cascading Style Sheets. The four types of Styles are as follows:

• Class. Creates a custom style that can be applied as a class attribute to a range or block of text. Class names must begin with a period (.).

• ID. Creates a style and attaches it to a current HTML tag that contains a specific ID attribute. ID names must begin with a pound sign (#).

• Tag. Redefines a current style and attaches it to a current HTML tag.

• Compound. Defines specific formatting for a particular combination of tags or for all tags that contain a specific ID attribute.

Working with CSS

CSS is the formatting rules, known as styles, behind a web page. When you create a shape, add text, or import a graphic, Edge Animate automatically creates internal CSS behind the scenes based on the attributes set in the Properties panel. In Edge Animate, you work with JavaScript. However, JavaScript/jQuery gives you the ability to add CSS. If you want to add CSS (no JavaScript) to your composition, you can open the HTML document in an HTML editor, such as Adobe Edge Code, add and edit code, and then save it. Instead of adding internal CSS, you can also create an external .css file to keep it separate from the HTML document, which makes it easier to manage and make changes. If you create an external .css file, you need to also add code to the <head> of the HTML document to link the external CSS styles to the web page. You can apply a CSS style to a single element ID, which starts with a period (.), or to multiple elements with a class, which starts with a pound sign (#).

Add CSS to JavaScript

Open a script panel, either Trigger, Open Actions, or Code.

• Trigger Panel. Position the Playhead in the Timeline, and then click the Insert Trigger button, or double-click an existing trigger in the Timeline.

• Open Actions Panel. Click an Open Actions button in the Timeline, Elements or Properties panel. For a new action, click an event.

Click to place the insertion point where you want to insert the code.

Enter JavaScript code that uses the css function method. Here are some examples:

sym.$("RoundRec").css('width', '640px'),
sym.$("RoundRec").css('height', '360px'),
sym.$("RoundRec").css('back groundColor', 'blue'),

Click the Close button to exit the script panel.

Apply External CSS to Element IDs or Classes

Start Adobe Edge Code or another HTML editor.

Click the File menu, click Open, navigate to and select the HTML file, and then click Open.

Enter the following HTML code between the <head> and </head> tags:

<link rel="stylesheet" href="style.css" />

Click the File menu, and then click Save.

Click the File menu, click Open, navigate to and select the external CSS file (in this case style.css) linked to the HTML file, and then click Open.

Enter the CSS code; see the illustration for an example.

Click the File menu, and then click Save.

Click the Close button to exit the HTML editor.

Putting a Composition in an HTML Document

Typically, an animation from Edge Animate, such as a banner, is only part of an existing web page. So, after you create and publish a composition in Edge Animate, you’ll need to do a few things to use it in an existing web page. First, you’ll need to copy all the files and folders from your Edge Animate composition folder to the main website folder, and then second, you’ll need to copy HTML code from your composition HTML document and then paste it in the existing HTML document. Unfortunately, you cannot do the copy/paste in Edge Animate. You need an HTML editor, such as Adobe Edge Code to do the job. In the HTML editor, you’ll need to do three important things. One, copy/paste preloader code from the composition in the head section of the HTML document. Two, add the <div> code that identifies the composition in the body section of the HTML document. And three, edit the <div> code so the composition has a unique ID. You can use the same process to put more than one composition on the same web page.

Put a Composition in an HTML Document

In Windows Explorer (Win) or the Finder (Mac), copy all the files and folders from your composition folder to your main website folder with the HTML document.

• For Multiple Compositions. You only need one copy of the edge_includes folder and combine the contents of the images folder into one.

Start Adobe Edge Code or another HTML editor.

Click the File menu, click Open, navigate to and select the composition HTML file, and then click Open.

Select and copy—Ctrl+C (Win) or +C (Mac)—the HTML code from the following start comment tag to the end comment tag in the head section:

<!--Adobe Edge Runtime-->

and

<!--Adobe Edge Runtime End-->

Open the HTML document that you want to put the composition.

Place the insertion point between the <head> and <head/> tags; create new lines as needed, and then paste—Ctrl+V (Win) or +V (Mac)—the code.

Switch back or open the composition HTML document.

Select and copy—Ctrl+C (Win) or +C (Mac)—the following <div> code in the body section:

<div id="Stage" class="EDGE-20485945345">
<div>

Your number will differ.

Switch back or open the HTML document.

Place the insertion point between the <body> and <body/> tags; create new lines as needed, and then paste—Ctrl+V (Win) or +V (Mac)—the code.

The id used in the div is named Stage by default. If you have only one composition on the page, you can leave it alone and you are done. However, if you want to put more than one composition on the page, you need to make the IDs unique.

To put more than one composition in the HTML document, repeat Step 3 thru 10.

In the div tags, change the id to a unique name, such as “StageOne” and “StageTwo.”

Click the File menu, and then click Save.

Click the Close button to exit the HTML editor.

The composition(s) is now part of the HTML document. Be sure to keep all the Edge Animate related files together with the HTML document.

Adding an Animation to an HTML Document

If you already have an HTML document that was created in another HTML editor, such as Adobe Dreamweaver or Adobe Edge Code, you can open it in Edge Animate and then add an animation or interaction. You can open the HTML document using the Open command just as you would with a composition HTML document. When you open an HTML document in Edge Animate, the web page appears on the Stage along with the HTML tags in the Elements panel. Because Edge Animate works with JavaScript, you cannot change the HTML code directly. If you want to edit the HTML code, you need to use an HTML editor. In Edge Animate, you can add animation and interaction just as you would with a new composition. When you add an animation to the HTML document and then save it as a composition, remember that you need to keep all the Edge Animate files together with the HTML document for it to work properly on the web.

Open an HTML Document and Add an Animation

Click the File menu, and then click Open.

• You can also click Open File in the Welcome screen.

Navigate to and select the HTML file, and then click Open.

The HTML document appears on the Stage and the associated tags appear in the Elements panel.

Use the tools and techniques in Edge Animate to create an animation.

Click the File menu, and then click Save.

Edge Animate updates the HTML document and creates the normal JavaScript files associated with a composition in the same folder.

To publish the composition, click the File menu, click Publish Settings, select the Web check box, and then click Publish.

The composition is now part of the HTML document. Be sure to keep all the Edge Animate related files together with the HTML document.