Student Showcase

We will take a look at your new work which is ready to share.

For the Simple Edge Project, we will discuss the following aspects of each:

  • Overall strength of the animation
  • Degree to which the file meets the needs of the assignment

Tutorial: Create an Interactive Banner Ad in Edge Animate

Download Project Files

In this tutorial, 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).

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

Create a new file and start the project:

  1. Unzip the edge_banner-tutorial.zip file.
  2. Create a new Adobe Edge Animate composition.
  3. Save the file in the edge_banner-tutorial folder with the name banner.html.
  4. Look inside the project folder. The images folder is part of the downloaded assets, but all the other files were created by Edge Animate. The banner.an file is the editable file used to open the composition in Edge Animate. 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

A. 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.
  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 800px and the height to 300px.
  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.
Interactive Banners in Edge Animate

B. 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.
Interactive Banners in Edge Animate

C. 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 160×275.
  3. Click the Background Color swatch and set Alpha to 0 (right-hand slider at bottom).
  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.
Interactive Banners in Edge Animate

D. 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. Click the x to close the text box.
  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
  1. 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 125×200). 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.
  2. 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.
  3. 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.

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

Step 3: Work with the Elements and Timeline panels

A. 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
  1. Move the PageTitle element to the top of the Elements panel list, and lock it so it can no longer be selected.
  2. Save the file.

 

B. 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.
Interactive Banners in Edge Animate Interactive Banners in Edge Animate

At this point, your elements and root timeline are organized and ready for further development.

Interactive Banners in Edge Animate

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 (the rectangles and the Overlay text boxes), 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 under Symbols, 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 symbol instance on the stage to enter its timeline. Notice that the Elements panel shows the four elements contained in the symbol, and the Timeline panel similarly contains only these four elements. 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 (where it says Stage / Overlay) 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 again.

Interactive Banners in Edge Animate

Step 5: Create an animation

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. Working inside 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 OverlayDetails.
  3. Move the mark to 0:00 if it’s not there already.
  4. Select the Fade and OverlayDetails 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 Opacity 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 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.

Figure 5. The symbol’s timeline contains keyframes and 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.

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

  1. Stay in 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.
Interactive Banners in Edge Animate

B. 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 (for “over”) at 0:01.
  4. Select the OverlayTitle text and insert a Text Color keyframe at 0:00.
  5. Move the playhead to 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.

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.

A. 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.
  9. Go to File > Preview in Browser to test the mouse hover, mouse out, and click behaviors in the first photo panel. You should get a 404 error on click.
Interactive Banners in Edge Animate

B. Add actions to the stage:

    1. Return to the root timeline (Stage).
    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 (or use Opt+Shift and drag a new copy from the original). 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 left 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").$("OverlayDetails").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").$("OverlayDetails").html("Four new tours have been added to San Francisco, Napa, and Sonoma counties.");
sym.getSymbol("Overlay_3").$("OverlayDetails").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").$("OverlayDetails").html("View hundreds of photos taken this season and last. Browse by dahlia type or by gardener.");
sym.getSymbol("Overlay_5").$("OverlayDetails").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/");
  1. Save the file. Preview in the browser again.

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.

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 Animate 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 at the very top 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. Return to the root timeline.
  6. Save the file.

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

Interactive Banners in Edge Animate

Step 9: Change the preloader animation

Edge Animate 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. Back in the root timeline, click the top edge of 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 with a double-click. Notice the animation appears on the stage.
  4. Return to the root timeline.
  5. Save the file.

Your file should look and behave like this in the browser.

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 again to launch the banner.html page in a browser. You may see your new preloader appear first.
  2. Choose File > Publish Settings to update publishing options. Click Cancel for now.
  3. Choose File > Publish to publish files to the project folder. All of the files needed for the web appear in a new folder set named publish/web in your main project folder.

(This tutorial is adapted from the Adobe tutorial: Ten steps to creating an interactive banner with Adobe Edge. Follow my steps above, not the ones in the linked page. The earlier tutorial is for the beta version, not version 1 of Edge Animate.)