Ten steps to creating an interactive banner with Adobe Edge

by Dan Carr

Adobe Edge is an exciting new design tool that makes it easy for web designers to create animations and interactive content using technologies that adhere to web standards: HTML5, JavaScript, and CSS3. If you are interested in creating interactivity and animations for websites, you should consider Edge.

Edge is an easy-to-use tool that can create sophisticated animations and interactive designs. Edge is intuitive for anyone familiar with timeline-based tools such as Adobe After Effects or Adobe Flash Professional. The latest version, Edge preview 6, contains built-in lessons to help you get up to speed quickly.

In this article, I guide you through the main features of the Edge workspace and introduce you to a basic workflow for creating interactive content. You'll build a visually striking website banner containing images, text, animation, and simple interactivity (see Figure 1). Along the way, you'll learn how to work with symbols, create buttons and hotspots, and add actions that populate text dynamically and launch URLs.

Figure 1. The banner in this tutorial features rollover text that users can interact with (click to interact with the sample).

Step 1: Set up your project

An Edge project is called a composition. A composition is defined as an HTML page that contains content such as images and fonts along with a series of supporting JavaScript files. In this step, you'll set up a project folder and create a new Edge composition.

Before you get started:

1. Download the project files and unzip the archive. Save your published files in this folder and use the project assets to follow the steps in the tutorial.
2. Download the completed project files to use as a reference. You can deconstruct these files if you run into problems.
3. Download Adobe Edge and install the application if you haven't already done so. (I wrote this article using Edge preview 6, the latest version available.)

Create a new file and start the project:

1. Open Adobe Edge and choose File > New to create a new Edge composition. Note that a new file named "Untitled-1.html" appears on the stage.
2. Save the file in the project folder with the name "banner.html."
3. Look inside the project folder. The Images folder is part of the supplied assets, but all the other files were created by Edge. The banner.edge file is the editable file used to open the composition in Edge. The banner.html file and the other supporting assets are the files you'll upload to your website to view the composition online.

Step 2: Use the stage, elements, and properties

The Edge workspace is composed of eight panels that enable you to configure and organize your content, work with timelines and actions to create animation and interactivity, and preview your work before publishing (see Figure 2).

Figure 2. The Adobe Edge workspace.

The stage defines the size of the composition and provides the canvas where you see your work while designing. Images, shapes, and text are building blocks called elements. Elements are stored and organized in the Elements panel. Each element, including the stage, has properties you can edit in the Properties panel while the element is selected.

In this step, you'll configure the stage properties of the composition and add image and text content.

Set the stage properties to define the size of the composition:

1. Click anywhere in the white area of the stage to expose the stage properties in the Properties panel. Take a moment to explore the properties related to the stage.
2. In the Document Title field, type "Edge Banner." This text will appear as the page title when viewed in a browser.
3. Change the width to 800 and the height to 300.
4. Change the background color to black.
5. Change the Overflow field to Hidden to hide any content placed outside the bounds of the composition.
6. Leave the Autoplay Timeline option selected so that the root timeline will automatically play when the composition loads.
7. Save the file.

Import images to create the background graphics:

1. Notice that the supplied images in the project folder appear under the Assets section of the Library panel. Placing images in the project folder is a simple way to access content in Edge. You can also choose File > Import to import images saved outside the project folder.
2. Drag image1.jpg to the stage and place it in the lower left corner of the stage.
3. Drag the other four images to the stage, placing them side by side and aligning them to the lower edge of the composition.
4. Notice that the images appear in the Elements panel. Click the Lock Element icon next to each image name in the Elements panel so you don't have to worry about selecting them in the next steps.
5. Save the file.

Draw shapes using the Rectangle tool:

