Skip to content

Instantly share code, notes, and snippets.

@davydka

davydka/Edge Notes.md

Last active September 10, 2015 13:48
Show Gist options
  • Save davydka/f1cfe502b8f16495be9c to your computer and use it in GitHub Desktop.
Save davydka/f1cfe502b8f16495be9c to your computer and use it in GitHub Desktop.
Download ZIP
Adobe Edge HTML5 Banners
Raw
Edge Notes.md

Here are the steps we've found for creating an html5 banner using Adobe Edge.

  1. Open Edge
  • Create New
  • Open the html file created in your project and add the following code in the header, before the Adobe Edge Runtime comment: <meta name="ad.size" content="width=728,height=90"><script>var clickTag = "http://www.google.com";</script> Be sure to change the height and width to the appropriate size of your ad.
  • And finally, wrap div#Stage in an anchor tag. Be sure to mantain the proper classname. For instance: `
` * After that, create your banner using the timeline and other Edge authoring tools. It's similar to Flash or After Effects. Be sure to remove unused images in the /images directory. Otherwise, they will take up space and affect your file size limitations. Also, use as much spriting as possible to reduce overall file size. Use SVG when possible, because they are small in file size and look very sharp. * When ready, click File -> Publish Settings. Verify "Host runtime files on Adobe CDN" is checked. * Publish. This will create a /publish directory in your project folder. * Open the html file in /publish and change the Adobe Edge CDN to http secure: `src="https://animate.adobe.com...` * That's it. Deliver the files to your producer.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment