• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
August 22, 2012

Adobe Edge Preview

Posted by Stephen Hill

As the release of HTML5 approaches in 2014 companies are releasing animation tools that utilize the full power of browsers that support CSS3 and JavaScript files. Until the release of these tools, a developer was left writing code in text editors to create web standard animation. HTML, CSS and Javascript do not offer a way to easily produce professional level interactive multimedia without the use of a plug-in such as Flash or Shockwave. Adobe has released a preview of its much much-anticipated Edge, Syncha has developed Animator and Tumult Hype.

All of these tools are good ways to start creating animations and interactive pages for HTML5. The most powerful of these tools, even in its early release preview phase is Adobe Edge. Edge promises to be much more than a quick and dirty way to build animations, rather a developer’s app with access to the JavaScript code for the elements actions and a workflow that keeps collaboration in mind. The JQuery and HTML files can be edited by multiple users updating Edge to incorporate the changes in the project.

When opening Adobe Edge, the well-executed UI is typical of a professional animation tool. The interface is arranged similar to Adobe Flash or After Effects. You see a Stage, Timeline, Library and Properties panels. Other panels including Elements, Symbols, and Fonts are also visible.

Adobe Edge Interface

Workflow is intuitive of timeline-driven animation programs.

When saving an Edge project you will notice that Edge produces 5 files.

The project file:
     *.edge

An HTML file:
     *.html

And 3 JavaScript files:
     *_edge.js
     *_edgeActions.js
     *_edgePreload.js

The HTML is simple. It includes a basic Document Type Declaration, head tag, and a body tag with a div to load the edge animation. At the time of this writing, preview 6.1, there is not a way to edit the html file inside of edge.


<!DOCTYPE html>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Untitled<title>

<!–Adobe Edge Runtime–>

<script type=”text/javascript” charset=”utf-8″ src=”sample_edgePreload.js”></script>

<style>

.edgeLoad-EDGE-1 { display:none; }

</style>

<!–Adobe Edge Runtime End–>

</head>

<body style=”margin:0;padding:0;”>

<div id=”Stage” class=”EDGE-1″> </div>

</body>

</html>

Adobe has provided downloadable files on their Edge showcase that demonstrate how edge files work and can easily be built. When opening one of the projects, previewing the code panel demonstrates how development can be accomplished efficiently right inside of Edge.

Adobe Edge code panel preview

In conclusion Adobe Edge is a powerful tool that will help streamline the process for designers and animators producing clean, web standard animations for HTML5. Try it out for yourself. Download the preview while Adobe is still offering it for free here.

adobeadobe edgeCSS3html5javascript
Previous
Next

Latest White Papers

  • Shifting Plans for 2020 & Beyond
  • Game On: How Brands Can Log Into A Diverse Multi-Billion Dollar Industry
  • What CCPA Means For Brands
  • How Google is Improving Consumer Data Privacy
  • Ways to Prepare for the Cookieless Future
  • See all White Papers

Featured Posts

  • Ad Age Names PMG #1 Best Place to Work in 2021
  • Hindsight 2020 & Looking Ahead to 2021
  • Preparing for Streaming’s Growth & The Future of TV Buying
  • MediaPost Names PMG Independent Agency of the Year
  • PMG Client Portfolio Trends During Amazon Prime Day 2020

Categories

  • Consumer Insights
  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Digital TV & Video
  • Ecommerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • Programmatic & Display
  • SEO
  • Social Media
  • Structured Data
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2021 PMG Worldwide, LLC, All Rights Reserved
  • Contact
  • Privacy Policy
 Tweet
 Share
 Tweet
 Share
 Tweet
 Share
 LinkedIn
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.