1. Select the Rectangle tool in the Tools panel and draw a rectangle over the top of the first image on the left.
2. Select the rectangle to expose its properties in the Properties panel and confirm that the size is 160x275.
3. Click the Background Color swatch and select the No Color option on the top right of the pop-up menu.
4. Change the Border Style field from None to Solid. Notice that the rectangle appears as a black outline without a fill color. The outline should line up with the edges of the first image.
5. Draw another rectangle with a width of 160 and a height of 25. Set the background fill color to black and place it at the bottom of the outline rectangle. This rectangle will act as a background for the title text element.
6. Select the rectangle and change the opacity to 55% in the Properties panel.
7. Save the file.

Add text to create a title for the banner:

1. Select the Text tool in the Tools panel and click the stage at the top left side of the composition.
2. Type the text "Online Dahlia Garden" in the input field. Press Enter (or Return) to add the text.
3. Select the text to expose its properties in the Properties panel. Update the following properties:

• Font Name: Trebuchet MS, Arial, or Helvetica, sans-serif
• Font Size: 14
• Text Color: White

4. Select the Text tool. Click and drag to define a text box roughly the size of the first image minus a 20-pixel indentation (roughly 125x200). Type "Detail text." Change the font size to 12 and select the Bold option to punch up the text at this size. This text element will be dynamically populated with detail text related to the image it's placed over.
5. Select the Text tool again and drag to create a text box that covers the title background rectangle at the bottom of the screen. Type "Title" and change the Align property to Center Align in the Properties panel. This text element will also be dynamically populated with text.
6. Save the file.

At this point, your composition contains the basic building blocks of content needed for the banner (see Figure 3).

Figure 3. The imported images, shapes, and text used in the composition.

Step 3: Work with the Elements and Timeline panels

Content that you import or create using the drawing tools is stored in the Elements panel. The Elements panel controls the stacking order and locked or hidden state of the elements in the composition. Elements that appear on top of the list appear above other overlapping content. You can drag the elements to change the stacking order and use the buttons to the left of the element name to lock or hide the element as you work with it in context with the other content.

The Timeline panel shares a close relationship with the Elements panel in that it mirrors the stacking order and the locked or hidden state of any element placed along the timeline. The Timeline panel enables you to create animations or interactive structures by changing element properties across different points of time. You can place labels and actions at specific points in time to add structure and functionality to the composition. The red indicator, which is called the mark, is used to specify which point in time you want to view on the stage.

In this step, you'll rename your assets in the Elements panel and add a label to the timeline to add visual organization.

Name the elements in the Elements panel:

1. Double-click the Rectangle element in the Elements panel and rename it "Outline."
2. Change the names of the remaining elements as follows:

• Rectangle2: Rename "TitleBackground"
• Text: Rename "PageTitle"
• Text2: Rename "OverlayDetails"
• Text3: Rename "OverlayTitle"

3. Move the PageTitle element to the top of the Elements panel list, and lock it so it can no longer be selected.
4. Save the file.

Add a label to the timeline:

1. Move the mark to 0:00 if it's not already there.
2. Click the Insert Label button (downward-facing arrow) to add a label. Type the word "Overlays" into the label field and press Enter. Adding labels to points along the timeline helps define the sections of the composition. In this case, the root timeline will only contain content at the 0:00 mark.

At this point, your elements and root timeline are organized and ready for further development (see Figure 4).

Figure 4. The Timeline and Elements panels organize content in the composition.

Step 4: Build symbols and use the Library panel

Symbols are reusable objects that contain their own timeline and editing space. You can use symbols to create nested animations, isolated blocks of content, or reusable elements that share common functionality. When you add a symbol to a timeline, you are creating an instance of the symbol. The definition of the symbol is stored in the Library panel. If you edit the parent symbol in the Library panel, all instances automatically inherit the update.

In this step, you'll convert the line art you created in step 2 to a symbol that can be reused as a rollover effect over each background image.

Create a symbol and edit its timeline:

