Adding events to your adobe edge html5

Adding events to your Adobe Edge HTML5 animations
Another post from my blog http://jbkflex.wordpress.com

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>



<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"/>

<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.

Adding events to your adobe edge html5

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

Adding events to your adobe edge html5