Successfully reported this slideshow.

Adding events to your adobe edge html5


Published on

Another tutorial from my Blog This one talks about adding custom events to the HTML5 animations that you have created using Adobe Edge, the new tool for creating HTML5 animations.

Published in: Technology, Design
  • Be the first to comment

Adding events to your adobe edge html5

  1. 1. Adding events to your Adobe Edge HTML5 animationsAnother post from my blog http://jbkflex.wordpress.comAlthough HTML5 animations using Adobe Edge is very new but the things that you can do with this new tool isbreathtaking though, which otherwise would have been very hard to achieve writing code to do the same. I tried somebasic animated banners using Edge and it looked just like flash banners. Alright, so we know that we can create coolstuff with Edge but I wanted to add events to the animated banners. Lets say that on click of a text or an image youare taken to a new URL or may be you open a pop up. The requirements can be different. So lets quickly discus onhow to add events to your HTML5 animation that you have created using Edge.Things you should knowBasic use of Adobe Edge – the new tool to create HTML5 animations. If you are not aware of Adobe Edge then youcan visit here: get startedOk, so I have a basic animation done. Its called the HTML5 ad. You can have a look at ithere: I want is to take the user to the HTML5 official page when he clicks on the HTML5 logo at the end of theanimation. You can see that when you hover the logo at the end of the animation the mouse cursor turns to a handand also if you click you will be taken to the W3C HTML5 page.Edge componentsAdobe Edge creates three basic files for the animation application that you have done. It will create a html pagewhich of course is in HTML5 standard with HTML5 doc-type. It also creates a CSS file which contains the styleinformation and a JavaScript file which has the data. Adobe Edge also takes help of JQuery for the basic easingeffects n all. So you can find them too inside a folder called edge_includes.Adding Event
  2. 2. DOM tree in Adobe EdgeOk, to add events you have to write custom JavaScript. I am writing inline script (since it is only a few lines) in thehtml page that was created by Edge. Our main purpose is to grab the id of the object to which we will add the eventlistener to. Note that every object that you drag onto your stage in Adobe Edge and use it in animation effectsbecome a part of the page DOM, so you can manipulate them with JavaScript. You can see the id’s of all theobjects/elements in Edge if you select Window -> Elements from the menu. Also you can check out the id of theobject you want to add the event to from the JavaScript file that was created by Edge. You will have a propertycalled 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. NowI 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-->
  3. 3. <!-- Custom Script block to add event --> <script type="text/javascript"> $(document).ready(function(){ $("#SVGImage2").click(function(){ //take to html5 official page window.location.href = ""; }); }); </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 JQueryevent hander to handle the mouse click event. When user clicks on the logo then window.location.href takes him to anew page. This is pretty simple and using similar techniques we can do some complex stuff. Also you can see thereferences 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 thehtml5ad_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);
  4. 4. -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.