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.
Before you get started:
Create a new file and start the project:
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).
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:
Import images to create the background graphics:
Draw shapes using the Rectangle tool:
Add text to create a title for the banner:
At this point, your composition contains the basic building blocks of content needed for the banner (see Figure 3).
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:
Add a label to the timeline:
At this point, your elements and root timeline are organized and ready for further development (see Figure 4).
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:
At this point, you should be working in the symbol timeline.
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:
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.
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:
Create a link button with an over state:
At this point, you've built two buttons, including a new symbol with its own nested timeline (see Figure 6).
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:
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.
This step returns the animation to the beginning and resets the graphic state of the TextLink button.
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.
Add actions to the stage:
// 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/");
At this point, you've added all the code necessary for the banner interactivity to function (see Figure 7).
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:
At this point, you're almost finished with the project.
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:
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:
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:
Dan Carr is the owner, lead developer, and trainer for Dan Carr Design in San Francisco. With years of experience developing for Macromedia and Adobe, Dan has created a range of features available in Flash, including e-learning templates, UI components, and Developer Resource Kit extensions. Dan teaches Flash design and ActionScript classes in Northern California and develops e-learning and web applications for the public, as well as for Adobe product teams.