1. Choose Edit > Select All to select the four unlocked elements and right-click the selection. Choose Convert To Symbol from the Context menu. The Create Symbol dialog box appears. Type the word "Overlay" in the Symbol Name field and deselect the Autoplay Timeline option so that the symbol's timeline does not play automatically. Click OK to create the symbol.
2. Notice that the Overlay symbol appears in the Library panel, and the line art and text appear as a grouped instance of the symbol. The instance also appears on the root timeline.
3. Double-click the instance to enter its timeline. Notice that the Elements panel shows the four elements contained in the symbol, and the Timeline panel appears empty. The workflow in the symbol timeline is the same as in the root timeline, but the symbol has its own isolated editing area.
4. Click the stage text link at the top left side of the stage to return to the main timeline. On the root timeline, double-click the symbol instance to enter the symbol timeline again. Double-clicking the instance to enter its timeline enables you to edit it in the context of the timeline that contains it. You can navigate in and out of symbol timelines as often as you need to while you are working on the project.
5. Save the file.

At this point, you should be working in the symbol timeline.

Step 5: Create an animation

Animation occurs when an element's properties change over time. For example you can change the x and y properties of an element to create movement, or you can change the opacity property to create a fade. You can automatically or manually add keyframes to the timeline to define the start and end points of the animation. Keyframes hold an editable property definition for an element at a given time.

The timeline can hold multiple animations staggered at different times or nested animations built inside of symbol timelines. You can also add easing effects to slightly speed up or slow down the animation at its start or end for a more realistic effect.

In this step, you'll create a new rectangle to fade out the image while the detail text is shown. Both the rectangle and the detail text will fade in during a transition.

Create an animated fade effect:

1. Return to the Overlay symbol's timeline. Draw a rectangle the same size as the Outline element. Set the rectangle's background color to black and change the opacity to 55%.
2. Name the rectangle "Fade" and position it at the bottom of the stacking order just above the Outline element in the Elements panel. Lock all the elements except for Fade and OverlayDetail.
3. Move the mark to 0:00 if it's not there already.
4. Select the Fade and OverlayDetail elements and right-click them. Choose Add Keyframe > Opacity. Notice that the two elements now appear on the timeline with opacity keyframes.
5. Drag the mark to 0:01 and right-click the selection again. Insert another set of keyframes at the 0:01 mark.
6. Drag the mark back to 0:00 and change the opacity of the two selected elements to 0 using the Properties panel or Timeline panel. Notice that colored lines appear on the timeline representing the animation that occurs between the two sets of keyframes. You can scrub the timeline with the mark or click the Play button to preview the animation.
7. Click the Easing button to the left of the 0:00 mark and choose the Ease Out option. This step causes the animation to slow down slightly just before the end.
8. Save the file.

At this point, you should see that the symbol's timeline contains keyframes for both the OverlayDetail and the Fade elements (see Figure 5). You can drag the keyframes to different times to increase or decrease the duration of the effect.

Figure 5. The symbol's timeline contains keyframes after building a fade animation.

Step 6: Create buttons

Buttons add user interactivity to your work. For example, a button might create a clickable link that takes you to a page within a website, or it might be used to create a hotspot to enable you to change the state of the composition.

You can add mouse events to any element to turn it into a button. You can use simple shapes or text as buttons, invisible shapes as hotspots, or symbols to create buttons with rollover states.

In this step, you'll create an invisible button as the Overlay symbol's hit area, and you'll create a new symbol containing graphic states for a link button.

Create a hotspot for the Overlay symbol using an invisible button:

1. Return to the Overlay symbol's timeline.
2. Draw another rectangle the size of the Outline element. Set its opacity to 0 so that it appears transparent.
3. Name the rectangle "Hotspot" and move it to the top of the stacking order in the Elements panel. You'll add actions to make the hotspot functional in the next section, but for now, you've placed the rectangle so that it obscures all the other elements in the symbol.
4. Save the file.

Create a link button with an over state:

1. Unlock the OverlayTitle element and convert it to a symbol named "TextLink." Turn off the Autoplay Timeline option.
2. Double-click the TextLink instance to enter its timeline for editing. At this point, you're inside a symbol nested inside another symbol.
3. Add a frame label named "UP" at 0:00 and another frame label named "OV" at 0:01.
4. Select the OverlayTitle text and insert a Text Color keyframe at 0:00.
5. Drop the mark at 0:01 and add another Text Color keyframe. Change the color of the text in the Properties panel or Timeline panel. This step creates two graphic states.
6. Save the file.

