Adding events to your Adobe Edge HTML5 animations

Although HTML5 animations using Adobe Edge is very new but the things that you can do with this new tool is breathtaking though, which otherwise would have been very hard to achieve writing code to do the same. I tried some basic animated banners using Edge and it looked just like flash banners. Alright, so we know that we can create cool stuff with Edge but I wanted to add events to the animated banners. Lets say that on click of a text or an image you are taken to a new URL or may be you open a pop up.  The requirements can be different. So lets quickly discus on how to add events to your  HTML5 animation that you have created using Edge.

Things you should know
Basic use of Adobe Edge – the new tool to create HTML5 animations. If you are not aware of Adobe Edge then you can visit here: http://labs.adobe.com/technologies/edge/

Lets get started
Ok, so I have a basic animation done. Its called the HTML5 ad. You can have a look at it here: http://jbk404.site50.net/html5/edge/html5ad.html

All I want is to take the user to the HTML5 official page when he clicks on the HTML5 logo at the end of the animation. You can see that when you hover the logo at the end of the animation the mouse cursor turns to a hand and also if you click you will be taken to the W3C HTML5 page.

Edge components
Adobe Edge creates three basic files for the animation application that you have done. It will create a html page which of course is in HTML5 standard with HTML5 doc-type. It also creates a CSS file which contains the style information and a JavaScript file which has the data. Adobe Edge also takes help of JQuery for the basic easing effects n all. So you can find them too inside a folder called edge_includes.

Adding Event

DOM tree in Adobe Edge

Ok, to add events you have to write custom JavaScript. I am writing inline script (since it is only a few lines) in the html page that was created by Edge. Our main purpose is to grab the id of the object to which we will add the event listener to. Note that every object that you drag onto your stage in Adobe Edge and use it in animation effects become a part of the page DOM, so you can manipulate them with JavaScript. You can see the id’s of all the objects/elements in Edge if you select Window -> Elements from the menu.  Also you can check out the id of the object you want to add the event to from the  JavaScript file that was created by Edge. You will have a property called dom and it will list all the objects along with their id’s.

The HTML5 logo at the end has an id of SVGImage2 which was created by default as you can see in the image. Now I can use that id to write my custom event handler. So, lets create a script block inside my html page – html5ad.html

<html>
<head>
	<title>Support HTML5</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" src="edge_includes/jquery-1.4.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.1.min.js"></script>
    <script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="html5ad_edge.js"></script>
    <link rel="stylesheet" href="html5ad_edge.css"/>
    <!--Adobe Edge Runtime End-->

    <!-- Custom Script block to add event -->
    <script type="text/javascript">
        $(document).ready(function(){
            $("#SVGImage2").click(function(){
                //take to html5 official page
                window.location.href = "http://www.w3.org/html/logo/";
            });
        });
    </script>
</head>
<body>
	<div id="stage" class="symbol_stage">
	</div>
</body>
</html>

You can see the custom script block where I have used the id (#SVGImage2) of the object and some basic JQuery event hander to handle the mouse click event. When user clicks on the logo then window.location.href takes him to a new page. This is pretty simple and using similar techniques we can do some complex stuff. Also you can see the references to the script and css files that Edge created on top of the script block that we created.

Now to add the hand cursor to the logo just open the css file that Edge created, in my case it is the html5ad_edge.css. And then add the cursor:pointer rule to the selector, like this

#SVGImage2 {
    opacity: 0;
    -webkit-transform: translateX(205px) translateY(48px) scaleX(0.34) scaleY(0.34);
    -moz-transform: translateX(205px) translateY(48px) scaleX(0.34) scaleY(0.34);
    -ms-transform: translateX(205px) translateY(48px) scaleX(0.34) scaleY(0.34);
    -o-transform: translateX(205px) translateY(48px) scaleX(0.34) scaleY(0.34);
    cursor:pointer;
}

This is it. Now we have added a custom event to the animated banner.

6 thoughts on “Adding events to your Adobe Edge HTML5 animations

  1. Joseph,

    Thanks – it works better than a charm – I hope others working with edge preview 1 find this post as well. Thanks again – John Kent

    p.s. I am not savvy with js at all

    • not sure on that, should not happen. You can try one thing- copy the css text (one that Adoe Edge created for you) and create your own css file and paste it there. Then provide a reference of the CSS file that you created in the main HTML file and check.
      Let me know….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s