by Chris Converse

Created

July 30, 2014

The new Actions Panel in Edge Animate CC 2014 offers a new streamlined workflow for visually adding actions to specific elements and on the timeline.

Actions allow us to provide event-based instructions to our composition. These instructions include playing an animation, creating a hyperlink, creating article links in a DPS magazine, changing text, and many more.

Assigning Actions

Actions can be assigned directly to the timeline, or to individual elements in your composition. To assign an action to the stage, use the insert trigger button in the actions layer of the timeline. The action, or trigger, will be assigned to that point-in-time on the timeline. To assign an action to an element, right-click on an element on the stage, and choose “Open Actions” for that element.

Figure 1:  Actions, also referred to triggers, can be assigned to the timeline or specific elements in your composition.

Figure 1:
Actions, also referred to triggers, can be assigned to the timeline or specific elements in your composition.

 

If you assign an action to the timeline, you can immediately begin choosing the action and target properties. If you assign an action to an element in the composition, you’ll first need to choose the event type that triggers the action. Event types include things like clicking, double clicking, mouse overs, or even touch events, such as tapping and swiping.

Figure 2: The new Actions Panel interface shows a visual representation of the composition structure

Figure 2:
The new Actions Panel interface shows a visual representation of the composition structure

With your event type decided, the process of assigning an action has been broken down into two main steps; picking an action, and picking a target.

Easier Targeting

While the syntax of the Edge Animate framework has not changed, the new interface allows you to logically assign actions and target elements by simply selecting items listed in columns.

In previous versions of Edge Animate, targeting a symbol involved assigning an action named Get Symbol. Once assigned, you needed to manually assign the instance name assigned in the Properties panel. In the 2014 release, this process has been completely overhauled.

Figure 3: Targeting a nested symbol is now a fully visual 4-step process.

Figure 3:
Targeting a nested symbol is now a fully visual 4-step process.

In the figure above, we are assigning a “play” action to a symbol placed on the stage. In JavaScript, these elements are part of a nested set of elements, and the targeting needs to be exact for the browser to locate the correct elements. Edge Animate visualizes this structure in the new Actions Panel, and provides us with an interactive method for assigning our actions.

DPS Linking

If you have worked with Hyperlinks in InDesign or HTML Stacks in Adobe DPS (Digital Publishing Suite), then you are familiar with the “navto:” protocol. By using “navto://” in a hyperlink, and specifying an article name (as defined in the Folio Builder panel), you can create links form one article to another.

Figure 4: The new Adobe DPS action category allows you to quickly link to articles with a digital magazine created with InDesign.

Figure 4:
The new Adobe DPS action category allows you to quickly link to articles with a digital magazine created with InDesign.

Edge Animate now includes an action category called Adobe DPS. This action will automatically format a hyperlink based on the DPS syntax for inter-article linking in a digital magazine. To create a DPS link, choose the Adobe DPS category, then click the button Navigate Article. There is even an option for linking to a specific page of an article.

Once complete, you can test this by loading the Edge Animate composition into an InDesign folio, and previewing it in the Adobe Content viewer.

Creating Custom Snippets

Another great time-saving feature is the new My Snippets feature. This allows you to save snippets of code for later reuse in the current project, or any project opened on your computer.

Figure 5: Saving actions into custom snippets provides a fast, and efficient way to share actions across multiple elements, or multiple projects

Figure 5:
Saving actions into custom snippets provides a fast, and efficient way to share actions across multiple elements, or multiple projects

Custom snippets can contain any code, not just code generated by Edge Animate. In the figure above you see a code snippet I use ofter in my projects in order to randomize my animations. To create a custom snippet, select the code, then click the plus (+) sign next to the My Snippet action category. You will be prompted to name the snippet, and in turn, this name will become the button you use to apply this code to other actions.

To edit a snippet, simply right-click the button name to edit, rename, or delete the custom snippet.

Learn more

Learn more about the new Actions Panel on Lynda.com. If you don’t have a subscription, use this free 7-Day Trial trial:  http://lynda.com/trial/chrisconverse


Chris Converse is a partner at Codify Design Studio, which has a unique focus on both design and development. Chris develops across such languages as PHP, ActionScript, HTML, CSS, and JavaScript, making his design execution optimal across various media. Chris is a featured speaker at various industry conferences, including the How Design and Interactive Conferences, AIGA, Adobe MAX, and EMERGE. Chris has also written, designed, and hosted video training titles on lynda.com, Udemy.com, Amazon.com, HOW Design University, and Adobe KnowHow. Chris graduated from Rochester Institute of Technology with a BFA in graphic design.