At this point, you've built two buttons, including a new symbol with its own nested timeline (see Figure 6).

Figure 6. The TextLink symbol's timeline contains graphics states for the button.

Step 7: Work with actions

Actions add JavaScript runtime functionality to your composition. Runtime refers to your composition being played back in a browser. You'll add actions to elements as you design your composition and then preview the composition in a browser to see them work. You can use code snippets to easily add common commands to play and stop your animations or write actions manually using JavaScript. Actions can control the root timeline or any symbol's timeline. Actions can also be used to dynamically populate text elements and open URLs.

The first step to add an action is to bind the action to an event. For example, you can add actions to any time along a timeline to create a time-based trigger, or you can add mouse, touch, or keyboard events to any element to create a user-based trigger.

In this step, you'll add code to the Overlay symbol to activate its mouse events, and you'll add actions to the stage to dynamically populate the text and URLs in each overlay instance.

Add actions to the Overlay symbol:

1. Navigate to the Overlay symbol's timeline.
2. Click the Open Actions button on the left side of the Hotspot element in the Elements panel to open the Code panel. Select mouseover event from the Plus (+) button menu.
3. Delete the comment text that appears by default. Copy and paste the following code in its place:

   sym.play(0);
   sym.getSymbol("TextLink").stop("OV");
   $(this.lookupSelector("Hotspot")).css('cursor','pointer');

   This step will play the animation from the beginning, change the graphic state of the TextLink button, and turn on the hand cursor upon rollover.

4. Click the Plus button again and select the Mouseout event.
5. Delete the comment text and copy and paste the following code in its place:

   sym.stop(0);
   sym.getSymbol("TextLink").stop("UP");

   This step returns the animation to the beginning and resets the graphic state of the TextLink button.

6. Click the Plus button again and select the Click event.
7. Delete the comment text and copy and paste the following code in its place

   window.open(sym.getVariable("linkURL"),
   "_self");

   This step opens a new URL in the browser window. The URL is supplied dynamically by a script on the stage and can be retrieved using the getVariable action.

8. Save the file.

Add actions to the stage:

1. Return to the root timeline.
2. Select the Overlay instance on the stage and change its name to "Overlay_1" in the Elements panel. You'll create four more instances — one for each remaining background image.
3. Copy the Overlay_1 instance and paste a second instance on the stage. Position the new instance to the right of Overlay_1 and rename it "Overlay_2" in the Elements panel. Repeat this process to create three more buttons placed over the remaining images. This step creates five instances of the Overlay symbol.
4. Choose Window > Code to open the Code panel. When you launch the Code panel from the Window menu, it appears with the element tree on the right side. The element tree is a convenient way to navigate to actions placed on any element.
5. Click the Plus button next to the stage element in the tree and choose Event > creationComplete. This event works well for initializing variables and text because it runs before other actions in the composition.
6. Copy and paste the following code into the Code panel. This step populates the text and (fictitious) URLs in each of the Overlay instances:

