PMG Digital Made for Humans

Adobe Edge Preview

3 MINUTE READ | August 22, 2012

Adobe Edge Preview

Author's headshot

Stephen Hill

Stephen Hill has written this article. More details coming soon.

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.

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>



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


<!–Adobe Edge Runtime–>

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


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


<!–Adobe Edge Runtime End–>


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

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



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.

Stay in touch

Bringing news to you

Subscribe to our newsletter

By clicking and subscribing, you agree to our Terms of Service and Privacy Policy

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.

Related Content

thumbnail image

Campaigns & Client WorkSocial MediaProgrammatic AdvertisingCreative DesignStreaming & VideoStrategyDigital MarketingCompany News

PMG Partners with Old Navy to Create a Fully Inclusive Shopping Experience with BODEQUALITY

4 MINUTES READ | August 20, 2021

thumbnail image

Campaigns & Client WorkCreative DesignStreaming & VideoPlatforms & MediaDigital Marketing

The Most Memorable Ads of Super Bowl LV

4 MINUTES READ | February 8, 2021

thumbnail image

Consumer TrendsStreaming & VideoData & TechnologyStrategyPlatforms & MediaDigital Marketing

Preparing for Streaming’s Growth & The Future of TV Buying

7 MINUTES READ | December 11, 2020

thumbnail image

PMG CultureCampaigns & Client WorkCompany News

PMG Boosts Brand Creative and Expands Creative Studio

3 MINUTES READ | November 24, 2020

thumbnail image

Campaigns & Client WorkCreative DesignCompany NewsDigital Marketing

Athleta Honors Women Everywhere in New Post-Election Ad Campaign

2 MINUTES READ | November 10, 2020

thumbnail image

Why You Should Tap TikTok Influencers Now

4 MINUTES READ | July 29, 2020

thumbnail image

Will UGC Be the Norm in a PostCOVID World?

6 MINUTES READ | June 26, 2020

thumbnail image

Staying True to Your Brand During a Crisis

7 MINUTES READ | June 16, 2020

thumbnail image

COVID-19 Crisis: A Pop Culture Break

3 MINUTES READ | March 31, 2020

thumbnail image

Navigating Ad Messaging During COVID-19

6 MINUTES READ | March 30, 2020