Use Hyperlinks Now in Adobe Edge Preview 3

Adobe released their Preview 3 for Adobe Edge yesterday. I had a chance to download and install it this morning. If you don’t know what Adobe Edge is, it is an animation tool for web developers to code in HTML5, CSS3 and JavaScript. The code works on all browsers except Internet Explorer 8 and lesser. This latest preview build boasts some impressive new features, like adding in loops and hyperlinks.

The ability to add in hyperlinks was a feature that I mentioned was missing in my Adobe Edge Tips & Tricks article. Apparently it was a much requested feature from fans of the tool and not just me. Something else that I mentioned in my Tips & Tricks article was a bug that caused Edge to not save your work after you cut and paste objects multiple times. According to Adobe, this bug was fixed in this latest version. Adobe Edge is still missing the ability to play sound without the developer diving into the JavaScript and coding by hand. To be fair though, there’s no reason to believe that it won’t be included in future previews.

The focus of this article is to showcase the code that Adobe Edge generates for triggered hyperlinks and to show how to add triggered hyperlinks to your animation. The hyperlinks that you can add to Adobe Edge act more like redirects at this point in that the hyperlink jump occurs at a certain point in the timeline that triggers the hyperlink. To get a sense as to what I’m referring to, check out the sample.  

Getting Started With Adobe Edge

I’ll start first with how I created the triggered hyperlink in the animation and then I’ll show the code. I’ll also assume that you already read my first four articles on Adobe Edge as a prerequisite:

• A Web Developer Takes Adobe Edge for a Spin, Part 1

• Adobe Edge for Web Developers: Using the Timeline

• Adobe Edge: Creating Regions in Timelines

• Adobe Edge Tips and Tricks

Let’s start off with the new features of Adobe Edge Preview 3 by looking at the choices in the Timeline menu.

Adding Hyperlinks in Adobe Edge

To add in a hyperlink, or other new actions, click Insert Trigger. A dialog box will pop up with your options to add in snippets of JavaScript code.

You can add in triggers to Stop, Play, Go To and Stop, Go To and Play, Play in Reverse, Open URL, Set a Parameter, Get a Parameter, Change Text, Lookup Element and Hide and Show. Today, I’m going to show you how to open a URL. From the Trigger dialog box, click Open URL.

When you click Open URL, the dialog box is populated with code. That code is now in your animation and will be triggered where your playhead is located in the timeline. You can change this code however you please within this pop up box. You can think of it as a plain text editor built in to Edge. One thing that is missing with this pop up box is that there’s no Cancel or OK button. You just simply close the box and the code is saved. If you want to delete this code, you can do so from the Timeline. The Triggers are designated as a yellow diamond and are labeled as Actions in the Timeline. To delete this Action Trigger, simply select it from the Timeline and press Delete on your keyboard.

The JavaScript and HTML Code

Now, if you go into your source files, you’ll see a new type of JavaScript file saved (if you don’t see it, remember to save your work in Edge first). The new js file will be named filename_edgeActions.js. Open it up and you’ll see the code for the Trigger Action for hyperlinks:

/***********************
* Adobe Edge Composition Actions
*
* Edit this file with caution, being careful to preserve
* function signatures and comments starting with ‘Edge’ to maintain the
* ability to interact with these actions from within Adobe Edge
*
***********************/
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

//Edge symbol: ‘stage’
(function(symbolName) {

Symbol.bindTriggerAction(compId, symbolName, “Default Timeline”, 9000, function(e) {
// Navigate to a new URL in the current window
// (replace “_self” with another name for a new window)
window.open(“https://www.htmlgoodies.com/”, “_self”);

});
//Edge binding end

Symbol.bindTriggerAction(compId, symbolName, “Default Timeline”, 0, function(e) {

});
//Edge binding end

})(“stage”);
//Edge symbol end:’stage’

})(jQuery, jQuery.Edge, “EDGE-10278404”);

If your curious about the HTML code for this short animation:

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
<!–Adobe Edge Runtime–>
    <script type=”text/javascript” src=”edge_includes/jquery-1.6.2.min.js”></script>
    <script type=”text/javascript” src=”edge_includes/jquery.easing.1.3.js”></script>
    <script type=”text/javascript” src=”edge_includes/edge.0.1.3.min.js”></script>
    <script type=”text/javascript” src=”edge_includes/edge.symbol.0.1.3.min.js”></script>
    <script type=”text/javascript” charset=”utf-8″ src=”linktest_edge.js”></script>
    <script type=”text/javascript” charset=”utf-8″ src=”linktest_edgeActions.js”></script>
    <link rel=”stylesheet” href=”linktest_edge.css” />
<!–Adobe Edge Runtime End–>

</head><body style=”margin:0;padding:0;”>
    <div id=”stage” class=”EDGE-10278404″>
    </div>
</body>
</html>

Conclusion

So, there you have it. Adobe Edge continues to improve with Preview 3. Even with these advancements, there are still plenty of features that web animation developers can look forward to with Preview 4.