//
Set title text for each overlay
sym.getSymbol("Overlay_1").getSymbol("TextLink").$("OverlayTitle").html("Garden");
sym.getSymbol("Overlay_2").getSymbol("TextLink").$("OverlayTitle").html("Tours");
sym.getSymbol("Overlay_3").getSymbol("TextLink").$("OverlayTitle").html("Events");
sym.getSymbol("Overlay_4").getSymbol("TextLink").$("OverlayTitle").html("Photos");
sym.getSymbol("Overlay_5").getSymbol("TextLink").$("OverlayTitle").html("Contact");
//
Set the detail text for each overlay
sym.getSymbol("Overlay_1").$("OverlayDetail").html("The
online dahlia garden is a listing of tours and events in Northern California
and an archive for seasonal events. Visit us in person or virtually
online.");

sym.getSymbol("Overlay_2").$("OverlayDetail").html("Four
new tours have been added to San Francisco, Napa, and Sonoma counties.");

sym.getSymbol("Overlay_3").$("OverlayDetail").html("Like
to plan an event at one of our gardens? Click here to learn more about event
packages and seasonal accommodations.");

sym.getSymbol("Overlay_4").$("OverlayDetail").html("View
hundreds of photos taken this season and last. Browse by dahlia type or by
gardener.");

sym.getSymbol("Overlay_5").$("OverlayDetail").html("Click
here for our contact information and hours of onsite operation.");
//
Set the link URL for each overlay

sym.getSymbol("Overlay_1").setVariable("linkURL",
"http://www.onlinedahliagarden.com/garden/");

sym.getSymbol("Overlay_2").setVariable("linkURL",
"http://www.onlinedahliagarden.com/tours/");

sym.getSymbol("Overlay_3").setVariable("linkURL",
"http://www.onlinedahliagarden.com/events/");

sym.getSymbol("Overlay_4").setVariable("linkURL",
"http://www.onlinedahliagarden.com/photos/");

sym.getSymbol("Overlay_5").setVariable("linkURL",
"http://www.onlinedahliagarden.com/contact/");

7. Save the file.

At this point, you've added all the code necessary for the banner interactivity to function (see Figure 7).

Figure 7. The Actions Editor shows the root timeline actions.

Step 8: Add a poster image

A poster image can be added to the composition to handle scenarios where HTML5 is not supported in a browser. For example, Microsoft Internet Explorer 9 supports HTML5, whereas Internet Explorer 8 and earlier versions do not. The poster image is simply a static image that's viewable by all browsers.

Edge provides options for capturing a poster image from the stage at any time along the root timeline or importing an image from an external source. In this case, you'll want to import an image because the title text for the Overlay instances is set dynamically at runtime.

In this step, you'll add a supplied image as the poster image.

Use the down-level stage feature:

1. Click the stage to show the stage properties in the Properties panel.
2. Click the Edit button in the Down-Level Stage field to switch to the Poster view.
3. Drag the poster.jpg file from the Assets menu in the Library panel to the stage. Position it at the 0,0 coordinate at the top left side of the stage.
4. Add a link to the Link URL field in the Properties panel, if desired.
5. Save the file.

At this point, you're almost finished with the project.

Step 9: Change the preloader animation

Edge compositions have a built-in preloader stage that shows a preloader animation. A preloader animation is a simple repeating animation that suggests that the composition is loading over an indeterminate amount of time. This is particularly useful if your composition contains many images that may take a moment to download before playback. You can switch between a handful of preloader variations supplied by Adobe or build your own preloader sequence as an imported GIF animation.

In this step, you'll explore your options for working with the preloader animation.

Change the preloader animation:

1. Click the stage to show the stage properties in the Properties panel.
2. Click the Edit button in the Preloader field to enter the Preloader view.
3. Click the Insert Preloader Clip Art button in the Properties panel to see the preloader template pop-up menu and select a new template. Notice the animation appears on the stage.
4. Return to the root timeline.
5. Save the file.

Step 10: Preview and publish your work

The last step in the workflow is previewing and publishing your work. You may find that you can preview your composition on the stage most of the time, but it's a good idea to view the project in a browser as you work.

Preview and publish your composition:

1. Choose File > Preview In Browser to launch the banner.html page in a browser.
2. Choose File > Publish Settings to update publishing options.
3. Choose File > Publish to publish files to the project folder.

Where to go from here

Adobe Edge and HTML5 have the ability to produce many animation effects and interactive experiences. Think about how you can work with the timeline, symbols, and actions to produce content that a developer might have normally produced for you with Flash Professional.

Also, take some time to explore the tutorials in the Lessons panel, available in Adobe Edge preview 6 and later.

For more information about Adobe Edge, check out the following resources:

• Introducing Adobe Edge preview 6
• Adobe Edge preview
• Adobe Edge showcase

‹ Back

---